cottongin
c1de18715e
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>
2.5 KiB
2.5 KiB
v0.2.1 Fixes: Blur, Icon Sizing, Timeline Zoom
Task Description
Three fixes for the v0.2.1 release: (1) fix the backdrop blur pop-in animation in Player mode floating controls, raise controls another 20px; (2) enlarge center playback icons by 50%; (3) zoom timeline to clip region when using cut-clip from Player mode.
Changes Made
Commits
-
f6ad41f—fix: blur via visibility (no opacity), raise to 84px, enlarge center icons 50%src/lib/components/PlayerControls.svelte:- Blur fix: Restructured CSS so the overlay no longer transitions
opacityat all. The::beforeblur pseudo-element usesvisibility: hidden/visible(instant toggle, alwaysopacity: 1when visible) so WebKit never has to compositebackdrop-filterduring an opacity transition. A new.panel-contentwrapper handles the fade+slide animation (opacity 0->1,translateY(6px)->0) independently. - Position:
bottom: 64px->bottom: 84px - Icon sizes: Play/Pause
size={18}->size={27}, Rewind/FastForwardsize={16}->size={24}, play buttonmin-width: 40px->48px
- Blur fix: Restructured CSS so the overlay no longer transitions
-
619fe59—feat: timeline zooms to clip region on cut-clip from Player modesrc/lib/components/Timeline.svelte: AddedzoomRegionandonZoomAppliedoptional props. Added a second$effect(after the duration-reset effect) that zooms to the given region with 20% padding (min 2s) on each side.src/App.svelte: AddedpendingTimelineZoomstate.cutClip()sets it to the created clip's range before switching to Clipper mode. PassedzoomRegion={pendingTimelineZoom}andonZoomAppliedcallback to<Timeline>.
Test Results
- 69/69 tests passing, svelte-check 0 errors/0 warnings
Lessons Learned
- WebKit
backdrop-filter+opacitycompositing: The::beforepseudo-element approach from the previous attempt still failed because ANY opacity transition (even on the pseudo-element itself, not just ancestors) prevents WebKit from compositingbackdrop-filterduring the animation. The only reliable fix is to NEVER transition opacity on the element that hasbackdrop-filter. Usevisibility: hidden/visiblefor instant show/hide of the blur layer, and animate content separately. - Svelte 5
$effectordering: When two effects run on mount, the one declared later wins for overlapping state mutations. This is leveraged for the timeline zoom — the duration-reset effect runs first (sets full view), then the zoom effect runs second and overrides ifzoomRegionis set.