Backupppert/immich
1
1
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-21 22:44:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(web): migration svelte 5 syntax ()

Browse source
This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 • committed by GitHub
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
web/src/lib/components/assets/thumbnail
image-thumbnail.svelte

80
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
View file

@ -7,29 +7,49 @@
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
export let url: string;
export let altText: string | undefined;
export let title: string | null = null;
export let heightStyle: string | undefined = undefined;
export let widthStyle: string;
export let base64ThumbHash: string | null = null;
export let curve = false;
export let shadow = false;
export let circle = false;
export let hidden = false;
export let border = false;
export let preload = true;
export let hiddenIconClass = 'text-white';
export let onComplete: (() => void) | undefined = undefined;
interface Props {
url: string;
altText: string | undefined;
title?: string | null;
heightStyle?: string | undefined;
widthStyle: string;
base64ThumbHash?: string | null;
curve?: boolean;
shadow?: boolean;
circle?: boolean;
hidden?: boolean;
border?: boolean;
preload?: boolean;
hiddenIconClass?: string;
onComplete?: (() => void) | undefined;
onClick?: (() => void) | undefined;
}
let {
url,
altText,
title = null,
heightStyle = undefined,
widthStyle,
base64ThumbHash = null,
curve = false,
shadow = false,
circle = false,
hidden = false,
border = false,
preload = true,
hiddenIconClass = 'text-white',
onComplete = undefined,
}: Props = $props();
let {
IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
} = TUNABLES;
let loaded = false;
let errored = false;
let loaded = $state(false);
let errored = $state(false);
let img: HTMLImageElement;
let img = $state<HTMLImageElement>();
const setLoaded = () => {
loaded = true;
@ -40,20 +60,22 @@
onComplete?.();
};
onMount(() => {
if (img.complete) {
if (img?.complete) {
setLoaded();
}
});
$: optionalClasses = [
curve && 'rounded-xl',
circle && 'rounded-full',
shadow && 'shadow-lg',
(circle || !heightStyle) && 'aspect-square',
border && 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary',
]
.filter(Boolean)
.join(' ');
let optionalClasses = $derived(
[
curve && 'rounded-xl',
circle && 'rounded-full',
shadow && 'shadow-lg',
(circle || !heightStyle) && 'aspect-square',
border && 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary',
]
.filter(Boolean)
.join(' '),
);
</script>
{#if errored}
@ -61,8 +83,8 @@
{:else}
<img
bind:this={img}
on:load={setLoaded}
on:error={setErrored}
onload={setLoaded}
onerror={setErrored}
loading={preload ? 'eager' : 'lazy'}
style:width={widthStyle}
style:height={heightStyle}