Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-07 10:14:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): small issues with the memory viewer. (#19184)

Browse Source 
* Match fade transition timing between photo-viewer and memory-viewer.

* Fix blank page after refreshing memory page.

If the user refreshed in the browser while on the memory page, the page
would show a blank page. This was caused by skipping initialization in
afterNavigate. Fix by always initializing the memory page in
afterNavigate.
This commit is contained in:
Dag Stuan 2025-06-15 17:04:33 +02:00 committed by GitHub
parent 523fe5bef7
commit 189442e9c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,9 +3,10 @@
import { zoomImageAction } 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 { assetViewerFadeDuration } from '$lib/constants';
import { castManager } from '$lib/managers/cast-manager.svelte';
import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import { photoViewerImgElement } 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';
@ -240,7 +241,7 @@
use:swipe={() => ({})}
onswipe={onSwipe}
class="h-full w-full"
transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
>
{#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
<img

14
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -23,12 +23,11 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute, QueryParameter } from '$lib/constants';
import { AppRoute, assetViewerFadeDuration, QueryParameter } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import type { Viewport } from '$lib/managers/timeline-manager/types';
import { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store';
@ -261,12 +260,7 @@
playerInitialized = true;
};
afterNavigate(({ from, to, type }) => {
if (type === 'enter') {
// afterNavigate triggers twice on first page load (once when mounted with 'enter' and then a second time
// with the actual 'goto' to URL).
return;
}
afterNavigate(({ from, to }) => {
memoryStore.initialize().then(
() => {
let target = null;
@ -469,7 +463,7 @@
>
<div class="relative h-full w-full rounded-2xl bg-black">
{#key current.asset.id}
<div transition:fade class="h-full w-full">
<div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
{#if current.asset.isVideo}
<video
bind:this={videoPlayer}

2
web/src/lib/constants.ts
View File

@ -420,3 +420,5 @@ export enum ToggleVisibility {
HIDE_UNNANEMD = 'hide-unnamed',
SHOW_ALL = 'show-all',
}
export const assetViewerFadeDuration: number = 150;