Compare commits
30 Commits
v0.1.0
...
dbbcf55b2b
| Author | SHA1 | Date | |
|---|---|---|---|
 ranger
|
dbbcf55b2b | ||
|
ranger
|
131569963a | ||
|
ranger
|
ada3c4e18a | ||
|
ranger
|
60331b8350 | ||
|
ranger
|
529409eed9 | ||
|
ranger
|
88f80a27c1 | ||
|
ranger
|
89c26a1ad5 | ||
|
ranger
|
2ed4bcffa9 | ||
|
ranger
|
04dc3b70ec | ||
|
ranger
|
6cddfccc3d | ||
|
ranger
|
609e0edf60 | ||
|
ranger
|
c3e3cc16fd | ||
|
ranger
|
7c476315f5 | ||
|
ranger
|
d0d5e76abe | ||
|
ranger
|
5510cebde1 | ||
|
ranger
|
eb6901f722 | ||
|
ranger
|
41f42f1048 | ||
|
ranger
|
f796fe8223 | ||
|
ranger
|
afaff271a4 | ||
|
ranger
|
b82f14ee7b | ||
|
ranger
|
9695d9d341 | ||
|
ranger
|
3259ece909 | ||
|
ranger
|
24cbfbe746 | ||
|
ranger
|
6f06ea73d1 | ||
|
ranger
|
f56649073d | ||
|
ranger
|
484191a974 | ||
|
ranger
|
db71abe525 | ||
|
ranger
|
c3e5060199 | ||
|
ranger
|
baaa5e527d | ||
|
ranger
|
ad43df87c0 |
@@ -7,3 +7,9 @@ dist/
|
||||
# so it lives outside git and gets backed up separately.
|
||||
*.crx
|
||||
*.pem
|
||||
|
||||
# Internal submission notes — paste copy for the Chrome Web Store
|
||||
# Dashboard. Lives locally so we can quick-reference it during
|
||||
# updates, but not for the public repo (random visitors don't need
|
||||
# to see internal listing copy or reviewer-targeted justifications).
|
||||
WEB_STORE_SUBMISSION.md
|
||||
|
||||
+371
-4
@@ -7,10 +7,377 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### Planned — New Tab Page override (Tier 2.5)
|
||||
- Replace Chrome's default New Tab Page with a RangerHQ-branded version that surfaces the player, current track, and a quick-station picker.
|
||||
- Adds `chrome_url_overrides.newtab` to `manifest.json` pointing at `src/newtab/newtab.html`.
|
||||
- Reuses the popup's CSS palette + source-adapter pattern — no new architectural concepts.
|
||||
### Planned — Long-term
|
||||
- `.m3u` parser alongside `.pls` to widen future-adapter compatibility
|
||||
- Station artwork lazy-load + fallback to family helmet
|
||||
- Better error UI for failed streams ("Stream unavailable, try another")
|
||||
- `.crx` packaging instructions in README for sideload users
|
||||
- Second source adapter stub to exercise the multi-source UI
|
||||
|
||||
---
|
||||
|
||||
## [0.5.3] — 2026-06-10 — User-customizable Quick Stations + history export ("app is done")
|
||||
|
||||
Per David: *"this app is kinda done"* — meaning the product surface is feature-complete. After this version, polish remains but no headline features are missing.
|
||||
|
||||
### Added — User-customizable Quick Stations
|
||||
|
||||
Pure-data architecture: the NewTab Quick Stations chip row is now driven by `tuner.quickStations` in `chrome.storage.local` rather than a hardcoded `QUICK_IDS` array. **Default 8 (tidy 2-row layout, matches v0.4.0 look).** User can pick any subset of all 46 SomaFM channels via a new Options page card.
|
||||
|
||||
**Where:** new "Quick Stations" card on the Options page (sits between Appearance and Playback). Layout: helper text + selected-count badge + scrollable checkbox list + Reset-to-defaults button.
|
||||
|
||||
**Each list row** shows: checkbox + station name + genre pill (accent green, uppercase) + the SomaFM channel description (the same string available as a chip-hover tooltip on the NewTab — now properly visible at the time of picking).
|
||||
|
||||
**Live sync:** ticking a checkbox writes to `chrome.storage.local`. The NewTab `chrome.storage.onChanged` listener picks up the change and re-renders the Quick Stations chip row instantly without a reload. Cross-surface consistency is the same pattern as theme + station selection.
|
||||
|
||||
**Robust fresh-install fallback:** if Options is opened BEFORE the NewTab has ever populated the station catalogue cache, `initQuickStationsUI` fetches SomaFM channels directly via `listAllStations()` then caches the result back to `tuner.stationsCache`. Future Options opens are then instant.
|
||||
|
||||
**Empty-pick case:** if the user unticks everything, the Quick Stations row on the NewTab shows *"No Quick Stations picked — set some in ⚙ Settings."* instead of a silently empty section.
|
||||
|
||||
### Added — History export (JSON + CSV)
|
||||
|
||||
Two new buttons in the Local Data card: **Export history (JSON)** and **Export history (CSV)**.
|
||||
|
||||
- **JSON**: full pretty-printed array of `tuner.history` entries. Best for programmatic re-import or backup.
|
||||
- **CSV**: RFC 4180 quoted (every cell quoted, doubled quotes for embedded quotes). Header: `artist,title,station,station_id,when_iso`. Opens cleanly in Excel / Numbers / Google Sheets.
|
||||
|
||||
Filename: `rangerhq-tuner-history-YYYY-MM-DD.{ext}`.
|
||||
|
||||
Empty-history case shows an error toast ("No history to export yet — play some music first"). Success case shows a green toast with the export count and format.
|
||||
|
||||
No new permissions — uses standard `Blob` + `URL.createObjectURL` + a programmatic `<a>` click. The entire export runs client-side in the Options page; nothing is sent off-device.
|
||||
|
||||
### New / changed files
|
||||
|
||||
- `src/lib/quick-stations.js` (NEW, ~55 lines) — `DEFAULT_QUICK_IDS` constant + `getQuickStations / setQuickStations / resetQuickStations` helpers. Same defensive `storage()` accessor pattern as `lib/history.js` and `lib/theme.js`.
|
||||
- `src/newtab/newtab.js` — removed hardcoded `QUICK_IDS` array, replaced with module-level `quickIds = []` populated during `init()` from `getQuickStations()` and re-loaded when `chrome.storage.onChanged` fires on `tuner.quickStations`. `renderQuick()` shows the empty-pick fallback message.
|
||||
- `src/options/options.html` — new "Quick Stations" card + two export buttons in the Local Data card.
|
||||
- `src/options/options.css` — ~90 lines for the picker (scrollable list, row layout, accent-coloured count badge, hover background, brand scrollbar).
|
||||
- `src/options/options.js` — `initQuickStationsUI` builds the checkbox list, `onQuickStationToggle` persists picks, `exportHistoryAs` generates the download Blob. Plus the storage.onChanged listener was made async to support cross-surface picker sync.
|
||||
|
||||
Total: 5 files, +372 / -25 lines (1 new file).
|
||||
|
||||
### Not changed
|
||||
|
||||
- No new permissions
|
||||
- No new host_permissions
|
||||
- No new external libraries / SDKs
|
||||
- No data migration required
|
||||
- Existing user state (current station / volume / history / favourites / theme) survives intact
|
||||
- Defaults match v0.4.0's curated Quick Stations exactly — users who never open Options get the same look they had before
|
||||
|
||||
### Workflow note
|
||||
|
||||
This release was bundled into v0.5.0's eventual Web Store upload — when v0.5.0 clears re-review, we build a v0.5.3 ZIP directly from main and upload that instead. Users at v0.4.0 jump straight to v0.5.3 (skipping v0.5.0, v0.5.1, v0.5.2) and get all the polish in a single update notification.
|
||||
|
||||
---
|
||||
|
||||
## [0.5.2] — 2026-06-10 — Quick Stations fix: replace retired BAGeL with PopTron
|
||||
|
||||
Hotfix for v0.5.1's Quick Stations row. David flagged: *"the stations still look a bit off"* — turned out only 13 chips were rendering instead of the intended 14. Investigation showed **BAGeL Radio has been retired from SomaFM's current `channels.json` catalogue** — the render loop's "drop missing slugs silently" behaviour (working as designed) made the chip just disappear.
|
||||
|
||||
### Changed
|
||||
|
||||
- `src/newtab/newtab.js` `QUICK_IDS` array: `'bagel'` → `'poptron'`. PopTron (alternative / alt-rock) fills the same indie/alt-rock genre slot BAGeL covered, and is currently a live SomaFM channel.
|
||||
|
||||
### Result
|
||||
|
||||
14 chips visible again. Layout reads cleaner — 6+6+2 instead of 6+6+1 (ThistleRadio no longer alone on its own row).
|
||||
|
||||
### No other change
|
||||
|
||||
- No CSS, no permissions, no dependencies, no behaviour change
|
||||
- Single one-line edit in `QUICK_IDS`
|
||||
- Still held from Chrome Web Store upload until v0.5.0 clears re-review
|
||||
|
||||
### Lesson — SomaFM channel catalogue is mutable
|
||||
|
||||
Channels can be retired at any time. The render loop's "drop missing slugs silently" pattern protects against this, but the developer-side responsibility is to verify slugs against the live `channels.json` before adding to QUICK_IDS:
|
||||
|
||||
```bash
|
||||
curl -s https://somafm.com/channels.json | python3 -c "import json,sys; print([c['id'] for c in json.load(sys.stdin)['channels']])"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## [0.5.1] — 2026-06-10 — Quick Stations expansion (8 → 14)
|
||||
|
||||
Third update of the day. **Tagged on Gitea but held from Chrome Web Store upload until v0.5.0 clears re-review** — we want the v0.5.0 features (light mode + theme toggle + back-link + first-run UX hint) landing in users' browsers before this stations expansion piles on top.
|
||||
|
||||
### Added — 6 more channels in the NewTab Quick Stations chip row
|
||||
|
||||
Was reading sparse with only 8 chips. The row had space for more. Added six channels for broader genre coverage + two on-brand picks:
|
||||
|
||||
| Slug | Channel | Why |
|
||||
|---|---|---|
|
||||
| `defcon` | DEF CON Radio | Electronic / hacker culture — David's personal favourite, on-brand for a cybersecurity-adjacent extension |
|
||||
| `beatblender` | Beat Blender | Electronic / breakbeat — popular channel |
|
||||
| `bootliquor` | Boot Liquor | Americana / outlaw country — adds country/twang coverage |
|
||||
| `u80s` | Underground 80s | 80s indie / synthwave — adds decade coverage |
|
||||
| `bagel` | BAGeL Radio | Indie / alt-rock — guitar-driven indie |
|
||||
| `thistle` | ThistleRadio | Celtic / folk — 🇮🇪 Dublin-built nod |
|
||||
|
||||
Total chip count: 8 → 14. No new files, no new permissions, no new dependencies, no code change other than the `QUICK_IDS` array in `src/newtab/newtab.js`.
|
||||
|
||||
The render loop already drops any slug missing from SomaFM's `channels.json` catalogue, so if a channel is retired upstream the chip just disappears silently — no error, no broken state.
|
||||
|
||||
### Files touched
|
||||
|
||||
- `src/newtab/newtab.js` — `QUICK_IDS` array updated from 8 to 14 entries, with per-slug genre comments. +19 / -8 lines.
|
||||
|
||||
Total: 1 file, +19/-8 lines.
|
||||
|
||||
### Not changed
|
||||
|
||||
- No new permissions
|
||||
- No new dependencies
|
||||
- No CSS / HTML changes
|
||||
- No data migration
|
||||
|
||||
### Shipping note
|
||||
|
||||
`v0.5.1` is tagged on Gitea on 2026-06-10 but **deliberately held from the Chrome Web Store** until `v0.5.0` clears re-review (currently pending). David's reasoning: *"we will ship to web store after the last one gets accepted, that one is important so a user knows what to do"* — the v0.5.0 first-run hint + light mode features are higher-value for new users; this stations expansion is a smaller polish that should land after.
|
||||
|
||||
---
|
||||
|
||||
## [0.5.0] — 2026-06-10 — Light mode + theme toggle + Options back-link
|
||||
|
||||
Second post-launch update, ~36 hours after v0.4.0 cleared the Chrome Web Store. Three bundled improvements, all UX polish:
|
||||
|
||||
### Added — Light mode support across all three surfaces
|
||||
|
||||
**Phase 1 — Auto-follow OS theme.** Each stylesheet (popup, NewTab, Options) gets a `@media (prefers-color-scheme: light)` block that flips the `:root` CSS variables to a light palette while preserving brand identity. Every existing rule using `var(--*)` tokens carries over unchanged.
|
||||
|
||||
Light palette:
|
||||
- `--bg` `#f6f4ed` cream-leaning off-white
|
||||
- `--bg-soft` `#ece5d2` slightly darker for header bars
|
||||
- `--bg-row` `#ddd6c0` hover backgrounds
|
||||
- `--bg-row-hi` `#c8c0a8` active rows
|
||||
- `--fg` `#2a2f28` dark forest-green-leaning text
|
||||
- `--accent` `#2a7d3e` darker brand green (preserves "RangerHQ green" identity)
|
||||
- `--cream` `#b8861a` darker amber (readable on light)
|
||||
- `--danger` `#b53a2b` darker red (readable on light)
|
||||
|
||||
NewTab helmet watermark opacity bumped 0.025 → 0.04 in light mode (helmet contrasts differently on light bg). Wired via a new `--watermark-opacity` CSS variable.
|
||||
|
||||
State pills, primary play button, toasts, and danger button hover all get text-colour overrides for both modes so they stay readable when their background becomes solid accent / cream / danger.
|
||||
|
||||
### Added — Manual Auto / Dark / Light theme toggle (Phase 2)
|
||||
|
||||
**Three-radio group in a new "Appearance" card on the Options page.** Stored in `chrome.storage.local` under `tuner.theme`. Defaults to "auto" (follow OS).
|
||||
|
||||
- **Auto** — follows OS via `@media (prefers-color-scheme: light)` (covers ~95% of users)
|
||||
- **Dark** — forces dark palette regardless of OS
|
||||
- **Light** — forces light palette regardless of OS
|
||||
|
||||
This exists because there are three independent theme layers (OS, browser-chrome, page CSS) that can disagree. `@media (prefers-color-scheme: ...)` reads the OS layer only, NOT the browser-chrome theme. So users with mismatched layers (e.g. macOS light + Chrome dark theme installed) can override the auto-follow.
|
||||
|
||||
Implementation: `data-theme` attribute on `<html>` ( "light" / "dark" / removed for auto). `html[data-theme="..."]` CSS selectors beat both the default `:root` and the `@media :root` on specificity.
|
||||
|
||||
New file: `src/lib/theme.js` — shared `getTheme/setTheme/applyTheme/initTheme` helpers used by all three entry-point scripts.
|
||||
|
||||
The choice syncs across surfaces via `chrome.storage.onChanged`: pick Light in Options → popup + NewTab flip instantly without reload. Theme applies BEFORE first paint (each init() calls `initTheme()` first) so there's no dark flash on light-mode-preferring browsers.
|
||||
|
||||
### Added — Options page → Tuner back-link
|
||||
|
||||
The Options page header (helmet + "RangerHQ Tuner — Options") is now a single clickable anchor pointing at `newtab.html`. Subtle `←` glyph to the left of the helmet; hover shifts the arrow left and tints it accent green. Same-tab navigation — user came IN via Options, goes OUT into the player UI in the same tab. No accumulating Tuner tabs.
|
||||
|
||||
Fixes UX gap David flagged on 2026-06-09 night: *"when i click the settings button i go to settings but we have no back link to radio."*
|
||||
|
||||
### Files touched
|
||||
|
||||
- `src/lib/theme.js` (NEW, ~55 lines)
|
||||
- `src/popup/popup.css` (+50 lines — light + dark override blocks)
|
||||
- `src/popup/popup.js` (+8 lines — initTheme call + storage.onChanged hook)
|
||||
- `src/newtab/newtab.css` (+50 lines — light + dark override blocks)
|
||||
- `src/newtab/newtab.js` (+8 lines — same wiring)
|
||||
- `src/options/options.html` (+24 lines — Appearance card)
|
||||
- `src/options/options.css` (+90 lines — light + dark blocks + radio styling)
|
||||
- `src/options/options.js` (+32 lines — radio handlers + cross-surface sync)
|
||||
|
||||
Total: 8 files, ~340 lines added.
|
||||
|
||||
### Not changed
|
||||
|
||||
- No new permissions
|
||||
- No new host_permissions
|
||||
- No new external libraries
|
||||
- No data migration required
|
||||
- Existing user state (current station / volume / history / favourites) survives intact
|
||||
|
||||
### Reviewer expectations
|
||||
|
||||
Same-account update with no permission change. Same-day review expected (~hours to 24h), similar to v0.4.0's 24h-ish re-review window per [[reference_chrome_web_store_rules]].
|
||||
|
||||
---
|
||||
|
||||
## [0.4.0] — 2026-06-09 — First-run UX hint
|
||||
|
||||
First post-launch update, shipped the same day v0.3.0 went LIVE on the Chrome Web Store. Pure UX polish — zero new permissions, zero new code dependencies, zero behaviour change for existing users.
|
||||
|
||||
### Added — Discoverable "pick a station to begin" affordance
|
||||
|
||||
Triggered by David's own 30-second panic on first Web Store install (uninstalled the dev build, installed from the Web Store fresh, hit Play, got nothing, then realised "ah, I need to pick a station first"). The product worked correctly — the dev build had a seeded station from hours of testing, the fresh install does not — but the 30-second panic exposed a real first-run-UX gap.
|
||||
|
||||
**Two layered cues, both pure CSS driven by a `body.is-first-run` class:**
|
||||
|
||||
1. **Subtle accent-green glow pulses** around the station list (popup) and the Quick Stations chip row (NewTab). Uses a 2.4-second `box-shadow` keyframe at low alpha (0.18-0.25) — visible but not noisy.
|
||||
2. **Bouncing ↓ arrow** appended to the "Pick a station to begin" text in both surfaces. Uses an `::after` pseudo-element with a 1.8-second `translateY` keyframe.
|
||||
|
||||
The `is-first-run` class is toggled by a tiny `reflectFirstRunHint()` function called from:
|
||||
- `init()` once stations + `currentStation` are resolved
|
||||
- `onPickStation()` the moment a user picks
|
||||
- the `chrome.storage.onChanged` listener when another surface picks (so the hint disappears on both surfaces simultaneously via cross-surface sync)
|
||||
|
||||
Existing users with a stored `tuner.currentStationId` never see either cue — the class only attaches when `currentStation` is null.
|
||||
|
||||
### Files touched
|
||||
|
||||
- `src/popup/popup.css` (+35 lines — keyframes + `.is-first-run` rules)
|
||||
- `src/popup/popup.js` (+11 lines — `reflectFirstRunHint()` + 3 call sites)
|
||||
- `src/newtab/newtab.css` (+36 lines — same idea, NewTab-namespaced)
|
||||
- `src/newtab/newtab.js` (+10 lines — same pattern)
|
||||
|
||||
Total: 4 files, +92 lines, 0 deletions.
|
||||
|
||||
### Not changed
|
||||
|
||||
- No new permissions
|
||||
- No new host_permissions
|
||||
- No new external libraries
|
||||
- No change to `manifest.json` beyond the version bump and CHANGELOG-referenced URL
|
||||
- No data migration required (no storage shape change)
|
||||
|
||||
### Same-day context
|
||||
|
||||
This update ships the same day:
|
||||
- v0.3.0 went LIVE on the Chrome Web Store (~17:08 Dublin, ~15.5h after submission)
|
||||
- RangerHQ Radio v1.0.0 stability milestone went LIVE on WordPress.org (~21:51 Dublin)
|
||||
- David received a PhD-prep signal from his Research in Computing lecturer at NCI Dublin
|
||||
|
||||
A solid day.
|
||||
|
||||
---
|
||||
|
||||
## [0.3.0] — 2026-06-08
|
||||
|
||||
### Added — Track history + 4-button search + Options page (Web Store target)
|
||||
|
||||
This is the version that goes to the Chrome Web Store. Mirrors the rangerhq-radio WordPress plugin's history feature so the family stays coherent across surfaces.
|
||||
|
||||
#### Track history
|
||||
- **`src/lib/history.js`** — helpers for history/favourites/search-URL/dedup/cap/clear, mirroring `inc/history.php` in the WP plugin.
|
||||
- **Storage:** `tuner.history` (FIFO, capped at 500 by default) and `tuner.favourites` (uncapped) in `chrome.storage.local`. Cap configurable 50–500 on the Options page.
|
||||
- **Entry shape** (mirror WP plugin exactly): `{ artist, title, station, stationId, at }` where `at = Date.now()`.
|
||||
- **Dedup against the LAST entry only** so consecutive identical now-playing reads don't pile up.
|
||||
- **Skip `(unknown)` artist** — SomaFM's dead-air/promo placeholder doesn't pollute the log.
|
||||
|
||||
#### Metadata polling
|
||||
- **`src/offscreen/offscreen.js`** — the offscreen document (where audio lives) now polls SomaFM's per-channel song endpoint every 25 s while playing. On `PLAY`, polling starts (immediate first fetch + interval). On `PAUSE` or `ERROR`, polling stops. Within-session dedup prevents redundant logs when the same song stays current across polls.
|
||||
- **Why the offscreen doc, not the SW:** the SW gets killed when idle; the offscreen doc is alive while audio plays. This is the right home for the loop.
|
||||
- New message types in `src/lib/messages.js`: `TRACK_LOGGED`, `FAVOURITE_TOGGLED`, `STORAGE_WIPED`.
|
||||
|
||||
#### 4-button search (the headline feature)
|
||||
- Every track row in History and Favourites gets four search-link buttons that open the major services' public search pages in a new tab:
|
||||
|
||||
| Service | URL pattern |
|
||||
|---|---|
|
||||
| Spotify | `https://open.spotify.com/search/{enc}` |
|
||||
| YouTube | `https://www.youtube.com/results?search_query={enc}` |
|
||||
| Apple Music | `https://music.apple.com/search?term={enc}` |
|
||||
| Bandcamp | `https://bandcamp.com/search?q={enc}` |
|
||||
|
||||
Where `enc = encodeURIComponent(artist + " " + title)`. **Zero auth, zero API keys, zero quota, zero ToS gray area.** RangerHQ Tuner doesn't play these services — it opens the search results page and the user picks. Same approach as the rangerhq-radio WP plugin.
|
||||
|
||||
- Each link is brand-coloured (muted on the dark palette) — Spotify green, YouTube red, Apple pink, Bandcamp cyan. `target="_blank"` + `rel="noopener noreferrer"`.
|
||||
|
||||
#### Tabbed New Tab Page
|
||||
- The New Tab Page's bottom section is now a **3-tab control**: **Stations · History · Favourites**, plus a ⚙ icon that opens the Options page.
|
||||
- History tab: newest first, with track title, artist (accent green), `station · 2m ago` meta line, star toggle, and the 4 search links.
|
||||
- Favourites tab: same shape, all your starred tracks.
|
||||
- Each tab has its own "Clear …" button in the toolbar (confirm dialog).
|
||||
|
||||
#### Options page (NEW)
|
||||
- Registered via `"options_page": "src/options/options.html"` in the manifest. Opens via `chrome://extensions` → details → Extension options OR via the ⚙ on the New Tab Page.
|
||||
- **Local data card:** live stats (History size, Favourites size, Stations cached, Total `tuner.*` bytes), history-cap slider (50–500 step 50), and three buttons:
|
||||
- `Clear history` — drops `tuner.history` only.
|
||||
- `Clear favourites` — drops `tuner.favourites` only.
|
||||
- `Clear EVERYTHING` (danger styling) — wipes every `tuner.*` key in `chrome.storage.local`.
|
||||
- **Playback card:** current volume %, last-played station name (read-only).
|
||||
- **About card:** version, Gitea repo link, davidtkeane.com link, SomaFM link, licence reminder.
|
||||
- A small toast message confirms each destructive action.
|
||||
- The page listens for `chrome.storage.onChanged` so stats stay live if you wipe from somewhere else.
|
||||
|
||||
#### Manifest
|
||||
|
||||
- Version: `0.2.0` → `0.3.0`.
|
||||
- Description updated to mention the 4-button search affordance (helps Web Store reviewers see the single-purpose statement matches the listing).
|
||||
- Added `"options_page": "src/options/options.html"`.
|
||||
- **No new permissions, no new host permissions.** Still `["offscreen", "storage"]` + `somafm.com` only. Search-link clicks open in a new browser tab — that's the user's navigation, not an API call from the extension.
|
||||
|
||||
#### Cross-surface state sync
|
||||
|
||||
The popup and the New Tab Page now stay in lockstep without manual reloads. Both surfaces subscribe to `chrome.storage.onChanged` and re-render when:
|
||||
|
||||
- `tuner.currentStationId` changes (someone in the other surface picked a station)
|
||||
- `tuner.isPlaying` changes (play/pause from anywhere)
|
||||
- `tuner.history` or `tuner.favourites` mutates (re-render the relevant tab)
|
||||
|
||||
Single source of truth = `chrome.storage.local`. No more drift between popup and New Tab.
|
||||
|
||||
#### Storage gateway architecture (MV3 safety net)
|
||||
|
||||
Offscreen documents don't reliably have access to `chrome.storage` across Chrome versions, so all storage writes from the offscreen audio host are routed through the service worker via a new `LOG_TRACK_REQUEST` message type. The SW (which always has `chrome.storage`) does the actual `tuner.history` write and broadcasts `TRACK_LOGGED` back to the UI surfaces.
|
||||
|
||||
As belt-and-braces, every function in `src/lib/history.js` now checks for `chrome.storage` availability before using it and returns sensible defaults if absent — so the module is safe to import from any extension context.
|
||||
|
||||
#### Metadata latency fix (parallelised audio + polling)
|
||||
|
||||
When PLAY arrives at the offscreen doc, metadata polling now starts **immediately** in parallel with the audio HTTP buffer fill, rather than waiting for `audio.play()` to resolve. First-track display time drops from ~10-15 seconds (audio buffer + then poll) to ~1-2 seconds (poll racing in parallel with buffer fill).
|
||||
|
||||
#### Popup quick-link nav
|
||||
|
||||
The toolbar popup now has a three-button nav row above the footer:
|
||||
|
||||
- **⎘ Open in tab** — `chrome.tabs.create({url: chrome.runtime.getURL('src/newtab/newtab.html')})` opens the full Tuner UI as a regular pinnable tab.
|
||||
- **♪ History** — same as Open in tab but with `#history` hash so the History pane is pre-selected. `newtab.js` reads `location.hash` on init and respects it.
|
||||
- **⚙ Settings** — `chrome.runtime.openOptionsPage()` opens the Options page directly.
|
||||
|
||||
No new permissions: `chrome.tabs.create()` works on our own extension URLs without the `tabs` permission. The Web Store permission profile stays `["offscreen", "storage"]` + `somafm.com` host only.
|
||||
|
||||
#### Why this is the Web Store version
|
||||
|
||||
- Clear single-purpose statement now obvious: *"Plays SomaFM internet radio, logs heard tracks, and provides search-link shortcuts to Spotify/YouTube/Apple Music/Bandcamp."*
|
||||
- Privacy story stays clean: "collects nothing, stores everything locally, no remote storage" — every Options-page checkbox stays "does not collect" on the Dashboard.
|
||||
- The four service buttons are pure `<a href>` link-outs — Web Store reviewers can verify they don't embed third-party SDKs.
|
||||
- All inline styles are gone (lessons from `rangerhq-buddy v0.1.5`).
|
||||
- Accessibility: every button has an `aria-label`, every interactive element is reachable by keyboard, focus rings visible, contrast ≥ 4.5:1.
|
||||
- Storage operations are SW-gated, so even Chrome versions with the offscreen-doc storage quirk run cleanly.
|
||||
|
||||
---
|
||||
|
||||
## [0.2.0] — 2026-06-08
|
||||
|
||||
### Added — New Tab Page override (Tier 2.5)
|
||||
|
||||
Replace Chrome's default New Tab Page with a RangerHQ-branded landing that surfaces the player, current track, a quick-station chip row, and a searchable browse list. Same `chrome.offscreen` audio pipeline as the popup — the New Tab Page is just a second view onto the same playback state. Live ticking clock (HH:MM in bold + small dim seconds) updates every second; date renders in the user's locale.
|
||||
|
||||
Note: v0.2.0 was a working local build but was never tagged on Gitea — its features ship to the world together with v0.3.0 in a single commit.
|
||||
|
||||
- **`manifest.json`**: added
|
||||
```json
|
||||
"chrome_url_overrides": { "newtab": "src/newtab/newtab.html" }
|
||||
```
|
||||
Description string updated to mention the optional New Tab Page replacement (Web Store reviewers prefer overrides to be disclosed in the description).
|
||||
- **`src/newtab/newtab.html`** — full-viewport landing with header (helmet + clock), large now-playing block, generous Play/Volume controls, quick-station chips, searchable browse list, footer linking to `davidtkeane.com` + Gitea.
|
||||
- **`src/newtab/newtab.css`** — same earthy palette as the popup but laid out for a full screen. Subtle helmet watermark (2.5% opacity) in the background. Responsive shrink-to-fit at `max-height: 700px`.
|
||||
- **`src/newtab/newtab.js`** — reuses `src/lib/messages.js`, `src/sources/index.js`, and the same `chrome.storage.local` keys as the popup. State stays consistent: pick a station in the popup, refresh new tab → same station selected, same play state. Adds a clock that updates every 30 s.
|
||||
|
||||
**Quick-pick stations:** the chip row surfaces the 8 most-loved SomaFM channels (Groove Salad, Drone Zone, Indie Pop Rocks!, Secret Agent, Space Station Soma, Lush, Deep Space One, Fluid). One click → playing.
|
||||
|
||||
**Why this feature exists:** validates [[user_browser_resident_tools]] — David has the browser open all day, every new tab is a touchpoint. Every `Cmd+T` now opens a RangerHQ-branded landing that's one click from playing radio. The Web Store reviewer is also more likely to grant a clear single-purpose override than a vague one — having a useful New Tab Page is good signal alongside the toolbar player.
|
||||
|
||||
**Permissions unchanged:** no new permissions or hosts added. The override is a pure UI choice; no expanded API surface.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -0,0 +1,338 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 2, June 1991
|
||||
|
||||
Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
|
||||
<https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The licenses for most software are designed to take away your
|
||||
freedom to share and change it. By contrast, the GNU General Public
|
||||
License is intended to guarantee your freedom to share and change free
|
||||
software--to make sure the software is free for all its users. This
|
||||
General Public License applies to most of the Free Software
|
||||
Foundation's software and to any other program whose authors commit to
|
||||
using it. (Some other Free Software Foundation software is covered by
|
||||
the GNU Lesser General Public License instead.) You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
this service if you wish), that you receive source code or can get it
|
||||
if you want it, that you can change the software or use pieces of it
|
||||
in new free programs; and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to make restrictions that forbid
|
||||
anyone to deny you these rights or to ask you to surrender the rights.
|
||||
These restrictions translate to certain responsibilities for you if you
|
||||
distribute copies of the software, or if you modify it.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must give the recipients all the rights that
|
||||
you have. You must make sure that they, too, receive or can get the
|
||||
source code. And you must show them these terms so they know their
|
||||
rights.
|
||||
|
||||
We protect your rights with two steps: (1) copyright the software, and
|
||||
(2) offer you this license which gives you legal permission to copy,
|
||||
distribute and/or modify the software.
|
||||
|
||||
Also, for each author's protection and ours, we want to make certain
|
||||
that everyone understands that there is no warranty for this free
|
||||
software. If the software is modified by someone else and passed on, we
|
||||
want its recipients to know that what they have is not the original, so
|
||||
that any problems introduced by others will not reflect on the original
|
||||
authors' reputations.
|
||||
|
||||
Finally, any free program is threatened constantly by software
|
||||
patents. We wish to avoid the danger that redistributors of a free
|
||||
program will individually obtain patent licenses, in effect making the
|
||||
program proprietary. To prevent this, we have made it clear that any
|
||||
patent must be licensed for everyone's free use or not licensed at all.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. This License applies to any program or other work which contains
|
||||
a notice placed by the copyright holder saying it may be distributed
|
||||
under the terms of this General Public License. The "Program", below,
|
||||
refers to any such program or work, and a "work based on the Program"
|
||||
means either the Program or any derivative work under copyright law:
|
||||
that is to say, a work containing the Program or a portion of it,
|
||||
either verbatim or with modifications and/or translated into another
|
||||
language. (Hereinafter, translation is included without limitation in
|
||||
the term "modification".) Each licensee is addressed as "you".
|
||||
|
||||
Activities other than copying, distribution and modification are not
|
||||
covered by this License; they are outside its scope. The act of
|
||||
running the Program is not restricted, and the output from the Program
|
||||
is covered only if its contents constitute a work based on the
|
||||
Program (independent of having been made by running the Program).
|
||||
Whether that is true depends on what the Program does.
|
||||
|
||||
1. You may copy and distribute verbatim copies of the Program's
|
||||
source code as you receive it, in any medium, provided that you
|
||||
conspicuously and appropriately publish on each copy an appropriate
|
||||
copyright notice and disclaimer of warranty; keep intact all the
|
||||
notices that refer to this License and to the absence of any warranty;
|
||||
and give any other recipients of the Program a copy of this License
|
||||
along with the Program.
|
||||
|
||||
You may charge a fee for the physical act of transferring a copy, and
|
||||
you may at your option offer warranty protection in exchange for a fee.
|
||||
|
||||
2. You may modify your copy or copies of the Program or any portion
|
||||
of it, thus forming a work based on the Program, and copy and
|
||||
distribute such modifications or work under the terms of Section 1
|
||||
above, provided that you also meet all of these conditions:
|
||||
|
||||
a) You must cause the modified files to carry prominent notices
|
||||
stating that you changed the files and the date of any change.
|
||||
|
||||
b) You must cause any work that you distribute or publish, that in
|
||||
whole or in part contains or is derived from the Program or any
|
||||
part thereof, to be licensed as a whole at no charge to all third
|
||||
parties under the terms of this License.
|
||||
|
||||
c) If the modified program normally reads commands interactively
|
||||
when run, you must cause it, when started running for such
|
||||
interactive use in the most ordinary way, to print or display an
|
||||
announcement including an appropriate copyright notice and a
|
||||
notice that there is no warranty (or else, saying that you provide
|
||||
a warranty) and that users may redistribute the program under
|
||||
these conditions, and telling the user how to view a copy of this
|
||||
License. (Exception: if the Program itself is interactive but
|
||||
does not normally print such an announcement, your work based on
|
||||
the Program is not required to print an announcement.)
|
||||
|
||||
These requirements apply to the modified work as a whole. If
|
||||
identifiable sections of that work are not derived from the Program,
|
||||
and can be reasonably considered independent and separate works in
|
||||
themselves, then this License, and its terms, do not apply to those
|
||||
sections when you distribute them as separate works. But when you
|
||||
distribute the same sections as part of a whole which is a work based
|
||||
on the Program, the distribution of the whole must be on the terms of
|
||||
this License, whose permissions for other licensees extend to the
|
||||
entire whole, and thus to each and every part regardless of who wrote it.
|
||||
|
||||
Thus, it is not the intent of this section to claim rights or contest
|
||||
your rights to work written entirely by you; rather, the intent is to
|
||||
exercise the right to control the distribution of derivative or
|
||||
collective works based on the Program.
|
||||
|
||||
In addition, mere aggregation of another work not based on the Program
|
||||
with the Program (or with a work based on the Program) on a volume of
|
||||
a storage or distribution medium does not bring the other work under
|
||||
the scope of this License.
|
||||
|
||||
3. You may copy and distribute the Program (or a work based on it,
|
||||
under Section 2) in object code or executable form under the terms of
|
||||
Sections 1 and 2 above provided that you also do one of the following:
|
||||
|
||||
a) Accompany it with the complete corresponding machine-readable
|
||||
source code, which must be distributed under the terms of Sections
|
||||
1 and 2 above on a medium customarily used for software interchange; or,
|
||||
|
||||
b) Accompany it with a written offer, valid for at least three
|
||||
years, to give any third party, for a charge no more than your
|
||||
cost of physically performing source distribution, a complete
|
||||
machine-readable copy of the corresponding source code, to be
|
||||
distributed under the terms of Sections 1 and 2 above on a medium
|
||||
customarily used for software interchange; or,
|
||||
|
||||
c) Accompany it with the information you received as to the offer
|
||||
to distribute corresponding source code. (This alternative is
|
||||
allowed only for noncommercial distribution and only if you
|
||||
received the program in object code or executable form with such
|
||||
an offer, in accord with Subsection b above.)
|
||||
|
||||
The source code for a work means the preferred form of the work for
|
||||
making modifications to it. For an executable work, complete source
|
||||
code means all the source code for all modules it contains, plus any
|
||||
associated interface definition files, plus the scripts used to
|
||||
control compilation and installation of the executable. However, as a
|
||||
special exception, the source code distributed need not include
|
||||
anything that is normally distributed (in either source or binary
|
||||
form) with the major components (compiler, kernel, and so on) of the
|
||||
operating system on which the executable runs, unless that component
|
||||
itself accompanies the executable.
|
||||
|
||||
If distribution of executable or object code is made by offering
|
||||
access to copy from a designated place, then offering equivalent
|
||||
access to copy the source code from the same place counts as
|
||||
distribution of the source code, even though third parties are not
|
||||
compelled to copy the source along with the object code.
|
||||
|
||||
4. You may not copy, modify, sublicense, or distribute the Program
|
||||
except as expressly provided under this License. Any attempt
|
||||
otherwise to copy, modify, sublicense or distribute the Program is
|
||||
void, and will automatically terminate your rights under this License.
|
||||
However, parties who have received copies, or rights, from you under
|
||||
this License will not have their licenses terminated so long as such
|
||||
parties remain in full compliance.
|
||||
|
||||
5. You are not required to accept this License, since you have not
|
||||
signed it. However, nothing else grants you permission to modify or
|
||||
distribute the Program or its derivative works. These actions are
|
||||
prohibited by law if you do not accept this License. Therefore, by
|
||||
modifying or distributing the Program (or any work based on the
|
||||
Program), you indicate your acceptance of this License to do so, and
|
||||
all its terms and conditions for copying, distributing or modifying
|
||||
the Program or works based on it.
|
||||
|
||||
6. Each time you redistribute the Program (or any work based on the
|
||||
Program), the recipient automatically receives a license from the
|
||||
original licensor to copy, distribute or modify the Program subject to
|
||||
these terms and conditions. You may not impose any further
|
||||
restrictions on the recipients' exercise of the rights granted herein.
|
||||
You are not responsible for enforcing compliance by third parties to
|
||||
this License.
|
||||
|
||||
7. If, as a consequence of a court judgment or allegation of patent
|
||||
infringement or for any other reason (not limited to patent issues),
|
||||
conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot
|
||||
distribute so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you
|
||||
may not distribute the Program at all. For example, if a patent
|
||||
license would not permit royalty-free redistribution of the Program by
|
||||
all those who receive copies directly or indirectly through you, then
|
||||
the only way you could satisfy both it and this License would be to
|
||||
refrain entirely from distribution of the Program.
|
||||
|
||||
If any portion of this section is held invalid or unenforceable under
|
||||
any particular circumstance, the balance of the section is intended to
|
||||
apply and the section as a whole is intended to apply in other
|
||||
circumstances.
|
||||
|
||||
It is not the purpose of this section to induce you to infringe any
|
||||
patents or other property right claims or to contest validity of any
|
||||
such claims; this section has the sole purpose of protecting the
|
||||
integrity of the free software distribution system, which is
|
||||
implemented by public license practices. Many people have made
|
||||
generous contributions to the wide range of software distributed
|
||||
through that system in reliance on consistent application of that
|
||||
system; it is up to the author/donor to decide if he or she is willing
|
||||
to distribute software through any other system and a licensee cannot
|
||||
impose that choice.
|
||||
|
||||
This section is intended to make thoroughly clear what is believed to
|
||||
be a consequence of the rest of this License.
|
||||
|
||||
8. If the distribution and/or use of the Program is restricted in
|
||||
certain countries either by patents or by copyrighted interfaces, the
|
||||
original copyright holder who places the Program under this License
|
||||
may add an explicit geographical distribution limitation excluding
|
||||
those countries, so that distribution is permitted only in or among
|
||||
countries not thus excluded. In such case, this License incorporates
|
||||
the limitation as if written in the body of this License.
|
||||
|
||||
9. The Free Software Foundation may publish revised and/or new versions
|
||||
of the General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Program
|
||||
specifies a version number of this License which applies to it and "any
|
||||
later version", you have the option of following the terms and conditions
|
||||
either of that version or of any later version published by the Free
|
||||
Software Foundation. If the Program does not specify a version number of
|
||||
this License, you may choose any version ever published by the Free Software
|
||||
Foundation.
|
||||
|
||||
10. If you wish to incorporate parts of the Program into other free
|
||||
programs whose distribution conditions are different, write to the author
|
||||
to ask for permission. For software which is copyrighted by the Free
|
||||
Software Foundation, write to the Free Software Foundation; we sometimes
|
||||
make exceptions for this. Our decision will be guided by the two goals
|
||||
of preserving the free status of all derivatives of our free software and
|
||||
of promoting the sharing and reuse of software generally.
|
||||
|
||||
NO WARRANTY
|
||||
|
||||
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
|
||||
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
|
||||
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
||||
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
||||
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
||||
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
||||
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
||||
REPAIR OR CORRECTION.
|
||||
|
||||
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
||||
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
||||
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
||||
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
|
||||
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
|
||||
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGES.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
convey the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 2 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License along
|
||||
with this program; if not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program is interactive, make it output a short notice like this
|
||||
when it starts in an interactive mode:
|
||||
|
||||
Gnomovision version 69, Copyright (C) year name of author
|
||||
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, the commands you use may
|
||||
be called something other than `show w' and `show c'; they could even be
|
||||
mouse-clicks or menu items--whatever suits your program.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or your
|
||||
school, if any, to sign a "copyright disclaimer" for the program, if
|
||||
necessary. Here is a sample; alter the names:
|
||||
|
||||
Yoyodyne, Inc., hereby disclaims all copyright interest in the program
|
||||
`Gnomovision' (which makes passes at compilers) written by James Hacker.
|
||||
|
||||
<signature of Moe Ghoul>, 1 April 1989
|
||||
Moe Ghoul, President of Vice
|
||||
|
||||
This General Public License does not permit incorporating your program into
|
||||
proprietary programs. If your program is a subroutine library, you may
|
||||
consider it more useful to permit linking proprietary applications with the
|
||||
library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License.
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
# Privacy Policy — RangerHQ Tuner
|
||||
|
||||
**Effective date:** 2026-06-09
|
||||
**Maintainer:** David Keane — <david@davidtkeane.com>
|
||||
**Extension homepage:** https://davidtkeane.com/rangerhq-tuner
|
||||
**Source code:** https://git.davidtkeane.com/ranger/rangerhq-tuner
|
||||
|
||||
---
|
||||
|
||||
## TL;DR
|
||||
|
||||
**RangerHQ Tuner collects no personal data. Nothing leaves your device.**
|
||||
|
||||
The extension stores a small amount of data in your browser's local storage on your own computer — your track history, your favourites, your last-played station, your volume preference, and a cached copy of the SomaFM station catalogue. That data never leaves your machine and is never sent to David Keane, RangerHQ, Anthropic, Google, or anyone else.
|
||||
|
||||
---
|
||||
|
||||
## Data we do not collect
|
||||
|
||||
Using the Chrome Web Store's standard data category vocabulary, RangerHQ Tuner does **not** collect any of the following:
|
||||
|
||||
| Category | Collected? |
|
||||
|---|---|
|
||||
| Personally identifiable information | ❌ No |
|
||||
| Health information | ❌ No |
|
||||
| Financial and payment information | ❌ No |
|
||||
| Authentication information | ❌ No |
|
||||
| Personal communications | ❌ No |
|
||||
| Location | ❌ No |
|
||||
| Web history | ❌ No |
|
||||
| User activity | ❌ No |
|
||||
| Website content | ❌ No |
|
||||
|
||||
No account is required. No login. No telemetry. No analytics. No third-party tracking scripts. No advertising network code.
|
||||
|
||||
---
|
||||
|
||||
## Data stored locally on your device
|
||||
|
||||
RangerHQ Tuner uses Chrome's `chrome.storage.local` API to persist a small amount of state across browser sessions. **All of this lives on your computer only.** It is never transmitted to any server. You can wipe it at any time from the extension's Options page.
|
||||
|
||||
| Key | What it holds | Why |
|
||||
|---|---|---|
|
||||
| `tuner.stationsCache` | A cached copy of SomaFM's public channel list | So the popup opens instantly instead of fetching the catalogue every time |
|
||||
| `tuner.cachedAt` | Timestamp of the cache | To expire the cache after 6 hours |
|
||||
| `tuner.currentStationId` | ID of the station you last picked | So you can resume where you left off |
|
||||
| `tuner.volume` | Your last-set volume (0.0–1.0) | So volume persists across sessions |
|
||||
| `tuner.isPlaying` | Whether playback was active | UI state sync |
|
||||
| `tuner.history` | A capped log of artist + title pairs heard while playing | The History tab on the New Tab Page |
|
||||
| `tuner.favourites` | Track entries you have starred | The Favourites tab |
|
||||
| `tuner.historyCap` | Your chosen history-cap value (default 500) | Configurable on the Options page |
|
||||
|
||||
The history and favourites entries contain: artist name, track title, station display name, station ID, and a local timestamp. **They are stored in your browser only.** They are never sent to the extension author or any third party.
|
||||
|
||||
You can clear any of this data at any time:
|
||||
|
||||
- **Options page** → "Clear history", "Clear favourites", or "Clear EVERYTHING" (wipes all `tuner.*` keys).
|
||||
- Or: Chrome → `chrome://extensions` → RangerHQ Tuner → Remove. Removing the extension wipes its local storage.
|
||||
|
||||
---
|
||||
|
||||
## Outbound network requests
|
||||
|
||||
RangerHQ Tuner contacts only one external network — **SomaFM (somafm.com)** — and only for the following purposes:
|
||||
|
||||
| Endpoint | Purpose | Frequency |
|
||||
|---|---|---|
|
||||
| `https://somafm.com/channels.json` | Fetch the public list of SomaFM stations | At most once every 6 hours |
|
||||
| `https://somafm.com/{...}.pls` | Resolve the streaming URL for the station you picked | Once per station change |
|
||||
| Direct stream URLs (e.g. `https://ice1.somafm.com/groovesalad-128-mp3`) | The actual audio stream | Continuous while playing |
|
||||
| `https://somafm.com/songs/{id}.json` | Read the public "now playing" track for the current station | Every 25 seconds while playing |
|
||||
|
||||
These requests are made by your browser the same way it makes any other web request. SomaFM may log your IP address as part of routine HTTP serving — that is between you and SomaFM, the same as visiting their website. RangerHQ Tuner does not add tracking parameters, identifiers, or authentication tokens to these requests.
|
||||
|
||||
SomaFM is a listener-supported independent radio network. Their content policies are theirs alone: <https://somafm.com>.
|
||||
|
||||
---
|
||||
|
||||
## "Search this track" link-outs
|
||||
|
||||
The History and Favourites tabs offer four buttons next to each track: **Spotify**, **YouTube**, **Apple Music**, **Bandcamp**. Each is a plain HTML link (`<a href>` with `target="_blank" rel="noopener noreferrer"`) that opens the corresponding service's public search results page in a new browser tab.
|
||||
|
||||
RangerHQ Tuner does **not** embed any third-party SDK, player, tracker, or analytics code. The extension does not communicate with Spotify, YouTube, Apple Music, or Bandcamp servers in any way. When you click one of the buttons, you are simply navigating to a public search URL. Anything that happens after that is between you, your browser, and the destination site.
|
||||
|
||||
---
|
||||
|
||||
## Permissions and why we ask for them
|
||||
|
||||
| Permission | Why RangerHQ Tuner needs it |
|
||||
|---|---|
|
||||
| `offscreen` | Manifest V3 service workers cannot host an `<audio>` element. The `chrome.offscreen` API lets us create a hidden DOM document that holds the audio player. No user data is collected through this. |
|
||||
| `storage` | Persist your settings, last station, volume, history, and favourites in `chrome.storage.local` on your own device. |
|
||||
| Host: `https://somafm.com/*` and `https://*.somafm.com/*` | Fetch the public station catalogue, playlist files, stream URLs, and now-playing metadata from SomaFM. No authentication is used, no user data is sent. |
|
||||
|
||||
We do not request `tabs`, `activeTab`, `<all_urls>`, `webRequest`, `cookies`, or any other broad permission.
|
||||
|
||||
---
|
||||
|
||||
## Children's privacy
|
||||
|
||||
RangerHQ Tuner is a general-purpose audio player and does not knowingly process data of children under 13. It collects nothing about anyone of any age.
|
||||
|
||||
---
|
||||
|
||||
## Changes to this policy
|
||||
|
||||
If this policy ever changes in a material way, the effective date at the top will be updated and the change will be reflected in `CHANGELOG.md` in the project's public repository (linked above). Because RangerHQ Tuner does not collect personal data, material privacy changes would generally only happen if the architecture itself changes — which is unlikely.
|
||||
|
||||
---
|
||||
|
||||
## Contact
|
||||
|
||||
For questions about this policy or the extension's data handling:
|
||||
|
||||
- **Email:** <david@davidtkeane.com>
|
||||
- **Issues / source:** <https://git.davidtkeane.com/ranger/rangerhq-tuner>
|
||||
- **Author:** David Keane, Dublin, Ireland
|
||||
|
||||
---
|
||||
|
||||
*This policy is published under GPL v2 or later, the same licence as the extension itself. Verbatim copies and adaptations are permitted.*
|
||||
@@ -1,5 +1,16 @@
|
||||
# RangerHQ Tuner
|
||||
|
||||
[](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp)
|
||||
[](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp)
|
||||
[](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp/reviews)
|
||||
[](LICENSE)
|
||||
[](manifest.json)
|
||||
[](https://git.davidtkeane.com/ranger/rangerhq-tuner/commits/branch/main)
|
||||
[](PRIVACY.md)
|
||||
[](https://davidtkeane.com)
|
||||
|
||||
**🎉 [Install from the Chrome Web Store →](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp)**
|
||||
|
||||
Lightweight indie internet radio player for Chrome. Plays SomaFM in any browser tab. Manifest V3, vanilla JS, no telemetry.
|
||||
|
||||
Sibling to [rangerhq-radio](https://git.davidtkeane.com/ranger/rangerhq-radio) (the WordPress version).
|
||||
|
||||
+6
-2
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "RangerHQ Tuner",
|
||||
"version": "0.1.0",
|
||||
"description": "Lightweight indie internet radio player. Starts with SomaFM, extensible to more networks.",
|
||||
"version": "0.5.3",
|
||||
"description": "Lightweight SomaFM radio player. Logs what plays. One-click search to Spotify, YouTube, Apple Music, Bandcamp. No telemetry.",
|
||||
"author": "David Keane",
|
||||
"homepage_url": "https://davidtkeane.com/rangerhq-tuner",
|
||||
"icons": {
|
||||
@@ -23,6 +23,10 @@
|
||||
"service_worker": "src/background/service-worker.js",
|
||||
"type": "module"
|
||||
},
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "src/newtab/newtab.html"
|
||||
},
|
||||
"options_page": "src/options/options.html",
|
||||
"permissions": ["offscreen", "storage"],
|
||||
"host_permissions": [
|
||||
"https://somafm.com/*",
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
// RangerHQ Tuner — Service Worker.
|
||||
// Job: open the offscreen audio document on demand and route messages
|
||||
// between the popup (UI) and the offscreen document (audio engine).
|
||||
// We hold no state here — Chrome will kill this worker at any time.
|
||||
// between the popup/newtab (UI) and the offscreen document (audio engine).
|
||||
// Also acts as the storage gateway for the offscreen doc — offscreen
|
||||
// docs don't reliably have chrome.storage, so they message us instead.
|
||||
// We hold no in-memory state here — Chrome will kill this worker at any time.
|
||||
|
||||
import { TARGETS, TYPES } from '../lib/messages.js';
|
||||
import { logTrack } from '../lib/history.js';
|
||||
|
||||
const OFFSCREEN_PATH = 'src/offscreen/offscreen.html';
|
||||
|
||||
@@ -19,15 +24,29 @@ async function ensureOffscreen() {
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
// Only react to messages targeted at the service worker.
|
||||
if (msg.target !== 'sw') return;
|
||||
if (msg.target !== TARGETS.SW) return;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
// Storage-gateway path: write to chrome.storage on behalf of the
|
||||
// offscreen document, which can't always reach it directly.
|
||||
if (msg.type === TYPES.LOG_TRACK_REQUEST) {
|
||||
const appended = await logTrack(msg.entry || {});
|
||||
if (appended) {
|
||||
chrome.runtime.sendMessage({
|
||||
target: TARGETS.POPUP,
|
||||
type: TYPES.TRACK_LOGGED,
|
||||
}).catch(() => {}); // no UI listening is fine
|
||||
}
|
||||
sendResponse({ ok: true, appended });
|
||||
return;
|
||||
}
|
||||
|
||||
// Default: forward audio-control messages to the offscreen doc.
|
||||
await ensureOffscreen();
|
||||
// Re-route the message to the offscreen document.
|
||||
const response = await chrome.runtime.sendMessage({
|
||||
...msg,
|
||||
target: 'offscreen',
|
||||
target: TARGETS.OFFSCREEN,
|
||||
});
|
||||
sendResponse(response);
|
||||
} catch (err) {
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
// RangerHQ Tuner — History, Favourites, and 4-button search URLs.
|
||||
//
|
||||
// Mirrors rangerhq-radio's inc/history.php exactly (verified 2026-06-08).
|
||||
// Differences from the WP plugin:
|
||||
// • Chrome has one user per profile, so we use chrome.storage.local,
|
||||
// not per-user usermeta.
|
||||
// • All keys are namespaced under "tuner.*" so clearAll() is trivial.
|
||||
//
|
||||
// Entry shape (mirror WP plugin):
|
||||
// { artist: string, title: string, station: string, stationId: string, at: number }
|
||||
//
|
||||
// Rules (mirror WP plugin):
|
||||
// • Cap at historyCap entries (default 500), FIFO.
|
||||
// • Dedup against the LAST entry only (sig = lower(artist|title|stationId)).
|
||||
// • Skip entries where artist === "(unknown)" (SomaFM dead-air placeholder).
|
||||
|
||||
export const HISTORY_KEY = 'tuner.history';
|
||||
export const FAVS_KEY = 'tuner.favourites';
|
||||
export const CAP_KEY = 'tuner.historyCap';
|
||||
export const DEFAULT_CAP = 500;
|
||||
export const MIN_CAP = 50;
|
||||
export const MAX_CAP = 500;
|
||||
|
||||
/* ---------- Safe storage accessor ----------
|
||||
* chrome.storage is not guaranteed in every extension context (e.g. some
|
||||
* older Chrome versions hide it from offscreen documents). Anywhere it
|
||||
* isn't present, our readers return empty defaults and writers no-op
|
||||
* instead of throwing. This way history.js is safe to import from any
|
||||
* surface — UI pages get real storage, edge contexts degrade silently.
|
||||
*/
|
||||
function storage() {
|
||||
if (typeof chrome === 'undefined') return null;
|
||||
if (!chrome.storage || !chrome.storage.local) return null;
|
||||
return chrome.storage.local;
|
||||
}
|
||||
|
||||
/* ---------- Readers ---------- */
|
||||
|
||||
export async function getHistory() {
|
||||
const s = storage();
|
||||
if (!s) return [];
|
||||
const o = await s.get(HISTORY_KEY);
|
||||
return Array.isArray(o[HISTORY_KEY]) ? o[HISTORY_KEY] : [];
|
||||
}
|
||||
|
||||
export async function getFavourites() {
|
||||
const s = storage();
|
||||
if (!s) return [];
|
||||
const o = await s.get(FAVS_KEY);
|
||||
return Array.isArray(o[FAVS_KEY]) ? o[FAVS_KEY] : [];
|
||||
}
|
||||
|
||||
export async function getHistoryCap() {
|
||||
const s = storage();
|
||||
if (!s) return DEFAULT_CAP;
|
||||
const o = await s.get(CAP_KEY);
|
||||
const n = o[CAP_KEY];
|
||||
return (typeof n === 'number' && n >= MIN_CAP && n <= MAX_CAP) ? n : DEFAULT_CAP;
|
||||
}
|
||||
|
||||
/* ---------- Sanitisation + dedup ---------- */
|
||||
|
||||
function sanitizeEntry(entry) {
|
||||
if (!entry || typeof entry !== 'object') return null;
|
||||
const artist = String(entry.artist || '').trim().slice(0, 200);
|
||||
const title = String(entry.title || '').trim().slice(0, 200);
|
||||
const station = String(entry.station || '').trim().slice(0, 100);
|
||||
const stationId = String(entry.stationId || '').trim().slice(0, 100);
|
||||
if (!artist || !title) return null;
|
||||
if (artist.toLowerCase() === '(unknown)') return null;
|
||||
return { artist, title, station, stationId, at: Date.now() };
|
||||
}
|
||||
|
||||
export function entrySignature(e) {
|
||||
return [
|
||||
(e.artist || '').toLowerCase().trim(),
|
||||
(e.title || '').toLowerCase().trim(),
|
||||
(e.stationId || '').toLowerCase().trim(),
|
||||
].join('|');
|
||||
}
|
||||
|
||||
/* ---------- Mutations ---------- */
|
||||
|
||||
/** Append a track to history (deduped + capped). Returns true if appended. */
|
||||
export async function logTrack(entry) {
|
||||
const s = storage();
|
||||
if (!s) return false;
|
||||
|
||||
const clean = sanitizeEntry(entry);
|
||||
if (!clean) return false;
|
||||
|
||||
const history = await getHistory();
|
||||
if (history.length > 0) {
|
||||
const lastSig = entrySignature(history[history.length - 1]);
|
||||
if (entrySignature(clean) === lastSig) return false;
|
||||
}
|
||||
|
||||
history.push(clean);
|
||||
const cap = await getHistoryCap();
|
||||
if (history.length > cap) history.splice(0, history.length - cap);
|
||||
await s.set({ [HISTORY_KEY]: history });
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Toggle favourite. Returns new state: true = now favourited, false = removed. */
|
||||
export async function toggleFavourite(entry) {
|
||||
const s = storage();
|
||||
if (!s) return false;
|
||||
|
||||
const clean = sanitizeEntry({ ...entry, at: 0 }); // at gets reset
|
||||
if (!clean) return false;
|
||||
const sig = entrySignature(clean);
|
||||
|
||||
const favs = await getFavourites();
|
||||
const found = favs.findIndex(f => entrySignature(f) === sig);
|
||||
if (found >= 0) {
|
||||
favs.splice(found, 1);
|
||||
await s.set({ [FAVS_KEY]: favs });
|
||||
return false;
|
||||
}
|
||||
clean.at = Date.now();
|
||||
favs.push(clean);
|
||||
await s.set({ [FAVS_KEY]: favs });
|
||||
return true;
|
||||
}
|
||||
|
||||
export async function isFavourited(entry) {
|
||||
const clean = sanitizeEntry({ ...entry, at: 0 });
|
||||
if (!clean) return false;
|
||||
const sig = entrySignature(clean);
|
||||
const favs = await getFavourites();
|
||||
return favs.some(f => entrySignature(f) === sig);
|
||||
}
|
||||
|
||||
export async function clearHistory() {
|
||||
const s = storage();
|
||||
if (!s) return;
|
||||
await s.remove(HISTORY_KEY);
|
||||
}
|
||||
|
||||
export async function clearFavourites() {
|
||||
const s = storage();
|
||||
if (!s) return;
|
||||
await s.remove(FAVS_KEY);
|
||||
}
|
||||
|
||||
/** Wipe every `tuner.*` key. Used by the "Clear EVERYTHING" button. */
|
||||
export async function clearAll() {
|
||||
const s = storage();
|
||||
if (!s) return;
|
||||
const all = await s.get(null);
|
||||
const keys = Object.keys(all).filter(k => k.startsWith('tuner.'));
|
||||
if (keys.length) await s.remove(keys);
|
||||
}
|
||||
|
||||
export async function setHistoryCap(n) {
|
||||
const s = storage();
|
||||
if (!s) return DEFAULT_CAP;
|
||||
const cap = Math.max(MIN_CAP, Math.min(MAX_CAP, Math.round(Number(n) || DEFAULT_CAP)));
|
||||
await s.set({ [CAP_KEY]: cap });
|
||||
const history = await getHistory();
|
||||
if (history.length > cap) {
|
||||
await s.set({ [HISTORY_KEY]: history.slice(-cap) });
|
||||
}
|
||||
return cap;
|
||||
}
|
||||
|
||||
/* ---------- 4-button search URLs ---------- */
|
||||
// Mirrors WP plugin lines 126-129 verbatim. NO auth, NO API key, NO quota.
|
||||
// Public search URLs that open in a new tab — user picks what to listen to.
|
||||
|
||||
export function searchUrls(artist, title) {
|
||||
const enc = encodeURIComponent(`${artist || ''} ${title || ''}`.trim());
|
||||
return {
|
||||
spotify: `https://open.spotify.com/search/${enc}`,
|
||||
youtube: `https://www.youtube.com/results?search_query=${enc}`,
|
||||
apple: `https://music.apple.com/search?term=${enc}`,
|
||||
bandcamp: `https://bandcamp.com/search?q=${enc}`,
|
||||
};
|
||||
}
|
||||
|
||||
/* ---------- Display helpers ---------- */
|
||||
|
||||
export function formatRelativeTime(ts) {
|
||||
const diffSec = Math.floor((Date.now() - ts) / 1000);
|
||||
if (diffSec < 60) return 'just now';
|
||||
if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
|
||||
if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
|
||||
if (diffSec < 604800) return `${Math.floor(diffSec / 86400)}d ago`;
|
||||
return new Date(ts).toLocaleDateString();
|
||||
}
|
||||
@@ -15,5 +15,9 @@ export const TYPES = Object.freeze({
|
||||
GET_STATE: 'GET_STATE',
|
||||
STATE_CHANGED: 'STATE_CHANGED',
|
||||
METADATA_UPDATED: 'METADATA_UPDATED',
|
||||
LOG_TRACK_REQUEST: 'LOG_TRACK_REQUEST', // offscreen → SW: please write this entry to tuner.history
|
||||
TRACK_LOGGED: 'TRACK_LOGGED', // SW → UI: a new entry was appended to tuner.history
|
||||
FAVOURITE_TOGGLED: 'FAVOURITE_TOGGLED', // UI → UI: re-render any visible fav lists
|
||||
STORAGE_WIPED: 'STORAGE_WIPED', // options → UI: catastrophic reset, re-init from defaults
|
||||
ERROR: 'ERROR',
|
||||
});
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
// RangerHQ Tuner — Quick Stations preference helpers (v0.5.3).
|
||||
//
|
||||
// The user picks which SomaFM channels appear in the Quick Stations chip
|
||||
// row on the New Tab Page. Stored in chrome.storage.local under
|
||||
// `tuner.quickStations` as an array of SomaFM short ids
|
||||
// (e.g. ['groovesalad', 'defcon', ...]). If the key is missing, the
|
||||
// DEFAULT_QUICK_IDS below are used — a tidy 8 that wraps to 2 rows on
|
||||
// most viewports.
|
||||
//
|
||||
// Cross-surface sync: NewTab's `chrome.storage.onChanged` listener picks
|
||||
// up changes so toggling a checkbox in Options re-renders the chip row
|
||||
// instantly without a reload.
|
||||
|
||||
export const QUICK_STATIONS_KEY = 'tuner.quickStations';
|
||||
|
||||
// 8 curated defaults — the same set Tuner v0.4.0 shipped with. Chosen
|
||||
// for genre breadth (chill / ambient / indie / lounge / space / vocal /
|
||||
// ambient / electronic) and to fit a tidy 2-row chip layout.
|
||||
export const DEFAULT_QUICK_IDS = Object.freeze([
|
||||
'groovesalad',
|
||||
'dronezone',
|
||||
'indiepop',
|
||||
'secretagent',
|
||||
'spacestation',
|
||||
'lush',
|
||||
'deepspaceone',
|
||||
'fluid',
|
||||
]);
|
||||
|
||||
function storage() {
|
||||
if (typeof chrome === 'undefined') return null;
|
||||
if (!chrome.storage || !chrome.storage.local) return null;
|
||||
return chrome.storage.local;
|
||||
}
|
||||
|
||||
/** Read the user's chosen quick-station list, falling back to defaults. */
|
||||
export async function getQuickStations() {
|
||||
const s = storage();
|
||||
if (!s) return [...DEFAULT_QUICK_IDS];
|
||||
const o = await s.get(QUICK_STATIONS_KEY);
|
||||
const v = o[QUICK_STATIONS_KEY];
|
||||
return Array.isArray(v) ? v.filter(x => typeof x === 'string') : [...DEFAULT_QUICK_IDS];
|
||||
}
|
||||
|
||||
/** Persist the user's chosen quick-station list. Empty array = no quick chips. */
|
||||
export async function setQuickStations(ids) {
|
||||
const s = storage();
|
||||
if (!s) return;
|
||||
const arr = Array.isArray(ids) ? ids.filter(x => typeof x === 'string') : [];
|
||||
await s.set({ [QUICK_STATIONS_KEY]: arr });
|
||||
}
|
||||
|
||||
/** Wipe the preference so the default-8 is used again. */
|
||||
export async function resetQuickStations() {
|
||||
const s = storage();
|
||||
if (!s) return;
|
||||
await s.remove(QUICK_STATIONS_KEY);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// RangerHQ Tuner — Theme helpers (v0.5.0)
|
||||
//
|
||||
// Three modes:
|
||||
// auto — follow OS via @media (prefers-color-scheme: light)
|
||||
// dark — force dark regardless of OS
|
||||
// light — force light regardless of OS
|
||||
//
|
||||
// Stored in chrome.storage.local under `tuner.theme`. Default: auto.
|
||||
//
|
||||
// Application strategy: set/remove `data-theme` attribute on <html>.
|
||||
// - "auto" → attribute removed → @media in each stylesheet decides
|
||||
// - "dark" → data-theme="dark" → CSS forces dark vars
|
||||
// - "light" → data-theme="light" → CSS forces light vars
|
||||
//
|
||||
// Used from popup.js, newtab.js, and options.js on init + on cross-surface
|
||||
// sync.
|
||||
|
||||
export const THEME_KEY = 'tuner.theme';
|
||||
export const THEME_AUTO = 'auto';
|
||||
export const THEME_DARK = 'dark';
|
||||
export const THEME_LIGHT = 'light';
|
||||
export const THEME_DEFAULT = THEME_AUTO;
|
||||
export const VALID_THEMES = [THEME_AUTO, THEME_DARK, THEME_LIGHT];
|
||||
|
||||
/** Read the stored theme preference, falling back to "auto". */
|
||||
export async function getTheme() {
|
||||
if (typeof chrome === 'undefined' || !chrome.storage?.local) return THEME_DEFAULT;
|
||||
const o = await chrome.storage.local.get(THEME_KEY);
|
||||
const v = o[THEME_KEY];
|
||||
return VALID_THEMES.includes(v) ? v : THEME_DEFAULT;
|
||||
}
|
||||
|
||||
/** Persist a theme preference. Any cross-surface listeners will pick it up. */
|
||||
export async function setTheme(theme) {
|
||||
if (!VALID_THEMES.includes(theme)) theme = THEME_DEFAULT;
|
||||
if (typeof chrome === 'undefined' || !chrome.storage?.local) return theme;
|
||||
await chrome.storage.local.set({ [THEME_KEY]: theme });
|
||||
return theme;
|
||||
}
|
||||
|
||||
/** Apply a theme to the current document. Pass "auto" to clear the override. */
|
||||
export function applyTheme(theme) {
|
||||
const t = VALID_THEMES.includes(theme) ? theme : THEME_DEFAULT;
|
||||
const html = document.documentElement;
|
||||
if (t === THEME_AUTO) {
|
||||
html.removeAttribute('data-theme');
|
||||
} else {
|
||||
html.setAttribute('data-theme', t);
|
||||
}
|
||||
}
|
||||
|
||||
/** Convenience: read the stored theme and apply it. */
|
||||
export async function initTheme() {
|
||||
applyTheme(await getTheme());
|
||||
}
|
||||
@@ -0,0 +1,673 @@
|
||||
/* RangerHQ Tuner — New Tab Page.
|
||||
Full-viewport landing that replaces Chrome's default new tab.
|
||||
Same earthy palette as the popup, but laid out as a focal page
|
||||
(player centered + quick stations + browsable list).
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg: #0f1411;
|
||||
--bg-soft: #1a221c;
|
||||
--bg-row: #1f2823;
|
||||
--bg-row-hi: #2a3530;
|
||||
--fg: #e8e4d4;
|
||||
--fg-muted: #97a094;
|
||||
--accent: #6dbf7a;
|
||||
--accent-dim: #2a7d3e;
|
||||
--cream: #f4e9b7;
|
||||
--danger: #c9685b;
|
||||
--radius: 8px;
|
||||
--maxw: 760px;
|
||||
--watermark-opacity: 0.025;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────────
|
||||
Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup:
|
||||
override :root vars so every existing rule using var(--*) keeps
|
||||
working unchanged. Watermark opacity bumped slightly since the
|
||||
helmet contrasts more against light bg.
|
||||
────────────────────────────────────────────────────────────────────── */
|
||||
/* OS-follow light mode */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #f6f4ed;
|
||||
--bg-soft: #ece5d2;
|
||||
--bg-row: #ddd6c0;
|
||||
--bg-row-hi: #c8c0a8;
|
||||
--fg: #2a2f28;
|
||||
--fg-muted: #6a7064;
|
||||
--accent: #2a7d3e;
|
||||
--accent-dim: #6dbf7a;
|
||||
--cream: #b8861a;
|
||||
--danger: #b53a2b;
|
||||
--watermark-opacity: 0.04;
|
||||
}
|
||||
.nt-state-pill[data-state="playing"] { color: #fff; }
|
||||
.nt-state-pill[data-state="buffering"] { color: #fff; }
|
||||
.nt-state-pill[data-state="error"] { color: #fff; }
|
||||
.nt-btn--primary[aria-pressed="true"] { color: #fff; }
|
||||
}
|
||||
|
||||
/* Manual override — force LIGHT */
|
||||
html[data-theme="light"] {
|
||||
--bg: #f6f4ed; --bg-soft: #ece5d2; --bg-row: #ddd6c0; --bg-row-hi: #c8c0a8;
|
||||
--fg: #2a2f28; --fg-muted: #6a7064; --accent: #2a7d3e; --accent-dim: #6dbf7a;
|
||||
--cream: #b8861a; --danger: #b53a2b; --watermark-opacity: 0.04;
|
||||
}
|
||||
html[data-theme="light"] .nt-state-pill[data-state="playing"] { color: #fff; }
|
||||
html[data-theme="light"] .nt-state-pill[data-state="buffering"] { color: #fff; }
|
||||
html[data-theme="light"] .nt-state-pill[data-state="error"] { color: #fff; }
|
||||
html[data-theme="light"] .nt-btn--primary[aria-pressed="true"] { color: #fff; }
|
||||
|
||||
/* Manual override — force DARK */
|
||||
html[data-theme="dark"] {
|
||||
--bg: #0f1411; --bg-soft: #1a221c; --bg-row: #1f2823; --bg-row-hi: #2a3530;
|
||||
--fg: #e8e4d4; --fg-muted: #97a094; --accent: #6dbf7a; --accent-dim: #2a7d3e;
|
||||
--cream: #f4e9b7; --danger: #c9685b; --watermark-opacity: 0.025;
|
||||
}
|
||||
html[data-theme="dark"] .nt-state-pill[data-state="playing"] { color: var(--bg); }
|
||||
html[data-theme="dark"] .nt-state-pill[data-state="buffering"] { color: var(--bg); }
|
||||
html[data-theme="dark"] .nt-state-pill[data-state="error"] { color: var(--cream); }
|
||||
html[data-theme="dark"] .nt-btn--primary[aria-pressed="true"] { color: var(--bg); }
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Subtle background watermark — the helmet, very faint */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url('../assets/img/ranger.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: min(60vh, 600px);
|
||||
opacity: var(--watermark-opacity);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Everything else sits on top */
|
||||
.nt-header, .nt-main, .nt-footer { position: relative; z-index: 1; }
|
||||
|
||||
/* ========== Header ========== */
|
||||
.nt-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 18px 28px;
|
||||
border-bottom: 1px solid var(--bg-soft);
|
||||
}
|
||||
|
||||
.nt-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nt-helmet {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.nt-brand-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.nt-clock {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nt-time {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nt-secs {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--fg-muted);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.nt-date {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ========== Main ========== */
|
||||
.nt-main {
|
||||
max-width: var(--maxw);
|
||||
margin: 0 auto;
|
||||
padding: 40px 28px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
/* Now playing — large + centered */
|
||||
.nt-now {
|
||||
text-align: center;
|
||||
padding: 24px 0 8px;
|
||||
}
|
||||
|
||||
.nt-station {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.nt-track {
|
||||
font-size: 15px;
|
||||
color: var(--fg-muted);
|
||||
min-height: 1.4em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.nt-state-pill {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-row);
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.nt-state-pill[data-state="playing"] {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.nt-state-pill[data-state="buffering"] {
|
||||
background: var(--cream);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.nt-state-pill[data-state="error"] {
|
||||
background: var(--danger);
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
/* Controls — generous click targets */
|
||||
.nt-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.nt-btn {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 10px 22px;
|
||||
border: 1px solid var(--accent-dim);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-row);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nt-btn:hover:not(:disabled) {
|
||||
background: var(--bg-row-hi);
|
||||
}
|
||||
|
||||
.nt-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.nt-btn--primary {
|
||||
background: var(--accent-dim);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.nt-btn--primary[aria-pressed="true"] {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.nt-vol-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.nt-vol-label {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#nt-volume {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Quick stations — chip row */
|
||||
.nt-quick {
|
||||
border-top: 1px solid var(--bg-soft);
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.nt-quick-label {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nt-quick-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nt-quick-chip {
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--bg-row-hi);
|
||||
border-radius: 999px;
|
||||
background: var(--bg-row);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nt-quick-chip:hover {
|
||||
background: var(--bg-row-hi);
|
||||
border-color: var(--accent-dim);
|
||||
}
|
||||
|
||||
.nt-quick-chip.is-active {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nt-quick-empty {
|
||||
font-size: 12px;
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
/* ========== Tabs (Stations / History / Favourites) ========== */
|
||||
.nt-tabs {
|
||||
border-top: 1px solid var(--bg-soft);
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.nt-tab-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid var(--bg-soft);
|
||||
}
|
||||
|
||||
.nt-tab {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 8px 14px;
|
||||
background: transparent;
|
||||
color: var(--fg-muted);
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nt-tab:hover { color: var(--fg); }
|
||||
|
||||
.nt-tab.is-active {
|
||||
color: var(--fg);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
.nt-tab--link {
|
||||
margin-left: auto;
|
||||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
line-height: 1;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nt-tab--link:hover { color: var(--accent); }
|
||||
|
||||
.nt-tab-pane[hidden] { display: none; }
|
||||
|
||||
.nt-pane-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nt-pane-count {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.nt-pane-action {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
background: var(--bg-row);
|
||||
color: var(--fg-muted);
|
||||
border: 1px solid var(--bg-row-hi);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nt-pane-action:hover {
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
/* ========== Track list (History + Favourites) ========== */
|
||||
.nt-track-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-height: 380px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--bg-soft);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.nt-track-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 8px 14px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--bg-soft);
|
||||
}
|
||||
|
||||
.nt-track-row:last-child { border-bottom: none; }
|
||||
.nt-track-row:hover { background: var(--bg-row); }
|
||||
|
||||
.nt-track-main { min-width: 0; }
|
||||
|
||||
.nt-track-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.nt-track-artist {
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.nt-track-meta {
|
||||
font-size: 10px;
|
||||
color: var(--fg-muted);
|
||||
letter-spacing: 0.3px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.nt-track-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nt-fav-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--bg-row-hi);
|
||||
border-radius: 999px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
color: var(--fg-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nt-fav-btn:hover { color: var(--cream); border-color: var(--cream); }
|
||||
|
||||
.nt-fav-btn[aria-pressed="true"] {
|
||||
color: var(--cream);
|
||||
border-color: var(--cream);
|
||||
background: rgba(244, 233, 183, 0.08);
|
||||
}
|
||||
|
||||
.nt-search-row {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.nt-search-link {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
color: var(--fg);
|
||||
letter-spacing: 0.3px;
|
||||
border: 1px solid transparent;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Service-specific brand-leaning colours — kept muted so they don't shout */
|
||||
.nt-search-link--spotify { background: #1ed76015; color: #1ed760; border-color: #1ed76040; }
|
||||
.nt-search-link--youtube { background: #ff000015; color: #ff5a5a; border-color: #ff5a5a40; }
|
||||
.nt-search-link--apple { background: #fa57c115; color: #fa57c1; border-color: #fa57c140; }
|
||||
.nt-search-link--bandcamp { background: #629aa915; color: #6dbdd0; border-color: #6dbdd040; }
|
||||
|
||||
.nt-search-link:hover { filter: brightness(1.3); }
|
||||
|
||||
.nt-track-empty {
|
||||
padding: 28px 16px;
|
||||
text-align: center;
|
||||
color: var(--fg-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* (Legacy alias — older code referenced .nt-browse for the bottom section.
|
||||
Keep here in case any styles bleed through during transition.) */
|
||||
.nt-browse {
|
||||
border-top: 1px solid var(--bg-soft);
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.nt-search-wrap {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#nt-search {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
background: var(--bg-row);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--bg-row-hi);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
#nt-search:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nt-station-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--bg-soft);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.nt-station-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--bg-soft);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nt-station-row:last-child { border-bottom: none; }
|
||||
|
||||
.nt-station-row:hover {
|
||||
background: var(--bg-row);
|
||||
}
|
||||
|
||||
.nt-station-row.is-active {
|
||||
background: var(--bg-row-hi);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
.nt-station-art {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-soft);
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.nt-station-meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nt-station-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.nt-station-genre {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ========== Footer ========== */
|
||||
.nt-footer {
|
||||
max-width: var(--maxw);
|
||||
margin: 0 auto;
|
||||
padding: 20px 28px 28px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nt-footer a {
|
||||
color: var(--fg-muted);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted var(--bg-row-hi);
|
||||
}
|
||||
|
||||
.nt-footer a:hover {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
.nt-dot { opacity: 0.5; }
|
||||
|
||||
/* Scrollbar — subtle */
|
||||
.nt-station-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.nt-station-list::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-row-hi);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nt-station-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Tighter spacing on smaller windows */
|
||||
@media (max-height: 700px) {
|
||||
.nt-main { padding-top: 24px; gap: 18px; }
|
||||
.nt-now { padding: 12px 0 4px; }
|
||||
.nt-station { font-size: 22px; }
|
||||
.nt-station-list { max-height: 220px; }
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────────
|
||||
First-run UX hint (v0.4.0)
|
||||
Subtle accent-green pulse around the Quick Stations row + a bouncing
|
||||
↓ arrow on the now-playing area. Both disappear the moment a station
|
||||
is picked. Existing users never see them.
|
||||
────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
@keyframes nt-pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(109, 191, 122, 0); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(109, 191, 122, 0.18); }
|
||||
}
|
||||
|
||||
@keyframes nt-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(4px); }
|
||||
}
|
||||
|
||||
body.is-first-run .nt-quick {
|
||||
animation: nt-pulse-glow 2.4s ease-in-out infinite;
|
||||
border-radius: var(--radius);
|
||||
padding: 14px;
|
||||
margin: 0 -14px;
|
||||
}
|
||||
|
||||
body.is-first-run .nt-track {
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
body.is-first-run .nt-track::after {
|
||||
content: " ↓";
|
||||
display: inline-block;
|
||||
animation: nt-bounce 1.8s ease-in-out infinite;
|
||||
margin-left: 6px;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,541 @@
|
||||
// RangerHQ Tuner — New Tab Page controller.
|
||||
// Replaces Chrome's default new tab with the player as a focal landing.
|
||||
// Same underlying mechanics as the popup (sources/index, messages to SW,
|
||||
// chrome.storage state) — but laid out for a full viewport with a
|
||||
// quick-station chip row and a searchable browse list.
|
||||
|
||||
import { TARGETS, TYPES } from '../lib/messages.js';
|
||||
import { listAllStations, getSource } from '../sources/index.js';
|
||||
import {
|
||||
getHistory, getFavourites,
|
||||
toggleFavourite, isFavourited,
|
||||
clearHistory, clearFavourites,
|
||||
searchUrls, formatRelativeTime,
|
||||
entrySignature,
|
||||
} from '../lib/history.js';
|
||||
import { THEME_KEY, THEME_DEFAULT, initTheme, applyTheme } from '../lib/theme.js';
|
||||
import { QUICK_STATIONS_KEY, getQuickStations } from '../lib/quick-stations.js';
|
||||
|
||||
const els = {
|
||||
// Clock
|
||||
hm: document.getElementById('nt-hm'),
|
||||
secs: document.getElementById('nt-secs'),
|
||||
date: document.getElementById('nt-date'),
|
||||
// Now playing
|
||||
station: document.getElementById('nt-station'),
|
||||
track: document.getElementById('nt-track'),
|
||||
state: document.getElementById('nt-state'),
|
||||
// Controls
|
||||
play: document.getElementById('nt-play'),
|
||||
volume: document.getElementById('nt-volume'),
|
||||
// Stations
|
||||
quickList: document.getElementById('nt-quick-list'),
|
||||
search: document.getElementById('nt-search'),
|
||||
list: document.getElementById('nt-station-list'),
|
||||
// Tabs + panes
|
||||
tabBar: document.querySelector('.nt-tab-bar'),
|
||||
paneStations: document.getElementById('nt-pane-stations'),
|
||||
paneHistory: document.getElementById('nt-pane-history'),
|
||||
paneFavs: document.getElementById('nt-pane-favourites'),
|
||||
historyList: document.getElementById('nt-history-list'),
|
||||
favsList: document.getElementById('nt-favs-list'),
|
||||
historyCount: document.getElementById('nt-history-count'),
|
||||
favsCount: document.getElementById('nt-favs-count'),
|
||||
historyClear: document.getElementById('nt-history-clear'),
|
||||
favsClear: document.getElementById('nt-favs-clear'),
|
||||
openOptions: document.getElementById('nt-open-options'),
|
||||
};
|
||||
|
||||
const STORAGE_KEYS = {
|
||||
stations: 'tuner.stationsCache',
|
||||
cachedAt: 'tuner.stationsCachedAt',
|
||||
currentId: 'tuner.currentStationId',
|
||||
volume: 'tuner.volume',
|
||||
isPlaying: 'tuner.isPlaying',
|
||||
};
|
||||
|
||||
const CATALOGUE_TTL_MS = 6 * 60 * 60 * 1000;
|
||||
|
||||
// Quick-pick stations come from chrome.storage.local under tuner.quickStations,
|
||||
// with DEFAULT_QUICK_IDS as fallback (8 curated for tidy 2-row layout).
|
||||
// User can pick their own set in the Options page's "Quick Stations" card.
|
||||
// See src/lib/quick-stations.js for the persistence helpers + defaults.
|
||||
let quickIds = [];
|
||||
|
||||
let stations = [];
|
||||
let currentStation = null;
|
||||
let playing = false;
|
||||
let lastQuery = '';
|
||||
let clockTimer = null;
|
||||
|
||||
init().catch(err => {
|
||||
console.error('Newtab init failed:', err);
|
||||
setState('error');
|
||||
els.track.textContent = `Init failed: ${err.message}`;
|
||||
});
|
||||
|
||||
async function init() {
|
||||
// Theme first — apply stored preference before anything paints to avoid
|
||||
// a brief dark flash if the user has picked light.
|
||||
await initTheme();
|
||||
|
||||
// Clock — visible even before stations load.
|
||||
tickClock();
|
||||
clockTimer = setInterval(tickClock, 1000); // 1 Hz — live seconds
|
||||
|
||||
const stored = await chrome.storage.local.get(Object.values(STORAGE_KEYS));
|
||||
if (typeof stored[STORAGE_KEYS.volume] === 'number') {
|
||||
els.volume.value = String(Math.round(stored[STORAGE_KEYS.volume] * 100));
|
||||
}
|
||||
playing = !!stored[STORAGE_KEYS.isPlaying];
|
||||
setState(playing ? 'playing' : 'idle');
|
||||
reflectPlayButton();
|
||||
|
||||
const cached = stored[STORAGE_KEYS.stations];
|
||||
const cachedAt = stored[STORAGE_KEYS.cachedAt];
|
||||
const fresh = cached && cachedAt && (Date.now() - cachedAt < CATALOGUE_TTL_MS);
|
||||
|
||||
if (fresh) {
|
||||
stations = cached;
|
||||
} else {
|
||||
stations = await listAllStations();
|
||||
await chrome.storage.local.set({
|
||||
[STORAGE_KEYS.stations]: stations,
|
||||
[STORAGE_KEYS.cachedAt]: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
const currentId = stored[STORAGE_KEYS.currentId];
|
||||
currentStation = stations.find(s => s.id === currentId) || null;
|
||||
reflectFirstRunHint();
|
||||
renderNow();
|
||||
quickIds = await getQuickStations();
|
||||
renderQuick();
|
||||
renderList();
|
||||
|
||||
els.play.addEventListener('click', onPlayToggle);
|
||||
els.volume.addEventListener('input', onVolume);
|
||||
els.search.addEventListener('input', () => {
|
||||
lastQuery = els.search.value.trim().toLowerCase();
|
||||
renderList();
|
||||
});
|
||||
|
||||
// Tabs
|
||||
els.tabBar.addEventListener('click', (e) => {
|
||||
const tab = e.target.closest('.nt-tab');
|
||||
if (!tab) return;
|
||||
if (tab.id === 'nt-open-options') {
|
||||
e.preventDefault();
|
||||
chrome.runtime.openOptionsPage();
|
||||
return;
|
||||
}
|
||||
selectTab(tab.dataset.tab);
|
||||
});
|
||||
els.historyClear.addEventListener('click', async () => {
|
||||
if (!confirm('Clear all track history? Favourites will be preserved.')) return;
|
||||
await clearHistory();
|
||||
await renderHistory();
|
||||
});
|
||||
els.favsClear.addEventListener('click', async () => {
|
||||
if (!confirm('Clear all favourites?')) return;
|
||||
await clearFavourites();
|
||||
await renderFavourites();
|
||||
await renderHistory(); // re-render history so star indicators update
|
||||
});
|
||||
|
||||
// First render of track panes
|
||||
await renderHistory();
|
||||
await renderFavourites();
|
||||
|
||||
// Deep-link via URL hash — popup's "History" / "Favourites" buttons
|
||||
// open us with #history or #favourites. Respect that on load AND on
|
||||
// hash change (e.g. user changes it manually).
|
||||
applyHashTab();
|
||||
window.addEventListener('hashchange', applyHashTab);
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg) => {
|
||||
if (msg.target !== TARGETS.POPUP) return; // SW broadcasts to "popup" as the UI bucket
|
||||
if (msg.type === TYPES.STATE_CHANGED) {
|
||||
setState(msg.state);
|
||||
playing = (msg.state === 'playing');
|
||||
reflectPlayButton();
|
||||
chrome.storage.local.set({ [STORAGE_KEYS.isPlaying]: playing });
|
||||
} else if (msg.type === TYPES.ERROR) {
|
||||
setState('error');
|
||||
els.track.textContent = `Stream error (code ${msg.code ?? '?'})`;
|
||||
} else if (msg.type === TYPES.METADATA_UPDATED) {
|
||||
if (msg.nowPlaying) els.track.textContent = formatNowPlaying(msg.nowPlaying);
|
||||
} else if (msg.type === TYPES.TRACK_LOGGED) {
|
||||
renderHistory();
|
||||
} else if (msg.type === TYPES.STORAGE_WIPED) {
|
||||
// Catastrophic reset — re-read everything from scratch.
|
||||
renderHistory();
|
||||
renderFavourites();
|
||||
renderQuick();
|
||||
renderList();
|
||||
}
|
||||
});
|
||||
|
||||
// Cross-surface sync — if the popup (or another newtab) changes the
|
||||
// current station, re-render here live without a manual reload.
|
||||
chrome.storage.onChanged.addListener(async (changes, area) => {
|
||||
if (area !== 'local') return;
|
||||
|
||||
if (changes[THEME_KEY]) {
|
||||
applyTheme(changes[THEME_KEY].newValue || THEME_DEFAULT);
|
||||
}
|
||||
|
||||
if (changes[QUICK_STATIONS_KEY]) {
|
||||
quickIds = await getQuickStations();
|
||||
renderQuick();
|
||||
}
|
||||
|
||||
if (changes[STORAGE_KEYS.currentId] && stations.length) {
|
||||
const newId = changes[STORAGE_KEYS.currentId].newValue;
|
||||
currentStation = stations.find(s => s.id === newId) || null;
|
||||
els.play.disabled = !currentStation;
|
||||
reflectFirstRunHint();
|
||||
renderNow();
|
||||
renderQuick();
|
||||
renderList();
|
||||
}
|
||||
|
||||
if (changes[STORAGE_KEYS.isPlaying]) {
|
||||
playing = !!changes[STORAGE_KEYS.isPlaying].newValue;
|
||||
reflectPlayButton();
|
||||
}
|
||||
|
||||
if (changes['tuner.history']) renderHistory();
|
||||
if (changes['tuner.favourites']) {
|
||||
renderFavourites();
|
||||
renderHistory();
|
||||
}
|
||||
});
|
||||
|
||||
els.play.disabled = !currentStation;
|
||||
}
|
||||
|
||||
/* ---------- Clock ---------- */
|
||||
|
||||
function tickClock() {
|
||||
const now = new Date();
|
||||
const hh = String(now.getHours()).padStart(2, '0');
|
||||
const mm = String(now.getMinutes()).padStart(2, '0');
|
||||
const ss = String(now.getSeconds()).padStart(2, '0');
|
||||
els.hm.textContent = `${hh}:${mm}`;
|
||||
els.secs.textContent = ss;
|
||||
// Date only changes once a day; rendering the same string per tick is
|
||||
// free (no DOM diff cost) so we don't bother to short-circuit it.
|
||||
els.date.textContent = now.toLocaleDateString(undefined, {
|
||||
weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- Rendering ---------- */
|
||||
|
||||
function renderNow() {
|
||||
if (currentStation) {
|
||||
els.station.textContent = currentStation.name;
|
||||
els.track.textContent = playing ? 'Now playing — fetching metadata…' : 'Ready to play';
|
||||
} else {
|
||||
els.station.textContent = 'Pick a station to begin';
|
||||
els.track.textContent = '—';
|
||||
}
|
||||
}
|
||||
|
||||
function renderQuick() {
|
||||
els.quickList.innerHTML = '';
|
||||
if (!stations.length) {
|
||||
const empty = document.createElement('span');
|
||||
empty.className = 'nt-quick-empty';
|
||||
empty.textContent = 'Loading…';
|
||||
els.quickList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
if (!quickIds.length) {
|
||||
const empty = document.createElement('span');
|
||||
empty.className = 'nt-quick-empty';
|
||||
empty.textContent = 'No Quick Stations picked — set some in ⚙ Settings.';
|
||||
els.quickList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
for (const shortId of quickIds) {
|
||||
const fullId = `somafm:${shortId}`;
|
||||
const s = stations.find(st => st.id === fullId);
|
||||
if (!s) continue;
|
||||
const chip = document.createElement('button');
|
||||
chip.className = 'nt-quick-chip';
|
||||
if (currentStation && currentStation.id === s.id) chip.classList.add('is-active');
|
||||
chip.type = 'button';
|
||||
chip.textContent = s.name;
|
||||
chip.title = s.description || s.genre || s.name;
|
||||
chip.addEventListener('click', () => onPickStation(s));
|
||||
els.quickList.appendChild(chip);
|
||||
}
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
if (!stations.length) {
|
||||
els.list.innerHTML = '<li class="nt-quick-empty" style="padding:14px;">Loading stations…</li>';
|
||||
return;
|
||||
}
|
||||
const q = lastQuery;
|
||||
const filtered = q
|
||||
? stations.filter(s =>
|
||||
s.name.toLowerCase().includes(q) ||
|
||||
s.genre.toLowerCase().includes(q) ||
|
||||
s.description.toLowerCase().includes(q))
|
||||
: stations;
|
||||
|
||||
els.list.innerHTML = '';
|
||||
if (!filtered.length) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'nt-quick-empty';
|
||||
li.style.padding = '14px';
|
||||
li.textContent = 'No matches.';
|
||||
els.list.appendChild(li);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const s of filtered) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'nt-station-row';
|
||||
if (currentStation && currentStation.id === s.id) li.classList.add('is-active');
|
||||
li.setAttribute('role', 'option');
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.className = 'nt-station-art';
|
||||
img.alt = '';
|
||||
img.src = s.artworkUrl || '';
|
||||
img.onerror = () => { img.style.visibility = 'hidden'; };
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'nt-station-meta';
|
||||
|
||||
const name = document.createElement('div');
|
||||
name.className = 'nt-station-name';
|
||||
name.textContent = s.name;
|
||||
|
||||
const genre = document.createElement('div');
|
||||
genre.className = 'nt-station-genre';
|
||||
genre.textContent = s.genre || s.description.slice(0, 80);
|
||||
|
||||
meta.appendChild(name);
|
||||
meta.appendChild(genre);
|
||||
li.appendChild(img);
|
||||
li.appendChild(meta);
|
||||
li.addEventListener('click', () => onPickStation(s));
|
||||
|
||||
els.list.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Actions ---------- */
|
||||
|
||||
async function onPickStation(station) {
|
||||
currentStation = station;
|
||||
els.play.disabled = false;
|
||||
reflectFirstRunHint();
|
||||
await chrome.storage.local.set({ [STORAGE_KEYS.currentId]: station.id });
|
||||
renderNow();
|
||||
renderQuick();
|
||||
renderList();
|
||||
await playCurrent();
|
||||
}
|
||||
|
||||
async function onPlayToggle() {
|
||||
if (!currentStation) return;
|
||||
if (playing) {
|
||||
await sendToSW({ type: TYPES.PAUSE });
|
||||
} else {
|
||||
await playCurrent();
|
||||
}
|
||||
}
|
||||
|
||||
async function playCurrent() {
|
||||
if (!currentStation) return;
|
||||
setState('buffering');
|
||||
try {
|
||||
const source = getSource(currentStation.sourceId);
|
||||
if (!source) throw new Error(`Unknown source ${currentStation.sourceId}`);
|
||||
const streamUrl = await source.resolveStreamUrl(currentStation);
|
||||
await sendToSW({ type: TYPES.SET_VOLUME, volume: Number(els.volume.value) / 100 });
|
||||
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');
|
||||
// Offscreen will broadcast METADATA_UPDATED within ~1s.
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setState('error');
|
||||
els.track.textContent = `Couldn't play: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function onVolume() {
|
||||
const v = Number(els.volume.value) / 100;
|
||||
await chrome.storage.local.set({ [STORAGE_KEYS.volume]: v });
|
||||
await sendToSW({ type: TYPES.SET_VOLUME, volume: v });
|
||||
}
|
||||
|
||||
/* ---------- Helpers ---------- */
|
||||
|
||||
// v0.4.0 first-run UX hint — body class drives the pulse + arrow CSS in
|
||||
// newtab.css. Active when no station has been picked yet; cleared the
|
||||
// moment one is selected (here or via cross-surface storage sync).
|
||||
function reflectFirstRunHint() {
|
||||
document.body.classList.toggle('is-first-run', !currentStation);
|
||||
}
|
||||
|
||||
function reflectPlayButton() {
|
||||
els.play.setAttribute('aria-pressed', playing ? 'true' : 'false');
|
||||
els.play.textContent = playing ? '❚❚ Pause' : '▶ Play';
|
||||
}
|
||||
|
||||
function setState(state) {
|
||||
els.state.dataset.state = state;
|
||||
els.state.textContent = state;
|
||||
}
|
||||
|
||||
function formatNowPlaying(np) {
|
||||
const left = np.artist ? `${np.artist} — ` : '';
|
||||
return `${left}${np.title}`;
|
||||
}
|
||||
|
||||
function sendToSW(msg) {
|
||||
return chrome.runtime.sendMessage({ target: TARGETS.SW, ...msg });
|
||||
}
|
||||
|
||||
/* ---------- Tabs ---------- */
|
||||
|
||||
function selectTab(name) {
|
||||
const map = {
|
||||
stations: els.paneStations,
|
||||
history: els.paneHistory,
|
||||
favourites: els.paneFavs,
|
||||
};
|
||||
for (const [k, pane] of Object.entries(map)) {
|
||||
const active = (k === name);
|
||||
pane.hidden = !active;
|
||||
const tabBtn = els.tabBar.querySelector(`[data-tab="${k}"]`);
|
||||
if (tabBtn) {
|
||||
tabBtn.classList.toggle('is-active', active);
|
||||
tabBtn.setAttribute('aria-selected', active ? 'true' : 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyHashTab() {
|
||||
const hash = (location.hash || '').replace(/^#/, '').toLowerCase();
|
||||
if (hash === 'history' || hash === 'favourites' || hash === 'stations') {
|
||||
selectTab(hash);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- History + Favourites rendering ---------- */
|
||||
|
||||
async function renderHistory() {
|
||||
const entries = await getHistory();
|
||||
els.historyCount.textContent = `${entries.length} track${entries.length === 1 ? '' : 's'}`;
|
||||
if (!entries.length) {
|
||||
els.historyList.innerHTML = '<li class="nt-track-empty">No tracks logged yet. Play a station for a minute and they\'ll appear here.</li>';
|
||||
return;
|
||||
}
|
||||
// Newest first
|
||||
const favs = await getFavourites();
|
||||
const favSigs = new Set(favs.map(entrySignature));
|
||||
els.historyList.innerHTML = '';
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
els.historyList.appendChild(renderTrackRow(entries[i], favSigs));
|
||||
}
|
||||
}
|
||||
|
||||
async function renderFavourites() {
|
||||
const entries = await getFavourites();
|
||||
els.favsCount.textContent = `${entries.length} favourite${entries.length === 1 ? '' : 's'}`;
|
||||
if (!entries.length) {
|
||||
els.favsList.innerHTML = '<li class="nt-track-empty">No favourites yet. Tap the star next to a history track to add it.</li>';
|
||||
return;
|
||||
}
|
||||
const favSigs = new Set(entries.map(entrySignature));
|
||||
els.favsList.innerHTML = '';
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
els.favsList.appendChild(renderTrackRow(entries[i], favSigs));
|
||||
}
|
||||
}
|
||||
|
||||
function renderTrackRow(entry, favSigs) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'nt-track-row';
|
||||
|
||||
// Main column — title (big), artist (accent), meta line
|
||||
const main = document.createElement('div');
|
||||
main.className = 'nt-track-main';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'nt-track-title';
|
||||
title.textContent = entry.title;
|
||||
title.title = entry.title;
|
||||
|
||||
const artist = document.createElement('div');
|
||||
artist.className = 'nt-track-artist';
|
||||
artist.textContent = entry.artist;
|
||||
artist.title = entry.artist;
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'nt-track-meta';
|
||||
const station = entry.station || '—';
|
||||
meta.textContent = `${station} · ${formatRelativeTime(entry.at)}`;
|
||||
|
||||
main.append(title, artist, meta);
|
||||
|
||||
// Right column — star + (future) overflow menu
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'nt-track-controls';
|
||||
|
||||
const fav = document.createElement('button');
|
||||
fav.type = 'button';
|
||||
fav.className = 'nt-fav-btn';
|
||||
const isFav = favSigs.has(entrySignature(entry));
|
||||
fav.setAttribute('aria-pressed', isFav ? 'true' : 'false');
|
||||
fav.setAttribute('aria-label', isFav ? 'Remove from favourites' : 'Add to favourites');
|
||||
fav.textContent = isFav ? '★' : '☆';
|
||||
fav.addEventListener('click', async () => {
|
||||
const nowFav = await toggleFavourite(entry);
|
||||
fav.setAttribute('aria-pressed', nowFav ? 'true' : 'false');
|
||||
fav.textContent = nowFav ? '★' : '☆';
|
||||
fav.setAttribute('aria-label', nowFav ? 'Remove from favourites' : 'Add to favourites');
|
||||
// Re-render favs tab so it reflects the change.
|
||||
renderFavourites();
|
||||
});
|
||||
|
||||
controls.appendChild(fav);
|
||||
|
||||
// Search-link row — spans full width below
|
||||
const search = document.createElement('div');
|
||||
search.className = 'nt-search-row';
|
||||
const urls = searchUrls(entry.artist, entry.title);
|
||||
|
||||
const linkOf = (svc, label) => {
|
||||
const a = document.createElement('a');
|
||||
a.className = `nt-search-link nt-search-link--${svc}`;
|
||||
a.href = urls[svc];
|
||||
a.target = '_blank';
|
||||
a.rel = 'noopener noreferrer';
|
||||
a.textContent = label;
|
||||
a.title = `Search ${label} for "${entry.artist} — ${entry.title}"`;
|
||||
return a;
|
||||
};
|
||||
search.append(
|
||||
linkOf('spotify', 'Spotify'),
|
||||
linkOf('youtube', 'YouTube'),
|
||||
linkOf('apple', 'Apple'),
|
||||
linkOf('bandcamp', 'Bandcamp'),
|
||||
);
|
||||
|
||||
li.append(main, controls, search);
|
||||
return li;
|
||||
}
|
||||
+96
-16
@@ -1,31 +1,55 @@
|
||||
// RangerHQ Tuner — Offscreen audio host.
|
||||
// Owns the <audio> element. MV3 service workers can't host audio
|
||||
// (they get killed when idle), so all live media lives here.
|
||||
// Owns the <audio> element and the 25-second metadata polling loop.
|
||||
// MV3 service workers can't host audio (they get killed when idle),
|
||||
// so all live media + polling lives here.
|
||||
|
||||
import { TARGETS, TYPES } from '../lib/messages.js';
|
||||
import { getSource } from '../sources/index.js';
|
||||
// NOTE: we intentionally do NOT import history.js here. chrome.storage is
|
||||
// not reliably available in offscreen documents across Chrome versions,
|
||||
// so we route writes through the service worker via LOG_TRACK_REQUEST.
|
||||
|
||||
const audio = document.getElementById('player');
|
||||
|
||||
// Poll interval matches rangerhq-radio's WP plugin — battle-tested at 25s.
|
||||
const POLL_MS = 25 * 1000;
|
||||
|
||||
let pollTimer = null;
|
||||
let currentStation = null; // { id, sourceId, name, ... }
|
||||
let lastSeenSig = ''; // dedupe metadata broadcasts within a session
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
if (msg.target !== 'offscreen') return;
|
||||
if (msg.target !== TARGETS.OFFSCREEN) return;
|
||||
|
||||
switch (msg.type) {
|
||||
case 'PLAY':
|
||||
case TYPES.PLAY:
|
||||
currentStation = msg.station || null;
|
||||
audio.src = msg.streamUrl;
|
||||
// Kick off metadata polling IMMEDIATELY — in parallel with audio
|
||||
// buffering. The first poll fires now and broadcasts METADATA_UPDATED
|
||||
// as soon as SomaFM responds (~500ms), instead of waiting 2-5s for
|
||||
// the audio HTTP stream to fill its buffer.
|
||||
startPolling();
|
||||
audio.play()
|
||||
.then(() => sendResponse({ ok: true }))
|
||||
.catch(err => sendResponse({ ok: false, error: err.message }));
|
||||
return true; // keep channel open for async sendResponse
|
||||
.catch(err => {
|
||||
sendResponse({ ok: false, error: err.message });
|
||||
stopPolling();
|
||||
});
|
||||
return true; // async sendResponse
|
||||
|
||||
case 'PAUSE':
|
||||
case TYPES.PAUSE:
|
||||
audio.pause();
|
||||
stopPolling();
|
||||
sendResponse({ ok: true });
|
||||
break;
|
||||
|
||||
case 'SET_VOLUME':
|
||||
case TYPES.SET_VOLUME:
|
||||
audio.volume = Math.max(0, Math.min(1, msg.volume));
|
||||
sendResponse({ ok: true });
|
||||
break;
|
||||
|
||||
case 'GET_STATE':
|
||||
case TYPES.GET_STATE:
|
||||
sendResponse({
|
||||
ok: true,
|
||||
paused: audio.paused,
|
||||
@@ -36,13 +60,69 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Broadcast state changes to anyone listening (popup, SW).
|
||||
// If popup is closed, the send fails silently — that's fine.
|
||||
audio.addEventListener('playing', () => broadcast({ type: 'STATE_CHANGED', state: 'playing' }));
|
||||
audio.addEventListener('pause', () => broadcast({ type: 'STATE_CHANGED', state: 'paused' }));
|
||||
audio.addEventListener('waiting', () => broadcast({ type: 'STATE_CHANGED', state: 'buffering' }));
|
||||
audio.addEventListener('error', () => broadcast({ type: 'ERROR', code: audio.error?.code }));
|
||||
/* ---------- Audio events ---------- */
|
||||
|
||||
audio.addEventListener('playing', () => broadcast({ type: TYPES.STATE_CHANGED, state: 'playing' }));
|
||||
audio.addEventListener('pause', () => broadcast({ type: TYPES.STATE_CHANGED, state: 'paused' }));
|
||||
audio.addEventListener('waiting', () => broadcast({ type: TYPES.STATE_CHANGED, state: 'buffering' }));
|
||||
audio.addEventListener('error', () => {
|
||||
stopPolling();
|
||||
broadcast({ type: TYPES.ERROR, code: audio.error?.code });
|
||||
});
|
||||
|
||||
function broadcast(payload) {
|
||||
chrome.runtime.sendMessage({ target: 'popup', ...payload }).catch(() => {});
|
||||
chrome.runtime.sendMessage({ target: TARGETS.POPUP, ...payload }).catch(() => {});
|
||||
}
|
||||
|
||||
/* ---------- Metadata polling + history logging ---------- */
|
||||
|
||||
function startPolling() {
|
||||
stopPolling();
|
||||
pollNow(); // fire immediately so UI gets first metadata fast
|
||||
pollTimer = setInterval(pollNow, POLL_MS);
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
if (pollTimer) clearInterval(pollTimer);
|
||||
pollTimer = null;
|
||||
lastSeenSig = '';
|
||||
}
|
||||
|
||||
async function pollNow() {
|
||||
if (!currentStation) return;
|
||||
const source = getSource(currentStation.sourceId);
|
||||
if (!source) return;
|
||||
|
||||
let np;
|
||||
try {
|
||||
np = await source.getNowPlaying(currentStation);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (!np || !np.title) return;
|
||||
|
||||
// Broadcast every poll where we have metadata, so the UI's track line
|
||||
// is always current (even if the song hasn't changed, the popup might
|
||||
// have been opened fresh and needs to render).
|
||||
broadcast({ type: TYPES.METADATA_UPDATED, nowPlaying: np, station: currentStation });
|
||||
|
||||
// Log to history — but only when the (artist|title) changed since we
|
||||
// last saw it within this play-session. The history.js layer also
|
||||
// dedups against the persisted last entry, so this is belt + braces.
|
||||
const sig = `${(np.artist || '').toLowerCase().trim()}|${(np.title || '').toLowerCase().trim()}`;
|
||||
if (sig === lastSeenSig) return;
|
||||
lastSeenSig = sig;
|
||||
|
||||
// Ask the service worker to do the actual storage write. The SW will
|
||||
// broadcast TRACK_LOGGED back to the UI surfaces on success.
|
||||
chrome.runtime.sendMessage({
|
||||
target: TARGETS.SW,
|
||||
type: TYPES.LOG_TRACK_REQUEST,
|
||||
entry: {
|
||||
artist: np.artist,
|
||||
title: np.title,
|
||||
station: currentStation.name,
|
||||
stationId: currentStation.id,
|
||||
},
|
||||
}).catch(() => { /* SW asleep is fine — next poll will retry */ });
|
||||
}
|
||||
|
||||
@@ -0,0 +1,466 @@
|
||||
/* RangerHQ Tuner — Options page.
|
||||
Same earthy palette as popup + newtab.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg: #0f1411;
|
||||
--bg-soft: #1a221c;
|
||||
--bg-row: #1f2823;
|
||||
--bg-row-hi: #2a3530;
|
||||
--fg: #e8e4d4;
|
||||
--fg-muted: #97a094;
|
||||
--accent: #6dbf7a;
|
||||
--accent-dim: #2a7d3e;
|
||||
--cream: #f4e9b7;
|
||||
--danger: #c9685b;
|
||||
--radius: 6px;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────────
|
||||
Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup
|
||||
+ newtab: flip the :root vars only. Existing rules using var(--*)
|
||||
carry over unchanged. Toast text + danger-button hover adjusted for
|
||||
light-bg readability.
|
||||
────────────────────────────────────────────────────────────────────── */
|
||||
/* OS-follow light mode */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #f6f4ed;
|
||||
--bg-soft: #ece5d2;
|
||||
--bg-row: #ddd6c0;
|
||||
--bg-row-hi: #c8c0a8;
|
||||
--fg: #2a2f28;
|
||||
--fg-muted: #6a7064;
|
||||
--accent: #2a7d3e;
|
||||
--accent-dim: #6dbf7a;
|
||||
--cream: #b8861a;
|
||||
--danger: #b53a2b;
|
||||
}
|
||||
.opt-toast { color: #fff; }
|
||||
.opt-toast[data-tone="error"] { color: #fff; }
|
||||
.opt-btn--danger:hover { color: #fff; }
|
||||
}
|
||||
|
||||
/* Manual override — force LIGHT */
|
||||
html[data-theme="light"] {
|
||||
--bg: #f6f4ed; --bg-soft: #ece5d2; --bg-row: #ddd6c0; --bg-row-hi: #c8c0a8;
|
||||
--fg: #2a2f28; --fg-muted: #6a7064; --accent: #2a7d3e; --accent-dim: #6dbf7a;
|
||||
--cream: #b8861a; --danger: #b53a2b;
|
||||
}
|
||||
html[data-theme="light"] .opt-toast { color: #fff; }
|
||||
html[data-theme="light"] .opt-toast[data-tone="error"] { color: #fff; }
|
||||
html[data-theme="light"] .opt-btn--danger:hover { color: #fff; }
|
||||
|
||||
/* Manual override — force DARK */
|
||||
html[data-theme="dark"] {
|
||||
--bg: #0f1411; --bg-soft: #1a221c; --bg-row: #1f2823; --bg-row-hi: #2a3530;
|
||||
--fg: #e8e4d4; --fg-muted: #97a094; --accent: #6dbf7a; --accent-dim: #2a7d3e;
|
||||
--cream: #f4e9b7; --danger: #c9685b;
|
||||
}
|
||||
html[data-theme="dark"] .opt-toast { color: var(--bg); }
|
||||
html[data-theme="dark"] .opt-toast[data-tone="error"] { color: var(--cream); }
|
||||
html[data-theme="dark"] .opt-btn--danger:hover { color: var(--cream); }
|
||||
|
||||
/* Theme toggle UI (v0.5.0 Phase 2) */
|
||||
.opt-theme-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.opt-theme-row label {
|
||||
flex: 1;
|
||||
min-width: 90px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--bg-row-hi);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-row);
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms ease-out;
|
||||
}
|
||||
|
||||
.opt-theme-row label:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.opt-theme-row input[type="radio"] {
|
||||
margin: 0;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.opt-theme-row label:has(input:checked) {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-row-hi);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.opt-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 18px 28px;
|
||||
background: var(--bg-soft);
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.opt-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding: 4px 8px;
|
||||
margin: -4px -8px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.opt-brand:hover {
|
||||
background: var(--bg-row);
|
||||
}
|
||||
|
||||
.opt-brand:hover .opt-back {
|
||||
color: var(--accent);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.opt-back {
|
||||
font-size: 18px;
|
||||
color: var(--fg-muted);
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
transition: color 120ms ease-out, transform 120ms ease-out;
|
||||
}
|
||||
|
||||
.opt-helmet {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.opt-brand h1 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.opt-version {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
letter-spacing: 0.5px;
|
||||
padding: 3px 10px;
|
||||
background: var(--bg-row);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.opt-main {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.opt-card {
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--bg-row);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.opt-card h2 {
|
||||
margin: 0 0 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.opt-note {
|
||||
margin: 0 0 16px;
|
||||
font-size: 12px;
|
||||
color: var(--fg-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.opt-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.opt-stat {
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-row);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.opt-stat-label {
|
||||
font-size: 10px;
|
||||
color: var(--fg-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.opt-stat-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.opt-row {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.opt-row label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.opt-row--inline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--bg-row);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.opt-row--inline:last-child { border-bottom: none; }
|
||||
|
||||
.opt-row--inline label { margin-bottom: 0; }
|
||||
|
||||
.opt-help {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.opt-slider-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
#opt-cap {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.opt-slider-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 500;
|
||||
min-width: 3em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.opt-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 18px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--bg-row);
|
||||
}
|
||||
|
||||
.opt-btn {
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-row);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--bg-row-hi);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.opt-btn:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.opt-btn--danger {
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.opt-btn--danger:hover {
|
||||
background: var(--danger);
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
.opt-about {
|
||||
margin: 0 0 14px;
|
||||
font-size: 13px;
|
||||
color: var(--fg-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.opt-about a, .opt-links a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted transparent;
|
||||
}
|
||||
|
||||
.opt-about a:hover, .opt-links a:hover {
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
.opt-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
color: var(--fg-muted);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.opt-links strong {
|
||||
color: var(--fg);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.opt-toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
padding: 10px 18px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.opt-toast[data-tone="error"] {
|
||||
background: var(--danger);
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────────
|
||||
Quick Stations picker (v0.5.3) — scrollable checkbox list of every
|
||||
SomaFM channel. Toggles persist to chrome.storage.local under
|
||||
tuner.quickStations; NewTab re-renders chip row instantly.
|
||||
────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.opt-qs-count {
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.opt-qs-list {
|
||||
margin: 12px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--bg-row);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-row);
|
||||
}
|
||||
|
||||
.opt-qs-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.opt-qs-list::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-row-hi);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.opt-qs-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.opt-qs-loading {
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
color: var(--fg-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.opt-qs-row {
|
||||
border-bottom: 1px solid var(--bg-soft);
|
||||
}
|
||||
|
||||
.opt-qs-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.opt-qs-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.opt-qs-label:hover {
|
||||
background: var(--bg-row-hi);
|
||||
}
|
||||
|
||||
.opt-qs-label input[type="checkbox"] {
|
||||
margin: 3px 0 0 0;
|
||||
accent-color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.opt-qs-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.opt-qs-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.opt-qs-genre {
|
||||
font-size: 10px;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.opt-qs-desc {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
margin-top: 3px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>RangerHQ Tuner — Options</title>
|
||||
<link rel="stylesheet" href="options.css">
|
||||
<link rel="icon" href="../assets/icons/icon-48.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="opt-header">
|
||||
<a href="../newtab/newtab.html" class="opt-brand" title="Back to RangerHQ Tuner">
|
||||
<span class="opt-back" aria-hidden="true">←</span>
|
||||
<img src="../assets/img/ranger.png" alt="" class="opt-helmet">
|
||||
<h1>RangerHQ Tuner — Options</h1>
|
||||
</a>
|
||||
<span class="opt-version" id="opt-version">v—</span>
|
||||
</header>
|
||||
|
||||
<main class="opt-main">
|
||||
|
||||
<section class="opt-card">
|
||||
<h2>Local data</h2>
|
||||
<p class="opt-note">Everything RangerHQ Tuner stores lives in your browser only. No data is sent anywhere.</p>
|
||||
|
||||
<div class="opt-stats">
|
||||
<div class="opt-stat">
|
||||
<div class="opt-stat-label">History</div>
|
||||
<div class="opt-stat-value" id="opt-stat-history">— tracks</div>
|
||||
</div>
|
||||
<div class="opt-stat">
|
||||
<div class="opt-stat-label">Favourites</div>
|
||||
<div class="opt-stat-value" id="opt-stat-favs">— tracks</div>
|
||||
</div>
|
||||
<div class="opt-stat">
|
||||
<div class="opt-stat-label">Stations cached</div>
|
||||
<div class="opt-stat-value" id="opt-stat-cache">— stations</div>
|
||||
</div>
|
||||
<div class="opt-stat">
|
||||
<div class="opt-stat-label">Total local data</div>
|
||||
<div class="opt-stat-value" id="opt-stat-bytes">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opt-row">
|
||||
<label for="opt-cap">
|
||||
History cap
|
||||
<span class="opt-help">How many recent tracks to keep before the oldest are dropped.</span>
|
||||
</label>
|
||||
<div class="opt-slider-wrap">
|
||||
<input type="range" id="opt-cap" min="50" max="500" step="50" value="500">
|
||||
<span class="opt-slider-value" id="opt-cap-value">500</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opt-actions">
|
||||
<button id="opt-export-json" class="opt-btn">Export history (JSON)</button>
|
||||
<button id="opt-export-csv" class="opt-btn">Export history (CSV)</button>
|
||||
</div>
|
||||
|
||||
<div class="opt-actions">
|
||||
<button id="opt-clear-history" class="opt-btn">Clear history</button>
|
||||
<button id="opt-clear-favs" class="opt-btn">Clear favourites</button>
|
||||
<button id="opt-clear-all" class="opt-btn opt-btn--danger">Clear EVERYTHING</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="opt-card">
|
||||
<h2>Appearance</h2>
|
||||
<div class="opt-row">
|
||||
<label>
|
||||
Theme
|
||||
<span class="opt-help">Auto follows your OS setting. Dark / Light overrides it.</span>
|
||||
</label>
|
||||
<div class="opt-theme-row" role="radiogroup" aria-label="Theme">
|
||||
<label>
|
||||
<input type="radio" name="opt-theme" value="auto" id="opt-theme-auto">
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="opt-theme" value="dark" id="opt-theme-dark">
|
||||
<span>Dark</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="opt-theme" value="light" id="opt-theme-light">
|
||||
<span>Light</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="opt-card">
|
||||
<h2>Quick Stations</h2>
|
||||
<p class="opt-note">
|
||||
Pick which SomaFM channels show in the chip row on the New Tab Page.
|
||||
<span id="opt-qs-count" class="opt-qs-count">— selected</span>
|
||||
</p>
|
||||
<ul id="opt-qs-list" class="opt-qs-list" role="list">
|
||||
<li class="opt-qs-loading">Loading channel list…</li>
|
||||
</ul>
|
||||
<div class="opt-actions">
|
||||
<button id="opt-qs-reset" class="opt-btn" type="button">Reset to defaults (8)</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="opt-card">
|
||||
<h2>Playback</h2>
|
||||
<div class="opt-row opt-row--inline">
|
||||
<label>Current volume</label>
|
||||
<span id="opt-volume-display" class="opt-stat-value">—</span>
|
||||
</div>
|
||||
<div class="opt-row opt-row--inline">
|
||||
<label>Last station</label>
|
||||
<span id="opt-last-station" class="opt-stat-value">—</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="opt-card">
|
||||
<h2>About</h2>
|
||||
<p class="opt-about">
|
||||
RangerHQ Tuner is a lightweight indie internet radio player, sibling to
|
||||
<a href="https://wordpress.org/plugins/rangerhq-radio/" target="_blank" rel="noopener">RangerHQ Radio</a>
|
||||
on WordPress.org. No telemetry, no third-party JavaScript, GPL v2 or later.
|
||||
</p>
|
||||
<ul class="opt-links">
|
||||
<li><strong>Repo:</strong> <a href="https://git.davidtkeane.com/ranger/rangerhq-tuner" target="_blank" rel="noopener">git.davidtkeane.com/ranger/rangerhq-tuner</a></li>
|
||||
<li><strong>Maker:</strong> <a href="https://davidtkeane.com" target="_blank" rel="noopener">davidtkeane.com</a></li>
|
||||
<li><strong>Stations:</strong> <a href="https://somafm.com" target="_blank" rel="noopener">SomaFM</a> — listener-supported indie radio</li>
|
||||
<li><strong>Licence:</strong> GPL v2 or later</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<p class="opt-toast" id="opt-toast" hidden></p>
|
||||
|
||||
</main>
|
||||
|
||||
<script type="module" src="options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,361 @@
|
||||
// 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';
|
||||
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',
|
||||
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'),
|
||||
// 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 => {
|
||||
console.error('Options init failed:', err);
|
||||
toast(`Init failed: ${err.message}`, 'error');
|
||||
});
|
||||
|
||||
async function init() {
|
||||
els.version.textContent = `v${chrome.runtime.getManifest().version}`;
|
||||
|
||||
// Theme — apply stored preference + wire the radio group + listen for
|
||||
// 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();
|
||||
|
||||
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.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();
|
||||
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(async (changes, area) => {
|
||||
if (area !== 'local') return;
|
||||
if (changes[THEME_KEY]) {
|
||||
const v = changes[THEME_KEY].newValue || THEME_DEFAULT;
|
||||
applyTheme(v);
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Apply the stored theme, check the matching radio, wire change handlers. */
|
||||
async function initThemeUI() {
|
||||
const current = await getTheme();
|
||||
applyTheme(current);
|
||||
const checked = document.querySelector(`input[name="opt-theme"][value="${current}"]`);
|
||||
if (checked) checked.checked = true;
|
||||
for (const r of document.querySelectorAll('input[name="opt-theme"]')) {
|
||||
r.addEventListener('change', async (e) => {
|
||||
const v = e.target.value;
|
||||
if (!VALID_THEMES.includes(v)) return;
|
||||
await setTheme(v);
|
||||
applyTheme(v);
|
||||
toast(`Theme: ${v}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 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(),
|
||||
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`;
|
||||
}
|
||||
|
||||
/** 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 || '';
|
||||
els.toast.hidden = false;
|
||||
clearTimeout(toast._t);
|
||||
toast._t = setTimeout(() => { els.toast.hidden = true; }, 2400);
|
||||
}
|
||||
+134
-1
@@ -14,8 +14,62 @@
|
||||
--cream: #f4e9b7;
|
||||
--danger: #c9685b;
|
||||
--radius: 6px;
|
||||
|
||||
/* First-run hint pulse colour (RGB tuple — alpha applied in keyframes). */
|
||||
--pulse-rgb: 109, 191, 122;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────────
|
||||
Light mode (v0.5.0) — auto-follows OS theme via prefers-color-scheme.
|
||||
Flips backgrounds + foregrounds to a cream-leaning palette while
|
||||
preserving the brand green as the accent. Every existing rule that
|
||||
uses the var(--*) tokens keeps working unchanged.
|
||||
────────────────────────────────────────────────────────────────────── */
|
||||
/* Shared light palette block — used as a mixin by the @media (OS-follow)
|
||||
rule below AND by the html[data-theme="light"] manual override. */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #f6f4ed; /* cream-leaning off-white */
|
||||
--bg-soft: #ece5d2; /* slightly darker for header bars */
|
||||
--bg-row: #ddd6c0; /* hover background */
|
||||
--bg-row-hi: #c8c0a8; /* active row background */
|
||||
--fg: #2a2f28; /* dark forest-green-leaning text */
|
||||
--fg-muted: #6a7064; /* muted secondary text */
|
||||
--accent: #2a7d3e; /* darker brand green for primary contrast */
|
||||
--accent-dim: #6dbf7a; /* lighter brand green for fills */
|
||||
--cream: #b8861a; /* darker amber — readable on light bg */
|
||||
--danger: #b53a2b; /* darker red — readable on light bg */
|
||||
}
|
||||
.tuner-state[data-state="playing"] { color: #fff; }
|
||||
.tuner-state[data-state="buffering"] { color: #fff; }
|
||||
.tuner-state[data-state="error"] { color: #fff; }
|
||||
.btn-primary[aria-pressed="true"] { color: #fff; }
|
||||
}
|
||||
|
||||
/* Manual override — force LIGHT palette regardless of OS. The attribute
|
||||
selector beats both :root and the @media rule's :root on specificity. */
|
||||
html[data-theme="light"] {
|
||||
--bg: #f6f4ed; --bg-soft: #ece5d2; --bg-row: #ddd6c0; --bg-row-hi: #c8c0a8;
|
||||
--fg: #2a2f28; --fg-muted: #6a7064; --accent: #2a7d3e; --accent-dim: #6dbf7a;
|
||||
--cream: #b8861a; --danger: #b53a2b;
|
||||
}
|
||||
html[data-theme="light"] .tuner-state[data-state="playing"] { color: #fff; }
|
||||
html[data-theme="light"] .tuner-state[data-state="buffering"] { color: #fff; }
|
||||
html[data-theme="light"] .tuner-state[data-state="error"] { color: #fff; }
|
||||
html[data-theme="light"] .btn-primary[aria-pressed="true"] { color: #fff; }
|
||||
|
||||
/* Manual override — force DARK palette regardless of OS. Overrides the
|
||||
@media block when OS is light but user explicitly wants dark. */
|
||||
html[data-theme="dark"] {
|
||||
--bg: #0f1411; --bg-soft: #1a221c; --bg-row: #1f2823; --bg-row-hi: #2a3530;
|
||||
--fg: #e8e4d4; --fg-muted: #97a094; --accent: #6dbf7a; --accent-dim: #2a7d3e;
|
||||
--cream: #f4e9b7; --danger: #c9685b;
|
||||
}
|
||||
html[data-theme="dark"] .tuner-state[data-state="playing"] { color: var(--bg); }
|
||||
html[data-theme="dark"] .tuner-state[data-state="buffering"] { color: var(--bg); }
|
||||
html[data-theme="dark"] .tuner-state[data-state="error"] { color: var(--cream); }
|
||||
html[data-theme="dark"] .btn-primary[aria-pressed="true"] { color: var(--bg); }
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
@@ -245,11 +299,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;
|
||||
@@ -266,3 +364,38 @@ html, body {
|
||||
.station-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────────────
|
||||
First-run UX hint (v0.4.0)
|
||||
When body.is-first-run is set (no station picked), the station list
|
||||
subtly pulses with an accent-green glow and the now-playing area gets
|
||||
a bouncing ↓ arrow pointing the user at the list. Both removed the
|
||||
moment a station is picked, so existing users never see them again.
|
||||
────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
@keyframes tuner-pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(109, 191, 122, 0); }
|
||||
50% { box-shadow: 0 0 0 4px rgba(109, 191, 122, 0.25); }
|
||||
}
|
||||
|
||||
@keyframes tuner-bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(3px); }
|
||||
}
|
||||
|
||||
body.is-first-run .stations {
|
||||
animation: tuner-pulse-glow 2.4s ease-in-out infinite;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
body.is-first-run .np-track {
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
body.is-first-run .np-track::after {
|
||||
content: " ↓";
|
||||
display: inline-block;
|
||||
animation: tuner-bounce 1.8s ease-in-out infinite;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
+67
-7
@@ -4,6 +4,7 @@
|
||||
|
||||
import { TARGETS, TYPES } from '../lib/messages.js';
|
||||
import { listAllStations, getSource } from '../sources/index.js';
|
||||
import { THEME_KEY, THEME_DEFAULT, initTheme, applyTheme } from '../lib/theme.js';
|
||||
|
||||
const els = {
|
||||
statePill: document.getElementById('state-pill'),
|
||||
@@ -13,8 +14,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',
|
||||
@@ -37,6 +43,10 @@ init().catch(err => {
|
||||
});
|
||||
|
||||
async function init() {
|
||||
// 0. Apply theme preference (v0.5.0) before anything paints, to avoid
|
||||
// a brief dark flash if the user has picked light.
|
||||
await initTheme();
|
||||
|
||||
// 1. Hydrate UI from cached state so the popup renders fast.
|
||||
const stored = await chrome.storage.local.get(Object.values(STORAGE_KEYS));
|
||||
if (typeof stored[STORAGE_KEYS.volume] === 'number') {
|
||||
@@ -64,6 +74,7 @@ async function init() {
|
||||
// 3. Restore current station selection.
|
||||
const currentId = stored[STORAGE_KEYS.currentId];
|
||||
currentStation = stations.find(s => s.id === currentId) || null;
|
||||
reflectFirstRunHint();
|
||||
renderNowPlaying();
|
||||
|
||||
// 4. Render station list.
|
||||
@@ -77,6 +88,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 +118,31 @@ 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[THEME_KEY]) {
|
||||
applyTheme(changes[THEME_KEY].newValue || THEME_DEFAULT);
|
||||
}
|
||||
|
||||
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;
|
||||
reflectFirstRunHint();
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -166,6 +213,7 @@ function renderNowPlaying() {
|
||||
async function onPickStation(station) {
|
||||
currentStation = station;
|
||||
els.btnPlay.disabled = false;
|
||||
reflectFirstRunHint();
|
||||
await chrome.storage.local.set({ [STORAGE_KEYS.currentId]: station.id });
|
||||
renderNowPlaying();
|
||||
renderStations();
|
||||
@@ -191,13 +239,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');
|
||||
@@ -216,6 +268,14 @@ function reflectPlayButton() {
|
||||
els.btnPlay.textContent = playing ? '❚❚ Pause' : '▶ Play';
|
||||
}
|
||||
|
||||
// v0.4.0 first-run UX hint — body class drives the pulse + arrow CSS in
|
||||
// popup.css. Active when no station has been picked yet; cleared the
|
||||
// moment a station is selected (here or in another surface via storage
|
||||
// sync).
|
||||
function reflectFirstRunHint() {
|
||||
document.body.classList.toggle('is-first-run', !currentStation);
|
||||
}
|
||||
|
||||
function setState(state) {
|
||||
els.statePill.dataset.state = state;
|
||||
els.statePill.textContent = state;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
@@ -0,0 +1,36 @@
|
||||
# Chrome Web Store screenshots — RangerHQ Tuner v0.3.0
|
||||
|
||||
Upload these in order at:
|
||||
**Dashboard → RangerHQ Tuner → Store listing → Screenshots**
|
||||
|
||||
Spec met: **1280×800 PNG**, ≤ 5 images (Chrome Web Store requirement).
|
||||
|
||||
| # | File | What it shows | Why it earns the slot |
|
||||
|---|---|---|---|
|
||||
| 1 | `screenshot-1-stations.png` | The full New Tab Page on the Stations tab — clock top-right (real-time), DEF CON Radio queued, Play button, eight quick-station chips, searchable browse list of SomaFM channels. | First impression. Shows the core product immediately. |
|
||||
| 2 | `screenshot-2-history.png` | The same New Tab Page on the **History** tab — 4 tracks logged with the **Spotify / YouTube / Apple / Bandcamp** search buttons per row clearly visible. | The headline feature — the single-purpose statement comes alive here. |
|
||||
| 3 | `screenshot-3-favourites.png` | The **Favourites** tab with a single starred track. | Demonstrates the star-toggle persistence and the per-user favourites surface. |
|
||||
| 4 | `screenshot-4-popup.png` | The **toolbar popup** in context (with the helmet icon visible in the Chrome address bar) showing the bottom nav row: **Open in tab / History / Settings**. | Anchors "where the extension lives" — the Chrome toolbar. |
|
||||
|
||||
## Source files
|
||||
|
||||
The original screen grabs (1376–1378 × 1155 PNGs) are archived at `../source/` and were processed with ImageMagick:
|
||||
|
||||
```bash
|
||||
# NTP shots (1378×1156 → 1280×800)
|
||||
magick main-stations.png -crop 1378x950+0+0 -resize 1280x \
|
||||
-gravity north -background "#0f1411" -extent 1280x800 screenshot-1-stations.png
|
||||
|
||||
# Popup (367×590 → composed on 1280×800 dark canvas)
|
||||
magick extension.png -resize x740 \
|
||||
-gravity center -background "#0f1411" -extent 1280x800 screenshot-4-popup.png
|
||||
```
|
||||
|
||||
Same dark base colour `#0f1411` as the popup palette, so the Dashboard preview blends naturally with the extension's own visuals.
|
||||
|
||||
## Optional follow-on assets (deferred)
|
||||
|
||||
- **Promo tile** (440×280 PNG) — required by the Web Store for the listing tile in search/browse results. Not yet produced.
|
||||
- **Marquee tile** (1400×560 PNG) — optional but Google promotes extensions with marquee assets more often. Not yet produced.
|
||||
|
||||
Both can be generated from `../source/` plus the helmet logo at `../../src/assets/img/ranger.png` whenever ready.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Reference in New Issue
Block a user