self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-04 05:50:38 +02:00
Code Issues Releases Activity

chore(web): migration svelte 5 syntax (#13883)

Browse Source
This commit is contained in:
Alex
2024-11-14 08:43:25 -06:00
committed by GitHub
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,8 +42,9 @@
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { tweened } from 'svelte/motion';
import { derived } from 'svelte/store';
import { derived as storeDerived } from 'svelte/store';
import { fade } from 'svelte/transition';
import { SvelteSet } from 'svelte/reactivity';
type MemoryIndex = {
memoryIndex: number;
@ -59,19 +60,21 @@
nextMemory?: MemoryLaneResponseDto;
};
let memoryGallery: HTMLElement;
let memoryWrapper: HTMLElement;
let galleryInView = false;
let paused = false;
let selectedAssets: Set<AssetResponseDto> = new Set();
let current: MemoryAsset | undefined = undefined;
let memoryGallery: HTMLElement | undefined = $state();
let memoryWrapper: HTMLElement | undefined = $state();
let galleryInView = $state(false);
let paused = $state(false);
let selectedAssets: SvelteSet<AssetResponseDto> = $state(new SvelteSet());
let current: MemoryAsset | undefined = $state(undefined);
// let memories: MemoryAsset[] = [];
let resetPromise = Promise.resolve();
let resetPromise = $state(Promise.resolve());
const { isViewing } = assetViewingStore;
const viewport: Viewport = { width: 0, height: 0 };
const progress = tweened<number>(0, { duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0) });
const memories = derived(memoryStore, (memories) => {
const viewport: Viewport = $state({ width: 0, height: 0 });
const progressBarController = tweened<number>(0, {
duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0),
});
const memories = storeDerived(memoryStore, (memories) => {
memories = memories ?? [];
const memoryAssets: MemoryAsset[] = [];
let previous: MemoryAsset | undefined;
@ -100,13 +103,6 @@
return memoryAssets;
});
$: isMultiSelectionMode = selectedAssets.size > 0;
$: isAllArchived = [...selectedAssets].every((asset) => asset.isArchived);
$: isAllFavorite = [...selectedAssets].every((asset) => asset.isFavorite);
$: selectedAssets = galleryInView ? selectedAssets : new Set();
$: handlePromiseError(handleProgress($progress));
$: handlePromiseError(handleAction(galleryInView ? 'pause' : 'play'));
const loadFromParams = (memories: MemoryAsset[], page: typeof $page | NavigationTarget | null) => {
const assetId = page?.params?.assetId ?? page?.url.searchParams.get(QueryParameter.ID) ?? undefined;
handlePromiseError(handleAction($isViewing ? 'pause' : 'reset'));
@ -130,24 +126,24 @@
const handleNextMemory = () => handleNavigate(current?.nextMemory?.assets[0]);
const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
const handleEscape = async () => goto(AppRoute.PHOTOS);
const handleSelectAll = () => (selectedAssets = new Set(current?.memory.assets || []));
const handleSelectAll = () => (selectedAssets = new SvelteSet(current?.memory.assets || []));
const handleAction = async (action: 'reset' | 'pause' | 'play') => {
switch (action) {
case 'play': {
paused = false;
await progress.set(1);
await progressBarController.set(1);
break;
}
case 'pause': {
paused = true;
await progress.set($progress);
await progressBarController.set($progressBarController);
break;
}
case 'reset': {
paused = false;
resetPromise = progress.set(0);
resetPromise = progressBarController.set(0);
break;
}
}
@ -159,6 +155,7 @@
}
if (progress === 1) {
await progressBarController.set(0);
await (current?.next ? handleNextAsset() : handleAction('pause'));
}
};
@ -210,6 +207,21 @@
current = loadFromParams($memories, target);
});
$effect(() => {
selectedAssets = galleryInView ? selectedAssets : new SvelteSet();
});
let isMultiSelectionMode = $derived(selectedAssets.size > 0);
let isAllArchived = $derived([...selectedAssets].every((asset) => asset.isArchived));
let isAllFavorite = $derived([...selectedAssets].every((asset) => asset.isFavorite));
$effect(() => {
handlePromiseError(handleProgress($progressBarController));
});
$effect(() => {
handlePromiseError(handleAction(galleryInView ? 'pause' : 'play'));
});
</script>
<svelte:window
@ -226,9 +238,9 @@
{#if isMultiSelectionMode}
<div class="sticky top-0 z-[90]">
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new SvelteSet())}>
<CreateSharedLink />
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} on:click={handleSelectAll} />
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum />
@ -251,17 +263,19 @@
<section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
{#if current && current.memory.assets.length > 0}
<ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} forceDark>
<svelte:fragment slot="leading">
<p class="text-lg">
{$memoryLaneTitle(current.memory.yearsAgo)}
</p>
</svelte:fragment>
{#snippet leading()}
{#if current}
<p class="text-lg">
{$memoryLaneTitle(current.memory.yearsAgo)}
</p>
{/if}
{/snippet}
<div class="flex place-content-center place-items-center gap-2 overflow-hidden">
<CircleIconButton
title={paused ? $t('play_memories') : $t('pause_memories')}
icon={paused ? mdiPlay : mdiPause}
on:click={() => handleAction(paused ? 'play' : 'pause')}
onclick={() => handleAction(paused ? 'play' : 'pause')}
class="hover:text-black"
/>
@ -274,7 +288,7 @@
{:then}
<span
class="absolute left-0 h-[2px] bg-white"
style:width={`${index < current.assetIndex ? 100 : index > current.assetIndex ? 0 : $progress * 100}%`}
style:width={`${index < current.assetIndex ? 100 : index > current.assetIndex ? 0 : $progressBarController * 100}%`}
></span>
{/await}
</a>
@ -296,10 +310,10 @@
>
<button
type="button"
on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })}
onclick={() => memoryWrapper?.scrollIntoView({ behavior: 'smooth' })}
disabled={!galleryInView}
>
<CircleIconButton title={$t('hide_gallery')} icon={mdiChevronUp} color="light" />
<CircleIconButton title={$t('hide_gallery')} icon={mdiChevronUp} color="light" onclick={() => {}} />
</button>
</div>
{/if}
@ -314,7 +328,7 @@
type="button"
class="relative h-full w-full rounded-2xl"
disabled={!current.previousMemory}
on:click={handlePreviousMemory}
onclick={handlePreviousMemory}
>
{#if current.previousMemory && current.previousMemory.assets.length > 0}
<img
@ -367,6 +381,7 @@
icon={mdiImageSearch}
title={$t('view_in_timeline')}
color="light"
onclick={() => {}}
/>
</div>
<!-- CONTROL BUTTONS -->
@ -376,7 +391,7 @@
title={$t('previous_memory')}
icon={mdiChevronLeft}
color="dark"
on:click={handlePreviousAsset}
onclick={handlePreviousAsset}
/>
</div>
{/if}
@ -387,7 +402,7 @@
title={$t('next_memory')}
icon={mdiChevronRight}
color="dark"
on:click={handleNextAsset}
onclick={handleNextAsset}
/>
</div>
{/if}
@ -409,7 +424,7 @@
<button
type="button"
class="relative h-full w-full rounded-2xl"
on:click={handleNextMemory}
onclick={handleNextMemory}
disabled={!current.nextMemory}
>
{#if current.nextMemory && current.nextMemory.assets.length > 0}
@ -451,7 +466,7 @@
title={$t('show_gallery')}
icon={mdiChevronDown}
color="light"
on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}
onclick={() => memoryGallery?.scrollIntoView({ behavior: 'smooth' })}
/>
</div>