// ==UserScript== // @name Spotify Track Recorder - Playlist & Song Logger // @namespace tweeks.io // @version 1.0 // @description Records the currently playing track and all visible playlist tracks to localStorage, organized by playlist/album name. Provides a floating UI panel to view, export, and manage recordings. // @author Tweeks // @match *://open.spotify.com/* // @grant GM_registerMenuCommand // @grant GM_unregisterMenuCommand // @grant TW_notifications // ==/UserScript== (function () { 'use strict'; // ─── Storage helpers ──────────────────────────────────────────────────────── const STORAGE_KEY_PREFIX = 'spotify_track_recorder_'; function sanitizeFolderName(name) { return (name || 'Unknown').replace(/[\\/:*?"<>|]/g, '_').trim() || 'Unknown'; } function getFolderKey(folderName) { return STORAGE_KEY_PREFIX + sanitizeFolderName(folderName); } function loadFolder(folderName) { try { const raw = localStorage.getItem(getFolderKey(folderName)); return raw ? JSON.parse(raw) : { name: folderName, tracks: [] }; } catch (e) { return { name: folderName, tracks: [] }; } } function saveFolder(folderName, data) { try { localStorage.setItem(getFolderKey(folderName), JSON.stringify(data)); return true; } catch (e) { console.error('[TrackRecorder] Save failed:', e); return false; } } function getAllFolderNames() { const names = []; for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); if (key && key.startsWith(STORAGE_KEY_PREFIX)) { names.push(key.slice(STORAGE_KEY_PREFIX.length)); } } return names; } function addTrackToFolder(folderName, track) { const folder = loadFolder(folderName); // Avoid exact duplicates (same title + artist + timestamp within 2s) const isDuplicate = folder.tracks.some(t => t.title === track.title && t.artist === track.artist && Math.abs(new Date(t.recordedAt) - new Date(track.recordedAt)) < 2000 ); if (!isDuplicate) { folder.tracks.push(track); saveFolder(folderName, folder); } return !isDuplicate; } // ─── DOM helpers ──────────────────────────────────────────────────────────── function getNowPlayingInfo() { const titleEl = document.querySelector('[data-testid="context-item-info-title"]'); const artistEl = document.querySelector('[data-testid="context-item-info-artist"]'); const progressEl = document.querySelector('[data-testid="playback-progressbar"] input[type="range"]'); const coverEl = document.querySelector('[data-testid="cover-art-image"]'); if (!titleEl) return null; const title = titleEl.textContent.trim(); const artist = artistEl ? artistEl.textContent.trim() : ''; const progressText = progressEl ? progressEl.getAttribute('aria-valuetext') || '' : ''; const coverUrl = coverEl ? coverEl.src : ''; const contextLink = titleEl.querySelector('a'); const trackUrl = contextLink ? 'https://open.spotify.com' + contextLink.getAttribute('href') : ''; return { title, artist, progressText, coverUrl, trackUrl }; } function getPlaylistName() { // Try the page heading first const h1 = document.querySelector('h1[data-encore-id="text"]'); if (h1 && h1.textContent.trim()) return h1.textContent.trim(); // Fallback: derive from URL const match = window.location.pathname.match(/\/(playlist|album|artist)\/[^/]+/); if (match) { const titleTag = document.title; if (titleTag) return titleTag.replace(' | Spotify', '').trim(); } return document.title.replace(' | Spotify', '').trim() || 'Spotify'; } function getVisibleTracklistTracks() { const rows = document.querySelectorAll('[data-testid="tracklist-row"]'); const tracks = []; rows.forEach(row => { // Track title const titleLink = row.querySelector('[data-testid="internal-track-link"]'); const title = titleLink ? titleLink.textContent.trim() : ''; if (!title) return; // Artist const artistLinks = row.querySelectorAll('a[href^="/artist/"]'); const artist = Array.from(artistLinks).map(a => a.textContent.trim()).join(', '); // Album const albumLink = row.querySelector('a[href^="/album/"]'); const album = albumLink ? albumLink.textContent.trim() : ''; // Duration const durationEl = row.querySelector('.Na06TEk5cCR4FwBd'); const duration = durationEl ? durationEl.textContent.trim() : ''; // Track URL const href = titleLink ? titleLink.getAttribute('href') : ''; const trackUrl = href ? 'https://open.spotify.com' + href : ''; // Row index const rowEl = row.closest('[aria-rowindex]'); const index = rowEl ? parseInt(rowEl.getAttribute('aria-rowindex'), 10) : null; tracks.push({ index, title, artist, album, duration, trackUrl }); }); return tracks; } // ─── Recording logic ───────────────────────────────────────────────────────── function recordNowPlaying() { const info = getNowPlayingInfo(); if (!info || !info.title) { TW_toast('Nothing is currently playing.', 'warning', 'Track Recorder'); return; } const folderName = getPlaylistName(); const track = { title: info.title, artist: info.artist, trackUrl: info.trackUrl, coverUrl: info.coverUrl, progress: info.progressText, recordedAt: new Date().toISOString(), source: 'now-playing' }; const added = addTrackToFolder(folderName, track); if (added) { TW_toast(`Recorded: "${info.title}" by ${info.artist}`, 'success', 'Track Recorder', 3000); } else { TW_toast(`Already recorded: "${info.title}"`, 'info', 'Track Recorder', 2500); } } function recordPlaylistTracks() { const folderName = getPlaylistName(); const tracks = getVisibleTracklistTracks(); if (tracks.length === 0) { TW_toast('No tracks found in the visible tracklist.', 'warning', 'Track Recorder'); return; } let added = 0; const now = new Date().toISOString(); tracks.forEach(t => { const track = { ...t, recordedAt: now, source: 'playlist-scan' }; if (addTrackToFolder(folderName, track)) added++; }); TW_toast( `Saved ${added} new track(s) (${tracks.length} scanned) to folder "${folderName}"`, 'success', 'Track Recorder', 4000 ); } // ─── Auto-record now-playing on track change ────────────────────────────── let lastRecordedTitle = ''; function autoRecordIfChanged() { const info = getNowPlayingInfo(); if (!info || !info.title) return; if (info.title === lastRecordedTitle) return; lastRecordedTitle = info.title; const folderName = getPlaylistName(); const track = { title: info.title, artist: info.artist, trackUrl: info.trackUrl, coverUrl: info.coverUrl, progress: '', recordedAt: new Date().toISOString(), source: 'auto' }; addTrackToFolder(folderName, track); } // ─── Panel UI ──────────────────────────────────────────────────────────────── let panelVisible = false; let panelEl = null; function buildPanel() { if (panelEl) { panelEl.remove(); panelEl = null; } const panel = document.createElement('div'); panel.id = 'tw-track-recorder-panel'; panel.style.cssText = ` position: fixed; bottom: 90px; right: 18px; width: 380px; max-height: 520px; background: #121212; color: #fff; border: 1px solid #333; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.7); z-index: 9999; font-family: 'Circular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; display: flex; flex-direction: column; overflow: hidden; `; // Header const header = document.createElement('div'); header.style.cssText = ` background: #1db954; color: #000; padding: 10px 14px; font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; `; header.innerHTML = ` Track Recorder `; panel.appendChild(header); // Action buttons const actions = document.createElement('div'); actions.style.cssText = ` display: flex; gap: 8px; padding: 10px 12px; background: #181818; flex-shrink: 0; flex-wrap: wrap; `; const btnStyle = ` background: #1db954; color: #000; border: none; border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; `; const btnSecStyle = ` background: #333; color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; `; actions.innerHTML = ` `; panel.appendChild(actions); // Folder selector const folderBar = document.createElement('div'); folderBar.style.cssText = ` padding: 6px 12px; background: #181818; border-top: 1px solid #282828; flex-shrink: 0; display: flex; align-items: center; gap: 8px; `; folderBar.innerHTML = ` Folder: `; panel.appendChild(folderBar); // Track list const listContainer = document.createElement('div'); listContainer.id = 'tw-tr-list'; listContainer.style.cssText = ` flex: 1; overflow-y: auto; padding: 8px 0; background: #121212; `; panel.appendChild(listContainer); // Footer stats const footer = document.createElement('div'); footer.id = 'tw-tr-footer'; footer.style.cssText = ` padding: 6px 12px; background: #181818; border-top: 1px solid #282828; color: #aaa; font-size: 11px; flex-shrink: 0; `; panel.appendChild(footer); document.body.appendChild(panel); panelEl = panel; // Populate folder select refreshFolderSelect(); // Events document.getElementById('tw-tr-close').addEventListener('click', togglePanel); document.getElementById('tw-tr-record-now').addEventListener('click', () => { recordNowPlaying(); setTimeout(refreshPanelContent, 300); }); document.getElementById('tw-tr-scan-playlist').addEventListener('click', () => { recordPlaylistTracks(); setTimeout(refreshPanelContent, 300); }); document.getElementById('tw-tr-export').addEventListener('click', exportData); document.getElementById('tw-tr-clear').addEventListener('click', async () => { const { confirmed } = await TW_alert( 'This will delete ALL recorded tracks from ALL folders. This cannot be undone.', 'warning', 'Clear All Recordings', 'Delete All', 'Cancel' ); if (confirmed) { getAllFolderNames().forEach(name => { localStorage.removeItem(getFolderKey(name)); }); refreshPanelContent(); await TW_toast('All recordings cleared.', 'success', 'Track Recorder'); } }); document.getElementById('tw-tr-folder-select').addEventListener('change', refreshTrackList); } function refreshFolderSelect() { const sel = document.getElementById('tw-tr-folder-select'); if (!sel) return; const names = getAllFolderNames(); const currentFolder = getPlaylistName(); sel.innerHTML = ''; if (names.length === 0) { const opt = document.createElement('option'); opt.value = ''; opt.textContent = '(no recordings yet)'; sel.appendChild(opt); } else { names.forEach(name => { const opt = document.createElement('option'); opt.value = name; opt.textContent = name; if (name === sanitizeFolderName(currentFolder)) opt.selected = true; sel.appendChild(opt); }); } refreshTrackList(); } function refreshTrackList() { const sel = document.getElementById('tw-tr-folder-select'); const list = document.getElementById('tw-tr-list'); const footer = document.getElementById('tw-tr-footer'); if (!sel || !list) return; const folderName = sel.value; if (!folderName) { list.innerHTML = '

