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

Replace transport emoji with centred SVG icons and distinguish loop-one from repeat-list

Browse Source
This commit is contained in:
Claude
2026-10-01 21:02:23 +00:00
parent 9f313f61af
commit f9cb7edeb2
3 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app.js
View File

@@ -1089,6 +1089,8 @@ function escapeHtml(s) {
.replace(/"/g, '"').replace(/'/g, '''); .replace(/"/g, '"').replace(/'/g, ''');
} }
const ICON_PLAY = '<svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M9 5.5v13l10-6.5z"/></svg>';
const ICON_PAUSE = '<svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg>';
function fmtTime(sec) { function fmtTime(sec) {
if (!sec || !isFinite(sec)) return '0:00'; if (!sec || !isFinite(sec)) return '0:00';
sec = Math.floor(sec); sec = Math.floor(sec);
@@ -2393,7 +2395,7 @@ function wirePlayerEvents() {
function updatePlayBtn() { function updatePlayBtn() {
Remote.changed(); Remote.changed();
els.playBtn.textContent = Player.master.paused ? '▶' : '⏸'; els.playBtn.innerHTML = Player.master.paused ? ICON_PLAY : ICON_PAUSE;
$('miniPlayBtn').textContent = Player.master.paused ? '▶' : '⏸'; $('miniPlayBtn').textContent = Player.master.paused ? '▶' : '⏸';
const spBtn = $('servicePlayBtn'); const spBtn = $('servicePlayBtn');
if (spBtn) spBtn.textContent = Player.master.paused ? '▶' : '⏸'; if (spBtn) spBtn.textContent = Player.master.paused ? '▶' : '⏸';

12
frontend/index.html
View File

@@ -171,18 +171,18 @@
</div> </div>
<button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button> <button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
<div class="deck-main"> <div class="deck-main">
<button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)" aria-label="Shuffle">🔀</button> <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="prevBtn" class="ctrl" title="Previous" aria-label="Previous">⏮</button> <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="playBtn" class="ctrl play" title="Play/Pause" aria-label="Play or pause">▶</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="nextBtn" class="ctrl" title="Next" aria-label="Next">⏭</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="repeatBtn" class="ctrl" title="Repeat list when finished (R)" aria-label="Repeat list">🔁</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>
</div> </div>
<div class="deck-vol vol"> <div class="deck-vol vol">
<button id="muteBtn" class="ctrl" title="Mute" aria-label="Mute">🔊</button> <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" /> <input id="volume" type="range" min="0" max="1" step="0.01" value="1" aria-label="Volume" />
</div> </div>
<div class="dk-quick"> <div class="dk-quick">
<button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</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>
<button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button> <button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
<button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog"><span>⋯ More controls</span><small>Speed · Quality · A-B · Sleep</small></button> <button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog"><span>⋯ More controls</span><small>Speed · Quality · A-B · Sleep</small></button>
</div> </div>

8
frontend/refresh.css
View File

@@ -463,3 +463,11 @@
.more-row.on .more-go { color: var(--accent-bright); } .more-row.on .more-go { color: var(--accent-bright); }
.more-row.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .more-row.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.more-sel { margin-left: auto; min-width: 96px; height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text); font: 700 14px var(--mono); } .more-sel { margin-left: auto; min-width: 96px; height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text); font: 700 14px var(--mono); }
/* SVG transport icons: drawn on one grid so they centre exactly */
#controls .ctrl svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#controls .ctrl svg.fill { fill: currentColor; stroke: none; }
#controls .deck-main .ctrl svg { width: 24px; height: 24px; }
#controls .deck-main .ctrl.play svg { width: 34px; height: 34px; }
#controls .deck-main .ctrl { display: grid; place-items: center; }
#controls .ctrl.active svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }