feat: v0.3.0 — history, 4-button search, options page, newtab override
Web Store submission target. Mirrors rangerhq-radio's track-history pattern (inc/history.php) so the family stays coherent across surfaces. Highlights - New Tab Page override (Tier 2.5) — Chrome's default new tab replaced with a RangerHQ-branded landing showing the player, current track, quick chips, searchable browse list, and now history + favourites tabs. - Track history + favourites — capped FIFO 500, dedup against last entry, skip "(unknown)" artist (SomaFM dead-air). Stored in chrome.storage.local under tuner.history + tuner.favourites. - 4-button search per entry — Spotify / YouTube / Apple Music / Bandcamp. Pure public-search-URL link-outs in a new tab, NO auth, NO API keys, NO quota, NO third-party SDK embedded. - Options page (chrome://extensions → details → options) — live stats, history cap slider (50-500), Clear history / Clear favourites / Clear EVERYTHING buttons, About panel with Gitea + davidtkeane.com links. - Popup nav row — Open in tab / History (#hash deep link) / Settings, using chrome.tabs.create + chrome.runtime.openOptionsPage. No new perms. - Cross-surface sync — popup ↔ newtab listen on chrome.storage.onChanged for tuner.currentStationId / tuner.isPlaying / history / favourites. - Storage gateway — offscreen doc can't reliably reach chrome.storage in some Chrome versions, so it sends LOG_TRACK_REQUEST to the SW which does the write. history.js also defensively guards every storage call. - Metadata latency fix — polling now starts immediately on PLAY, in parallel with audio buffer fill. First track display drops from ~10-15s to ~1-2s. Permissions unchanged - Still ["offscreen", "storage"] + somafm.com host only. - chrome.tabs.create works on our own extension URLs without "tabs" perm. - No webRequest, no <all_urls>, no third-party SDK. Bumped from 0.1.0 (last tag on Gitea) directly to 0.3.0. v0.2.0 (newtab + clock) was a working local build but never tagged; its features ship together with v0.3.0 in this single commit.
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
// RangerHQ Tuner — Options page controller.
|
||||
// Manages the user's local data: history cap, clear actions, stats display.
|
||||
// Broadcasts STORAGE_WIPED after destructive actions so the popup/newtab
|
||||
// rerender immediately.
|
||||
|
||||
import { TARGETS, TYPES } from '../lib/messages.js';
|
||||
import {
|
||||
getHistory, getFavourites,
|
||||
getHistoryCap, setHistoryCap,
|
||||
clearHistory, clearFavourites, clearAll,
|
||||
} from '../lib/history.js';
|
||||
|
||||
const STORAGE_KEYS = {
|
||||
stations: 'tuner.stationsCache',
|
||||
currentId: 'tuner.currentStationId',
|
||||
volume: 'tuner.volume',
|
||||
};
|
||||
|
||||
const els = {
|
||||
version: document.getElementById('opt-version'),
|
||||
statHistory: document.getElementById('opt-stat-history'),
|
||||
statFavs: document.getElementById('opt-stat-favs'),
|
||||
statCache: document.getElementById('opt-stat-cache'),
|
||||
statBytes: document.getElementById('opt-stat-bytes'),
|
||||
capSlider: document.getElementById('opt-cap'),
|
||||
capValue: document.getElementById('opt-cap-value'),
|
||||
clearHistory: document.getElementById('opt-clear-history'),
|
||||
clearFavs: document.getElementById('opt-clear-favs'),
|
||||
clearAll: document.getElementById('opt-clear-all'),
|
||||
volumeDisplay: document.getElementById('opt-volume-display'),
|
||||
lastStation: document.getElementById('opt-last-station'),
|
||||
toast: document.getElementById('opt-toast'),
|
||||
};
|
||||
|
||||
init().catch(err => {
|
||||
console.error('Options init failed:', err);
|
||||
toast(`Init failed: ${err.message}`, 'error');
|
||||
});
|
||||
|
||||
async function init() {
|
||||
els.version.textContent = `v${chrome.runtime.getManifest().version}`;
|
||||
await refreshStats();
|
||||
await refreshPlayback();
|
||||
|
||||
const cap = await getHistoryCap();
|
||||
els.capSlider.value = String(cap);
|
||||
els.capValue.textContent = String(cap);
|
||||
|
||||
els.capSlider.addEventListener('input', () => {
|
||||
els.capValue.textContent = els.capSlider.value;
|
||||
});
|
||||
els.capSlider.addEventListener('change', async () => {
|
||||
const newCap = await setHistoryCap(Number(els.capSlider.value));
|
||||
els.capValue.textContent = String(newCap);
|
||||
toast(`History cap set to ${newCap}`);
|
||||
await refreshStats();
|
||||
});
|
||||
|
||||
els.clearHistory.addEventListener('click', async () => {
|
||||
if (!confirm('Clear all track history? Favourites will be preserved.')) return;
|
||||
await clearHistory();
|
||||
await refreshStats();
|
||||
notifyUis();
|
||||
toast('History cleared');
|
||||
});
|
||||
|
||||
els.clearFavs.addEventListener('click', async () => {
|
||||
if (!confirm('Clear all favourites?')) return;
|
||||
await clearFavourites();
|
||||
await refreshStats();
|
||||
notifyUis();
|
||||
toast('Favourites cleared');
|
||||
});
|
||||
|
||||
els.clearAll.addEventListener('click', async () => {
|
||||
if (!confirm('Wipe EVERYTHING — history, favourites, station cache, volume, last station? This cannot be undone.')) return;
|
||||
await clearAll();
|
||||
await refreshStats();
|
||||
await refreshPlayback();
|
||||
els.capSlider.value = '500';
|
||||
els.capValue.textContent = '500';
|
||||
notifyUis();
|
||||
toast('All local data wiped', 'danger');
|
||||
});
|
||||
|
||||
// Refresh stats live if storage changes from another surface
|
||||
chrome.storage.onChanged.addListener((changes, area) => {
|
||||
if (area !== 'local') return;
|
||||
if (Object.keys(changes).some(k => k.startsWith('tuner.'))) {
|
||||
refreshStats();
|
||||
refreshPlayback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshStats() {
|
||||
const [history, favs, all] = await Promise.all([
|
||||
getHistory(),
|
||||
getFavourites(),
|
||||
chrome.storage.local.get(null),
|
||||
]);
|
||||
const cacheArr = Array.isArray(all[STORAGE_KEYS.stations]) ? all[STORAGE_KEYS.stations] : [];
|
||||
|
||||
// Estimate "tuner.*" bytes — JSON stringification is close enough for
|
||||
// a user-facing display, no need for the exact storage-engine cost.
|
||||
let bytes = 0;
|
||||
for (const [k, v] of Object.entries(all)) {
|
||||
if (!k.startsWith('tuner.')) continue;
|
||||
try { bytes += k.length + JSON.stringify(v).length; } catch { /* nope */ }
|
||||
}
|
||||
|
||||
els.statHistory.textContent = `${history.length} tracks`;
|
||||
els.statFavs.textContent = `${favs.length} tracks`;
|
||||
els.statCache.textContent = `${cacheArr.length} stations`;
|
||||
els.statBytes.textContent = formatBytes(bytes);
|
||||
}
|
||||
|
||||
async function refreshPlayback() {
|
||||
const stored = await chrome.storage.local.get([
|
||||
STORAGE_KEYS.volume,
|
||||
STORAGE_KEYS.currentId,
|
||||
STORAGE_KEYS.stations,
|
||||
]);
|
||||
const vol = stored[STORAGE_KEYS.volume];
|
||||
els.volumeDisplay.textContent = typeof vol === 'number'
|
||||
? `${Math.round(vol * 100)}%`
|
||||
: '—';
|
||||
|
||||
const id = stored[STORAGE_KEYS.currentId];
|
||||
const cache = Array.isArray(stored[STORAGE_KEYS.stations]) ? stored[STORAGE_KEYS.stations] : [];
|
||||
const cur = cache.find(s => s.id === id);
|
||||
els.lastStation.textContent = cur?.name || (id || '—');
|
||||
}
|
||||
|
||||
function notifyUis() {
|
||||
chrome.runtime.sendMessage({ target: TARGETS.POPUP, type: TYPES.STORAGE_WIPED })
|
||||
.catch(() => {}); // no listeners is fine
|
||||
}
|
||||
|
||||
function formatBytes(n) {
|
||||
if (n < 1024) return `${n} B`;
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
||||
return `${(n / (1024 * 1024)).toFixed(2)} MB`;
|
||||
}
|
||||
|
||||
function toast(message, tone) {
|
||||
els.toast.textContent = message;
|
||||
els.toast.dataset.tone = tone || '';
|
||||
els.toast.hidden = false;
|
||||
clearTimeout(toast._t);
|
||||
toast._t = setTimeout(() => { els.toast.hidden = true; }, 2400);
|
||||
}
|
||||
Reference in New Issue
Block a user