feat: v0.2.1 — Player controls polish, screenshot capture, quit shortcut

v0.2.0 introduced Player mode with floating controls, auto-hide UI,
PiP, fullscreen, JKL shuttle, speed selector, captions, and cut-clip.

v0.2.1 builds on that with extensive UI polish and new features:

Player Controls Polish:
- Enlarged center playback icons (Play 48, Rewind/FF 36) with filled SVGs
- Moved Cut Clip scissors into center group with hidden cut-before button
- Narrowed floating panel from 70% to 60% width
- Custom-styled volume slider matching seek bar (linear-gradient fill)
- Pure opacity fade animation (0.35s) replacing slide-in
- Tinted panel background (rgba(53,54,80,0.75)) visible on black canvas
- Drop shadow on center transport controls
- Scissors buttons dimmed via color (not opacity) with single-property transitions
- ScissorsLineDashed icon for cut-before variant
- Timestamps in single seek row (time | bar | duration) with sans-serif font
- Milliseconds shown at smaller size, revealed on hover

Screenshot Capture (S / Shift+S):
- Canvas compositing at native video resolution with optional caption burn-in
- Caption rendering matches CSS preview (font, background, outline, word highlight)
- New Rust save_screenshot command using existing filename pattern
- Output: {title} - {ms}ms-screenshot.png
- crossorigin=anonymous on video element for untainted canvas

Other:
- Q keyboard shortcut to quit via Tauri process plugin
- formatTimeParts() utility for split timestamp rendering
- Updated About dialog shortcuts list
- Version bump to 0.2.1

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

src/lib/components/PlayerControls.svelte

@@ -16,7 +16,7 @@
     setPlaybackRate,
     getPlaybackRate,
   } from '$lib/transport/playback';
-  import { formatTime } from '$lib/utils/time';
+  import { formatTime, formatTimeParts } from '$lib/utils/time';
   import {
     VolumeX,
     Volume1,
@@ -26,6 +26,7 @@
     Pause,
     Play,
     Scissors,
+    ScissorsLineDashed,
     Captions,
     PictureInPicture2,
     Maximize,
@@ -65,6 +66,13 @@
     session.duration > 0 ? session.currentTime / session.duration : 0
   );
 
+  let currentParts = $derived(formatTimeParts(session.currentTime));
+  let durationParts = $derived(formatTimeParts(session.duration));
+
+  let volumePercent = $derived(
+    ((isMuted ? 0 : volume) * 100).toFixed(1)
+  );
+
   function handleSeekBarMouseDown(e: MouseEvent) {
     isSeeking = true;
     seekFromMouseEvent(e);
@@ -185,29 +193,42 @@
             step="0.05"
             value={isMuted ? 0 : volume}
             oninput={handleVolumeChange}
+            style="background: linear-gradient(to right, var(--accent, #89b4fa) {volumePercent}%, rgba(255,255,255,0.2) {volumePercent}%)"
           />
         </div>
 
         <!-- Center group: playback -->
         <div class="controls-group center">
+          <button
+            class="ctrl-btn scissors-btn cut-before-btn"
+            onclick={() => onCutClip('before')}
+            title="Cut clip 10s before playhead (Z)"
+            type="button"
+          ><ScissorsLineDashed size={36} /></button>
           <button
             class="ctrl-btn"
             onclick={() => seekBy(-10)}
             title="Skip back 10s"
             type="button"
-          ><Rewind size={24} /></button>
+          ><Rewind size={36} /></button>
           <button
             class="ctrl-btn play-btn"
             onclick={togglePlayPause}
             title={session.isPlaying ? 'Pause' : 'Play'}
             type="button"
-          >{#if session.isPlaying}<Pause size={27} />{:else}<Play size={27} />{/if}</button>
+          >{#if session.isPlaying}<Pause size={48} />{:else}<Play size={48} />{/if}</button>
           <button
             class="ctrl-btn"
             onclick={() => seekBy(10)}
             title="Skip forward 10s"
             type="button"
-          ><FastForward size={24} /></button>
+          ><FastForward size={36} /></button>
+          <button
+            class="ctrl-btn scissors-btn"
+            onclick={() => onCutClip('at')}
+            title="Cut clip at playhead (X)"
+            type="button"
+          ><Scissors size={36} /></button>
         </div>
 
         <!-- Right group: settings -->
@@ -228,14 +249,6 @@
             {/if}
           </div>
 
-          <button
-            class="ctrl-btn"
-            onclick={() => onCutClip('at')}
-            oncontextmenu={(e) => { e.preventDefault(); onCutClip('before'); }}
-            title="Cut clip at playhead (X) · Right-click: 10s before (Z)"
-            type="button"
-          ><Scissors size={16} /></button>
-
           {#if hasCaptions}
             <button
               class="ctrl-btn"
@@ -265,36 +278,34 @@
         </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)}
+      <!-- Seek row: timestamp | seek bar | duration -->
+      <div class="seek-row">
+        <span class="time-display time-current">{currentParts.main}<span class="time-ms">{currentParts.ms}</span></span>
+        <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}
-      </div>
-
-      <!-- Timestamps (bottom) -->
-      <div class="timestamps-row">
-        <span class="time-display">{formatTime(session.currentTime)}</span>
-        <span class="time-display">{formatTime(session.duration)}</span>
+          {#if hoverTime !== null}
+            <div class="seek-tooltip" style="left: {hoverX}px">
+              {formatTime(hoverTime)}
+            </div>
+          {/if}
+        </div>
+        <span class="time-display time-duration">{durationParts.main}</span>
       </div>
     </div>
   </div>
@@ -305,8 +316,8 @@
   .player-controls-overlay {
     position: absolute;
     bottom: 84px;
-    left: 15%;
-    right: 15%;
+    left: 20%;
+    right: 20%;
     pointer-events: none;
     z-index: 20;
   }
@@ -322,42 +333,45 @@
     padding: 12px 16px;
   }
 
-  /* Blur background — visibility toggle, never opacity-transition */
+  /* Blur background — fades in/out with content */
   .player-controls-panel::before {
     content: '';
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.75);
+    background: rgba(53, 54, 80, 0.75);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: 12px;
     z-index: -1;
+    opacity: 0;
     visibility: hidden;
+    transition: opacity 0.35s ease, visibility 0s 0.35s;
   }
 
   .player-controls-overlay.visible .player-controls-panel::before {
+    opacity: 1;
     visibility: visible;
+    transition: opacity 0.35s ease, visibility 0s 0s;
   }
 
