feat: add 15 UI enhancements

1. Mute toggle (M key + volume icon click)
2. Fullscreen shortcut (F key)
3. Seek feedback overlay (±5s flash with accumulation)
4. Playlist search/filter with clear button
5. Scroll-to-current button (IntersectionObserver)
6. Picture-in-Picture button
7. Timestamp insertion in notes
8. Keyboard shortcut help panel (? key)
9. Playback speed shortcuts ([ and ] keys)
10. Reset progress two-click confirmation
11. Video load error state overlay
12. Double-click video to fullscreen
13. Playlist stats in header (count + done)
14. Mini progress bars per playlist item
15. Collapsible dock panes with chevron icons

All enhancements are WCAG 2.2 AAA compliant with proper
aria-labels, aria-live regions, focus-visible states,
keyboard accessibility, and 44x44 touch targets.
This commit is contained in:
Your Name
2026-02-19 17:01:01 +02:00
parent 0054654fee
commit e0059fd3d5
9 changed files with 660 additions and 22 deletions

View File

@@ -169,3 +169,24 @@ dl.kv dt,dl.kv dd{margin:0; padding:0;}
}
.dockDivider:hover::after{opacity:.50; height:60px;}
.dockDivider:active::after{opacity:.65;}
/* Timestamp button */
.timestampBtn{border:none; background:transparent; padding:0; margin:0 0 0 auto; cursor:pointer; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r3); transition:all .2s var(--ease-bounce);}
.timestampBtn:hover{background:var(--surface-3); transform:scale(1.1);}
.timestampBtn:active{transform:scale(.9); transition-duration:.08s;}
.timestampBtn .fa{font-size:12px; color:var(--iconStrong)!important; opacity:.75; transition:opacity .15s ease;}
.timestampBtn:hover .fa{opacity:1;}
.timestampBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:1px;}
/* Dock chevron */
.dockChevron{font-size:10px; color:var(--textDim); transition:transform .25s var(--ease-bounce), color .2s ease; margin-left:4px; flex:0 0 auto;}
.dockHeader:hover .dockChevron{color:var(--textMuted);}
/* Collapsible dock pane */
.dockPane.collapsed{flex:0 0 auto !important;}
.dockPane.collapsed .notesArea,
.dockPane.collapsed .infoGrid{display:none;}
/* Reset confirm state */
.toolbarBtn.confirming{background:rgba(255,70,70,.14);}
.toolbarBtn.confirming .fa{color:rgba(255,160,100,.9)!important;}