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

41
frontend/download-actions.js
View File

@@ -36,6 +36,45 @@
root.document.body.appendChild(defs);
root.MediaIcons = media;
}
// Shared transport symbols: CSS switches drawings without replacing live controls.
const transportPaths = {
play: '<path d="m8 5 11 7-11 7z"/>',
pause: '<rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/>',
previous: '<path d="m19 5-10 7 10 7zM5 5v14"/>',
next: '<path d="m5 5 10 7-10 7zM19 5v14"/>',
forward: '<path d="m3 5 9 7-9 7zM12 5l9 7-9 7z"/>'
};
for (const seconds of [10,15]) for (const direction of ['back','forward']) {
transportPaths[direction + seconds] = (direction === 'back'
? '<path d="M4 12a8 8 0 1 0 3-6.2M4 4v4.5h4.5"/>'
: '<path d="M20 12a8 8 0 1 1-3-6.2M20 4v4.5h-4.5"/>') +
`<text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">${seconds}</text>`;
}
const transportVariants = Object.fromEntries(['classic','f7-swipe','glass-stage','bento-hub'].map(layout => [layout,{...transportPaths}]));
Object.assign(transportVariants['f7-swipe'], {
play: '<path d="M8 5.8a1 1 0 0 1 1.5-.86l10 6.2a1 1 0 0 1 0 1.72l-10 6.2A1 1 0 0 1 8 18.2z"/>',
previous: '<rect x="4" y="5" width="3" height="14" rx="1.5"/><path d="M19 6a1 1 0 0 0-1.5-.86l-8.5 6a1 1 0 0 0 0 1.72l8.5 6A1 1 0 0 0 19 18z"/>',
next: '<rect x="17" y="5" width="3" height="14" rx="1.5"/><path d="M5 6a1 1 0 0 1 1.5-.86l8.5 6a1 1 0 0 1 0 1.72l-8.5 6A1 1 0 0 1 5 18z"/>'
});
const transport = {
paths: transportPaths, variants: transportVariants,
svg(kind) {
if (!transportPaths[kind]) throw new Error('Unknown transport icon: ' + kind);
return `<svg class="transport-icon" data-transport-icon="${kind}" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-${kind}"/></svg>`;
},
set(button, kind, label) {
if (!button) return;
button.innerHTML = this.svg(kind);
button.setAttribute('aria-label', label || (kind === 'pause' ? 'Pause' : 'Play'));
}
};
if (root.document) {
const defs = root.document.createElementNS('http://www.w3.org/2000/svg','svg');
defs.setAttribute('aria-hidden','true'); defs.setAttribute('width','0'); defs.setAttribute('height','0');
defs.style.position='absolute'; defs.style.pointerEvents='none';
defs.innerHTML='<defs>'+Object.keys(transportPaths).map(kind=>`<g id="transport-${kind}">${Object.entries(transportVariants).map(([layout,paths])=>`<g class="transport-shape transport-shape-${layout}">${paths[kind]}</g>`).join('')}</g>`).join('')+'</defs>';
root.document.body.appendChild(defs); root.TransportIcons=transport;
}
const paths = {
retry: '<path d="M3 11a9 9 0 1 1 2.6 7M3 3v8h8"/>',
cancel: '<path d="m6 6 12 12M6 18 18 6"/>',
@@ -54,6 +93,6 @@
const text = doc.createElement('span'); text.textContent = label;
button.append(icon, text); return button;
}
const api = { create, media };
const api = { create, media, transport };
if (typeof module !== 'undefined' && module.exports) module.exports = api; else root.DownloadActions = api;
})(globalThis);