mirror of
https://github.com/immich-app/immich.git
synced 2025-07-03 21:40:00 +02:00
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>
This commit is contained in:
parent
8b43066632
commit
56b85f7479
36 changed files with 362 additions and 305 deletions
web/src/lib/utils
106
web/src/lib/utils/layout-utils.ts
Normal file
106
web/src/lib/utils/layout-utils.ts
Normal file
|
@ -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);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue