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

Rebuild the Glass Stage A-B quick row and restyle the title block with a verified badge

Browse Source
This commit is contained in:
Claude
2026-10-01 21:51:38 +00:00
parent 6bf2636864
commit 8c463f3834
3 changed files with 58 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app.js
View File

@@ -2682,6 +2682,7 @@ function updateNowPlayingActions() {
els.brokenBtn.disabled = reportingBroken.has(id); els.brokenBtn.disabled = reportingBroken.has(id);
els.brokenBtn.textContent = reportingBroken.has(id) ? '⏳ Reporting…' : '⚠ Broken'; els.brokenBtn.textContent = reportingBroken.has(id) ? '⏳ Reporting…' : '⚠ Broken';
} }
{ const ch = $('npChannel'); if (ch) { const ok = isUploadId(id) || cachedIds.has(id); ch.classList.toggle('verified', ok); ch.title = ok ? 'Available on this device or the server' : ''; } }
const btn = els.saveBtn; const btn = els.saveBtn;
if (!btn) return; if (!btn) return;
if (removing.has(id)) { if (removing.has(id)) {

6
frontend/index.html
View File

@@ -206,9 +206,11 @@
</div> </div>
<div class="dk-quick"> <div class="dk-quick">
<button id="fsBtn" class="ctrl" title="Fullscreen" aria-label="Fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg><span class="fs-label">Fullscreen</span></button> <button id="fsBtn" class="ctrl" title="Fullscreen" aria-label="Fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg><span class="fs-label">Fullscreen</span></button>
<div class="ab-group">
<button id="abABtn" class="ctrl ab-ctrl" title="Set A-B loop start [A]">A</button> <button id="abABtn" class="ctrl ab-ctrl" title="Set A-B loop start [A]">A</button>
<button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button> <button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button>
<button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button> <button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button>
</div>
<button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog" title="More controls" aria-label="More controls"><span><em class="mc-dots">⋯</em><i class="mc-label"> More<i class="mc-rest"> controls</i></i></span><small>Speed · Quality · A-B · Sleep · EQ</small></button> <button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog" title="More controls" aria-label="More controls"><span><em class="mc-dots">⋯</em><i class="mc-label"> More<i class="mc-rest"> controls</i></i></span><small>Speed · Quality · A-B · Sleep · EQ</small></button>
</div> </div>
<div id="deckChips" class="deck-chips" aria-label="Quick settings"></div> <div id="deckChips" class="deck-chips" aria-label="Quick settings"></div>

98
frontend/theme-glass.css
View File

@@ -119,13 +119,6 @@ html[data-layout="glass-stage"] #controls .deck-vol #modeBtn {
} }
html[data-layout="glass-stage"] #controls .mode-name { display: inline; font: 600 12px var(--ui); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-layout="glass-stage"] #controls .mode-name { display: inline; font: 600 12px var(--ui); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="glass-stage"] #controls .deck-vol #modeBtn svg { width: 17px; height: 17px; } html[data-layout="glass-stage"] #controls .deck-vol #modeBtn svg { width: 17px; height: 17px; }
html[data-layout="glass-stage"] #controls .dk-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-layout="glass-stage"] #controls .dk-quick .ctrl,
html[data-layout="glass-stage"] #controls .dk-more { height: 40px; border-radius: 14px; background: var(--tile); border: 1px solid var(--glass-line); }
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn { font-size: 12px; }
html[data-layout="glass-stage"] #controls .dk-more small { display: none; }
html[data-layout="glass-stage"] #controls .dk-more { flex: 1 1 90px; }
html[data-layout="glass-stage"] #controls .deck-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } html[data-layout="glass-stage"] #controls .deck-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
html[data-layout="glass-stage"] #controls .deck-chips .dchip { html[data-layout="glass-stage"] #controls .deck-chips .dchip {
flex: none; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.03); flex: none; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.03);
@@ -239,29 +232,6 @@ html[data-layout="glass-stage"] #controls #waveLoud {
width: 100%; padding: 8px 14px; border-radius: 14px; text-align: left; font: 500 12px var(--ui); color: var(--accent-bright); width: 100%; padding: 8px 14px; border-radius: 14px; text-align: left; font: 500 12px var(--ui); color: var(--accent-bright);
background: linear-gradient(90deg, rgba(255, 85, 60, 0.16), transparent); border: 1px solid rgba(255, 85, 60, 0.22); background: linear-gradient(90deg, rgba(255, 85, 60, 0.16), transparent); border: 1px solid rgba(255, 85, 60, 0.22);
} }
/* quick row: A-B group · Fullscreen · More */
html[data-layout="glass-stage"] #controls .dk-quick { flex-wrap: nowrap; }
html[data-layout="glass-stage"] #controls .dk-quick #abABtn,
html[data-layout="glass-stage"] #controls .dk-quick #abBBtn,
html[data-layout="glass-stage"] #controls .dk-quick #abClearBtn:not(.hidden) {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; height: 40px; padding: 0 10px; border-radius: 0; border: 0; background: transparent;
font: 600 11px var(--mono); color: var(--text-dim);
}
html[data-layout="glass-stage"] #controls .dk-quick #abABtn { order: 1; border-radius: 14px 0 0 14px; border: 1px solid var(--glass-line); border-right: 0; background: var(--tile); }
html[data-layout="glass-stage"] #controls .dk-quick #abBBtn { order: 2; border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); background: var(--tile); }
html[data-layout="glass-stage"] #controls .dk-quick #abClearBtn { order: 3; border-radius: 0 14px 14px 0; border: 1px solid var(--glass-line); border-left: 0; background: var(--tile); }
html[data-layout="glass-stage"] #controls .dk-quick #abClearBtn.hidden { display: none; }
html[data-layout="glass-stage"] #controls .dk-quick #abABtn::after, html[data-layout="glass-stage"] #controls .dk-quick #abBBtn::after { content: attr(data-t); margin-left: 4px; }
html[data-layout="glass-stage"] #controls .dk-quick #abABtn[data-t]::after, html[data-layout="glass-stage"] #controls .dk-quick #abBBtn[data-t]::after { content: "[" attr(data-t) "]"; }
html[data-layout="glass-stage"] #controls .dk-quick .ctrl.active { color: var(--accent-bright); background: rgba(255, 255, 255, 0.1); }
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn { order: 4; width: auto; padding: 0 12px; margin-left: auto; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #fsBtn { width: auto; padding: 0 12px; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on .fs-label { display: inline; }
html[data-layout="glass-stage"] #controls .dk-quick #ctlMoreBtn { order: 5; flex: 0 0 auto; padding: 0 12px; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on .mc-label { display: inline; }
html[data-layout="glass-stage"] #controls .dk-more .mc-rest { display: none; }
html[data-layout="glass-stage"] #controls .dk-quick .dk-more span { font: 600 11px var(--ui); }
html[data-layout="glass-stage"] #controls .deck-vol #modeBtn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); flex: none; order: 3; } html[data-layout="glass-stage"] #controls .deck-vol #modeBtn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); flex: none; order: 3; }
html[data-layout="glass-stage"] #controls .deck-vol #modeBtn { justify-content: flex-start; } html[data-layout="glass-stage"] #controls .deck-vol #modeBtn { justify-content: flex-start; }
html[data-layout="glass-stage"] #controls .deck-vol #modeBtn svg { margin-left: auto; order: -1; color: var(--text-dim); } html[data-layout="glass-stage"] #controls .deck-vol #modeBtn svg { margin-left: auto; order: -1; color: var(--text-dim); }
@@ -320,18 +290,56 @@ html[data-layout="glass-stage"] .ps-txt { flex: 1; min-width: 0; display: grid;
html[data-layout="glass-stage"] .ps-txt b { font: 500 12px var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-layout="glass-stage"] .ps-txt b { font: 500 12px var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-layout="glass-stage"] .ps-txt small { font: 400 10px var(--mono); color: var(--text-dim); } html[data-layout="glass-stage"] .ps-txt small { font: 400 10px var(--mono); color: var(--text-dim); }
html[data-layout="glass-stage"] .ps-dl { width: 34px; height: 34px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, 0.07); color: var(--accent-bright); font-size: 16px; cursor: pointer; } html[data-layout="glass-stage"] .ps-dl { width: 34px; height: 34px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, 0.07); color: var(--accent-bright); font-size: 16px; cursor: pointer; }
html[data-layout="glass-stage"] #controls .dk-quick { align-items: center; }
html[data-layout="glass-stage"] #controls .dk-quick .ctrl, html[data-layout="glass-stage"] #controls .dk-quick .dk-more { height: 40px !important; box-shadow: none !important; white-space: nowrap; } /* ===== quick row (clean rebuild): [A | B | ↺] [Fullscreen] [More] ===== */
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn { flex-direction: row; gap: 6px; } .ab-group { display: contents; }
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn svg { width: 16px; height: 16px; } html[data-layout="glass-stage"] #controls .dk-quick { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; }
html[data-layout="glass-stage"] #controls .dk-quick .fs-label { font: 600 11px var(--ui); } html[data-layout="glass-stage"] #controls .ab-group { display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; border-radius: 14px; background: var(--tile); border: 1px solid var(--glass-line); flex: 0 1 auto; min-width: 0; }
html[data-layout="glass-stage"] #controls .dk-quick #abBBtn, html[data-layout="glass-stage"] #controls .dk-quick #abClearBtn { margin-left: -8px; } html[data-layout="glass-stage"] #controls .ab-group .ctrl {
html[data-layout="glass-stage"] #controls .dk-quick .ctrl.active { background: rgba(255, 255, 255, 0.12) !important; color: var(--accent-bright); } display: inline-flex !important; align-items: center; justify-content: center; gap: 4px;
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn { min-width: 112px; padding: 0 12px; } width: auto !important; min-width: 0 !important; height: 32px !important; padding: 0 9px !important; margin: 0 !important;
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn svg { flex: none; display: block; } border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; transform: none !important;
html[data-layout="glass-stage"] #controls .dk-quick { gap: 6px; } font: 600 11px var(--mono) !important; color: var(--text-dim); white-space: nowrap; flex: 0 0 auto !important;
html[data-layout="glass-stage"] #controls .dk-quick #abABtn, html[data-layout="glass-stage"] #controls .dk-quick #abBBtn { padding: 0 7px !important; font-size: 10px; } }
html[data-layout="glass-stage"] #controls .dk-quick #abClearBtn:not(.hidden) { padding: 0 8px !important; } html[data-layout="glass-stage"] #controls .ab-group .ctrl.hidden { display: none !important; }
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn { min-width: 0; margin-left: auto; padding: 0 10px; } html[data-layout="glass-stage"] #controls .ab-group .ctrl.active { background: rgba(255, 255, 255, 0.12) !important; color: var(--accent-bright); }
html[data-layout="glass-stage"] #controls .dk-quick #ctlMoreBtn { flex: 0 1 auto; min-width: 0; padding: 0 10px; } html[data-layout="glass-stage"] #controls .ab-group #abABtn[data-t]::after,
html[data-layout="glass-stage"] #controls .dk-quick #fsBtn { width: auto !important; flex: 0 0 auto !important; } html[data-layout="glass-stage"] #controls .ab-group #abBBtn[data-t]::after { content: "[" attr(data-t) "]"; }
html[data-layout="glass-stage"] #controls #fsBtn,
html[data-layout="glass-stage"] #controls #ctlMoreBtn {
display: inline-flex !important; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
width: auto !important; height: 40px !important; min-width: 0 !important; margin: 0 !important; padding: 0 12px !important;
border-radius: 14px; background: var(--tile); border: 1px solid var(--glass-line); box-shadow: none !important; color: var(--text);
white-space: nowrap; flex: 0 0 auto !important; text-align: center;
}
html[data-layout="glass-stage"] #controls #fsBtn svg { display: block; flex: none; width: 16px; height: 16px; }
html[data-layout="glass-stage"] #controls #fsBtn .fs-label { display: inline !important; font: 600 11px var(--ui); text-transform: none; letter-spacing: 0; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn span { display: inline; font: 600 11px var(--ui); }
html[data-layout="glass-stage"] #controls #ctlMoreBtn .mc-label { display: inline !important; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn .mc-rest, html[data-layout="glass-stage"] #controls #ctlMoreBtn small { display: none !important; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn .mc-dots { margin-right: 2px; }
/* ===== now playing title block ===== */
html[data-layout="glass-stage"] #nowPlayingMeta .np-text { display: grid; gap: 8px; }
html[data-layout="glass-stage"] #nowPlayingMeta .np-title { font: 700 clamp(22px, 6.2vw, 27px)/1.15 var(--display); letter-spacing: -0.02em; color: var(--text); }
html[data-layout="glass-stage"] #nowPlayingMeta .np-channel { display: flex; align-items: center; gap: 8px; font: 500 13px var(--ui); color: var(--text-2); }
html[data-layout="glass-stage"] #nowPlayingMeta .np-channel::before { display: none; }
html[data-layout="glass-stage"] #nowPlayingMeta .np-channel.verified::after {
content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none;
background: rgba(255, 85, 60, 0.18); border: 1px solid rgba(255, 85, 60, 0.45); color: var(--accent); font: 700 10px var(--ui);
}
html[data-layout="glass-stage"] #npAvail { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 99px; background: var(--tile); border: 1px solid var(--glass-line); font: 500 11px var(--ui); color: var(--text-2); }
html[data-layout="glass-stage"] #npAvail.hidden { display: none; }
html[data-layout="glass-stage"] #npAvail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: stg-pulse 1.8s ease-in-out infinite; flex: none; }
@keyframes stg-pulse { 50% { opacity: 0.35; } }
html[data-layout="glass-stage"] #controls .ab-group { order: 1; flex: 0 0 auto; }
html[data-layout="glass-stage"] #controls #fsBtn { order: 2; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn { order: 3; }
html[data-layout="glass-stage"] #controls .ab-group .ctrl { padding: 0 7px !important; font-size: 10px !important; }
html[data-layout="glass-stage"] #controls .ab-group #abClearBtn { padding: 0 7px !important; font-size: 13px !important; }
@media (max-width: 440px) {
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #fsBtn .fs-label { display: none !important; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #fsBtn { padding: 0 10px !important; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #ctlMoreBtn .mc-label { display: none !important; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #ctlMoreBtn { padding: 0 10px !important; }
}