-  /* Content wrapper — fade + slide animation */
+  /* Content wrapper — pure opacity fade */
   .panel-content {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 8px;
     opacity: 0;
-    transform: translateY(6px);
-    transition: opacity 0.2s ease, transform 0.2s ease;
+    transition: opacity 0.35s ease;
   }
 
   .player-controls-overlay.visible .panel-content {
     opacity: 1;
-    transform: translateY(0);
   }
 
   /* --- Seek bar --- */
   .seek-bar {
-    width: 100%;
+    flex: 1;
+    min-width: 0;
     height: 20px;
     cursor: pointer;
     position: relative;
@@ -420,13 +434,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: 6px;
   }
 
   .controls-group {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
   }
 
   .controls-group.left {
@@ -436,6 +450,13 @@
 
   .controls-group.center {
     flex: 0 0 auto;
+    opacity: 0.9;
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
+  }
+
+  /* Fill center transport icons (rewind, play/pause, forward) but not scissors */
+  .controls-group.center > .ctrl-btn:not(.scissors-btn):not(.cut-before-btn) :global(svg) {
+    fill: currentColor;
   }
 
   .controls-group.right {
@@ -470,29 +491,86 @@
   }
 
   .ctrl-btn.play-btn {
-    min-width: 48px;
+    min-width: 72px;
   }
 
-  /* --- Volume --- */
+  /* Scissors buttons — dimmed via color, single-property transition */
+  .scissors-btn {
+    color: rgba(205, 214, 244, 0.5);
+  }
+
+  .scissors-btn:hover {
+    color: var(--accent, #89b4fa);
+  }
+
+  /* Cut-before: invisible by default, dimmed on self-hover */
+  .cut-before-btn {
+    color: transparent;
+  }
+
+  .cut-before-btn:hover {
+    color: rgba(205, 214, 244, 0.5);
+  }
+
+  /* --- Volume slider (custom styled to match seek bar) --- */
   .vol-slider {
+    -webkit-appearance: none;
+    appearance: none;
     width: 70px;
     height: 4px;
-    accent-color: var(--accent, #89b4fa);
+    border-radius: 2px;
+    outline: none;
     cursor: pointer;
   }
 
+  .vol-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--accent, #89b4fa);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .vol-slider:hover::-webkit-slider-thumb {
+    opacity: 1;
+  }
+
   /* --- Time --- */
   .time-display {
-    font-family: var(--font-mono, monospace);
-    font-size: 13px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    font-size: 14px;
     color: var(--text-secondary, #a6adc8);
     white-space: nowrap;
   }
 
-  .timestamps-row {
+  .time-current {
+    min-width: 5.5ch;
+    text-align: left;
+  }
+
+  .time-duration {
+    min-width: 5.5ch;
+    text-align: right;
+  }
+
+  .time-ms {
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .seek-row:hover .time-ms {
+    opacity: 1;
+  }
+
+  /* --- Seek row: single-line timestamp | bar | duration --- */
+  .seek-row {
     display: flex;
-    justify-content: space-between;
-    padding: 0 4px;
+    align-items: center;
+    gap: 10px;
   }
 
   /* --- Speed wrapper --- */