Add master display UI with audio output management and styling
- Implement main.js for the master display functionality, including WebSocket connection, audio output management, and state handling. - Create style.css for the master display's visual design, ensuring a cohesive look and feel with a dark theme and responsive layout. - Integrate device management with a fallback for non-Electron environments, allowing users to select audio outputs. - Add features for managing favorites, including toggling favorites and filtering by genre. - Enhance user experience with a responsive favorites grid and drag-to-scroll functionality.
This commit is contained in:
Marco Mooren
1021
web/admin/main.js
1021
web/admin/main.js
File diff suppressed because it is too large
Load Diff
@@ -208,3 +208,236 @@ dialog .actions { padding-top: 12px; border-top: 1px solid #cccccc; }
|
||||
}
|
||||
.stat .v { font-weight: 900; letter-spacing: -0.01em; }
|
||||
.stat .k { font-weight: 700; letter-spacing: 0.08em; }
|
||||
|
||||
/* ============================================================
|
||||
POWER-ADMIN ADDITIONS
|
||||
============================================================ */
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 4px 0 12px; }
|
||||
.tabs button {
|
||||
background: var(--panel); border: 1px solid var(--border); border-bottom: 0;
|
||||
padding: 8px 14px; font-size: 12px; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.06em; margin-right: -1px;
|
||||
}
|
||||
.tabs button.active { background: var(--accent); color: #000; border-color: var(--accent); }
|
||||
|
||||
.tab-body { padding: 6px 0; }
|
||||
|
||||
.row.image-row { grid-template-columns: 1fr; }
|
||||
.image-area { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
|
||||
.image-area .preview {
|
||||
width: 140px; height: 140px; border: 1px solid var(--border);
|
||||
background-size: cover; background-position: center; background-color: #f5f5f5;
|
||||
position: relative; display: grid; place-items: center; color: var(--muted); font-size: 11px;
|
||||
}
|
||||
.image-area .actions-col { display: grid; gap: 6px; align-content: start; }
|
||||
.image-area .dropzone {
|
||||
border: 2px dashed #999; padding: 10px 12px; font-size: 12px; color: var(--muted);
|
||||
text-align: center; cursor: pointer; user-select: none;
|
||||
}
|
||||
.image-area .dropzone.over { border-color: var(--accent); color: var(--fg); background: #fff4ec; }
|
||||
|
||||
.bulkbar {
|
||||
position: sticky; top: 0; z-index: 2;
|
||||
background: #000; color: #fff; padding: 8px 12px; margin-bottom: 8px;
|
||||
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
|
||||
}
|
||||
.bulkbar .btn { background: #111 !important; color: #fff !important; border-color: #444 !important; }
|
||||
.bulkbar .btn:hover { background: var(--accent) !important; color: #000 !important; border-color: var(--accent) !important; }
|
||||
.bulkbar .count { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
|
||||
|
||||
.station-art-thumb {
|
||||
width: 48px; height: 48px; background-color: #f3f3f3;
|
||||
border: 1px solid var(--border); flex-shrink: 0;
|
||||
overflow: hidden; position: relative; display: block;
|
||||
}
|
||||
.station-art-thumb img {
|
||||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||||
}
|
||||
.station-art-thumb.empty::after {
|
||||
content: "\266A"; position: absolute; inset: 0;
|
||||
display: grid; place-items: center; color: var(--muted); font-size: 22px;
|
||||
}
|
||||
.station-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.station-cell .meta { min-width: 0; }
|
||||
.station-cell .meta small { color: var(--muted); display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.preview-player {
|
||||
display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
|
||||
border: 1px solid var(--border); padding: 2px 6px;
|
||||
}
|
||||
.preview-player button {
|
||||
background: transparent; border: 0; font-size: 14px; padding: 0 2px; cursor: pointer;
|
||||
}
|
||||
.preview-player.playing button { color: var(--accent); }
|
||||
|
||||
/* Leaderboard view */
|
||||
.leaderboard { display: grid; gap: 8px; }
|
||||
.leader-row {
|
||||
display: grid;
|
||||
grid-template-columns: 32px 60px 1fr repeat(6, auto);
|
||||
align-items: center; gap: 10px; padding: 8px 12px;
|
||||
border: 1px solid var(--border); background: var(--panel);
|
||||
}
|
||||
.leader-row .rank { font-weight: 900; font-size: 18px; }
|
||||
.leader-row .art {
|
||||
width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
|
||||
background: #f3f3f3; display: flex; align-items: center; justify-content: center;
|
||||
flex: none;
|
||||
}
|
||||
.leader-row .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.leader-row .art.empty::after { content: '♪'; color: var(--muted); font-size: 22px; }
|
||||
.leader-row .name b { font-size: 14px; }
|
||||
.leader-row .stat-num { font-weight: 800; font-size: 13px; white-space: nowrap; }
|
||||
|
||||
/* Wider dialog for the edit-station experience. */
|
||||
dialog.wide { max-width: 880px; }
|
||||
|
||||
/* ---------- Strong delete confirmation (station removal warns about API impact) ---------- */
|
||||
dialog.danger-confirm {
|
||||
border: 2px solid var(--bad);
|
||||
max-width: 560px;
|
||||
width: 92%;
|
||||
}
|
||||
dialog.danger-confirm form {
|
||||
gap: 14px;
|
||||
padding: 22px;
|
||||
}
|
||||
dialog.danger-confirm .danger-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
dialog.danger-confirm .danger-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--bad);
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
dialog.danger-confirm h2 {
|
||||
margin: 0;
|
||||
color: var(--bad);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: 20px;
|
||||
}
|
||||
dialog.danger-confirm .danger-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
dialog.danger-confirm .lede {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
background: #fde7e6;
|
||||
border-left: 4px solid var(--bad);
|
||||
color: #2a0000;
|
||||
}
|
||||
dialog.danger-confirm .impact {
|
||||
margin: 0;
|
||||
padding-left: 22px;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
line-height: 1.5;
|
||||
}
|
||||
dialog.danger-confirm .impact code,
|
||||
dialog.danger-confirm .type-to-confirm code,
|
||||
dialog.danger-confirm .mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
background: #f0f1f5;
|
||||
padding: 1px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
dialog.danger-confirm .impact-list {
|
||||
background: #fafafc;
|
||||
border: 1px solid var(--border);
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
}
|
||||
dialog.danger-confirm .impact-list-head {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
dialog.danger-confirm .impact-list ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
list-style: square;
|
||||
}
|
||||
dialog.danger-confirm .impact-list li.more {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
list-style: none;
|
||||
margin-left: -16px;
|
||||
}
|
||||
dialog.danger-confirm .type-to-confirm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
dialog.danger-confirm .type-to-confirm input {
|
||||
border: 2px solid var(--bad);
|
||||
font-size: 15px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
dialog.danger-confirm .actions .btn.danger:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
background: var(--panel);
|
||||
color: var(--bad);
|
||||
}
|
||||
dialog.danger-confirm .actions .btn.danger:not(:disabled) {
|
||||
background: var(--bad);
|
||||
color: #fff;
|
||||
border-color: var(--bad);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---------- Read-only metadata block in station detail editor ---------- */
|
||||
.readonly-meta {
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #fafafc;
|
||||
border: 1px solid var(--border);
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.readonly-meta-head {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.readonly-meta .meta-row {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.readonly-meta .meta-k {
|
||||
color: var(--muted);
|
||||
}
|
||||
.readonly-meta .meta-v.mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ---------- Discover table: dim entries already in the library ---------- */
|
||||
tr.discover-existing { opacity: 0.55; }
|
||||
tr.discover-existing td { background: #fafafc; }
|
||||
.main .muted { color: var(--muted); }
|
||||
|
||||
255
web/main.js
255
web/main.js
@@ -15,7 +15,16 @@ const state = {
|
||||
query: '',
|
||||
sort: 'hot', // hot | top | plays | name | controversial — applied in Browse
|
||||
randomMode: localStorage.getItem('oradio.randomMode') === 'favorites' ? 'favorites' : 'all',
|
||||
player: { stationId: null, stationName: null, genres: [], playing: false, loading: false, volume: 0.7, votes: null }
|
||||
// Room sync. mode='play-here' uses local <audio> (default). mode='follow-room'
|
||||
// mirrors the room's display: no local audio, controls forwarded over WS.
|
||||
rooms: [],
|
||||
roomSlug: localStorage.getItem('oradio.room') || null,
|
||||
mode: localStorage.getItem('oradio.mode') === 'follow-room' ? 'follow-room' : 'play-here',
|
||||
roomState: null, // { station, station_id, playing, volume }
|
||||
roomPeers: [], // [{ user, kind }]
|
||||
roomDevices: { list: [], current: null },
|
||||
player: { stationId: null, stationName: null, genres: [], playing: false, loading: false, volume: 0.7, votes: null },
|
||||
session: null // { id, stationId, startedAt } for the currently-open play_history row
|
||||
};
|
||||
|
||||
const player = new Player({
|
||||
@@ -34,11 +43,52 @@ async function bootstrap() {
|
||||
return;
|
||||
}
|
||||
await refreshAll();
|
||||
ws = connectWs(handleWs);
|
||||
// Load rooms; pick the user's personal room if none selected.
|
||||
try {
|
||||
state.rooms = await api.get('/api/rooms');
|
||||
if (!state.roomSlug || !state.rooms.find((r) => r.slug === state.roomSlug)) {
|
||||
state.roomSlug = (state.rooms[0] && state.rooms[0].slug) || `u-${state.user.id}`;
|
||||
localStorage.setItem('oradio.room', state.roomSlug);
|
||||
}
|
||||
} catch { /* falls back to personal room slug */
|
||||
state.roomSlug = state.roomSlug || `u-${state.user.id}`;
|
||||
}
|
||||
openWs();
|
||||
render();
|
||||
requestWakeLock();
|
||||
}
|
||||
|
||||
function openWs() {
|
||||
if (ws) { try { ws.close(); } catch { } }
|
||||
// 'panel' = no local audio, mirror display. 'controller' = play here.
|
||||
const kind = state.mode === 'follow-room' ? 'panel' : 'controller';
|
||||
ws = connectWs(handleWs, { room: state.roomSlug, kind });
|
||||
}
|
||||
|
||||
function setMode(mode) {
|
||||
if (mode !== 'play-here' && mode !== 'follow-room') return;
|
||||
if (state.mode === mode) return;
|
||||
state.mode = mode;
|
||||
localStorage.setItem('oradio.mode', mode);
|
||||
// Stop local playback if switching to follow-room.
|
||||
if (mode === 'follow-room' && state.player.stationId) {
|
||||
player.stop();
|
||||
endCurrentSession();
|
||||
}
|
||||
openWs();
|
||||
render();
|
||||
}
|
||||
|
||||
function setRoom(slug) {
|
||||
if (!slug || state.roomSlug === slug) return;
|
||||
state.roomSlug = slug;
|
||||
localStorage.setItem('oradio.room', slug);
|
||||
state.roomPeers = [];
|
||||
state.roomState = null;
|
||||
openWs();
|
||||
render();
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
const [stations, favs, history, categories] = await Promise.all([
|
||||
api.get(`/api/stations?sort=${encodeURIComponent(state.sort)}`),
|
||||
@@ -57,16 +107,90 @@ async function refreshStations() {
|
||||
}
|
||||
|
||||
function handleWs(msg) {
|
||||
if (msg.type === 'command') {
|
||||
if (msg.action === 'play' && msg.stationId) {
|
||||
const st = state.stations.find((s) => s.id === msg.stationId);
|
||||
if (st) playStation(st);
|
||||
} else if (msg.action === 'pause') player.togglePause();
|
||||
else if (msg.action === 'volume') player.setVolume(msg.value);
|
||||
else if (msg.action === 'stop') player.stop();
|
||||
if (!msg || !msg.type) return;
|
||||
switch (msg.type) {
|
||||
case 'hello':
|
||||
state.roomState = msg.state || null;
|
||||
state.roomPeers = msg.peers || [];
|
||||
if (state.mode === 'follow-room') applyRoomStateToUI();
|
||||
render();
|
||||
return;
|
||||
case 'presence':
|
||||
state.roomPeers = msg.peers || [];
|
||||
render();
|
||||
return;
|
||||
case 'devices':
|
||||
state.roomDevices = { list: msg.list || [], current: msg.current || null };
|
||||
render();
|
||||
return;
|
||||
case 'state':
|
||||
state.roomState = { ...state.roomState, ...msg };
|
||||
if (state.mode === 'follow-room') applyRoomStateToUI();
|
||||
render();
|
||||
return;
|
||||
case 'vote': {
|
||||
// Live vote update from any client (including ourselves).
|
||||
const id = msg.stationId;
|
||||
const stats = msg.stats || {};
|
||||
for (const arr of [state.stations, state.favorites]) {
|
||||
const hit = arr.find((s) => s.id === id);
|
||||
if (hit) {
|
||||
if ('up' in stats) hit.up = stats.up;
|
||||
if ('down' in stats) hit.down = stats.down;
|
||||
if ('score' in stats) hit.score = stats.score;
|
||||
}
|
||||
}
|
||||
if (state.player.votes && state.player.stationId === id) {
|
||||
state.player.votes = { ...state.player.votes, ...stats };
|
||||
}
|
||||
render();
|
||||
return;
|
||||
}
|
||||
case 'plays': {
|
||||
const id = msg.stationId;
|
||||
for (const arr of [state.stations, state.favorites]) {
|
||||
const hit = arr.find((s) => s.id === id);
|
||||
if (hit) hit.plays = msg.plays;
|
||||
}
|
||||
if (state.player.votes && state.player.stationId === id) {
|
||||
state.player.votes = { ...state.player.votes, plays: msg.plays };
|
||||
}
|
||||
render();
|
||||
return;
|
||||
}
|
||||
case 'command': {
|
||||
// Legacy: only act on commands when we're the audio source for this room.
|
||||
if (state.mode !== 'play-here') return;
|
||||
if (msg.action === 'play' && msg.stationId) {
|
||||
const st = state.stations.find((s) => s.id === msg.stationId);
|
||||
if (st) playStation(st);
|
||||
} else if (msg.action === 'pause') player.togglePause();
|
||||
else if (msg.action === 'volume') player.setVolume(msg.value);
|
||||
else if (msg.action === 'stop') player.stop();
|
||||
return;
|
||||
}
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Mirror the authoritative room state into the local "player" view-model so
|
||||
// the now-playing card renders the same on all panels. No local audio plays.
|
||||
function applyRoomStateToUI() {
|
||||
const rs = state.roomState;
|
||||
if (!rs) return;
|
||||
state.player = {
|
||||
...state.player,
|
||||
stationId: rs.station_id ?? rs.station?.id ?? null,
|
||||
stationName: rs.station?.name || null,
|
||||
genres: rs.station?.genres || [],
|
||||
playing: !!rs.playing,
|
||||
loading: false,
|
||||
volume: typeof rs.volume === 'number' ? rs.volume : state.player.volume,
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
function showLogin() {
|
||||
clear(app);
|
||||
const overlay = el('div', { class: 'login' },
|
||||
@@ -134,20 +258,37 @@ function render() {
|
||||
el('button', {
|
||||
class: `btn-play ${p.loading ? 'loading' : ''}`,
|
||||
title: p.playing ? 'Pause' : 'Play',
|
||||
onClick: () => p.stationId ? player.togglePause() : (state.favorites[0] && playStation(state.favorites[0]))
|
||||
onClick: () => {
|
||||
if (state.mode === 'follow-room') {
|
||||
ws?.send({ type: 'command', action: p.playing ? 'pause' : (p.stationId ? 'play' : 'play'), stationId: p.stationId || state.favorites[0]?.id });
|
||||
} else {
|
||||
p.stationId ? player.togglePause() : (state.favorites[0] && playStation(state.favorites[0]));
|
||||
}
|
||||
}
|
||||
}, p.playing ? '❚❚' : '▶'),
|
||||
el('button', {
|
||||
class: 'btn-stop',
|
||||
title: 'Stop',
|
||||
disabled: !p.stationId,
|
||||
onClick: () => player.stop()
|
||||
onClick: () => {
|
||||
if (state.mode === 'follow-room') ws?.send({ type: 'command', action: 'stop' });
|
||||
else { player.stop(); endCurrentSession(); }
|
||||
}
|
||||
}, '■'),
|
||||
el('div', { class: 'vol' },
|
||||
el('span', { class: 'vol-icon' }, p.volume === 0 ? '🔇' : p.volume < 0.5 ? '🔈' : '🔊'),
|
||||
el('input', {
|
||||
type: 'range', min: 0, max: 1, step: 0.05, value: p.volume,
|
||||
'aria-label': 'Volume',
|
||||
onInput: (e) => player.setVolume(Number(e.target.value))
|
||||
onInput: (e) => {
|
||||
const v = Number(e.target.value);
|
||||
if (state.mode === 'follow-room') {
|
||||
state.player.volume = v;
|
||||
ws?.send({ type: 'command', action: 'volume', value: v });
|
||||
} else {
|
||||
player.setVolume(v);
|
||||
}
|
||||
}
|
||||
}),
|
||||
el('span', { class: 'val' }, Math.round(p.volume * 100))
|
||||
)
|
||||
@@ -166,6 +307,7 @@ function render() {
|
||||
)
|
||||
),
|
||||
el('div', { class: 'header-tools' },
|
||||
renderRoomPill(),
|
||||
state.tab === 'browse'
|
||||
? el('select', {
|
||||
class: 'sort',
|
||||
@@ -218,6 +360,30 @@ function render() {
|
||||
}
|
||||
}
|
||||
|
||||
function renderRoomPill() {
|
||||
// Compact: room dropdown + mode toggle + peer count.
|
||||
const peers = state.roomPeers || [];
|
||||
const hasDisplay = peers.some((p) => p.kind === 'display');
|
||||
return el('div', { class: 'room-pill', title: 'Listening room' },
|
||||
el('span', { class: 'room-icon' }, '🏠'),
|
||||
el('select', {
|
||||
class: 'room-select',
|
||||
onChange: (e) => setRoom(e.target.value),
|
||||
'aria-label': 'Room'
|
||||
}, ...(state.rooms.length ? state.rooms : [{ slug: state.roomSlug || '', name: 'My room' }])
|
||||
.map((r) => el('option', { value: r.slug, selected: r.slug === state.roomSlug }, r.name))),
|
||||
el('span', { class: 'room-peers', title: `${peers.length} client(s)${hasDisplay ? ' • display online' : ''}` },
|
||||
`${peers.length}${hasDisplay ? '◉' : ''}`),
|
||||
el('button', {
|
||||
class: `room-mode ${state.mode}`,
|
||||
title: state.mode === 'follow-room'
|
||||
? 'Mirroring the room display. Click to play audio in this browser.'
|
||||
: 'Playing audio in this browser. Click to follow the room display.',
|
||||
onClick: () => setMode(state.mode === 'follow-room' ? 'play-here' : 'follow-room')
|
||||
}, state.mode === 'follow-room' ? 'Follow' : 'Here')
|
||||
);
|
||||
}
|
||||
|
||||
function renderChips() {
|
||||
return el('div', { class: 'chips' },
|
||||
el('button', {
|
||||
@@ -282,10 +448,10 @@ function paintGrid(grid, favIds) {
|
||||
onContextMenu: (e) => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, s); }
|
||||
},
|
||||
el('div', { class: 'art' },
|
||||
s.image_url
|
||||
(s.image_display_url || s.image_url)
|
||||
? el('img', {
|
||||
class: 'art-img',
|
||||
src: s.image_url,
|
||||
src: s.image_display_url || s.image_url,
|
||||
alt: '',
|
||||
loading: 'lazy',
|
||||
referrerpolicy: 'no-referrer',
|
||||
@@ -373,6 +539,35 @@ function recordHistory(stationId) {
|
||||
// so the up/down buttons in the now-playing bar reflect the current station.
|
||||
async function playStation(station) {
|
||||
state.player.votes = null;
|
||||
// Close whatever was playing before; the upcoming POST opens a fresh row.
|
||||
endCurrentSession();
|
||||
if (state.mode === 'follow-room') {
|
||||
// Don't touch local audio — ask the room's display to play and let
|
||||
// the resulting `state` message update our UI.
|
||||
ws?.send({ type: 'command', action: 'play', stationId: station.id });
|
||||
// Optimistically reflect locally so the card highlights immediately.
|
||||
state.player = {
|
||||
...state.player,
|
||||
stationId: station.id,
|
||||
stationName: station.name,
|
||||
genres: station.genres || [],
|
||||
playing: true,
|
||||
loading: false,
|
||||
error: null
|
||||
};
|
||||
render();
|
||||
// No local audio means no local session — the master records its own.
|
||||
try {
|
||||
const stats = await api.get(`/api/stations/${station.id}/votes`);
|
||||
if (state.player.stationId === station.id) {
|
||||
state.player.votes = stats;
|
||||
mergeStats(station.id, stats);
|
||||
render();
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
return;
|
||||
}
|
||||
|
||||
player.play(station);
|
||||
recordHistory(station.id);
|
||||
try {
|
||||
@@ -380,9 +575,17 @@ async function playStation(station) {
|
||||
// Only apply if user hasn't switched stations in the meantime.
|
||||
if (state.player.stationId === station.id) {
|
||||
state.player.votes = stats;
|
||||
// Refresh listing stats in the background so the score badge updates.
|
||||
// Remember the session so we can close it when the user stops or switches.
|
||||
if (stats.sessionId) {
|
||||
state.session = { id: stats.sessionId, stationId: station.id, startedAt: Date.now() };
|
||||
}
|
||||
mergeStats(station.id, stats);
|
||||
render();
|
||||
} else if (stats.sessionId) {
|
||||
// Already moved on while the POST was in flight — close it immediately.
|
||||
api.post(`/api/stations/${station.id}/play/end`, {
|
||||
sessionId: stats.sessionId, duration_ms: 0
|
||||
}).catch(() => { });
|
||||
}
|
||||
} catch (err) {
|
||||
try {
|
||||
@@ -396,6 +599,28 @@ async function playStation(station) {
|
||||
}
|
||||
}
|
||||
|
||||
// Close the currently-open play_history row, crediting the elapsed wall-clock
|
||||
// time toward the station's total_play_ms. Safe to call multiple times.
|
||||
function endCurrentSession({ beacon = false } = {}) {
|
||||
const s = state.session;
|
||||
if (!s || !s.id) return;
|
||||
state.session = null;
|
||||
const body = { sessionId: s.id, duration_ms: Math.max(0, Date.now() - s.startedAt) };
|
||||
const url = `/api/stations/${s.stationId}/play/end`;
|
||||
if (beacon && typeof navigator !== 'undefined' && navigator.sendBeacon) {
|
||||
try {
|
||||
navigator.sendBeacon(url, new Blob([JSON.stringify(body)], { type: 'application/json' }));
|
||||
return;
|
||||
} catch { /* fall through */ }
|
||||
}
|
||||
api.post(url, body).catch(() => { });
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('pagehide', () => endCurrentSession({ beacon: true }));
|
||||
window.addEventListener('beforeunload', () => endCurrentSession({ beacon: true }));
|
||||
}
|
||||
|
||||
async function votePlayer(value) {
|
||||
const id = state.player.stationId;
|
||||
if (!id) return;
|
||||
|
||||
16
web/master/index.html
Normal file
16
web/master/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Radio Master</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
602
web/master/main.js
Normal file
602
web/master/main.js
Normal file
@@ -0,0 +1,602 @@
|
||||
// Master display: owns the audio output for a room. Connects to the WS as
|
||||
// kind='display', advertises a (fake) device list, plays the active station
|
||||
// locally, and emits authoritative `state` events so other panels mirror.
|
||||
//
|
||||
// In production this same page is loaded inside an Electron window. The
|
||||
// `window.oradioNative` bridge — when present — replaces the fake device
|
||||
// enumerator below with the real OS one. The bridge contract is:
|
||||
//
|
||||
// window.oradioNative = {
|
||||
// listOutputs(): Promise<{id, label, kind}[]>,
|
||||
// setOutput(id): Promise<void>,
|
||||
// getCurrent(): Promise<string>,
|
||||
// onCurrentChanged(cb): unsubscribe
|
||||
// };
|
||||
|
||||
import { api } from '../shared/api.js';
|
||||
import { connectWs } from '../shared/ws.js';
|
||||
import { el, clear } from '../shared/dom.js';
|
||||
import { Player } from '../player.js';
|
||||
|
||||
// Fake list mirrors what a typical desktop sees. Used only when no native
|
||||
// bridge is present (i.e. running in a normal browser tab, not Electron).
|
||||
const FAKE_DEVICES = [
|
||||
{ id: 'default', label: 'System default', kind: 'speakers' },
|
||||
{ id: 'speakers-internal', label: 'Built-in speakers', kind: 'speakers' },
|
||||
{ id: 'headphones-jack', label: 'Headphones (3.5mm)', kind: 'headphones' },
|
||||
{ id: 'hdmi-tv', label: 'HDMI – Living-room TV', kind: 'hdmi' },
|
||||
{ id: 'bt-marshall', label: 'Bluetooth – Marshall Stanmore', kind: 'bluetooth' },
|
||||
{ id: 'usb-audient', label: 'USB – Audient EVO 4', kind: 'usb' }
|
||||
];
|
||||
|
||||
const app = document.getElementById('app');
|
||||
const state = {
|
||||
user: null,
|
||||
rooms: [],
|
||||
roomSlug: null,
|
||||
room: null,
|
||||
peers: [],
|
||||
devices: { list: [], current: 'default' },
|
||||
np: {
|
||||
stationId: null, station: null, playing: false,
|
||||
loading: false, volume: 0.7, error: null
|
||||
},
|
||||
voteStats: null,
|
||||
favorites: [],
|
||||
favGenre: '', // active genre filter for favorites browser
|
||||
showOutputs: false, // output picker is hidden behind a button
|
||||
session: null // { id, stationId, startedAt } for the open play_history row
|
||||
};
|
||||
|
||||
const native = window.oradioNative || null;
|
||||
let ws = null;
|
||||
let player = null;
|
||||
|
||||
async function bootstrap() {
|
||||
try { state.user = await api.get('/api/auth/me'); }
|
||||
catch { return showLogin(); }
|
||||
|
||||
// Pick the room: ?room=<slug> wins, else first server-side room, else personal.
|
||||
const params = new URLSearchParams(location.search);
|
||||
const wanted = params.get('room');
|
||||
try {
|
||||
state.rooms = await api.get('/api/rooms');
|
||||
} catch { state.rooms = []; }
|
||||
state.roomSlug = wanted
|
||||
|| (state.rooms[0] && state.rooms[0].slug)
|
||||
|| `u-${state.user.id}`;
|
||||
|
||||
// Initial device list.
|
||||
if (native?.listOutputs) {
|
||||
state.devices.list = await native.listOutputs();
|
||||
state.devices.current = (await native.getCurrent()) || state.devices.list[0]?.id;
|
||||
native.onCurrentChanged?.((id) => { state.devices.current = id; advertiseDevices(); render(); });
|
||||
} else {
|
||||
state.devices.list = FAKE_DEVICES;
|
||||
state.devices.current = 'default';
|
||||
}
|
||||
|
||||
player = new Player({
|
||||
onState: (s) => {
|
||||
Object.assign(state.np, s);
|
||||
// Push display truth out to the room.
|
||||
sendState();
|
||||
render();
|
||||
}
|
||||
});
|
||||
|
||||
// Load favorites so the touch browser + heart indicator work.
|
||||
try { state.favorites = await api.get('/api/me/favorites'); }
|
||||
catch { state.favorites = []; }
|
||||
|
||||
openWs();
|
||||
render();
|
||||
}
|
||||
|
||||
// Best-effort session flush on tab close so total_play_ms stays honest.
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('pagehide', () => endCurrentSession({ beacon: true }));
|
||||
window.addEventListener('beforeunload', () => endCurrentSession({ beacon: true }));
|
||||
}
|
||||
|
||||
function openWs() {
|
||||
if (ws) { try { ws.close(); } catch { } }
|
||||
ws = connectWs(handleWs, {
|
||||
room: state.roomSlug,
|
||||
kind: 'display',
|
||||
onOpen: () => advertiseDevices()
|
||||
});
|
||||
}
|
||||
|
||||
function handleWs(msg) {
|
||||
if (!msg || !msg.type) return;
|
||||
switch (msg.type) {
|
||||
case 'hello': {
|
||||
state.room = msg.room;
|
||||
state.peers = msg.peers || [];
|
||||
// If the server thinks another display already owns this room we
|
||||
// were demoted to 'panel' — surface that.
|
||||
if (msg.you?.kind && msg.you.kind !== 'display') {
|
||||
state.np.error = `This room already has a display (${countDisplays(msg.peers)} active). You were joined as ${msg.you.kind}.`;
|
||||
}
|
||||
// Resume room state when (re-)connecting: play whatever the room
|
||||
// thinks is current, unless we're already on it.
|
||||
const rs = msg.state;
|
||||
if (rs?.station_id && rs.station && rs.station_id !== state.np.stationId) {
|
||||
playStation(rs.station, { silent: true });
|
||||
}
|
||||
if (typeof rs?.volume === 'number') {
|
||||
player.setVolume(rs.volume);
|
||||
}
|
||||
render();
|
||||
return;
|
||||
}
|
||||
case 'presence':
|
||||
state.peers = msg.peers || [];
|
||||
render();
|
||||
return;
|
||||
case 'command':
|
||||
handleCommand(msg);
|
||||
return;
|
||||
case 'vote':
|
||||
case 'plays':
|
||||
if (msg.stationId === state.np.stationId) {
|
||||
state.voteStats = { ...(state.voteStats || {}), ...(msg.stats || {}) };
|
||||
if (msg.type === 'plays') state.voteStats.plays = msg.plays;
|
||||
render();
|
||||
}
|
||||
return;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCommand(msg) {
|
||||
switch (msg.action) {
|
||||
case 'play': {
|
||||
const id = Number(msg.stationId);
|
||||
if (!Number.isFinite(id)) return;
|
||||
api.get(`/api/stations/${id}`).then((st) => playStation(st)).catch(() => { });
|
||||
return;
|
||||
}
|
||||
case 'pause':
|
||||
player.togglePause();
|
||||
return;
|
||||
case 'stop':
|
||||
player.stop();
|
||||
endCurrentSession();
|
||||
state.np.playing = false;
|
||||
state.np.stationId = null;
|
||||
sendState();
|
||||
render();
|
||||
return;
|
||||
case 'volume':
|
||||
if (typeof msg.value === 'number') player.setVolume(msg.value);
|
||||
return;
|
||||
case 'setSink':
|
||||
setSink(String(msg.deviceId || ''));
|
||||
return;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async function playStation(station, { silent } = {}) {
|
||||
if (!station) return;
|
||||
// Close any previous session before swapping. We compute the duration
|
||||
// locally so resumes-after-suspend don't get charged the whole gap.
|
||||
endCurrentSession();
|
||||
state.np.station = station;
|
||||
state.np.stationId = station.id;
|
||||
state.voteStats = {
|
||||
up: station.up || 0, down: station.down || 0,
|
||||
plays: station.plays || 0, score: station.score || 0
|
||||
};
|
||||
render();
|
||||
await player.play(station);
|
||||
if (!silent) {
|
||||
try {
|
||||
const stats = await api.post(`/api/stations/${station.id}/play`);
|
||||
// The same station may have been swapped out while the POST was in
|
||||
// flight — only retain the session id when it's still current.
|
||||
if (state.np.stationId === station.id) {
|
||||
state.session = { id: stats.sessionId, stationId: station.id, startedAt: Date.now() };
|
||||
state.voteStats = { ...state.voteStats, ...stats };
|
||||
} else if (stats.sessionId) {
|
||||
// We've already moved on; close the just-opened session immediately.
|
||||
api.post(`/api/stations/${station.id}/play/end`, {
|
||||
sessionId: stats.sessionId, duration_ms: 0
|
||||
}).catch(() => { });
|
||||
}
|
||||
} catch { /* network blip — best-effort counter */ }
|
||||
}
|
||||
}
|
||||
|
||||
// Close whichever session is currently open. Idempotent.
|
||||
function endCurrentSession({ beacon = false } = {}) {
|
||||
const s = state.session;
|
||||
if (!s || !s.id) return;
|
||||
state.session = null;
|
||||
const body = { sessionId: s.id, duration_ms: Math.max(0, Date.now() - s.startedAt) };
|
||||
const url = `/api/stations/${s.stationId}/play/end`;
|
||||
if (beacon && typeof navigator !== 'undefined' && navigator.sendBeacon) {
|
||||
try {
|
||||
navigator.sendBeacon(url, new Blob([JSON.stringify(body)], { type: 'application/json' }));
|
||||
return;
|
||||
} catch { /* fall through */ }
|
||||
}
|
||||
api.post(url, body).catch(() => { });
|
||||
}
|
||||
|
||||
function sendState() {
|
||||
if (!ws || !state.np.stationId) {
|
||||
ws?.send({
|
||||
type: 'state',
|
||||
stationId: state.np.stationId,
|
||||
playing: !!state.np.playing,
|
||||
volume: state.np.volume
|
||||
});
|
||||
return;
|
||||
}
|
||||
ws.send({
|
||||
type: 'state',
|
||||
stationId: state.np.stationId,
|
||||
playing: !!state.np.playing,
|
||||
volume: state.np.volume
|
||||
});
|
||||
}
|
||||
|
||||
function advertiseDevices() {
|
||||
ws?.send({
|
||||
type: 'devices',
|
||||
list: state.devices.list,
|
||||
current: state.devices.current
|
||||
});
|
||||
}
|
||||
|
||||
async function setSink(deviceId) {
|
||||
if (!deviceId) return;
|
||||
if (native?.setOutput) {
|
||||
try { await native.setOutput(deviceId); }
|
||||
catch (err) { console.warn('[master] setOutput failed', err); return; }
|
||||
}
|
||||
state.devices.current = deviceId;
|
||||
// Browser-only fallback: try `audio.setSinkId` if the device id maps to a
|
||||
// real MediaDevices id. For the fake list this is a no-op visualisation.
|
||||
if (player?.audio?.setSinkId && /^[a-f0-9]{16,}$/.test(deviceId)) {
|
||||
try { await player.audio.setSinkId(deviceId); } catch { }
|
||||
}
|
||||
advertiseDevices();
|
||||
state.showOutputs = false;
|
||||
render();
|
||||
}
|
||||
|
||||
function countDisplays(peers) {
|
||||
return (peers || []).filter((p) => p.kind === 'display').length;
|
||||
}
|
||||
|
||||
// ---------- Favorites ----------
|
||||
|
||||
function isFavorite(stationId) {
|
||||
return !!stationId && state.favorites.some((f) => f.id === stationId);
|
||||
}
|
||||
|
||||
async function toggleFavorite(stationId) {
|
||||
if (!stationId) return;
|
||||
const has = isFavorite(stationId);
|
||||
try {
|
||||
if (has) await api.del(`/api/me/favorites/${stationId}`);
|
||||
else await api.put(`/api/me/favorites/${stationId}`, { position: state.favorites.length });
|
||||
state.favorites = await api.get('/api/me/favorites');
|
||||
render();
|
||||
} catch (err) {
|
||||
console.warn('[master] toggleFavorite failed', err);
|
||||
}
|
||||
}
|
||||
|
||||
function favoriteGenres() {
|
||||
const counts = new Map();
|
||||
for (const s of state.favorites) {
|
||||
for (const g of (s.genres || [])) counts.set(g, (counts.get(g) || 0) + 1);
|
||||
}
|
||||
return [...counts.entries()]
|
||||
.sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
|
||||
.map(([g, n]) => ({ genre: g, count: n }));
|
||||
}
|
||||
|
||||
function filteredFavorites() {
|
||||
if (!state.favGenre) return state.favorites;
|
||||
return state.favorites.filter((s) => (s.genres || []).includes(state.favGenre));
|
||||
}
|
||||
|
||||
// ---------- Render ----------
|
||||
|
||||
function render() {
|
||||
// Preserve scroll position of the favorites grid across re-renders so that
|
||||
// tapping a tile (which triggers a full re-render) does not jump back to top.
|
||||
const prevFavScroll = app.querySelector('.favs-grid')?.scrollLeft ?? 0;
|
||||
clear(app);
|
||||
const np = state.np;
|
||||
const st = np.station;
|
||||
const artUrl = st?.image_display_url || st?.image_url || null;
|
||||
const fav = isFavorite(st?.id);
|
||||
|
||||
const shell = el('div', { class: 'master' },
|
||||
// Topbar
|
||||
el('header', { class: 'topbar' },
|
||||
el('h1', {}, '◉ MASTER'),
|
||||
el('div', { class: 'pill' },
|
||||
el('span', {}, 'Room:'),
|
||||
el('select', {
|
||||
onChange: (e) => {
|
||||
state.roomSlug = e.target.value;
|
||||
history.replaceState(null, '', `?room=${encodeURIComponent(state.roomSlug)}`);
|
||||
openWs();
|
||||
}
|
||||
}, ...state.rooms.map((r) =>
|
||||
el('option', { value: r.slug, selected: r.slug === state.roomSlug }, r.name)))
|
||||
),
|
||||
el('div', { class: 'pill peers' }, `${state.peers.length} peer${state.peers.length === 1 ? '' : 's'}`),
|
||||
np.error ? el('div', { class: 'err-banner' }, np.error) : null,
|
||||
el('div', { class: 'grow' }),
|
||||
el('button', {
|
||||
class: 'pill out-btn' + (state.showOutputs ? ' active' : ''),
|
||||
title: 'Audio output',
|
||||
onClick: () => { state.showOutputs = !state.showOutputs; render(); }
|
||||
}, '🔊 ', currentDeviceLabel()),
|
||||
el('div', { class: 'pill' }, native ? 'native' : 'browser'),
|
||||
el('div', { class: 'pill' }, state.user.username),
|
||||
),
|
||||
|
||||
// Stage: now-playing block (with transport + volume embedded)
|
||||
el('section', { class: 'stage' },
|
||||
el('div', { class: 'np' },
|
||||
el('div', { class: 'art' + (artUrl ? '' : ' empty') },
|
||||
artUrl ? el('img', {
|
||||
class: 'art-img',
|
||||
src: artUrl,
|
||||
alt: '',
|
||||
referrerpolicy: 'no-referrer',
|
||||
onError: (e) => {
|
||||
// Fall back to the empty glyph if the image fails to load.
|
||||
const parent = e.target.parentNode;
|
||||
e.target.remove();
|
||||
if (parent) parent.classList.add('empty');
|
||||
}
|
||||
}) : null
|
||||
),
|
||||
el('div', { class: 'meta' },
|
||||
el('div', { class: 'tiny' }, np.loading ? 'Loading…' : np.playing ? 'Now playing' : st ? 'Paused' : 'Idle'),
|
||||
el('div', { class: 'title-row' },
|
||||
el('h2', {}, st?.name || '—'),
|
||||
st ? el('button', {
|
||||
class: 'fav-toggle' + (fav ? ' on' : ''),
|
||||
title: fav ? 'Remove favorite' : 'Add favorite',
|
||||
onClick: () => toggleFavorite(st.id)
|
||||
}, fav ? '★' : '☆') : null
|
||||
),
|
||||
el('div', { class: 'genres' }, ...(st?.genres || []).slice(0, 6).map((g) => el('span', { class: 'tag' }, g))),
|
||||
state.voteStats ? el('div', { class: 'stats' },
|
||||
el('span', {}, '▲ ', el('b', {}, String(state.voteStats.up || 0))),
|
||||
el('span', {}, '▼ ', el('b', {}, String(state.voteStats.down || 0))),
|
||||
el('span', {}, '▶ ', el('b', {}, String(state.voteStats.plays || 0)))
|
||||
) : null,
|
||||
st?.country ? el('div', { class: 'stats' }, el('span', {}, st.country)) : null,
|
||||
// Transport + volume embedded inside the now-playing block
|
||||
el('div', { class: 'transport' },
|
||||
el('button', {
|
||||
class: 'ctrl primary',
|
||||
title: 'Play / pause',
|
||||
disabled: !st,
|
||||
onClick: () => player.togglePause()
|
||||
}, np.playing ? '❚❚' : '▶'),
|
||||
el('button', {
|
||||
class: 'ctrl',
|
||||
title: 'Stop',
|
||||
disabled: !st,
|
||||
onClick: () => {
|
||||
player.stop();
|
||||
endCurrentSession();
|
||||
state.np.playing = false;
|
||||
sendState();
|
||||
render();
|
||||
}
|
||||
}, '■'),
|
||||
el('div', { class: 'vol' },
|
||||
el('span', { class: 'vol-icon' }, '🔊'),
|
||||
el('input', {
|
||||
type: 'range', min: 0, max: 1, step: 0.01, value: np.volume,
|
||||
onInput: (e) => player.setVolume(Number(e.target.value))
|
||||
}),
|
||||
el('span', { class: 'val' }, Math.round(np.volume * 100) + '%')
|
||||
)
|
||||
),
|
||||
el('div', { class: 'peer-line' },
|
||||
el('span', { class: 'peer-line-label' }, 'In room:'),
|
||||
...(state.peers.length
|
||||
? state.peers.map((p) => el('span', { class: 'peer role-' + p.kind },
|
||||
el('span', { class: 'role-tag' }, p.kind),
|
||||
el('span', {}, p.user?.username || '?')
|
||||
))
|
||||
: [el('span', { class: 'peer' }, 'Just you.')])
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// Bottom: stations grid (2 rows of the viewport)
|
||||
el('section', { class: 'stations-bar' },
|
||||
renderFavoritesCard()
|
||||
),
|
||||
|
||||
// Output picker popover (hidden by default; toggled by topbar button).
|
||||
state.showOutputs ? renderOutputPopover() : null
|
||||
);
|
||||
app.appendChild(shell);
|
||||
// Restore favorites grid scroll position after the DOM swap.
|
||||
const favGrid = app.querySelector('.favs-grid');
|
||||
if (favGrid) {
|
||||
if (prevFavScroll) favGrid.scrollLeft = prevFavScroll;
|
||||
attachDragScroll(favGrid);
|
||||
}
|
||||
}
|
||||
|
||||
// Pointer-drag horizontal scrolling for the favorites strip. Mouse users can
|
||||
// click and drag like a touch surface; we suppress the click on the tile that
|
||||
// was the drag origin so a drag doesn't fire a station change.
|
||||
function attachDragScroll(el) {
|
||||
if (el.dataset.dragBound === '1') return;
|
||||
el.dataset.dragBound = '1';
|
||||
let down = false;
|
||||
let moved = false;
|
||||
let startX = 0;
|
||||
let startScroll = 0;
|
||||
let pointerId = -1;
|
||||
|
||||
el.addEventListener('pointerdown', (e) => {
|
||||
// Only left-button mouse / touch / pen; ignore wheel buttons.
|
||||
if (e.pointerType === 'mouse' && e.button !== 0) return;
|
||||
down = true;
|
||||
moved = false;
|
||||
startX = e.clientX;
|
||||
startScroll = el.scrollLeft;
|
||||
pointerId = e.pointerId;
|
||||
});
|
||||
el.addEventListener('pointermove', (e) => {
|
||||
if (!down) return;
|
||||
const dx = e.clientX - startX;
|
||||
if (!moved && Math.abs(dx) > 5) {
|
||||
moved = true;
|
||||
try { el.setPointerCapture(pointerId); } catch { }
|
||||
el.classList.add('dragging');
|
||||
}
|
||||
if (moved) {
|
||||
el.scrollLeft = startScroll - dx;
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
const endDrag = () => {
|
||||
down = false;
|
||||
if (moved) {
|
||||
// Swallow the click that follows the drag-up so tiles aren't activated.
|
||||
const swallow = (ev) => { ev.stopPropagation(); ev.preventDefault(); };
|
||||
el.addEventListener('click', swallow, { capture: true, once: true });
|
||||
setTimeout(() => el.removeEventListener('click', swallow, true), 0);
|
||||
}
|
||||
moved = false;
|
||||
el.classList.remove('dragging');
|
||||
try { el.releasePointerCapture(pointerId); } catch { }
|
||||
};
|
||||
el.addEventListener('pointerup', endDrag);
|
||||
el.addEventListener('pointercancel', endDrag);
|
||||
el.addEventListener('pointerleave', () => { if (down && !moved) down = false; });
|
||||
}
|
||||
|
||||
function scrollFavs(direction) {
|
||||
const grid = app.querySelector('.favs-grid');
|
||||
if (!grid) return;
|
||||
// Page by ~80% of the visible width, snapping feels natural with scroll-snap.
|
||||
const delta = Math.max(160, Math.round(grid.clientWidth * 0.8));
|
||||
grid.scrollBy({ left: direction * delta, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function renderFavoritesCard() {
|
||||
const genres = favoriteGenres();
|
||||
const favs = filteredFavorites();
|
||||
return el('div', { class: 'card favs-card' },
|
||||
el('div', { class: 'favs-header' },
|
||||
el('h3', {}, `Favorites (${favs.length}${state.favGenre ? `/${state.favorites.length}` : ''})`),
|
||||
genres.length ? el('select', {
|
||||
class: 'genre-filter',
|
||||
title: 'Filter by genre',
|
||||
onChange: (e) => { state.favGenre = e.target.value; render(); }
|
||||
},
|
||||
el('option', { value: '' }, 'All genres'),
|
||||
...genres.map(({ genre, count }) =>
|
||||
el('option', { value: genre, selected: state.favGenre === genre }, `${genre} (${count})`))
|
||||
) : null,
|
||||
el('button', {
|
||||
class: 'favs-nav',
|
||||
title: 'Scroll left',
|
||||
onClick: () => scrollFavs(-1)
|
||||
}, '‹'),
|
||||
el('button', {
|
||||
class: 'favs-nav',
|
||||
title: 'Scroll right',
|
||||
onClick: () => scrollFavs(1)
|
||||
}, '›')
|
||||
),
|
||||
el('div', { class: 'favs-grid' }, ...(favs.length ? favs.map((s) => {
|
||||
const art = s.image_display_url || s.image_url;
|
||||
const active = state.np.stationId === s.id;
|
||||
return el('button', {
|
||||
class: 'fav-tile' + (active ? ' active' : ''),
|
||||
title: s.name,
|
||||
onClick: () => playStation(s)
|
||||
},
|
||||
el('div', {
|
||||
class: 'fav-art' + (art ? '' : ' empty'),
|
||||
style: art ? { backgroundImage: `url("${art}")` } : {}
|
||||
}),
|
||||
el('div', { class: 'fav-name' }, s.name)
|
||||
);
|
||||
}) : [el('div', { class: 'favs-empty' },
|
||||
state.favGenre ? 'No favorites in this genre.' : 'No favorites yet. Star a station to add it.')]))
|
||||
);
|
||||
}
|
||||
|
||||
function renderOutputPopover() {
|
||||
return el('div', {
|
||||
class: 'out-popover-wrap',
|
||||
onClick: (e) => { if (e.target === e.currentTarget) { state.showOutputs = false; render(); } }
|
||||
},
|
||||
el('div', { class: 'out-popover card' },
|
||||
el('div', { class: 'out-popover-head' },
|
||||
el('h3', {}, 'Audio output'),
|
||||
el('button', {
|
||||
class: 'close', title: 'Close',
|
||||
onClick: () => { state.showOutputs = false; render(); }
|
||||
}, '×')
|
||||
),
|
||||
el('div', { class: 'device-list' }, ...state.devices.list.map((d) =>
|
||||
el('button', {
|
||||
class: 'device' + (d.id === state.devices.current ? ' active' : ''),
|
||||
onClick: () => { setSink(d.id); }
|
||||
},
|
||||
el('span', { class: 'dot' }),
|
||||
el('span', { class: 'name' }, d.label),
|
||||
el('span', { class: 'kind' }, d.kind)
|
||||
)))
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function currentDeviceLabel() {
|
||||
const d = state.devices.list.find((d) => d.id === state.devices.current);
|
||||
return d ? d.label : '—';
|
||||
}
|
||||
|
||||
function showLogin() {
|
||||
clear(app);
|
||||
app.appendChild(el('div', { class: 'login' },
|
||||
el('form', {
|
||||
onSubmit: async (e) => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.target);
|
||||
try {
|
||||
state.user = await api.post('/api/auth/login', {
|
||||
username: fd.get('username'), password: fd.get('password')
|
||||
});
|
||||
await bootstrap();
|
||||
} catch (err) { e.target.querySelector('.err').textContent = err.message; }
|
||||
}
|
||||
},
|
||||
el('h1', {}, 'Master sign in'),
|
||||
el('input', { name: 'username', placeholder: 'Username', required: true }),
|
||||
el('input', { name: 'password', type: 'password', placeholder: 'Password', required: true }),
|
||||
el('div', { class: 'err' }),
|
||||
el('button', { type: 'submit' }, 'Sign in')
|
||||
)));
|
||||
}
|
||||
|
||||
bootstrap();
|
||||
723
web/master/style.css
Normal file
723
web/master/style.css
Normal file
@@ -0,0 +1,723 @@
|
||||
/* Master display: dedicated big-screen UI that owns the audio output for a room.
|
||||
* In Phase 3 this same page is loaded inside an Electron window; the audio
|
||||
* device picker below is a faked stand-in for the real OS device enumerator.
|
||||
*
|
||||
* Visual language mirrors the kiosk: flat panels, sharp corners, single accent.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg-0: #07080b;
|
||||
--bg-1: #0e1116;
|
||||
--bg-2: #161a22;
|
||||
--bg-3: #1f242e;
|
||||
--fg: #e9ecf2;
|
||||
--muted: #8a90a0;
|
||||
--muted-2: #5d6373;
|
||||
--line: #262b36;
|
||||
--accent: #ff7a3d;
|
||||
--accent-2: #ffb37a;
|
||||
--accent-glow: rgba(255, 122, 61, 0.35);
|
||||
--ok: #4ec9a6;
|
||||
--warn: #ffd166;
|
||||
--err: #ec6a6a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(1200px 600px at 30% -10%, rgba(255, 122, 61, 0.06), transparent 60%),
|
||||
var(--bg-0);
|
||||
color: var(--fg);
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login form {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 24px;
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.login input,
|
||||
.login button {
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-2);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--line);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login button {
|
||||
background: var(--accent);
|
||||
color: #1a0a00;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.login .err {
|
||||
color: var(--err);
|
||||
font-size: 12px;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
/* ---------- Master shell ----------
|
||||
* Top bar | now-playing (height = cover art) | stations grid (rest, horizontal scroll)
|
||||
*/
|
||||
.master {
|
||||
display: grid;
|
||||
grid-template-rows: 56px auto 1fr;
|
||||
height: 100%;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.master .topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--bg-1);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.master .topbar h1 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.master .topbar .grow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.master .topbar .pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
height: 32px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.master .topbar select,
|
||||
.master .topbar input,
|
||||
.master .topbar button {
|
||||
background: var(--bg-2);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--line);
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.master .topbar button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.master .topbar .peers {
|
||||
color: var(--muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.master .topbar .status-on {
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.master .topbar .status-off {
|
||||
color: var(--muted-2);
|
||||
}
|
||||
|
||||
/* ---------- Stage: now-playing block ---------- */
|
||||
.master .stage {
|
||||
padding: 12px 16px 8px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Block height is dictated by the square cover art — the meta column simply
|
||||
* fills the same height. */
|
||||
.master .np {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 20px;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
|
||||
var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
padding: 14px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.master .np::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(600px 220px at 0% 0%, var(--accent-glow), transparent 70%);
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.master .np > * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.master .np .art {
|
||||
height: clamp(180px, 28vh, 300px);
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
background: var(--bg-2);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
|
||||
border: 1px solid var(--line);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.master .np .art .art-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.master .np .art.empty::after {
|
||||
content: "♪";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 64px;
|
||||
color: var(--muted-2);
|
||||
}
|
||||
|
||||
.master .np .meta {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
align-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.master .np .meta .tiny {
|
||||
color: var(--muted-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .14em;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.master .np .meta h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(20px, 2.4vw, 34px);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.master .np .meta .genres {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.master .np .meta .tag {
|
||||
padding: 3px 10px;
|
||||
background: rgba(255, 179, 122, 0.10);
|
||||
color: var(--accent-2);
|
||||
border: 1px solid rgba(255, 179, 122, 0.18);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.master .np .meta .stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.master .np .meta .stats b {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* ---------- Transport (embedded in now-playing) ---------- */
|
||||
.master .np .transport {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.master .ctrl {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: background 120ms, border-color 120ms, transform 80ms;
|
||||
}
|
||||
|
||||
.master .ctrl:hover:not(:disabled) {
|
||||
background: var(--bg-3);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.master .ctrl:active:not(:disabled) {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.master .ctrl:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.master .ctrl.primary {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #1a0a00;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 6px 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.master .ctrl.primary:hover:not(:disabled) {
|
||||
background: #ff8a55;
|
||||
border-color: #ff8a55;
|
||||
}
|
||||
|
||||
.master .vol {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 12px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
flex: 1;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.master .vol .vol-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.master .vol input[type=range] {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.master .vol .val {
|
||||
width: 36px;
|
||||
text-align: right;
|
||||
color: var(--muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ---------- Peers line inside meta ---------- */
|
||||
.master .np .peer-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.master .np .peer-line-label {
|
||||
color: var(--muted-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.master .peer {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.master .peer .role-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.master .peer.role-display .role-tag {
|
||||
color: var(--accent-2);
|
||||
border-color: rgba(255, 122, 61, 0.4);
|
||||
}
|
||||
|
||||
/* ---------- Bottom stations bar (two rows of tiles) ---------- */
|
||||
.master .stations-bar {
|
||||
padding: 0 24px 20px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.master .err-banner {
|
||||
background: rgba(236, 106, 106, 0.12);
|
||||
border: 1px solid rgba(236, 106, 106, 0.4);
|
||||
color: var(--err);
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* ---------- Cover art now-playing extras ---------- */
|
||||
.master .np .meta .title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.master .np .meta .title-row h2 {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.master .np .meta .fav-toggle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
transition: background 120ms, color 120ms, border-color 120ms;
|
||||
}
|
||||
|
||||
.master .np .meta .fav-toggle:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.master .np .meta .fav-toggle.on {
|
||||
background: linear-gradient(180deg, rgba(255, 122, 61, 0.25), rgba(255, 122, 61, 0.12));
|
||||
border-color: rgba(255, 122, 61, 0.5);
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 12px var(--accent-glow);
|
||||
}
|
||||
|
||||
/* ---------- Output picker (hidden behind button) ---------- */
|
||||
.master .topbar .out-btn {
|
||||
cursor: pointer;
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.master .topbar .out-btn.active {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.out-popover-wrap {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: grid;
|
||||
place-items: start center;
|
||||
padding-top: 64px;
|
||||
z-index: 50;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.out-popover {
|
||||
width: min(440px, 92vw);
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
padding: 14px;
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.out-popover-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.out-popover-head h3 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .12em;
|
||||
}
|
||||
|
||||
.out-popover .close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.out-popover .device-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.out-popover .device {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.out-popover .device:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.out-popover .device.active {
|
||||
background: linear-gradient(180deg, rgba(255, 122, 61, 0.18), rgba(255, 122, 61, 0.08));
|
||||
border-color: rgba(255, 122, 61, 0.4);
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.out-popover .device .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.out-popover .device.active .dot {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
}
|
||||
|
||||
.out-popover .device .name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.out-popover .device .kind {
|
||||
color: var(--muted-2);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
/* ---------- Favorites browser (bottom 2-row touch grid) ---------- */
|
||||
.master .favs-card {
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
padding: 10px 12px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.master .favs-card .favs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.master .favs-card .favs-header h3 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .12em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.master .favs-card .genre-filter {
|
||||
background: var(--bg-2);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--line);
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.master .favs-nav {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background 120ms, border-color 120ms, transform 80ms;
|
||||
}
|
||||
|
||||
.master .favs-nav:hover {
|
||||
background: var(--bg-3);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.master .favs-nav:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
/* Two-row horizontal-scrolling grid of square tiles. Tile height = half the
|
||||
* container height; aspect-ratio 1/1 makes them visually square. */
|
||||
.master .favs-grid {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
gap: 8px;
|
||||
padding: 2px 2px 8px;
|
||||
scroll-snap-type: x proximity;
|
||||
scrollbar-gutter: stable;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.master .favs-grid.dragging {
|
||||
cursor: grabbing;
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.master .favs-grid.dragging .fav-tile {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.master .favs-grid::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.master .fav-tile {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: transform 80ms ease, border-color 120ms, background 120ms;
|
||||
height: calc((100% - 8px) / 2);
|
||||
aspect-ratio: 1 / 1;
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: start;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.master .fav-tile:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-3);
|
||||
}
|
||||
|
||||
.master .fav-tile:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.master .fav-tile.active {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px var(--accent-glow);
|
||||
}
|
||||
|
||||
.master .fav-art {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
background: var(--bg-1) center/cover no-repeat;
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
justify-self: center;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.master .fav-art.empty::after {
|
||||
content: "♪";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--muted-2);
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.master .fav-name {
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: var(--fg);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.master .favs-empty {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
padding: 12px 4px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
@@ -1,13 +1,18 @@
|
||||
export function connectWs(onMessage) {
|
||||
export function connectWs(onMessage, opts = {}) {
|
||||
let ws, retry = 0, closed = false;
|
||||
function open() {
|
||||
const proto = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
ws = new WebSocket(`${proto}://${location.host}/ws`);
|
||||
ws.addEventListener('open', () => { retry = 0; });
|
||||
const params = new URLSearchParams();
|
||||
if (opts.room) params.set('room', opts.room);
|
||||
if (opts.kind) params.set('kind', opts.kind);
|
||||
const qs = params.toString();
|
||||
ws = new WebSocket(`${proto}://${location.host}/ws${qs ? '?' + qs : ''}`);
|
||||
ws.addEventListener('open', () => { retry = 0; opts.onOpen?.(); });
|
||||
ws.addEventListener('message', (ev) => {
|
||||
try { onMessage(JSON.parse(ev.data)); } catch { }
|
||||
});
|
||||
ws.addEventListener('close', () => {
|
||||
opts.onClose?.();
|
||||
if (closed) return;
|
||||
retry = Math.min(retry + 1, 6);
|
||||
setTimeout(open, 500 * 2 ** retry);
|
||||
@@ -17,6 +22,7 @@ export function connectWs(onMessage) {
|
||||
open();
|
||||
return {
|
||||
send(msg) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg)); },
|
||||
close() { closed = true; ws?.close(); }
|
||||
close() { closed = true; ws?.close(); },
|
||||
get readyState() { return ws?.readyState; }
|
||||
};
|
||||
}
|
||||
|
||||
@@ -313,6 +313,49 @@ textarea {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Room sync pill: room picker + peer count + here/follow mode toggle. */
|
||||
.room-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
height: 36px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.room-pill .room-icon { opacity: .7; }
|
||||
.room-pill .room-select {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
max-width: 140px;
|
||||
}
|
||||
.room-pill .room-peers {
|
||||
color: var(--muted-2);
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.room-pill .room-mode {
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--bg-1);
|
||||
color: var(--fg);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.room-pill .room-mode.follow-room {
|
||||
background: linear-gradient(180deg, rgba(255, 122, 61, 0.18), rgba(255, 122, 61, 0.08));
|
||||
color: var(--accent-2);
|
||||
border-color: rgba(255, 122, 61, 0.30);
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 220px;
|
||||
padding: 8px 12px;
|
||||
|
||||
Reference in New Issue
Block a user