lashman/tutorialvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add 15 UI enhancements

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

75
src/styles/components.css
View File

@@ -147,3 +147,78 @@
.subsMenuItem:focus-visible{background:var(--surfaceHover); padding-left:16px; outline:none;}
.speedItem:focus-visible{background:var(--surfaceHover); padding-left:14px; outline:none;}
.dropItem:focus-visible{background:var(--surfaceHover); padding-left:16px; outline:none;}
/* Keyboard shortcut help dialog */
.shortcutHelp{
position:fixed;
inset:0;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
}
.shortcutHelpBackdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
}
.shortcutHelpPanel{
position:relative;
z-index:1;
padding:28px 32px;
border-radius:var(--r);
background:rgba(18,21,30,.97);
border:1px solid rgba(140,160,210,.12);
box-shadow:var(--shadow);
max-width:420px;
width:90%;
}
.shortcutHelpTitle{
font-family:var(--brand);
font-weight:700;
font-size:16px;
margin:0 0 20px;
color:rgba(235,240,252,.95);
letter-spacing:-.01em;
}
.shortcutGrid{
display:grid;
grid-template-columns:auto 1fr;
gap:10px 20px;
align-items:baseline;
}
.shortcutKey{
text-align:right;
white-space:nowrap;
}
.shortcutKey kbd{
display:inline-block;
padding:3px 8px;
border-radius:4px;
background:rgba(140,165,220,.08);
border:1px solid rgba(140,165,220,.12);
font-family:var(--mono);
font-size:12px;
color:rgba(200,212,238,.88);
line-height:1;
}
.shortcutDesc{
font-size:13px;
color:rgba(200,212,238,.78);
}
.shortcutHelpClose{
margin-top:20px;
text-align:center;
font-size:11px;
color:var(--textDim);
}
.shortcutHelpClose kbd{
display:inline-block;
padding:2px 6px;
border-radius:3px;
background:rgba(140,165,220,.06);
border:1px solid rgba(140,165,220,.10);
font-family:var(--mono);
font-size:11px;
color:rgba(170,182,210,.70);
}