nts teal pipin

.gitignore

···
+node_modules/
+*.log
+.DS_Store

README.md

···
+# NTS Radio Scrobbler for Teal.fm
+
+A Chrome extension that scrobbles NTS Radio tracks to Teal.fm on the AT
+Protocol.
+
+## Features
+
+- Automatically detects currently playing tracks on NTS Radio
+- Posts track info to your Bluesky feed
+- Auto-scrobble toggle
+- Secure authentication with Bluesky
+
+## Installation
+
+1. Clone this repository
+2. Open Chrome and navigate to `chrome://extensions/`
+3. Enable "Developer mode" in the top right
+4. Click "Load unpacked" and select this directory
+5. Create placeholder icons in an `icons/` directory (16x16, 48x48, 128x128 PNG
+   files)
+
+## Usage
+
+1. Click the extension icon to open the popup
+2. Log in with your Bluesky handle/email and password
+3. Visit [nts.live](https://www.nts.live) and start listening
+4. Tracks will automatically be scrobbled to your Bluesky feed
+
+## Setup Icons
+
+Before loading the extension, create an `icons/` directory with three PNG files:
+
+- `icon16.png` (16x16)
+- `icon48.png` (48x48)
+- `icon128.png` (128x128)
+
+## Development
+
+The extension consists of:
+
+- `manifest.json` - Extension configuration
+- `content.js` - Scrapes track info from NTS Radio
+- `background.js` - Service worker handling scrobbling logic
+- `atproto.js` - AT Protocol client
+- `popup.html/js` - Authentication and settings UI
+
+## Notes
+
+- The content script may need adjustments if NTS Radio changes their website
+  structure
+- Session tokens are stored locally and refreshed automatically
+- Only works on nts.live domains

atproto.js

···
+// AT Protocol integration module
+
+class ATProtoClient {
+  constructor() {
+    this.session = null;
+    this.pds = 'https://bsky.social';
+  }
+
+  async login(identifier, password, pdsUrl) {
+    try {
+      // Update PDS URL if provided
+      if (pdsUrl) {
+        this.pds = pdsUrl;
+        await chrome.storage.local.set({ pdsUrl });
+      }
+
+      const response = await fetch(`${this.pds}/xrpc/com.atproto.server.createSession`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          identifier,
+          password,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Login failed: ${response.statusText}`);
+      }
+
+      this.session = await response.json();
+
+      // Store session
+      await chrome.storage.local.set({ atprotoSession: this.session });
+
+      return this.session;
+    } catch (error) {
+      console.error('AT Proto login error:', error);
+      throw error;
+    }
+  }
+
+  async loadSession() {
+    const data = await chrome.storage.local.get(['atprotoSession', 'pdsUrl']);
+    if (data.pdsUrl) {
+      this.pds = data.pdsUrl;
+    }
+    if (data.atprotoSession) {
+      this.session = data.atprotoSession;
+      return true;
+    }
+    return false;
+  }
+
+  async logout() {
+    this.session = null;
+    await chrome.storage.local.remove('atprotoSession');
+  }
+
+  async createScrobbleRecord(trackInfo) {
+    if (!this.session) {
+      throw new Error('Not authenticated');
+    }
+
+    // Build the teal.fm play record
+    const record = {
+      $type: 'fm.teal.alpha.feed.play',
+      trackName: trackInfo.track,
+      playedTime: new Date(trackInfo.timestamp).toISOString(),
+      submissionClientAgent: 'fm.teal.nts-scrobbler/1.0.0'
+    };
+
+    // Add MusicBrainz metadata if available
+    if (trackInfo.musicbrainz) {
+      const mb = trackInfo.musicbrainz;
+
+      // Prefer MusicBrainz track name
+      if (mb.trackName) record.trackName = mb.trackName;
+
+      // Recording metadata
+      if (mb.recordingMbId) record.recordingMbId = mb.recordingMbId;
+      if (mb.duration) record.duration = mb.duration;
+
+      // Artist information - use artists array if available
+      if (mb.artists && mb.artists.length > 0) {
+        record.artists = mb.artists;
+      }
+
+      // Release information
+      if (mb.releaseName) record.releaseName = mb.releaseName;
+      if (mb.releaseMbId) record.releaseMbId = mb.releaseMbId;
+      if (mb.isrc) record.isrc = mb.isrc;
+    }
+
+    // Add optional fields
+    if (trackInfo.originUrl) {
+      record.originUrl = trackInfo.originUrl;
+    }
+
+    try {
+      const response = await fetch(`${this.pds}/xrpc/com.atproto.repo.createRecord`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${this.session.accessJwt}`,
+        },
+        body: JSON.stringify({
+          repo: this.session.did,
+          collection: 'fm.teal.alpha.feed.play',
+          record,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Failed to create record: ${response.statusText} - ${errorText}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('Error creating scrobble record:', error);
+      throw error;
+    }
+  }
+
+  async refreshSession() {
+    if (!this.session?.refreshJwt) {
+      throw new Error('No refresh token available');
+    }
+
+    try {
+      const response = await fetch(`${this.pds}/xrpc/com.atproto.server.refreshSession`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${this.session.refreshJwt}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Session refresh failed');
+      }
+
+      this.session = await response.json();
+      await chrome.storage.local.set({ atprotoSession: this.session });
+
+      return this.session;
+    } catch (error) {
+      console.error('Session refresh error:', error);
+      throw error;
+    }
+  }
+
+  isAuthenticated() {
+    return !!this.session;
+  }
+}
+
+// Make available to other scripts
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = ATProtoClient;
+}

background.js

···
+// Background service worker
+
+importScripts("atproto.js");
+importScripts("musicbrainz.js");
+
+const atproto = new ATProtoClient();
+const musicbrainz = new MusicBrainzClient();
+let scrobbleQueue = [];
+let pendingScrobbleTimeout = null;
+
+// Initialize on install
+chrome.runtime.onInstalled.addListener(async () => {
+  console.log("NTS Radio Scrobbler installed");
+  await atproto.loadSession();
+});
+
+// Load session on startup
+chrome.runtime.onStartup.addListener(async () => {
+  await atproto.loadSession();
+});
+
+// Listen for messages from content script
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === "NEW_TRACK") {
+    handleNewTrack(message.data);
+    sendResponse({ received: true });
+  } else if (message.type === "LOGIN") {
+    handleLogin(message.data)
+      .then(sendResponse)
+      .catch((error) => sendResponse({ error: error.message }));
+    return true; // Keep channel open for async response
+  } else if (message.type === "LOGOUT") {
+    handleLogout()
+      .then(sendResponse)
+      .catch((error) => sendResponse({ error: error.message }));
+    return true;
+  } else if (message.type === "GET_AUTH_STATUS") {
+    sendResponse({ authenticated: atproto.isAuthenticated() });
+  }
+});
+
+async function handleNewTrack(trackInfo) {
+  if (!atproto.isAuthenticated()) {
+    console.log("Not authenticated - skipping scrobble");
+    return;
+  }
+
+  // Check if auto-scrobble is enabled
+  const settings = await chrome.storage.local.get("autoScrobble");
+  if (settings.autoScrobble === false) {
+    return;
+  }
+
+  // Cancel any pending scrobble
+  if (pendingScrobbleTimeout) {
+    clearTimeout(pendingScrobbleTimeout);
+    pendingScrobbleTimeout = null;
+  }
+
+  // Wait 30 seconds before scrobbling
+  pendingScrobbleTimeout = setTimeout(async () => {
+    try {
+      // Fetch MusicBrainz metadata
+      const mbInfo = await musicbrainz.searchRecording(trackInfo.artist, trackInfo.track);
+      if (mbInfo) {
+        trackInfo.musicbrainz = mbInfo;
+      }
+
+      await atproto.createScrobbleRecord(trackInfo);
+      console.log('✓ Scrobbled:', `${trackInfo.artist} - ${trackInfo.track}`);
+
+      // Show notification
+      chrome.notifications.create({
+        type: "basic",
+        iconUrl: "icons/icon48.png",
+        title: "Track Scrobbled",
+        message: `${trackInfo.artist} - ${trackInfo.track}`,
+      });
+    } catch (error) {
+      console.error("Failed to scrobble:", error);
+
+      // If token expired, try to refresh
+      if (error.message.includes("token") || error.message.includes("auth")) {
+        try {
+          await atproto.refreshSession();
+          await atproto.createScrobbleRecord(trackInfo);
+        } catch (refreshError) {
+          console.error("Session refresh failed:", refreshError);
+        }
+      }
+    } finally {
+      pendingScrobbleTimeout = null;
+    }
+  }, 30000); // 30 seconds
+}
+
+async function handleLogin({ identifier, password, pdsUrl }) {
+  try {
+    const session = await atproto.login(identifier, password, pdsUrl);
+    return { success: true, session };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function handleLogout() {
+  await atproto.logout();
+  return { success: true };
+}

content.js

···
+// Content script for NTS Radio - extracts currently playing track info
+
+let lastTrack = null;
+
+function extractTrackInfo() {
+  let track = null;
+  let artist = null;
+
+  // Try episode player first
+  const trackDetail = document.querySelector('.episode-player-tracklist__detail');
+  if (trackDetail) {
+    const artistElement = trackDetail.querySelector('.episode-player-tracklist__artist');
+    const trackElement = trackDetail.querySelector('.episode-player-tracklist__title');
+
+    if (trackElement && artistElement) {
+      track = trackElement.textContent.trim();
+      artist = artistElement.textContent.trim();
+    }
+  }
+
+  // If not found, try live radio
+  if (!track || !artist) {
+    const liveTracksList = document.querySelector('.live-tracks-list');
+    if (liveTracksList) {
+      // Get the first track (most recent = currently playing)
+      const firstLiveTrack = liveTracksList.querySelector('.live-track:first-child');
+      if (firstLiveTrack) {
+        const artistElement = firstLiveTrack.querySelector('.live-track__artist-title');
+        const trackElement = firstLiveTrack.querySelector('.live-track__song-title');
+
+        if (trackElement && artistElement) {
+          track = trackElement.textContent.trim();
+          artist = artistElement.textContent.trim();
+        }
+      }
+    }
+  }
+
+  if (track && artist) {
+    return {
+      track,
+      artist,
+      timestamp: Date.now(),
+      station: 'NTS Radio',
+      originUrl: window.location.href
+    };
+  }
+
+  return null;
+}
+
+function checkForNewTrack() {
+  const trackInfo = extractTrackInfo();
+
+  if (trackInfo) {
+    // Compare only artist and track to detect changes (exclude timestamp)
+    const trackChanged = !lastTrack ||
+      lastTrack.artist !== trackInfo.artist ||
+      lastTrack.track !== trackInfo.track;
+
+    if (trackChanged) {
+      lastTrack = trackInfo;
+      console.log('🎵 New track:', `${trackInfo.artist} - ${trackInfo.track}`);
+
+      // Send to background script
+      chrome.runtime.sendMessage({
+        type: 'NEW_TRACK',
+        data: trackInfo
+      }, (response) => {
+        if (chrome.runtime.lastError) {
+          console.error('Error sending message:', chrome.runtime.lastError);
+        }
+      });
+    }
+  }
+}
+
+console.log('NTS Radio scrobbler loaded');
+
+// Check for track changes every 5 seconds
+setInterval(checkForNewTrack, 5000);
+
+// Initial check
+checkForNewTrack();

manifest.json

···
+{
+  "manifest_version": 3,
+  "name": "NTS Radio Scrobbler for AT Protocol",
+  "version": "1.0.0",
+  "description": "Scrobbles NTS Radio tracks to teal.fm",
+  "permissions": ["storage", "activeTab"],
+  "host_permissions": [
+    "https://www.nts.live/*",
+    "https://bsky.social/*",
+    "https://musicbrainz.org/*"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://www.nts.live/*"],
+      "js": ["content.js"],
+      "run_at": "document_idle"
+    }
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}

musicbrainz.js

···
+// MusicBrainz API integration
+
+class MusicBrainzClient {
+  constructor() {
+    this.baseUrl = 'https://musicbrainz.org/ws/2';
+    this.userAgent = 'NTSRadioScrobbler/1.0.0 ( teal-piper )';
+  }
+
+  async searchRecording(artist, track) {
+    try {
+      // Clean up track name - remove version info in parentheses for better matching
+      const cleanTrack = track.replace(/\s*\([^)]*\)\s*$/g, '').trim();
+
+      // Clean up artist name - replace commas with spaces for better matching
+      const cleanArtist = artist.replace(/,\s*/g, ' ').trim();
+
+      // Build search query - use looser matching
+      const query = `artist:${cleanArtist} AND recording:${cleanTrack}`;
+      const url = `${this.baseUrl}/recording/?query=${encodeURIComponent(query)}&fmt=json&limit=5`;
+
+      const response = await fetch(url, {
+        headers: {
+          'User-Agent': this.userAgent,
+          'Accept': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`MusicBrainz API error: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      if (data.recordings && data.recordings.length > 0) {
+        const recording = data.recordings[0];
+        return this.extractRecordingInfo(recording);
+      }
+
+      return null;
+    } catch (error) {
+      console.error('MusicBrainz search error:', error);
+      return null;
+    }
+  }
+
+  extractRecordingInfo(recording) {
+    const info = {
+      recordingMbId: recording.id,
+      trackName: recording.title,
+      duration: recording.length ? Math.floor(recording.length / 1000) : null,
+      artistNames: [],
+      artistMbIds: [],
+      artists: [],
+      isrc: null,
+      releaseName: null,
+      releaseMbId: null
+    };
+
+    // Extract artist information
+    if (recording['artist-credit']) {
+      recording['artist-credit'].forEach(credit => {
+        if (credit.artist) {
+          info.artistNames.push(credit.artist.name);
+          info.artistMbIds.push(credit.artist.id);
+          info.artists.push({
+            artistName: credit.artist.name,
+            artistMbId: credit.artist.id
+          });
+        }
+      });
+    }
+
+    // Extract ISRC
+    if (recording.isrcs && recording.isrcs.length > 0) {
+      info.isrc = recording.isrcs[0];
+    }
+
+    // Extract release information
+    if (recording.releases && recording.releases.length > 0) {
+      const release = recording.releases[0];
+      info.releaseName = release.title;
+      info.releaseMbId = release.id;
+    }
+
+    return info;
+  }
+
+  // Rate limiting helper - MusicBrainz requests max 1 req/second
+  async delay(ms = 1000) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+}
+
+// Make available to other scripts
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = MusicBrainzClient;
+}

popup.html

···
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>NTS Radio Scrobbler</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>NTS Radio Scrobbler</h1>
+
+    <div id="auth-section">
+      <div id="login-form">
+        <h2>Login to Bluesky</h2>
+        <input type="text" id="pds-url" placeholder="PDS URL (default: https://bsky.social)" />
+        <input type="text" id="identifier" placeholder="Handle or email" />
+        <input type="password" id="password" placeholder="Password" />
+        <button id="login-btn">Login</button>
+        <div id="error-msg" class="error"></div>
+      </div>
+
+      <div id="logged-in" style="display: none;">
+        <h2>Connected to Bluesky</h2>
+        <p id="user-info"></p>
+        <button id="logout-btn">Logout</button>
+      </div>
+    </div>
+
+    <div id="settings-section">
+      <h2>Settings</h2>
+      <label>
+        <input type="checkbox" id="auto-scrobble" checked />
+        Auto-scrobble tracks
+      </label>
+    </div>
+
+    <div id="status-section">
+      <p class="info">Visit <a href="https://www.nts.live" target="_blank">nts.live</a> and start listening to scrobble tracks!</p>
+    </div>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

popup.js

···
+// Popup script
+
+document.addEventListener('DOMContentLoaded', async () => {
+  const loginForm = document.getElementById('login-form');
+  const loggedInSection = document.getElementById('logged-in');
+  const loginBtn = document.getElementById('login-btn');
+  const logoutBtn = document.getElementById('logout-btn');
+  const pdsUrlInput = document.getElementById('pds-url');
+  const identifierInput = document.getElementById('identifier');
+  const passwordInput = document.getElementById('password');
+  const errorMsg = document.getElementById('error-msg');
+  const autoScrobbleCheckbox = document.getElementById('auto-scrobble');
+
+  // Check auth status
+  const response = await chrome.runtime.sendMessage({ type: 'GET_AUTH_STATUS' });
+
+  if (response.authenticated) {
+    showLoggedIn();
+  } else {
+    showLogin();
+  }
+
+  // Load settings
+  const settings = await chrome.storage.local.get(['autoScrobble', 'pdsUrl']);
+  if (settings.autoScrobble !== undefined) {
+    autoScrobbleCheckbox.checked = settings.autoScrobble;
+  }
+  if (settings.pdsUrl) {
+    pdsUrlInput.value = settings.pdsUrl;
+  }
+
+  // Login handler
+  loginBtn.addEventListener('click', async () => {
+    const identifier = identifierInput.value.trim();
+    const password = passwordInput.value;
+    let pdsUrl = pdsUrlInput.value.trim();
+
+    if (!pdsUrl) {
+      pdsUrl = 'https://bsky.social';
+    }
+
+    if (!identifier || !password) {
+      errorMsg.textContent = 'Please enter both handle/email and password';
+      return;
+    }
+
+    loginBtn.disabled = true;
+    loginBtn.textContent = 'Logging in...';
+    errorMsg.textContent = '';
+
+    // Save PDS URL
+    await chrome.storage.local.set({ pdsUrl });
+
+    const result = await chrome.runtime.sendMessage({
+      type: 'LOGIN',
+      data: { identifier, password, pdsUrl }
+    });
+
+    if (result.success) {
+      showLoggedIn();
+      passwordInput.value = '';
+    } else {
+      errorMsg.textContent = result.error || 'Login failed';
+    }
+
+    loginBtn.disabled = false;
+    loginBtn.textContent = 'Login';
+  });
+
+  // Logout handler
+  logoutBtn.addEventListener('click', async () => {
+    await chrome.runtime.sendMessage({ type: 'LOGOUT' });
+    showLogin();
+  });
+
+  // Auto-scrobble setting
+  autoScrobbleCheckbox.addEventListener('change', async (e) => {
+    await chrome.storage.local.set({ autoScrobble: e.target.checked });
+  });
+
+  function showLogin() {
+    loginForm.style.display = 'block';
+    loggedInSection.style.display = 'none';
+  }
+
+  function showLoggedIn() {
+    loginForm.style.display = 'none';
+    loggedInSection.style.display = 'block';
+  }
+});

styles.css

···
+body {
+  width: 350px;
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  color: #333;
+}
+
+.container {
+  padding: 20px;
+}
+
+h1 {
+  font-size: 18px;
+  margin: 0 0 20px 0;
+  color: #000;
+}
+
+h2 {
+  font-size: 14px;
+  margin: 0 0 12px 0;
+  color: #666;
+  font-weight: 600;
+}
+
+input[type="text"],
+input[type="password"] {
+  width: 100%;
+  padding: 8px 12px;
+  margin-bottom: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+  outline: none;
+  border-color: #4a9eff;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background: #000;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+button:hover {
+  background: #333;
+}
+
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.error {
+  color: #d32f2f;
+  font-size: 12px;
+  margin-top: 8px;
+  min-height: 16px;
+}
+
+#auth-section {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+#settings-section {
+  margin-bottom: 20px;
+}
+
+#settings-section label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+#settings-section input[type="checkbox"] {
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.info {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.5;
+}
+
+a {
+  color: #4a9eff;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+#user-info {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 12px;
+}