CodeCow/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-07-20 21:02:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

simplify memory viewer

Browse Source
This commit is contained in:
mertalev 2026-06-17 20:11:42 -04:00
parent 266671c697
commit 068da45454
No known key found for this signature in database
GPG Key ID: 0603AE056AA39037
2 changed files with 4 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
View File

@ -4,7 +4,6 @@
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import { autoPlayVideo } from '$lib/stores/preferences.store';
import { getAssetMediaUrl } from '$lib/utils';
import { videoSessionManager } from '$lib/managers/video-session-manager.svelte';
import { AssetMediaSize } from '@immich/sdk';
import 'media-chrome/media-controller';
import { onMount } from 'svelte';
@ -12,25 +11,15 @@
interface Props {
asset: TimelineAsset;
videoPlayer: HTMLVideoElement | undefined;
}
// eslint-disable-next-line no-useless-assignment
let { asset, videoPlayer = $bindable() }: Props = $props();
let { asset }: Props = $props();
let showVideo = $state(false);
onMount(() => {
// Show video after mount to ensure fading in.
showVideo = true;
});
const controller = $derived(videoSessionManager.get(asset.id)); // <immich-video> self-acquires the controller for the asset
$effect(() => {
videoPlayer = controller?.element;
return () => {
videoPlayer = undefined;
};
});
</script>
{#if showVideo}

5
web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
View File

@ -21,6 +21,7 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { memoryManager, type MemoryAsset } from '$lib/managers/memory-manager.svelte';
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
import { videoSessionManager } from '$lib/managers/video-session-manager.svelte';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
import { locale } from '$lib/stores/preferences.store';
@ -80,7 +81,7 @@
// need to include padding in the viewport for gallery
const galleryViewport: Viewport = $derived({ height: viewport.height, width: viewport.width - 32 });
let progressBarController: Tween<number> | undefined = $state(undefined);
let videoPlayer: HTMLVideoElement | undefined = $state();
const videoPlayer = $derived(currentAssetId ? videoSessionManager.get(currentAssetId)?.element : undefined);
const asHref = (asset: { id: string }) => `?${QueryParameter.ID}=${asset.id}`;
const handleNavigate = async (asset?: { id: string }) => {
@ -516,7 +517,7 @@
<div class="relative size-full rounded-2xl bg-black">
{#key current.asset.id}
{#if current.asset.isVideo}
<MemoryVideoViewer asset={current.asset} bind:videoPlayer />
<MemoryVideoViewer asset={current.asset} />
{:else}
<MemoryPhotoViewer asset={current.asset} onImageLoad={resetAndPlay} />
{/if}