immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-22 17:24:56 +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 Skeleton from '$lib/elements/Skeleton.svelte';
import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte'; import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.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 type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte'; import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types'; 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 { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk'; import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { onDestroy, onMount, type Snippet } from 'svelte'; import { onDestroy, onMount, tick, type Snippet } from 'svelte';
import type { UpdatePayload } from 'vite'; import type { UpdatePayload } from 'vite';
interface Props { interface Props {
@@ -226,6 +227,9 @@
if (!scrolled) { if (!scrolled) {
// if the asset is not found, scroll to the top // if the asset is not found, scroll to the top
timelineManager.scrollTo(0); timelineManager.scrollTo(0);
} else if (scrollTarget) {
await tick();
focusAsset(scrollTarget);
} }
invisible = false; 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; 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) => { export const setFocusToAsset = (scrollToAsset: (asset: TimelineAsset) => boolean, asset: TimelineAsset) => {
const scrolled = scrollToAsset(asset); const scrolled = scrollToAsset(asset);
if (scrolled) { if (scrolled) {
const element = queryHTMLElement(`[data-thumbnail-focus-container][data-asset="${asset.id}"]`); focusAsset(asset.id);
element?.focus();
} }
}; };
@@ -71,8 +75,7 @@ export const setFocusTo = async (
if (!invocation.isStillValid()) { if (!invocation.isStillValid()) {
return; return;
} }
const element = queryHTMLElement(`[data-thumbnail-focus-container][data-asset="${asset.id}"]`); focusAsset(asset.id);
element?.focus();
} }
invocation.endInvocation(); invocation.endInvocation();