self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-27 05:11:11 +02:00
Code Issues Releases 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

55
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -7,7 +7,7 @@
import type { AssetStore } from '$lib/stores/assets.store';
import { isShowDetail, showDeleteModal } from '$lib/stores/preferences.store';
import { featureFlags } from '$lib/stores/server-config.store';
import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
import { user } from '$lib/stores/user.store';
import { getAssetJobMessage, isSharedLink, handlePromiseError } from '$lib/utils';
@ -67,7 +67,7 @@
const {
restartProgress: restartSlideshowProgress,
stopProgress: stopSlideshowProgress,
slideshowShuffle,
slideshowNavigation,
slideshowState,
} = slideshowStore;
@ -190,8 +190,8 @@
}
});
shuffleSlideshowUnsubscribe = slideshowShuffle.subscribe((value) => {
if (value) {
shuffleSlideshowUnsubscribe = slideshowNavigation.subscribe((value) => {
if (value === SlideshowNavigation.Shuffle) {
slideshowHistory.reset();
slideshowHistory.queue(asset.id);
}
@ -269,11 +269,11 @@
return;
}
case 'ArrowLeft': {
navigateAssetBackward();
await navigateAsset('previous');
return;
}
case 'ArrowRight': {
await navigateAssetForward();
await navigateAsset('next');
return;
}
case 'd':
@ -330,13 +330,16 @@
$restartSlideshowProgress = true;
};
const navigateAssetForward = async (e?: Event) => {
if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowShuffle) {
return slideshowHistory.next() || navigateAssetRandom();
const navigateAsset = async (order: 'previous' | 'next', e?: Event) => {
if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle) {
return (order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next()) || navigateAssetRandom();
}
if ($slideshowState === SlideshowState.PlaySlideshow && assetStore) {
const hasNext = await assetStore.getNextAssetId(asset.id);
const hasNext =
order === 'previous'
? await assetStore.getPreviousAssetId(asset.id)
: await assetStore.getNextAssetId(asset.id);
if (hasNext) {
$restartSlideshowProgress = true;
} else {
@ -345,21 +348,7 @@
}
e?.stopPropagation();
dispatch('next');
};
const navigateAssetBackward = (e?: Event) => {
if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowShuffle) {
slideshowHistory.previous();
return;
}
if ($slideshowState === SlideshowState.PlaySlideshow) {
$restartSlideshowProgress = true;
}
e?.stopPropagation();
dispatch('previous');
dispatch(order);
};
const showDetailInfoHandler = () => {
@ -504,7 +493,7 @@
const handleVideoEnded = async () => {
if ($slideshowState === SlideshowState.PlaySlideshow) {
await navigateAssetForward();
await navigateAsset('next');
}
};
@ -594,7 +583,9 @@
{#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
<NavigationArea on:click={navigateAssetBackward}><Icon path={mdiChevronLeft} size="36" /></NavigationArea>
<NavigationArea on:click={(e) => navigateAsset('previous', e)}
><Icon path={mdiChevronLeft} size="36" /></NavigationArea
>
</div>
{/if}
@ -603,9 +594,9 @@
{#if $slideshowState != SlideshowState.None}
<div class="z-[1000] absolute w-full flex">
<SlideshowBar
on:prev={navigateAssetBackward}
on:next={navigateAssetForward}
on:close={() => ($slideshowState = SlideshowState.StopSlideshow)}
onPrevious={() => navigateAsset('previous')}
onNext={() => navigateAsset('next')}
onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
/>
</div>
{/if}
@ -708,7 +699,9 @@
{#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
<NavigationArea on:click={navigateAssetForward}><Icon path={mdiChevronRight} size="36" /></NavigationArea>
<NavigationArea on:click={(e) => navigateAsset('next', e)}
><Icon path={mdiChevronRight} size="36" /></NavigationArea
>
</div>
{/if}