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

Redesign service-mode controls and add per-profile wrong-lyric-line reports

Browse Source
This commit is contained in:
Claude
2026-09-30 15:15:07 +00:00
parent 0d68e7e72f
commit 04a74ab45d
10 changed files with 1060 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/index.html
View File

@@ -21,6 +21,7 @@
<link rel="preload" href="fonts/HankenGrotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="fonts/fonts.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="service-ui.css" />
</head>
<body>
<div class="app">
@@ -358,16 +359,34 @@
<nav id="sectionRail" class="sec-rail hidden" aria-label="Jump to a section"></nav>
<section id="serviceMode" class="service-mode hidden" aria-label="Service Mode">
<div class="service-topbar">
<div id="serviceWakeState" class="service-wake-state">Screen may sleep</div>
<div class="service-topbar-actions">
<button id="serviceAutoscrollBtn" class="service-exit-btn service-video-btn hidden" type="button"
aria-pressed="true" aria-label="Keep the sung line centred">⇅ Auto-scroll on</button>
<button id="serviceLyricsBtn" class="service-exit-btn service-video-btn" type="button"
aria-pressed="false" aria-label="Show only the lyrics">🎵 Lyrics off</button>
<button id="serviceVideoBtn" class="service-exit-btn service-video-btn" type="button"
aria-pressed="false" aria-label="Show or hide the video">📺 Video off</button>
<button id="serviceExitBtn" class="service-exit-btn" type="button" aria-label="Exit Service Mode">Exit</button>
<div class="svc-top">
<div class="svc-head">
<div id="serviceWakeState" class="svc-wake" role="status">Screen may sleep</div>
<button id="serviceExitBtn" class="svc-exit" type="button" aria-label="Exit Service Mode">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>Exit
</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>
<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>
<span class="svc-label">Auto-scroll</span><i class="svc-led"></i>
</button>
<button id="serviceFlagBtn" class="svc-tile svc-flag hidden" type="button" aria-pressed="false" aria-label="Report a wrong lyric line">
<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>
<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>
<span>Tap the line that’s wrong</span>
</div>
</div>
<div class="service-center">
@@ -383,6 +402,7 @@
</div>
</div>
<div class="service-bottom">
<div class="svc-progress" aria-hidden="true"><i id="serviceProgressFill"></i></div>
<div id="serviceTime" class="service-time">
<span id="serviceCurTime">0:00</span> / <span id="serviceDurTime">0:00</span>
</div>
@@ -561,6 +581,7 @@
<script src="opfs.js"></script>
<script src="video-edit.js"></script>
<script src="lyrics-core.js"></script>
<script src="flag-ui.js"></script>
<script src="stats-core.js"></script>
<script src="sha256.js"></script>
<script src="device-db.js"></script>