mirror of
https://github.com/immich-app/immich.git
synced 2026-05-18 03:10:24 +03:00
Andreas Heinz
f72aa54a1f
* feat(enhancement): navigate stack with up and down arrow keys * remove unnecessary code * move shortcut to section; no need for document level
699 lines
22 KiB
Svelte
699 lines
22 KiB
Svelte
<script lang="ts">
|
|
import { browser } from '$app/environment';
|
|
import { focusTrap } from '$lib/actions/focus-trap';
|
|
import { shortcuts } from '$lib/actions/shortcut';
|
|
import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
|
|
import NextAssetAction from '$lib/components/asset-viewer/actions/NextAssetAction.svelte';
|
|
import PreviousAssetAction from '$lib/components/asset-viewer/actions/PreviousAssetAction.svelte';
|
|
import AssetViewerNavBar from '$lib/components/asset-viewer/AssetViewerNavBar.svelte';
|
|
import { preloadManager } from '$lib/components/asset-viewer/PreloadManager.svelte';
|
|
import OnEvents from '$lib/components/OnEvents.svelte';
|
|
import { AssetAction, ProjectionType } from '$lib/constants';
|
|
import { activityManager } from '$lib/managers/activity-manager.svelte';
|
|
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
|
|
import { authManager } from '$lib/managers/auth-manager.svelte';
|
|
import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
|
|
import { eventManager } from '$lib/managers/event-manager.svelte';
|
|
import { getAssetActions } from '$lib/services/asset.service';
|
|
import { ocrManager } from '$lib/stores/ocr.svelte';
|
|
import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
|
|
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
|
|
import { getSharedLink, handlePromiseError } from '$lib/utils';
|
|
import type { OnUndoDelete } from '$lib/utils/actions';
|
|
import { navigateToAsset } from '$lib/utils/asset-utils';
|
|
import { handleError } from '$lib/utils/handle-error';
|
|
import { InvocationTracker } from '$lib/utils/invocationTracker';
|
|
import { SlideshowHistory } from '$lib/utils/slideshow-history';
|
|
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
|
import {
|
|
AssetTypeEnum,
|
|
getAssetInfo,
|
|
getStack,
|
|
type AlbumResponseDto,
|
|
type AssetResponseDto,
|
|
type PersonResponseDto,
|
|
type StackResponseDto,
|
|
} from '@immich/sdk';
|
|
import { CommandPaletteDefaultProvider } from '@immich/ui';
|
|
import { onDestroy, onMount, untrack } from 'svelte';
|
|
import type { SwipeCustomEvent } from 'svelte-gestures';
|
|
import { t } from 'svelte-i18n';
|
|
import { fly } from 'svelte/transition';
|
|
import Thumbnail from '../assets/thumbnail/Thumbnail.svelte';
|
|
import ActivityStatus from './ActivityStatus.svelte';
|
|
import ActivityViewer from './ActivityViewer.svelte';
|
|
import DetailPanel from './DetailPanel.svelte';
|
|
import EditorPanel from './editor/EditorPanel.svelte';
|
|
import CropArea from './editor/transform-tool/CropArea.svelte';
|
|
import ImagePanoramaViewer from './ImagePanoramaViewer.svelte';
|
|
import OcrButton from './OcrButton.svelte';
|
|
import PhotoViewer from './PhotoViewer.svelte';
|
|
import SlideshowBar from './SlideshowBar.svelte';
|
|
import VideoViewer from './VideoWrapperViewer.svelte';
|
|
|
|
export type AssetCursor = {
|
|
current: AssetResponseDto;
|
|
nextAsset?: AssetResponseDto;
|
|
previousAsset?: AssetResponseDto;
|
|
};
|
|
|
|
interface Props {
|
|
cursor: AssetCursor;
|
|
showNavigation?: boolean;
|
|
withStacked?: boolean;
|
|
isShared?: boolean;
|
|
album?: AlbumResponseDto;
|
|
person?: PersonResponseDto;
|
|
onAssetChange?: (asset: AssetResponseDto) => void;
|
|
preAction?: PreAction;
|
|
onAction?: OnAction;
|
|
onUndoDelete?: OnUndoDelete;
|
|
onClose?: (assetId: string) => void;
|
|
onRemoveFromAlbum?: (assetIds: string[]) => void;
|
|
onRandom?: () => Promise<{ id: string } | undefined>;
|
|
}
|
|
|
|
let {
|
|
cursor,
|
|
showNavigation = true,
|
|
withStacked = false,
|
|
isShared = false,
|
|
album,
|
|
person,
|
|
onAssetChange,
|
|
preAction,
|
|
onAction,
|
|
onUndoDelete,
|
|
onClose,
|
|
onRemoveFromAlbum,
|
|
onRandom,
|
|
}: Props = $props();
|
|
|
|
const {
|
|
restartProgress: restartSlideshowProgress,
|
|
stopProgress: stopSlideshowProgress,
|
|
slideshowNavigation,
|
|
slideshowState,
|
|
slideshowRepeat,
|
|
} = slideshowStore;
|
|
const stackThumbnailSize = 60;
|
|
const stackSelectedThumbnailSize = 65;
|
|
|
|
let previewStackedAsset: AssetResponseDto | undefined = $state();
|
|
let stack: StackResponseDto | null = $state(null);
|
|
|
|
const asset = $derived(previewStackedAsset ?? cursor.current);
|
|
const nextAsset = $derived(cursor.nextAsset);
|
|
const previousAsset = $derived(cursor.previousAsset);
|
|
let sharedLink = getSharedLink();
|
|
let fullscreenElement = $state<Element>();
|
|
|
|
let playOriginalVideo = $state($alwaysLoadOriginalVideo);
|
|
let slideshowStartAssetId = $state<string>();
|
|
|
|
const setPlayOriginalVideo = (value: boolean) => {
|
|
playOriginalVideo = value;
|
|
};
|
|
|
|
const refreshStack = async () => {
|
|
if (authManager.isSharedLink || !withStacked) {
|
|
return;
|
|
}
|
|
|
|
if (asset.stack) {
|
|
stack = await getStack({ id: asset.stack.id });
|
|
}
|
|
|
|
if (!stack?.assets.some(({ id }) => id === asset.id)) {
|
|
stack = null;
|
|
}
|
|
};
|
|
|
|
const handleFavorite = async () => {
|
|
if (!album || !album.isActivityEnabled) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await activityManager.toggleLike();
|
|
} catch (error) {
|
|
handleError(error, $t('errors.unable_to_change_favorite'));
|
|
}
|
|
};
|
|
|
|
const onAssetUpdate = (updatedAsset: AssetResponseDto) => {
|
|
if (asset.id === updatedAsset.id) {
|
|
cursor = { ...cursor, current: updatedAsset };
|
|
}
|
|
};
|
|
|
|
onMount(() => {
|
|
syncAssetViewerOpenClass(true);
|
|
const slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
|
|
if (value === SlideshowState.PlaySlideshow) {
|
|
slideshowHistory.reset();
|
|
slideshowHistory.queue(toTimelineAsset(asset));
|
|
handlePromiseError(handlePlaySlideshow());
|
|
} else if (value === SlideshowState.StopSlideshow) {
|
|
handlePromiseError(handleStopSlideshow());
|
|
}
|
|
});
|
|
|
|
const slideshowNavigationUnsubscribe = slideshowNavigation.subscribe((value) => {
|
|
if (value === SlideshowNavigation.Shuffle) {
|
|
slideshowHistory.reset();
|
|
slideshowHistory.queue(toTimelineAsset(asset));
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
slideshowStateUnsubscribe();
|
|
slideshowNavigationUnsubscribe();
|
|
};
|
|
});
|
|
|
|
onDestroy(() => {
|
|
activityManager.reset();
|
|
assetViewerManager.resetPanelState();
|
|
syncAssetViewerOpenClass(false);
|
|
preloadManager.destroy();
|
|
});
|
|
|
|
const closeViewer = () => {
|
|
onClose?.(asset.id);
|
|
};
|
|
|
|
const closeEditor = async () => {
|
|
if (editManager.hasAppliedEdits) {
|
|
const refreshedAsset = await getAssetInfo({ id: asset.id });
|
|
onAssetChange?.(refreshedAsset);
|
|
assetViewerManager.setAsset(refreshedAsset);
|
|
}
|
|
assetViewerManager.closeEditor();
|
|
};
|
|
|
|
const tracker = new InvocationTracker();
|
|
const navigateAsset = (order?: 'previous' | 'next') => {
|
|
if (!order) {
|
|
if ($slideshowState === SlideshowState.PlaySlideshow) {
|
|
order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
preloadManager.cancelBeforeNavigation(order);
|
|
|
|
if (tracker.isActive()) {
|
|
return;
|
|
}
|
|
|
|
void tracker.invoke(async () => {
|
|
const isShuffle =
|
|
$slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle;
|
|
|
|
let hasNext: boolean;
|
|
|
|
if (isShuffle) {
|
|
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 navigateToAsset(cursor.previousAsset) : await navigateToAsset(cursor.nextAsset);
|
|
}
|
|
|
|
if ($slideshowState !== SlideshowState.PlaySlideshow) {
|
|
return;
|
|
}
|
|
|
|
if (hasNext) {
|
|
$restartSlideshowProgress = true;
|
|
return;
|
|
}
|
|
|
|
if ($slideshowRepeat && slideshowStartAssetId) {
|
|
await assetViewerManager.setAssetId(slideshowStartAssetId);
|
|
$restartSlideshowProgress = true;
|
|
return;
|
|
}
|
|
|
|
await handleStopSlideshow();
|
|
}, $t('error_while_navigating'));
|
|
};
|
|
|
|
const navigateStack = (direction: 'previous' | 'next') => {
|
|
if (!stack || !withStacked || assetViewerManager.isShowEditor) {
|
|
return;
|
|
}
|
|
const assets = stack.assets;
|
|
const currentIndex = assets.findIndex(({ id }) => id === asset.id);
|
|
if (currentIndex === -1) {
|
|
return;
|
|
}
|
|
const nextIndex = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
|
|
if (nextIndex < 0 || nextIndex >= assets.length) {
|
|
return;
|
|
}
|
|
cursor.current = assets[nextIndex];
|
|
};
|
|
|
|
/**
|
|
* Slide show mode
|
|
*/
|
|
|
|
let assetViewerHtmlElement = $state<HTMLElement>();
|
|
|
|
const slideshowHistory = new SlideshowHistory((asset) => {
|
|
handlePromiseError(assetViewerManager.setAssetId(asset.id).then(() => ($restartSlideshowProgress = true)));
|
|
});
|
|
|
|
const handleVideoStarted = () => {
|
|
if ($slideshowState === SlideshowState.PlaySlideshow) {
|
|
$stopSlideshowProgress = true;
|
|
}
|
|
};
|
|
|
|
const handlePlaySlideshow = async () => {
|
|
slideshowStartAssetId = asset.id;
|
|
try {
|
|
await assetViewerHtmlElement?.requestFullscreen?.();
|
|
} catch (error) {
|
|
handleError(error, $t('errors.unable_to_enter_fullscreen'));
|
|
$slideshowState = SlideshowState.StopSlideshow;
|
|
}
|
|
};
|
|
|
|
const handleStopSlideshow = async () => {
|
|
try {
|
|
if (document.fullscreenElement) {
|
|
await document.exitFullscreen();
|
|
}
|
|
} catch (error) {
|
|
handleError(error, $t('errors.unable_to_exit_fullscreen'));
|
|
} finally {
|
|
$stopSlideshowProgress = true;
|
|
$slideshowState = SlideshowState.None;
|
|
}
|
|
};
|
|
|
|
const handleStackedAssetMouseEvent = (isMouseOver: boolean, stackedAsset: AssetResponseDto) => {
|
|
previewStackedAsset = isMouseOver ? stackedAsset : undefined;
|
|
};
|
|
|
|
const handlePreAction = (action: Action) => {
|
|
preAction?.(action);
|
|
};
|
|
|
|
const handleAction = async (action: Action) => {
|
|
switch (action.type) {
|
|
case AssetAction.DELETE:
|
|
case AssetAction.TRASH: {
|
|
eventManager.emit('AssetsDelete', [asset.id]);
|
|
break;
|
|
}
|
|
case AssetAction.REMOVE_ASSET_FROM_STACK: {
|
|
stack = action.stack;
|
|
if (stack) {
|
|
cursor.current = stack.assets[0];
|
|
}
|
|
break;
|
|
}
|
|
case AssetAction.STACK:
|
|
case AssetAction.SET_STACK_PRIMARY_ASSET: {
|
|
stack = action.stack;
|
|
break;
|
|
}
|
|
case AssetAction.SET_PERSON_FEATURED_PHOTO: {
|
|
const assetInfo = await getAssetInfo({ id: asset.id });
|
|
cursor.current = { ...asset, people: assetInfo.people };
|
|
break;
|
|
}
|
|
case AssetAction.RATING: {
|
|
cursor.current = {
|
|
...asset,
|
|
exifInfo: {
|
|
...asset.exifInfo,
|
|
rating: action.rating,
|
|
},
|
|
};
|
|
break;
|
|
}
|
|
case AssetAction.UNSTACK: {
|
|
closeViewer();
|
|
break;
|
|
}
|
|
}
|
|
|
|
onAction?.(action);
|
|
};
|
|
|
|
let isFullScreen = $derived(!!fullscreenElement);
|
|
|
|
$effect(() => {
|
|
if (album && !album.isActivityEnabled && activityManager.commentCount === 0) {
|
|
assetViewerManager.closeActivityPanel();
|
|
}
|
|
});
|
|
$effect(() => {
|
|
if (album && isShared && asset.id) {
|
|
handlePromiseError(activityManager.init(album.id, asset.id));
|
|
}
|
|
});
|
|
|
|
const syncAssetViewerOpenClass = (isOpen: boolean) => {
|
|
if (browser) {
|
|
document.body.classList.toggle('asset-viewer-open', isOpen);
|
|
}
|
|
};
|
|
|
|
const refresh = async () => {
|
|
await refreshStack();
|
|
ocrManager.clear();
|
|
if (!sharedLink) {
|
|
if (previewStackedAsset) {
|
|
await ocrManager.getAssetOcr(previewStackedAsset.id);
|
|
}
|
|
await ocrManager.getAssetOcr(asset.id);
|
|
}
|
|
};
|
|
|
|
$effect(() => {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
asset;
|
|
untrack(() => handlePromiseError(refresh()));
|
|
});
|
|
|
|
let lastCursor = $state<AssetCursor>();
|
|
|
|
$effect(() => {
|
|
if (cursor.current.id === lastCursor?.current.id) {
|
|
return;
|
|
}
|
|
if (lastCursor) {
|
|
preloadManager.updateAfterNavigation(lastCursor, cursor, sharedLink);
|
|
}
|
|
if (!lastCursor) {
|
|
preloadManager.initializePreloads(cursor, sharedLink);
|
|
}
|
|
lastCursor = cursor;
|
|
});
|
|
|
|
const viewerKind = $derived.by(() => {
|
|
if (previewStackedAsset) {
|
|
return previewStackedAsset.type === AssetTypeEnum.Image ? 'PhotoViewer' : 'StackVideoViewer';
|
|
}
|
|
if (asset.type === AssetTypeEnum.Video) {
|
|
return 'VideoViewer';
|
|
}
|
|
if (assetViewerManager.isPlayingMotionPhoto && asset.livePhotoVideoId) {
|
|
return 'LiveVideoViewer';
|
|
}
|
|
if (
|
|
asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR ||
|
|
(asset.originalPath && asset.originalPath.toLowerCase().endsWith('.insp'))
|
|
) {
|
|
return 'ImagePanaramaViewer';
|
|
}
|
|
if (assetViewerManager.isShowEditor && editManager.selectedTool?.type === EditToolType.Transform) {
|
|
return 'CropArea';
|
|
}
|
|
return 'PhotoViewer';
|
|
});
|
|
|
|
const showActivityStatus = $derived(
|
|
$slideshowState === SlideshowState.None &&
|
|
isShared &&
|
|
((album && album.isActivityEnabled) || activityManager.commentCount > 0) &&
|
|
!activityManager.isLoading,
|
|
);
|
|
|
|
const showOcrButton = $derived(
|
|
$slideshowState === SlideshowState.None &&
|
|
asset.type === AssetTypeEnum.Image &&
|
|
!assetViewerManager.isShowEditor &&
|
|
ocrManager.hasOcrData,
|
|
);
|
|
|
|
const { Tag, TagPeople } = $derived(getAssetActions($t, asset));
|
|
const showDetailPanel = $derived(
|
|
asset.hasMetadata &&
|
|
$slideshowState === SlideshowState.None &&
|
|
assetViewerManager.isShowDetailPanel &&
|
|
!assetViewerManager.isShowEditor,
|
|
);
|
|
|
|
const onSwipe = (event: SwipeCustomEvent) => {
|
|
if (assetViewerManager.zoom > 1) {
|
|
return;
|
|
}
|
|
|
|
if (ocrManager.showOverlay) {
|
|
return;
|
|
}
|
|
|
|
if (event.detail.direction === 'left') {
|
|
navigateAsset('next');
|
|
}
|
|
|
|
if (event.detail.direction === 'right') {
|
|
navigateAsset('previous');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<CommandPaletteDefaultProvider name={$t('assets')} actions={[Tag, TagPeople]} />
|
|
<OnEvents {onAssetUpdate} />
|
|
|
|
<svelte:document bind:fullscreenElement />
|
|
|
|
<section
|
|
id="immich-asset-viewer"
|
|
class="fixed inset-s-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
|
|
use:focusTrap
|
|
use:shortcuts={[
|
|
{ shortcut: { key: 'ArrowUp' }, onShortcut: () => navigateStack('previous') },
|
|
{ shortcut: { key: 'ArrowDown' }, onShortcut: () => navigateStack('next') },
|
|
]}
|
|
bind:this={assetViewerHtmlElement}
|
|
>
|
|
<!-- Top navigation bar -->
|
|
{#if $slideshowState === SlideshowState.None && !assetViewerManager.isShowEditor}
|
|
<div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
|
|
<AssetViewerNavBar
|
|
{asset}
|
|
{album}
|
|
{person}
|
|
{stack}
|
|
showSlideshow={true}
|
|
preAction={handlePreAction}
|
|
onAction={handleAction}
|
|
{onUndoDelete}
|
|
onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
|
|
onClose={onClose ? () => onClose(stack?.primaryAssetId ?? asset.id) : undefined}
|
|
{onRemoveFromAlbum}
|
|
{playOriginalVideo}
|
|
{setPlayOriginalVideo}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if $slideshowState != SlideshowState.None}
|
|
<div class="absolute inset-s-0 top-0 flex w-full justify-start">
|
|
<SlideshowBar
|
|
{isFullScreen}
|
|
assetType={previewStackedAsset?.type ?? asset.type}
|
|
onSetToFullScreen={() => assetViewerHtmlElement?.requestFullscreen?.()}
|
|
onPrevious={() => navigateAsset('previous')}
|
|
onNext={() => navigateAsset('next')}
|
|
onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && previousAsset}
|
|
<div class="col-span-1 col-start-1 row-span-full row-start-1 my-auto justify-self-start">
|
|
<PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Asset Viewer -->
|
|
<div data-viewer-content class="relative z-[-1] col-span-4 col-start-1 row-span-full row-start-1">
|
|
{#if viewerKind === 'StackVideoViewer'}
|
|
<VideoViewer
|
|
asset={previewStackedAsset!}
|
|
cacheKey={previewStackedAsset!.thumbhash}
|
|
projectionType={previewStackedAsset!.exifInfo?.projectionType}
|
|
loopVideo={true}
|
|
onPreviousAsset={() => navigateAsset('previous')}
|
|
onNextAsset={() => navigateAsset('next')}
|
|
onClose={closeViewer}
|
|
onVideoEnded={() => navigateAsset()}
|
|
onVideoStarted={handleVideoStarted}
|
|
{playOriginalVideo}
|
|
/>
|
|
{:else if viewerKind === 'LiveVideoViewer'}
|
|
<VideoViewer
|
|
{asset}
|
|
assetId={asset.livePhotoVideoId!}
|
|
cacheKey={asset.thumbhash}
|
|
projectionType={asset.exifInfo?.projectionType}
|
|
loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
|
|
onPreviousAsset={() => navigateAsset('previous')}
|
|
onNextAsset={() => navigateAsset('next')}
|
|
onVideoEnded={() => (assetViewerManager.isPlayingMotionPhoto = false)}
|
|
{playOriginalVideo}
|
|
/>
|
|
{:else if viewerKind === 'ImagePanaramaViewer'}
|
|
<ImagePanoramaViewer {asset} />
|
|
{:else if viewerKind === 'CropArea'}
|
|
<CropArea {asset} />
|
|
{:else if viewerKind === 'PhotoViewer'}
|
|
<PhotoViewer cursor={{ ...cursor, current: asset }} {sharedLink} {onSwipe} />
|
|
{:else if viewerKind === 'VideoViewer'}
|
|
<VideoViewer
|
|
{asset}
|
|
cacheKey={asset.thumbhash}
|
|
projectionType={asset.exifInfo?.projectionType}
|
|
loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
|
|
extendedControls
|
|
onPreviousAsset={() => navigateAsset('previous')}
|
|
onNextAsset={() => navigateAsset('next')}
|
|
onClose={closeViewer}
|
|
onVideoEnded={() => navigateAsset()}
|
|
onVideoStarted={handleVideoStarted}
|
|
{playOriginalVideo}
|
|
/>
|
|
{/if}
|
|
|
|
{#if showActivityStatus}
|
|
<div class="absolute inset-e-0 bottom-0 me-8 mb-20">
|
|
<ActivityStatus
|
|
disabled={!album?.isActivityEnabled}
|
|
isLiked={activityManager.isLiked}
|
|
numberOfComments={activityManager.commentCount}
|
|
numberOfLikes={activityManager.likeCount}
|
|
onFavorite={handleFavorite}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if showOcrButton}
|
|
<div class="absolute inset-e-0 bottom-0 me-6 mb-6 drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]">
|
|
<OcrButton />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && nextAsset}
|
|
<div class="col-span-1 col-start-4 row-span-full row-start-1 my-auto justify-self-end">
|
|
<NextAssetAction onNextAsset={() => navigateAsset('next')} />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if showDetailPanel || assetViewerManager.isShowEditor}
|
|
<div
|
|
transition:fly={{ duration: 150 }}
|
|
id="detail-panel"
|
|
class={[
|
|
'row-span-4 row-start-1 overflow-y-auto bg-light transition-all dark:border-l dark:border-s-immich-dark-gray',
|
|
showDetailPanel ? 'w-90' : 'w-100',
|
|
]}
|
|
translate="yes"
|
|
>
|
|
{#if showDetailPanel}
|
|
<DetailPanel {asset} currentAlbum={album} />
|
|
{:else if assetViewerManager.isShowEditor}
|
|
<EditorPanel {asset} onClose={closeEditor} />
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if stack && withStacked && !assetViewerManager.isShowEditor}
|
|
{@const stackedAssets = stack.assets}
|
|
<div id="stack-slideshow" class="pointer-events-none absolute bottom-0 col-span-4 col-start-1 w-full">
|
|
<div class="no-wrap horizontal-scrollbar relative flex flex-row overflow-x-auto overflow-y-hidden">
|
|
{#each stackedAssets as stackedAsset (stackedAsset.id)}
|
|
<div
|
|
class={['pointer-events-auto relative inline-block px-1 pb-2 transition-all']}
|
|
style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
|
|
>
|
|
<Thumbnail
|
|
imageClass={{ 'border-2 border-white': stackedAsset.id === asset.id }}
|
|
brokenAssetClass="text-xs"
|
|
dimmed={stackedAsset.id !== asset.id}
|
|
asset={toTimelineAsset(stackedAsset)}
|
|
onClick={() => {
|
|
cursor.current = stackedAsset;
|
|
previewStackedAsset = undefined;
|
|
}}
|
|
onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
|
|
readonly
|
|
thumbnailSize={stackedAsset.id === asset.id ? stackSelectedThumbnailSize : stackThumbnailSize}
|
|
showStackedIcon={false}
|
|
disableLinkMouseOver
|
|
/>
|
|
|
|
{#if stackedAsset.id === asset.id}
|
|
<div class="flex w-full place-content-center place-items-center">
|
|
<div class="mt-0.5 flex size-2 rounded-full bg-white"></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if isShared && album && assetViewerManager.isShowActivityPanel && authManager.authenticated}
|
|
<div
|
|
transition:fly={{ duration: 150 }}
|
|
id="activity-panel"
|
|
class="row-span-5 row-start-1 w-90 overflow-y-auto transition-all md:w-115 dark:border-l dark:border-s-immich-dark-gray"
|
|
translate="yes"
|
|
>
|
|
<ActivityViewer
|
|
disabled={!album.isActivityEnabled}
|
|
assetType={asset.type}
|
|
albumUsers={album.albumUsers}
|
|
albumId={album.id}
|
|
assetId={asset.id}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
|
|
<style>
|
|
#immich-asset-viewer {
|
|
contain: layout;
|
|
}
|
|
|
|
.horizontal-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
.horizontal-scrollbar::-webkit-scrollbar-track {
|
|
background: #000000;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* Handle */
|
|
.horizontal-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(159, 159, 159, 0.408);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* Handle on hover */
|
|
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: #adcbfa;
|
|
border-radius: 16px;
|
|
}
|
|
</style>
|