mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
feature (web): Add keyboard event support to memory view (#2890)
* Add keyboard event support to memory view in web * Implement PR suggestions
This commit is contained in:
parent
0f0375a67e
commit
2c924e4c1c
@ -34,7 +34,8 @@
|
||||
$: currentAsset = currentMemory?.assets[assetIndex];
|
||||
$: nextAsset = currentMemory?.assets[assetIndex + 1];
|
||||
|
||||
$: canAdvance = !!(nextMemory || nextAsset);
|
||||
$: canGoForward = !!(nextMemory || nextAsset);
|
||||
$: canGoBack = !!(previousMemory || previousAsset);
|
||||
|
||||
const toNextMemory = () => goto(`?memory=${memoryIndex + 1}`);
|
||||
const toPreviousMemory = () => goto(`?memory=${memoryIndex - 1}`);
|
||||
@ -61,7 +62,7 @@
|
||||
$: paused ? pause() : play();
|
||||
|
||||
// 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.
|
||||
$: $progress === 1 && toNext();
|
||||
@ -72,6 +73,19 @@
|
||||
// Progress should be reset when the current memory or asset changes.
|
||||
$: 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 () => {
|
||||
if (!$memoryStore) {
|
||||
const { data } = await api.assetApi.getMemoryLane({
|
||||
@ -86,6 +100,8 @@
|
||||
let galleryInView = false;
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeyDown} />
|
||||
|
||||
<section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
|
||||
{#if currentMemory}
|
||||
<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="flex h-full flex-col place-content-center place-items-center ml-4">
|
||||
<div class="inline-block">
|
||||
{#if previousMemory || previousAsset}
|
||||
{#if canGoBack}
|
||||
<CircleIconButton
|
||||
logo={ChevronLeft}
|
||||
backgroundColor="#202123"
|
||||
@ -201,7 +217,7 @@
|
||||
</div>
|
||||
<div class="flex h-full flex-col place-content-center place-items-center mr-4">
|
||||
<div class="inline-block">
|
||||
{#if canAdvance}
|
||||
{#if canGoForward}
|
||||
<CircleIconButton
|
||||
logo={ChevronRight}
|
||||
backgroundColor="#202123"
|
||||
|
Loading…
Reference in New Issue
Block a user