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>
75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
import { h } from 'preact';
|
|
import { useState, useEffect } from 'preact/hooks';
|
|
import htm from 'htm';
|
|
import { api } from '../api.js';
|
|
|
|
const html = htm.bind(h);
|
|
|
|
const SOURCE_ICONS = {
|
|
TUNEIN: '📻', SPOTIFY: '🎵', AMAZON: '🎶', PANDORA: '🎸',
|
|
DEEZER: '🎵', IHEART: '📻', BLUETOOTH: '📶', AUX: '🔌',
|
|
LOCAL_MUSIC: '💽', STORED_MUSIC: '💽',
|
|
};
|
|
|
|
export function Recents({ deviceId }) {
|
|
const [items, setItems] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!deviceId) return;
|
|
api.recents(deviceId).then(resp => {
|
|
setItems(resp.data?.Items ?? []);
|
|
}).catch(() => {
|
|
setItems([]);
|
|
}).finally(() => setLoading(false));
|
|
}, [deviceId]);
|
|
|
|
if (loading) return html`
|
|
<div class="recents-section">
|
|
<div class="section-title">Recents</div>
|
|
<div class="loading-bar"></div>
|
|
</div>
|
|
`;
|
|
|
|
if (!items || items.length === 0) return null;
|
|
|
|
function play(item) {
|
|
const ci = item.ContentItem;
|
|
if (!ci?.Location) return;
|
|
api.play(deviceId, {
|
|
source: ci.Source,
|
|
type: ci.Type,
|
|
location: ci.Location,
|
|
sourceAccount: ci.SourceAccount,
|
|
itemName: ci.ItemName,
|
|
containerArt: ci.ContainerArt,
|
|
isPresetable: ci.IsPresetable,
|
|
});
|
|
}
|
|
|
|
return html`
|
|
<div class="recents-section">
|
|
<div class="section-title">Recents</div>
|
|
<div class="recents-list">
|
|
${items.map(item => {
|
|
const ci = item.ContentItem;
|
|
if (!ci) return null;
|
|
const icon = SOURCE_ICONS[ci.Source] ?? '♪';
|
|
return html`
|
|
<button class="recent-item" key=${item.ID || item.UTCTime} onClick=${() => play(item)}>
|
|
${ci.ContainerArt
|
|
? html`<img class="recent-art" src=${ci.ContainerArt} alt="" />`
|
|
: html`<div class="recent-art recent-art-empty">${icon}</div>`
|
|
}
|
|
<div class="recent-info">
|
|
<span class="recent-name">${ci.ItemName || ci.Source}</span>
|
|
<span class="recent-source">${ci.Source}</span>
|
|
</div>
|
|
<span class="recent-play">▶</span>
|
|
</button>
|
|
`;
|
|
})}
|
|
</div>
|
|
</div>
|
|
`;
|
|
} |