45 lines
2.8 KiB
Markdown
45 lines
2.8 KiB
Markdown
|
# 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.
|