helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: TimelineManager is owned by Timeline.svelte (#22839)

Browse source 
feat: TimelineManager is owned by Timeline.svelte
This commit is contained in:
Min Idzelis 2025-10-15 13:27:44 -04:00 • committed by GitHub
parent f1e03d0022
commit b3055d2e94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 71 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -17,7 +17,6 @@
import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { mdiDownload, mdiFileImagePlusOutline } from '@mdi/js';
import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
@ -35,9 +34,8 @@
let { isViewing: showAssetViewer } = assetViewingStore;
const timelineManager = new TimelineManager();
$effect(() => void timelineManager.updateOptions({ albumId: album.id, order: album.order }));
onDestroy(() => timelineManager.destroy());
const options = $derived({ albumId: album.id, order: album.order });
let timelineManager = $state<TimelineManager>() as TimelineManager;
const assetInteraction = new AssetInteraction();
@ -61,7 +59,7 @@
/>
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
<Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
<Timeline enableRouting={true} {album} bind:timelineManager {options} {assetInteraction}>
<section class="pt-8 md:pt-24 px-2 md:px-0">
<!-- ALBUM TITLE -->
<h1 class="text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all">

21
web/src/lib/components/timeline/Timeline.svelte
View file

@ -12,7 +12,7 @@
import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@ -22,7 +22,7 @@
import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
import { type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
import { DateTime } from 'luxon';
import { onMount, type Snippet } from 'svelte';
import { onDestroy, onMount, type Snippet } from 'svelte';
import type { UpdatePayload } from 'vite';
import TimelineDateGroup from './TimelineDateGroup.svelte';
@ -33,7 +33,8 @@
`AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
additionally, update the page location/url with the asset as the timeline is scrolled */
enableRouting: boolean;
timelineManager: TimelineManager;
timelineManager?: TimelineManager;
options?: TimelineManagerOptions;
assetInteraction: AssetInteraction;
removeAction?:
| AssetAction.UNARCHIVE
@ -71,6 +72,7 @@
singleSelect = false,
enableRouting,
timelineManager = $bindable(),
options,
assetInteraction,
removeAction = null,
withStacked = false,
@ -87,6 +89,10 @@
onThumbnailClick,
}: Props = $props();
timelineManager = new TimelineManager();
onDestroy(() => timelineManager.destroy());
$effect(() => options && void timelineManager.updateOptions(options));
let { isViewing: showAssetViewer, asset: viewingAsset, gridScrollTarget } = assetViewingStore;
let scrollableElement: HTMLElement | undefined = $state();
@ -207,13 +213,6 @@
}
};
const handleBeforeUpdate = (payload: UpdatePayload) => {
const timelineUpdate = payload.updates.some((update) => update.path.endsWith('Timeline.svelte'));
if (timelineUpdate) {
timelineManager.destroy();
}
};
const updateIsScrolling = () => (timelineManager.scrolling = true);
// note: don't throttle, debounch, or otherwise do this function async - it causes flicker
@ -498,7 +497,7 @@
<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
<HotModuleReload onAfterUpdate={handleAfterUpdate} onBeforeUpdate={handleBeforeUpdate} />
<HotModuleReload onAfterUpdate={handleAfterUpdate} onBeforeUpdate={() => timelineManager.destroy()} />
<TimelineKeyboardActions
scrollToAsset={(asset) => scrollToAsset(asset) ?? false}