feat: add Player/Clipper mode switching with auto-hide UI

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

src/App.svelte

@@ -10,9 +10,11 @@
   import ExportDialog from '$lib/components/ExportDialog.svelte';
   import AboutDialog from '$lib/components/AboutDialog.svelte';
   import ProcessingModal from '$lib/components/ProcessingModal.svelte';
-  import { loadPreferences, preferences, setClipListPosition, setClipListWidth } from '$lib/stores/preferences.svelte';
+  import PlayerControls from '$lib/components/PlayerControls.svelte';
+  import PlayerTimeline from '$lib/components/PlayerTimeline.svelte';
+  import { loadPreferences, preferences, setClipListPosition, setClipListWidth, setAppMode } from '$lib/stores/preferences.svelte';
   import { getSelectedClipId, removeClip } from '$lib/stores/clips.svelte';
-  import { adjustShuttle, resetShuttleRate } from '$lib/transport/playback';
+  import { adjustShuttle, resetShuttleRate, toggleFullscreen } from '$lib/transport/playback';
   import { session } from '$lib/stores/videoSession.svelte';
   import { listen } from '@tauri-apps/api/event';
   import type { TransportKeyAction } from '$lib/transport/playback';
@@ -36,6 +38,22 @@
   let sidebarResizeStartWidth = $state(0);
   let windowWidth = $state(window.innerWidth);
 
+  let isPlayerMode = $derived(preferences.appMode === 'player');
+
+  // Auto-hide state for Player mode
+  let showPlayerControls = $state(true);
+  let showToolbar = $state(true);
+  let showPlayerTimeline = $state(false);
+  let controlsHideTimer = $state<ReturnType<typeof setTimeout> | null>(null);
+  let toolbarHideTimer = $state<ReturnType<typeof setTimeout> | null>(null);
+
+  // Caption state for PlayerControls
+  let captionsEnabled = $state(true);
+
+  const CONTROLS_HIDE_DELAY = 2500;
+  const TOOLBAR_PROXIMITY = 50;
+  const TIMELINE_PROXIMITY = 80;
+
   let isLeft = $derived(preferences.clipListPosition === 'left');
 
   $effect(() => {
@@ -57,6 +75,20 @@
     }
   });
 
+  $effect(() => {
+    if (!isPlayerMode) return;
+    if (!session.isPlaying) {
+      // Video paused — show everything
+      showPlayerControls = true;
+      showToolbar = true;
+      if (controlsHideTimer) clearTimeout(controlsHideTimer);
+      if (toolbarHideTimer) clearTimeout(toolbarHideTimer);
+    } else {
+      // Video playing — start hide timers
+      resetControlsTimer();
+    }
+  });
+
   function dispatchTransport(action: TransportKeyAction) {
     transportControls?.handleKeyAction(action);
   }
@@ -107,6 +139,57 @@
     }
   }
 
+  function resetControlsTimer() {
+    if (controlsHideTimer) clearTimeout(controlsHideTimer);
+    showPlayerControls = true;
+    if (session.isPlaying) {
+      controlsHideTimer = setTimeout(() => {
+        showPlayerControls = false;
+      }, CONTROLS_HIDE_DELAY);
+    }
+  }
+
+  function resetToolbarTimer() {
+    if (toolbarHideTimer) clearTimeout(toolbarHideTimer);
+    showToolbar = true;
+    if (session.isPlaying) {
+      toolbarHideTimer = setTimeout(() => {
+        showToolbar = false;
+      }, CONTROLS_HIDE_DELAY);
+    }
+  }
+
+  function handlePlayerMouseMove(e: MouseEvent) {
+    if (!isPlayerMode) return;
+
+    // Controls: show on any mouse movement over the video area
+    resetControlsTimer();
+
+    // Toolbar: show when near top edge
+    if (e.clientY < TOOLBAR_PROXIMITY) {
+      resetToolbarTimer();
+    }
+
+    // Timeline: show when near bottom edge
+    const windowH = window.innerHeight;
+    showPlayerTimeline = e.clientY > windowH - TIMELINE_PROXIMITY;
+  }
+
+  function toggleMode() {
+    const next = preferences.appMode === 'clipper' ? 'player' : 'clipper';
+    setAppMode(next);
+    // When entering Player mode, show controls initially
+    if (next === 'player') {
+      showPlayerControls = true;
+      showToolbar = true;
+      resetControlsTimer();
+    }
+  }
+
+  function handleToggleCaptions() {
+    captionsEnabled = !captionsEnabled;
+  }
+
   function handleGlobalKeydown(e: KeyboardEvent) {
     const target = e.target as HTMLElement;
     if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
@@ -132,15 +215,41 @@
         e.preventDefault();
         dispatchTransport(e.shiftKey ? 'seek-forward-1' : 'seek-forward-5');
         break;
+      case 'p':
+      case 'P':
+        e.preventDefault();
+        setAppMode('player');
+        if (preferences.appMode !== 'player') {
+          showPlayerControls = true;
+          showToolbar = true;
+          resetControlsTimer();
+        }
+        break;
+      case 'c':
+      case 'C':
+        e.preventDefault();
+        setAppMode('clipper');
+        break;
+      case 'f':
+      case 'F':
+        if (isPlayerMode) {
+          e.preventDefault();
+          toggleFullscreen();
+        }
+        break;
       case 'i':
       case 'I':
+        if (!isPlayerMode) {
           e.preventDefault();
           dispatchTransport('mark-in');
+        }
         break;
       case 'o':
       case 'O':
+        if (!isPlayerMode) {
           e.preventDefault();
           dispatchTransport('mark-out');
+        }
         break;
       case 'j':
       case 'J':
@@ -159,9 +268,11 @@
         break;
       case 'Delete':
       case 'Backspace': {
+        if (!isPlayerMode) {
           e.preventDefault();
           const selectedId = getSelectedClipId();
           if (selectedId) removeClip(selectedId);
+        }
         break;
       }
       case 'a':
@@ -170,7 +281,7 @@
         }
         break;
       case 'e':
