cottongin/gui-video-clipper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
master
gui-video-clipper/chat-summaries/2026-09-23_07-56-player-controls-polish-round2-summary.md
cottongin c1de18715e 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>
2026-09-23 05:30:45 -04:00

2.8 KiB
Raw Permalink Blame History

Player Controls Polish — Round 2

Date: 2026-09-23 07:56 UTC
Task: Five UI polish changes to the floating PlayerControls panel

Changes Made

All changes in src/lib/components/PlayerControls.svelte.

1. Enlarged center playback icons by 50%

  • Play/Pause: 27 -> 40
  • Rewind/FastForward: 24 -> 36
  • .ctrl-btn.play-btn min-width: 48px -> 64px

2. Reorganized Cut Clip buttons into center group

  • Moved the "cut at playhead" Scissors button from the right settings group into the center playback group, placed after FastForward. Icon enlarged to 36 to match.
  • Added a new "cut before" Scissors button to the left of Rewind. It is hidden by default (width: 0; opacity: 0; pointer-events: none) and reveals on .controls-group.center:hover with a smooth transition. Appears at 0.7 opacity, full opacity on direct hover.
  • Removed the old Scissors button and its right-click handler from the right group.
  • New center group order: [Cut-before (hidden)] [Rewind] [Play/Pause] [FastForward] [Cut-at]

3. Narrowed floating panel by ~15%

  • Overlay insets changed from left: 15%; right: 15% (70% width) to left: 20%; right: 20% (60% width).

4. Restyled volume slider to match seek bar

  • Replaced native accent-color styling with appearance: none custom CSS.
  • Track uses transparent background with JS-driven linear-gradient inline style showing accent color for the filled portion and rgba(255,255,255,0.2) for the dormant portion.
  • Thumb is a 10px circle matching seek bar thumb, hidden by default and shown on hover.
  • Added volumePercent derived state to compute the gradient stop value.

5. Replaced slide animation with pure fade

  • Removed transform: translateY(6px) from .panel-content and its translateY(0) visible state.
  • Changed transition to opacity 0.35s ease only (was opacity 0.2s ease, transform 0.2s ease).
  • Blur ::before pseudo-element now fades with opacity 0.35s ease instead of instant visibility toggle. Uses visibility 0s 0.35s delay on hide and visibility 0s 0s on show to keep pointer-events correct while avoiding the flash.

Verification

  • svelte-check: 0 errors, 0 warnings
  • vitest run: 69 tests passed across 10 test files

Lessons Learned

  • WebKit's backdrop-filter still renders correctly with opacity transitions as long as the blur layer itself isn't being destroyed/recreated. The visibility + delayed transition pattern keeps the composited blur layer alive during fade.
  • Using linear-gradient as an inline style on range inputs is the cleanest way to show a filled/unfilled track without shadow DOM hacks, since WebKit's ::-webkit-slider-runnable-track doesn't support background in scoped Svelte styles as reliably.

Follow-up Items

  • None identified. Visual QA recommended to confirm feel of 0.35s fade timing and hidden cut-before button hover UX.
Reference in New Issue View Git Blame Copy Permalink