29 lines
2.5 KiB
Markdown
29 lines
2.5 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
1. **`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 `opacity` at all. The `::before` blur pseudo-element uses `visibility: hidden/visible` (instant toggle, always `opacity: 1` when visible) so WebKit never has to composite `backdrop-filter` during an opacity transition. A new `.panel-content` wrapper 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/FastForward `size={16}` -> `size={24}`, play button `min-width: 40px` -> `48px`
|
||
|
|
|
||
|
|
2. **`619fe59`** — `feat: timeline zooms to clip region on cut-clip from Player mode`
|
||
|
|
- `src/lib/components/Timeline.svelte`: Added `zoomRegion` and `onZoomApplied` optional 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`: Added `pendingTimelineZoom` state. `cutClip()` sets it to the created clip's range before switching to Clipper mode. Passed `zoomRegion={pendingTimelineZoom}` and `onZoomApplied` callback to `<Timeline>`.
|
||
|
|
|
||
|
|
## Test Results
|
||
|
|
|
||
|
|
- 69/69 tests passing, svelte-check 0 errors/0 warnings
|
||
|
|
|
||
|
|
## Lessons Learned
|
||
|
|
|
||
|
|
- **WebKit `backdrop-filter` + `opacity` compositing**: The `::before` pseudo-element approach from the previous attempt still failed because ANY opacity transition (even on the pseudo-element itself, not just ancestors) prevents WebKit from compositing `backdrop-filter` during the animation. The only reliable fix is to NEVER transition opacity on the element that has `backdrop-filter`. Use `visibility: hidden/visible` for instant show/hide of the blur layer, and animate content separately.
|
||
|
|
- **Svelte 5 `$effect` ordering**: 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 if `zoomRegion` is set.
|