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:
+45
-1
@@ -245,11 +245,55 @@ html, body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Nav — quick-link row above the footer */
|
||||
.tuner-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
background: var(--bg-soft);
|
||||
border-top: 1px solid #000;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.tuner-nav-btn {
|
||||
background: var(--bg-soft);
|
||||
color: var(--fg-muted);
|
||||
border: 0;
|
||||
padding: 8px 4px;
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.tuner-nav-btn:hover {
|
||||
background: var(--bg-row);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.tuner-nav-btn:active {
|
||||
background: var(--bg-row-hi);
|
||||
}
|
||||
|
||||
.tuner-nav-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tuner-nav-label {
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.tuner-footer {
|
||||
padding: 6px 12px;
|
||||
background: var(--bg-soft);
|
||||
border-top: 1px solid #000;
|
||||
border-top: 1px solid var(--bg-row);
|
||||
font-size: 10px;
|
||||
color: var(--fg-muted);
|
||||
text-align: center;
|
||||
|
||||
@@ -36,6 +36,21 @@
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<nav class="tuner-nav" aria-label="Quick links">
|
||||
<button id="nav-open-tab" class="tuner-nav-btn" type="button" title="Open full Tuner in a new tab">
|
||||
<span class="tuner-nav-icon" aria-hidden="true">⎘</span>
|
||||
<span class="tuner-nav-label">Open in tab</span>
|
||||
</button>
|
||||
<button id="nav-history" class="tuner-nav-btn" type="button" title="Open Tuner tab on the History pane">
|
||||
<span class="tuner-nav-icon" aria-hidden="true">♪</span>
|
||||
<span class="tuner-nav-label">History</span>
|
||||
</button>
|
||||
<button id="nav-options" class="tuner-nav-btn" type="button" title="Open extension settings">
|
||||
<span class="tuner-nav-icon" aria-hidden="true">⚙</span>
|
||||
<span class="tuner-nav-label">Settings</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<footer class="tuner-footer">
|
||||
<span>SomaFM • indie radio • no telemetry</span>
|
||||
</footer>
|
||||
|
||||
+47
-7
@@ -13,8 +13,13 @@ const els = {
|
||||
volume: document.getElementById('volume'),
|
||||
search: document.getElementById('search'),
|
||||
list: document.getElementById('station-list'),
|
||||
navOpenTab: document.getElementById('nav-open-tab'),
|
||||
navHistory: document.getElementById('nav-history'),
|
||||
navOptions: document.getElementById('nav-options'),
|
||||
};
|
||||
|
||||
const NEWTAB_URL = chrome.runtime.getURL('src/newtab/newtab.html');
|
||||
|
||||
const STORAGE_KEYS = {
|
||||
stations: 'tuner.stationsCache',
|
||||
cachedAt: 'tuner.stationsCachedAt',
|
||||
@@ -77,6 +82,18 @@ async function init() {
|
||||
renderStations();
|
||||
});
|
||||
|
||||
// Nav buttons — popup closes automatically when a tab opens, which is
|
||||
// the expected UX. No popup.close() call needed.
|
||||
els.navOpenTab.addEventListener('click', () => {
|
||||
chrome.tabs.create({ url: NEWTAB_URL });
|
||||
});
|
||||
els.navHistory.addEventListener('click', () => {
|
||||
chrome.tabs.create({ url: `${NEWTAB_URL}#history` });
|
||||
});
|
||||
els.navOptions.addEventListener('click', () => {
|
||||
chrome.runtime.openOptionsPage();
|
||||
});
|
||||
|
||||
// 6. Listen for state changes broadcast from offscreen.
|
||||
chrome.runtime.onMessage.addListener((msg) => {
|
||||
if (msg.target !== TARGETS.POPUP) return;
|
||||
@@ -95,7 +112,26 @@ async function init() {
|
||||
}
|
||||
});
|
||||
|
||||
// 7. Enable the play button if we have a station picked.
|
||||
// 7. Cross-surface sync — if the New Tab Page (or another popup
|
||||
// instance) picks a station, mirror it here without a reload.
|
||||
chrome.storage.onChanged.addListener((changes, area) => {
|
||||
if (area !== 'local') return;
|
||||
|
||||
if (changes[STORAGE_KEYS.currentId] && stations.length) {
|
||||
const newId = changes[STORAGE_KEYS.currentId].newValue;
|
||||
currentStation = stations.find(s => s.id === newId) || null;
|
||||
els.btnPlay.disabled = !currentStation;
|
||||
renderNowPlaying();
|
||||
renderStations();
|
||||
}
|
||||
|
||||
if (changes[STORAGE_KEYS.isPlaying]) {
|
||||
playing = !!changes[STORAGE_KEYS.isPlaying].newValue;
|
||||
reflectPlayButton();
|
||||
}
|
||||
});
|
||||
|
||||
// 8. Enable the play button if we have a station picked.
|
||||
els.btnPlay.disabled = !currentStation;
|
||||
}
|
||||
|
||||
@@ -191,13 +227,17 @@ async function playCurrent() {
|
||||
const streamUrl = await source.resolveStreamUrl(currentStation);
|
||||
// Push current volume first so the first frame plays at the right level.
|
||||
await sendToSW({ type: TYPES.SET_VOLUME, volume: Number(els.volume.value) / 100 });
|
||||
const resp = await sendToSW({ type: TYPES.PLAY, streamUrl });
|
||||
// Pass a stripped station object — offscreen needs id/sourceId/name to
|
||||
// poll metadata + label history entries; the rest is UI-only.
|
||||
const stationLite = {
|
||||
id: currentStation.id,
|
||||
sourceId: currentStation.sourceId,
|
||||
name: currentStation.name,
|
||||
};
|
||||
const resp = await sendToSW({ type: TYPES.PLAY, streamUrl, station: stationLite });
|
||||
if (!resp?.ok) throw new Error(resp?.error || 'PLAY failed');
|
||||
|
||||
// Fire-and-forget now-playing fetch.
|
||||
source.getNowPlaying(currentStation).then(np => {
|
||||
if (np) els.npTrack.textContent = formatNowPlaying(np);
|
||||
}).catch(() => {});
|
||||
// The offscreen poll loop will broadcast METADATA_UPDATED within ~1s,
|
||||
// so we don't fire a separate one-shot fetch from here any more.
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setState('error');
|
||||
|
||||
Reference in New Issue
Block a user