self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(web): revert justify layout - improve gallery view load time (#2522)

Browse Source 
* fix(web): revert justify layout - improve gallery view load time

* Remove package
This commit is contained in:
Alex 2023-05-22 21:01:32 -05:00 committed by GitHub
parent e9722710ac
commit b4d312efb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@ -60,7 +60,6 @@
"axios": "^0.27.2", "axios": "^0.27.2",
"copy-image-clipboard": "^2.1.2", "copy-image-clipboard": "^2.1.2",
"handlebars": "^4.7.7", "handlebars": "^4.7.7",
"justified-layout": "^4.1.0",
"leaflet": "^1.9.3", "leaflet": "^1.9.3",
"leaflet.markercluster": "^1.5.3", "leaflet.markercluster": "^1.5.3",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",

47
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -13,7 +13,6 @@
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api'; import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
import AssetViewer from '../../asset-viewer/asset-viewer.svelte'; import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
import justifiedLayout from 'justified-layout';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import { archivedAsset } from '$lib/stores/archived-asset.store'; import { archivedAsset } from '$lib/stores/archived-asset.store';
@ -30,28 +29,22 @@
let currentViewAssetIndex = 0; let currentViewAssetIndex = 0;
let viewWidth: number; let viewWidth: number;
let thumbnailSize = 300;
$: isMultiSelectionMode = selectedAssets.size > 0; $: isMultiSelectionMode = selectedAssets.size > 0;
$: geometry = justifiedLayout(assets.map(getAssetRatio), {
boxSpacing: 5,
containerWidth: Math.floor(viewWidth),
targetRowHeight: 235
});
function getAssetRatio(asset: AssetResponseDto) { $: {
let height = asset.exifInfo?.exifImageHeight || 235; if (assets.length < 6) {
let width = asset.exifInfo?.exifImageWidth || 235; thumbnailSize = Math.min(320, Math.floor(viewWidth / assets.length - assets.length));
} else {
const orientation = Number(asset.exifInfo?.orientation); if (viewWidth > 600) thumbnailSize = Math.floor(viewWidth / 7 - 7);
if (orientation) { else if (viewWidth > 400) thumbnailSize = Math.floor(viewWidth / 4 - 6);
if (orientation == 6 || orientation == -90) { else if (viewWidth > 300) thumbnailSize = Math.floor(viewWidth / 2 - 6);
[width, height] = [height, width]; else if (viewWidth > 200) thumbnailSize = Math.floor(viewWidth / 2 - 6);
else if (viewWidth > 100) thumbnailSize = Math.floor(viewWidth / 1 - 6);
} }
} }
return { width, height };
}
const viewAssetHandler = (event: CustomEvent) => { const viewAssetHandler = (event: CustomEvent) => {
const { asset }: { asset: AssetResponseDto } = event.detail; const { asset }: { asset: AssetResponseDto } = event.detail;
@ -121,23 +114,12 @@
</script> </script>
{#if assets.length > 0} {#if assets.length > 0}
<div <div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
class="relative w-full mb-20" {#each assets as asset (asset.id)}
bind:clientWidth={viewWidth} <div animate:flip={{ duration: 500 }}>
style="height: {geometry.containerHeight}px"
>
{#if viewWidth}
{#each assets as asset, index (asset.id)}
{@const box = geometry.boxes[index]}
<div
class="absolute"
style="width: {box.width}px; height: {box.height}px; top: {box.top}px; left: {box.left}px"
animate:flip={{ duration: 500 }}
>
<Thumbnail <Thumbnail
{asset} {asset}
thumbnailWidth={box.width} {thumbnailSize}
thumbnailHeight={box.height}
readonly={disableAssetSelect} readonly={disableAssetSelect}
publicSharedKey={sharedLink?.key} publicSharedKey={sharedLink?.key}
format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp} format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
@ -148,7 +130,6 @@
/> />
</div> </div>
{/each} {/each}
{/if}
</div> </div>
{/if} {/if}