self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-16 03:40:33 +02:00
Code Issues Releases Activity

fix(web): keyboard shortcut handling (#7946)

Browse Source 
* fix(web): keyboard shortcut handling

* drop executeShortcuts in favor of action

* fix merge

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Michel Heusschen
2024-03-15 00:16:55 +01:00
committed by GitHub
parent 12fb90c232
commit eed8e6b67a
14 changed files with 197 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -9,6 +9,7 @@
import type { Viewport } from '$lib/stores/assets.store';
import { memoryStore } from '$lib/stores/memory.store';
import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
import { shortcuts } from '$lib/utils/shortcut';
import { fromLocalDateTime } from '$lib/utils/timeline-util';
import { ThumbnailFormat, getMemoryLane } from '@immich/sdk';
import { mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiPause, mdiPlay } from '@mdi/js';
@ -73,19 +74,6 @@
// Progress should be reset when the current memory or asset changes.
$: memoryIndex, assetIndex, handlePromiseError(reset());
const handleKeyDown = async (e: KeyboardEvent) => {
if (e.key === 'ArrowRight' && canGoForward) {
e.preventDefault();
await toNext();
} else if (e.key === 'ArrowLeft' && canGoBack) {
e.preventDefault();
await toPrevious();
} else if (e.key === 'Escape') {
e.preventDefault();
await goto(AppRoute.PHOTOS);
}
};
onMount(async () => {
if (!$memoryStore) {
const localTime = new Date();
@ -101,7 +89,13 @@
let galleryInView = false;
</script>
<svelte:window on:keydown={handleKeyDown} />
<svelte:window
use:shortcuts={[
{ shortcut: { key: 'ArrowRight' }, onShortcut: () => canGoForward && toNext() },
{ shortcut: { key: 'ArrowLeft' }, onShortcut: () => canGoBack && toPrevious() },
{ shortcut: { key: 'Escape' }, onShortcut: () => goto(AppRoute.PHOTOS) },
]}
/>
<section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
{#if currentMemory}