self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-06 06:07:29 +02:00
Code Issues Releases Activity

chore(web): migration svelte 5 syntax (#13883)

Browse Source
This commit is contained in:
Alex
2024-11-14 08:43:25 -06:00
committed by GitHub
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,20 +17,34 @@
import Portal from '../portal/portal.svelte';
import { handlePromiseError } from '$lib/utils';
export let assets: AssetResponseDto[];
export let selectedAssets: Set<AssetResponseDto> = new Set();
export let disableAssetSelect = false;
export let showArchiveIcon = false;
export let viewport: Viewport;
export let onIntersected: (() => void) | undefined = undefined;
export let showAssetName = false;
export let onPrevious: (() => Promise<AssetResponseDto | undefined>) | undefined = undefined;
export let onNext: (() => Promise<AssetResponseDto | undefined>) | undefined = undefined;
interface Props {
assets: AssetResponseDto[];
selectedAssets?: Set<AssetResponseDto>;
disableAssetSelect?: boolean;
showArchiveIcon?: boolean;
viewport: Viewport;
onIntersected?: (() => void) | undefined;
showAssetName?: boolean;
onPrevious?: (() => Promise<AssetResponseDto | undefined>) | undefined;
onNext?: (() => Promise<AssetResponseDto | undefined>) | undefined;
}
let {
assets = $bindable(),
selectedAssets = $bindable(new Set()),
disableAssetSelect = false,
showArchiveIcon = false,
viewport,
onIntersected = undefined,
showAssetName = false,
onPrevious = undefined,
onNext = undefined,
}: Props = $props();
let { isViewing: isViewerOpen, asset: viewingAsset, setAsset } = assetViewingStore;
let currentViewAssetIndex = 0;
$: isMultiSelectionMode = selectedAssets.size > 0;
let isMultiSelectionMode = $derived(selectedAssets.size > 0);
const viewAssetHandler = async (asset: AssetResponseDto) => {
currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
@ -100,23 +114,25 @@
$isViewerOpen = false;
});
$: geometry = (() => {
const justifiedLayoutResult = justifiedLayout(
assets.map((asset) => getAssetRatio(asset)),
{
boxSpacing: 2,
containerWidth: Math.floor(viewport.width),
containerPadding: 0,
targetRowHeightTolerance: 0.15,
targetRowHeight: 235,
},
);
let geometry = $derived(
(() => {
const justifiedLayoutResult = justifiedLayout(
assets.map((asset) => getAssetRatio(asset)),
{
boxSpacing: 2,
containerWidth: Math.floor(viewport.width),
containerPadding: 0,
targetRowHeightTolerance: 0.15,
targetRowHeight: 235,
},
);
return {
...justifiedLayoutResult,
containerWidth: calculateWidth(justifiedLayoutResult.boxes),
};
})();
return {
...justifiedLayoutResult,
containerWidth: calculateWidth(justifiedLayoutResult.boxes),
};
})(),
);
</script>
{#if assets.length > 0}