cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-16 02:18:50 -07:00
Code Issues Packages Projects Releases Wiki 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",

71
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,26 +29,20 @@
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) => {
@ -121,34 +114,22 @@
</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" <Thumbnail
> {asset}
{#if viewWidth} {thumbnailSize}
{#each assets as asset, index (asset.id)} readonly={disableAssetSelect}
{@const box = geometry.boxes[index]} publicSharedKey={sharedLink?.key}
<div format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
class="absolute" on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
style="width: {box.width}px; height: {box.height}px; top: {box.top}px; left: {box.left}px" on:select={selectAssetHandler}
animate:flip={{ duration: 500 }} selected={selectedAssets.has(asset)}
> {showArchiveIcon}
<Thumbnail />
{asset} </div>
thumbnailWidth={box.width} {/each}
thumbnailHeight={box.height}
readonly={disableAssetSelect}
publicSharedKey={sharedLink?.key}
format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
on:select={selectAssetHandler}
selected={selectedAssets.has(asset)}
{showArchiveIcon}
/>
</div>
{/each}
{/if}
</div> </div>
{/if} {/if}