feat: handle escape key and higher wheel zoom ratio (#3471)

web/src/lib/components/album-page/album-viewer.svelte

@@ -13,7 +13,7 @@
     UserResponseDto,
     api,
   } from '@api';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
   import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
@@ -43,6 +43,7 @@
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import { handleError } from '../../utils/handle-error';
   import { downloadArchive } from '../../utils/asset-utils';
+  import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store';
 
   export let album: AlbumResponseDto;
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -119,7 +120,10 @@
     return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
   };
 
+  const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
+
   onMount(async () => {
+    document.addEventListener('keydown', onKeyboardPress);
     currentAlbumName = album.albumName;
 
     try {
@@ -130,6 +134,26 @@
     }
   });
 
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener('keydown', onKeyboardPress);
+    }
+  });
+
+  const handleKeyboardPress = (event: KeyboardEvent) => {
+    if (!$isViewingAssetStoreState) {
+      switch (event.key) {
+        case 'Escape':
+          if (isMultiSelectionMode) {
+            multiSelectAsset = new Set();
+          } else {
+            goto(backUrl);
+          }
+          return;
+      }
+    }
+  };
+
   // Update Album Name
   $: {
     if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -93,7 +93,7 @@
 
   $: if (imgElement) {
     createZoomImageWheel(imgElement, {
-      wheelZoomRatio: 0.06,
+      wheelZoomRatio: 0.2,
     });
   }
 </script>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -89,16 +89,19 @@
       return;
     }
 
-    if (event.key === '/') {
-      event.preventDefault();
-    }
-
     if (!$isViewingAssetStoreState) {
       switch (event.key) {
+        case 'Escape':
+          assetInteractionStore.clearMultiselect();
+          return;
         case '?':
-          if (event.shiftKey) showShortcuts = !showShortcuts;
+          if (event.shiftKey) {
+            event.preventDefault();
+            showShortcuts = !showShortcuts;
+          }
           return;
         case '/':
+          event.preventDefault();
           goto(AppRoute.EXPLORE);
           return;
       }

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -11,6 +11,7 @@
   import { flip } from 'svelte/animate';
   import { archivedAsset } from '$lib/stores/archived-asset.store';
   import { getThumbnailSize } from '$lib/utils/thumbnail-util';
+  import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store';
 
   export let assets: AssetResponseDto[];
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -19,8 +20,6 @@
   export let viewFrom: ViewFrom;
   export let showArchiveIcon = false;
 
-  let isShowAssetViewer = false;
-
   let selectedAsset: AssetResponseDto;
   let currentViewAssetIndex = 0;
 
@@ -34,7 +33,7 @@
 
     currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
     selectedAsset = assets[currentViewAssetIndex];
-    isShowAssetViewer = true;
+    $isViewingAssetStoreState = true;
     pushState(selectedAsset.id);
   };
 
@@ -82,7 +81,7 @@
   };
 
   const closeViewer = () => {
-    isShowAssetViewer = false;
+    $isViewingAssetStoreState = false;
     history.pushState(null, '', `${$page.url.pathname}`);
   };
 
@@ -118,7 +117,7 @@
 {/if}
 
 <!-- Overlay Asset Viewer -->
-{#if isShowAssetViewer}
+{#if $isViewingAssetStoreState}
   <AssetViewer
     asset={selectedAsset}
     publicSharedKey={sharedLink?.key}

web/src/routes/(user)/search/+page.svelte

@@ -23,6 +23,9 @@
   import { AppRoute } from '$lib/constants';
   import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import { flip } from 'svelte/animate';
+  import { onDestroy, onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store';
 
   export let data: PageData;
 
@@ -32,6 +35,28 @@
   let previousRoute = AppRoute.EXPLORE as string;
   $: albums = data.results.albums.items;
 
+  const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
+
+  onMount(async () => {
+    document.addEventListener('keydown', onKeyboardPress);
+  });
+
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener('keydown', onKeyboardPress);
+    }
+  });
+
+  const handleKeyboardPress = (event: KeyboardEvent) => {
+    if (!$isViewingAssetStoreState) {
+      switch (event.key) {
+        case 'Escape':
+          goto(previousRoute);
+          return;
+      }
+    }
+  };
+
   afterNavigate(({ from }) => {
     // Prevent setting previousRoute to the current page.
     if (from && from.route.id !== $page.route.id) {