1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-23 20:22:45 +01:00

feat(web): Slideshow is enabled everywhere. It no longer needs assetStore. ()

Slideshow no longer needs assetStore. It is enabled everywhere

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Mattia Natali 2025-01-14 15:24:58 +01:00 committed by GitHub
parent f70ee3f350
commit 4279cd6e1e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 128 additions and 46 deletions
web/src
lib
components
asset-viewer
photos-page
shared-components/gallery-viewer
utilities-page/duplicates
stores
routes/(user)/map/[[photos=photos]]/[[assetId=id]]

View file

@ -8,7 +8,6 @@
import { updateNumberOfComments } from '$lib/stores/activity.store';
import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import type { AssetStore } from '$lib/stores/assets.store';
import { isShowDetail } from '$lib/stores/preferences.store';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
import { user } from '$lib/stores/user.store';
@ -49,8 +48,9 @@
import VideoViewer from './video-wrapper-viewer.svelte';
import ImagePanoramaViewer from './image-panorama-viewer.svelte';
type HasAsset = boolean;
interface Props {
assetStore?: AssetStore | null;
asset: AssetResponseDto;
preloadAssets?: AssetResponseDto[];
showNavigation?: boolean;
@ -61,13 +61,13 @@
onAction?: OnAction | undefined;
reactions?: ActivityResponseDto[];
onClose: (dto: { asset: AssetResponseDto }) => void;
onNext: () => void;
onPrevious: () => void;
onNext: () => Promise<HasAsset>;
onPrevious: () => Promise<HasAsset>;
onRandom: () => Promise<AssetResponseDto | null>;
copyImage?: () => Promise<void>;
}
let {
assetStore = null,
asset = $bindable(),
preloadAssets = $bindable([]),
showNavigation = true,
@ -80,6 +80,7 @@
onClose,
onNext,
onPrevious,
onRandom,
copyImage = $bindable(),
}: Props = $props();
@ -271,22 +272,6 @@
});
};
const navigateAssetRandom = async () => {
if (!assetStore) {
return;
}
const asset = await assetStore.getRandomAsset();
if (!asset) {
return;
}
slideshowHistory.queue(asset);
setAsset(asset);
$restartSlideshowProgress = true;
};
const navigateAsset = async (order?: 'previous' | 'next', e?: Event) => {
if (!order) {
if ($slideshowState === SlideshowState.PlaySlideshow) {
@ -296,23 +281,30 @@
}
}
e?.stopPropagation();
let hasNext = false;
if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle) {
return (order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next()) || navigateAssetRandom();
hasNext = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
if (!hasNext) {
const asset = await onRandom();
if (asset) {
slideshowHistory.queue(asset);
hasNext = true;
}
}
} else {
hasNext = order === 'previous' ? await onPrevious() : await onNext();
}
if ($slideshowState === SlideshowState.PlaySlideshow && assetStore) {
const hasNext =
order === 'previous' ? await assetStore.getPreviousAsset(asset) : await assetStore.getNextAsset(asset);
if ($slideshowState === SlideshowState.PlaySlideshow) {
if (hasNext) {
$restartSlideshowProgress = true;
} else {
await handleStopSlideshow();
}
}
e?.stopPropagation();
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
order === 'previous' ? onPrevious() : onNext();
};
// const showEditorHandler = () => {
@ -435,7 +427,7 @@
{person}
{stack}
showDetailButton={enableDetailPanel}
showSlideshow={!!assetStore}
showSlideshow={true}
onZoomImage={zoomToggle}
onCopyImage={copyImage}
onAction={handleAction}

View file

