From 759cb6b48f1f7e75885e21591969cd4c6175423e Mon Sep 17 00:00:00 2001 From: WardPearce Date: Sun, 28 Dec 2025 13:02:21 +1300 Subject: [PATCH] Improve player double click to seek --- materialious/src/lib/components/Player.svelte | 48 ++++++++++++++----- 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index 7e130eee..0a7e4d17 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -340,6 +340,14 @@ if (playerElement) playerElement.currentTime = playerCurrentTime; } + function toggleFullscreen() { + if (document.fullscreenElement) { + document.exitFullscreen(); + } else { + playerContainer.requestFullscreen(); + } + } + async function loadVideo() { showVideoRetry = false; @@ -710,11 +718,7 @@ }); Mousetrap.bind('f', () => { - if (document.fullscreenElement) { - document.exitFullscreen(); - } else { - playerContainer.requestFullscreen(); - } + toggleFullscreen(); return false; }); @@ -890,31 +894,49 @@ playerTimelineTooltipVisible = false; } + let clickCount = $state(0); + // eslint-disable-next-line no-undef + let clickCounterTimeout: NodeJS.Timeout; function onVideoClick( event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement; } ) { + const playerControls = document.getElementById('player-controls'); + + if (!playerControls) return; + if ( - event.target && - event.target instanceof HTMLElement && - event.target.id === 'player-center' && + event.currentTarget && + event.currentTarget.id === 'player-container' && + parseFloat(getComputedStyle(playerControls).opacity) > 0 && playerElement ) { + clickCount++; + const container = event.currentTarget; const rect = container.getBoundingClientRect(); const clickX = event.clientX - rect.left; const width = rect.width; + if (clickCounterTimeout) clearTimeout(clickCounterTimeout); + + clickCounterTimeout = setTimeout(() => { + if (clickCount == 1) { + toggleVideoPlaybackStatus(); + } + + clickCount = 0; + }, 300); + + if (clickCount < 2) return; + if (clickX < width / 3) { - // Left third, back 10s playerElement.currentTime = Math.max(0, playerElement.currentTime - 10); } else if (clickX < (2 * width) / 3) { - // Middle third, toggle play/pause - toggleVideoPlaybackStatus(); + toggleFullscreen(); } else { - // Right third, forward 10s playerElement.currentTime = Math.min( playerElement.duration, playerElement.currentTime + 10 @@ -952,6 +974,8 @@ if (sabrAdapter) sabrAdapter.dispose(); + if (clickCounterTimeout) clearTimeout(clickCounterTimeout); + if (player) { player.unload(); player.destroy();