mirror of
https://github.com/gesellix/Bose-SoundTouch.git
synced 2026-08-24 14:47:23 +00:00
Tobias GesellchenandClaude Opus 4.7
9c5ba43fb3
Brings forward the frontend rewrite from the `app` branch
(6723515 + later refinements) onto the relocated package layout.
The Go side untouched — main.go's orchestration, discovery, routes,
and handlers all remain. Only the static-asset layer changes.
Frontend (lives in pkg/service/soundtouchweb/static/):
- index.html (importmap-driven, ES modules, no build step)
- css/app.css (CSS-custom-property design system, dark by default)
- js/api.js (typed-ish fetch wrappers)
- js/app.js (Preact App shell: routing, toast, websocket reconnect)
- js/components/{DeviceList,NowPlaying,Controls,Presets,Sources,
Recents,Zone,TuneInBrowser}.js
- img/favicon.{ico,svg}
- lib/{preact,preact-hooks,htm}.module.js (vendored ES modules)
Backend wiring:
- New pkg/service/soundtouchweb/embed.go exports `StaticFS embed.FS`
via `//go:embed static`. main.go drops its own `//go:embed` and
consumes `soundtouchweb.StaticFS` instead, so the static tree
lives alongside the handlers it serves.
- cmd/soundtouch-web/static/{index.html,css/app.css,js/app.js} are
deleted; the old `cmd/soundtouch-web/static/` directory is empty
now and removed entirely.
Path rename vs. app branch:
- app's importmap pointed at `/static/vendor/preact*.js` and the
vendor files were never committed because `.gitignore:44 vendor/`
silently masked them. Renamed to `/static/lib/` to escape the
global rule and `git add`-ed the three modules.
Known regressions vs. main's vanilla UI (acceptable for this commit;
flag in review or follow-up if any matter):
- Per-card power toggle on the device list — Preact only exposes
power inside the device-detail view, not on the list card.
- WebSocket reconnect uses `location.reload()` after 5s; main had
exponential backoff. Functional, simpler, less elegant.
- Theme icon control absent (Preact UI is dark-only via CSS vars;
no light-mode toggle).
Features carried over and confirmed at the route-shape level:
device list / device detail / nowPlaying / volume+key+power controls
/ presets / sources / TuneIn search + browse + play / discovery /
toasts / WebSocket status updates.
go build ./... clean. go test ./... clean (only pre-existing
TestDocsConsistency fails). golangci-lint run ./... 0 issues.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
2.2 KiB
JavaScript
57 lines
2.2 KiB
JavaScript
import { h } from 'preact';
|
|
import { useState, useEffect } from 'preact/hooks';
|
|
import htm from 'htm';
|
|
|
|
const html = htm.bind(h);
|
|
|
|
function fmt(secs) {
|
|
if (!secs || secs <= 0) return '0:00';
|
|
const m = Math.floor(secs / 60);
|
|
const s = secs % 60;
|
|
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
export function NowPlaying({ nowPlaying }) {
|
|
const [position, setPosition] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const pos = nowPlaying?.Time?.Position ?? 0;
|
|
setPosition(pos);
|
|
if (nowPlaying?.PlayStatus !== 'PLAY_STATE') return;
|
|
const id = setInterval(() => setPosition(p => p + 1), 1000);
|
|
return () => clearInterval(id);
|
|
}, [nowPlaying?.Time?.Position, nowPlaying?.PlayStatus]);
|
|
|
|
if (!nowPlaying || nowPlaying.Source === 'STANDBY') {
|
|
return html`<div class="now-playing standby">Standby</div>`;
|
|
}
|
|
|
|
const title = nowPlaying.Track || nowPlaying.StationName || nowPlaying.Source;
|
|
const artURL = nowPlaying.Art?.URL;
|
|
const isBuffering = nowPlaying.PlayStatus === 'BUFFERING_STATE';
|
|
const total = nowPlaying.Time?.Total ?? 0;
|
|
const pct = total > 0 ? Math.min(100, (position / total) * 100) : 0;
|
|
|
|
return html`
|
|
<div class="now-playing">
|
|
${artURL && html`<img class="album-art" src=${artURL} alt="" />`}
|
|
<div class="track-info">
|
|
<div class="track-title">${title}</div>
|
|
${nowPlaying.Artist && html`<div class="track-artist">${nowPlaying.Artist}</div>`}
|
|
${nowPlaying.Album && html`<div class="track-album">${nowPlaying.Album}</div>`}
|
|
<div class="track-meta">
|
|
<span class="track-source">${nowPlaying.Source}</span>
|
|
${isBuffering && html`<span class="buffering-badge">Buffering…</span>`}
|
|
</div>
|
|
${total > 0 && html`
|
|
<div class="progress-row">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width:${pct}%"></div>
|
|
</div>
|
|
<span class="progress-time">${fmt(position)} / ${fmt(total)}</span>
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
`;
|
|
} |