-        if (e.metaKey) {
+        if (e.metaKey && !isPlayerMode) {
           e.preventDefault();
           showExportDialog = true;
         }
@@ -192,6 +303,7 @@
   onmousemove={(e) => {
     handleResizeMove(e);
     handleSidebarResizeMove(e);
+    handlePlayerMouseMove(e);
   }}
   onmouseup={() => {
     handleResizeEnd();
@@ -222,9 +334,17 @@
   <ProcessingModal />
 {/if}
 
-<div class="app-shell">
+<div class="app-shell" class:player-mode={isPlayerMode}>
-  <header class="toolbar">
+  <header class="toolbar" class:auto-hide={isPlayerMode} class:toolbar-visible={isPlayerMode && showToolbar} class:toolbar-hidden={isPlayerMode && !showToolbar}>
     <UrlInput />
+    <button
+      class="mode-btn"
+      onclick={toggleMode}
+      title={isPlayerMode ? 'Switch to Clipper (C)' : 'Switch to Player (P)'}
+    >
+      {isPlayerMode ? 'Player' : 'Clipper'}
+    </button>
+    {#if !isPlayerMode}
       <button
         class="layout-btn"
         onclick={toggleClipListPosition}
@@ -234,11 +354,13 @@
       >
         {preferences.clipListPosition === 'bottom' ? '⬒' : '⬓'}
       </button>
+    {/if}
     <button class="about-btn" onclick={() => (showAboutDialog = true)} title="About">ℹ</button>
     <button class="prefs-btn" onclick={() => (showPreferences = true)} title="Preferences">⚙</button>
   </header>
 
-  <main class="content" class:layout-left={isLeft} style:--sidebar-width="{preferences.clipListWidth}px">
+  <main class="content" class:player-mode={isPlayerMode} class:layout-left={!isPlayerMode && isLeft} style:--sidebar-width="{preferences.clipListWidth}px">
+    {#if !isPlayerMode}
       <!-- Sidebar clip list: visible only in left mode -->
       <div class="sidebar-area" class:hidden={!isLeft}>
         <ClipList onExport={() => (showExportDialog = true)} position="left" />
@@ -271,13 +393,26 @@
           }
         }}
       ></div>
+    {/if}
 
-    <!-- Video + Transport: always rendered, never destroyed -->
+    <!-- Video area: always mounted, never destroyed -->
-    <div class="video-area">
+    <div class="video-area" class:player-video={isPlayerMode}>
       <VideoPlayer />
+      {#if isPlayerMode}
+        <PlayerControls
+          visible={showPlayerControls}
+          {captionsEnabled}
+          hasCaptions={session.hasCaptions || false}
+          onToggleCaptions={handleToggleCaptions}
+          onOpenCaptionSettings={() => {}}
+        />
+        <PlayerTimeline visible={showPlayerTimeline || !session.isPlaying} />
+      {:else}
         <TransportControls bind:this={transportControls} />
+      {/if}
     </div>
 
+    {#if !isPlayerMode}
       <!-- Timeline section: always full width -->
       <div class="lower-section">
         <div
@@ -310,6 +445,7 @@
       <div class="bottom-cliplist" class:hidden={isLeft}>
         <ClipList onExport={() => (showExportDialog = true)} />
       </div>
+    {/if}
   </main>
 
   <StatusBar onOpenAbout={() => (showAboutDialog = true)} />
@@ -422,6 +558,49 @@
     background: var(--accent, #89b4fa);
   }
 
+  /* --- Mode toggle button --- */
+  .mode-btn {
+    font-size: 12px;
+    padding: 4px 10px;
+    border-radius: 10px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+  }
+
+  /* --- Player mode layout --- */
+  .content.player-mode {
+    grid-template-areas: "video";
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+
+  .player-video {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* --- Toolbar auto-hide --- */
+  .toolbar.auto-hide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 30;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .toolbar.toolbar-hidden {
+    opacity: 0;
+    transform: translateY(-100%);
+    pointer-events: none;
+  }
+
+  .toolbar.toolbar-visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
   .layout-btn {
     font-size: 16px;
     padding: 4px 8px;

src/app.css

@@ -37,6 +37,11 @@ body {
   height: 100vh;
 }
 
+/* Player mode: app shell becomes relative for overlay positioning */
+.app-shell.player-mode {
+  position: relative;
+}
+
 button {
   cursor: pointer;
   border: none;