Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-11-27 00:35:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: timeline scroll after navigate (#23664)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-11-13 11:28:42 +01:00 committed by GitHub
parent 2c54b506b3
commit 0e7e67efe1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -193,7 +193,7 @@
return true; return true;
}; };
export const scrollAfterNavigate = async ({ scrollToAssetQueryParam }: { scrollToAssetQueryParam: boolean }) => { export const scrollAfterNavigate = async () => {
if (timelineManager.viewportHeight === 0 || timelineManager.viewportWidth === 0) { if (timelineManager.viewportHeight === 0 || timelineManager.viewportWidth === 0) {
// this can happen if you do the following navigation order // this can happen if you do the following navigation order
// /photos?at=<id>, /photos/<id>, http://example.com, browser back, browser back // /photos?at=<id>, /photos/<id>, http://example.com, browser back, browser back
@ -203,17 +203,17 @@
timelineManager.viewportWidth = rect.width; timelineManager.viewportWidth = rect.width;
} }
} }
if (scrollToAssetQueryParam) {
const scrollTarget = $gridScrollTarget?.at; const scrollTarget = $gridScrollTarget?.at;
let scrolled = false; let scrolled = false;
console.log(scrollTarget, scrolled);
if (scrollTarget) { if (scrollTarget) {
scrolled = await scrollAndLoadAsset(scrollTarget); scrolled = await scrollAndLoadAsset(scrollTarget);
} }
if (!scrolled) { if (!scrolled) {
console.log('scrolling?');
// 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);
} }
}
invisible = false; invisible = false;
}; };
@ -226,6 +226,7 @@
// and a new route is being navigated to. It will never be called on direct // and a new route is being navigated to. It will never be called on direct
// navigations by the browser. // navigations by the browser.
beforeNavigate(({ from, to }) => { beforeNavigate(({ from, to }) => {
console.log('before navigate');
timelineManager.suspendTransitions = true; timelineManager.suspendTransitions = true;
const isNavigatingToAssetViewer = isAssetViewerRoute(to); const isNavigatingToAssetViewer = isAssetViewerRoute(to);
const isNavigatingFromAssetViewer = isAssetViewerRoute(from); const isNavigatingFromAssetViewer = isAssetViewerRoute(from);
@ -235,6 +236,7 @@
// afterNavigate is only called after navigation to a new URL, {complete} will resolve // afterNavigate is only called after navigation to a new URL, {complete} will resolve
// after successful navigation. // after successful navigation.
afterNavigate(({ complete }) => { afterNavigate(({ complete }) => {
console.log('after navigate');
void complete.finally(() => { void complete.finally(() => {
const isAssetViewerPage = isAssetViewerRoute(page); const isAssetViewerPage = isAssetViewerRoute(page);
@ -245,11 +247,7 @@
initialLoadWasAssetViewer = isAssetViewerPage && !hasNavigatedToOrFromAssetViewer; initialLoadWasAssetViewer = isAssetViewerPage && !hasNavigatedToOrFromAssetViewer;
} }
const isDirectTimelineLoad = isDirectNavigation && !isAssetViewerPage; void scrollAfterNavigate();
const isNavigatingFromAssetViewer = !isDirectNavigation && hasNavigatedToOrFromAssetViewer;
const scrollToAssetQueryParam = isDirectTimelineLoad || isNavigatingFromAssetViewer;
void scrollAfterNavigate({ scrollToAssetQueryParam });
}); });
}); });
@ -306,7 +304,7 @@
} }
}; };
// note: don't throttle, debounch, or otherwise make this function async - it causes flicker // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
const handleTimelineScroll = () => { const handleTimelineScroll = () => {
if (!scrollableElement) { if (!scrollableElement) {
return; return;
@ -544,7 +542,7 @@
if (asset) { if (asset) {
$gridScrollTarget = { at: asset }; $gridScrollTarget = { at: asset };
} }
void scrollAfterNavigate({ scrollToAssetQueryParam: true }); void scrollAfterNavigate();
}} }}
onBeforeUpdate={(payload: UpdatePayload) => { onBeforeUpdate={(payload: UpdatePayload) => {
const timelineUpdate = payload.updates.some((update) => update.path.endsWith('Timeline.svelte')); const timelineUpdate = payload.updates.some((update) => update.path.endsWith('Timeline.svelte'));