cottongin/gui-video-clipper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: auto-hide timers, status bar, keyframe shortcuts in Player mode

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-09-22 19:44:48 -04:00
parent d847a0cff2
commit 980f31a414
1 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.svelte
View File

@@ -50,8 +50,8 @@
let showPlayerControls = $state(true); let showPlayerControls = $state(true);
let showToolbar = $state(true); let showToolbar = $state(true);
let showPlayerTimeline = $state(false); let showPlayerTimeline = $state(false);
let controlsHideTimer = $state<ReturnType<typeof setTimeout> | null>(null); let controlsHideTimer: ReturnType<typeof setTimeout> | null = null;
let toolbarHideTimer = $state<ReturnType<typeof setTimeout> | null>(null); let toolbarHideTimer: ReturnType<typeof setTimeout> | null = null;
// Caption state for PlayerControls // Caption state for PlayerControls
let captionsEnabled = $state(true); let captionsEnabled = $state(true);
@@ -83,16 +83,10 @@
$effect(() => { $effect(() => {
if (!isPlayerMode) return; if (!isPlayerMode) return;
if (!session.isPlaying) { // Read play state so this re-runs on play/pause changes —
// Video paused — show everything // controls briefly show then auto-hide regardless of play state
showPlayerControls = true; void session.isPlaying;
showToolbar = true; resetControlsTimer();
if (controlsHideTimer) clearTimeout(controlsHideTimer);
if (toolbarHideTimer) clearTimeout(toolbarHideTimer);
} else {
// Video playing — start hide timers
resetControlsTimer();
}
}); });
function dispatchTransport(action: TransportKeyAction) { function dispatchTransport(action: TransportKeyAction) {
@@ -152,21 +146,17 @@
function resetControlsTimer() { function resetControlsTimer() {
if (controlsHideTimer) clearTimeout(controlsHideTimer); if (controlsHideTimer) clearTimeout(controlsHideTimer);
showPlayerControls = true; showPlayerControls = true;
if (session.isPlaying) { controlsHideTimer = setTimeout(() => {
controlsHideTimer = setTimeout(() => { showPlayerControls = false;
showPlayerControls = false; }, CONTROLS_HIDE_DELAY);
}, CONTROLS_HIDE_DELAY);
}
} }
function resetToolbarTimer() { function resetToolbarTimer() {
if (toolbarHideTimer) clearTimeout(toolbarHideTimer); if (toolbarHideTimer) clearTimeout(toolbarHideTimer);
showToolbar = true; showToolbar = true;
if (session.isPlaying) { toolbarHideTimer = setTimeout(() => {
toolbarHideTimer = setTimeout(() => { showToolbar = false;
showToolbar = false; }, CONTROLS_HIDE_DELAY);
}, CONTROLS_HIDE_DELAY);
}
} }
function handlePlayerMouseMove(e: MouseEvent) { function handlePlayerMouseMove(e: MouseEvent) {
@@ -211,11 +201,19 @@
break; break;
case ',': case ',':
e.preventDefault(); e.preventDefault();
dispatchTransport(e.shiftKey ? 'keyframe-back' : 'frame-back'); dispatchTransport('frame-back');
break; break;
case '.': case '.':
e.preventDefault(); e.preventDefault();
dispatchTransport(e.shiftKey ? 'keyframe-forward' : 'frame-forward'); dispatchTransport('frame-forward');
break;
case '<':
e.preventDefault();
dispatchTransport('keyframe-back');
break;
case '>':
e.preventDefault();
dispatchTransport('keyframe-forward');
break; break;
case 'ArrowLeft': case 'ArrowLeft':
e.preventDefault(); e.preventDefault();
@@ -460,7 +458,9 @@
{/if} {/if}
</main> </main>
<StatusBar onOpenAbout={() => (showAboutDialog = true)} /> {#if !isPlayerMode}
<StatusBar onOpenAbout={() => (showAboutDialog = true)} />
{/if}
</div> </div>
<style> <style>