From f717687b1bbb0e8e2dc6248e4040c0f9362c8414 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:05:03 -0400
Subject: [PATCH] feat: add PlayerControls floating overlay component

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/lib/components/PlayerControls.svelte | 449 +++++++++++++++++++++++
 1 file changed, 449 insertions(+)
 create mode 100644 src/lib/components/PlayerControls.svelte

diff --git a/src/lib/components/PlayerControls.svelte b/src/lib/components/PlayerControls.svelte
new file mode 100644
index 0000000..e411e77
--- /dev/null
+++ b/src/lib/components/PlayerControls.svelte
@@ -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>