Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-08 10:44:15 -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 { zoomImageAction } from '$lib/actions/zoom-image';
import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte'; import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
import BrokenAsset from '$lib/components/assets/broken-asset.svelte'; import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
import { assetViewerFadeDuration } from '$lib/constants';
import { castManager } from '$lib/managers/cast-manager.svelte'; 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 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 { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { boundingBoxesArray } from '$lib/stores/people.store'; import { boundingBoxesArray } from '$lib/stores/people.store';
import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store'; import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
@ -240,7 +241,7 @@
use:swipe={() => ({})} use:swipe={() => ({})}
onswipe={onSwipe} onswipe={onSwipe}
class="h-full w-full" class="h-full w-full"
transition:fade={{ duration: haveFadeTransition ? 150 : 0 }} transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
> >
{#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground} {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
<img <img

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

@ -23,12 +23,11 @@
notificationController, notificationController,
NotificationType, NotificationType,
} from '$lib/components/shared-components/notification/notification'; } 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 { 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 { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; 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 { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store'; import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
import { preferences } from '$lib/stores/user.store'; import { preferences } from '$lib/stores/user.store';
@ -261,12 +260,7 @@
playerInitialized = true; playerInitialized = true;
}; };
afterNavigate(({ from, to, type }) => { afterNavigate(({ from, to }) => {
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;
}
memoryStore.initialize().then( memoryStore.initialize().then(
() => { () => {
let target = null; let target = null;
@ -469,7 +463,7 @@
> >
<div class="relative h-full w-full rounded-2xl bg-black"> <div class="relative h-full w-full rounded-2xl bg-black">
{#key current.asset.id} {#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} {#if current.asset.isVideo}
<video <video
bind:this={videoPlayer} bind:this={videoPlayer}

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

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