Add API documentation and underground station importer
- Introduced a new HTML documentation page for the oradio API, including a JavaScript file to handle dynamic content and API requests. - Added a CSS file for styling the documentation page. - Implemented an underground station importer script that fetches data from Radio-Browser and writes it to a JSON file. - Created a stats module to compute and manage vote and play statistics for radio stations. - Added a polyfill for modulepreload to ensure compatibility with older browsers.
This commit is contained in:
Marco Mooren
@@ -1,13 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Radio Admin</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -5,289 +5,313 @@ const app = document.getElementById('app');
|
||||
const state = { user: null, view: 'stations', stations: [], users: [], system: null, search: '' };
|
||||
|
||||
async function bootstrap() {
|
||||
try { state.user = await api.get('/api/auth/me'); }
|
||||
catch { return showLogin(); }
|
||||
if (state.user.role !== 'admin') {
|
||||
app.innerHTML = `<div class="login"><div><h1>Admin only</h1><p>Signed in as ${state.user.username} (${state.user.role}).</p></div></div>`;
|
||||
return;
|
||||
}
|
||||
await refresh();
|
||||
render();
|
||||
try { state.user = await api.get('/api/auth/me'); }
|
||||
catch { return showLogin(); }
|
||||
if (state.user.role !== 'admin') {
|
||||
app.innerHTML = `<div class="login"><div><h1>Admin only</h1><p>Signed in as ${state.user.username} (${state.user.role}).</p></div></div>`;
|
||||
return;
|
||||
}
|
||||
await refresh();
|
||||
render();
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
const tasks = [api.get('/api/stations?all=1')];
|
||||
if (state.view === 'users') tasks.push(api.get('/api/auth/users'));
|
||||
if (state.view === 'system') tasks.push(api.get('/api/admin/system'));
|
||||
const [stations, more1, more2] = await Promise.all(tasks);
|
||||
state.stations = stations;
|
||||
if (state.view === 'users') state.users = more1 || [];
|
||||
if (state.view === 'system') state.system = more1 || more2 || null;
|
||||
const tasks = [api.get('/api/stations?all=1')];
|
||||
if (state.view === 'users') tasks.push(api.get('/api/auth/users'));
|
||||
if (state.view === 'system') tasks.push(api.get('/api/admin/system'));
|
||||
const [stations, more1, more2] = await Promise.all(tasks);
|
||||
state.stations = stations;
|
||||
if (state.view === 'users') state.users = more1 || [];
|
||||
if (state.view === 'system') state.system = more1 || more2 || null;
|
||||
}
|
||||
|
||||
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', {}, 'Admin 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', { class: 'btn primary', type: 'submit' }, 'Sign in')
|
||||
)));
|
||||
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', {}, 'Admin 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', { class: 'btn primary', type: 'submit' }, 'Sign in')
|
||||
)));
|
||||
}
|
||||
|
||||
function render() {
|
||||
clear(app);
|
||||
const side = el('aside', { class: 'side' },
|
||||
el('h1', {}, 'Online Radio Explorer'),
|
||||
...['stations', 'import', 'users', 'system'].map((v) =>
|
||||
el('button', { class: `nav ${state.view === v ? 'active' : ''}`,
|
||||
onClick: async () => { state.view = v; await refresh(); render(); } }, label(v))),
|
||||
el('div', { class: 'me' }, `Signed in as ${state.user.username}`,
|
||||
el('br'),
|
||||
el('a', { href: '#', onClick: async (e) => { e.preventDefault(); await api.post('/api/auth/logout'); location.reload(); } }, 'Sign out'))
|
||||
);
|
||||
const main = el('main', { class: 'main' });
|
||||
if (state.view === 'stations') renderStations(main);
|
||||
else if (state.view === 'import') renderImport(main);
|
||||
else if (state.view === 'users') renderUsers(main);
|
||||
else if (state.view === 'system') renderSystem(main);
|
||||
app.appendChild(el('div', { class: 'shell' }, side, main));
|
||||
clear(app);
|
||||
const side = el('aside', { class: 'side' },
|
||||
el('h1', {}, 'Online Radio Explorer'),
|
||||
...['stations', 'import', 'users', 'system'].map((v) =>
|
||||
el('button', {
|
||||
class: `nav ${state.view === v ? 'active' : ''}`,
|
||||
onClick: async () => { state.view = v; await refresh(); render(); }
|
||||
}, label(v))),
|
||||
el('div', { class: 'me' }, `Signed in as ${state.user.username}`,
|
||||
el('br'),
|
||||
el('a', { href: '#', onClick: async (e) => { e.preventDefault(); await api.post('/api/auth/logout'); location.reload(); } }, 'Sign out'))
|
||||
);
|
||||
const main = el('main', { class: 'main' });
|
||||
if (state.view === 'stations') renderStations(main);
|
||||
else if (state.view === 'import') renderImport(main);
|
||||
else if (state.view === 'users') renderUsers(main);
|
||||
else if (state.view === 'system') renderSystem(main);
|
||||
app.appendChild(el('div', { class: 'shell' }, side, main));
|
||||
}
|
||||
|
||||
function label(v) {
|
||||
return ({ stations: 'Stations', import: 'Import', users: 'Users', system: 'System' })[v];
|
||||
return ({ stations: 'Stations', import: 'Import', users: 'Users', system: 'System' })[v];
|
||||
}
|
||||
|
||||
// ---------- Stations ----------
|
||||
function renderStations(root) {
|
||||
root.appendChild(el('div', { class: 'bar' },
|
||||
el('input', { placeholder: 'Search…', value: state.search,
|
||||
onInput: (e) => { state.search = e.target.value; renderStationsTable(); } }),
|
||||
el('button', { class: 'btn primary', onClick: () => openStationDialog() }, '+ Add station'),
|
||||
el('button', { class: 'btn', onClick: async () => { await api.post('/api/admin/health-check'); alert('Health check finished'); await refresh(); render(); } }, 'Run health check')
|
||||
));
|
||||
const tableWrap = el('div', { id: 'tableWrap' });
|
||||
root.appendChild(tableWrap);
|
||||
renderStationsTable();
|
||||
root.appendChild(el('div', { class: 'bar' },
|
||||
el('input', {
|
||||
placeholder: 'Search…', value: state.search,
|
||||
onInput: (e) => { state.search = e.target.value; renderStationsTable(); }
|
||||
}),
|
||||
el('button', { class: 'btn primary', onClick: () => openStationDialog() }, '+ Add station'),
|
||||
el('button', { class: 'btn', onClick: async () => { await api.post('/api/admin/health-check'); alert('Health check finished'); await refresh(); render(); } }, 'Run health check')
|
||||
));
|
||||
const tableWrap = el('div', { id: 'tableWrap' });
|
||||
root.appendChild(tableWrap);
|
||||
renderStationsTable();
|
||||
}
|
||||
|
||||
function renderStationsTable() {
|
||||
const wrap = document.getElementById('tableWrap');
|
||||
if (!wrap) return;
|
||||
clear(wrap);
|
||||
const q = state.search.toLowerCase();
|
||||
const filtered = state.stations.filter((s) =>
|
||||
!q || s.name.toLowerCase().includes(q) || (s.country || '').toLowerCase().includes(q) ||
|
||||
(s.genres || []).some((g) => g.toLowerCase().includes(q))
|
||||
);
|
||||
const table = el('table', {},
|
||||
el('thead', {}, el('tr', {},
|
||||
el('th', {}, 'Name'), el('th', {}, 'Source'), el('th', {}, 'Genres'),
|
||||
el('th', {}, 'Country'), el('th', {}, 'Enabled'), el('th', {}, 'Actions'))),
|
||||
el('tbody', {}, ...filtered.map((s) => el('tr', {},
|
||||
el('td', {}, el('strong', {}, s.name), el('br'), el('small', {}, s.homepage || '')),
|
||||
el('td', {}, s.source),
|
||||
el('td', {}, ...(s.genres || []).slice(0, 4).map((g) => el('span', { class: 'tag' }, g))),
|
||||
el('td', {}, s.country || ''),
|
||||
el('td', {}, s.enabled ? '✅' : '⛔'),
|
||||
el('td', {},
|
||||
el('button', { class: 'btn', onClick: () => openStationDialog(s.id) }, 'Edit'),
|
||||
' ',
|
||||
el('button', { class: 'btn danger', onClick: async () => {
|
||||
if (confirm(`Delete ${s.name}?`)) { await api.del(`/api/stations/${s.id}`); await refresh(); render(); }
|
||||
} }, 'Delete')
|
||||
)
|
||||
)))
|
||||
);
|
||||
wrap.appendChild(table);
|
||||
const wrap = document.getElementById('tableWrap');
|
||||
if (!wrap) return;
|
||||
clear(wrap);
|
||||
const q = state.search.toLowerCase();
|
||||
const filtered = state.stations.filter((s) =>
|
||||
!q || s.name.toLowerCase().includes(q) || (s.country || '').toLowerCase().includes(q) ||
|
||||
(s.genres || []).some((g) => g.toLowerCase().includes(q))
|
||||
);
|
||||
const table = el('table', {},
|
||||
el('thead', {}, el('tr', {},
|
||||
el('th', {}, 'Name'), el('th', {}, 'Source'), el('th', {}, 'Genres'),
|
||||
el('th', {}, 'Country'), el('th', {}, 'Enabled'), el('th', {}, 'Actions'))),
|
||||
el('tbody', {}, ...filtered.map((s) => el('tr', {},
|
||||
el('td', {}, el('strong', {}, s.name), el('br'), el('small', {}, s.homepage || '')),
|
||||
el('td', {}, s.source),
|
||||
el('td', {}, ...(s.genres || []).slice(0, 4).map((g) => el('span', { class: 'tag' }, g))),
|
||||
el('td', {}, s.country || ''),
|
||||
el('td', {}, s.enabled ? '✅' : '⛔'),
|
||||
el('td', {},
|
||||
el('button', { class: 'btn', onClick: () => openStationDialog(s.id) }, 'Edit'),
|
||||
' ',
|
||||
el('button', {
|
||||
class: 'btn danger', onClick: async () => {
|
||||
if (confirm(`Delete ${s.name}?`)) { await api.del(`/api/stations/${s.id}`); await refresh(); render(); }
|
||||
}
|
||||
}, 'Delete')
|
||||
)
|
||||
)))
|
||||
);
|
||||
wrap.appendChild(table);
|
||||
}
|
||||
|
||||
async function openStationDialog(id) {
|
||||
const station = id ? await api.get(`/api/stations/${id}`) : { name: '', genres: [], streams: [], enabled: true };
|
||||
const dlg = el('dialog');
|
||||
const streamsBox = el('div', { class: 'streams' });
|
||||
const station = id ? await api.get(`/api/stations/${id}`) : { name: '', genres: [], streams: [], enabled: true };
|
||||
const dlg = el('dialog');
|
||||
const streamsBox = el('div', { class: 'streams' });
|
||||
|
||||
function paintStreams() {
|
||||
clear(streamsBox);
|
||||
streamsBox.appendChild(el('div', { style: { fontWeight: 600, marginBottom: '6px' } }, 'Streams'));
|
||||
if (!station.streams?.length) streamsBox.appendChild(el('div', { style: { color: '#6b7280' } }, 'No streams yet.'));
|
||||
for (const s of station.streams || []) {
|
||||
streamsBox.appendChild(el('div', { class: 'stream-row' },
|
||||
el('select', { onChange: (e) => s.format = e.target.value },
|
||||
...['mp3','aac','hls','m3u','pls','ogg','unknown'].map((f) =>
|
||||
el('option', { value: f, selected: s.format === f }, f))),
|
||||
el('input', { value: s.url, placeholder: 'https://…', onInput: (e) => s.url = e.target.value }),
|
||||
el('input', { type: 'number', placeholder: 'kbps', value: s.bitrate || '', onInput: (e) => s.bitrate = Number(e.target.value) || null }),
|
||||
el('input', { value: s.label || '', placeholder: 'Label', onInput: (e) => s.label = e.target.value }),
|
||||
s.last_status ? el('span', { class: `pill ${s.last_status === 'up' ? 'up' : 'down'}` }, s.last_status) : el('span'),
|
||||
el('button', { class: 'btn danger', type: 'button', onClick: () => { station.streams = station.streams.filter((x) => x !== s); paintStreams(); } }, '×')
|
||||
));
|
||||
function paintStreams() {
|
||||
clear(streamsBox);
|
||||
streamsBox.appendChild(el('div', { style: { fontWeight: 600, marginBottom: '6px' } }, 'Streams'));
|
||||
if (!station.streams?.length) streamsBox.appendChild(el('div', { style: { color: '#6b7280' } }, 'No streams yet.'));
|
||||
for (const s of station.streams || []) {
|
||||
streamsBox.appendChild(el('div', { class: 'stream-row' },
|
||||
el('select', { onChange: (e) => s.format = e.target.value },
|
||||
...['mp3', 'aac', 'hls', 'm3u', 'pls', 'ogg', 'unknown'].map((f) =>
|
||||
el('option', { value: f, selected: s.format === f }, f))),
|
||||
el('input', { value: s.url, placeholder: 'https://…', onInput: (e) => s.url = e.target.value }),
|
||||
el('input', { type: 'number', placeholder: 'kbps', value: s.bitrate || '', onInput: (e) => s.bitrate = Number(e.target.value) || null }),
|
||||
el('input', { value: s.label || '', placeholder: 'Label', onInput: (e) => s.label = e.target.value }),
|
||||
s.last_status ? el('span', { class: `pill ${s.last_status === 'up' ? 'up' : 'down'}` }, s.last_status) : el('span'),
|
||||
el('button', { class: 'btn danger', type: 'button', onClick: () => { station.streams = station.streams.filter((x) => x !== s); paintStreams(); } }, '×')
|
||||
));
|
||||
}
|
||||
streamsBox.appendChild(el('button', {
|
||||
class: 'btn', type: 'button', onClick: () => {
|
||||
station.streams = [...(station.streams || []), { url: '', format: 'mp3', priority: (station.streams?.length || 0) }];
|
||||
paintStreams();
|
||||
}
|
||||
}, '+ Add stream'));
|
||||
}
|
||||
streamsBox.appendChild(el('button', { class: 'btn', type: 'button', onClick: () => {
|
||||
station.streams = [...(station.streams || []), { url: '', format: 'mp3', priority: (station.streams?.length || 0) }];
|
||||
paintStreams();
|
||||
} }, '+ Add stream'));
|
||||
}
|
||||
|
||||
const form = el('form', { method: 'dialog', onSubmit: async (e) => {
|
||||
e.preventDefault();
|
||||
const payload = {
|
||||
name: station.name, homepage: station.homepage, country: station.country,
|
||||
genres: station.genres, description: station.description, image_url: station.image_url,
|
||||
enabled: station.enabled
|
||||
};
|
||||
if (id) {
|
||||
await api.patch(`/api/stations/${id}`, payload);
|
||||
// sync streams: simple approach — delete all & re-add
|
||||
const fresh = await api.get(`/api/stations/${id}`);
|
||||
for (const s of fresh.streams || []) await api.del(`/api/stations/${id}/streams/${s.id}`);
|
||||
for (const s of station.streams || []) if (s.url) await api.post(`/api/stations/${id}/streams`, s);
|
||||
} else {
|
||||
payload.streams = (station.streams || []).filter((s) => s.url);
|
||||
await api.post('/api/stations', payload);
|
||||
}
|
||||
dlg.close();
|
||||
await refresh();
|
||||
render();
|
||||
} },
|
||||
el('h2', {}, id ? 'Edit station' : 'Add station'),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Name'), el('input', { value: station.name, onInput: (e) => station.name = e.target.value, required: true })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Homepage'), el('input', { value: station.homepage || '', onInput: (e) => station.homepage = e.target.value })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Country'), el('input', { value: station.country || '', maxlength: 4, onInput: (e) => station.country = e.target.value })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Genres'), el('input', { value: (station.genres || []).join(', '), onInput: (e) => station.genres = e.target.value.split(',').map((s) => s.trim()).filter(Boolean) })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Image URL'),el('input', { value: station.image_url || '', onInput: (e) => station.image_url = e.target.value })),
|
||||
el('div', { class: 'row col' }, el('textarea', { rows: 2, placeholder: 'Description', onInput: (e) => station.description = e.target.value }, station.description || '')),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Enabled'), el('input', { type: 'checkbox', checked: station.enabled, onChange: (e) => station.enabled = e.target.checked })),
|
||||
streamsBox,
|
||||
el('div', { class: 'actions' },
|
||||
el('button', { class: 'btn', type: 'button', onClick: () => dlg.close() }, 'Cancel'),
|
||||
el('button', { class: 'btn primary', type: 'submit' }, 'Save'))
|
||||
);
|
||||
paintStreams();
|
||||
dlg.appendChild(form);
|
||||
document.body.appendChild(dlg);
|
||||
dlg.showModal();
|
||||
dlg.addEventListener('close', () => dlg.remove());
|
||||
const form = el('form', {
|
||||
method: 'dialog', onSubmit: async (e) => {
|
||||
e.preventDefault();
|
||||
const payload = {
|
||||
name: station.name, homepage: station.homepage, country: station.country,
|
||||
genres: station.genres, description: station.description, image_url: station.image_url,
|
||||
enabled: station.enabled
|
||||
};
|
||||
if (id) {
|
||||
await api.patch(`/api/stations/${id}`, payload);
|
||||
// sync streams: simple approach — delete all & re-add
|
||||
const fresh = await api.get(`/api/stations/${id}`);
|
||||
for (const s of fresh.streams || []) await api.del(`/api/stations/${id}/streams/${s.id}`);
|
||||
for (const s of station.streams || []) if (s.url) await api.post(`/api/stations/${id}/streams`, s);
|
||||
} else {
|
||||
payload.streams = (station.streams || []).filter((s) => s.url);
|
||||
await api.post('/api/stations', payload);
|
||||
}
|
||||
dlg.close();
|
||||
await refresh();
|
||||
render();
|
||||
}
|
||||
},
|
||||
el('h2', {}, id ? 'Edit station' : 'Add station'),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Name'), el('input', { value: station.name, onInput: (e) => station.name = e.target.value, required: true })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Homepage'), el('input', { value: station.homepage || '', onInput: (e) => station.homepage = e.target.value })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Country'), el('input', { value: station.country || '', maxlength: 4, onInput: (e) => station.country = e.target.value })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Genres'), el('input', { value: (station.genres || []).join(', '), onInput: (e) => station.genres = e.target.value.split(',').map((s) => s.trim()).filter(Boolean) })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Image URL'), el('input', { value: station.image_url || '', onInput: (e) => station.image_url = e.target.value })),
|
||||
el('div', { class: 'row col' }, el('textarea', { rows: 2, placeholder: 'Description', onInput: (e) => station.description = e.target.value }, station.description || '')),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Enabled'), el('input', { type: 'checkbox', checked: station.enabled, onChange: (e) => station.enabled = e.target.checked })),
|
||||
streamsBox,
|
||||
el('div', { class: 'actions' },
|
||||
el('button', { class: 'btn', type: 'button', onClick: () => dlg.close() }, 'Cancel'),
|
||||
el('button', { class: 'btn primary', type: 'submit' }, 'Save'))
|
||||
);
|
||||
paintStreams();
|
||||
dlg.appendChild(form);
|
||||
document.body.appendChild(dlg);
|
||||
dlg.showModal();
|
||||
dlg.addEventListener('close', () => dlg.remove());
|
||||
}
|
||||
|
||||
// ---------- Import (Radio-Browser) ----------
|
||||
function renderImport(root) {
|
||||
let results = [];
|
||||
const resultsBox = el('div');
|
||||
root.appendChild(el('h2', {}, 'Import from Radio-Browser'));
|
||||
root.appendChild(el('div', { class: 'bar' },
|
||||
el('input', { id: 'rbq', placeholder: 'Search by name…' }),
|
||||
el('input', { id: 'rbcountry', placeholder: 'Country (e.g. NL)', style: { minWidth: '120px' } }),
|
||||
el('input', { id: 'rbtag', placeholder: 'Tag/genre' }),
|
||||
el('button', { class: 'btn primary', onClick: async () => {
|
||||
const params = new URLSearchParams({
|
||||
q: document.getElementById('rbq').value,
|
||||
country: document.getElementById('rbcountry').value,
|
||||
tag: document.getElementById('rbtag').value
|
||||
});
|
||||
results = await api.get(`/api/stations/sources/radiobrowser/search?${params}`);
|
||||
paint();
|
||||
} }, 'Search')
|
||||
));
|
||||
root.appendChild(resultsBox);
|
||||
function paint() {
|
||||
clear(resultsBox);
|
||||
if (!results.length) { resultsBox.appendChild(el('p', {}, 'No results yet.')); return; }
|
||||
const table = el('table', {},
|
||||
el('thead', {}, el('tr', {}, el('th', {}, 'Name'), el('th', {}, 'Country'), el('th', {}, 'Tags'), el('th', {}, 'Stream'), el('th', {}, ''))),
|
||||
el('tbody', {}, ...results.map((s) => el('tr', {},
|
||||
el('td', {}, s.name),
|
||||
el('td', {}, s.country || ''),
|
||||
el('td', {}, ...(s.genres || []).slice(0, 4).map((g) => el('span', { class: 'tag' }, g))),
|
||||
el('td', {}, el('small', {}, (s.streams[0]?.format || '') + ' ' + (s.streams[0]?.bitrate || ''))),
|
||||
el('td', {}, el('button', { class: 'btn primary', onClick: async () => {
|
||||
await api.post('/api/stations/sources/radiobrowser/import', s);
|
||||
alert(`Imported ${s.name}`);
|
||||
} }, 'Import'))
|
||||
)))
|
||||
);
|
||||
resultsBox.appendChild(table);
|
||||
}
|
||||
let results = [];
|
||||
const resultsBox = el('div');
|
||||
root.appendChild(el('h2', {}, 'Import from Radio-Browser'));
|
||||
root.appendChild(el('div', { class: 'bar' },
|
||||
el('input', { id: 'rbq', placeholder: 'Search by name…' }),
|
||||
el('input', { id: 'rbcountry', placeholder: 'Country (e.g. NL)', style: { minWidth: '120px' } }),
|
||||
el('input', { id: 'rbtag', placeholder: 'Tag/genre' }),
|
||||
el('button', {
|
||||
class: 'btn primary', onClick: async () => {
|
||||
const params = new URLSearchParams({
|
||||
q: document.getElementById('rbq').value,
|
||||
country: document.getElementById('rbcountry').value,
|
||||
tag: document.getElementById('rbtag').value
|
||||
});
|
||||
results = await api.get(`/api/stations/sources/radiobrowser/search?${params}`);
|
||||
paint();
|
||||
}
|
||||
}, 'Search')
|
||||
));
|
||||
root.appendChild(resultsBox);
|
||||
function paint() {
|
||||
clear(resultsBox);
|
||||
if (!results.length) { resultsBox.appendChild(el('p', {}, 'No results yet.')); return; }
|
||||
const table = el('table', {},
|
||||
el('thead', {}, el('tr', {}, el('th', {}, 'Name'), el('th', {}, 'Country'), el('th', {}, 'Tags'), el('th', {}, 'Stream'), el('th', {}, ''))),
|
||||
el('tbody', {}, ...results.map((s) => el('tr', {},
|
||||
el('td', {}, s.name),
|
||||
el('td', {}, s.country || ''),
|
||||
el('td', {}, ...(s.genres || []).slice(0, 4).map((g) => el('span', { class: 'tag' }, g))),
|
||||
el('td', {}, el('small', {}, (s.streams[0]?.format || '') + ' ' + (s.streams[0]?.bitrate || ''))),
|
||||
el('td', {}, el('button', {
|
||||
class: 'btn primary', onClick: async () => {
|
||||
await api.post('/api/stations/sources/radiobrowser/import', s);
|
||||
alert(`Imported ${s.name}`);
|
||||
}
|
||||
}, 'Import'))
|
||||
)))
|
||||
);
|
||||
resultsBox.appendChild(table);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Users ----------
|
||||
function renderUsers(root) {
|
||||
root.appendChild(el('div', { class: 'bar' },
|
||||
el('h2', { style: { margin: 0, flex: 1 } }, 'Users'),
|
||||
el('button', { class: 'btn primary', onClick: openUserDialog }, '+ Add user')
|
||||
));
|
||||
root.appendChild(el('table', {},
|
||||
el('thead', {}, el('tr', {}, el('th', {}, 'Username'), el('th', {}, 'Role'), el('th', {}, 'Created'), el('th', {}, ''))),
|
||||
el('tbody', {}, ...state.users.map((u) => el('tr', {},
|
||||
el('td', {}, u.username),
|
||||
el('td', {}, u.role),
|
||||
el('td', {}, u.created_at),
|
||||
el('td', {},
|
||||
el('button', { class: 'btn', onClick: async () => {
|
||||
const pw = prompt(`New password for ${u.username}:`);
|
||||
if (pw) { await api.patch(`/api/auth/users/${u.id}`, { password: pw }); alert('Updated'); }
|
||||
} }, 'Reset PW'),
|
||||
' ',
|
||||
el('button', { class: 'btn', onClick: async () => {
|
||||
const r = u.role === 'admin' ? 'user' : 'admin';
|
||||
await api.patch(`/api/auth/users/${u.id}`, { role: r });
|
||||
await refresh(); render();
|
||||
} }, 'Toggle role'),
|
||||
' ',
|
||||
u.id !== state.user.id ? el('button', { class: 'btn danger', onClick: async () => {
|
||||
if (confirm(`Delete ${u.username}?`)) { await api.del(`/api/auth/users/${u.id}`); await refresh(); render(); }
|
||||
} }, 'Delete') : null
|
||||
)
|
||||
)))
|
||||
));
|
||||
root.appendChild(el('div', { class: 'bar' },
|
||||
el('h2', { style: { margin: 0, flex: 1 } }, 'Users'),
|
||||
el('button', { class: 'btn primary', onClick: openUserDialog }, '+ Add user')
|
||||
));
|
||||
root.appendChild(el('table', {},
|
||||
el('thead', {}, el('tr', {}, el('th', {}, 'Username'), el('th', {}, 'Role'), el('th', {}, 'Created'), el('th', {}, ''))),
|
||||
el('tbody', {}, ...state.users.map((u) => el('tr', {},
|
||||
el('td', {}, u.username),
|
||||
el('td', {}, u.role),
|
||||
el('td', {}, u.created_at),
|
||||
el('td', {},
|
||||
el('button', {
|
||||
class: 'btn', onClick: async () => {
|
||||
const pw = prompt(`New password for ${u.username}:`);
|
||||
if (pw) { await api.patch(`/api/auth/users/${u.id}`, { password: pw }); alert('Updated'); }
|
||||
}
|
||||
}, 'Reset PW'),
|
||||
' ',
|
||||
el('button', {
|
||||
class: 'btn', onClick: async () => {
|
||||
const r = u.role === 'admin' ? 'user' : 'admin';
|
||||
await api.patch(`/api/auth/users/${u.id}`, { role: r });
|
||||
await refresh(); render();
|
||||
}
|
||||
}, 'Toggle role'),
|
||||
' ',
|
||||
u.id !== state.user.id ? el('button', {
|
||||
class: 'btn danger', onClick: async () => {
|
||||
if (confirm(`Delete ${u.username}?`)) { await api.del(`/api/auth/users/${u.id}`); await refresh(); render(); }
|
||||
}
|
||||
}, 'Delete') : null
|
||||
)
|
||||
)))
|
||||
));
|
||||
}
|
||||
|
||||
function openUserDialog() {
|
||||
const dlg = el('dialog');
|
||||
dlg.appendChild(el('form', { method: 'dialog', onSubmit: async (e) => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.target);
|
||||
await api.post('/api/auth/users', {
|
||||
username: fd.get('username'), password: fd.get('password'), role: fd.get('role')
|
||||
});
|
||||
dlg.close();
|
||||
await refresh(); render();
|
||||
} },
|
||||
el('h2', {}, 'New user'),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Username'), el('input', { name: 'username', required: true })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Password'), el('input', { name: 'password', type: 'password', required: true })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Role'),
|
||||
el('select', { name: 'role' }, el('option', { value: 'user' }, 'user'), el('option', { value: 'admin' }, 'admin'))),
|
||||
el('div', { class: 'actions' },
|
||||
el('button', { class: 'btn', type: 'button', onClick: () => dlg.close() }, 'Cancel'),
|
||||
el('button', { class: 'btn primary', type: 'submit' }, 'Create'))
|
||||
));
|
||||
document.body.appendChild(dlg);
|
||||
dlg.showModal();
|
||||
dlg.addEventListener('close', () => dlg.remove());
|
||||
const dlg = el('dialog');
|
||||
dlg.appendChild(el('form', {
|
||||
method: 'dialog', onSubmit: async (e) => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.target);
|
||||
await api.post('/api/auth/users', {
|
||||
username: fd.get('username'), password: fd.get('password'), role: fd.get('role')
|
||||
});
|
||||
dlg.close();
|
||||
await refresh(); render();
|
||||
}
|
||||
},
|
||||
el('h2', {}, 'New user'),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Username'), el('input', { name: 'username', required: true })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Password'), el('input', { name: 'password', type: 'password', required: true })),
|
||||
el('div', { class: 'row' }, el('label', {}, 'Role'),
|
||||
el('select', { name: 'role' }, el('option', { value: 'user' }, 'user'), el('option', { value: 'admin' }, 'admin'))),
|
||||
el('div', { class: 'actions' },
|
||||
el('button', { class: 'btn', type: 'button', onClick: () => dlg.close() }, 'Cancel'),
|
||||
el('button', { class: 'btn primary', type: 'submit' }, 'Create'))
|
||||
));
|
||||
document.body.appendChild(dlg);
|
||||
dlg.showModal();
|
||||
dlg.addEventListener('close', () => dlg.remove());
|
||||
}
|
||||
|
||||
// ---------- System ----------
|
||||
function renderSystem(root) {
|
||||
const s = state.system || {};
|
||||
root.appendChild(el('h2', {}, 'System'));
|
||||
root.appendChild(el('div', { class: 'system-grid' },
|
||||
stat('Stations', s.stations), stat('Streams', s.streams), stat('Users', s.users),
|
||||
stat('Favorites', s.favorites), stat('Node', s.node), stat('Uptime (s)', s.uptime_s)
|
||||
));
|
||||
root.appendChild(el('div', { class: 'bar', style: { marginTop: '16px' } },
|
||||
el('button', { class: 'btn', onClick: async () => { await api.post('/api/admin/health-check'); alert('Health check finished'); await refresh(); render(); } }, 'Run health check'),
|
||||
el('button', { class: 'btn', onClick: async () => { const r = await api.post('/api/admin/reseed'); alert(JSON.stringify(r)); } }, 'Reseed (if empty)')
|
||||
));
|
||||
const s = state.system || {};
|
||||
root.appendChild(el('h2', {}, 'System'));
|
||||
root.appendChild(el('div', { class: 'system-grid' },
|
||||
stat('Stations', s.stations), stat('Streams', s.streams), stat('Users', s.users),
|
||||
stat('Favorites', s.favorites), stat('Node', s.node), stat('Uptime (s)', s.uptime_s)
|
||||
));
|
||||
root.appendChild(el('div', { class: 'bar', style: { marginTop: '16px' } },
|
||||
el('button', { class: 'btn', onClick: async () => { await api.post('/api/admin/health-check'); alert('Health check finished'); await refresh(); render(); } }, 'Run health check'),
|
||||
el('button', { class: 'btn', onClick: async () => { const r = await api.post('/api/admin/reseed'); alert(JSON.stringify(r)); } }, 'Reseed (if empty)')
|
||||
));
|
||||
}
|
||||
function stat(k, v) { return el('div', { class: 'stat' }, el('div', { class: 'k' }, k), el('div', { class: 'v' }, v ?? '—')); }
|
||||
|
||||
|
||||
23
web/docs/index.html
Normal file
23
web/docs/index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>oradio · API reference</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="docs-header">
|
||||
<div class="docs-header-inner">
|
||||
<a href="/" class="back">← Kiosk</a>
|
||||
<h1>oradio API</h1>
|
||||
<span class="base" id="base"></span>
|
||||
</div>
|
||||
</header>
|
||||
<main id="app"></main>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
241
web/docs/main.js
Normal file
241
web/docs/main.js
Normal file
@@ -0,0 +1,241 @@
|
||||
// Minimal, dependency-free API reference page for oradio.
|
||||
// Lists every public endpoint, lets the user fire a live request and inspect
|
||||
// the response. Intended as a reference companion to the kiosk.
|
||||
|
||||
const BASE = `${location.origin}/api/v1`;
|
||||
const INTERNAL = `${location.origin}/api`;
|
||||
document.getElementById('base').textContent = BASE;
|
||||
|
||||
const endpoints = [
|
||||
{
|
||||
group: 'Public (v1)',
|
||||
items: [
|
||||
{
|
||||
id: 'health',
|
||||
method: 'GET',
|
||||
path: '/health',
|
||||
summary: 'Service heartbeat plus enabled-station count.',
|
||||
tryable: true
|
||||
},
|
||||
{
|
||||
id: 'categories',
|
||||
method: 'GET',
|
||||
path: '/categories',
|
||||
summary: 'All categories with their station counts.',
|
||||
tryable: true
|
||||
},
|
||||
{
|
||||
id: 'stations-list',
|
||||
method: 'GET',
|
||||
path: '/stations',
|
||||
summary: 'Paginated station list. Filterable and sortable.',
|
||||
params: [
|
||||
{ name: 'q', desc: 'Substring filter on name / genres / country.' },
|
||||
{ name: 'category', desc: 'Category id (see /categories).' },
|
||||
{ name: 'country', desc: 'ISO country code, case-insensitive.' },
|
||||
{ name: 'genre', desc: 'Substring match against any genre.' },
|
||||
{ name: 'sort', desc: 'hot | top | plays | controversial | name (default: name).' },
|
||||
{ name: 'limit', desc: 'Max items returned (default 200, cap 1000).' }
|
||||
],
|
||||
tryable: true,
|
||||
tryQuery: 'limit=3&sort=hot'
|
||||
},
|
||||
{
|
||||
id: 'random',
|
||||
method: 'GET',
|
||||
path: '/stations/random',
|
||||
summary: 'Pick one random enabled station. Same filters as /stations. Pass redirect=stream for a 302 to the resolved audio URL.',
|
||||
params: [
|
||||
{ name: 'category', desc: 'Restrict pool to a category.' },
|
||||
{ name: 'country', desc: 'Restrict pool to a country.' },
|
||||
{ name: 'genre', desc: 'Restrict pool by genre substring.' },
|
||||
{ name: 'redirect', desc: 'Set to "stream" to 302-redirect to the resolved stream URL.' }
|
||||
],
|
||||
tryable: true,
|
||||
examples: [
|
||||
`mpv ${BASE}/stations/random?redirect=stream`,
|
||||
`curl -sLI "${BASE}/stations/random?redirect=stream" | grep -i location`
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'station',
|
||||
method: 'GET',
|
||||
path: '/stations/{uuid}',
|
||||
summary: 'Full detail for one station, including its streams.',
|
||||
params: [{ name: 'uuid', desc: 'Station UUID (see list response).' }]
|
||||
},
|
||||
{
|
||||
id: 'station-stream',
|
||||
method: 'GET',
|
||||
path: '/stations/{uuid}/stream',
|
||||
summary: '302-redirect to the resolved stream URL. Picks the highest-priority stream that was last seen up.',
|
||||
params: [
|
||||
{ name: 'uuid', desc: 'Station UUID.' },
|
||||
{ name: 'format', desc: 'Optional preferred format (mp3, aac, ogg, hls).' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'stream-by-uuid',
|
||||
method: 'GET',
|
||||
path: '/stations/{uuid}/streams/{streamUuid}',
|
||||
summary: 'Resolve and 302 to a specific stream. Pass redirect=0 to return JSON metadata instead.',
|
||||
params: [
|
||||
{ name: 'uuid', desc: 'Station UUID.' },
|
||||
{ name: 'streamUuid', desc: 'Stream UUID.' },
|
||||
{ name: 'redirect', desc: 'Set to "0" to return JSON instead of redirecting.' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'Authenticated (cookie session)',
|
||||
items: [
|
||||
{
|
||||
id: 'me',
|
||||
method: 'GET',
|
||||
path: '/auth/me',
|
||||
base: INTERNAL,
|
||||
summary: 'Current signed-in user, or 401.',
|
||||
tryable: true
|
||||
},
|
||||
{
|
||||
id: 'favorites',
|
||||
method: 'GET',
|
||||
path: '/me/favorites',
|
||||
base: INTERNAL,
|
||||
summary: 'Your favorites, ordered.',
|
||||
tryable: true
|
||||
},
|
||||
{
|
||||
id: 'favorites-random',
|
||||
method: 'GET',
|
||||
path: '/me/favorites/random',
|
||||
base: INTERNAL,
|
||||
summary: 'One random favorite — used by the kiosk dice button in "favorites" mode.',
|
||||
tryable: true
|
||||
},
|
||||
{
|
||||
id: 'history',
|
||||
method: 'GET',
|
||||
path: '/me/history',
|
||||
base: INTERNAL,
|
||||
summary: 'Recent play history (last 50).',
|
||||
tryable: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'Rate limit',
|
||||
items: [
|
||||
{
|
||||
id: 'rate',
|
||||
method: 'INFO',
|
||||
path: '120 req / minute / IP',
|
||||
summary: 'Public /api/v1 endpoints share a per-IP token bucket. Headers X-RateLimit-Limit and X-RateLimit-Remaining tell you where you stand.'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const app = document.getElementById('app');
|
||||
|
||||
function el(tag, attrs, ...children) {
|
||||
const n = document.createElement(tag);
|
||||
if (attrs) {
|
||||
for (const [k, v] of Object.entries(attrs)) {
|
||||
if (v == null || v === false) continue;
|
||||
if (k === 'class') n.className = v;
|
||||
else if (k.startsWith('on') && typeof v === 'function') n.addEventListener(k.slice(2).toLowerCase(), v);
|
||||
else n.setAttribute(k, v);
|
||||
}
|
||||
}
|
||||
for (const c of children) {
|
||||
if (c == null || c === false) continue;
|
||||
n.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
function methodChip(m) {
|
||||
return el('span', { class: `m m-${m.toLowerCase()}` }, m);
|
||||
}
|
||||
|
||||
function renderEndpoint(ep) {
|
||||
const base = ep.base || BASE;
|
||||
const fullUrl = `${base}${ep.path}`;
|
||||
const card = el('article', { class: 'ep', id: ep.id });
|
||||
card.appendChild(el('header', { class: 'ep-head' },
|
||||
methodChip(ep.method),
|
||||
el('code', { class: 'ep-path' }, fullUrl)
|
||||
));
|
||||
card.appendChild(el('p', { class: 'ep-sum' }, ep.summary));
|
||||
|
||||
if (ep.params?.length) {
|
||||
const tbl = el('table', { class: 'params' },
|
||||
el('thead', {}, el('tr', {}, el('th', {}, 'Parameter'), el('th', {}, 'Description'))),
|
||||
el('tbody', {}, ...ep.params.map((p) =>
|
||||
el('tr', {}, el('td', {}, el('code', {}, p.name)), el('td', {}, p.desc))
|
||||
))
|
||||
);
|
||||
card.appendChild(tbl);
|
||||
}
|
||||
|
||||
if (ep.examples?.length) {
|
||||
card.appendChild(el('div', { class: 'examples' },
|
||||
el('div', { class: 'examples-h' }, 'Examples'),
|
||||
...ep.examples.map((e) => el('pre', {}, el('code', {}, e)))
|
||||
));
|
||||
}
|
||||
|
||||
if (ep.tryable && ep.method === 'GET') {
|
||||
const out = el('pre', { class: 'try-out' }, 'Click "Try it" to send a live request.');
|
||||
const queryInput = el('input', {
|
||||
class: 'try-q',
|
||||
type: 'text',
|
||||
placeholder: '?key=value (optional)',
|
||||
value: ep.tryQuery ? `?${ep.tryQuery}` : ''
|
||||
});
|
||||
const button = el('button', {
|
||||
class: 'try-btn',
|
||||
onClick: async () => {
|
||||
button.disabled = true;
|
||||
button.textContent = '…';
|
||||
let q = queryInput.value.trim();
|
||||
if (q && !q.startsWith('?')) q = `?${q}`;
|
||||
const url = `${fullUrl}${q}`;
|
||||
const t0 = performance.now();
|
||||
try {
|
||||
const res = await fetch(url, { credentials: 'same-origin', redirect: 'manual' });
|
||||
const ms = Math.round(performance.now() - t0);
|
||||
let body;
|
||||
if (res.type === 'opaqueredirect' || (res.status >= 300 && res.status < 400)) {
|
||||
body = `(redirect — open in new tab to follow)`;
|
||||
} else {
|
||||
const ct = res.headers.get('content-type') || '';
|
||||
body = ct.includes('json')
|
||||
? JSON.stringify(await res.json(), null, 2)
|
||||
: (await res.text()).slice(0, 4000);
|
||||
}
|
||||
out.textContent = `${res.status} ${res.statusText || ''} · ${ms} ms\n${url}\n\n${body}`;
|
||||
} catch (err) {
|
||||
out.textContent = `error: ${err.message || err}\n${url}`;
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = 'Try it';
|
||||
}
|
||||
}
|
||||
}, 'Try it');
|
||||
const openLink = el('a', { class: 'try-open', target: '_blank', rel: 'noopener', href: fullUrl }, 'Open ↗');
|
||||
card.appendChild(el('div', { class: 'try' },
|
||||
el('div', { class: 'try-row' }, queryInput, button, openLink),
|
||||
out
|
||||
));
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
for (const group of endpoints) {
|
||||
app.appendChild(el('h2', { class: 'group' }, group.group));
|
||||
for (const ep of group.items) app.appendChild(renderEndpoint(ep));
|
||||
}
|
||||
171
web/docs/style.css
Normal file
171
web/docs/style.css
Normal file
@@ -0,0 +1,171 @@
|
||||
:root {
|
||||
--bg-0: #07080b;
|
||||
--bg-1: #0e1116;
|
||||
--bg-2: #161a22;
|
||||
--bg-3: #1f242e;
|
||||
--line: #262b36;
|
||||
--fg: #e9ecf2;
|
||||
--muted: #8a90a0;
|
||||
--muted-2: #5d6373;
|
||||
--accent: #ff7a3d;
|
||||
--accent-2: #ffb37a;
|
||||
--good: #4ec9a6;
|
||||
--bad: #ec6a6a;
|
||||
--info: #6ab7ff;
|
||||
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg); }
|
||||
a { color: var(--accent-2); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.docs-header {
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
background: rgba(7, 8, 11, 0.92);
|
||||
border-bottom: 1px solid var(--line);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.docs-header-inner {
|
||||
max-width: 980px; margin: 0 auto;
|
||||
padding: 14px 20px;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
}
|
||||
.docs-header h1 {
|
||||
margin: 0; font-size: 18px; letter-spacing: -0.01em;
|
||||
}
|
||||
.docs-header .back {
|
||||
color: var(--muted); font-size: 13px;
|
||||
padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
|
||||
}
|
||||
.docs-header .back:hover { color: var(--fg); background: var(--bg-2); text-decoration: none; }
|
||||
.docs-header .base {
|
||||
margin-left: auto;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 12px; color: var(--muted);
|
||||
padding: 4px 10px; background: var(--bg-2);
|
||||
border: 1px solid var(--line); border-radius: 8px;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 980px; margin: 0 auto;
|
||||
padding: 24px 20px 80px;
|
||||
}
|
||||
h2.group {
|
||||
margin: 32px 0 12px;
|
||||
font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
}
|
||||
h2.group:first-child { margin-top: 0; }
|
||||
|
||||
.ep {
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.ep-head {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ep-path {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 13px; color: var(--fg);
|
||||
background: var(--bg-2);
|
||||
padding: 4px 10px; border-radius: 6px;
|
||||
border: 1px solid var(--line);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.ep-sum {
|
||||
margin: 10px 0 0; color: var(--muted);
|
||||
font-size: 14px; line-height: 1.5;
|
||||
}
|
||||
|
||||
.m {
|
||||
display: inline-block;
|
||||
font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
|
||||
padding: 4px 8px; border-radius: 6px;
|
||||
color: #07080b;
|
||||
}
|
||||
.m-get { background: var(--good); }
|
||||
.m-post { background: var(--accent); }
|
||||
.m-put { background: #d9b14a; }
|
||||
.m-delete { background: var(--bad); color: #fff; }
|
||||
.m-info { background: var(--info); }
|
||||
|
||||
.params {
|
||||
width: 100%; border-collapse: collapse;
|
||||
margin-top: 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.params th {
|
||||
text-align: left; font-weight: 600; color: var(--muted);
|
||||
text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em;
|
||||
padding: 8px 10px; border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.params td {
|
||||
padding: 8px 10px; border-bottom: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
}
|
||||
.params td:first-child { width: 160px; }
|
||||
.params code {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 12px; color: var(--accent-2);
|
||||
background: var(--bg-2);
|
||||
padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
|
||||
.examples { margin-top: 14px; }
|
||||
.examples-h {
|
||||
font-size: 11px; color: var(--muted);
|
||||
text-transform: uppercase; letter-spacing: 0.06em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.examples pre {
|
||||
margin: 0 0 8px; padding: 10px 12px;
|
||||
background: var(--bg-0); border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 12.5px; color: var(--accent-2);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.try { margin-top: 14px; }
|
||||
.try-row {
|
||||
display: flex; gap: 8px; align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.try-q {
|
||||
flex: 1;
|
||||
background: var(--bg-2); color: var(--fg);
|
||||
border: 1px solid var(--line); border-radius: 8px;
|
||||
padding: 8px 12px; font-size: 13px;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
outline: none;
|
||||
}
|
||||
.try-q:focus { border-color: var(--accent); }
|
||||
.try-btn {
|
||||
background: var(--accent); color: #1a0a00;
|
||||
border: 0; border-radius: 8px;
|
||||
padding: 8px 16px; font-size: 13px; font-weight: 700;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.try-btn:hover { background: #ff8a55; }
|
||||
.try-btn:disabled { opacity: 0.6; cursor: default; }
|
||||
.try-open {
|
||||
color: var(--muted); font-size: 12px;
|
||||
padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
|
||||
}
|
||||
.try-open:hover { color: var(--fg); background: var(--bg-2); text-decoration: none; }
|
||||
.try-out {
|
||||
margin: 0; padding: 12px;
|
||||
background: var(--bg-0); border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 12px; color: var(--fg);
|
||||
max-height: 320px; overflow: auto;
|
||||
white-space: pre-wrap; word-break: break-word;
|
||||
}
|
||||
@@ -1,13 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1080, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<title>Radio Kiosk</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body class="kiosk">
|
||||
</head>
|
||||
|
||||
<body class="kiosk">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
185
web/main.js
185
web/main.js
@@ -13,7 +13,9 @@ const state = {
|
||||
favorites: [],
|
||||
history: [],
|
||||
query: '',
|
||||
player: { stationId: null, stationName: null, genres: [], playing: false, loading: false, volume: 0.7 }
|
||||
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 }
|
||||
};
|
||||
|
||||
const player = new Player({
|
||||
@@ -39,7 +41,7 @@ async function bootstrap() {
|
||||
|
||||
async function refreshAll() {
|
||||
const [stations, favs, history, categories] = await Promise.all([
|
||||
api.get('/api/stations'),
|
||||
api.get(`/api/stations?sort=${encodeURIComponent(state.sort)}`),
|
||||
api.get('/api/me/favorites').catch(() => []),
|
||||
api.get('/api/me/history').catch(() => []),
|
||||
api.get('/api/v1/categories').catch(() => [])
|
||||
@@ -50,11 +52,15 @@ async function refreshAll() {
|
||||
state.categories = categories;
|
||||
}
|
||||
|
||||
async function refreshStations() {
|
||||
state.stations = await api.get(`/api/stations?sort=${encodeURIComponent(state.sort)}`);
|
||||
}
|
||||
|
||||
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) player.play(st);
|
||||
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();
|
||||
@@ -99,6 +105,7 @@ function render() {
|
||||
|
||||
const p = state.player;
|
||||
const favIds = new Set(state.favorites.map((f) => f.id));
|
||||
const v = p.votes; // { up, down, plays, myVote, score } or null
|
||||
|
||||
const now = el('section', { class: 'now' },
|
||||
el('div', { class: 'meta' },
|
||||
@@ -108,10 +115,26 @@ function render() {
|
||||
el('div', { class: 'tags' }, ...(p.genres || []).slice(0, 4).map((g) => el('span', { class: 'tag' }, g)))
|
||||
),
|
||||
el('div', { class: 'controls' },
|
||||
el('div', { class: 'vote-group', title: 'Vote on current station' },
|
||||
el('button', {
|
||||
class: `vote up ${v?.myVote === 1 ? 'on' : ''}`,
|
||||
disabled: !p.stationId,
|
||||
title: 'Upvote',
|
||||
onClick: () => votePlayer(1)
|
||||
}, el('span', { class: 'vote-icon' }, '▲'),
|
||||
el('span', { class: 'vote-count' }, String(v?.up ?? 0))),
|
||||
el('button', {
|
||||
class: `vote down ${v?.myVote === -1 ? 'on' : ''}`,
|
||||
disabled: !p.stationId,
|
||||
title: 'Downvote',
|
||||
onClick: () => votePlayer(-1)
|
||||
}, el('span', { class: 'vote-icon' }, '▼'),
|
||||
el('span', { class: 'vote-count' }, String(v?.down ?? 0)))
|
||||
),
|
||||
el('button', {
|
||||
class: `btn-play ${p.loading ? 'loading' : ''}`,
|
||||
title: p.playing ? 'Pause' : 'Play',
|
||||
onClick: () => p.stationId ? player.togglePause() : (state.favorites[0] && player.play(state.favorites[0]))
|
||||
onClick: () => p.stationId ? player.togglePause() : (state.favorites[0] && playStation(state.favorites[0]))
|
||||
}, p.playing ? '❚❚' : '▶'),
|
||||
el('button', {
|
||||
class: 'btn-stop',
|
||||
@@ -143,10 +166,36 @@ function render() {
|
||||
)
|
||||
),
|
||||
el('div', { class: 'header-tools' },
|
||||
state.tab === 'browse'
|
||||
? el('select', {
|
||||
class: 'sort',
|
||||
title: 'Sort browse list',
|
||||
onChange: (e) => { state.sort = e.target.value; savedGridScroll = 0; refreshStations().then(render); }
|
||||
},
|
||||
el('option', { value: 'hot', selected: state.sort === 'hot' }, '🔥 Hot (smart)'),
|
||||
el('option', { value: 'top', selected: state.sort === 'top' }, '▲ Top voted'),
|
||||
el('option', { value: 'plays', selected: state.sort === 'plays' }, '▶ Most played'),
|
||||
el('option', { value: 'controversial', selected: state.sort === 'controversial' }, '⚡ Controversial'),
|
||||
el('option', { value: 'name', selected: state.sort === 'name' }, 'A → Z')
|
||||
)
|
||||
: null,
|
||||
el('input', {
|
||||
class: 'search', type: 'search', placeholder: 'Search…', value: state.query,
|
||||
onInput: (e) => { state.query = e.target.value; renderGrid(); }
|
||||
}),
|
||||
el('button', {
|
||||
class: 'btn-random',
|
||||
title: `Play random station (mode: ${state.randomMode}). Right-click to switch mode.`,
|
||||
onClick: playRandom,
|
||||
onContextMenu: (e) => { e.preventDefault(); toggleRandomMode(); }
|
||||
},
|
||||
el('span', { class: 'rand-icon' }, '🎲'),
|
||||
el('span', { class: 'rand-mode' }, state.randomMode === 'favorites' ? '★' : 'All')
|
||||
),
|
||||
el('a', {
|
||||
class: 'btn-docs', href: '/docs/', target: '_blank', rel: 'noopener',
|
||||
title: 'Open API reference'
|
||||
}, 'API'),
|
||||
isAdmin ? el('button', { class: 'btn-add', title: 'Add station', onClick: openAddStation }, '+') : null
|
||||
)
|
||||
);
|
||||
@@ -222,11 +271,14 @@ function paintGrid(grid, favIds) {
|
||||
}
|
||||
const p = state.player;
|
||||
for (const s of items) {
|
||||
const score = typeof s.score === 'number' ? s.score : 0;
|
||||
const net = (s.up ?? 0) - (s.down ?? 0);
|
||||
const badgeClass = net > 0 ? 'pos' : net < 0 ? 'neg' : 'neu';
|
||||
const card = el('div', {
|
||||
class: `card ${p.stationId === s.id ? 'playing' : ''}`,
|
||||
role: 'button',
|
||||
tabindex: 0,
|
||||
onClick: () => { player.play(s); recordHistory(s.id); },
|
||||
onClick: () => playStation(s),
|
||||
onContextMenu: (e) => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, s); }
|
||||
},
|
||||
el('div', { class: 'art' },
|
||||
@@ -249,6 +301,9 @@ function paintGrid(grid, favIds) {
|
||||
el('div', { class: 'g' },
|
||||
(s.genres || []).slice(0, 3).join(' · ') || (s.country || '—'))
|
||||
),
|
||||
el('div', { class: `score-badge ${badgeClass}`, title: `▲${s.up ?? 0} · ▼${s.down ?? 0} · ▶${s.plays ?? 0} · score ${score.toFixed(2)}` },
|
||||
net > 0 ? `+${net}` : String(net)
|
||||
),
|
||||
el('button', {
|
||||
class: `fav ${favIds.has(s.id) ? 'on' : ''}`,
|
||||
title: favIds.has(s.id) ? 'Remove favorite' : 'Add favorite',
|
||||
@@ -276,35 +331,135 @@ async function toggleFavorite(station) {
|
||||
render();
|
||||
}
|
||||
|
||||
function toggleRandomMode() {
|
||||
state.randomMode = state.randomMode === 'favorites' ? 'all' : 'favorites';
|
||||
localStorage.setItem('oradio.randomMode', state.randomMode);
|
||||
toast(`Random mode: ${state.randomMode === 'favorites' ? 'favorites only' : 'all stations'}`);
|
||||
render();
|
||||
}
|
||||
|
||||
// Pick a random station and play it. Uses the public /api/v1/stations/random
|
||||
// for "all" mode, /api/me/favorites/random for "favorites" mode. Falls back
|
||||
// to a local random pick if the network call fails.
|
||||
async function playRandom() {
|
||||
try {
|
||||
const ep = state.randomMode === 'favorites'
|
||||
? '/api/me/favorites/random'
|
||||
: '/api/v1/stations/random';
|
||||
const remote = await api.get(ep);
|
||||
// The kiosk player needs the internal numeric id (used by /resolve etc.).
|
||||
// The favorites endpoint returns it directly; the v1 endpoint does not,
|
||||
// so resolve via the cached station list (or skip if missing).
|
||||
let station = remote;
|
||||
if (station.id == null) {
|
||||
station = state.stations.find((s) => s.uuid === remote.uuid) || null;
|
||||
}
|
||||
if (!station) { toast('Random station not in cache'); return; }
|
||||
playStation(station);
|
||||
} catch (err) {
|
||||
// Fallback: pick locally so the button still does something offline.
|
||||
const pool = state.randomMode === 'favorites' ? state.favorites : state.stations;
|
||||
if (!pool.length) { toast(err.message || 'No stations available'); return; }
|
||||
playStation(pool[Math.floor(Math.random() * pool.length)]);
|
||||
}
|
||||
}
|
||||
|
||||
function recordHistory(stationId) {
|
||||
// Server-side history insertion can be added later; for now, optimistic local insert.
|
||||
state.history.unshift({ station_id: stationId, started_at: new Date().toISOString() });
|
||||
}
|
||||
|
||||
// Play wrapper: starts playback, pings server play counter, fetches vote state
|
||||
// so the up/down buttons in the now-playing bar reflect the current station.
|
||||
async function playStation(station) {
|
||||
state.player.votes = null;
|
||||
player.play(station);
|
||||
recordHistory(station.id);
|
||||
try {
|
||||
const stats = await api.post(`/api/stations/${station.id}/play`);
|
||||
// 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.
|
||||
mergeStats(station.id, stats);
|
||||
render();
|
||||
}
|
||||
} catch (err) {
|
||||
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 */ }
|
||||
}
|
||||
}
|
||||
|
||||
async function votePlayer(value) {
|
||||
const id = state.player.stationId;
|
||||
if (!id) return;
|
||||
// Toggle off when clicking the already-active button.
|
||||
const cur = state.player.votes?.myVote || 0;
|
||||
const next = cur === value ? 0 : value;
|
||||
try {
|
||||
const stats = await api.post(`/api/stations/${id}/vote`, { value: next });
|
||||
state.player.votes = stats;
|
||||
mergeStats(id, stats);
|
||||
render();
|
||||
} catch (err) {
|
||||
toast(err.message || 'Vote failed');
|
||||
}
|
||||
}
|
||||
|
||||
function mergeStats(stationId, stats) {
|
||||
const list = [state.stations, state.favorites];
|
||||
for (const arr of list) {
|
||||
const hit = arr.find((s) => s.id === stationId);
|
||||
if (hit) {
|
||||
hit.up = stats.up; hit.down = stats.down;
|
||||
hit.plays = stats.plays; hit.score = stats.score;
|
||||
hit.my_vote = stats.myVote;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- API endpoints context menu ----
|
||||
let menuEl = null;
|
||||
function closeContextMenu() {
|
||||
if (menuEl) { menuEl.remove(); menuEl = null; }
|
||||
}
|
||||
function apiEndpoints(s) {
|
||||
if (!s.uuid) return [];
|
||||
const base = `${location.origin}/api/v1`;
|
||||
return [
|
||||
{ label: 'Station detail', url: `${base}/stations/${s.uuid}` },
|
||||
{ label: 'Stream redirect', url: `${base}/stations/${s.uuid}/stream` },
|
||||
{ label: 'MP3 stream', url: `${base}/stations/${s.uuid}/stream?format=mp3` },
|
||||
{ label: 'AAC stream', url: `${base}/stations/${s.uuid}/stream?format=aac` },
|
||||
{ label: 'HLS stream', url: `${base}/stations/${s.uuid}/stream?format=hls` },
|
||||
const origin = location.origin;
|
||||
const base = `${origin}/api/v1`;
|
||||
const items = [];
|
||||
// Original (internal) endpoint — always available, keyed by station id.
|
||||
if (s.id != null) {
|
||||
items.push({ label: 'Station (original)', url: `${origin}/api/stations/${s.id}` });
|
||||
}
|
||||
// Public v1 endpoints — require uuid.
|
||||
if (s.uuid) {
|
||||
items.push(
|
||||
{ label: 'Station detail', url: `${base}/stations/${s.uuid}` },
|
||||
{ label: 'Stream redirect', url: `${base}/stations/${s.uuid}/stream` },
|
||||
{ label: 'MP3 stream', url: `${base}/stations/${s.uuid}/stream?format=mp3` },
|
||||
{ label: 'AAC stream', url: `${base}/stations/${s.uuid}/stream?format=aac` },
|
||||
{ label: 'HLS stream', url: `${base}/stations/${s.uuid}/stream?format=hls` }
|
||||
);
|
||||
}
|
||||
items.push(
|
||||
{ label: 'All stations', url: `${base}/stations` },
|
||||
{ label: 'Health', url: `${base}/health` }
|
||||
];
|
||||
);
|
||||
return items;
|
||||
}
|
||||
function openContextMenu(x, y, station) {
|
||||
closeContextMenu();
|
||||
const items = apiEndpoints(station);
|
||||
menuEl = el('div', { class: 'ctx-menu', role: 'menu' },
|
||||
el('div', { class: 'ctx-title' }, station.name),
|
||||
el('div', { class: 'ctx-sub' }, station.uuid ? `uuid · ${station.uuid}` : 'no uuid'),
|
||||
el('div', { class: 'ctx-sub' },
|
||||
station.uuid ? `uuid · ${station.uuid}` : (station.id != null ? `id · ${station.id} (no uuid — public v1 hidden)` : 'no identifier')),
|
||||
...(items.length ? items.map((it) => el('div', { class: 'ctx-row' },
|
||||
el('div', { class: 'ctx-row-text' },
|
||||
el('div', { class: 'ctx-label' }, it.label),
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
async function http(method, path, body) {
|
||||
const res = await fetch(path, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: body ? { 'Content-Type': 'application/json' } : {},
|
||||
body: body ? JSON.stringify(body) : undefined
|
||||
});
|
||||
if (res.status === 204) return null;
|
||||
const ct = res.headers.get('content-type') || '';
|
||||
const data = ct.includes('json') ? await res.json() : await res.text();
|
||||
if (!res.ok) throw Object.assign(new Error(data?.error || res.statusText), { status: res.status, data });
|
||||
return data;
|
||||
const res = await fetch(path, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: body ? { 'Content-Type': 'application/json' } : {},
|
||||
body: body ? JSON.stringify(body) : undefined
|
||||
});
|
||||
if (res.status === 204) return null;
|
||||
const ct = res.headers.get('content-type') || '';
|
||||
const data = ct.includes('json') ? await res.json() : await res.text();
|
||||
if (!res.ok) throw Object.assign(new Error(data?.error || res.statusText), { status: res.status, data });
|
||||
return data;
|
||||
}
|
||||
|
||||
export const api = {
|
||||
get: (p) => http('GET', p),
|
||||
post: (p, b) => http('POST', p, b),
|
||||
put: (p, b) => http('PUT', p, b),
|
||||
patch: (p, b) => http('PATCH', p, b),
|
||||
del: (p) => http('DELETE', p)
|
||||
get: (p) => http('GET', p),
|
||||
post: (p, b) => http('POST', p, b),
|
||||
put: (p, b) => http('PUT', p, b),
|
||||
patch: (p, b) => http('PATCH', p, b),
|
||||
del: (p) => http('DELETE', p)
|
||||
};
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
export function el(tag, props = {}, ...children) {
|
||||
const node = document.createElement(tag);
|
||||
for (const [k, v] of Object.entries(props || {})) {
|
||||
if (k === 'class') node.className = v;
|
||||
else if (k === 'style' && typeof v === 'object') Object.assign(node.style, v);
|
||||
else if (k.startsWith('on') && typeof v === 'function') node.addEventListener(k.slice(2).toLowerCase(), v);
|
||||
else if (k === 'html') node.innerHTML = v;
|
||||
else if (v !== false && v != null) node.setAttribute(k, v === true ? '' : v);
|
||||
}
|
||||
for (const c of children.flat()) {
|
||||
if (c == null || c === false) continue;
|
||||
node.appendChild(c instanceof Node ? c : document.createTextNode(String(c)));
|
||||
}
|
||||
return node;
|
||||
const node = document.createElement(tag);
|
||||
for (const [k, v] of Object.entries(props || {})) {
|
||||
if (k === 'class') node.className = v;
|
||||
else if (k === 'style' && typeof v === 'object') Object.assign(node.style, v);
|
||||
else if (k.startsWith('on') && typeof v === 'function') node.addEventListener(k.slice(2).toLowerCase(), v);
|
||||
else if (k === 'html') node.innerHTML = v;
|
||||
else if (v !== false && v != null) node.setAttribute(k, v === true ? '' : v);
|
||||
}
|
||||
for (const c of children.flat()) {
|
||||
if (c == null || c === false) continue;
|
||||
node.appendChild(c instanceof Node ? c : document.createTextNode(String(c)));
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
export function clear(node) { while (node.firstChild) node.removeChild(node.firstChild); }
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
export function connectWs(onMessage) {
|
||||
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; });
|
||||
ws.addEventListener('message', (ev) => {
|
||||
try { onMessage(JSON.parse(ev.data)); } catch {}
|
||||
});
|
||||
ws.addEventListener('close', () => {
|
||||
if (closed) return;
|
||||
retry = Math.min(retry + 1, 6);
|
||||
setTimeout(open, 500 * 2 ** retry);
|
||||
});
|
||||
ws.addEventListener('error', () => ws.close());
|
||||
}
|
||||
open();
|
||||
return {
|
||||
send(msg) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg)); },
|
||||
close() { closed = true; ws?.close(); }
|
||||
};
|
||||
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; });
|
||||
ws.addEventListener('message', (ev) => {
|
||||
try { onMessage(JSON.parse(ev.data)); } catch { }
|
||||
});
|
||||
ws.addEventListener('close', () => {
|
||||
if (closed) return;
|
||||
retry = Math.min(retry + 1, 6);
|
||||
setTimeout(open, 500 * 2 ** retry);
|
||||
});
|
||||
ws.addEventListener('error', () => ws.close());
|
||||
}
|
||||
open();
|
||||
return {
|
||||
send(msg) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg)); },
|
||||
close() { closed = true; ws?.close(); }
|
||||
};
|
||||
}
|
||||
|
||||
111
web/style.css
111
web/style.css
@@ -189,6 +189,37 @@ input, select, textarea { font: inherit; color: inherit; }
|
||||
.btn-add:hover { background: #ff8a55; }
|
||||
.btn-add:active { transform: scale(0.94); }
|
||||
|
||||
.btn-random {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
height: 36px; padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-2); color: var(--fg);
|
||||
border: 1px solid var(--line);
|
||||
font-size: 13px; font-weight: 600;
|
||||
transition: background 120ms, border-color 120ms, transform 80ms;
|
||||
}
|
||||
.btn-random:hover { background: var(--bg-3); border-color: rgba(255,122,61,0.4); }
|
||||
.btn-random:active { transform: scale(0.96); }
|
||||
.btn-random .rand-icon { font-size: 15px; line-height: 1; }
|
||||
.btn-random .rand-mode {
|
||||
font-size: 11px; padding: 2px 6px; border-radius: 999px;
|
||||
background: rgba(255,122,61,0.18); color: var(--accent-2);
|
||||
border: 1px solid rgba(255,122,61,0.30);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.btn-docs {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 36px; padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-2); color: var(--muted);
|
||||
border: 1px solid var(--line);
|
||||
font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
|
||||
text-decoration: none;
|
||||
transition: background 120ms, color 120ms, border-color 120ms;
|
||||
}
|
||||
.btn-docs:hover { background: var(--bg-3); color: var(--fg); border-color: rgba(78,201,166,0.4); }
|
||||
|
||||
.chips {
|
||||
display: flex; flex-wrap: wrap; gap: 5px;
|
||||
max-height: 64px; overflow-y: auto;
|
||||
@@ -656,3 +687,83 @@ dialog.add-station select:focus { border-color: var(--accent) !important; box-sh
|
||||
box-shadow: none !important;
|
||||
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 12px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Voting: up/down buttons in the now-playing bar, score badge
|
||||
on every card, and a sort dropdown for the Browse tab.
|
||||
============================================================ */
|
||||
|
||||
.vote-group {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.vote {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
height: 46px; min-width: 64px;
|
||||
padding: 0 12px;
|
||||
background: var(--bg-2) !important;
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--line) !important;
|
||||
font-weight: 800; font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition: background 80ms linear, color 80ms linear, border-color 80ms linear !important;
|
||||
}
|
||||
.vote + .vote { margin-left: -1px; }
|
||||
.vote:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||
.vote .vote-icon { font-size: 17px; line-height: 1; }
|
||||
.vote .vote-count { font-size: 13px; letter-spacing: 0.02em; }
|
||||
.vote.up:not(:disabled):hover {
|
||||
background: var(--good) !important; color: #000 !important; border-color: var(--good) !important;
|
||||
}
|
||||
.vote.down:not(:disabled):hover {
|
||||
background: var(--bad) !important; color: #000 !important; border-color: var(--bad) !important;
|
||||
}
|
||||
.vote.up.on {
|
||||
background: var(--good) !important; color: #000 !important; border-color: var(--good) !important;
|
||||
}
|
||||
.vote.down.on {
|
||||
background: var(--bad) !important; color: #000 !important; border-color: var(--bad) !important;
|
||||
}
|
||||
|
||||
/* Sort dropdown next to search */
|
||||
.sort {
|
||||
height: 36px;
|
||||
padding: 0 28px 0 12px;
|
||||
background: var(--bg-2) !important;
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--line) !important;
|
||||
font-size: 12px; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.05em;
|
||||
appearance: none;
|
||||
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
|
||||
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
|
||||
background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
|
||||
background-size: 5px 5px, 5px 5px;
|
||||
background-repeat: no-repeat;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sort:focus, .sort:hover { border-color: var(--accent) !important; }
|
||||
.sort option { background: var(--bg-1); color: var(--fg); }
|
||||
|
||||
/* Grid card: add a column for the score badge. */
|
||||
.card {
|
||||
grid-template-columns: 44px 1fr auto auto auto !important;
|
||||
}
|
||||
.score-badge {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
min-width: 36px; height: 26px;
|
||||
padding: 0 8px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-weight: 800; font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.score-badge.pos { color: var(--good); border-color: rgba(0,210,122,0.35); }
|
||||
.score-badge.neg { color: var(--bad); border-color: rgba(255,48,48,0.35); }
|
||||
.score-badge.neu { color: var(--muted-2); }
|
||||
.card.playing .score-badge { border-color: var(--accent); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user