From e344503834d5ba87ea20ed83e212fd3969d8b4f2 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Wed, 24 Aug 2022 22:18:28 -0700
Subject: [PATCH] Fixed navigating with keyboard skip assets (#531)

* Cleaned up event listner
---
 .../asset-viewer/asset-viewer.svelte          | 324 +++++++++---------
 1 file changed, 162 insertions(+), 162 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 79b5f0d453..5347389e1f 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,207 +1,207 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { fly } from 'svelte/transition';
-  import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
-  import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
-  import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
-  import PhotoViewer from './photo-viewer.svelte';
-  import DetailPanel from './detail-panel.svelte';
-  import { downloadAssets } from '$lib/stores/download';
-  import VideoViewer from './video-viewer.svelte';
-  import { api, AssetResponseDto, AssetTypeEnum } from '@api';
-  import { browser } from '$app/env';
+	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
+	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
+	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
+	import PhotoViewer from './photo-viewer.svelte';
+	import DetailPanel from './detail-panel.svelte';
+	import { downloadAssets } from '$lib/stores/download';
+	import VideoViewer from './video-viewer.svelte';
+	import { api, AssetResponseDto, AssetTypeEnum } from '@api';
 
-  const dispatch = createEventDispatcher();
+	export let asset: AssetResponseDto;
 
-  export let asset: AssetResponseDto;
+	const dispatch = createEventDispatcher();
+	let halfLeftHover = false;
+	let halfRightHover = false;
+	let isShowDetail = false;
 
-  let halfLeftHover = false;
-  let halfRightHover = false;
-  let isShowDetail = false;
+	onMount(() => {
+		document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
+	});
 
-  onMount(() => {
-    if (browser) {
-      document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
-    }
-  });
+	onDestroy(() => {
+		document.removeEventListener('keydown', (e) => {});
+	});
 
-  const handleKeyboardPress = (key: string) => {
-    switch (key) {
-      case 'Escape':
-        closeViewer();
-        return;
-      case 'i':
-        isShowDetail = !isShowDetail;
-        return;
-      case 'ArrowLeft':
-        navigateAssetBackward();
-        return;
-      case 'ArrowRight':
-        navigateAssetForward();
-        return;
-    }
-  };
+	const handleKeyboardPress = (key: string) => {
+		switch (key) {
+			case 'Escape':
+				closeViewer();
+				return;
+			case 'i':
+				isShowDetail = !isShowDetail;
+				return;
+			case 'ArrowLeft':
+				navigateAssetBackward();
+				return;
+			case 'ArrowRight':
+				navigateAssetForward();
+				return;
+		}
+	};
 
-  const closeViewer = () => {
-    dispatch('close');
-  };
+	const closeViewer = () => {
+		dispatch('close');
+	};
 
-  const navigateAssetForward = (e?: Event) => {
-    e?.stopPropagation();
-    dispatch('navigate-forward');
-  };
+	const navigateAssetForward = (e?: Event) => {
+		e?.stopPropagation();
+		dispatch('navigate-forward');
+	};
 
-  const navigateAssetBackward = (e?: Event) => {
-    e?.stopPropagation();
-    dispatch('navigate-backward');
-  };
+	const navigateAssetBackward = (e?: Event) => {
+		e?.stopPropagation();
+		dispatch('navigate-backward');
+	};
 
-  const showDetailInfoHandler = () => {
-    isShowDetail = !isShowDetail;
-  };
+	const showDetailInfoHandler = () => {
+		isShowDetail = !isShowDetail;
+	};
 
-  const downloadFile = async () => {
-    try {
-      console.log(asset.exifInfo);
-      const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
-      const imageExtension = asset.originalPath.split('.')[1];
-      const imageFileName = imageName + '.' + imageExtension;
+	const downloadFile = async () => {
+		try {
+			console.log(asset.exifInfo);
+			const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
+			const imageExtension = asset.originalPath.split('.')[1];
+			const imageFileName = imageName + '.' + imageExtension;
 
-      // If assets is already download -> return;
-      if ($downloadAssets[imageFileName]) {
-        return;
-      }
+			// If assets is already download -> return;
+			if ($downloadAssets[imageFileName]) {
+				return;
+			}
 
-      $downloadAssets[imageFileName] = 0;
+			$downloadAssets[imageFileName] = 0;
 
-      const {data, status} = await api.assetApi.downloadFile(
-        asset.deviceAssetId,
-        asset.deviceId,
-        false,
-        false,
-        {
-          responseType: 'blob',
-          onDownloadProgress: (progressEvent) => {
-            if (progressEvent.lengthComputable) {
-              const total = progressEvent.total;
-              const current = progressEvent.loaded;
-              $downloadAssets[imageFileName] = Math.floor((current / total) * 100);
-            }
-          }
-        }
-      );
+			const { data, status } = await api.assetApi.downloadFile(
+				asset.deviceAssetId,
+				asset.deviceId,
+				false,
+				false,
+				{
+					responseType: 'blob',
+					onDownloadProgress: (progressEvent) => {
+						if (progressEvent.lengthComputable) {
+							const total = progressEvent.total;
+							const current = progressEvent.loaded;
+							$downloadAssets[imageFileName] = Math.floor((current / total) * 100);
+						}
+					}
+				}
+			);
 
-      if (!(data instanceof Blob)) {
-        return;
-      }
+			if (!(data instanceof Blob)) {
+				return;
+			}
 
-      if (status === 200) {
-        const fileUrl = URL.createObjectURL(data);
-        const anchor = document.createElement('a');
-        anchor.href = fileUrl;
-        anchor.download = imageFileName;
+			if (status === 200) {
+				const fileUrl = URL.createObjectURL(data);
+				const anchor = document.createElement('a');
+				anchor.href = fileUrl;
+				anchor.download = imageFileName;
 
-        document.body.appendChild(anchor);
-        anchor.click();
-        document.body.removeChild(anchor);
+				document.body.appendChild(anchor);
+				anchor.click();
+				document.body.removeChild(anchor);
 
-        URL.revokeObjectURL(fileUrl);
+				URL.revokeObjectURL(fileUrl);
 
-        // Remove item from download list
-        setTimeout(() => {
-          const copy = $downloadAssets;
-          delete copy[imageFileName];
-          $downloadAssets = copy;
-        }, 2000);
-      }
-    } catch (e) {
-      console.log('Error downloading file ', e);
-    }
-  };
+				// Remove item from download list
+				setTimeout(() => {
+					const copy = $downloadAssets;
+					delete copy[imageFileName];
+					$downloadAssets = copy;
+				}, 2000);
+			}
+		} catch (e) {
+			console.log('Error downloading file ', e);
+		}
+	};
 </script>
 
 <section
-        id="immich-asset-viewer"
-        class="fixed h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4  "
+	id="immich-asset-viewer"
+	class="fixed h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4  "
 >
-    <div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
-        <AsserViewerNavBar
-                on:goBack={closeViewer}
-                on:showDetail={showDetailInfoHandler}
-                on:download={downloadFile}
-        />
-    </div>
+	<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
+		<AsserViewerNavBar
+			on:goBack={closeViewer}
+			on:showDetail={showDetailInfoHandler}
+			on:download={downloadFile}
+		/>
+	</div>
 
-    <div
-            class={`row-start-2 row-span-end col-start-1 col-span-2 flex place-items-center hover:cursor-pointer w-3/4 ${
+	<div
+		class={`row-start-2 row-span-end col-start-1 col-span-2 flex place-items-center hover:cursor-pointer w-3/4 ${
 			asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
 		}`}
-            on:mouseenter={() => {
+		on:mouseenter={() => {
 			halfLeftHover = true;
 			halfRightHover = false;
 		}}
-            on:mouseleave={() => {
+		on:mouseleave={() => {
 			halfLeftHover = false;
 		}}
-            on:click={navigateAssetBackward}
-    >
-        <button
-                class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000]  text-gray-500 mx-4"
-                class:navigation-button-hover={halfLeftHover}
-                on:click={navigateAssetBackward}
-        >
-            <ChevronLeft size="36"/>
-        </button>
-    </div>
+		on:click={navigateAssetBackward}
+	>
+		<button
+			class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000]  text-gray-500 mx-4"
+			class:navigation-button-hover={halfLeftHover}
+			on:click={navigateAssetBackward}
+		>
+			<ChevronLeft size="36" />
+		</button>
+	</div>
 
-    <div class="row-start-1 row-span-full col-start-1 col-span-4">
-        {#key asset.id}
-            {#if asset.type === AssetTypeEnum.Image}
-                <PhotoViewer assetId={asset.id} deviceId={asset.deviceId} on:close={closeViewer}/>
-            {:else}
-                <VideoViewer assetId={asset.id} on:close={closeViewer}/>
-            {/if}
-        {/key}
-    </div>
+	<div class="row-start-1 row-span-full col-start-1 col-span-4">
+		{#key asset.id}
+			{#if asset.type === AssetTypeEnum.Image}
+				<PhotoViewer assetId={asset.id} deviceId={asset.deviceId} on:close={closeViewer} />
+			{:else}
+				<VideoViewer assetId={asset.id} on:close={closeViewer} />
+			{/if}
+		{/key}
+	</div>
 
-    <div
-            class={`row-start-2 row-span-full col-start-3 col-span-2 flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end ${
+	<div
+		class={`row-start-2 row-span-full col-start-3 col-span-2 flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end ${
 			asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
 		}`}
-            on:click={navigateAssetForward}
-            on:mouseenter={() => {
+		on:click={navigateAssetForward}
+		on:mouseenter={() => {
 			halfLeftHover = false;
 			halfRightHover = true;
 		}}
-            on:mouseleave={() => {
+		on:mouseleave={() => {
 			halfRightHover = false;
 		}}
-    >
-        <button
-                class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4 z-[1000]"
-                class:navigation-button-hover={halfRightHover}
-                on:click={navigateAssetForward}
-        >
-            <ChevronRight size="36"/>
-        </button>
-    </div>
+	>
+		<button
+			class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4 z-[1000]"
+			class:navigation-button-hover={halfRightHover}
+			on:click={navigateAssetForward}
+		>
+			<ChevronRight size="36" />
+		</button>
+	</div>
 
-    {#if isShowDetail}
-        <div
-                transition:fly={{ duration: 150 }}
-                id="detail-panel"
-                class="bg-immich-bg w-[360px] row-span-full transition-all "
-                translate="yes"
-        >
-            <DetailPanel {asset} on:close={() => (isShowDetail = false)}/>
-        </div>
-    {/if}
+	{#if isShowDetail}
+		<div
+			transition:fly={{ duration: 150 }}
+			id="detail-panel"
+			class="bg-immich-bg w-[360px] row-span-full transition-all "
+			translate="yes"
+		>
+			<DetailPanel {asset} on:close={() => (isShowDetail = false)} />
+		</div>
+	{/if}
 </section>
 
 <style>
-    .navigation-button-hover {
-        background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-        color: rgb(55 65 81 / var(--tw-text-opacity));
-        transition: all 150ms;
-    }
+	.navigation-button-hover {
+		background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+		color: rgb(55 65 81 / var(--tw-text-opacity));
+		transition: all 150ms;
+	}
 </style>