helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore(web): revert wasm new justify layout (#16277)

Browse source 
* Revert "fix(web): justify layout import (#16267) "

This reverts commit ec58e1065f.

* Revert "fix(web): dynamically import wasm module (#16261)"

This reverts commit 4376fd72b7.

* Revert "feat(web): use wasm for justified layout calculation (#15524)"

This reverts commit 3925445de8.

* Revert "fix(web): viewport reactivity, off-screen thumbhashes being rendered (#15435)"

This reverts commit 52f21fb331.
This commit is contained in:
Alex 2025-02-25 09:39:56 -06:00 • committed by GitHub
parent 16266c9f5a
commit bbcaee82f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 201 additions and 330 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web/src/lib/utils/layout-utils.ts
View file

@ -1,14 +0,0 @@
import { getAssetRatio } from '$lib/utils/asset-utils';
// 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';
export function getJustifiedLayoutFromAssets(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);
}

39
web/src/lib/utils/timeline-util.ts
View file

@ -1,7 +1,7 @@
import type { AssetBucket } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import type { JustifiedLayout } from '@immich/justified-layout-wasm';
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 +13,7 @@ export type DateGroup = {
height: number;
heightActual: boolean;
intersecting: boolean;
geometry: JustifiedLayout | null;
geometry: Geometry;
bucket: AssetBucket;
};
export type ScrubberListener = (
@ -80,6 +80,19 @@ 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[] {
@ -87,7 +100,6 @@ export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string |
fromLocalDateTime(asset.localDateTime).toLocaleString(groupDateFormat, { locale }),
);
const sorted = sortBy(grouped, (group) => bucket.assets.indexOf(group[0]));
return sorted.map((group) => {
const date = fromLocalDateTime(group[0].localDateTime).startOf('day');
return {
@ -97,12 +109,31 @@ export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string |
height: 0,
heightActual: false,
intersecting: false,
geometry: null,
geometry: emptyGeometry(),
bucket,
};
});
}
export type LayoutBox = {
aspectRatio: number;
top: number;
width: number;
height: number;
left: number;
forcedAspectRatio?: boolean;
};
export function calculateWidth(boxes: LayoutBox[]): number {
let width = 0;
for (const box of boxes) {
if (box.top < 100) {
width = box.left + box.width;
}
}
return width;
}
export function findTotalOffset(element: HTMLElement, stop: HTMLElement) {
let offset = 0;
while (element.offsetParent && element !== stop) {

3
web/src/lib/utils/tunables.ts
View file

@ -40,8 +40,6 @@ export const TUNABLES = {
},
ASSET_GRID: {
NAVIGATE_ON_ASSET_IN_VIEW: getBoolean(localStorage.getItem('ASSET_GRID.NAVIGATE_ON_ASSET_IN_VIEW'), false),
LARGE_BUCKET_THRESHOLD: getNumber(localStorage.getItem('ASSET_GRID.LARGE_BUCKET_THRESHOLD'), 3000),
LARGE_BUCKET_DEBOUNCE_MS: getNumber(localStorage.getItem('ASSET_GRID.LARGE_BUCKET_DEBOUNCE_MS'), 200),
},
BUCKET: {
PRIORITY: getNumber(localStorage.getItem('BUCKET.PRIORITY'), 2),
@ -53,7 +51,6 @@ export const TUNABLES = {
INTERSECTION_DISABLED: getBoolean(localStorage.getItem('DATEGROUP.INTERSECTION_DISABLED'), false),
INTERSECTION_ROOT_TOP: localStorage.getItem('DATEGROUP.INTERSECTION_ROOT_TOP') || '150%',
INTERSECTION_ROOT_BOTTOM: localStorage.getItem('DATEGROUP.INTERSECTION_ROOT_BOTTOM') || '150%',
SMALL_GROUP_THRESHOLD: getNumber(localStorage.getItem('DATEGROUP.SMALL_GROUP_THRESHOLD'), 100),
},
THUMBNAIL: {
PRIORITY: getNumber(localStorage.getItem('THUMBNAIL.PRIORITY'), 8),