No recordings yet.
Use the buttons above to start recording.

'; if (footer) footer.textContent = ''; return; } const folder = loadFolder(folderName); const tracks = folder.tracks || []; if (tracks.length === 0) { list.innerHTML = '

No tracks in this folder yet.

'; if (footer) footer.textContent = `Folder: "${folderName}" — 0 tracks`; return; } list.innerHTML = ''; // Show newest first const sorted = [...tracks].reverse(); sorted.forEach((t, i) => { const item = document.createElement('div'); item.style.cssText = ` display: flex; align-items: center; padding: 7px 12px; border-bottom: 1px solid #1a1a1a; gap: 10px; cursor: default; `; item.addEventListener('mouseenter', () => { item.style.background = '#1a1a1a'; }); item.addEventListener('mouseleave', () => { item.style.background = ''; }); const num = document.createElement('span'); num.style.cssText = 'color:#aaa;font-size:11px;min-width:22px;text-align:right;'; num.textContent = tracks.length - i; const info = document.createElement('div'); info.style.cssText = 'flex:1;overflow:hidden;'; const titleEl = document.createElement('div'); titleEl.style.cssText = 'font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;'; if (t.trackUrl) { const a = document.createElement('a'); a.href = t.trackUrl; a.textContent = t.title; a.style.cssText = 'color:#fff;text-decoration:none;'; a.addEventListener('mouseenter', () => { a.style.textDecoration = 'underline'; }); a.addEventListener('mouseleave', () => { a.style.textDecoration = 'none'; }); titleEl.appendChild(a); } else { titleEl.textContent = t.title; } const meta = document.createElement('div'); meta.style.cssText = 'color:#aaa;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;'; const parts = []; if (t.artist) parts.push(t.artist); if (t.album) parts.push(t.album); if (t.duration) parts.push(t.duration); meta.textContent = parts.join(' · '); const time = document.createElement('div'); time.style.cssText = 'color:#555;font-size:10px;margin-top:2px;'; time.textContent = new Date(t.recordedAt).toLocaleString(); info.appendChild(titleEl); info.appendChild(meta); info.appendChild(time); const badge = document.createElement('span'); badge.style.cssText = ` font-size:9px; padding:2px 5px; border-radius:8px; background:${t.source === 'auto' ? '#1a3a2a' : t.source === 'now-playing' ? '#1a2a3a' : '#2a2a1a'}; color:${t.source === 'auto' ? '#1db954' : t.source === 'now-playing' ? '#4a9eff' : '#f0c040'}; white-space:nowrap; flex-shrink:0; `; badge.textContent = t.source === 'auto' ? 'auto' : t.source === 'now-playing' ? 'live' : 'scan'; item.appendChild(num); item.appendChild(info); item.appendChild(badge); list.appendChild(item); }); if (footer) { footer.textContent = `Folder: "${folderName}" — ${tracks.length} track(s) recorded`; } } function refreshPanelContent() { refreshFolderSelect(); } function exportData() { const names = getAllFolderNames(); if (names.length === 0) { TW_toast('No recordings to export.', 'warning', 'Track Recorder'); return; } const allData = {}; names.forEach(name => { allData[name] = loadFolder(name); }); const json = JSON.stringify(allData, null, 2); const blob = new Blob([json], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `spotify_track_recordings_${new Date().toISOString().slice(0, 10)}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); TW_toast('Recordings exported as JSON.', 'success', 'Track Recorder'); } // ─── Toggle panel ───────────────────────────────────────────────────────── function togglePanel() { panelVisible = !panelVisible; if (panelVisible) { buildPanel(); } else { if (panelEl) { panelEl.remove(); panelEl = null; } } rebuildMenuCommands(); } // ─── Floating trigger button ────────────────────────────────────────────── function createFloatingButton() { if (document.getElementById('tw-track-recorder-btn')) return; const btn = document.createElement('button'); btn.id = 'tw-track-recorder-btn'; btn.title = 'Track Recorder'; btn.textContent = 'REC'; btn.style.cssText = ` position: fixed; bottom: 90px; left: 18px; background: #1db954; color: #000; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 10px; font-weight: 900; cursor: pointer; z-index: 9998; box-shadow: 0 4px 12px rgba(0,0,0,0.5); letter-spacing: 0.5px; transition: transform 0.15s, background 0.15s; `; btn.addEventListener('mouseenter', () => { btn.style.transform = 'scale(1.1)'; btn.style.background = '#1ed760'; }); btn.addEventListener('mouseleave', () => { btn.style.transform = ''; btn.style.background = '#1db954'; }); btn.addEventListener('click', togglePanel); document.body.appendChild(btn); } // ─── Menu commands ──────────────────────────────────────────────────────── let menuIds = []; function rebuildMenuCommands() { menuIds.forEach(id => { try { GM_unregisterMenuCommand(id); } catch (e) {} }); menuIds = []; menuIds.push(GM_registerMenuCommand( panelVisible ? 'Hide Track Recorder Panel' : 'Show Track Recorder Panel', togglePanel )); menuIds.push(GM_registerMenuCommand('Record Now Playing Track', recordNowPlaying)); menuIds.push(GM_registerMenuCommand('Scan & Save Visible Playlist Tracks', recordPlaylistTracks)); menuIds.push(GM_registerMenuCommand('Export All Recordings (JSON)', exportData)); } // ─── Auto-record observer ───────────────────────────────────────────────── function startAutoRecordObserver() { const nowPlayingBar = document.querySelector('[data-testid="now-playing-bar"]'); if (!nowPlayingBar) { // Retry after page loads setTimeout(startAutoRecordObserver, 2000); return; } const observer = new MutationObserver(() => { autoRecordIfChanged(); }); observer.observe(nowPlayingBar, { childList: true, subtree: true, characterData: true }); // Initial check autoRecordIfChanged(); } // ─── Init ───────────────────────────────────────────────────────────────── function init() { createFloatingButton(); rebuildMenuCommands(); startAutoRecordObserver(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { // Spotify is a SPA — wait a moment for React to render setTimeout(init, 1500); } })();