gui-video-clipper/src/lib/components/PlayerControls.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"
      tabindex="0"
      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 0.1s;
    z-index: 20;
  }

  .player-controls-overlay.visible {
    opacity: 1;
    transition-delay: 0.1s;
  }

  .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>