fix(web): fix lost scrollpos on deep link to timeline asset, scrub stop (#16305)

* Work in progress - super quick asset store->state

* bugfix: deep linking to timeline, on scrub stop

* format, remove stale

* disable test, todo: fix test

* remove unused import

* Fix merge

* lint

* lint

* lint

* Default to non-wasm layout

* lint

* intobs fix

* fix rejected promise

* Review comments, static import wasm

* Back to dynamic

* try top-level-await

* back to the first solution, with more finesse

* comment out wasm for now

* back out the wasm/thumbhash/thumbnail changes

* lint

* Fully remove wasm

* lockfile

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/utils/asset-store-task-manager.ts

@@ -1,4 +1,4 @@
-import type { AssetBucket, AssetStore } from '$lib/stores/assets.store';
+import type { AssetBucket, AssetStore } from '$lib/stores/assets-store.svelte';
 import { generateId } from '$lib/utils/generate-id';
 import { cancelIdleCB, idleCB } from '$lib/utils/idle-callback-support';
 import { KeyedPriorityQueue } from '$lib/utils/keyed-priority-queue';

web/src/lib/utils/asset-utils.ts

@@ -5,7 +5,7 @@ import { NotificationType, notificationController } from '$lib/components/shared
 import { AppRoute } from '$lib/constants';
 import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-import { isSelectingAllAssets, type AssetStore } from '$lib/stores/assets.store';
+import { isSelectingAllAssets, type AssetStore } from '$lib/stores/assets-store.svelte';
 import { downloadManager } from '$lib/stores/download';
 import { preferences } from '$lib/stores/user.store';
 import { downloadRequest, getKey, withError } from '$lib/utils';

web/src/lib/utils/executor-queue.spec.ts

@@ -28,15 +28,11 @@ describe('Executor Queue test', function () {
       });
 
     // The first 3 should be finished within 200ms (concurrency 3)
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    eq.addTask(() => timeoutPromiseBuilder(100, 'T1'));
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    eq.addTask(() => timeoutPromiseBuilder(200, 'T2'));
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    eq.addTask(() => timeoutPromiseBuilder(150, 'T3'));
+    void eq.addTask(() => timeoutPromiseBuilder(100, 'T1'));
+    void eq.addTask(() => timeoutPromiseBuilder(200, 'T2'));
+    void eq.addTask(() => timeoutPromiseBuilder(150, 'T3'));
     // The last task will be executed after 200ms and will finish at 400ms
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    eq.addTask(() => timeoutPromiseBuilder(200, 'T4'));
+    void eq.addTask(() => timeoutPromiseBuilder(200, 'T4'));
 
     expect(finished).not.toBeCalled();
     expect(started).toHaveBeenCalledTimes(3);

web/src/lib/utils/layout-utils.ts

@@ -0,0 +1,106 @@
+import { getAssetRatio } from '$lib/utils/asset-utils';
+// import { TUNABLES } from '$lib/utils/tunables';
+// note: it's important that this is not imported in more than one file due to https://github.com/sveltejs/kit/issues/7805
+// import { JustifiedLayout, type LayoutOptions } from '@immich/justified-layout-wasm';
+import type { AssetResponseDto } from '@immich/sdk';
+import createJustifiedLayout from 'justified-layout';
+
+export type getJustifiedLayoutFromAssetsFunction = typeof getJustifiedLayoutFromAssets;
+
+// let useWasm = TUNABLES.LAYOUT.WASM;
+
+export type CommonJustifiedLayout = {
+  containerWidth: number;
+  containerHeight: number;
+  getTop(boxIdx: number): number;
+  getLeft(boxIdx: number): number;
+  getWidth(boxIdx: number): number;
+  getHeight(boxIdx: number): number;
+};
+
+export type CommonLayoutOptions = {
+  rowHeight: number;
+  rowWidth: number;
+  spacing: number;
+  heightTolerance: number;
+};
+
+export function getJustifiedLayoutFromAssets(
+  assets: AssetResponseDto[],
+  options: CommonLayoutOptions,
+): CommonJustifiedLayout {
+  // if (useWasm) {
+  //   return wasmJustifiedLayout(assets, options);
+  // }
+  return justifiedLayout(assets, options);
+}
+
+// commented out until a solution for top level awaits on safari is fixed
+// function wasmJustifiedLayout(assets: AssetResponseDto[], options: LayoutOptions) {
+//   const aspectRatios = new Float32Array(assets.length);
+//   // eslint-disable-next-line unicorn/no-for-loop
+//   for (let i = 0; i < assets.length; i++) {
+//     const { width, height } = getAssetRatio(assets[i]);
+//     aspectRatios[i] = width / height;
+//   }
+//   return new JustifiedLayout(aspectRatios, options);
+// }
+
+type Geometry = ReturnType<typeof createJustifiedLayout>;
+class Adapter {
+  result;
+  constructor(result: Geometry) {
+    this.result = result;
+  }
+
+  get containerWidth() {
+    let width = 0;
+    for (const box of this.result.boxes) {
+      if (box.top < 100) {
+        width = box.left + box.width;
+      }
+    }
+    return width;
+  }
+
+  get containerHeight() {
+    return this.result.containerHeight;
+  }
+
+  getTop(boxIdx: number) {
+    return this.result.boxes[boxIdx]?.top;
+  }
+
+  getLeft(boxIdx: number) {
+    return this.result.boxes[boxIdx]?.left;
+  }
+
+  getWidth(boxIdx: number) {
+    return this.result.boxes[boxIdx]?.width;
+  }
+
+  getHeight(boxIdx: number) {
+    return this.result.boxes[boxIdx]?.height;
+  }
+}
+
+export const emptyGeometry = new Adapter({
+  containerHeight: 0,
+  widowCount: 0,
+  boxes: [],
+});
+
+export function justifiedLayout(assets: AssetResponseDto[], options: CommonLayoutOptions) {
+  const adapter = {
+    targetRowHeight: options.rowHeight,
+    containerWidth: options.rowWidth,
+    boxSpacing: options.spacing,
+    targetRowHeightTolerange: options.heightTolerance,
+  };
+
+  const result = createJustifiedLayout(
+    assets.map((g) => getAssetRatio(g)),
+    adapter,
+  );
+  return new Adapter(result);
+}

web/src/lib/utils/timeline-util.ts

@@ -1,7 +1,8 @@
-import type { AssetBucket } from '$lib/stores/assets.store';
+import type { AssetBucket } from '$lib/stores/assets-store.svelte';
 import { locale } from '$lib/stores/preferences.store';
+import { emptyGeometry, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
+
 import type { AssetResponseDto } from '@immich/sdk';
-import type createJustifiedLayout from 'justified-layout';
 import { groupBy, memoize, sortBy } from 'lodash-es';
 import { DateTime } from 'luxon';
 import { get } from 'svelte/store';
@@ -13,7 +14,7 @@ export type DateGroup = {
   height: number;
   heightActual: boolean;
   intersecting: boolean;
-  geometry: Geometry;
+  geometry: CommonJustifiedLayout;
   bucket: AssetBucket;
 };
 export type ScrubberListener = (
@@ -80,19 +81,6 @@ export function formatGroupTitle(_date: DateTime): string {
   return date.toLocaleString(groupDateFormat);
 }
 
-type Geometry = ReturnType<typeof createJustifiedLayout> & {
-  containerWidth: number;
-};
-
-function emptyGeometry() {
-  return {
-    containerWidth: 0,
-    containerHeight: 0,
-    widowCount: 0,
-    boxes: [],
-  };
-}
-
 const formatDateGroupTitle = memoize(formatGroupTitle);
 
 export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string | undefined): DateGroup[] {
@@ -109,7 +97,7 @@ export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string |
       height: 0,
       heightActual: false,
       intersecting: false,
-      geometry: emptyGeometry(),
+      geometry: emptyGeometry,
       bucket,
     };
   });

web/src/lib/utils/tunables.ts

@@ -17,6 +17,9 @@ function getFloat(string: string | null, fallback: number) {
   return Number.parseFloat(string);
 }
 export const TUNABLES = {
+  LAYOUT: {
+    WASM: getBoolean(localStorage.getItem('LAYOUT.WASM'), false),
+  },
   SCROLL_TASK_QUEUE: {
     TRICKLE_BONUS_FACTOR: getNumber(localStorage.getItem('SCROLL_TASK_QUEUE.TRICKLE_BONUS_FACTOR'), 25),
     TRICKLE_ACCELERATION_FACTOR: getFloat(localStorage.getItem('SCROLL_TASK_QUEUE.TRICKLE_ACCELERATION_FACTOR'), 1.5),