feat: add PlayerControls floating overlay component
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
449
src/lib/components/PlayerControls.svelte
Normal file
449
src/lib/components/PlayerControls.svelte
Normal file
@@ -0,0 +1,449 @@
|
||||
<script lang="ts">
|
||||
import SpeedSelector from '$lib/components/SpeedSelector.svelte';
|
||||
import { session } from '$lib/stores/videoSession.svelte';
|
||||
import {
|
||||
seekTo,
|
||||
seekBy,
|
||||
togglePlayPause,
|
||||
setVolume,
|
||||
setMuted,
|
||||
getVolume,
|
||||
getMuted,
|
||||
togglePiP,
|
||||
isPiPActive,
|
||||
toggleFullscreen,
|
||||
isFullscreenActive,
|
||||
setPlaybackRate,
|
||||
getPlaybackRate,
|
||||
} from '$lib/transport/playback';
|
||||
import { formatTime } from '$lib/utils/time';
|
||||
|
||||
let {
|
||||
visible,
|
||||
captionsEnabled,
|
||||
hasCaptions,
|
||||
onToggleCaptions,
|
||||
onOpenCaptionSettings,
|
||||
}: {
|
||||
visible: boolean;
|
||||
captionsEnabled: boolean;
|
||||
hasCaptions: boolean;
|
||||
onToggleCaptions: () => void;
|
||||
onOpenCaptionSettings: () => void;
|
||||
} = $props();
|
||||
|
||||
let showSpeedSelector = $state(false);
|
||||
let volume = $state(getVolume());
|
||||
let isMuted = $state(getMuted());
|
||||
let currentRate = $state(getPlaybackRate());
|
||||
let pipActive = $state(false);
|
||||
let fullscreenActive = $state(false);
|
||||
|
||||
// Seek bar state
|
||||
let seekBarEl = $state<HTMLDivElement | null>(null);
|
||||
let isSeeking = $state(false);
|
||||
let hoverTime = $state<number | null>(null);
|
||||
let hoverX = $state(0);
|
||||
|
||||
let progress = $derived(
|
||||
session.duration > 0 ? session.currentTime / session.duration : 0
|
||||
);
|
||||
|
||||
function handleSeekBarMouseDown(e: MouseEvent) {
|
||||
isSeeking = true;
|
||||
seekFromMouseEvent(e);
|
||||
}
|
||||
|
||||
function handleSeekBarMouseMove(e: MouseEvent) {
|
||||
if (!seekBarEl) return;
|
||||
const rect = seekBarEl.getBoundingClientRect();
|
||||
const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
|
||||
hoverX = x;
|
||||
hoverTime = (x / rect.width) * session.duration;
|
||||
if (isSeeking) {
|
||||
seekFromMouseEvent(e);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSeekBarMouseUp() {
|
||||
isSeeking = false;
|
||||
}
|
||||
|
||||
function handleSeekBarMouseLeave() {
|
||||
hoverTime = null;
|
||||
if (isSeeking) {
|
||||
isSeeking = false;
|
||||
}
|
||||
}
|
||||
|
||||
function seekFromMouseEvent(e: MouseEvent) {
|
||||
if (!seekBarEl) return;
|
||||
const rect = seekBarEl.getBoundingClientRect();
|
||||
const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
|
||||
const time = (x / rect.width) * session.duration;
|
||||
seekTo(time);
|
||||
}
|
||||
|
||||
function handleVolumeChange(e: Event) {
|
||||
const val = parseFloat((e.target as HTMLInputElement).value);
|
||||
volume = val;
|
||||
if (val > 0 && isMuted) {
|
||||
isMuted = false;
|
||||
}
|
||||
setVolume(val);
|
||||
if (val > 0) {
|
||||
setMuted(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleToggleMute() {
|
||||
isMuted = !isMuted;
|
||||
setMuted(isMuted);
|
||||
}
|
||||
|
||||
function handleSpeedSelect(rate: number) {
|
||||
currentRate = rate;
|
||||
setPlaybackRate(rate);
|
||||
showSpeedSelector = false;
|
||||
}
|
||||
|
||||
function handlePiP() {
|
||||
togglePiP();
|
||||
// State is updated via event listeners in VideoPlayer
|
||||
setTimeout(() => {
|
||||
pipActive = isPiPActive();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function handleFullscreen() {
|
||||
toggleFullscreen();
|
||||
setTimeout(() => {
|
||||
fullscreenActive = isFullscreenActive();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function handleCCContextMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
onOpenCaptionSettings();
|
||||
}
|
||||
|
||||
// Sync PiP/fullscreen state periodically
|
||||
$effect(() => {
|
||||
const interval = setInterval(() => {
|
||||
pipActive = isPiPActive();
|
||||
fullscreenActive = isFullscreenActive();
|
||||
}, 500);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
onmousemove={(e) => { if (isSeeking) seekFromMouseEvent(e); }}
|
||||
onmouseup={() => { isSeeking = false; }}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="player-controls-overlay"
|
||||
class:visible
|
||||
role="toolbar"
|
||||
aria-label="Player controls"
|
||||
>
|
||||
<div class="player-controls-panel">
|
||||
<!-- Seek bar -->
|
||||
<div
|
||||
class="seek-bar"
|
||||
bind:this={seekBarEl}
|
||||
onmousedown={handleSeekBarMouseDown}
|
||||
onmousemove={handleSeekBarMouseMove}
|
||||
onmouseup={handleSeekBarMouseUp}
|
||||
onmouseleave={handleSeekBarMouseLeave}
|
||||
role="slider"
|
||||
aria-label="Seek"
|
||||
aria-valuenow={session.currentTime}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={session.duration}
|
||||
>
|
||||
<div class="seek-track">
|
||||
<div class="seek-fill" style="width: {progress * 100}%"></div>
|
||||
<div class="seek-thumb" style="left: {progress * 100}%"></div>
|
||||
</div>
|
||||
{#if hoverTime !== null}
|
||||
<div class="seek-tooltip" style="left: {hoverX}px">
|
||||
{formatTime(hoverTime)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Controls row -->
|
||||
<div class="controls-row">
|
||||
<!-- Left group: playback -->
|
||||
<div class="controls-group left">
|
||||
<button
|
||||
class="ctrl-btn"
|
||||
onclick={() => seekBy(-10)}
|
||||
title="Skip back 10s"
|
||||
type="button"
|
||||
>⏪</button>
|
||||
<button
|
||||
class="ctrl-btn play-btn"
|
||||
onclick={togglePlayPause}
|
||||
title={session.isPlaying ? 'Pause' : 'Play'}
|
||||
type="button"
|
||||
>{session.isPlaying ? '❚❚' : '▶'}</button>
|
||||
<button
|
||||
class="ctrl-btn"
|
||||
onclick={() => seekBy(10)}
|
||||
title="Skip forward 10s"
|
||||
type="button"
|
||||
>⏩</button>
|
||||
|
||||
<!-- Volume -->
|
||||
<button
|
||||
class="ctrl-btn vol-btn"
|
||||
onclick={handleToggleMute}
|
||||
title={isMuted ? 'Unmute' : 'Mute'}
|
||||
type="button"
|
||||
>
|
||||
{#if isMuted || volume === 0}🔇{:else if volume < 0.5}🔉{:else}🔊{/if}
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
class="vol-slider"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={isMuted ? 0 : volume}
|
||||
oninput={handleVolumeChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Center group: time -->
|
||||
<div class="controls-group center">
|
||||
<span class="time-display">
|
||||
{formatTime(session.currentTime)}
|
||||
<span class="time-sep">/</span>
|
||||
{formatTime(session.duration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Right group: settings -->
|
||||
<div class="controls-group right">
|
||||
<div class="speed-wrapper">
|
||||
<button
|
||||
class="ctrl-btn"
|
||||
onclick={() => { showSpeedSelector = !showSpeedSelector; }}
|
||||
title="Playback speed"
|
||||
type="button"
|
||||
>{currentRate}×</button>
|
||||
{#if showSpeedSelector}
|
||||
<SpeedSelector
|
||||
{currentRate}
|
||||
onSelect={handleSpeedSelect}
|
||||
onClose={() => { showSpeedSelector = false; }}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if hasCaptions}
|
||||
<button
|
||||
class="ctrl-btn"
|
||||
class:active={captionsEnabled}
|
||||
onclick={onToggleCaptions}
|
||||
oncontextmenu={handleCCContextMenu}
|
||||
title={captionsEnabled ? 'Hide captions' : 'Show captions'}
|
||||
type="button"
|
||||
>CC</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="ctrl-btn"
|
||||
class:active={pipActive}
|
||||
onclick={handlePiP}
|
||||
title="Picture-in-Picture"
|
||||
type="button"
|
||||
>⧉</button>
|
||||
|
||||
<button
|
||||
class="ctrl-btn"
|
||||
class:active={fullscreenActive}
|
||||
onclick={handleFullscreen}
|
||||
title={fullscreenActive ? 'Exit fullscreen' : 'Fullscreen'}
|
||||
type="button"
|
||||
>{fullscreenActive ? '⤓' : '⛶'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.player-controls-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.player-controls-overlay.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.player-controls-panel {
|
||||
pointer-events: auto;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 12px 12px 0 0;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* --- Seek bar --- */
|
||||
.seek-bar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.seek-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
transition: height 0.15s ease;
|
||||
}
|
||||
|
||||
.seek-bar:hover .seek-track {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.seek-fill {
|
||||
height: 100%;
|
||||
background: var(--accent, #89b4fa);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.seek-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--accent, #89b4fa);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.seek-bar:hover .seek-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.seek-tooltip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: var(--text-primary, #cdd6f4);
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* --- Controls row --- */
|
||||
.controls-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.controls-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.controls-group.left {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.controls-group.center {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.controls-group.right {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
.ctrl-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary, #cdd6f4);
|
||||
font-size: 16px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.ctrl-btn:hover {
|
||||
color: var(--accent, #89b4fa);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ctrl-btn.active {
|
||||
color: var(--accent, #89b4fa);
|
||||
}
|
||||
|
||||
.ctrl-btn.play-btn {
|
||||
font-size: 20px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
/* --- Volume --- */
|
||||
.vol-slider {
|
||||
width: 70px;
|
||||
height: 4px;
|
||||
accent-color: var(--accent, #89b4fa);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- Time --- */
|
||||
.time-display {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary, #a6adc8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.time-sep {
|
||||
color: var(--text-muted, #6c7086);
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
/* --- Speed wrapper --- */
|
||||
.speed-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user