diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 2d05580d62..168637e134 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -17,11 +17,12 @@ import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader'; import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk'; import { IconButton, Logo } from '@immich/ui'; - import { mdiDownload, mdiFileImagePlusOutline } from '@mdi/js'; + import { mdiDownload, mdiFileImagePlusOutline, mdiPresentationPlay } from '@mdi/js'; import { t } from 'svelte-i18n'; import ControlAppBar from '../shared-components/control-app-bar.svelte'; import ThemeButton from '../shared-components/theme-button.svelte'; import AlbumSummary from './album-summary.svelte'; + import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store'; interface Props { sharedLink: SharedLinkResponseDto; @@ -32,7 +33,8 @@ const album = sharedLink.album as AlbumResponseDto; - let { isViewing: showAssetViewer } = assetViewingStore; + let { isViewing: showAssetViewer, setAssetId } = assetViewingStore; + let { slideshowState, slideshowNavigation } = slideshowStore; const options = $derived({ albumId: album.id, order: album.order }); let timelineManager = $state() as TimelineManager; @@ -45,6 +47,16 @@ dragAndDropFilesStore.set({ isDragging: false, files: [] }); } }); + + const handleStartSlideshow = async () => { + const asset = + $slideshowNavigation === SlideshowNavigation.Shuffle + ? await timelineManager.getRandomAsset() + : timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset; + if (asset) { + handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow))); + } + }; 0 && sharedLink.allowDownload} +