helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

79
web/src/lib/components/shared-components/scrubber/scrubber.svelte
View file

@ -7,28 +7,45 @@
import { isTimelineScrolling } from '$lib/stores/timeline.store';
import { fade, fly } from 'svelte/transition';
export let timelineTopOffset = 0;
export let timelineBottomOffset = 0;
export let height = 0;
export let assetStore: AssetStore;
export let invisible = false;
export let scrubOverallPercent: number = 0;
export let scrubBucketPercent: number = 0;
export let scrubBucket: { bucketDate: string | undefined } | undefined = undefined;
export let leadout: boolean = false;
export let onScrub: ScrubberListener | undefined = undefined;
export let startScrub: ScrubberListener | undefined = undefined;
export let stopScrub: ScrubberListener | undefined = undefined;
interface Props {
timelineTopOffset?: number;
timelineBottomOffset?: number;
height?: number;
assetStore: AssetStore;
invisible?: boolean;
scrubOverallPercent?: number;
scrubBucketPercent?: number;
scrubBucket?: { bucketDate: string | undefined } | undefined;
leadout?: boolean;
onScrub?: ScrubberListener | undefined;
startScrub?: ScrubberListener | undefined;
stopScrub?: ScrubberListener | undefined;
}
let isHover = false;
let isDragging = false;
let hoverLabel: string | undefined;
let {
timelineTopOffset = 0,
timelineBottomOffset = 0,
height = 0,
assetStore,
invisible = false,
scrubOverallPercent = 0,
scrubBucketPercent = 0,
scrubBucket = undefined,
leadout = false,
onScrub = undefined,
startScrub = undefined,
stopScrub = undefined,
}: Props = $props();
let isHover = $state(false);
let isDragging = $state(false);
let hoverLabel: string | undefined = $state();
let bucketDate: string | undefined;
let hoverY = 0;
let hoverY = $state(0);
let clientY = 0;
let windowHeight = 0;
let scrollBar: HTMLElement | undefined;
let segments: Segment[] = [];
let windowHeight = $state(0);
let scrollBar: HTMLElement | undefined = $state();
let segments: Segment[] = $state([]);
const toScrollY = (percent: number) => percent * (height - HOVER_DATE_HEIGHT * 2);
const toTimelineY = (scrollY: number) => scrollY / (height - HOVER_DATE_HEIGHT * 2);
@ -70,10 +87,14 @@
return scrubOverallPercent * (height - HOVER_DATE_HEIGHT * 2) - 2;
}
};
$: scrollY = toScrollFromBucketPercentage(scrubBucket, scrubBucketPercent, scrubOverallPercent);
$: timelineFullHeight = $assetStore.timelineHeight + timelineTopOffset + timelineBottomOffset;
$: relativeTopOffset = toScrollY(timelineTopOffset / timelineFullHeight);
$: relativeBottomOffset = toScrollY(timelineBottomOffset / timelineFullHeight);
let scrollY = $state(0);
$effect(() => {
scrollY = toScrollFromBucketPercentage(scrubBucket, scrubBucketPercent, scrubOverallPercent);
});
let timelineFullHeight = $derived($assetStore.timelineHeight + timelineTopOffset + timelineBottomOffset);
let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
const listener: BucketListener = (event) => {
const { type } = event;
@ -204,12 +225,12 @@
<svelte:window
bind:innerHeight={windowHeight}
on:mousemove={({ clientY }) => (isDragging || isHover) && handleMouseEvent({ clientY })}
on:mousedown={({ clientY }) => isHover && handleMouseEvent({ clientY, isDragging: true })}
on:mouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
onmousemove={({ clientY }) => (isDragging || isHover) && handleMouseEvent({ clientY })}
onmousedown={({ clientY }) => isHover && handleMouseEvent({ clientY, isDragging: true })}
onmouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
/>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
transition:fly={{ x: 50, duration: 250 }}
@ -223,8 +244,8 @@
style:background-color={isDragging ? 'transparent' : 'transparent'}
draggable="false"
bind:this={scrollBar}
on:mouseenter={() => (isHover = true)}
on:mouseleave={() => (isHover = false)}
onmouseenter={() => (isHover = true)}
onmouseleave={() => (isHover = false)}
>
{#if hoverLabel && (isHover || isDragging)}
<div