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

Reconcile transport drawing variants, admin controls and theme cascades

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-09 16:10:02 +08:00
parent 9a37715da4
commit 1e83951972
8 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/download-actions.js
View File

@@ -36,7 +36,8 @@
root.document.body.appendChild(defs);
root.MediaIcons = media;
}
// Shared transport symbols: CSS switches drawings without replacing live controls.
// Select variants on visible use elements: ancestor CSS in referenced SVG groups
// can report changed styles without repainting the cloned geometry in Chromium.
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"/>',
@@ -60,11 +61,13 @@
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>`;
return `<svg class="transport-icon" data-transport-icon="${kind}" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">${Object.keys(transportVariants).map(layout=>`<use class="transport-shape transport-shape-${layout}" href="#transport-${kind}${layout==='classic'?'':'-'+layout}"/>`).join('')}</svg>`;
},
set(button, kind, label) {
if (!button) return;
const iconId=button.querySelector?.('.transport-icon')?.id;
button.innerHTML = this.svg(kind);
if(iconId)button.querySelector('.transport-icon').id=iconId;
button.setAttribute('aria-label', label || (kind === 'pause' ? 'Pause' : 'Play'));
}
};
@@ -72,7 +75,7 @@
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>';
defs.innerHTML='<defs>'+Object.keys(transportPaths).flatMap(kind=>Object.entries(transportVariants).map(([layout,paths])=>`<g id="transport-${kind}${layout==='classic'?'':'-'+layout}">${paths[kind]}</g>`)).join('')+'</defs>';
root.document.body.appendChild(defs); root.TransportIcons=transport;
}
const paths = {