Playback
diff --git a/src/options/options.js b/src/options/options.js
index e2cda8b..660bf24 100644
--- a/src/options/options.js
+++ b/src/options/options.js
@@ -9,10 +9,15 @@ import {
getHistoryCap, setHistoryCap,
clearHistory, clearFavourites, clearAll,
} from '../lib/history.js';
+import { listAllStations } from '../sources/index.js';
import {
THEME_KEY, THEME_DEFAULT, VALID_THEMES,
getTheme, setTheme, applyTheme,
} from '../lib/theme.js';
+import {
+ QUICK_STATIONS_KEY, DEFAULT_QUICK_IDS,
+ getQuickStations, setQuickStations, resetQuickStations,
+} from '../lib/quick-stations.js';
const STORAGE_KEYS = {
stations: 'tuner.stationsCache',
@@ -34,6 +39,13 @@ const els = {
volumeDisplay: document.getElementById('opt-volume-display'),
lastStation: document.getElementById('opt-last-station'),
toast: document.getElementById('opt-toast'),
+ // Quick Stations picker (v0.5.3)
+ qsCount: document.getElementById('opt-qs-count'),
+ qsList: document.getElementById('opt-qs-list'),
+ qsReset: document.getElementById('opt-qs-reset'),
+ // Export history (v0.5.3)
+ exportJson: document.getElementById('opt-export-json'),
+ exportCsv: document.getElementById('opt-export-csv'),
};
init().catch(err => {
@@ -48,6 +60,9 @@ async function init() {
// cross-surface changes (popup/newtab pick a theme → Options reflects).
await initThemeUI();
+ // Quick Stations — render checkbox list of all SomaFM channels.
+ await initQuickStationsUI();
+
await refreshStats();
await refreshPlayback();
@@ -65,6 +80,9 @@ async function init() {
await refreshStats();
});
+ els.exportJson.addEventListener('click', () => exportHistoryAs('json'));
+ els.exportCsv.addEventListener('click', () => exportHistoryAs('csv'));
+
els.clearHistory.addEventListener('click', async () => {
if (!confirm('Clear all track history? Favourites will be preserved.')) return;
await clearHistory();
@@ -93,7 +111,7 @@ async function init() {
});
// Refresh stats live if storage changes from another surface
- chrome.storage.onChanged.addListener((changes, area) => {
+ chrome.storage.onChanged.addListener(async (changes, area) => {
if (area !== 'local') return;
if (changes[THEME_KEY]) {
const v = changes[THEME_KEY].newValue || THEME_DEFAULT;
@@ -101,6 +119,15 @@ async function init() {
const radio = document.querySelector(`input[name="opt-theme"][value="${v}"]`);
if (radio) radio.checked = true;
}
+ if (changes[QUICK_STATIONS_KEY]) {
+ // Re-check the boxes to match the new picks (in case another surface
+ // wiped storage or reset to defaults).
+ const newPicks = new Set(await getQuickStations());
+ for (const cb of document.querySelectorAll('#opt-qs-list input[type=checkbox]')) {
+ cb.checked = newPicks.has(cb.value);
+ }
+ updateQuickStationsCount(newPicks.size);
+ }
if (Object.keys(changes).some(k => k.startsWith('tuner.'))) {
refreshStats();
refreshPlayback();
@@ -125,6 +152,116 @@ async function initThemeUI() {
}
}
+/** Render the Quick Stations picker — checkbox per SomaFM channel from
+ * the cached catalogue, with description below each name. Toggling a
+ * checkbox writes the current picks to chrome.storage.local under
+ * tuner.quickStations. NewTab's storage.onChanged listener re-renders
+ * the chip row instantly without a reload. */
+async function initQuickStationsUI() {
+ // Try the NewTab cache first (fast path).
+ let cache = (await chrome.storage.local.get('tuner.stationsCache'))['tuner.stationsCache'] || [];
+
+ // Fresh install fallback: if Options is opened BEFORE NewTab has ever
+ // populated the cache, fetch SomaFM channels directly + cache them.
+ if (!cache.length) {
+ try {
+ cache = await listAllStations();
+ // Cache it back so future loads are instant.
+ await chrome.storage.local.set({
+ 'tuner.stationsCache': cache,
+ 'tuner.stationsCachedAt': Date.now(),
+ });
+ } catch (err) {
+ console.warn('Quick Stations: failed to fetch channel list', err);
+ }
+ }
+
+ // Stations come in as { id: "somafm:groovesalad", name, description, genre, ... }
+ // Sort alphabetically by name for predictable picker order.
+ const channels = [...cache].sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+ const picks = new Set(await getQuickStations());
+
+ els.qsList.innerHTML = '';
+ if (!channels.length) {
+ const li = document.createElement('li');
+ li.className = 'opt-qs-loading';
+ li.textContent = 'Could not load SomaFM channel list — check your network connection and reopen Settings.';
+ els.qsList.appendChild(li);
+ return;
+ }
+
+ for (const ch of channels) {
+ const shortId = (ch.id || '').split(':')[1];
+ if (!shortId) continue;
+
+ const li = document.createElement('li');
+ li.className = 'opt-qs-row';
+
+ const label = document.createElement('label');
+ label.className = 'opt-qs-label';
+
+ const cb = document.createElement('input');
+ cb.type = 'checkbox';
+ cb.value = shortId;
+ cb.checked = picks.has(shortId);
+ cb.addEventListener('change', onQuickStationToggle);
+
+ const main = document.createElement('div');
+ main.className = 'opt-qs-main';
+
+ const name = document.createElement('div');
+ name.className = 'opt-qs-name';
+ name.textContent = ch.name || shortId;
+
+ if (ch.genre) {
+ const g = document.createElement('div');
+ g.className = 'opt-qs-genre';
+ g.textContent = ch.genre;
+ main.appendChild(name);
+ main.appendChild(g);
+ } else {
+ main.appendChild(name);
+ }
+
+ if (ch.description) {
+ const desc = document.createElement('div');
+ desc.className = 'opt-qs-desc';
+ desc.textContent = ch.description;
+ main.appendChild(desc);
+ }
+
+ label.appendChild(cb);
+ label.appendChild(main);
+ li.appendChild(label);
+ els.qsList.appendChild(li);
+ }
+
+ updateQuickStationsCount(picks.size);
+
+ els.qsReset.addEventListener('click', async () => {
+ if (!confirm('Reset Quick Stations to the default 8?')) return;
+ await resetQuickStations();
+ // Re-check the boxes to match defaults
+ const defaultSet = new Set(DEFAULT_QUICK_IDS);
+ for (const cb of document.querySelectorAll('#opt-qs-list input[type=checkbox]')) {
+ cb.checked = defaultSet.has(cb.value);
+ }
+ updateQuickStationsCount(defaultSet.size);
+ toast('Quick Stations reset to defaults');
+ });
+}
+
+async function onQuickStationToggle() {
+ const all = [...document.querySelectorAll('#opt-qs-list input[type=checkbox]')];
+ const picked = all.filter(c => c.checked).map(c => c.value);
+ await setQuickStations(picked);
+ updateQuickStationsCount(picked.length);
+}
+
+function updateQuickStationsCount(n) {
+ els.qsCount.textContent = `${n} selected`;
+}
+
async function refreshStats() {
const [history, favs, all] = await Promise.all([
getHistory(),
@@ -175,6 +312,46 @@ function formatBytes(n) {
return `${(n / (1024 * 1024)).toFixed(2)} MB`;
}
+/** Download tuner.history as a JSON or CSV file. (v0.5.3) */
+async function exportHistoryAs(format) {
+ const history = await getHistory();
+ if (!history.length) {
+ toast('No history to export yet — play some music first', 'error');
+ return;
+ }
+
+ let blob, ext, mime;
+ if (format === 'json') {
+ blob = new Blob([JSON.stringify(history, null, 2)], { type: 'application/json' });
+ ext = 'json';
+ } else {
+ // CSV — RFC 4180 quoting (doubled quotes, every cell quoted for safety).
+ const q = v => `"${String(v ?? '').replace(/"/g, '""')}"`;
+ const header = 'artist,title,station,station_id,when_iso\n';
+ const rows = history.map(e => [
+ q(e.artist),
+ q(e.title),
+ q(e.station),
+ q(e.stationId),
+ q(e.at ? new Date(e.at).toISOString() : ''),
+ ].join(',')).join('\n');
+ blob = new Blob([header + rows + '\n'], { type: 'text/csv;charset=utf-8' });
+ ext = 'csv';
+ }
+
+ const ts = new Date().toISOString().slice(0, 10);
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `rangerhq-tuner-history-${ts}.${ext}`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ setTimeout(() => URL.revokeObjectURL(url), 1000);
+
+ toast(`Exported ${history.length} track${history.length === 1 ? '' : 's'} as ${ext.toUpperCase()}`);
+}
+
function toast(message, tone) {
els.toast.textContent = message;
els.toast.dataset.tone = tone || '';