{#if showCloseButton}
@@ -138,7 +139,7 @@
{/if}
{#if !isOwner && showDownloadButton}
-
void;
+ onClose: (asset: AssetResponseDto) => void;
onNext: () => Promise;
onPrevious: () => Promise;
- onRandom: () => Promise;
+ onRandom: () => Promise<{ id: string } | undefined>;
copyImage?: () => Promise;
}
@@ -81,7 +83,7 @@
copyImage = $bindable(),
}: Props = $props();
- const { setAsset } = assetViewingStore;
+ const { setAssetId } = assetViewingStore;
const {
restartProgress: restartSlideshowProgress,
stopProgress: stopSlideshowProgress,
@@ -121,7 +123,7 @@
untrack(() => {
if (stack && stack?.assets.length > 1) {
- preloadAssets.push(stack.assets[1]);
+ preloadAssets.push(toTimelineAsset(stack.assets[1]));
}
});
};
@@ -161,7 +163,7 @@
slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
if (value === SlideshowState.PlaySlideshow) {
slideshowHistory.reset();
- slideshowHistory.queue(asset);
+ slideshowHistory.queue(toTimelineAsset(asset));
handlePromiseError(handlePlaySlideshow());
} else if (value === SlideshowState.StopSlideshow) {
handlePromiseError(handleStopSlideshow());
@@ -171,7 +173,7 @@
shuffleSlideshowUnsubscribe = slideshowNavigation.subscribe((value) => {
if (value === SlideshowNavigation.Shuffle) {
slideshowHistory.reset();
- slideshowHistory.queue(asset);
+ slideshowHistory.queue(toTimelineAsset(asset));
}
});
@@ -225,7 +227,7 @@
};
const closeViewer = () => {
- onClose({ asset });
+ onClose(asset);
};
const closeEditor = () => {
@@ -292,8 +294,7 @@
let assetViewerHtmlElement = $state();
const slideshowHistory = new SlideshowHistory((asset) => {
- setAsset(asset);
- $restartSlideshowProgress = true;
+ handlePromiseError(setAssetId(asset.id).then(() => ($restartSlideshowProgress = true)));
});
const handleVideoStarted = () => {
@@ -563,8 +564,8 @@
imageClass={{ 'border-2 border-white': stackedAsset.id === asset.id }}
brokenAssetClass="text-xs"
dimmed={stackedAsset.id !== asset.id}
- asset={stackedAsset}
- onClick={(stackedAsset) => {
+ asset={toTimelineAsset(stackedAsset)}
+ onClick={() => {
asset = stackedAsset;
}}
onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
diff --git a/web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte b/web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte
index 9c4b0bcaa4..a264ad8ddd 100644
--- a/web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte
+++ b/web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte
@@ -12,6 +12,7 @@
resetGlobalCropStore,
rotateDegrees,
} from '$lib/stores/asset-editor.store';
+ import { toTimelineAsset } from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@immich/sdk';
import { animateCropChange, recalculateCrop } from './crop-settings';
import { cropAreaEl, cropFrame, imgElement, isResizingOrDragging, overlayEl, resetCropStore } from './crop-store';
@@ -81,7 +82,7 @@
aria-label="Crop area"
type="button"
>
- 
+
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 6711d126ca..564cef5308 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -3,7 +3,7 @@
import { zoomImageAction, zoomed } from '$lib/actions/zoom-image';
import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
- import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
+ import { photoViewerImgElement, type TimelineAsset } from '$lib/stores/assets-store.svelte';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { boundingBoxesArray } from '$lib/stores/people.store';
import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
@@ -13,9 +13,10 @@
import { canCopyImageToClipboard, copyImageToClipboard, isWebCompatibleImage } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { getBoundingBox } from '$lib/utils/people-utils';
- import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
+ import { cancelImageUrl } from '$lib/utils/sw-messaging';
import { getAltText } from '$lib/utils/thumbnail-util';
- import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+ import { toTimelineAsset } from '$lib/utils/timeline-util';
+ import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
import { onDestroy, onMount } from 'svelte';
import { swipe, type SwipeCustomEvent } from 'svelte-gestures';
import { t } from 'svelte-i18n';
@@ -25,7 +26,7 @@
interface Props {
asset: AssetResponseDto;
- preloadAssets?: AssetResponseDto[] | undefined;
+ preloadAssets?: TimelineAsset[] | undefined;
element?: HTMLDivElement | undefined;
haveFadeTransition?: boolean;
sharedLink?: SharedLinkResponseDto | undefined;
@@ -69,10 +70,11 @@
$boundingBoxesArray = [];
});
- const preload = (targetSize: AssetMediaSize | 'original', preloadAssets?: AssetResponseDto[]) => {
+ const preload = (targetSize: AssetMediaSize | 'original', preloadAssets?: TimelineAsset[]) => {
for (const preloadAsset of preloadAssets || []) {
- if (preloadAsset.type === AssetTypeEnum.Image) {
- preloadImageUrl(getAssetUrl(preloadAsset.id, targetSize, preloadAsset.thumbhash));
+ if (preloadAsset.isImage) {
+ let img = new Image();
+ img.src = getAssetUrl(preloadAsset.id, targetSize, preloadAsset.thumbhash);
}
}
};
@@ -197,7 +199,7 @@
bind:clientWidth={containerWidth}
bind:clientHeight={containerHeight}
>
-
+
{#if !imageLoaded}
@@ -221,7 +223,7 @@
void) | undefined;
- onSelect?: ((asset: AssetResponseDto) => void) | undefined;
- onMouseEvent?: ((event: { isMouseOver: boolean; selectedGroupIndex: number }) => void) | undefined;
- handleFocus?: (() => void) | undefined;
+ onClick?: (asset: TimelineAsset) => void;
+ onSelect?: (asset: TimelineAsset) => void;
+ onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
+ handleFocus?: () => void;
}
let {
@@ -215,7 +216,7 @@
slow: ??ms
-->
@@ -278,7 +279,7 @@
@@ -290,13 +291,13 @@
{/if}
- {#if !authManager.key && showArchiveIcon && asset.isArchived}
+ {#if !authManager.key && showArchiveIcon && asset.visibility === Visibility.Archive}
@@ -329,17 +330,17 @@
curve={selected}
onComplete={(errored) => ((loaded = true), (thumbError = errored))}
/>
- {#if asset.type === AssetTypeEnum.Video}
+ {#if asset.isVideo}
@@ -117,7 +117,7 @@
{@const buttonStyle = renderedOption.disabled ? '' : 'transition-all hover:bg-gray-300 dark:hover:bg-gray-800'}