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,26 +29,20 @@
 	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) => {
@@ -121,34 +114,22 @@
 </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"
+				<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>
 {/if}