@ -527,6 +527,18 @@
return !!nextAsset;
};
const handleRandom = async () => {
const randomAsset = await $assetStore.getRandomAsset();
if (randomAsset) {
const preloadAsset = await $assetStore.getNextAsset(randomAsset);
assetViewingStore.setAsset(randomAsset, preloadAsset ? [preloadAsset] : []);
await navigate({ targetRoute: 'current', assetId: randomAsset.id });
}
return randomAsset;
};
const handleClose = async ({ asset }: { asset: AssetResponseDto }) => {
assetViewingStore.showAssetViewer(false);
showSkeleton = true;
@ -911,7 +923,6 @@
{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
<AssetViewer
{withStacked}
{assetStore}
asset={$viewingAsset}
preloadAssets={$preloadAssets}
{isShared}
@ -920,6 +931,7 @@
onAction={handleAction}
onPrevious={handlePrevious}
onNext={handleNext}
onRandom={handleRandom}
onClose={handleClose}
/>
{/await}

View file

@ -34,6 +34,7 @@
isShowDeleteConfirmation?: boolean;
onPrevious?: (() => Promise<AssetResponseDto | undefined>) | undefined;
onNext?: (() => Promise<AssetResponseDto | undefined>) | undefined;
onRandom?: (() => Promise<AssetResponseDto | undefined>) | undefined;
}
let {
@ -47,6 +48,7 @@
isShowDeleteConfirmation = $bindable(false),
onPrevious = undefined,
onNext = undefined,
onRandom = undefined,
}: Props = $props();
let { isViewing: isViewerOpen, asset: viewingAsset, setAsset } = assetViewingStore;
@ -202,35 +204,71 @@
})(),
);
const handleNext = async () => {
const handleNext = async (): Promise<boolean> => {
try {
let asset: AssetResponseDto | undefined;
if (onNext) {
asset = await onNext();
} else {
currentViewAssetIndex = Math.min(currentViewAssetIndex + 1, assets.length - 1);
asset = assets[currentViewAssetIndex];
currentViewAssetIndex = currentViewAssetIndex + 1;
asset = currentViewAssetIndex < assets.length ? assets[currentViewAssetIndex] : undefined;
}
if (!asset) {
return false;
}
await navigateToAsset(asset);
return true;
} catch (error) {
handleError(error, $t('errors.cannot_navigate_next_asset'));
return false;
}
};
const handlePrevious = async () => {
const handleRandom = async (): Promise<AssetResponseDto | null> => {
try {
let asset: AssetResponseDto | undefined;
if (onRandom) {
asset = await onRandom();
} else {
if (assets.length > 0) {
const randomIndex = Math.floor(Math.random() * assets.length);
asset = assets[randomIndex];
}
}
if (!asset) {
return null;
}
await navigateToAsset(asset);
return asset;
} catch (error) {
handleError(error, $t('errors.cannot_navigate_next_asset'));
return null;
}
};
const handlePrevious = async (): Promise<boolean> => {
try {
let asset: AssetResponseDto | undefined;
if (onPrevious) {
asset = await onPrevious();
} else {
currentViewAssetIndex = Math.max(currentViewAssetIndex - 1, 0);
asset = assets[currentViewAssetIndex];
currentViewAssetIndex = currentViewAssetIndex - 1;
asset = currentViewAssetIndex >= 0 ? assets[currentViewAssetIndex] : undefined;
}
if (!asset) {
return false;
}
await navigateToAsset(asset);
return true;
} catch (error) {
handleError(error, $t('errors.cannot_navigate_previous_asset'));
return false;
}
};
@ -372,6 +410,7 @@
onAction={handleAction}
onPrevious={handlePrevious}
onNext={handleNext}
onRandom={handleRandom}
onClose={() => {
assetViewingStore.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));

View file

@ -42,6 +42,34 @@
assetViewingStore.showAssetViewer(false);
});
const onNext = () => {
const index = getAssetIndex($viewingAsset.id) + 1;
if (index >= assets.length) {
return Promise.resolve(false);
}
setAsset(assets[index]);
return Promise.resolve(true);
};
const onPrevious = () => {
const index = getAssetIndex($viewingAsset.id) - 1;
if (index < 0) {
return Promise.resolve(false);
}
setAsset(assets[index]);
return Promise.resolve(true);
};
const onRandom = () => {
if (assets.length <= 0) {
return Promise.resolve(null);
}
const index = Math.floor(Math.random() * assets.length);
const asset = assets[index];
setAsset(asset);
return Promise.resolve(asset);
};
const onSelectAsset = (asset: AssetResponseDto) => {
if (selectedAssetIds.has(asset.id)) {
selectedAssetIds.delete(asset.id);
@ -153,14 +181,9 @@
<AssetViewer
asset={$viewingAsset}
showNavigation={assets.length > 1}
onNext={() => {
const index = getAssetIndex($viewingAsset.id) + 1;
setAsset(assets[index % assets.length]);
}}
onPrevious={() => {
const index = getAssetIndex($viewingAsset.id) - 1 + assets.length;
setAsset(assets[index % assets.length]);
}}
{onNext}
{onPrevious}
{onRandom}
onClose={() => {
assetViewingStore.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));

View file

@ -15,9 +15,10 @@ function createAssetViewingStore() {
viewState.set(true);
};
const setAssetId = async (id: string) => {
const setAssetId = async (id: string): Promise<AssetResponseDto> => {
const asset = await getAssetInfo({ id, key: getKey() });
setAsset(asset);
return asset;
};
const showAssetViewer = (show: boolean) => {

View file

@ -107,14 +107,28 @@
if (viewingAssetCursor < viewingAssets.length - 1) {
await setAssetId(viewingAssets[++viewingAssetCursor]);
await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
return true;
}
return false;
}
async function navigatePrevious() {
if (viewingAssetCursor > 0) {
await setAssetId(viewingAssets[--viewingAssetCursor]);
await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
return true;
}
return false;
}
async function navigateRandom() {
if (viewingAssets.length <= 0) {
return null;
}
const index = Math.floor(Math.random() * viewingAssets.length);
const asset = await setAssetId(viewingAssets[index]);
await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
return asset;
}
</script>
@ -132,6 +146,7 @@
showNavigation={viewingAssets.length > 1}
onNext={navigateNext}
onPrevious={navigatePrevious}
onRandom={navigateRandom}
onClose={() => {
assetViewingStore.showAssetViewer(false);
handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));