From 0f2a523cc2e41cd2f20892b72a85a6479e1af207 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:46:46 -0400
Subject: [PATCH] fix: QuickTime-style floating controls pill, speed selector,
 rate sync

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/lib/components/PlayerControls.svelte | 127 ++++++++++++-----------
 1 file changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/lib/components/PlayerControls.svelte b/src/lib/components/PlayerControls.svelte
index 906d94b..a3b2ac2 100644
--- a/src/lib/components/PlayerControls.svelte
+++ b/src/lib/components/PlayerControls.svelte
@@ -127,11 +127,12 @@
     onOpenCaptionSettings();
   }
 
-  // Sync PiP/fullscreen state periodically
+  // Sync PiP/fullscreen/rate state periodically
   $effect(() => {
     const interval = setInterval(() => {
       pipActive = isPiPActive();
       fullscreenActive = isFullscreenActive();
+      currentRate = getPlaybackRate();
     }, 500);
     return () => clearInterval(interval);
   });
@@ -149,56 +150,10 @@
   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 -->
+    <!-- Controls row (top) -->
     <div class="controls-row">
-      <!-- Left group: playback -->
+      <!-- Left group: volume -->
       <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}
@@ -218,13 +173,26 @@
         />
       </div>
 
-      <!-- Center group: time -->
+      <!-- Center group: playback -->
       <div class="controls-group center">
-        <span class="time-display">
-          {formatTime(session.currentTime)}
-          <span class="time-sep">/</span>
-          {formatTime(session.duration)}
-        </span>
+        <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>
       </div>
 
       <!-- Right group: settings -->
@@ -232,7 +200,7 @@
         <div class="speed-wrapper">
           <button
             class="ctrl-btn"
-            onclick={() => { showSpeedSelector = !showSpeedSelector; }}
+            onclick={(e) => { e.stopPropagation(); showSpeedSelector = !showSpeedSelector; }}
             title="Playback speed"
             type="button"
           >{currentRate}×</button>
@@ -273,15 +241,47 @@
         >{fullscreenActive ? '⤓' : '⛶'}</button>
       </div>
     </div>
+
+    <!-- Seek bar (middle) -->
+    <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>
+
+    <!-- Timestamps (bottom) -->
+    <div class="timestamps-row">
+      <span class="time-display">{formatTime(session.currentTime)}</span>
+      <span class="time-display">{formatTime(session.duration)}</span>
+    </div>
   </div>
 </div>
 
 <style>
   .player-controls-overlay {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    bottom: 24px;
+    left: 15%;
+    right: 15%;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.2s ease 0.1s;
@@ -297,7 +297,7 @@
     pointer-events: auto;
     background: rgba(0, 0, 0, 0.75);
     backdrop-filter: blur(8px);
-    border-radius: 12px 12px 0 0;
+    border-radius: 12px;
     padding: 12px 16px;
     display: flex;
     flex-direction: column;
@@ -439,9 +439,10 @@
     white-space: nowrap;
   }
 
-  .time-sep {
-    color: var(--text-muted, #6c7086);
-    margin: 0 3px;
+  .timestamps-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 4px;
   }
 
   /* --- Speed wrapper --- */