immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-22 09:15:34 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

feat: focus jumped-to item in timeline (#24738)

Browse Source
This commit is contained in:
bo0tzz
2025-12-21 15:52:52 +01:00
committed by GitHub
parent 28f6064240
commit d7c28470ee
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/components/timeline/Timeline.svelte
View File

@@ -13,6 +13,7 @@
import Skeleton from '$lib/elements/Skeleton.svelte';
import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
import { focusAsset } from '$lib/components/timeline/actions/focus-actions';
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
@@ -25,7 +26,7 @@
import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
import { DateTime } from 'luxon';
import { onDestroy, onMount, type Snippet } from 'svelte';
import { onDestroy, onMount, tick, type Snippet } from 'svelte';
import type { UpdatePayload } from 'vite';
interface Props {
@@ -226,6 +227,9 @@
if (!scrolled) {
// if the asset is not found, scroll to the top
timelineManager.scrollTo(0);
} else if (scrollTarget) {
await tick();
focusAsset(scrollTarget);
}
invisible = false;
};

11
web/src/lib/components/timeline/actions/focus-actions.ts
View File

@@ -21,11 +21,15 @@ export const focusPreviousAsset = () =>
const queryHTMLElement = (query: string) => document.querySelector(query) as HTMLElement;
export const focusAsset = (assetId: string) => {
const element = queryHTMLElement(`[data-thumbnail-focus-container][data-asset="${assetId}"]`);
element?.focus();
};
export const setFocusToAsset = (scrollToAsset: (asset: TimelineAsset) => boolean, asset: TimelineAsset) => {
const scrolled = scrollToAsset(asset);
if (scrolled) {
const element = queryHTMLElement(`[data-thumbnail-focus-container][data-asset="${asset.id}"]`);
element?.focus();
focusAsset(asset.id);
}
};
@@ -71,8 +75,7 @@ export const setFocusTo = async (
if (!invocation.isStillValid()) {
return;
}
const element = queryHTMLElement(`[data-thumbnail-focus-container][data-asset="${asset.id}"]`);
element?.focus();
focusAsset(asset.id);
}
invocation.endInvocation();