Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: slide-show settings (#18394)

Browse Source
This commit is contained in:
Alex 2025-05-20 10:37:10 -05:00 committed by GitHub
parent e7b60a9278
commit 895e0eacfe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import { shortcuts } from '$lib/actions/shortcut'; import { shortcuts } from '$lib/actions/shortcut';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte'; import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
import SlideshowSettings from '$lib/components/slideshow-settings.svelte'; import SlideshowSettings from '$lib/components/slideshow-settings.svelte';
import { ProgressBarStatus } from '$lib/constants'; import { ProgressBarStatus } from '$lib/constants';
import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store'; import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
import { IconButton } from '@immich/ui';
import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js'; import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import { swipe } from 'svelte-gestures'; import { swipe } from 'svelte-gestures';
@ -98,6 +98,13 @@
} }
onNext(); onNext();
}; };
const onSettingToggled = async () => {
showSettings = !showSettings;
if (document.fullscreenElement && showSettings) {
await document.exitFullscreen();
}
};
</script> </script>
<svelte:window <svelte:window
@ -119,28 +126,61 @@
transition:fly={{ duration: 150 }} transition:fly={{ duration: 150 }}
role="navigation" role="navigation"
> >
<CircleIconButton buttonSize="50" icon={mdiClose} onclick={onClose} title={$t('exit_slideshow')} /> <IconButton
variant="ghost"
shape="round"
color="secondary"
icon={mdiClose}
onclick={onClose}
aria-label={$t('exit_slideshow')}
class="text-white"
/>
<CircleIconButton <IconButton
buttonSize="50" variant="ghost"
shape="round"
color="secondary"
icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause} icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
onclick={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar?.play() : progressBar?.pause())} onclick={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar?.play() : progressBar?.pause())}
title={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')} aria-label={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')}
class="text-white"
/> />
<CircleIconButton buttonSize="50" icon={mdiChevronLeft} onclick={onPrevious} title={$t('previous')} /> <IconButton
<CircleIconButton buttonSize="50" icon={mdiChevronRight} onclick={onNext} title={$t('next')} /> variant="ghost"
<CircleIconButton shape="round"
buttonSize="50" color="secondary"
icon={mdiChevronLeft}
onclick={onPrevious}
aria-label={$t('previous')}
class="text-white"
/>
<IconButton
variant="ghost"
shape="round"
color="secondary"
icon={mdiChevronRight}
onclick={onNext}
aria-label={$t('next')}
class="text-white"
/>
<IconButton
variant="ghost"
shape="round"
color="secondary"
icon={mdiCog} icon={mdiCog}
onclick={() => (showSettings = !showSettings)} onclick={onSettingToggled}
title={$t('slideshow_settings')} aria-label={$t('slideshow_settings')}
class="text-white"
/> />
{#if !isFullScreen} {#if !isFullScreen}
<CircleIconButton <IconButton
buttonSize="50" variant="ghost"
shape="round"
color="secondary"
icon={mdiFullscreen} icon={mdiFullscreen}
onclick={onSetToFullScreen} onclick={onSetToFullScreen}
title={$t('set_slideshow_to_fullscreen')} aria-label={$t('set_slideshow_to_fullscreen')}
class="text-white"
/> />
{/if} {/if}
</div> </div>