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/admin.html
View File

@@ -6,6 +6,7 @@
<meta name="robots" content="noindex" />
<meta name="theme-color" content="#0a0c12" />
<title>Lyrics Studio</title>
<link rel="stylesheet" href="download-actions.css" />
<style>
:root {
color-scheme: dark;
@@ -193,7 +194,7 @@
.transport { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.round { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.round.big { width: 52px; height: 52px; border: 0; background: var(--grad); box-shadow: 0 10px 24px -8px var(--a1); }
.round svg { width: 20px; height: 20px; fill: #fff; }
.round svg { width: 20px; height: 20px; }
.clock { font: 600 17px var(--mono); letter-spacing: -.02em; min-width: 108px; text-align: center; }
.clock b { color: var(--a2); } .clock span { color: var(--text-dim); font-size: 13px; }
.seg { display: inline-flex; padding: 3px; border-radius: 13px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
@@ -384,7 +385,7 @@
<canvas id="wave" height="64"></canvas>
<div class="transport">
<button class="round" id="bBack" type="button" title="Back 5 s" aria-label="Back 5 seconds">−5</button>
<button class="round big" id="bPlay" type="button" aria-label="Play or pause"><svg viewBox="0 0 24 24"><path id="playIcon" d="M8 5v14l11-7z"/></svg></button>
<button class="round big" id="bPlay" type="button" aria-label="Play or pause"><svg id="playIcon" class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use class="transport-shape transport-shape-classic" href="#transport-play"/><use class="transport-shape transport-shape-f7-swipe" href="#transport-play-f7-swipe"/><use class="transport-shape transport-shape-glass-stage" href="#transport-play-glass-stage"/><use class="transport-shape transport-shape-bento-hub" href="#transport-play-bento-hub"/></svg></button>
<button class="round" id="bFwd" type="button" title="Forward 5 s" aria-label="Forward 5 seconds">+5</button>
<div class="clock"><b id="cur">0:00.00</b> <span>/ <span id="dur">0:00</span></span></div>
<select class="mini" id="rate" title="Playback speed" aria-label="Playback speed">
@@ -1172,8 +1173,8 @@
const a = new Audio(url); a.preload = 'auto';
a.addEventListener('timeupdate', tick); a.addEventListener('seeked', tick);
a.addEventListener('loadedmetadata', () => { if (a.duration) { LE.dur = a.duration; $('dur').textContent = fmtT(a.duration).slice(0, -3); } draw(); });
a.addEventListener('play', () => { $('playIcon').setAttribute('d', 'M7 5h4v14H7zM13 5h4v14h-4z'); });
a.addEventListener('pause', () => { $('playIcon').setAttribute('d', 'M8 5v14l11-7z'); });
a.addEventListener('play', () => { TransportIcons.set($('bPlay'),'pause'); });
a.addEventListener('pause', () => { TransportIcons.set($('bPlay'),'play'); });
a.addEventListener('error', () => say('No playable audio for this song on the server — you can still edit the text.', 'err'));
a.playbackRate = Number($('rate').value);
LE.audio = a;