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

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

* Remove package

web/package.json

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

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -13,7 +13,6 @@
 	import { handleError } from '$lib/utils/handle-error';
 	import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
 	import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-	import justifiedLayout from 'justified-layout';
 	import { flip } from 'svelte/animate';
 	import { archivedAsset } from '$lib/stores/archived-asset.store';
 
@@ -30,28 +29,22 @@
 	let currentViewAssetIndex = 0;
 
 	let viewWidth: number;
+	let thumbnailSize = 300;
 
 	$: 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 { asset }: { asset: AssetResponseDto } = event.detail;
 
@@ -121,23 +114,12 @@
 </script>
 
 {#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
 					{asset}
-						thumbnailWidth={box.width}
+					{thumbnailSize}
-						thumbnailHeight={box.height}
 					readonly={disableAssetSelect}
 					publicSharedKey={sharedLink?.key}
 					format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
@@ -148,7 +130,6 @@
 				/>
 			</div>
 		{/each}
-		{/if}
 	</div>
 {/if}