mirror of
https://github.com/immich-app/immich.git
synced 2025-04-08 03:01:32 -05:00
chore(web): revert wasm new justify layout (#16277)
* Revert "fix(web): justify layout import (#16267) " This reverts commitec58e1065f. * Revert "fix(web): dynamically import wasm module (#16261)" This reverts commit4376fd72b7. * Revert "feat(web): use wasm for justified layout calculation (#15524)" This reverts commit3925445de8. * Revert "fix(web): viewport reactivity, off-screen thumbhashes being rendered (#15435)" This reverts commit52f21fb331.
This commit is contained in:
Alex
GitHub
parent
16266c9f5a
commit
bbcaee82f0
14 changed files with 201 additions and 330 deletions
39
web/package-lock.json
generated
39
web/package-lock.json
generated
|
|
@ -10,7 +10,6 @@
|
|||
"license": "GNU Affero General Public License version 3",
|
||||
"dependencies": {
|
||||
"@formatjs/icu-messageformat-parser": "^2.9.8",
|
||||
"@immich/justified-layout-wasm": "^0.2.1",
|
||||
"@immich/sdk": "file:../open-api/typescript-sdk",
|
||||
"@immich/ui": "^0.16.0",
|
||||
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
|
||||
|
|
@ -25,13 +24,15 @@
|
|||
"fabric": "^6.5.4",
|
||||
"handlebars": "^4.7.8",
|
||||
"intl-messageformat": "^10.7.11",
|
||||
"justified-layout": "^4.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"luxon": "^3.4.4",
|
||||
"socket.io-client": "~4.8.0",
|
||||
"svelte-gestures": "^5.1.3",
|
||||
"svelte-i18n": "^4.0.1",
|
||||
"svelte-local-storage-store": "^0.6.4",
|
||||
"svelte-maplibre": "^0.9.13"
|
||||
"svelte-maplibre": "^0.9.13",
|
||||
"thumbhash": "^0.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3.1.0",
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
"@testing-library/svelte": "^5.2.6",
|
||||
"@testing-library/user-event": "^14.5.2",
|
||||
"@types/dom-to-image": "^2.6.7",
|
||||
"@types/justified-layout": "^4.1.4",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/luxon": "^3.4.2",
|
||||
"@typescript-eslint/eslint-plugin": "^8.20.0",
|
||||
|
|
@ -71,7 +73,6 @@
|
|||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.0.0",
|
||||
"vite-plugin-wasm": "^3.4.1",
|
||||
"vitest": "^3.0.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -1340,12 +1341,6 @@
|
|||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@immich/justified-layout-wasm": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@immich/justified-layout-wasm/-/justified-layout-wasm-0.2.1.tgz",
|
||||
"integrity": "sha512-eBBXfgqquYiZ/1e4m7araxifF5LWfD1AQLm/TRjXP108LCXU1krLhjSJm0IaF+1wXESOQT7wBzCaWXNnkQMGwQ==",
|
||||
"license": "AGPL-3"
|
||||
},
|
||||
"node_modules/@immich/sdk": {
|
||||
"resolved": "../open-api/typescript-sdk",
|
||||
"link": true
|
||||
|
|
@ -2504,6 +2499,12 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/justified-layout": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/justified-layout/-/justified-layout-4.1.4.tgz",
|
||||
"integrity": "sha512-q2ybP0u0NVj87oMnGZOGxY2iUN8ddr48zPOBHBdbOLpsMTA/keGj+93ou+OMCnJk0xewzlNIaVEkxM6VBD3E2w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/leaflet": {
|
||||
"version": "1.9.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
|
||||
|
|
@ -5944,6 +5945,11 @@
|
|||
"resolved": "https://registry.npmjs.org/just-flush/-/just-flush-2.3.0.tgz",
|
||||
"integrity": "sha512-fBuxQ1gJ61BurmhwKS5LYTzhkbrT5j/2U7ax+UbLm9aRvCTh2h6AfzLteOckE4KKomqOf0Y3zIG3Xu57sRsKUg=="
|
||||
},
|
||||
"node_modules/justified-layout": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/justified-layout/-/justified-layout-4.1.0.tgz",
|
||||
"integrity": "sha512-M5FimNMXgiOYerVRGsXZ2YK9YNCaTtwtYp7Hb2308U1Q9TXXHx5G0p08mcVR5O53qf8bWY4NJcPBxE6zuayXSg=="
|
||||
},
|
||||
"node_modules/kdbush": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
|
||||
|
|
@ -9054,6 +9060,11 @@
|
|||
"integrity": "sha512-AUwVmViIEUgBwxJJ7stnF0NkPpZxx1aZ6WiAbQ/Qq61h6I9UR4grXtZDmO8mnlaNORhHnIBlXJ1uBxILEKuVyw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/thumbhash": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
|
||||
"integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg=="
|
||||
},
|
||||
"node_modules/timers-ext": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
|
||||
|
|
@ -9465,16 +9476,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-wasm": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-wasm/-/vite-plugin-wasm-3.4.1.tgz",
|
||||
"integrity": "sha512-ja3nSo2UCkVeitltJGkS3pfQHAanHv/DqGatdI39ja6McgABlpsZ5hVgl6wuR8Qx5etY3T5qgDQhOWzc5RReZA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vite": "^2 || ^3 || ^4 || ^5 || ^6"
|
||||
}
|
||||
},
|
||||
"node_modules/vitefu": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.5.tgz",
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
"@testing-library/svelte": "^5.2.6",
|
||||
"@testing-library/user-event": "^14.5.2",
|
||||
"@types/dom-to-image": "^2.6.7",
|
||||
"@types/justified-layout": "^4.1.4",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/luxon": "^3.4.2",
|
||||
"@typescript-eslint/eslint-plugin": "^8.20.0",
|
||||
|
|
@ -60,13 +61,11 @@
|
|||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.0.0",
|
||||
"vite-plugin-wasm": "^3.4.1",
|
||||
"vitest": "^3.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@formatjs/icu-messageformat-parser": "^2.9.8",
|
||||
"@immich/justified-layout-wasm": "^0.2.1",
|
||||
"@immich/sdk": "file:../open-api/typescript-sdk",
|
||||
"@immich/ui": "^0.16.0",
|
||||
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
|
||||
|
|
@ -81,13 +80,15 @@
|
|||
"fabric": "^6.5.4",
|
||||
"handlebars": "^4.7.8",
|
||||
"intl-messageformat": "^10.7.11",
|
||||
"justified-layout": "^4.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"luxon": "^3.4.4",
|
||||
"socket.io-client": "~4.8.0",
|
||||
"svelte-gestures": "^5.1.3",
|
||||
"svelte-i18n": "^4.0.1",
|
||||
"svelte-local-storage-store": "^0.6.4",
|
||||
"svelte-maplibre": "^0.9.13"
|
||||
"svelte-maplibre": "^0.9.13",
|
||||
"thumbhash": "^0.1.1"
|
||||
},
|
||||
"volta": {
|
||||
"node": "22.14.0"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { decodeBase64 } from '$lib/utils';
|
||||
import { thumbHashToRGBA } from 'thumbhash';
|
||||
|
||||
/**
|
||||
* Renders a thumbnail onto a canvas from a base64 encoded hash.
|
||||
|
|
@ -6,132 +7,13 @@ import { decodeBase64 } from '$lib/utils';
|
|||
* @param param1 object containing the base64 encoded hash (base64Thumbhash: yourString)
|
||||
*/
|
||||
export function thumbhash(canvas: HTMLCanvasElement, { base64ThumbHash }: { base64ThumbHash: string }) {
|
||||
const ctx = canvas.getContext('bitmaprenderer');
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
const { w, h, rgba } = thumbHashToRGBA(decodeBase64(base64ThumbHash));
|
||||
void createImageBitmap(new ImageData(rgba, w, h)).then((bitmap) => ctx.transferFromImageBitmap(bitmap));
|
||||
const pixels = ctx.createImageData(w, h);
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
pixels.data.set(rgba);
|
||||
ctx.putImageData(pixels, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// This copyright notice applies to the below code
|
||||
// It is a modified version of the original that uses `Uint8ClampedArray` instead of `UInt8Array` and has some trivial typing/linting changes
|
||||
|
||||
/* Copyright (c) 2023 Evan Wallace
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/
|
||||
/**
|
||||
* Decodes a ThumbHash to an RGBA image. RGB is not be premultiplied by A.
|
||||
*
|
||||
* @param hash The bytes of the ThumbHash.
|
||||
* @returns The width, height, and pixels of the rendered placeholder image.
|
||||
*/
|
||||
export function thumbHashToRGBA(hash: Uint8Array) {
|
||||
const { PI, max, cos, round } = Math;
|
||||
|
||||
// Read the constants
|
||||
const header24 = hash[0] | (hash[1] << 8) | (hash[2] << 16);
|
||||
const header16 = hash[3] | (hash[4] << 8);
|
||||
const l_dc = (header24 & 63) / 63;
|
||||
const p_dc = ((header24 >> 6) & 63) / 31.5 - 1;
|
||||
const q_dc = ((header24 >> 12) & 63) / 31.5 - 1;
|
||||
const l_scale = ((header24 >> 18) & 31) / 31;
|
||||
const hasAlpha = header24 >> 23;
|
||||
const p_scale = ((header16 >> 3) & 63) / 63;
|
||||
const q_scale = ((header16 >> 9) & 63) / 63;
|
||||
const isLandscape = header16 >> 15;
|
||||
const lx = max(3, isLandscape ? (hasAlpha ? 5 : 7) : header16 & 7);
|
||||
const ly = max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7);
|
||||
const a_dc = hasAlpha ? (hash[5] & 15) / 15 : 1;
|
||||
const a_scale = (hash[5] >> 4) / 15;
|
||||
|
||||
// Read the varying factors (boost saturation by 1.25x to compensate for quantization)
|
||||
const ac_start = hasAlpha ? 6 : 5;
|
||||
let ac_index = 0;
|
||||
const decodeChannel = (nx: number, ny: number, scale: number) => {
|
||||
const ac = [];
|
||||
for (let cy = 0; cy < ny; cy++) {
|
||||
for (let cx = cy ? 0 : 1; cx * ny < nx * (ny - cy); cx++) {
|
||||
ac.push((((hash[ac_start + (ac_index >> 1)] >> ((ac_index++ & 1) << 2)) & 15) / 7.5 - 1) * scale);
|
||||
}
|
||||
}
|
||||
return ac;
|
||||
};
|
||||
const l_ac = decodeChannel(lx, ly, l_scale);
|
||||
const p_ac = decodeChannel(3, 3, p_scale * 1.25);
|
||||
const q_ac = decodeChannel(3, 3, q_scale * 1.25);
|
||||
const a_ac = hasAlpha ? decodeChannel(5, 5, a_scale) : null;
|
||||
|
||||
// Decode using the DCT into RGB
|
||||
const ratio = thumbHashToApproximateAspectRatio(hash);
|
||||
const w = round(ratio > 1 ? 32 : 32 * ratio);
|
||||
const h = round(ratio > 1 ? 32 / ratio : 32);
|
||||
const rgba = new Uint8ClampedArray(w * h * 4),
|
||||
fx = [],
|
||||
fy = [];
|
||||
for (let y = 0, i = 0; y < h; y++) {
|
||||
for (let x = 0; x < w; x++, i += 4) {
|
||||
let l = l_dc,
|
||||
p = p_dc,
|
||||
q = q_dc,
|
||||
a = a_dc;
|
||||
|
||||
// Precompute the coefficients
|
||||
for (let cx = 0, n = max(lx, hasAlpha ? 5 : 3); cx < n; cx++) {
|
||||
fx[cx] = cos((PI / w) * (x + 0.5) * cx);
|
||||
}
|
||||
for (let cy = 0, n = max(ly, hasAlpha ? 5 : 3); cy < n; cy++) {
|
||||
fy[cy] = cos((PI / h) * (y + 0.5) * cy);
|
||||
}
|
||||
|
||||
// Decode L
|
||||
for (let cy = 0, j = 0; cy < ly; cy++) {
|
||||
for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx * ly < lx * (ly - cy); cx++, j++) {
|
||||
l += l_ac[j] * fx[cx] * fy2;
|
||||
}
|
||||
}
|
||||
|
||||
// Decode P and Q
|
||||
for (let cy = 0, j = 0; cy < 3; cy++) {
|
||||
for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {
|
||||
const f = fx[cx] * fy2;
|
||||
p += p_ac[j] * f;
|
||||
q += q_ac[j] * f;
|
||||
}
|
||||
}
|
||||
|
||||
// Decode A
|
||||
if (a_ac !== null) {
|
||||
for (let cy = 0, j = 0; cy < 5; cy++) {
|
||||
for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 5 - cy; cx++, j++) {
|
||||
a += a_ac[j] * fx[cx] * fy2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Convert to RGB
|
||||
const b = l - (2 / 3) * p;
|
||||
const r = (3 * l - b + q) / 2;
|
||||
const g = r - q;
|
||||
rgba[i] = 255 * r;
|
||||
rgba[i + 1] = 255 * g;
|
||||
rgba[i + 2] = 255 * b;
|
||||
rgba[i + 3] = 255 * a;
|
||||
}
|
||||
}
|
||||
return { w, h, rgba };
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts the approximate aspect ratio of the original image.
|
||||
*
|
||||
* @param hash The bytes of the ThumbHash.
|
||||
* @returns The approximate aspect ratio (i.e. width / height).
|
||||
*/
|
||||
export function thumbHashToApproximateAspectRatio(hash: Uint8Array) {
|
||||
const header = hash[3];
|
||||
const hasAlpha = hash[2] & 0x80;
|
||||
const isLandscape = hash[4] & 0x80;
|
||||
const lx = isLandscape ? (hasAlpha ? 5 : 7) : header & 7;
|
||||
const ly = isLandscape ? header & 7 : hasAlpha ? 5 : 7;
|
||||
return lx / ly;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
thumbnailSize?: number | undefined;
|
||||
thumbnailWidth?: number | undefined;
|
||||
thumbnailHeight?: number | undefined;
|
||||
eagerThumbhash?: boolean;
|
||||
selected?: boolean;
|
||||
selectionCandidate?: boolean;
|
||||
disabled?: boolean;
|
||||
|
|
@ -72,7 +71,6 @@
|
|||
thumbnailSize = undefined,
|
||||
thumbnailWidth = undefined,
|
||||
thumbnailHeight = undefined,
|
||||
eagerThumbhash = true,
|
||||
selected = false,
|
||||
selectionCandidate = false,
|
||||
disabled = false,
|
||||
|
|
@ -115,6 +113,7 @@
|
|||
|
||||
let width = $derived(thumbnailSize || thumbnailWidth || 235);
|
||||
let height = $derived(thumbnailSize || thumbnailHeight || 235);
|
||||
let display = $derived(intersecting);
|
||||
|
||||
const onIconClickedHandler = (e?: MouseEvent) => {
|
||||
e?.stopPropagation();
|
||||
|
|
@ -208,11 +207,7 @@
|
|||
? 'bg-gray-300'
|
||||
: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
|
||||
>
|
||||
<!-- TODO: Rendering thumbhashes for offscreen assets is a ton of overhead.
|
||||
This is here to ensure thumbhashes appear on the first
|
||||
frame instead of a gray box for smaller date groups,
|
||||
where the overhead (while wasteful) does not cause major issues. -->
|
||||
{#if eagerThumbhash && !loaded && asset.thumbhash}
|
||||
{#if !loaded && asset.thumbhash}
|
||||
<canvas
|
||||
use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
|
||||
class="absolute object-cover z-10"
|
||||
|
|
@ -222,17 +217,7 @@
|
|||
></canvas>
|
||||
{/if}
|
||||
|
||||
{#if intersecting}
|
||||
{#if !eagerThumbhash && !loaded && asset.thumbhash}
|
||||
<canvas
|
||||
use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
|
||||
class="absolute object-cover z-10"
|
||||
style:width="{width}px"
|
||||
style:height="{height}px"
|
||||
out:fade={{ duration: THUMBHASH_FADE_DURATION }}
|
||||
></canvas>
|
||||
{/if}
|
||||
|
||||
{#if display}
|
||||
<!-- svelte queries for all links on afterNavigate, leading to performance problems in asset-grid which updates
|
||||
the navigation url on scroll. Replace this with button for now. -->
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
$: dateGroups = bucket.dateGroups;
|
||||
|
||||
const {
|
||||
DATEGROUP: { INTERSECTION_ROOT_TOP, INTERSECTION_ROOT_BOTTOM, SMALL_GROUP_THRESHOLD },
|
||||
DATEGROUP: { INTERSECTION_ROOT_TOP, INTERSECTION_ROOT_BOTTOM },
|
||||
} = TUNABLES;
|
||||
/* TODO figure out a way to calculate this*/
|
||||
const TITLE_HEIGHT = 51;
|
||||
|
|
@ -97,7 +97,6 @@
|
|||
{#each dateGroups as dateGroup, groupIndex (dateGroup.date)}
|
||||
{@const display =
|
||||
dateGroup.intersecting || !!dateGroup.assets.some((asset) => asset.id === $assetStore.pendingScrollAssetId)}
|
||||
{@const geometry = dateGroup.geometry!}
|
||||
|
||||
<div
|
||||
id="date-group"
|
||||
|
|
@ -119,7 +118,7 @@
|
|||
data-display={display}
|
||||
data-date-group={dateGroup.date}
|
||||
style:height={dateGroup.height + 'px'}
|
||||
style:width={geometry.containerWidth + 'px'}
|
||||
style:width={dateGroup.geometry.containerWidth + 'px'}
|
||||
style:overflow={'clip'}
|
||||
>
|
||||
{#if !display}
|
||||
|
|
@ -150,7 +149,7 @@
|
|||
<!-- Date group title -->
|
||||
<div
|
||||
class="flex z-[100] sticky top-[-1px] pt-[calc(1.75rem+1px)] pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg md:text-sm"
|
||||
style:width={geometry.containerWidth + 'px'}
|
||||
style:width={dateGroup.geometry.containerWidth + 'px'}
|
||||
>
|
||||
{#if !singleSelect && ((hoveredDateGroup == dateGroup.groupTitle && isMouseOverGroup) || assetInteraction.selectedGroup.has(dateGroup.groupTitle))}
|
||||
<div
|
||||
|
|
@ -175,17 +174,11 @@
|
|||
<!-- Image grid -->
|
||||
<div
|
||||
class="relative overflow-clip"
|
||||
style:height={geometry.containerHeight + 'px'}
|
||||
style:width={geometry.containerWidth + 'px'}
|
||||
style:height={dateGroup.geometry.containerHeight + 'px'}
|
||||
style:width={dateGroup.geometry.containerWidth + 'px'}
|
||||
>
|
||||
{#each dateGroup.assets as asset, i (asset.id)}
|
||||
{@const isSmallGroup = dateGroup.assets.length <= SMALL_GROUP_THRESHOLD}
|
||||
<!-- getting these together here in this order is very cache-efficient -->
|
||||
{@const top = geometry.getTop(i)}
|
||||
{@const left = geometry.getLeft(i)}
|
||||
{@const width = geometry.getWidth(i)}
|
||||
{@const height = geometry.getHeight(i)}
|
||||
|
||||
{#each dateGroup.assets as asset, index (asset.id)}
|
||||
{@const box = dateGroup.geometry.boxes[index]}
|
||||
<!-- update ASSET_GRID_PADDING-->
|
||||
<div
|
||||
use:intersectionObserver={{
|
||||
|
|
@ -197,10 +190,10 @@
|
|||
}}
|
||||
data-asset-id={asset.id}
|
||||
class="absolute"
|
||||
style:top={top + 'px'}
|
||||
style:left={left + 'px'}
|
||||
style:width={width + 'px'}
|
||||
style:height={height + 'px'}
|
||||
style:width={box.width + 'px'}
|
||||
style:height={box.height + 'px'}
|
||||
style:top={box.top + 'px'}
|
||||
style:left={box.left + 'px'}
|
||||
>
|
||||
<Thumbnail
|
||||
{dateGroup}
|
||||
|
|
@ -222,9 +215,8 @@
|
|||
selected={assetInteraction.selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)}
|
||||
selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
|
||||
disabled={$assetStore.albumAssets.has(asset.id)}
|
||||
thumbnailWidth={width}
|
||||
thumbnailHeight={height}
|
||||
eagerThumbhash={isSmallGroup}
|
||||
thumbnailWidth={box.width}
|
||||
thumbnailHeight={box.height}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
} from '$lib/utils/timeline-util';
|
||||
import { TUNABLES } from '$lib/utils/tunables';
|
||||
import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto } from '@immich/sdk';
|
||||
import { debounce, throttle } from 'lodash-es';
|
||||
import { throttle } from 'lodash-es';
|
||||
import { onDestroy, onMount, type Snippet } from 'svelte';
|
||||
import Portal from '../shared-components/portal/portal.svelte';
|
||||
import Scrubber from '../shared-components/scrubber/scrubber.svelte';
|
||||
|
|
@ -81,9 +81,8 @@
|
|||
|
||||
let { isViewing: showAssetViewer, asset: viewingAsset, preloadAssets, gridScrollTarget } = assetViewingStore;
|
||||
|
||||
// this does *not* need to be reactive and making it reactive causes expensive repeated updates
|
||||
// svelte-ignore non_reactive_update
|
||||
let safeViewport: ViewportXY = { width: 0, height: 0, x: 0, y: 0 };
|
||||
const viewport: ViewportXY = $state({ width: 0, height: 0, x: 0, y: 0 });
|
||||
const safeViewport: ViewportXY = $state({ width: 0, height: 0, x: 0, y: 0 });
|
||||
|
||||
const componentId = generateId();
|
||||
let element: HTMLElement | undefined = $state();
|
||||
|
|
@ -104,7 +103,7 @@
|
|||
let leadout = $state(false);
|
||||
|
||||
const {
|
||||
ASSET_GRID: { NAVIGATE_ON_ASSET_IN_VIEW, LARGE_BUCKET_THRESHOLD, LARGE_BUCKET_DEBOUNCE_MS },
|
||||
ASSET_GRID: { NAVIGATE_ON_ASSET_IN_VIEW },
|
||||
BUCKET: {
|
||||
INTERSECTION_ROOT_TOP: BUCKET_INTERSECTION_ROOT_TOP,
|
||||
INTERSECTION_ROOT_BOTTOM: BUCKET_INTERSECTION_ROOT_BOTTOM,
|
||||
|
|
@ -115,6 +114,14 @@
|
|||
},
|
||||
} = TUNABLES;
|
||||
|
||||
const isViewportOrigin = () => {
|
||||
return viewport.height === 0 && viewport.width === 0;
|
||||
};
|
||||
|
||||
const isEqual = (a: ViewportXY, b: ViewportXY) => {
|
||||
return a.height == b.height && a.width == b.width && a.x === b.x && a.y === b.y;
|
||||
};
|
||||
|
||||
const completeNav = () => {
|
||||
navigating = false;
|
||||
if (internalScroll) {
|
||||
|
|
@ -228,14 +235,6 @@
|
|||
};
|
||||
|
||||
onMount(() => {
|
||||
if (element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
safeViewport.height = rect.height;
|
||||
safeViewport.width = rect.width;
|
||||
safeViewport.x = rect.x;
|
||||
safeViewport.y = rect.y;
|
||||
}
|
||||
|
||||
void $assetStore
|
||||
.init({ bucketListener })
|
||||
.then(() => ($assetStore.connect(), $assetStore.updateViewport(safeViewport)));
|
||||
|
|
@ -260,6 +259,8 @@
|
|||
}
|
||||
return offset;
|
||||
}
|
||||
const _updateViewport = () => void $assetStore.updateViewport(safeViewport);
|
||||
const updateViewport = throttle(_updateViewport, 16);
|
||||
|
||||
const getMaxScrollPercent = () =>
|
||||
($assetStore.timelineHeight + bottomSectionHeight + topSectionHeight - safeViewport.height) /
|
||||
|
|
@ -743,8 +744,23 @@
|
|||
}
|
||||
});
|
||||
|
||||
let largeBucketMode = false;
|
||||
let updateViewport = debounce(() => $assetStore.updateViewport(safeViewport), 8);
|
||||
$effect(() => {
|
||||
if (element && isViewportOrigin()) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
viewport.height = rect.height;
|
||||
viewport.width = rect.width;
|
||||
viewport.x = rect.x;
|
||||
viewport.y = rect.y;
|
||||
}
|
||||
if (!isViewportOrigin() && !isEqual(viewport, safeViewport)) {
|
||||
safeViewport.height = viewport.height;
|
||||
safeViewport.width = viewport.width;
|
||||
safeViewport.x = viewport.x;
|
||||
safeViewport.y = viewport.y;
|
||||
updateViewport();
|
||||
}
|
||||
});
|
||||
|
||||
let shortcutList = $derived(
|
||||
(() => {
|
||||
if ($isSearchEnabled || $showAssetViewer) {
|
||||
|
|
@ -827,21 +843,7 @@
|
|||
id="asset-grid"
|
||||
class="scrollbar-hidden h-full overflow-y-auto outline-none {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
|
||||
tabindex="-1"
|
||||
use:resizeObserver={({ width, height }) => {
|
||||
if (!largeBucketMode && assetStore.maxBucketAssets >= LARGE_BUCKET_THRESHOLD) {
|
||||
largeBucketMode = true;
|
||||
// Each viewport update causes each asset to re-decode both the thumbhash and the thumbnail.
|
||||
// This is because the thumbnail components are destroyed and re-mounted, possibly because of the intersection observer.
|
||||
// For larger buckets, this can lead to freezing and a poor user experience.
|
||||
// As a mitigation, we aggressively debounce the viewport update to reduce the number of these events.
|
||||
updateViewport = debounce(() => $assetStore.updateViewport(safeViewport), LARGE_BUCKET_DEBOUNCE_MS, {
|
||||
leading: false,
|
||||
trailing: true,
|
||||
});
|
||||
}
|
||||
safeViewport = { width, height, x: safeViewport.x, y: safeViewport.y };
|
||||
void updateViewport();
|
||||
}}
|
||||
use:resizeObserver={({ height, width }) => ((viewport.width = width), (viewport.height = height))}
|
||||
bind:this={element}
|
||||
onscroll={() => ((assetStore.lastScrollTime = Date.now()), handleTimelineScroll())}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
<div use:resizeObserver={({ height }) => $assetStore.updateBucketDateGroup(bucket, dateGroup, { height })}>
|
||||
<div
|
||||
class="flex z-[100] sticky top-[-1px] pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg md:text-sm"
|
||||
style:width={dateGroup.geometry!.containerWidth + 'px'}
|
||||
style:width={dateGroup.geometry.containerWidth + 'px'}
|
||||
>
|
||||
<span class="w-full truncate first-letter:capitalize">
|
||||
{dateGroup.groupTitle}
|
||||
|
|
@ -81,8 +81,8 @@
|
|||
|
||||
<div
|
||||
class="relative overflow-clip"
|
||||
style:height={dateGroup.geometry!.containerHeight + 'px'}
|
||||
style:width={dateGroup.geometry!.containerWidth + 'px'}
|
||||
style:height={dateGroup.geometry.containerHeight + 'px'}
|
||||
style:width={dateGroup.geometry.containerWidth + 'px'}
|
||||
style:visibility={'hidden'}
|
||||
></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@
|
|||
import type { Viewport } from '$lib/stores/assets.store';
|
||||
import { showDeleteModal } from '$lib/stores/preferences.store';
|
||||
import { deleteAssets } from '$lib/utils/actions';
|
||||
import { archiveAssets, cancelMultiselect } from '$lib/utils/asset-utils';
|
||||
import { archiveAssets, cancelMultiselect, getAssetRatio } from '$lib/utils/asset-utils';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { navigate } from '$lib/utils/navigation';
|
||||
import { calculateWidth } from '$lib/utils/timeline-util';
|
||||
import { type AssetResponseDto } from '@immich/sdk';
|
||||
import justifiedLayout from 'justified-layout';
|
||||
import { t } from 'svelte-i18n';
|
||||
import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
|
||||
import ShowShortcuts from '../show-shortcuts.svelte';
|
||||
|
|
@ -307,15 +309,25 @@
|
|||
let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
|
||||
let idsSelectedAssets = $derived(assetInteraction.selectedAssetsArray.map(({ id }) => id));
|
||||
|
||||
let geometry = $derived.by(async () => {
|
||||
const { getJustifiedLayoutFromAssets } = await import('$lib/utils/layout-utils');
|
||||
return getJustifiedLayoutFromAssets(assets, {
|
||||
spacing: 2,
|
||||
heightTolerance: 0.15,
|
||||
rowHeight: 235,
|
||||
rowWidth: Math.floor(viewport.width),
|
||||
});
|
||||
});
|
||||
let geometry = $derived(
|
||||
(() => {
|
||||
const justifiedLayoutResult = justifiedLayout(
|
||||
assets.map((asset) => getAssetRatio(asset)),
|
||||
{
|
||||
boxSpacing: 2,
|
||||
containerWidth: Math.floor(viewport.width),
|
||||
containerPadding: 0,
|
||||
targetRowHeightTolerance: 0.15,
|
||||
targetRowHeight: 235,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
...justifiedLayoutResult,
|
||||
containerWidth: calculateWidth(justifiedLayoutResult.boxes),
|
||||
};
|
||||
})(),
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if (!lastAssetMouseEvent) {
|
||||
|
|
@ -351,49 +363,43 @@
|
|||
{/if}
|
||||
|
||||
{#if assets.length > 0}
|
||||
{#await geometry then geometry}
|
||||
<div class="relative" style="height: {geometry.containerHeight}px;width: {geometry.containerWidth}px ">
|
||||
{#each assets as asset, i}
|
||||
{@const top = geometry.getTop(i)}
|
||||
{@const left = geometry.getLeft(i)}
|
||||
{@const width = geometry.getWidth(i)}
|
||||
{@const height = geometry.getHeight(i)}
|
||||
|
||||
<div
|
||||
class="absolute"
|
||||
style="width: {width}px; height: {height}px; top: {top}px; left: {left}px"
|
||||
title={showAssetName ? asset.originalFileName : ''}
|
||||
>
|
||||
<Thumbnail
|
||||
readonly={disableAssetSelect}
|
||||
onClick={(asset) => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
handleSelectAssets(asset);
|
||||
return;
|
||||
}
|
||||
void viewAssetHandler(asset);
|
||||
}}
|
||||
onSelect={(asset) => handleSelectAssets(asset)}
|
||||
onMouseEvent={() => assetMouseEventHandler(asset)}
|
||||
onIntersected={() => (i === Math.max(1, assets.length - 7) ? onIntersected?.() : void 0)}
|
||||
{showArchiveIcon}
|
||||
{asset}
|
||||
selected={assetInteraction.selectedAssets.has(asset)}
|
||||
selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
|
||||
thumbnailWidth={width}
|
||||
thumbnailHeight={height}
|
||||
/>
|
||||
{#if showAssetName}
|
||||
<div
|
||||
class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
|
||||
>
|
||||
{asset.originalFileName}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/await}
|
||||
<div class="relative" style="height: {geometry.containerHeight}px;width: {geometry.containerWidth}px ">
|
||||
{#each assets as asset, i (i)}
|
||||
<div
|
||||
class="absolute"
|
||||
style="width: {geometry.boxes[i].width}px; height: {geometry.boxes[i].height}px; top: {geometry.boxes[i]
|
||||
.top}px; left: {geometry.boxes[i].left}px"
|
||||
title={showAssetName ? asset.originalFileName : ''}
|
||||
>
|
||||
<Thumbnail
|
||||
readonly={disableAssetSelect}
|
||||
onClick={(asset) => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
handleSelectAssets(asset);
|
||||
return;
|
||||
}
|
||||
void viewAssetHandler(asset);
|
||||
}}
|
||||
onSelect={(asset) => handleSelectAssets(asset)}
|
||||
onMouseEvent={() => assetMouseEventHandler(asset)}
|
||||
onIntersected={() => (i === Math.max(1, assets.length - 7) ? onIntersected?.() : void 0)}
|
||||
{showArchiveIcon}
|
||||
{asset}
|
||||
selected={assetInteraction.selectedAssets.has(asset)}
|
||||
selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
|
||||
thumbnailWidth={geometry.boxes[i].width}
|
||||
thumbnailHeight={geometry.boxes[i].height}
|
||||
/>
|
||||
{#if showAssetName}
|
||||
<div
|
||||
class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
|
||||
>
|
||||
{asset.originalFileName}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Overlay Asset Viewer -->
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { getKey } from '$lib/utils';
|
||||
import { AssetGridTaskManager } from '$lib/utils/asset-store-task-manager';
|
||||
import { getAssetRatio } from '$lib/utils/asset-utils';
|
||||
import { generateId } from '$lib/utils/generate-id';
|
||||
import type { AssetGridRouteSearchParams } from '$lib/utils/navigation';
|
||||
import { fromLocalDateTime, splitBucketIntoDateGroups, type DateGroup } from '$lib/utils/timeline-util';
|
||||
import type { JustifiedLayout, LayoutOptions } from '@immich/justified-layout-wasm';
|
||||
import { calculateWidth, fromLocalDateTime, splitBucketIntoDateGroups, type DateGroup } from '$lib/utils/timeline-util';
|
||||
import { TimeBucketSize, getAssetInfo, getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
|
||||
import createJustifiedLayout from 'justified-layout';
|
||||
import { throttle } from 'lodash-es';
|
||||
import { DateTime } from 'luxon';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
|
@ -15,6 +16,13 @@ import { websocketEvents } from './websocket';
|
|||
type AssetApiGetTimeBucketsRequest = Parameters<typeof getTimeBuckets>[0];
|
||||
export type AssetStoreOptions = Omit<AssetApiGetTimeBucketsRequest, 'size'>;
|
||||
|
||||
const LAYOUT_OPTIONS = {
|
||||
boxSpacing: 2,
|
||||
containerPadding: 0,
|
||||
targetRowHeightTolerance: 0.15,
|
||||
targetRowHeight: 235,
|
||||
};
|
||||
|
||||
export interface Viewport {
|
||||
width: number;
|
||||
height: number;
|
||||
|
|
@ -224,10 +232,8 @@ export class AssetStore {
|
|||
albumAssets: Set<string> = new Set();
|
||||
pendingScrollBucket: AssetBucket | undefined;
|
||||
pendingScrollAssetId: string | undefined;
|
||||
maxBucketAssets = 0;
|
||||
|
||||
listeners: BucketListener[] = [];
|
||||
getJustifiedLayoutFromAssets: ((assets: AssetResponseDto[], options: LayoutOptions) => JustifiedLayout) | undefined;
|
||||
|
||||
constructor(
|
||||
options: AssetStoreOptions,
|
||||
|
|
@ -389,13 +395,6 @@ export class AssetStore {
|
|||
);
|
||||
this.initializedSignal();
|
||||
this.initialized = true;
|
||||
|
||||
// TODO: move to top level import after https://github.com/sveltejs/kit/issues/7805 is fixed
|
||||
import('$lib/utils/layout-utils')
|
||||
.then(({ getJustifiedLayoutFromAssets }) => {
|
||||
this.getJustifiedLayoutFromAssets = getJustifiedLayoutFromAssets;
|
||||
})
|
||||
.catch(() => void 0);
|
||||
}
|
||||
|
||||
async updateOptions(options: AssetStoreOptions) {
|
||||
|
|
@ -470,33 +469,32 @@ export class AssetStore {
|
|||
assetGroup.heightActual = false;
|
||||
}
|
||||
}
|
||||
|
||||
const viewportWidth = this.viewport.width;
|
||||
if (!bucket.isBucketHeightActual) {
|
||||
const unwrappedWidth = (3 / 2) * bucket.bucketCount * THUMBNAIL_HEIGHT * (7 / 10);
|
||||
const rows = Math.ceil(unwrappedWidth / viewportWidth);
|
||||
const rows = Math.ceil(unwrappedWidth / this.viewport.width);
|
||||
const height = 51 + rows * THUMBNAIL_HEIGHT;
|
||||
bucket.bucketHeight = height;
|
||||
}
|
||||
|
||||
const layoutOptions = {
|
||||
spacing: 2,
|
||||
heightTolerance: 0.15,
|
||||
rowHeight: 235,
|
||||
rowWidth: Math.floor(viewportWidth),
|
||||
};
|
||||
|
||||
for (const assetGroup of bucket.dateGroups) {
|
||||
if (!assetGroup.heightActual) {
|
||||
const unwrappedWidth = (3 / 2) * assetGroup.assets.length * THUMBNAIL_HEIGHT * (7 / 10);
|
||||
const rows = Math.ceil(unwrappedWidth / viewportWidth);
|
||||
const rows = Math.ceil(unwrappedWidth / this.viewport.width);
|
||||
const height = rows * THUMBNAIL_HEIGHT;
|
||||
assetGroup.height = height;
|
||||
}
|
||||
|
||||
if (this.getJustifiedLayoutFromAssets) {
|
||||
assetGroup.geometry = this.getJustifiedLayoutFromAssets(assetGroup.assets, layoutOptions);
|
||||
}
|
||||
const layoutResult = createJustifiedLayout(
|
||||
assetGroup.assets.map((g) => getAssetRatio(g)),
|
||||
{
|
||||
...LAYOUT_OPTIONS,
|
||||
containerWidth: Math.floor(this.viewport.width),
|
||||
},
|
||||
);
|
||||
assetGroup.geometry = {
|
||||
...layoutResult,
|
||||
containerWidth: calculateWidth(layoutResult.boxes),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -562,7 +560,6 @@ export class AssetStore {
|
|||
|
||||
bucket.assets = assets;
|
||||
bucket.dateGroups = splitBucketIntoDateGroups(bucket, get(locale));
|
||||
this.maxBucketAssets = Math.max(this.maxBucketAssets, assets.length);
|
||||
this.updateGeometry(bucket, true);
|
||||
this.timelineHeight = this.buckets.reduce((accumulator, b) => accumulator + b.bucketHeight, 0);
|
||||
bucket.loaded();
|
||||
|
|
@ -832,7 +829,7 @@ export class AssetStore {
|
|||
}
|
||||
if (changed) {
|
||||
bucket.dateGroups = splitBucketIntoDateGroups(bucket, get(locale));
|
||||
void this.updateGeometry(bucket, true);
|
||||
this.updateGeometry(bucket, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "es2022",
|
||||
"module": "es2020",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { svelteTesting } from '@testing-library/svelte/vite';
|
|||
import path from 'node:path';
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
import { defineConfig } from 'vite';
|
||||
import wasm from 'vite-plugin-wasm';
|
||||
|
||||
const upstream = {
|
||||
target: process.env.IMMICH_SERVER_URL || 'http://immich-server:2283/',
|
||||
|
|
@ -15,9 +14,6 @@ const upstream = {
|
|||
};
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
target: 'es2022',
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'xmlhttprequest-ssl': './node_modules/engine.io-client/lib/xmlhttprequest.js',
|
||||
|
|
@ -45,7 +41,6 @@ export default defineConfig({
|
|||
: undefined,
|
||||
enhancedImages(),
|
||||
svelteTesting(),
|
||||
wasm(),
|
||||
],
|
||||
optimizeDeps: {
|
||||
entries: ['src/**/*.{svelte,ts,html}'],
|
||||
|
|
@ -58,9 +53,5 @@ export default defineConfig({
|
|||
sequence: {
|
||||
hooks: 'list',
|
||||
},
|
||||
deps: {
|
||||
// workaround for https://github.com/vitest-dev/vitest/issues/2150
|
||||
inline: ['@immich/justified-layout-wasm'],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue