mirror of
https://github.com/gesellix/Bose-SoundTouch.git
synced 2026-08-21 01:56:15 +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>
48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
import { h } from 'preact';
|
|
import htm from 'htm';
|
|
import { api } from '../api.js';
|
|
|
|
const html = htm.bind(h);
|
|
|
|
const SOURCE_ICONS = {
|
|
TUNEIN: '📻', SPOTIFY: '🎵', AMAZON: '🛒', PANDORA: '🎶',
|
|
BLUETOOTH: '📶', AUX: '🔌', OPTICAL: '💡', HDMI: '📺',
|
|
IHEARTRADIO: '❤️', DEEZER: '🎼', LOCAL_INTERNET_RADIO: '📡',
|
|
AIRPLAY: '📡', PRODUCT: '🔊',
|
|
};
|
|
|
|
export function Sources({ deviceId, status }) {
|
|
const items = status?.sources?.SourceItem ?? [];
|
|
const currentSource = status?.nowPlaying?.Source;
|
|
const currentAccount = status?.nowPlaying?.SourceAccount;
|
|
|
|
const ready = items.filter(s => s.Status === 'READY');
|
|
if (ready.length === 0) return null;
|
|
|
|
function select(src) {
|
|
api.selectSource(deviceId, src.Source, src.SourceAccount ?? '');
|
|
}
|
|
|
|
return html`
|
|
<div class="sources-section">
|
|
<h3 class="section-title">Sources</h3>
|
|
<div class="source-list">
|
|
${ready.map(src => {
|
|
const isActive = src.Source === currentSource &&
|
|
(!src.SourceAccount || src.SourceAccount === currentAccount);
|
|
return html`
|
|
<button
|
|
key=${src.Source + (src.SourceAccount || '')}
|
|
class="source-btn ${isActive ? 'active' : ''} ${src.IsLocal ? 'local' : ''}"
|
|
onClick=${() => select(src)}
|
|
title=${src.Source}
|
|
>
|
|
<span class="source-icon">${SOURCE_ICONS[src.Source] || '🔊'}</span>
|
|
<span class="source-name">${src.DisplayName || src.Source}</span>
|
|
</button>
|
|
`;
|
|
})}
|
|
</div>
|
|
</div>
|
|
`;
|
|
} |