From 437401539f71c11cb10f010f902b572bc7af9bfe Mon Sep 17 00:00:00 2001
From: JW-CH <17313367+JW-CH@users.noreply.github.com>
Date: Fri, 20 Sep 2024 11:24:42 +0200
Subject: [PATCH 1/2] auto reload web, add progressbar, changes to docker
 compose for auto reloading

---
 docker/docker-compose.dev.yml                 |   1 +
 immichFrame.Web/eslint.config.js              |  13 ++-
 immichFrame.Web/package.json                  |   5 +-
 .../components/elements/imageOverlay.svelte   |  14 +--
 .../components/elements/progress-bar.svelte   | 101 ++++++++++++++++++
 .../components/elements/slideshow-bar.svelte  |  55 ++++++++++
 .../lib/components/home-page/home-page.svelte |  66 +++++++++++-
 .../src/lib/stores/slideshow.store.ts         |  48 +++++++++
 immichFrame.Web/src/lib/utils.ts              |   4 +
 9 files changed, 292 insertions(+), 15 deletions(-)
 create mode 100644 immichFrame.Web/src/lib/components/elements/progress-bar.svelte
 create mode 100644 immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte
 create mode 100644 immichFrame.Web/src/lib/stores/slideshow.store.ts

diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index 09d13d7..aa1147c 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -16,4 +16,5 @@ services:
       - 5173:5173
     volumes:
       - ~/immichFrame_Config:/app/Config
+      - ../immichFrame.Web/src:/app/src
       # - PATH/TO/CONFIG:/app/Config
diff --git a/immichFrame.Web/eslint.config.js b/immichFrame.Web/eslint.config.js
index 62dbd03..d10144b 100644
--- a/immichFrame.Web/eslint.config.js
+++ b/immichFrame.Web/eslint.config.js
@@ -3,6 +3,7 @@ import ts from 'typescript-eslint';
 import svelte from 'eslint-plugin-svelte';
 import prettier from 'eslint-config-prettier';
 import globals from 'globals';
+import parser from 'svelte-eslint-parser';
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -22,12 +23,22 @@ export default [
 	{
 		files: ['**/*.svelte'],
 		languageOptions: {
+			parser: parser,
+			ecmaVersion: 5,
+			sourceType: 'script',
+
 			parserOptions: {
-				parser: ts.parser
+				parser: '@typescript-eslint/parser'
 			}
 		}
 	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/']
+	},
+	{
+		files: ['*.ts'],
+		rules: {
+			'no-undef': 'off'
+		}
 	}
 ];
diff --git a/immichFrame.Web/package.json b/immichFrame.Web/package.json
index 91efdb9..972431c 100644
--- a/immichFrame.Web/package.json
+++ b/immichFrame.Web/package.json
@@ -10,10 +10,7 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"api": "oazapfts https://localhost:7018/swagger/v1/swagger.json src/lib/immichFrameApi.ts",
-		"dev-up": "docker compose -f ../docker/docker-compose.dev.yml up --remove-orphans || make dev-down",
-		"dev-down": "docker compose -f ../docker/docker-compose.dev.yml down --remove-orphans",
-		"dev-update": "docker compose -f ../docker/docker-compose.dev.yml up --build -V --remove-orphans"
+		"api": "oazapfts https://localhost:7018/swagger/v1/swagger.json src/lib/immichFrameApi.ts"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
diff --git a/immichFrame.Web/src/lib/components/elements/imageOverlay.svelte b/immichFrame.Web/src/lib/components/elements/imageOverlay.svelte
index 0835791..c7e8d0c 100644
--- a/immichFrame.Web/src/lib/components/elements/imageOverlay.svelte
+++ b/immichFrame.Web/src/lib/components/elements/imageOverlay.svelte
@@ -7,8 +7,6 @@
 
 	function clickNext() {
 		dispatch('next');
-		dispatch('back');
-		dispatch('settings');
 	}
 	function clickBack() {
 		dispatch('back');
@@ -23,23 +21,23 @@
 
 <div id="image-overlay" class="grid grid-cols-3 gap-2 content-stretch">
 	<div class="overlay-item group">
-		<button on:click={clickBack} class="opacity-0 group-hover:opacity-100"
+		<button on:click={clickBack} class="opacity-0 group-hover:opacity-100 frame-color"
 			><Icon title="Text" path={mdiChevronLeft} size="20em" /></button
 		>
 	</div>
 
 	<div class="overlay-item grid grid-rows-3 gap-2 content-stretch">
-		<button on:click={clickSettings} class="opacity-0 hover:opacity-100"
+		<button on:click={clickSettings} class="opacity-0 hover:opacity-100 frame-color"
 			><Icon title="Text" path={mdiCog} size="20em" /></button
 		>
-		<button on:click={clickPause} class="opacity-0 hover:opacity-100"
+		<button on:click={clickPause} class="opacity-0 hover:opacity-100 frame-color"
 			><Icon title="Text" path={mdiPause} size="20em" /></button
 		>
 		<div></div>
 	</div>
 
 	<div class="overlay-item group">
-		<button on:click={clickNext} class="opacity-0 group-hover:opacity-100"
+		<button on:click={clickNext} class="opacity-0 group-hover:opacity-100 frame-color"
 			><Icon title="Text" path={mdiChevronRight} size="20em" />
 		</button>
 	</div>
@@ -62,8 +60,10 @@
 		justify-content: center; /* Centers the SVG horizontally */
 		align-items: center; /* Optionally, centers the SVG vertically as well */
 		/* background-color: rgba(75, 75, 75, 0.4); */
-		color: wheat;
 		height: 100%;
 		width: 100%;
 	}
