diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index 48fc72ea..702b8c2f 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -136,6 +136,7 @@ } = $state({}); let playerInitalInteract = true; let playerSliderInteracted = $state(false); + let playerShowTimelineThumbnail = $state(true); const playerTimelineSlider = new Slider({ min: 0, @@ -157,9 +158,10 @@ playerSliderDebounce = setTimeout(() => { if (playerElement) { - playerElement.currentTime = timeToSet; + playerElement.currentTime = currentTime; userManualSeeking = false; playerSliderInteracted = false; + playerShowTimelineThumbnail = false; } }, 300); }, @@ -1142,17 +1144,6 @@ } } - let requestAnimationTooltip: number | undefined; - let latestMouseX: number | undefined; - - function timelineMouseMove(event: MouseEvent) { - latestMouseX = event.clientX; - - if (!requestAnimationTooltip) { - requestAnimationTooltip = requestAnimationFrame(updateTooltip); - } - } - async function setPlayerTimelineThumbnails(time: number, canvas: HTMLCanvasElement) { const canvasContext = canvas.getContext('2d'); @@ -1166,12 +1157,25 @@ } } + let requestAnimationTooltip: number | undefined; + let latestMouseX: number | undefined; + + function timelineMouseMove(event: MouseEvent) { + latestMouseX = event.clientX; + + if (!requestAnimationTooltip) { + requestAnimationTooltip = requestAnimationFrame(updateTooltip); + } + } + async function updateTooltip() { if (!playerSliderElement || latestMouseX === undefined) { requestAnimationTooltip = undefined; return; } + playerShowTimelineThumbnail = true; + const rect = playerSliderElement.getBoundingClientRect(); const percent = Math.min(Math.max((latestMouseX - rect.left) / rect.width, 0), 1); @@ -1383,7 +1387,7 @@ onmousemove={timelineMouseMove} bind:this={playerSliderElement} > - {#snippet timelineTooltip(key: 'thumb' | 'timeline')} + {#snippet timelineTooltip(key: 'thumb' | 'timeline', timeInSeconds: number)} {#if playerTimelineThumbnails.length > 0} {/if} + {videoLength(timeInSeconds)} {/snippet}
- {#if !userManualSeeking} + {#if !userManualSeeking && playerShowTimelineThumbnail}
- {@render timelineTooltip('timeline')} - {videoLength(playerTimelineTimeHover)} + {@render timelineTooltip('timeline', playerTimelineTimeHover)}
{/if}
{#if playerSliderInteracted}
- {@render timelineTooltip('thumb')} - {videoLength(currentTime)} + {@render timelineTooltip('thumb', currentTime)}
{/if}