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

14
frontend/views-core.js
View File

@@ -222,7 +222,7 @@ function renderList() {
els.listTitle.textContent = 'Queue';
if (list.length) {
const playAll = document.createElement('button');
playAll.textContent = '▶ Play queue';
playAll.innerHTML = TransportIcons.svg('play') + ' Play queue';
playAll.onclick = () => playQueue(0);
const clear = document.createElement('button');
clear.textContent = 'Clear';
@@ -234,7 +234,7 @@ function renderList() {
els.listTitle.textContent = sp ? sp.label : 'Auto Playlist';
if (list.length) {
const playAll = document.createElement('button');
playAll.textContent = '▶ Play all';
playAll.innerHTML = TransportIcons.svg('play') + ' Play all';
playAll.onclick = () => playFromList(list.slice(), 0, 'smart:' + view.smartType);
const queueAll = document.createElement('button');
queueAll.textContent = '＋ Queue all';
@@ -245,7 +245,7 @@ function renderList() {
els.listTitle.textContent = channelData.name || 'Channel';
if (list.length) {
const playAll = document.createElement('button');
playAll.textContent = '▶ Play all';
playAll.innerHTML = TransportIcons.svg('play') + ' Play all';
playAll.onclick = () => playFromList(channelData.results.slice(), 0, 'channel');
const queueAll = document.createElement('button');
queueAll.textContent = '＋ Queue all';
@@ -261,11 +261,11 @@ function renderList() {
$('listSub').textContent = `${pl.videos.length} track${pl.videos.length === 1 ? '' : 's'}${secs ? ' · ' + (h ? h + 'h ' : '') + m + 'm' : ''}`; }
renderP2pStrip();
const playAll = document.createElement('button');
playAll.textContent = '▶ Play all';
playAll.innerHTML = TransportIcons.svg('play') + ' Play all';
playAll.className = 'la-primary';
playAll.onclick = () => { if (pl.videos.length) playFromList(pl.videos, 0, 'playlist:' + pl.id); };
const playFull = document.createElement('button');
playFull.textContent = '▶ Play in full';
playFull.innerHTML = TransportIcons.svg('play') + ' Play in full';
playFull.className = 'la-main';
playFull.dataset.sub = 'Start to finish';
playFull.title = 'Play every video start to finish — ignores saved positions and A-B loops, stops after the last one';
@@ -360,7 +360,7 @@ function renderList() {
addBrowseCta(empty, '🔍 Search videos');
} else if (view.type === 'queue') {
empty.innerHTML = `
<div class="empty-icon">▶</div>
<div class="empty-icon">${TransportIcons.svg('play')}</div>
<h3 class="empty-title">Your queue is empty</h3>
<p class="empty-desc">Use <strong>+ Queue</strong> on any video to line it up. The queue is temporary and plays in order.</p>
`;
@@ -492,7 +492,7 @@ async function renderP2pList() {
refresh.setAttribute('aria-label', 'Refresh');
refresh.onclick = () => renderP2pList();
const playAll = document.createElement('button');
playAll.textContent = '▶ Play all';
playAll.innerHTML = TransportIcons.svg('play') + ' Play all';
playAll.className = 'la-primary la-inline';
playAll.onclick = () => { if (list.length) playFromList(list, 0, 'p2p'); };
els.listActions.append(playAll, refresh);