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

Redesign playlist header, player deck, now-playing actions and lyrics panel layout

Browse Source
This commit is contained in:
Claude
2026-09-30 15:29:44 +00:00
parent 3fb1d29d5a
commit e64880c163
4 changed files with 351 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/index.html
View File

@@ -22,6 +22,7 @@
<link rel="stylesheet" href="fonts/fonts.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="service-ui.css" />
<link rel="stylesheet" href="refresh.css" />
</head>
<body>
<div class="app">
@@ -169,47 +170,53 @@
<span id="durTime" class="time">0:00</span>
</div>
<button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
<div class="btn-row">
<button id="prevBtn" class="ctrl" title="Previous">⏮</button>
<button id="playBtn" class="ctrl play" title="Play/Pause">▶</button>
<button id="nextBtn" class="ctrl" title="Next">⏭</button>
<button id="abABtn" class="ctrl ab-ctrl" title="Set A-B loop start [A]">A</button>
<button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button>
<button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button>
<button id="rememberPosBtn" class="ctrl" title="Remember playback position for this song (per playlist)">📍</button>
<div class="vol">
<button id="muteBtn" class="ctrl" title="Mute">🔊</button>
<input id="volume" type="range" min="0" max="1" step="0.01" value="1" />
<div class="deck-main">
<button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)" aria-label="Shuffle">🔀</button>
<button id="prevBtn" class="ctrl" title="Previous" aria-label="Previous">⏮</button>
<button id="playBtn" class="ctrl play" title="Play/Pause" aria-label="Play or pause">▶</button>
<button id="nextBtn" class="ctrl" title="Next" aria-label="Next">⏭</button>
<button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)" aria-label="Repeat list">🔁</button>
</div>
<div class="deck-vol vol">
<button id="muteBtn" class="ctrl" title="Mute" aria-label="Mute">🔊</button>
<input id="volume" type="range" min="0" max="1" step="0.01" value="1" aria-label="Volume" />
</div>
<div class="deck-groups">
<div class="dk-group">
<div class="dk-title">Practice</div>
<div class="dk-tiles">
<button id="abABtn" class="ctrl ab-ctrl" title="Set A-B loop start [A]">A</button>
<button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button>
<button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button>
<button id="rememberPosBtn" class="ctrl" title="Remember playback position for this song (per playlist)">📍</button>
<button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</button>
<label class="sel dk-sel">
<span>Speed</span>
<select id="speedSelect">
<option value="0.5">0.5×</option>
<option value="0.75">0.75×</option>
<option value="1" selected>1×</option>
<option value="1.25">1.25×</option>
<option value="1.5">1.5×</option>
<option value="2">2×</option>
</select>
</label>
</div>
</div>
<div class="dk-group">
<div class="dk-title">Sound &amp; view</div>
<div class="dk-tiles">
<button id="sleepTimerBtn" class="ctrl" title="Sleep timer">⏱</button>
<button id="transitionBtn" class="ctrl" title="Between songs in a playlist: Normal — click to change">↦</button>
<button id="eqBtn" class="ctrl" title="Equalizer (E)">🎚</button>
<button id="pipBtn" class="ctrl hidden" title="Picture-in-picture (I)">⧉</button>
<button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
<label class="sel dk-sel">
<span>Quality</span>
<select id="qualitySelect"></select>
</label>
</div>
</div>
<div class="spacer"></div>
<label class="sel">
Speed
<select id="speedSelect">
<option value="0.5">0.5×</option>
<option value="0.75">0.75×</option>
<option value="1" selected>1×</option>
<option value="1.25">1.25×</option>
<option value="1.5">1.5×</option>
<option value="2">2×</option>
</select>
</label>
<label class="sel">
Quality
<select id="qualitySelect"></select>
</label>
<button id="sleepTimerBtn" class="ctrl" title="Sleep timer">⏱</button>
<button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)">🔀</button>
<button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</button>
<button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)">🔁</button>
<button id="transitionBtn" class="ctrl" title="Between songs in a playlist: Normal — click to change">↦</button>
<button id="eqBtn" class="ctrl" title="Equalizer (E)">🎚</button>
<button id="pipBtn" class="ctrl hidden" title="Picture-in-picture (I)">⧉</button>
<button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
</div>
</div>