beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feature (web): Add keyboard event support to memory view (#2890)

Browse source 
* Add keyboard event support to memory view in web

* Implement PR suggestions
This commit is contained in:
Krisjanis Lejejs 2023-06-21 23:28:58 +03:00 committed by GitHub
parent 0f0375a67e
commit 2c924e4c1c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web/src/lib/components/memory-page/memory-viewer.svelte
View file

@ -34,7 +34,8 @@
$: currentAsset = currentMemory?.assets[assetIndex]; $: currentAsset = currentMemory?.assets[assetIndex];
$: nextAsset = currentMemory?.assets[assetIndex + 1]; $: nextAsset = currentMemory?.assets[assetIndex + 1];
$: canAdvance = !!(nextMemory || nextAsset); $: canGoForward = !!(nextMemory || nextAsset);
$: canGoBack = !!(previousMemory || previousAsset);
const toNextMemory = () => goto(`?memory=${memoryIndex + 1}`); const toNextMemory = () => goto(`?memory=${memoryIndex + 1}`);
const toPreviousMemory = () => goto(`?memory=${memoryIndex - 1}`); const toPreviousMemory = () => goto(`?memory=${memoryIndex - 1}`);
@ -61,7 +62,7 @@
$: paused ? pause() : play(); $: paused ? pause() : play();
// Progress should be paused when it's no longer possible to advance. // Progress should be paused when it's no longer possible to advance.
$: paused ||= !canAdvance; $: paused ||= !canGoForward;
// Advance to the next asset or memory when progress is complete. // Advance to the next asset or memory when progress is complete.
$: $progress === 1 && toNext(); $: $progress === 1 && toNext();
@ -72,6 +73,19 @@
// Progress should be reset when the current memory or asset changes. // Progress should be reset when the current memory or asset changes.
$: memoryIndex, assetIndex, reset(); $: memoryIndex, assetIndex, reset();
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'ArrowRight' && canGoForward) {
e.preventDefault();
toNext();
} else if (e.key === 'ArrowLeft' && canGoBack) {
e.preventDefault();
toPrevious();
} else if (e.key === 'Escape') {
e.preventDefault();
goto(AppRoute.PHOTOS);
}
};
onMount(async () => { onMount(async () => {
if (!$memoryStore) { if (!$memoryStore) {
const { data } = await api.assetApi.getMemoryLane({ const { data } = await api.assetApi.getMemoryLane({
@ -86,6 +100,8 @@
let galleryInView = false; let galleryInView = false;
</script> </script>
<svelte:window on:keydown={handleKeyDown} />
<section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}> <section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
{#if currentMemory} {#if currentMemory}
<ControlAppBar on:close-button-click={() => goto(AppRoute.PHOTOS)} forceDark> <ControlAppBar on:close-button-click={() => goto(AppRoute.PHOTOS)} forceDark>
@ -190,7 +206,7 @@
<div class="absolute h-full flex justify-between w-full"> <div class="absolute h-full flex justify-between w-full">
<div class="flex h-full flex-col place-content-center place-items-center ml-4"> <div class="flex h-full flex-col place-content-center place-items-center ml-4">
<div class="inline-block"> <div class="inline-block">
{#if previousMemory || previousAsset} {#if canGoBack}
<CircleIconButton <CircleIconButton
logo={ChevronLeft} logo={ChevronLeft}
backgroundColor="#202123" backgroundColor="#202123"
@ -201,7 +217,7 @@
</div> </div>
<div class="flex h-full flex-col place-content-center place-items-center mr-4"> <div class="flex h-full flex-col place-content-center place-items-center mr-4">
<div class="inline-block"> <div class="inline-block">
{#if canAdvance} {#if canGoForward}
<CircleIconButton <CircleIconButton
logo={ChevronRight} logo={ChevronRight}
backgroundColor="#202123" backgroundColor="#202123"