ranger
ad43df87c0
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.
92 lines
3.6 KiB
HTML
92 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>RangerHQ Tuner — New Tab</title>
|
|
<link rel="stylesheet" href="newtab.css">
|
|
<link rel="icon" href="../assets/icons/icon-48.png">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="nt-header">
|
|
<div class="nt-brand">
|
|
<img src="../assets/img/ranger.png" alt="" class="nt-helmet">
|
|
<span class="nt-brand-name">RangerHQ Tuner</span>
|
|
</div>
|
|
<div class="nt-clock" aria-live="off">
|
|
<div class="nt-time" id="nt-time">
|
|
<span id="nt-hm">--:--</span><span class="nt-secs" id="nt-secs">--</span>
|
|
</div>
|
|
<div class="nt-date" id="nt-date">—</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="nt-main">
|
|
|
|
<section class="nt-now" aria-label="Now playing">
|
|
<div class="nt-station" id="nt-station">Pick a station to begin</div>
|
|
<div class="nt-track" id="nt-track">—</div>
|
|
<span class="nt-state-pill" id="nt-state" aria-live="polite">idle</span>
|
|
</section>
|
|
|
|
<section class="nt-controls" aria-label="Playback controls">
|
|
<button id="nt-play" class="nt-btn nt-btn--primary" aria-pressed="false" disabled>▶ Play</button>
|
|
<label class="nt-vol-wrap">
|
|
<span class="nt-vol-label">Vol</span>
|
|
<input type="range" id="nt-volume" min="0" max="100" value="70" aria-label="Volume">
|
|
</label>
|
|
</section>
|
|
|
|
<section class="nt-quick" aria-label="Quick stations">
|
|
<div class="nt-quick-label">Quick stations</div>
|
|
<div class="nt-quick-list" id="nt-quick-list">
|
|
<span class="nt-quick-empty">Loading…</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="nt-tabs" aria-label="Browse">
|
|
<div class="nt-tab-bar" role="tablist">
|
|
<button class="nt-tab is-active" role="tab" aria-selected="true" data-tab="stations">Stations</button>
|
|
<button class="nt-tab" role="tab" aria-selected="false" data-tab="history">History</button>
|
|
<button class="nt-tab" role="tab" aria-selected="false" data-tab="favourites">Favourites</button>
|
|
<a class="nt-tab nt-tab--link" href="#" id="nt-open-options" title="Open settings">⚙</a>
|
|
</div>
|
|
|
|
<div class="nt-tab-pane" id="nt-pane-stations" role="tabpanel">
|
|
<label class="nt-search-wrap">
|
|
<input type="search" id="nt-search" placeholder="Search all stations…" aria-label="Search stations">
|
|
</label>
|
|
<ul id="nt-station-list" class="nt-station-list" role="listbox"></ul>
|
|
</div>
|
|
|
|
<div class="nt-tab-pane" id="nt-pane-history" role="tabpanel" hidden>
|
|
<div class="nt-pane-toolbar">
|
|
<span class="nt-pane-count" id="nt-history-count">—</span>
|
|
<button class="nt-pane-action" id="nt-history-clear" type="button">Clear history</button>
|
|
</div>
|
|
<ul id="nt-history-list" class="nt-track-list" role="list"></ul>
|
|
</div>
|
|
|
|
<div class="nt-tab-pane" id="nt-pane-favourites" role="tabpanel" hidden>
|
|
<div class="nt-pane-toolbar">
|
|
<span class="nt-pane-count" id="nt-favs-count">—</span>
|
|
<button class="nt-pane-action" id="nt-favs-clear" type="button">Clear favourites</button>
|
|
</div>
|
|
<ul id="nt-favs-list" class="nt-track-list" role="list"></ul>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="nt-footer">
|
|
<a href="https://davidtkeane.com" target="_blank" rel="noopener">davidtkeane.com</a>
|
|
<span class="nt-dot">·</span>
|
|
<a href="https://git.davidtkeane.com/ranger/rangerhq-tuner" target="_blank" rel="noopener">Gitea</a>
|
|
<span class="nt-dot">·</span>
|
|
<span>SomaFM · indie radio · no telemetry</span>
|
|
</footer>
|
|
|
|
<script type="module" src="newtab.js"></script>
|
|
</body>
|
|
</html>
|