diff --git a/web/package.json b/web/package.json index 73b9e474e4..490a9f3e71 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte index 11541f4ab5..ac99c105ef 100644 --- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte +++ b/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; - let width = asset.exifInfo?.exifImageWidth || 235; - - const orientation = Number(asset.exifInfo?.orientation); - if (orientation) { - if (orientation == 6 || orientation == -90) { - [width, height] = [height, width]; - } + $: { + if (assets.length < 6) { + thumbnailSize = Math.min(320, Math.floor(viewWidth / assets.length - assets.length)); + } else { + if (viewWidth > 600) thumbnailSize = Math.floor(viewWidth / 7 - 7); + else if (viewWidth > 400) thumbnailSize = Math.floor(viewWidth / 4 - 6); + else if (viewWidth > 300) thumbnailSize = Math.floor(viewWidth / 2 - 6); + 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 @@ {#if assets.length > 0} -
- {#if viewWidth} - {#each assets as asset, index (asset.id)} - {@const box = geometry.boxes[index]} -
- (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))} - on:select={selectAssetHandler} - selected={selectedAssets.has(asset)} - {showArchiveIcon} - /> -
- {/each} - {/if} +
+ {#each assets as asset (asset.id)} +
+ (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))} + on:select={selectAssetHandler} + selected={selectedAssets.has(asset)} + {showArchiveIcon} + /> +
+ {/each}
{/if}