From ddffca6c933e6d39113e1849bf79bcdc390b50a0 Mon Sep 17 00:00:00 2001
From: JW-CH <17313367+JW-CH@users.noreply.github.com>
Date: Fri, 15 Nov 2024 13:43:36 +0100
Subject: [PATCH] display back button & handle backlog/history

---
 .../elements/overlay-controls.svelte          | 13 +++-
 .../lib/components/home-page/home-page.svelte | 63 +++++++++++++++----
 2 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/immichFrame.Web/src/lib/components/elements/overlay-controls.svelte b/immichFrame.Web/src/lib/components/elements/overlay-controls.svelte
index 29c4dae..44762d1 100644
--- a/immichFrame.Web/src/lib/components/elements/overlay-controls.svelte
+++ b/immichFrame.Web/src/lib/components/elements/overlay-controls.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import { mdiChevronRight, mdiPlay, mdiPause } from '@mdi/js';
+	import { mdiChevronRight, mdiPlay, mdiPause, mdiChevronLeft } from '@mdi/js';
 	import Icon from './icon.svelte';
 	import { ProgressBarStatus } from './progress-bar.svelte';
 
@@ -13,7 +13,7 @@
 		dispatch('next');
 	}
 	function clickBack() {
-		// dispatch('back');
+		dispatch('back');
 	}
 	function clickPause() {
 		dispatch('pause');
@@ -62,7 +62,14 @@
 {#if overlayVisible}
 	<div class="absolute h-full w-full top-0 left-0 z-[100] grid grid-cols-3 gap-2">
 		<div class="group text-center content-center">
-			<button class="opacity-0 group-hover:opacity-100 text-primary" on:click={clickBack}> </button>
+			<button class="opacity-0 group-hover:opacity-100 text-primary" on:click={clickBack}
+				><Icon
+					title="Back"
+					class="max-h-[min(10rem,33vh)] max-w-[min(10rem,33vh)] h-[33vh] w-[33vw]top"
+					path={mdiChevronLeft}
+					size=""
+				/></button
+			>
 		</div>
 
 		<div class="grid grid-rows-3">
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 248339c..424ada3 100644
--- a/immichFrame.Web/src/lib/components/home-page/home-page.svelte
+++ b/immichFrame.Web/src/lib/components/home-page/home-page.svelte
@@ -14,8 +14,9 @@
 	import Appointments from '../elements/appointments.svelte';
 	import LoadingElement from '../elements/LoadingElement.svelte';
 
-	let assetData: api.AssetResponseDto[];
-	let nextAssets: api.AssetResponseDto[];
+	let assetHistory: api.AssetResponseDto[] = [];
+	let assetBacklog: api.AssetResponseDto[] = [];
+	let displayingAssets: api.AssetResponseDto[];
 
 	const { restartProgress, stopProgress } = slideshowStore;
 
@@ -49,7 +50,7 @@
 			}
 
 			error = false;
-			assetData = assetRequest.data;
+			assetBacklog = assetRequest.data;
 		} catch {
 			error = true;
 		}
@@ -61,24 +62,60 @@
 	};
 
 	async function getNextAssets() {
-		if (!assetData || assetData.length < 1) {
+		if (!assetBacklog || assetBacklog.length < 1) {
 			await loadAssets();
 		}
 
-		if (assetData.length == 0) {
+		if (assetBacklog.length == 0) {
 			error = true;
 			errorMessage = 'No assets were found! Check your configuration.';
 			return;
 		}
 
 		let next: api.AssetResponseDto[];
-		if (assetData.length > 1 && isHorizontal(assetData[0]) && isHorizontal(assetData[1])) {
-			next = assetData.splice(0, 2);
+		if (assetBacklog.length > 1 && isHorizontal(assetBacklog[0]) && isHorizontal(assetBacklog[1])) {
+			next = assetBacklog.splice(0, 2);
 		} else {
-			next = assetData.splice(0, 1);
+			next = assetBacklog.splice(0, 1);
 		}
-		assetData = [...assetData];
-		nextAssets = next;
+		assetBacklog = [...assetBacklog];
+
+		if (displayingAssets) {
+			// Push to History
+			assetHistory.push(...displayingAssets);
+		}
+
+		// History max 250 Items
+		if (assetHistory.length > 250) {
+			assetHistory = assetHistory.splice(assetHistory.length - 250, 250);
+		}
+
+		displayingAssets = next;
+	}
+
+	function getPreviousAssets() {
+		if (!assetHistory || assetHistory.length < 1) {
+			return;
+		}
+
+		let next: api.AssetResponseDto[];
+		if (
+			assetHistory.length > 1 &&
+			isHorizontal(assetHistory[assetHistory.length - 1]) &&
+			isHorizontal(assetHistory[assetHistory.length - 2])
+		) {
+			next = assetHistory.splice(assetHistory.length - 2, 2);
+		} else {
+			next = assetHistory.splice(assetHistory.length - 1, 1);
+		}
+
+		assetHistory = [...assetHistory];
+
+		// Unshift to Backlog
+		if (displayingAssets) {
+			assetBacklog.unshift(...displayingAssets);
+		}
+		displayingAssets = next;
 	}
 
 	function isHorizontal(asset: api.AssetResponseDto) {
@@ -133,12 +170,12 @@
 <section class="fixed grid h-screen w-screen bg-black" class:cursor-none={!cursorVisible}>
 	{#if error}
 		<ErrorElement message={errorMessage} />
-	{:else if nextAssets}
+	{:else if displayingAssets}
 		<ImageComponent
 			showLocation={$configStore.showImageLocation}
 			showPhotoDate={$configStore.showPhotoDate}
 			showImageDesc={$configStore.showImageDesc}
-			sourceAssets={nextAssets}
+			sourceAssets={displayingAssets}
 		/>
 
 		{#if $configStore.showClock}
@@ -155,7 +192,7 @@
 			}}
 			on:back={async () => {
 				progressBar.restart(false);
-				await getNextAssets();
+				await getPreviousAssets();
 				progressBar.restart(true);
 			}}
 			on:pause={async () => {