public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-24 11:20:40 +09:00
Code Issues Actions Packages Projects Releases Wiki 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

56
web/src/lib/components/asset-viewer/slideshow-bar.svelte
View File

@@ -9,20 +9,30 @@
import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition';
export let isFullScreen: boolean;
export let onNext = () => {};
export let onPrevious = () => {};
export let onClose = () => {};
export let onSetToFullScreen = () => {};
interface Props {
isFullScreen: boolean;
onNext?: () => void;
onPrevious?: () => void;
onClose?: () => void;
onSetToFullScreen?: () => void;
}
let {
isFullScreen,
onNext = () => {},
onPrevious = () => {},
onClose = () => {},
onSetToFullScreen = () => {},
}: Props = $props();
const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation } = slideshowStore;
let progressBarStatus: ProgressBarStatus;
let progressBar: ProgressBar;
let showSettings = false;
let showControls = true;
let progressBarStatus: ProgressBarStatus | undefined = $state();
let progressBar = $state<ReturnType<typeof ProgressBar>>();
let showSettings = $state(false);
let showControls = $state(true);
let timer: NodeJS.Timeout;
let isOverControls = false;
let isOverControls = $state(false);
let unsubscribeRestart: () => void;
let unsubscribeStop: () => void;
@@ -55,13 +65,13 @@
hideControlsAfterDelay();
unsubscribeRestart = restartProgress.subscribe((value) => {
if (value) {
progressBar.restart(value);
progressBar?.restart(value);
}
});
unsubscribeStop = stopProgress.subscribe((value) => {
if (value) {
progressBar.restart(false);
progressBar?.restart(false);
stopControlsHideTimer();
}
});
@@ -77,7 +87,9 @@
}
});
const handleDone = () => {
const handleDone = async () => {
await progressBar?.reset();
if ($slideshowNavigation === SlideshowNavigation.AscendingOrder) {
onPrevious();
return;
@@ -87,7 +99,7 @@
</script>
<svelte:window
on:mousemove={showControlBar}
onmousemove={showControlBar}
use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onClose },
{ shortcut: { key: 'ArrowLeft' }, onShortcut: onPrevious },
@@ -98,32 +110,32 @@
{#if showControls}
<div
class="m-4 flex gap-2"
on:mouseenter={() => (isOverControls = true)}
on:mouseleave={() => (isOverControls = false)}
onmouseenter={() => (isOverControls = true)}
onmouseleave={() => (isOverControls = false)}
transition:fly={{ duration: 150 }}
role="navigation"
>
<CircleIconButton buttonSize="50" icon={mdiClose} on:click={onClose} title={$t('exit_slideshow')} />
<CircleIconButton buttonSize="50" icon={mdiClose} onclick={onClose} title={$t('exit_slideshow')} />
<CircleIconButton
buttonSize="50"
icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
on:click={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar.play() : progressBar.pause())}
onclick={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar?.play() : progressBar?.pause())}
title={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')}
/>
<CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={onPrevious} title={$t('previous')} />
<CircleIconButton buttonSize="50" icon={mdiChevronRight} on:click={onNext} title={$t('next')} />
<CircleIconButton buttonSize="50" icon={mdiChevronLeft} onclick={onPrevious} title={$t('previous')} />
<CircleIconButton buttonSize="50" icon={mdiChevronRight} onclick={onNext} title={$t('next')} />
<CircleIconButton
buttonSize="50"
icon={mdiCog}
on:click={() => (showSettings = !showSettings)}
onclick={() => (showSettings = !showSettings)}
title={$t('slideshow_settings')}
/>
{#if !isFullScreen}
<CircleIconButton
buttonSize="50"
icon={mdiFullscreen}
on:click={onSetToFullScreen}
onclick={onSetToFullScreen}
title={$t('set_slideshow_to_fullscreen')}
/>
{/if}