const API_BASE = window.location.hostname === 'localhost' ? 'http://localhost:8080' : ''; const urlInput = document.getElementById('urlInput'); const submitBtn = document.getElementById('submitBtn'); const loading = document.getElementById('loading'); const error = document.getElementById('error'); const seedTrack = document.getElementById('seedTrack'); const recommendations = document.getElementById('recommendations'); const emptyState = document.getElementById('emptyState'); const seedArtwork = document.getElementById('seedArtwork'); const seedTitle = document.getElementById('seedTitle'); const seedArtist = document.getElementById('seedArtist'); const recList = document.getElementById('recList'); const STREAMING_SERVICES = [ { id: 'spotify', name: 'Spotify', color: '#1DB954' }, { id: 'apple', name: 'Apple', color: '#FA2D48' }, { id: 'youtube', name: 'YouTube', color: '#FF0000' }, { id: 'tidal', name: 'Tidal', color: '#00D4FF' }, { id: 'deezer', name: 'Deezer', color: '#FF0092' }, { id: 'soundcloud', name: 'SoundCloud', color: '#FF5500' }, ]; function showError(msg) { error.textContent = msg; error.classList.add('visible'); } function hideError() { error.classList.remove('visible'); } function setLoading(isLoading) { loading.classList.toggle('visible', isLoading); submitBtn.disabled = isLoading; } function parseUrl(url) { const trimmed = url.trim(); if (!trimmed) return null; const uriMatch = trimmed.match(/^spotify:(track|album|playlist|artist):([a-zA-Z0-9]+)$/i); if (uriMatch) { return { type: 'spotify', itemType: uriMatch[1].toLowerCase(), id: uriMatch[2], url: trimmed }; } let parsed; try { parsed = new URL(trimmed.includes('://') ? trimmed : `https://${trimmed}`); } catch { return null; } const host = parsed.hostname.toLowerCase().replace(/^www\./, ''); const parts = parsed.pathname.split('/').filter(Boolean); if (parts[0]?.startsWith('intl-')) parts.shift(); if (parts[0] === 'embed') parts.shift(); if ((host === 'open.spotify.com' || host === 'play.spotify.com') && parts.length >= 2) { const itemType = parts[0].toLowerCase(); if (['track', 'album', 'playlist', 'artist'].includes(itemType)) { return { type: 'spotify', itemType, id: parts[1], url: trimmed }; } } if (host === 'music.apple.com' && parts.length >= 3) { const itemType = parts.includes('playlist') ? 'playlist' : parsed.searchParams.has('i') ? 'song' : parts[2]; const id = parsed.searchParams.get('i') || parts.at(-1); return { type: 'apple', itemType, id, url: trimmed }; } if (host === 'music.youtube.com' || host === 'youtube.com' || host === 'm.youtube.com' || host === 'youtu.be') { const id = parsed.searchParams.get('v') || parsed.searchParams.get('list') || parts[0]; const itemType = parsed.searchParams.has('list') && !parsed.searchParams.has('v') ? 'playlist' : 'video'; if (id) return { type: host === 'music.youtube.com' ? 'youtube_music' : 'youtube', itemType, id, url: trimmed }; } if (host === 'tidal.com' || host === 'listen.tidal.com') { const itemIndex = parts.findIndex(part => ['track', 'album', 'playlist', 'artist'].includes(part)); if (itemIndex >= 0 && parts[itemIndex + 1]) { return { type: 'tidal', itemType: parts[itemIndex], id: parts[itemIndex + 1], url: trimmed }; } } if (host.endsWith('deezer.com')) { const itemIndex = parts.findIndex(part => ['track', 'album', 'playlist', 'artist'].includes(part)); if (itemIndex >= 0 && parts[itemIndex + 1]) { return { type: 'deezer', itemType: parts[itemIndex], id: parts[itemIndex + 1], url: trimmed }; } } if (host === 'soundcloud.com' && parts.length >= 2) { const itemType = parts[1] === 'sets' ? 'playlist' : 'track'; const id = itemType === 'playlist' ? `${parts[0]}/sets/${parts[2] || ''}` : `${parts[0]}/${parts[1]}`; return { type: 'soundcloud', itemType, id, url: trimmed }; } if (host.endsWith('bandcamp.com') && parts.length >= 2 && ['track', 'album'].includes(parts[0])) { return { type: 'bandcamp', itemType: parts[0], id: `${host.split('.')[0]}/${parts.slice(1).join('/')}`, url: trimmed }; } return null; } async function importTrack(parsed) { // The backend imports Spotify directly and resolves other supported song URLs through Song.link. const resp = await fetch(`${API_BASE}/v1/providers/spotify/import`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ source: { type: 'url', value: parsed.url }, market: 'US', enrich_musicbrainz: true, persist: true }) }); if (!resp.ok) { const err = await resp.json().catch(() => ({})); throw new Error(err.detail || 'Failed to import track'); } return await resp.json(); } async function getRecommendations(seedTrackId, limit = 10) { const resp = await fetch(`${API_BASE}/v1/recommendations`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_id: 'anonymous-user', seed_track_ids: [seedTrackId], limit: limit, mode: 'balanced' }) }); if (!resp.ok) { const err = await resp.json().catch(() => ({})); throw new Error(err.detail || 'Failed to get recommendations'); } const data = await resp.json(); return data.data; } async function getSonglinkUrls(title, artist) { try { const resp = await fetch(`https://api.song.link/v1-alpha.1/links?userCountry=US&songTitle=${encodeURIComponent(title)}&artistName=${encodeURIComponent(artist)}`); if (!resp.ok) return {}; const data = await resp.json(); return data.linksByPlatform || {}; } catch { return {}; } } function displaySeedTrack(track) { seedTitle.textContent = track.title; seedArtist.textContent = track.artist; if (track.external?.spotify) { const img = document.createElement('img'); img.src = `https://open.spotify.com/oembed?url=${encodeURIComponent(track.external.spotify)}`; // Note: In production, use proper album art from the API seedArtwork.innerHTML = '♪'; } seedTrack.classList.add('visible'); } function createServiceLinks(songlinkData, track) { const links = []; const serviceMap = { spotify: 'Spotify', appleMusic: 'Apple', youtubeMusic: 'YouTube', youtube: 'YouTube', tidal: 'Tidal', deezer: 'Deezer', soundcloud: 'SoundCloud' }; for (const [platform, label] of Object.entries(serviceMap)) { const data = songlinkData[platform]; if (data?.url) { const svc = STREAMING_SERVICES.find(s => s.id === platform.toLowerCase().replace('music', '') || s.name === label ) || { name: label, color: '#666' }; links.push({ name: svc.name, url: data.url, color: svc.color }); } } // Fallback: always include search links const query = encodeURIComponent(`${track.title} ${track.artist}`); const fallbacks = [ { name: 'Spotify', url: `https://open.spotify.com/search/${query}` }, { name: 'YouTube', url: `https://music.youtube.com/search?q=${query}` }, { name: 'Apple', url: `https://music.apple.com/us/search?term=${query}` }, { name: 'Tidal', url: `https://tidal.com/search?q=${query}` }, ]; // Add any missing services for (const fb of fallbacks) { if (!links.find(l => l.name === fb.name)) { const svc = STREAMING_SERVICES.find(s => s.name === fb.name); links.push({ ...fb, color: svc?.color || '#666' }); } } return links.slice(0, 6); } function displayRecommendations(recs) { recList.innerHTML = ''; recs.forEach((rec, i) => { const item = document.createElement('div'); item.className = 'rec-item'; const rank = document.createElement('div'); rank.className = 'rec-rank'; rank.textContent = rec.rank || i + 1; const info = document.createElement('div'); info.className = 'rec-info'; const title = document.createElement('div'); title.className = 'rec-title'; title.textContent = rec.track.title; const artist = document.createElement('div'); artist.className = 'rec-artist'; artist.textContent = rec.track.artist; const reason = document.createElement('div'); reason.className = 'rec-reason'; reason.textContent = rec.reason || ''; info.appendChild(title); info.appendChild(artist); if (rec.reason) info.appendChild(reason); const links = document.createElement('div'); links.className = 'rec-links'; // Generate links for this track const serviceLinks = createServiceLinks({}, rec.track); serviceLinks.forEach(svc => { const a = document.createElement('a'); a.className = 'service-link'; a.href = svc.url; a.target = '_blank'; a.rel = 'noopener'; a.title = `Open in ${svc.name}`; a.textContent = svc.name.charAt(0); a.style.borderColor = svc.color + '40'; a.style.color = svc.color; links.appendChild(a); }); item.appendChild(rank); item.appendChild(info); item.appendChild(links); recList.appendChild(item); }); recommendations.classList.add('visible'); } async function handleSubmit() { const url = urlInput.value.trim(); if (!url) { showError('Please enter a song URL'); return; } const parsed = parseUrl(url); if (!parsed) { showError('Unsupported URL format. Try a Spotify, Apple Music, or YouTube Music link.'); return; } hideError(); setLoading(true); emptyState.style.display = 'none'; seedTrack.classList.remove('visible'); recommendations.classList.remove('visible'); try { // Import the track const imported = await importTrack(parsed); if (!imported.track) { throw new Error('Could not extract track information'); } displaySeedTrack(imported.track); // Get recommendations const recs = await getRecommendations(imported.track.id, 10); displayRecommendations(recs); } catch (err) { showError(err.message || 'Something went wrong. Please try again.'); console.error(err); } finally { setLoading(false); } } submitBtn.addEventListener('click', handleSubmit); urlInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { handleSubmit(); } }); // Focus input on load urlInput.focus();