public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-23 23:00:42 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(web): ascending order for slideshow (#7502)

Browse Source 
* feat: ascending order for slideshow

* feat: use dropdown

* rename

* fix: size

* pr feedback

* fix: hide text on small screen

* Wording

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
martin
2024-03-02 16:50:02 +01:00
committed by GitHub
parent db455060f0
commit 8d44afe915
7 changed files with 144 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,11 +2,15 @@
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import ProgressBar, { ProgressBarStatus } from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
import SlideshowSettings from '$lib/components/slideshow-settings.svelte';
import { slideshowStore } from '$lib/stores/slideshow.store';
import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiPause, mdiPlay } from '@mdi/js';
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
const { restartProgress, stopProgress, slideshowDelay, showProgressBar } = slideshowStore;
export let onNext = () => {};
export let onPrevious = () => {};
export let onClose = () => {};
const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation } = slideshowStore;
let progressBarStatus: ProgressBarStatus;
let progressBar: ProgressBar;
@@ -15,12 +19,6 @@
let unsubscribeRestart: () => void;
let unsubscribeStop: () => void;
const dispatch = createEventDispatcher<{
next: void;
prev: void;
close: void;
}>();
onMount(() => {
unsubscribeRestart = restartProgress.subscribe((value) => {
if (value) {
@@ -44,18 +42,26 @@
unsubscribeStop();
}
});
const handleDone = () => {
if ($slideshowNavigation === SlideshowNavigation.AscendingOrder) {
onPrevious();
return;
}
onNext();
};
</script>
<div class="m-4 flex gap-2">
<CircleIconButton buttonSize="50" icon={mdiClose} on:click={() => dispatch('close')} title="Exit Slideshow" />
<CircleIconButton buttonSize="50" icon={mdiClose} on:click={onClose} title="Exit Slideshow" />
<CircleIconButton
buttonSize="50"
icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
on:click={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar.play() : progressBar.pause())}
title={progressBarStatus === ProgressBarStatus.Paused ? 'Play' : 'Pause'}
/>
<CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={() => dispatch('prev')} title="Previous" />
<CircleIconButton buttonSize="50" icon={mdiChevronRight} on:click={() => dispatch('next')} title="Next" />
<CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={onPrevious} title="Previous" />
<CircleIconButton buttonSize="50" icon={mdiChevronRight} on:click={onNext} title="Next" />
<CircleIconButton buttonSize="50" icon={mdiCog} on:click={() => (showSettings = !showSettings)} title="Next" />
</div>
@@ -69,5 +75,5 @@
duration={$slideshowDelay}
bind:this={progressBar}
bind:status={progressBarStatus}
on:done={() => dispatch('next')}
on:done={handleDone}
/>