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

Service mode: one view button (default, lyrics, video, visualizer, album art) and a text-size box

Browse Source 
- A single dock button cycles the service view; video is skipped in audio-only mode
- Visualizer reacts to the audio where the EQ graph is available and falls back
  to an ambient pulse on iOS so background playback is never routed through Web Audio
- Album art shows the song artwork with the letterbox cropped
- A-/A+ box steps lyrics, title and channel size from -2 to +2 in every theme
- Glass Stage dock is slightly more compact
This commit is contained in:
Jonathan Sykes
2026-10-02 21:11:15 +08:00
parent 985063648f
commit 53da71ceb9
4 changed files with 237 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/index.html
View File

@@ -409,9 +409,9 @@
</button>
</div>
<div class="svc-dock" role="toolbar" aria-label="Service view">
<button id="serviceLyricsBtn" class="svc-tile" type="button" aria-pressed="false" aria-label="Show only the lyrics">
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg>
<span class="svc-label">Lyrics</span><i class="svc-led"></i>
<button id="serviceViewBtn" class="svc-tile svc-view" type="button" aria-label="Service view: Default — tap to change">
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"></svg>
<span class="svc-label">Default</span><i class="svc-led"></i>
</button>
<button id="serviceAutoscrollBtn" class="svc-tile hidden" type="button" aria-pressed="true" aria-label="Keep the sung line centred">
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v16M7 9l5-5 5 5M7 15l5 5 5-5"/></svg>
@@ -421,10 +421,11 @@
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>
<span class="svc-label">Report</span><i class="svc-led"></i>
</button>
<button id="serviceVideoBtn" class="svc-tile" type="button" aria-pressed="false" aria-label="Show or hide the video">
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="6" width="13" height="12" rx="2.5"/><path d="M16 10.5l5-3v9l-5-3"/></svg>
<span class="svc-label">Video</span><i class="svc-led"></i>
</button>
<div class="svc-font" role="group" aria-label="Lyrics text size">
<button id="svcFontDown" type="button" aria-label="Smaller text">A−</button>
<span id="svcFontVal" aria-live="polite">0</span>
<button id="svcFontUp" type="button" aria-label="Larger text">A+</button>
</div>
</div>
<div id="serviceFlagHint" class="svc-hint hidden" role="status">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>
@@ -437,6 +438,11 @@
<div id="serviceChannel" class="service-channel"></div>
<div id="serviceNote" class="service-note hidden"></div>
</div>
<!-- Album art / visualizer views -->
<div id="serviceVisual" class="service-visual hidden" aria-hidden="true">
<img id="serviceArt" class="svc-art" alt="" decoding="async" />
<canvas id="serviceViz" class="svc-viz"></canvas>
</div>
<div id="serviceUpNext" class="service-upnext">Last song</div>
<!-- Lyrics-only view: the sung line is centred, largest and highlighted -->
<div id="serviceLyrics" class="service-lyrics hidden" aria-live="off">