Perf/gpu timeline slider#1728
Conversation
Use transform: scaleX() for the fill bar and translateX() for the thumb instead of modifying width/left properties, avoiding layout recalculations on every frame during playback.
The useLyricsElapsedTime composable was running a 60fps rAF loop whenever music was playing, even when the fullscreen player was hidden. Gate it behind an enabled ref that requires both the fullscreen player to be open and the lyrics panel to be active.
- Add role="slider", ARIA attributes, and tabindex for accessibility - Add keyboard navigation (Arrow 1%, Shift+Arrow/PageUp/PageDown 10%, Home/End) - Replace pixel-based thumbX with percentage-based left positioning (resize-safe) - Use CSS custom properties (--v-theme-on-surface) instead of hardcoded white - Replace JS useTheme() with --timeline-color CSS variable for fill/thumb color Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ider Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…time Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Clicking the footer captures focus. Arrow Up/Down controls volume, Left/Right seeks track, Space toggles play/pause. Seek keys support Shift, PageUp/PageDown, and Home/End with debounced seeking. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This reverts commit fe032f0b6124e00c6e03cfd20872820962939018.
|
Could you please make sure that all the paddings etc are exactly the same. Just fire up two tabs, one pointing to :3000 and one pointing to :8095. Both the home screen and the fullscreen mode show a lot of padding differences. It's hard to show in a screenshot but when you switch tabs side by side, you will quickly notice it. |
Yeah I see what you mean. I also found a bug where if the element redraws it won't show the current position until an update. |
2 participants
This adds a progress-bar component that uses gpu compositing, which is good for the constantly updating timeline slider to reduce cpu usage.