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

6
frontend/remote-client.js
View File

@@ -293,7 +293,7 @@
<div class="rh-body"></div>
<label class="rh-name-row">This screen's name <input class="rh-name" maxlength="40" /></label>
<div class="rh-buttons">
<button class="np-btn" type="button" data-act="start">▶ Start — control from a phone</button>
<button class="np-btn" type="button" data-act="start">${TransportIcons.svg('play')} Start — control from a phone</button>
<button class="np-btn" type="button" data-act="code">↻ New code</button>
<button class="np-btn" type="button" data-act="unpair">Unpair all phones</button>
<button class="np-btn" type="button" data-act="stop">Stop</button>
@@ -414,14 +414,14 @@
$('rvTitle').textContent = v ? v.title : 'Nothing playing';
$('rvChannel').textContent = v ? v.channel : '';
let directPlay = $('rvDirectPlay');
if (!directPlay) { directPlay = document.createElement('button'); directPlay.id = 'rvDirectPlay'; directPlay.className = 'np-btn'; directPlay.style.minHeight = '44px'; directPlay.textContent = 'Play here from paired screen'; $('rvChannel').after(directPlay); }
if (!directPlay) { directPlay = document.createElement('button'); directPlay.id = 'rvDirectPlay'; directPlay.className = 'np-btn'; directPlay.style.minHeight = '44px'; directPlay.innerHTML = TransportIcons.svg('play') + ' Play here from paired screen'; $('rvChannel').after(directPlay); }
directPlay.hidden = !v || !s.directAvailable || !DirectMedia.enabled();
directPlay.onclick = () => v && playVideoAt({ ...v, duration: s.dur || 0 }, liveCur());
const thumb = $('rvThumb');
if (v && v.thumbnail) { if (thumb.getAttribute('src') !== v.thumbnail) thumb.src = v.thumbnail; thumb.classList.remove('hidden'); }
else thumb.classList.add('hidden');
$('rvToggle').textContent = s && !s.paused ? '⏸' : '▶';
TransportIcons.set($('rvToggle'), s && !s.paused ? 'pause' : 'play');
$('rvDur').textContent = clock((s && s.dur) || 0);
if (!rc.volTimer && document.activeElement !== $('rvVolume')) {
const pct = Math.round(((s && s.volume) ?? 1) * 100);