450 lines
10 KiB
Svelte
450 lines
10 KiB
Svelte
<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>
|