Unify transport controls with themed SVG symbols and accessible playback states

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

View File

@@ -154,7 +154,7 @@ function renderHomePlaylists() {
${thumb ? `<img src="${escapeHtml(thumb)}" alt="" loading="lazy" decoding="async" />`
: '<span class="home-pl-thumb-fallback">🎵</span>'}
${offlineHtml}
<span class="home-pl-play" title="Play all">▶</span>
<span class="home-pl-play" title="Play all">${TransportIcons.svg('play')}</span>
</span>
<span class="home-pl-name"></span>
<span class="home-pl-count">${count} video${count === 1 ? '' : 's'}</span>`;
@@ -162,7 +162,7 @@ function renderHomePlaylists() {
card.title = pl.name;
card.addEventListener('click', () => { view = { type: 'playlist', id: pl.id }; render(); });
card.querySelector('.home-pl-play').addEventListener('click', (e) => {
e.stopPropagation(); // the ▶ badge plays; the rest of the card opens the list
e.stopPropagation(); // the play badge plays; the rest of the card opens the list
if (count) playFromList(pl.videos, 0, 'playlist:' + pl.id);
else toast('That playlist is empty');
});