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 98011cf604
commit 715c3c713a
9 changed files with 660 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/styles/player.css
View File

@@ -246,3 +246,58 @@ video::cue{
.vol:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 1px 4px rgba(0,0,0,.25);}
.seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 2px 6px rgba(0,0,0,.30);}
.vol:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 1px 4px rgba(0,0,0,.25);}
/* Mute button */
.volMuteBtn{border:none; background:transparent; padding:0; margin:0; cursor:pointer; display:flex; align-items:center; justify-content:center; width:14px; height:14px; flex:0 0 auto;}
.volMuteBtn .fa{font-size:14px; color:var(--iconStrong)!important; opacity:.95; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
.volMuteBtn:hover .fa{transform:scale(1.15); opacity:1;}
.volMuteBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:2px; border-radius:3px;}
.miniCtl.muted{opacity:.5;}
.miniCtl.muted .volFill{opacity:.3;}
/* Seek feedback overlay */
.seekFeedback{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
font-family:var(--mono);
font-size:28px;
font-weight:700;
color:#fff;
text-shadow:0 2px 8px rgba(0,0,0,.7);
opacity:0;
transition:opacity .15s ease;
pointer-events:none;
z-index:6;
}
.seekFeedback.show{opacity:1;}
/* Error overlay */
.errorOverlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:16px;
background:rgba(15,17,23,.88);
z-index:10;
}
.errorOverlay>.fa{font-size:42px; color:rgba(255,180,100,.85);}
.errorMsg{font-size:14px; color:rgba(218,225,240,.85); text-align:center; line-height:1.5; max-width:320px;}
.errorNextBtn{
border:none;
background:var(--surface-3);
color:var(--text);
padding:10px 20px;
border-radius:var(--r2);
font-size:13px;
font-weight:600;
cursor:pointer;
min-width:44px;
min-height:44px;
transition:background .2s ease;
}
.errorNextBtn:hover{background:var(--surface-4);}
.errorNextBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:2px;}