+	.frame-color {
+		color: wheat;
+	}
 </style>
diff --git a/immichFrame.Web/src/lib/components/elements/progress-bar.svelte b/immichFrame.Web/src/lib/components/elements/progress-bar.svelte
new file mode 100644
index 0000000..3732626
--- /dev/null
+++ b/immichFrame.Web/src/lib/components/elements/progress-bar.svelte
@@ -0,0 +1,101 @@
+<script context="module" lang="ts">
+	export enum ProgressBarStatus {
+		Playing = 'playing',
+		Paused = 'paused'
+	}
+</script>
+
+<script lang="ts">
+	import { handlePromiseError } from '$lib/utils';
+
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { tweened } from 'svelte/motion';
+
+	/**
+	 * Autoplay on mount
+	 * @default false
+	 */
+	export let autoplay = false;
+
+	/**
+	 * Progress bar status
+	 */
+	export let status: ProgressBarStatus = ProgressBarStatus.Paused;
+
+	export let hidden = false;
+
+	export let duration = 5;
+
+	const onChange = async () => {
+		progress = setDuration(duration);
+		await play();
+	};
+
+	let progress = setDuration(duration);
+
+	// svelte 5, again....
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	$: duration, handlePromiseError(onChange());
+
+	$: {
+		if ($progress === 1) {
+			dispatch('done');
+		}
+	}
+
+	const dispatch = createEventDispatcher<{
+		done: void;
+		playing: void;
+		paused: void;
+	}>();
+
+	onMount(async () => {
+		if (autoplay) {
+			await play();
+		}
+	});
+
+	export const play = async () => {
+		status = ProgressBarStatus.Playing;
+		dispatch('playing');
+		await progress.set(1);
+	};
+
+	export const pause = async () => {
+		status = ProgressBarStatus.Paused;
+		dispatch('paused');
+		await progress.set($progress);
+	};
+
+	export const restart = async (autoplay: boolean) => {
+		await progress.set(0);
+
+		if (autoplay) {
+			await play();
+		}
+	};
+
+	export const reset = async () => {
+		status = ProgressBarStatus.Paused;
+		await progress.set(0);
+	};
+
+	function setDuration(newDuration: number) {
+		return tweened<number>(0, {
+			duration: (from: number, to: number) => (to ? newDuration * 1000 * (to - from) : 0)
+		});
+	}
+</script>
+
+{#if !hidden}
+	<span
+		class="absolute left-0 bottom-0 h-[3px] framebg-color"
+		style:width={`${$progress * 100}%`}
+	/>
+{/if}
+
+<style>
+	.framebg-color {
+		background-color: wheat;
+	}
+</style>
diff --git a/immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte b/immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte
new file mode 100644
index 0000000..7f175fd
--- /dev/null
+++ b/immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import ProgressBar, { ProgressBarStatus } from '$lib/components/elements/progress-bar.svelte';
+	import { slideshowStore } from '$lib/stores/slideshow.store';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+
+	const dispatch = createEventDispatcher<{
+		done: void;
+	}>();
+
+	const { restartProgress, stopProgress } = slideshowStore;
+
+	let progressBarStatus: ProgressBarStatus;
+	let progressBar: ProgressBar;
+
+	let unsubscribeRestart: () => void;
+	let unsubscribeStop: () => void;
+
+	onMount(() => {
+		unsubscribeRestart = restartProgress.subscribe((value) => {
+			if (value) {
+				progressBar.restart(value);
+			}
+		});
+
+		unsubscribeStop = stopProgress.subscribe((value) => {
+			if (value) {
+				progressBar.restart(false);
+			}
+		});
+	});
+
+	onDestroy(() => {
+		if (unsubscribeRestart) {
+			unsubscribeRestart();
+		}
+
+		if (unsubscribeStop) {
+			unsubscribeStop();
+		}
+	});
+
+	const handleDone = () => {
+		dispatch('done');
+		progressBar.restart(true);
+	};
+</script>
+
+<ProgressBar
+	autoplay
+	hidden={false}
+	duration={5}
+	bind:this={progressBar}
+	bind:status={progressBarStatus}
+	on:done={handleDone}
+/>
diff --git a/immichFrame.Web/src/lib/components/home-page/home-page.svelte b/immichFrame.Web/src/lib/components/home-page/home-page.svelte
index eaf2d62..44dc2c0 100644
--- a/immichFrame.Web/src/lib/components/home-page/home-page.svelte
+++ b/immichFrame.Web/src/lib/components/home-page/home-page.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
 	import * as api from '$lib/immichFrameApi';
 	import Image from '../elements/image.svelte';
-	import { onMount } from 'svelte';
 	import ThumbHashImage from '../elements/thumbHashImage.svelte';
 	import ImageOverlay from '../elements/imageOverlay.svelte';
 	import Clock from '../elements/clock.svelte';
+	import ProgressBar, { ProgressBarStatus } from '$lib/components/elements/progress-bar.svelte';
+	import { slideshowStore } from '$lib/stores/slideshow.store';
+	import { onDestroy, onMount } from 'svelte';
 	api.defaults.baseUrl = 'http://localhost:8080/'; // TODO: replace configurable settings
 
 	let imageData: Blob | null;
 	let assetData: api.AssetResponseDto | null;
 
+	const { restartProgress, stopProgress } = slideshowStore;
+
+	let progressBarStatus: ProgressBarStatus;
+	let progressBar: ProgressBar;
+
+	let unsubscribeRestart: () => void;
+	let unsubscribeStop: () => void;
+
 	async function loadImage() {
+		console.log('loading image');
 		let assetRequest = await api.getAsset();
 
 		if (assetRequest.status != 200) {
@@ -28,15 +39,64 @@
 		imageData = imageRequest.data;
 	}
 
-	onMount(async () => loadImage());
+	onMount(async () => {
+		unsubscribeRestart = restartProgress.subscribe((value) => {
+			if (value) {
+				progressBar.restart(value);
+			}
+		});
+
+		unsubscribeStop = stopProgress.subscribe((value) => {
+			if (value) {
+				progressBar.restart(false);
+			}
+		});
+
+		console.log('mount load');
+		await loadImage();
+	});
+
+	onDestroy(() => {
+		if (unsubscribeRestart) {
+			unsubscribeRestart();
+		}
+
+		if (unsubscribeStop) {
+			unsubscribeStop();
+		}
+	});
+
+	const handleDone = async () => {
+		console.log('done load');
+		await loadImage();
+	};
 </script>
 
 <section id="home-page" class="fixed grid h-screen w-screen bg-black">
 	{#if imageData && assetData}
 		<Clock />
-		<ImageOverlay on:next={async () => loadImage()} />
+		<ImageOverlay
+			on:next={async () => {
+				progressBar.restart(true);
+				console.log('next load');
+				await loadImage();
+			}}
+			on:back={async () => {
+				progressBar.restart(true);
+				console.log('back load');
+				await loadImage();
+			}}
+		/>
 		<ThumbHashImage thumbHash={assetData.thumbhash ?? ''} />
 		<Image data={imageData} />
+		<ProgressBar
+			autoplay
+			hidden={false}
+			duration={5}
+			bind:this={progressBar}
+			bind:status={progressBarStatus}
+			on:done={handleDone}
+		/>
 	{:else}
 		<!-- maybe show immich logo?-->
 		<p class="text-white">LOADING ...</p>
diff --git a/immichFrame.Web/src/lib/stores/slideshow.store.ts b/immichFrame.Web/src/lib/stores/slideshow.store.ts
new file mode 100644
index 0000000..dd330c1
--- /dev/null
+++ b/immichFrame.Web/src/lib/stores/slideshow.store.ts
@@ -0,0 +1,48 @@
+import { writable } from 'svelte/store';
+
+export enum SlideshowState {
+  PlaySlideshow = 'play-slideshow',
+  StopSlideshow = 'stop-slideshow',
+  None = 'none',
+}
+
+
+function createSlideshowStore() {
+  const restartState = writable<boolean>(false);
+  const stopState = writable<boolean>(false);
+
+  const slideshowState = writable<SlideshowState>(SlideshowState.None);
+
+  return {
+    restartProgress: {
+      subscribe: restartState.subscribe,
+      set: (value: boolean) => {
+
+        console.log('restartProgress value is: ')
+        console.log(value)
+        // Trigger an action whenever the restartProgress is set to true. Automatically
+        // reset the restart state after that
+        if (value) {
+          restartState.set(true);
+          restartState.set(false);
+        }
+      },
+    },
+    stopProgress: {
+      subscribe: stopState.subscribe,
+      set: (value: boolean) => {
+        console.log('stopProgress value is: ')
+        console.log(value)
+        // Trigger an action whenever the stopProgress is set to true. Automatically
+        // reset the stop state after that
+        if (value) {
+          stopState.set(true);
+          stopState.set(false);
+        }
+      },
+    },
+    slideshowState
+  };
+}
+
+export const slideshowStore = createSlideshowStore();
diff --git a/immichFrame.Web/src/lib/utils.ts b/immichFrame.Web/src/lib/utils.ts
index a76b2cc..6b3ff6e 100644
--- a/immichFrame.Web/src/lib/utils.ts
+++ b/immichFrame.Web/src/lib/utils.ts
@@ -1 +1,5 @@
 export const decodeBase64 = (data: string) => Uint8Array.from(atob(data), (c) => c.charCodeAt(0));
+
+export const handlePromiseError = <T>(promise: Promise<T>): void => {
+	promise.catch((error) => console.error(`[utils.ts]:handlePromiseError ${error}`, error));
+};

From 617f04fddbc516398b6650bf5b6a9967b79c26f7 Mon Sep 17 00:00:00 2001
From: JW-CH <17313367+JW-CH@users.noreply.github.com>
Date: Fri, 20 Sep 2024 11:28:38 +0200
Subject: [PATCH 2/2] remove debug-logging, remove unused components,
 progressbar restart on done

---
 .../components/elements/slideshow-bar.svelte  | 55 -------------------
 .../lib/components/home-page/home-page.svelte | 10 +---
 2 files changed, 3 insertions(+), 62 deletions(-)
 delete mode 100644 immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte

diff --git a/immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte b/immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte
deleted file mode 100644
index 7f175fd..0000000
--- a/immichFrame.Web/src/lib/components/elements/slideshow-bar.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-	import ProgressBar, { ProgressBarStatus } from '$lib/components/elements/progress-bar.svelte';
-	import { slideshowStore } from '$lib/stores/slideshow.store';
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-
-	const dispatch = createEventDispatcher<{
-		done: void;
-	}>();
-
-	const { restartProgress, stopProgress } = slideshowStore;
-
-	let progressBarStatus: ProgressBarStatus;
-	let progressBar: ProgressBar;
-
-	let unsubscribeRestart: () => void;
-	let unsubscribeStop: () => void;
-
-	onMount(() => {
-		unsubscribeRestart = restartProgress.subscribe((value) => {
-			if (value) {
-				progressBar.restart(value);
-			}
-		});
-
-		unsubscribeStop = stopProgress.subscribe((value) => {
-			if (value) {
-				progressBar.restart(false);
-			}
-		});
-	});
-
-	onDestroy(() => {
-		if (unsubscribeRestart) {
-			unsubscribeRestart();
-		}
-
-		if (unsubscribeStop) {
-			unsubscribeStop();
-		}
-	});
-
-	const handleDone = () => {
-		dispatch('done');
-		progressBar.restart(true);
-	};
-</script>
-
-<ProgressBar
-	autoplay
-	hidden={false}
-	duration={5}
-	bind:this={progressBar}
-	bind:status={progressBarStatus}
-	on:done={handleDone}
-/>
diff --git a/immichFrame.Web/src/lib/components/home-page/home-page.svelte b/immichFrame.Web/src/lib/components/home-page/home-page.svelte
index 44dc2c0..f09e2ab 100644
--- a/immichFrame.Web/src/lib/components/home-page/home-page.svelte
+++ b/immichFrame.Web/src/lib/components/home-page/home-page.svelte
@@ -21,7 +21,6 @@
 	let unsubscribeStop: () => void;
 
 	async function loadImage() {
-		console.log('loading image');
 		let assetRequest = await api.getAsset();
 
 		if (assetRequest.status != 200) {
@@ -52,7 +51,6 @@
 			}
 		});
 
-		console.log('mount load');
 		await loadImage();
 	});
 
@@ -67,8 +65,8 @@
 	});
 
 	const handleDone = async () => {
-		console.log('done load');
 		await loadImage();
+		progressBar.restart(true);
 	};
 </script>
 
@@ -77,14 +75,12 @@
 		<Clock />
 		<ImageOverlay
 			on:next={async () => {
-				progressBar.restart(true);
-				console.log('next load');
 				await loadImage();
+				progressBar.restart(true);
 			}}
 			on:back={async () => {
-				progressBar.restart(true);
-				console.log('back load');
 				await loadImage();
+				progressBar.restart(true);
 			}}
 		/>
 		<ThumbHashImage thumbHash={assetData.thumbhash ?? ''} />