feat: conditional CC rendering and click-to-play in Player mode

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/VideoPlayer.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { session, upgradePreview, dismissUpgradeToast } from '$lib/stores/videoSession.svelte';
-  import { setVideoElement } from '$lib/transport/playback';
+  import {
+    setVideoElement,
+    togglePlayPause as playbackTogglePlayPause,
+    toggleFullscreen,
+  } from '$lib/transport/playback';
   import { preferences } from '$lib/stores/preferences.svelte';
   import { parseVtt, getActiveCues, getActiveWords, type VttCue } from '$lib/utils/vttParser';
   import { getMediaServerPort } from '$lib/bindings/video';
@@ -14,14 +18,21 @@
     return `${r}, ${g}, ${b}`;
   }
 
+  let {
+    captionsEnabled = $bindable(true),
+  }: {
+    captionsEnabled?: boolean;
+  } = $props();
+
   let videoElement = $state<HTMLVideoElement | null>(null);
   let videoError = $state<string | null>(null);
   let videoSrc = $state<string | null>(null);
-  let captionsEnabled = $state(true);
   let showCaptionSettings = $state(false);
   let parsedCues = $state<VttCue[]>([]);
   let mediaServerPort = $state<number | null>(null);
 
+  let isPlayerMode = $derived(preferences.appMode === 'player');
+
   // Fetch media server port on mount
   $effect(() => {
     getMediaServerPort().then((port) => {
@@ -108,6 +119,30 @@
     showCaptionSettings = !showCaptionSettings;
   }
 
+  function handleVideoClick() {
+    if (isPlayerMode) {
+      playbackTogglePlayPause();
+    }
+  }
+
+  let clickTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function handleVideoClickWithDelay(_e: MouseEvent) {
+    if (!isPlayerMode) return;
+    // Distinguish single click from double click
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+      clickTimer = null;
+      // Double click
+      toggleFullscreen();
+    } else {
+      clickTimer = setTimeout(() => {
+        clickTimer = null;
+        playbackTogglePlayPause();
+      }, 250);
+    }
+  }
+
   let lastTimeUpdate = 0;
   const TIME_UPDATE_INTERVAL = 66;
 
@@ -196,6 +231,7 @@
       onpause={handlePause}
       onerror={handleError}
       onloadeddata={handleLoadedData}
+      onclick={handleVideoClickWithDelay}
       preload="metadata"
       playsinline
     >
@@ -219,7 +255,7 @@
         {/each}
       </div>
     {/if}
-    {#if parsedCues.length > 0}
+    {#if !isPlayerMode && parsedCues.length > 0}
       <div class="cc-controls">
         <button
           class="cc-toggle"
@@ -234,7 +270,7 @@
         >⚙</button>
       </div>
     {/if}
-    {#if showCaptionSettings}
+    {#if !isPlayerMode && showCaptionSettings}
       <CaptionSettingsPanel onClose={() => (showCaptionSettings = false)} />
     {/if}
     {#if session.showUpgradeToast}