diff --git a/materialious/src/lib/components/player/Timeline.svelte b/materialious/src/lib/components/player/Timeline.svelte index 4ab0d205..92e4bc7a 100644 --- a/materialious/src/lib/components/player/Timeline.svelte +++ b/materialious/src/lib/components/player/Timeline.svelte @@ -47,7 +47,6 @@ let playerTimelineTooltip: HTMLDivElement | undefined = $state(); let playerTimelineThumbnails: TimelineThumbnail[] = $state([]); let playerTimelineThumbnailsCache = new ImageCache(); - let playerTimelineThumbnailLoaded = $state(false); let playerTimelineThumbnailCanvas: { timeline?: HTMLCanvasElement; thumb?: HTMLCanvasElement; @@ -280,11 +279,10 @@ } async function setPlayerTimelineThumbnails(time: number, canvas: HTMLCanvasElement) { - playerTimelineThumbnailLoaded = false; const canvasContext = canvas.getContext('2d'); if (canvasContext) { - playerTimelineThumbnailLoaded = await drawTimelineThumbnail( + await drawTimelineThumbnail( canvasContext, playerTimelineThumbnailsCache, playerTimelineThumbnails, @@ -370,18 +368,14 @@ {/snippet}
{#if !userManualSeeking && playerShowTimelineThumbnail} -
+
{@render timelineTooltip('timeline', playerTimelineTimeHover)}
{/if}
{#if playerSliderInteracted && playerShowTimelineThumbnail} -
+
{@render timelineTooltip('thumb', currentTime)}
{/if} @@ -433,12 +427,7 @@ border-radius: var(--border-radius); visibility: visible; opacity: 1; - transition: opacity 0.5s ease; - } - - .timeline.tooltip.tooltip-hide { - opacity: 0; - pointer-events: none; + transition: none !important; } .tooltip.thumb {