josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify transport controls with themed SVG symbols and accessible playback states

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-09 15:54:22 +08:00
parent 0a5b113ebe
commit 9a37715da4
19 changed files with 180 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/index.html
View File

@@ -42,12 +42,12 @@
<!-- Sidebar -->
<aside id="sidebar" class="sidebar">
<div class="brand">
<span class="brand-mark">▶</span> YT Player
<span class="brand-mark"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></span> YT Player
</div>
<nav class="nav">
<button class="nav-item active" data-view="search"><span class="legacy-nav-icon" aria-hidden="true">🔍</span><svg class="classic-nav-icon" hidden viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></svg> Search</button>
<button class="nav-item" data-view="queue"><span class="legacy-nav-icon" aria-hidden="true">▶</span><svg class="classic-nav-icon" hidden viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z"/></svg> Queue <span id="navQueueCount" class="nav-badge hidden">0</span></button>
<button class="nav-item" data-view="queue"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg> Queue <span id="navQueueCount" class="nav-badge hidden">0</span></button>
<button class="nav-item" data-view="history"><span class="legacy-nav-icon" aria-hidden="true">🕘</span><svg class="classic-nav-icon" hidden viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> History</button>
<button class="nav-item" data-view="saved"><svg class="media-icon media-nav-icon" data-media-icon="offline" viewBox="0 0 24 24" aria-hidden="true"><use href="#media-offline"/></svg> Saved</button>
<button class="nav-item" data-view="downloads"><svg class="media-icon media-nav-icon" data-media-icon="download" viewBox="0 0 24 24" aria-hidden="true"><use href="#media-download"/></svg> Downloads <span id="navDlCount" class="nav-badge hidden">0</span></button>
@@ -140,7 +140,7 @@
</div>
<div id="playerPlaceholder" class="player-placeholder">
<div class="hero">
<div class="ph-logo">▶</div>
<div class="ph-logo"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></div>
<h1 class="hero-title">YT Player</h1>
<p class="hero-tagline">Ad-free YouTube — no login needed. Search, play, and discover videos shaped by what you listen to.</p>
<div class="hero-pills">
@@ -178,9 +178,9 @@
</div>
</div>
<div class="stg-mid">
<button id="stgBack" class="stg-skip" type="button" aria-label="Back 10 seconds"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 3-6.2M4 4v4.5h4.5"/><text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">10</text></svg></button>
<button id="stgPlay" class="stg-play" type="button" aria-label="Play or pause"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M9 5.5v13l10-6.5z"/></svg></button>
<button id="stgFwd" class="stg-skip" type="button" aria-label="Forward 10 seconds"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-3-6.2M20 4v4.5h-4.5"/><text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">10</text></svg></button>
<button id="stgBack" class="stg-skip" type="button" aria-label="Back 10 seconds"><svg class="transport-icon" data-transport-icon="back10" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-back10"/></svg></button>
<button id="stgPlay" class="stg-play" type="button" aria-label="Play or pause"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></button>
<button id="stgFwd" class="stg-skip" type="button" aria-label="Forward 10 seconds"><svg class="transport-icon" data-transport-icon="forward10" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-forward10"/></svg></button>
</div>
<div class="stg-bot"><span class="stg-chip"><b id="stgZoom">Pinch 1.0×</b></span><span class="stg-chip"><i class="stg-dot"></i><b id="stgBuf">Buffered</b></span></div>
</div>
@@ -207,11 +207,11 @@
</div>
<button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
<div class="deck-main">
<button id="prevBtn" class="ctrl" title="Previous" aria-label="Previous"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><rect x="5" y="5" width="2.8" height="14" rx="1.2"/><path d="M19 5.5v13L9.5 12z"/></svg></button>
<button id="back10Btn" class="ctrl skip10" type="button" title="Back 10 seconds" aria-label="Back 10 seconds"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 3-6.2M4 4v4.5h4.5"/><text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">10</text></svg></button>
<button id="playBtn" class="ctrl play" title="Play/Pause" aria-label="Play or pause"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M9 5.5v13l10-6.5z"/></svg></button>
<button id="fwd10Btn" class="ctrl skip10" type="button" title="Forward 10 seconds" aria-label="Forward 10 seconds"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-3-6.2M20 4v4.5h-4.5"/><text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">10</text></svg></button>
<button id="nextBtn" class="ctrl" title="Next" aria-label="Next"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><rect x="16.2" y="5" width="2.8" height="14" rx="1.2"/><path d="M5 5.5v13l9.5-6.5z"/></svg></button>
<button id="prevBtn" class="ctrl" title="Previous" aria-label="Previous"><svg class="transport-icon" data-transport-icon="previous" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-previous"/></svg></button>
<button id="back10Btn" class="ctrl skip10" type="button" title="Back 10 seconds" aria-label="Back 10 seconds"><svg class="transport-icon" data-transport-icon="back10" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-back10"/></svg></button>
<button id="playBtn" class="ctrl play" title="Play/Pause" aria-label="Play or pause"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></button>
<button id="fwd10Btn" class="ctrl skip10" type="button" title="Forward 10 seconds" aria-label="Forward 10 seconds"><svg class="transport-icon" data-transport-icon="forward10" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-forward10"/></svg></button>
<button id="nextBtn" class="ctrl" title="Next" aria-label="Next"><svg class="transport-icon" data-transport-icon="next" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-next"/></svg></button>
<div id="dkModeHost" hidden><button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)" aria-label="Shuffle"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/></svg></button><button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)" aria-label="Repeat list"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 2l4 4-4 4M3 12v-2a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 12v2a4 4 0 0 1-4 4H3"/></svg></button><button id="loopBtn" class="ctrl" title="Loop this video (L)"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 2l4 4-4 4M3 12v-2a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 12v2a4 4 0 0 1-4 4H3M11 10.2l1.6-.9v5.4"/></svg></button></div>
</div>
<div class="deck-vol vol">
@@ -473,9 +473,9 @@
<span id="serviceCurTime">0:00</span> / <span id="serviceDurTime">0:00</span>
</div>
<div class="service-controls">
<button id="servicePrevBtn" class="service-btn" type="button" aria-label="Previous track">⏮</button>
<button id="servicePlayBtn" class="service-btn service-btn-play" type="button" aria-label="Play or Pause">▶</button>
<button id="serviceNextBtn" class="service-btn" type="button" aria-label="Next track">⏭</button>
<button id="servicePrevBtn" class="service-btn" type="button" aria-label="Previous track"><svg class="transport-icon" data-transport-icon="previous" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-previous"/></svg></button>
<button id="servicePlayBtn" class="service-btn service-btn-play" type="button" aria-label="Play or Pause"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></button>
<button id="serviceNextBtn" class="service-btn" type="button" aria-label="Next track"><svg class="transport-icon" data-transport-icon="next" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-next"/></svg></button>
</div>
</div>
</section>
@@ -490,7 +490,7 @@
<!-- Mini now-playing bar -->
<div id="miniBar" class="mini-bar hidden">
<div class="mini-bar-inner">
<button id="miniPlayBtn" class="mini-btn">▶</button>
<button id="miniPlayBtn" class="mini-btn" aria-label="Play"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></button>
<div class="mini-info">
<div id="miniTitle" class="mini-title"></div>
<div id="miniChannel" class="mini-channel"></div>
@@ -567,9 +567,9 @@
<div class="rv-times"><span id="rvCur">0:00</span><span id="rvDur">0:00</span></div>
</div>
<div class="rv-transport">
<button id="rvPrev" class="rv-tbtn" type="button" aria-label="Previous">⏮</button>
<button id="rvToggle" class="rv-tbtn rv-play" type="button" aria-label="Play or pause">▶</button>
<button id="rvNext" class="rv-tbtn" type="button" aria-label="Next">⏭</button>
<button id="rvPrev" class="rv-tbtn" type="button" aria-label="Previous"><svg class="transport-icon" data-transport-icon="previous" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-previous"/></svg></button>
<button id="rvToggle" class="rv-tbtn rv-play" type="button" aria-label="Play or pause"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></button>
<button id="rvNext" class="rv-tbtn" type="button" aria-label="Next"><svg class="transport-icon" data-transport-icon="next" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-next"/></svg></button>
</div>
<div class="rv-volume">
<span>🔊</span><input id="rvVolume" type="range" min="0" max="100" value="100" /><span id="rvVolVal">100%</span>
@@ -591,7 +591,7 @@
<span class="bottom-nav-label">Search</span>
</button>
<button class="bottom-nav-btn" data-view="queue" aria-label="Queue">
<span class="bottom-nav-icon"><span class="legacy-nav-icon" aria-hidden="true">▶</span><svg class="classic-nav-icon" hidden viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z"/></svg></span>
<span class="bottom-nav-icon"><svg class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-play"/></svg></span>
<span class="bottom-nav-label">Queue</span>
<span id="bnQueueCount" class="bottom-nav-badge hidden">0</span>
</button>