diff --git a/index.html b/index.html index f72dacd..8419a41 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,8 @@
  • Go to artist
  • Go to album
  • Copy link
    • +
  • Track Info
    • +
  • Open Original URL
  • Download
    • @@ -795,6 +797,27 @@ Recent +
  • + + + + + + + + Unreleased + +
  • +
    +
    +
    + +
    +
    + +
    +
    Unreleased Artist
    +

    +
    +
    + + +
    +
    +
    +
    +
    +
    EPs and Singles
    - + +
    -

    Version 2.1.0

    +

    Version 2.2.0

    This is an independent client and is not affiliated with or endorsed by TIDAL or any music streaming service. diff --git a/js/db.js b/js/db.js index 3cab4fd..7e581ab 100644 --- a/js/db.js +++ b/js/db.js @@ -231,6 +231,7 @@ export class MusicDatabase { // Keep mix info mixes: item.mixes || null, isTracker: item.isTracker || (item.id && String(item.id).startsWith('tracker-')), + trackerInfo: item.trackerInfo || null, audioUrl: item.remoteUrl || item.audioUrl || null, remoteUrl: item.remoteUrl || null, audioQuality: item.audioQuality || null, diff --git a/js/events.js b/js/events.js index 9188bc7..9a0b652 100644 --- a/js/events.js +++ b/js/events.js @@ -8,6 +8,7 @@ import { trackDataStore, formatTime, SVG_BIN, + getTrackArtists, } from './utils.js'; import { lastFMStorage, waveformSettings } from './storage.js'; import { showNotification, downloadTrackWithMetadata, downloadAlbumAsZip, downloadPlaylistAsZip } from './downloads.js'; @@ -579,6 +580,112 @@ function initializeSmoothSliders(audioPlayer, player) { ); } +// Standalone function to show add to playlist modal +export async function showAddToPlaylistModal(track) { + const modal = document.getElementById('playlist-select-modal'); + const list = document.getElementById('playlist-select-list'); + const cancelBtn = document.getElementById('playlist-select-cancel'); + const overlay = modal.querySelector('.modal-overlay'); + + const renderModal = async () => { + const playlists = await db.getPlaylists(true); + + const trackId = track.id; + const playlistsWithTrack = new Set(); + + for (const playlist of playlists) { + if (playlist.tracks && playlist.tracks.some((t) => t.id == trackId)) { + playlistsWithTrack.add(playlist.id); + } + } + + list.innerHTML = + ` +

    + + Create New Playlist +
    + ` + + playlists + .map((p) => { + const alreadyContains = playlistsWithTrack.has(p.id); + return ` +
    + ${p.name} + ${ + alreadyContains + ? `` + : '' + } +
    + `; + }) + .join(''); + return true; + }; + + if (!(await renderModal())) return; + + const closeModal = () => { + modal.classList.remove('active'); + cleanup(); + }; + + const handleOptionClick = async (e) => { + const removeBtn = e.target.closest('.remove-from-playlist-btn-modal'); + const option = e.target.closest('.modal-option'); + + if (!option) return; + + if (option.classList.contains('create-new-option')) { + closeModal(); + const createModal = document.getElementById('playlist-modal'); + document.getElementById('playlist-modal-title').textContent = 'Create Playlist'; + document.getElementById('playlist-name-input').value = ''; + document.getElementById('playlist-cover-input').value = ''; + createModal.dataset.editingId = ''; + document.getElementById('csv-import-section').style.display = 'none'; + + // Pass track + createModal._pendingTracks = [track]; + + createModal.classList.add('active'); + document.getElementById('playlist-name-input').focus(); + return; + } + + const playlistId = option.dataset.id; + + if (removeBtn) { + e.stopPropagation(); + await db.removeTrackFromPlaylist(playlistId, track.id); + const updatedPlaylist = await db.getPlaylist(playlistId); + syncManager.syncUserPlaylist(updatedPlaylist, 'update'); + showNotification(`Removed from playlist: ${option.querySelector('span').textContent}`); + await renderModal(); + } else { + if (option.classList.contains('already-contains')) return; + + await db.addTrackToPlaylist(playlistId, track); + const updatedPlaylist = await db.getPlaylist(playlistId); + syncManager.syncUserPlaylist(updatedPlaylist, 'update'); + showNotification(`Added to playlist: ${option.querySelector('span').textContent}`); + closeModal(); + } + }; + + const cleanup = () => { + cancelBtn.removeEventListener('click', closeModal); + overlay.removeEventListener('click', closeModal); + list.removeEventListener('click', handleOptionClick); + }; + + cancelBtn.addEventListener('click', closeModal); + overlay.addEventListener('click', closeModal); + list.addEventListener('click', handleOptionClick); + + modal.classList.add('active'); +} + export async function handleTrackAction( action, item, @@ -942,6 +1049,143 @@ export async function handleTrackAction( navigator.clipboard.writeText(url).then(() => { showNotification('Link copied to clipboard!'); }); + } else if (action === 'track-info') { + // Show detailed track info modal + const isTracker = item.isTracker; + let infoHTML = ''; + + if (isTracker && item.trackerInfo) { + // Detailed unreleased/tracker track info + const releaseDate = item.trackerInfo.releaseDate || item.streamStartDate; + const dateDisplay = releaseDate ? new Date(releaseDate).toLocaleDateString() : 'Unknown'; + const addedDate = item.trackerInfo.addedDate ? new Date(item.trackerInfo.addedDate).toLocaleDateString() : 'Unknown'; + + infoHTML = ` +
    +

    ${item.title}

    +
    +
    +

    Unreleased Track

    +
    + +
    + ${item.artists ? `

    Artist: ${Array.isArray(item.artists) ? item.artists.map(a => a.name || a).join(', ') : item.artists}

    ` : ''} + ${item.trackerInfo.artist ? `

    Tracked Artist: ${item.trackerInfo.artist}

    ` : ''} + ${item.trackerInfo.project ? `

    Project: ${item.trackerInfo.project}

    ` : ''} + ${item.trackerInfo.era ? `

    Era: ${item.trackerInfo.era}

    ` : ''} + ${item.trackerInfo.timeline ? `

    Timeline: ${item.trackerInfo.timeline}

    ` : ''} + ${item.trackerInfo.category ? `

    Category: ${item.trackerInfo.category}

    ` : ''} + ${item.trackerInfo.trackNumber ? `

    Track Number: ${item.trackerInfo.trackNumber}

    ` : ''} +

    Duration: ${formatTime(item.duration)}

    + ${releaseDate !== 'Unknown' ? `

    Release Date: ${dateDisplay}

    ` : ''} + ${item.trackerInfo.addedDate ? `

    Added to Tracker: ${addedDate}

    ` : ''} + ${item.trackerInfo.leakedDate ? `

    Leak Date: ${new Date(item.trackerInfo.leakedDate).toLocaleDateString()}

    ` : ''} + ${item.trackerInfo.recordingDate ? `

    Recording Date: ${new Date(item.trackerInfo.recordingDate).toLocaleDateString()}

    ` : ''} +
    + + ${item.trackerInfo.description ? ` +
    +

    Description

    +

    ${item.trackerInfo.description}

    +
    + ` : ''} + + ${item.trackerInfo.notes ? ` +
    +

    Notes

    +

    ${item.trackerInfo.notes}

    +
    + ` : ''} + + ${item.trackerInfo.sourceUrl ? ` +
    +

    Source URL:

    + + ${item.trackerInfo.sourceUrl} + +
    + ` : ''} + + ${item.id ? `

    Track ID: ${item.id}

    ` : ''} +
    + +
    + `; + } else { + // Detailed normal track info + const releaseDate = item.album?.releaseDate || item.streamStartDate; + const dateDisplay = releaseDate ? new Date(releaseDate).toLocaleDateString() : 'Unknown'; + const quality = item.audioQuality || 'Unknown'; + const bitrate = item.bitrate ? `${item.bitrate} kbps` : ''; + + infoHTML = ` +
    +

    ${item.title}

    +
    +
    +

    Artist: ${getTrackArtists(item)}

    +

    Album: ${item.album?.title || 'Unknown'}

    + ${item.album?.artist?.name ? `

    Album Artist: ${item.album.artist.name}

    ` : ''} +

    Release Date: ${dateDisplay}

    +

    Duration: ${formatTime(item.duration)}

    + ${item.trackNumber ? `

    Track Number: ${item.trackNumber}

    ` : ''} + ${item.discNumber ? `

    Disc Number: ${item.discNumber}

    ` : ''} + ${item.version ? `

    Version: ${item.version}

    ` : ''} + ${item.explicit ? `

    Explicit: Yes

    ` : ''} +

    Quality: ${quality} ${bitrate ? `(${bitrate})` : ''}

    +
    + + ${item.credits && item.credits.length > 0 ? ` +
    +

    Credits

    +
    + ${item.credits.map(c => `

    ${c.type}: ${c.name}

    `).join('')} +
    +
    + ` : ''} + + ${item.composers && item.composers.length > 0 ? ` +

    Composers: ${item.composers.map(c => c.name).join(', ')}

    + ` : ''} + + ${item.lyrics?.text ? ` +
    +

    Has Lyrics

    +
    + ` : ''} + + ${item.id ? `

    Track ID: ${item.id}

    ` : ''} + ${item.album?.id ? `

    Album ID: ${item.album.id}

    ` : ''} +
    + +
    + `; + } + + // Create and show modal + const modal = document.createElement('div'); + modal.className = 'modal-overlay'; + modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10000;'; + modal.innerHTML = infoHTML; + modal.onclick = (e) => { + if (e.target === modal) modal.remove(); + }; + document.body.appendChild(modal); + } else if (action === 'open-original-url') { + // Open the original source URL for the track + let url = null; + + if (item.isTracker && item.trackerInfo && item.trackerInfo.sourceUrl) { + url = item.trackerInfo.sourceUrl; + } else if (item.remoteUrl) { + url = item.remoteUrl; + } + + if (url) { + window.open(url, '_blank'); + } else { + showNotification('No original URL available for this track.'); + } } } @@ -961,6 +1205,13 @@ async function updateContextMenuLikeState(contextMenu, contextTrack) { trackMixItem.style.display = hasMix ? 'block' : 'none'; } + // Show/hide "Open Original URL" only for unreleased/tracker tracks + const openOriginalUrlItem = contextMenu.querySelector('li[data-action="open-original-url"]'); + if (openOriginalUrlItem) { + const isUnreleased = contextTrack.isTracker || (contextTrack.trackerInfo && contextTrack.trackerInfo.sourceUrl); + openOriginalUrlItem.style.display = isUnreleased ? 'block' : 'none'; + } + // Filter items based on type const type = contextMenu._contextType || 'track'; contextMenu.querySelectorAll('li[data-action]').forEach((item) => { @@ -1229,7 +1480,11 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen if (link) { e.stopPropagation(); const artistId = link.dataset.artistId; - if (artistId) { + const trackerSheetId = link.dataset.trackerSheetId; + if (trackerSheetId) { + // Navigate to tracker artist page + navigate(`/unreleased/${trackerSheetId}`); + } else if (artistId) { navigate(`/artist/${artistId}`); } return; @@ -1237,8 +1492,14 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen // Fallback for non-link clicks (e.g. separators) or single artist legacy const track = player.currentTrack; - if (track?.artist?.id) { - navigate(`/artist/${track.artist.id}`); + if (track) { + // Check if this is a tracker track + const isTracker = track.isTracker || (track.id && String(track.id).startsWith('tracker-')); + if (isTracker && track.trackerInfo?.sheetId) { + navigate(`/unreleased/${track.trackerInfo.sheetId}`); + } else if (track.artist?.id) { + navigate(`/artist/${track.artist.id}`); + } } }); diff --git a/js/lastfm.js b/js/lastfm.js index 6666ac6..27c8709 100644 --- a/js/lastfm.js +++ b/js/lastfm.js @@ -180,9 +180,10 @@ export class LastFMScrobbler { this.clearScrobbleTimer(); try { + const scrobbleTitle = track.cleanTitle || track.title; const params = { artist: this._getScrobbleArtist(track), - track: track.title, + track: scrobbleTitle, }; if (track.album?.title) { @@ -199,7 +200,7 @@ export class LastFMScrobbler { await this.makeRequest('track.updateNowPlaying', params, true); - console.log('Now playing updated:', track.title); + console.log('Now playing updated:', scrobbleTitle); this.scrobbleThreshold = Math.min(track.duration / 2, 240); this.scheduleScrobble(this.scrobbleThreshold * 1000); @@ -228,10 +229,11 @@ export class LastFMScrobbler { try { const timestamp = Math.floor(Date.now() / 1000); + const scrobbleTitle = this.currentTrack.cleanTitle || this.currentTrack.title; const params = { artist: this._getScrobbleArtist(this.currentTrack), - track: this.currentTrack.title, + track: scrobbleTitle, timestamp: timestamp, }; @@ -250,7 +252,7 @@ export class LastFMScrobbler { await this.makeRequest('track.scrobble', params, true); this.hasScrobbled = true; - console.log('Scrobbled:', this.currentTrack.title); + console.log('Scrobbled:', this.currentTrack.cleanTitle || this.currentTrack.title); } catch (error) { console.error('Failed to scrobble:', error); } diff --git a/js/player.js b/js/player.js index aa31549..805d7bb 100644 --- a/js/player.js +++ b/js/player.js @@ -356,6 +356,32 @@ export class Player { this.applyReplayGain(); this.audio.src = streamUrl; + + // Wait for audio to be ready before playing (prevents restart issues with blob URLs) + if (isTracker) { + await new Promise((resolve, reject) => { + const onCanPlay = () => { + this.audio.removeEventListener('canplay', onCanPlay); + this.audio.removeEventListener('error', onError); + resolve(); + }; + const onError = (e) => { + this.audio.removeEventListener('canplay', onCanPlay); + this.audio.removeEventListener('error', onError); + reject(e); + }; + this.audio.addEventListener('canplay', onCanPlay); + this.audio.addEventListener('error', onError); + + // Timeout after 10 seconds + setTimeout(() => { + this.audio.removeEventListener('canplay', onCanPlay); + this.audio.removeEventListener('error', onError); + reject(new Error('Timeout waiting for audio to load')); + }, 10000); + }); + } + if (startTime > 0) { this.audio.currentTime = startTime; } diff --git a/js/router.js b/js/router.js index f5a2f8a..9d31e50 100644 --- a/js/router.js +++ b/js/router.js @@ -52,7 +52,11 @@ export function createRouter(ui) { await ui.renderMixPage(param); break; case 'track': - await ui.renderTrackPage(param); + if (param.startsWith('tracker-')) { + await ui.renderTrackerTrackPage(param); + } else { + await ui.renderTrackPage(param); + } break; case 'library': await ui.renderLibraryPage(); @@ -60,6 +64,20 @@ export function createRouter(ui) { case 'recent': await ui.renderRecentPage(); break; + case 'unreleased': + if (param) { + const parts = param.split('/'); + const sheetId = parts[0]; + const projectName = parts[1] ? decodeURIComponent(parts[1]) : null; + if (projectName) { + await ui.renderTrackerProjectPage(sheetId, projectName); + } else { + await ui.renderTrackerArtistPage(sheetId); + } + } else { + await ui.renderUnreleasedPage(); + } + break; case 'home': await ui.renderHomePage(); break; diff --git a/js/tracker.js b/js/tracker.js index 9e30cf2..fc2c00a 100644 --- a/js/tracker.js +++ b/js/tracker.js @@ -1,12 +1,53 @@ //js/tracker.js -import { escapeHtml, SVG_DOWNLOAD } from './utils.js'; +import { escapeHtml, SVG_DOWNLOAD, SVG_MENU, SVG_PLAY, trackDataStore, formatTime, SVG_HEART } from './utils.js'; +import { navigate } from './router.js'; let artistsData = []; +let artistsPopularity = new Map(); // name -> popularity score let globalPlayer = null; +// Map to store artist info keyed by sheetId for quick lookup +const artistBySheetId = new Map(); + +// Store all songs for search functionality +let allSongsCache = new Map(); // sheetId -> {era, songs} + +// Normalize artist name for image URL (no spaces, no special chars, all lowercase) +function normalizeArtistName(name) { + return name.toLowerCase().replace(/[^a-z0-9]/g, ''); +} + +// Clean song title for scrobbling (remove producer credits) +function cleanSongTitle(title) { + if (!title) return ''; + // Remove (prod. ...), (produced by ...), [prod. ...], etc. + return title + .replace(/\s*[\(\[]\s*prod\.?\s+[^\)\]]+[\)\]]/gi, '') + .replace(/\s*[\(\[]\s*produced\s+by\s+[^\)\]]+[\)\]]/gi, '') + .replace(/\s+/g, ' ') + .trim(); +} + +async function loadArtistsPopularity() { + try { + const response = await fetch('https://trends.artistgrid.cx'); + if (!response.ok) return; + const data = await response.json(); + if (data.results) { + data.results.forEach((artist, index) => { + // Store popularity score based on visitors and position + const score = artist.visitors * (1 - index / data.results.length); + artistsPopularity.set(artist.name, score); + }); + } + } catch (e) { + console.log('Could not load popularity data:', e); + } +} + async function loadArtistsData() { try { - const response = await fetch('/artists.ndjson'); + const response = await fetch('https://sheets.artistgrid.cx/artists.ndjson'); if (!response.ok) throw new Error('Network response was not ok'); const text = await response.text(); artistsData = text @@ -21,8 +62,24 @@ async function loadArtistsData() { } }) .filter((item) => item !== null); + + // Sort by popularity if available + artistsData.sort((a, b) => { + const popA = artistsPopularity.get(a.name) || 0; + const popB = artistsPopularity.get(b.name) || 0; + return popB - popA; + }); + + // Build sheetId lookup map + artistBySheetId.clear(); + artistsData.forEach((artist) => { + const sheetId = getSheetId(artist.url); + if (sheetId) { + artistBySheetId.set(sheetId, artist); + } + }); } catch (e) { - console.error('Failed to load Artists LIst:', e); + console.error('Failed to load Artists List:', e); } } @@ -34,9 +91,7 @@ function getSheetId(url) { async function fetchTrackerData(sheetId) { try { - const response = await fetch( - `https://corsproxy.io/?${encodeURIComponent(`https://tracker.israeli.ovh/get/${sheetId}`)}` - ); + const response = await fetch(`https://tracker.israeli.ovh/get/${sheetId}`); if (!response.ok) return null; return await response.json(); } catch (e) { @@ -56,6 +111,8 @@ function parseDuration(durationStr) { function getDirectUrl(rawUrl) { if (!rawUrl) return null; + + // Only return URLs that are known to be direct audio links if (rawUrl.includes('pillows.su/f/')) { const match = rawUrl.match(/pillows\.su\/f\/([a-f0-9]+)/); if (match) return `https://api.pillows.su/api/download/${match[1]}`; @@ -63,462 +120,875 @@ function getDirectUrl(rawUrl) { const match = rawUrl.match(/music\.froste\.lol\/song\/([a-f0-9]+)/); if (match) return `https://music.froste.lol/song/${match[1]}/download`; } - return rawUrl; + + // For other URLs, check if they look like direct audio files + const audioExtensions = ['.mp3', '.m4a', '.flac', '.wav', '.ogg', '.aac']; + const hasAudioExt = audioExtensions.some((ext) => rawUrl.toLowerCase().includes(ext)); + + if (hasAudioExt) { + return rawUrl; + } + + // Return null for URLs that don't look like direct audio files + return null; } -function renderLoadButton(container, sheetId, artistName) { - container.innerHTML = ''; - container.style.display = 'block'; +// Convert tracker song to standard track format +function createTrackFromSong(song, era, artistName, index, sheetId = '') { + const isValidUrl = (u) => u && typeof u === 'string' && u.trim().length > 0; + const rawUrl = (isValidUrl(song.url) ? song.url : null) || (song.urls ? song.urls.find(isValidUrl) : null); + const directUrl = getDirectUrl(rawUrl); + const duration = parseDuration(song.track_length); + const cleanTitle = cleanSongTitle(song.name); - const wrapper = document.createElement('div'); - wrapper.style.textAlign = 'center'; - wrapper.style.padding = '2rem'; + return { + id: `tracker-${sheetId}-${era.name}-${index}`, + title: song.name, + cleanTitle: cleanTitle, + artist: { + name: artistName, + }, + artists: [ + { + name: artistName, + }, + ], + album: { + title: era.name, + cover: era.image, + }, + duration: duration, + trackNumber: index + 1, + isTracker: true, + audioUrl: directUrl, + remoteUrl: directUrl, + explicit: false, + unavailable: !directUrl, + // Additional tracker-specific data for context menu + trackerInfo: { + sheetId: sheetId, + timeline: era.timeline, + description: song.desc || song.description || '', + sourceUrl: rawUrl, + category: song.category || '', + }, + }; +} - const button = document.createElement('button'); - button.className = 'btn-primary'; - button.textContent = 'Load Unreleased Projects'; - button.style.fontSize = '1.1rem'; - button.style.padding = '1rem 2rem'; +// Create track item HTML for tracker songs - EXACTLY like normal tracks +function createTrackerTrackItemHTML(track, index) { + const isUnavailable = track.unavailable; + const trackNumberHTML = `
    ${index + 1}
    `; - button.onclick = async () => { - button.textContent = 'Loading...'; - button.disabled = true; + const actionsHTML = isUnavailable + ? '' + : ` + + `; - const trackerData = await fetchTrackerData(sheetId); - if (trackerData) { - renderTracker(trackerData, container, artistName); - } else { - button.textContent = 'Failed to load'; - setTimeout(() => { - button.disabled = false; - button.textContent = 'Load Unreleased Projects'; - }, 2000); + return ` +
    + ${trackNumberHTML} +
    +
    +
    ${escapeHtml(track.title)}
    +
    ${escapeHtml(track.artist.name)}
    +
    +
    +
    ${isUnavailable ? '--:--' : formatTime(track.duration)}
    +
    + ${actionsHTML} +
    +
    + `; +} + +// Render tracks for a tracker era - EXACTLY like normal album track list +function renderTrackerTracks(container, tracks) { + const fragment = document.createDocumentFragment(); + const tempDiv = document.createElement('div'); + + // Add header like normal albums + tempDiv.innerHTML = ` +
    + # + Title + Duration + Menu +
    + `; + + // Add tracks + const tracksHTML = tracks.map((track, i) => createTrackerTrackItemHTML(track, i)).join(''); + + tempDiv.insertAdjacentHTML('beforeend', tracksHTML); + + // Bind data to elements + Array.from(tempDiv.children).forEach((element, index) => { + if (index === 0) return; // Skip header + const track = tracks[index - 1]; + if (element && track) { + trackDataStore.set(element, track); } + }); + + while (tempDiv.firstChild) { + fragment.appendChild(tempDiv.firstChild); + } + + container.innerHTML = ''; + container.appendChild(fragment); +} + +// Create project card HTML - EXACTLY like album cards +export function createProjectCardHTML(era, artist, sheetId, trackCount) { + const playBtnHTML = ` + + + `; + + return ` +
    +
    + ${escapeHtml(era.name)} + + ${playBtnHTML} +
    +
    +

    ${escapeHtml(era.name)}

    +

    ${era.timeline || 'Unreleased'} • ${trackCount} tracks

    +
    +
    + `; +} + +// Render tracker artist page (grid of projects) +export async function renderTrackerArtistPage(sheetId, container) { + if (!artistsData.length) { + await loadArtistsData(); + } + + // Find artist by sheetId + const artist = artistBySheetId.get(sheetId); + if (!artist) { + container.innerHTML = '

    Artist not found.

    '; + return; + } + + // Fetch tracker data + const trackerData = await fetchTrackerData(sheetId); + if (!trackerData || !trackerData.eras) { + container.innerHTML = '

    Failed to load tracker data.

    '; + return; + } + + // Cache songs for search + allSongsCache.set(sheetId, { artist, eras: trackerData.eras }); + + const eras = Object.values(trackerData.eras); + + // Set up header + const imageEl = document.getElementById('tracker-artist-detail-image'); + const nameEl = document.getElementById('tracker-artist-detail-name'); + const metaEl = document.getElementById('tracker-artist-detail-meta'); + const projectsContainer = document.getElementById('tracker-artist-projects-container'); + const playBtn = document.getElementById('play-tracker-artist-btn'); + const downloadBtn = document.getElementById('download-tracker-artist-btn'); + + const normalizedName = normalizeArtistName(artist.name); + imageEl.src = `https://assets.artistgrid.cx/${normalizedName}.webp`; + imageEl.onerror = function () { + this.src = 'assets/logo.svg'; + }; + nameEl.textContent = artist.name; + metaEl.innerHTML = `${eras.length} unreleased projects`; + + // Set up shuffle play button + if (playBtn) { + playBtn.onclick = async () => { + let allTracks = []; + eras.forEach((era) => { + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + songs.forEach((song, index) => { + const track = createTrackFromSong(song, era, artist.name, allTracks.length, sheetId); + allTracks.push(track); + }); + } + }); + } + }); + + const availableTracks = allTracks.filter((t) => !t.unavailable); + if (availableTracks.length > 0) { + const shuffled = [...availableTracks].sort(() => Math.random() - 0.5); + globalPlayer.setQueue(shuffled, 0); + globalPlayer.playTrackFromQueue(); + } + }; + } + + // Set up download button + if (downloadBtn) { + downloadBtn.onclick = () => { + alert('Bulk download coming soon! You can download individual tracks from the project pages.'); + }; + } + + // Add search bar (only if not already present) + let searchContainer = document.getElementById('unreleased-search-container'); + if (!searchContainer) { + searchContainer = document.createElement('div'); + searchContainer.id = 'unreleased-search-container'; + searchContainer.style.cssText = 'margin: 1rem 0; padding: 0 1rem;'; + searchContainer.innerHTML = ` + + `; + projectsContainer.parentNode.insertBefore(searchContainer, projectsContainer); + } + + // Render projects as cards + projectsContainer.innerHTML = ''; + projectsContainer.className = 'card-grid'; + + eras.forEach((era) => { + let trackCount = 0; + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + trackCount += songs.length; + } + }); + } + + if (trackCount === 0) return; + + const cardHTML = createProjectCardHTML(era, artist, sheetId, trackCount); + projectsContainer.insertAdjacentHTML('beforeend', cardHTML); + + const card = projectsContainer.lastElementChild; + card._eraData = era; + card._artistName = artist.name; + card._sheetId = sheetId; + + card.onclick = (e) => { + if (e.target.closest('.card-play-btn')) { + e.stopPropagation(); + let eraTracks = []; + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + songs.forEach((song, index) => { + const track = createTrackFromSong(song, era, artist.name, eraTracks.length, sheetId); + eraTracks.push(track); + }); + } + }); + } + const availableTracks = eraTracks.filter((t) => !t.unavailable); + if (availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, 0); + globalPlayer.playTrackFromQueue(); + } + } else if (e.target.closest('.card-menu-btn')) { + e.stopPropagation(); + } else { + navigate(`/unreleased/${sheetId}/${encodeURIComponent(era.name)}`); + } + }; + }); + + // Add search functionality + const searchInput = document.getElementById('unreleased-search-input'); + searchInput.addEventListener('input', (e) => { + const query = e.target.value.toLowerCase().trim(); + if (!query) { + // Reset view + projectsContainer.style.display = ''; + document.getElementById('unreleased-search-results')?.remove(); + return; + } + + // Search through all songs + let matches = []; + eras.forEach((era) => { + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + songs.forEach((song, index) => { + if (song.name.toLowerCase().includes(query)) { + matches.push({ song, era, index }); + } + }); + } + }); + } + }); + + // Show results + projectsContainer.style.display = 'none'; + let resultsContainer = document.getElementById('unreleased-search-results'); + if (!resultsContainer) { + resultsContainer = document.createElement('div'); + resultsContainer.id = 'unreleased-search-results'; + projectsContainer.parentNode.insertBefore(resultsContainer, projectsContainer.nextSibling); + } + + if (matches.length === 0) { + resultsContainer.innerHTML = + '

    No songs found.

    '; + } else { + resultsContainer.innerHTML = ` +

    Search Results (${matches.length} songs)

    +
    + `; + + const tracklist = document.getElementById('unreleased-search-tracklist'); + const searchTracks = matches.map((m, i) => createTrackFromSong(m.song, m.era, artist.name, i, sheetId)); + renderTrackerTracks(tracklist, searchTracks); + + // Add click handlers + tracklist.querySelectorAll('.track-item').forEach((item) => { + const track = trackDataStore.get(item); + if (!track || track.unavailable) return; + + item.onclick = (e) => { + if (e.target.closest('.track-menu-btn')) return; + + const availableTracks = searchTracks.filter((t) => !t.unavailable); + const trackIndex = availableTracks.findIndex((t) => t.id === track.id); + if (trackIndex >= 0 && availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, trackIndex); + globalPlayer.playTrackFromQueue(); + } + }; + }); + } + }); + + document.title = `${artist.name} - Unreleased`; +} + +// Render individual tracker project page +export async function renderTrackerProjectPage(sheetId, projectName, container, ui) { + if (!artistsData.length) { + await loadArtistsData(); + } + + const artist = artistBySheetId.get(sheetId); + if (!artist) { + container.innerHTML = '

    Project not found.

    '; + return; + } + + const trackerData = await fetchTrackerData(sheetId); + if (!trackerData || !trackerData.eras) { + container.innerHTML = '

    Failed to load project data.

    '; + return; + } + + const era = Object.values(trackerData.eras).find((e) => e.name === projectName); + if (!era) { + container.innerHTML = '

    Project not found.

    '; + return; + } + + // Collect all tracks for this era + let eraTracks = []; + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + songs.forEach((song, index) => { + const track = createTrackFromSong(song, era, artist.name, eraTracks.length, sheetId); + eraTracks.push(track); + }); + } + }); + } + + const availableCount = eraTracks.filter((t) => !t.unavailable).length; + + // Use the album page template structure + const imageEl = document.getElementById('album-detail-image'); + const titleEl = document.getElementById('album-detail-title'); + const metaEl = document.getElementById('album-detail-meta'); + const prodEl = document.getElementById('album-detail-producer'); + const tracklistContainer = document.getElementById('album-detail-tracklist'); + const playBtn = document.getElementById('play-album-btn'); + const shuffleBtn = document.getElementById('shuffle-album-btn'); + const downloadBtn = document.getElementById('download-album-btn'); + const likeBtn = document.getElementById('like-album-btn'); + const mixBtn = document.getElementById('album-mix-btn'); + const addToPlaylistBtn = document.getElementById('add-album-to-playlist-btn'); + + // Set album page content + imageEl.src = era.image || 'assets/logo.svg'; + imageEl.style.backgroundColor = ''; + imageEl.onerror = function () { + this.src = 'assets/logo.svg'; }; - wrapper.appendChild(button); - container.appendChild(wrapper); + titleEl.textContent = era.name; + metaEl.innerHTML = `${era.timeline || 'Unreleased'} • ${eraTracks.length} tracks • ${availableCount} available`; + prodEl.innerHTML = `By ${artist.name}`; + + // Setup buttons + if (playBtn) { + playBtn.innerHTML = `${SVG_PLAY}Play Project`; + playBtn.onclick = () => { + const availableTracks = eraTracks.filter((t) => !t.unavailable); + if (availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, 0); + globalPlayer.playTrackFromQueue(); + } + }; + } + + if (shuffleBtn) { + shuffleBtn.onclick = () => { + const availableTracks = eraTracks.filter((t) => !t.unavailable); + if (availableTracks.length > 0) { + const shuffled = [...availableTracks].sort(() => Math.random() - 0.5); + globalPlayer.setQueue(shuffled, 0); + globalPlayer.playTrackFromQueue(); + } + }; + } + + if (downloadBtn) { + downloadBtn.innerHTML = `Download`; + downloadBtn.onclick = () => { + alert('Project download coming soon! You can download individual tracks from the menu.'); + }; + } + + if (likeBtn) likeBtn.style.display = 'none'; + if (mixBtn) mixBtn.style.display = 'none'; + if (addToPlaylistBtn) addToPlaylistBtn.style.display = 'none'; + + // Render tracks + renderTrackerTracks(tracklistContainer, eraTracks); + + // Add click handlers for tracks + tracklistContainer.querySelectorAll('.track-item').forEach((item) => { + const track = trackDataStore.get(item); + if (!track || track.unavailable) return; + + item.onclick = (e) => { + if (e.target.closest('.track-menu-btn')) return; + + const availableTracks = eraTracks.filter((t) => !t.unavailable); + const trackIndex = availableTracks.findIndex((t) => t.id === track.id); + if (trackIndex >= 0 && availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, trackIndex); + globalPlayer.playTrackFromQueue(); + } + }; + }); + + // Show other projects as recommendations + const moreAlbumsSection = document.getElementById('album-section-more-albums'); + const moreAlbumsContainer = document.getElementById('album-detail-more-albums'); + const moreAlbumsTitle = document.getElementById('album-title-more-albums'); + + if (moreAlbumsSection && moreAlbumsContainer) { + const otherEras = Object.values(trackerData.eras).filter((e) => e.name !== projectName); + if (otherEras.length > 0) { + moreAlbumsContainer.innerHTML = otherEras + .map((e) => { + let trackCount = 0; + if (e.data) { + Object.values(e.data).forEach((songs) => { + if (songs && songs.length) trackCount += songs.length; + }); + } + return createProjectCardHTML(e, artist, sheetId, trackCount); + }) + .join(''); + + if (moreAlbumsTitle) { + moreAlbumsTitle.textContent = `More unreleased from ${artist.name}`; + } + moreAlbumsSection.style.display = 'block'; + + // Add click handlers for recommendation cards + moreAlbumsContainer.querySelectorAll('.card').forEach((card) => { + const eraName = decodeURIComponent(card.dataset.trackerProjectId); + const era = trackerData.eras[eraName]; + if (!era) return; + + let trackCount = 0; + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) trackCount += songs.length; + }); + } + + card.onclick = (e) => { + if (e.target.closest('.card-play-btn')) { + e.stopPropagation(); + let otherEraTracks = []; + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + songs.forEach((song, index) => { + const track = createTrackFromSong( + song, + era, + artist.name, + otherEraTracks.length, + sheetId + ); + otherEraTracks.push(track); + }); + } + }); + } + const availableTracks = otherEraTracks.filter((t) => !t.unavailable); + if (availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, 0); + globalPlayer.playTrackFromQueue(); + } + } else if (e.target.closest('.card-menu-btn')) { + e.stopPropagation(); + } else { + navigate(`/unreleased/${sheetId}/${encodeURIComponent(era.name)}`); + } + }; + }); + } else { + moreAlbumsSection.style.display = 'none'; + } + } + + // Hide other sections that don't apply + const epsSection = document.getElementById('album-section-eps'); + const similarArtistsSection = document.getElementById('album-section-similar-artists'); + const similarAlbumsSection = document.getElementById('album-section-similar-albums'); + + if (epsSection) epsSection.style.display = 'none'; + if (similarArtistsSection) similarArtistsSection.style.display = 'none'; + if (similarAlbumsSection) similarAlbumsSection.style.display = 'none'; + + document.title = `${era.name} - ${artist.name}`; } -function renderTracker(trackerData, container, artistName) { +// Render the unreleased page with all artists +export async function renderUnreleasedPage(container) { container.innerHTML = ` -

    Unreleased Projects

    +

    Unreleased Music

    Unreleased Songs & Info Provided By ArtistGrid. Consider Donating to Them.

    +
    + +
    +
    + `; - const erasContainer = document.createElement('div'); - erasContainer.className = 'card-grid'; - erasContainer.style.opacity = '0'; - erasContainer.style.transform = 'translateY(20px)'; - erasContainer.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; - container.appendChild(erasContainer); + const gridContainer = document.getElementById('unreleased-artists-grid'); + const searchInput = document.getElementById('unreleased-search-input'); + const noResults = document.getElementById('unreleased-no-results'); - if (!trackerData.eras) return; + // Store all artist cards for filtering + let allArtistCards = []; - Object.values(trackerData.eras).forEach((era) => { - const card = document.createElement('div'); - card.className = 'card'; - card.style.cursor = 'pointer'; - - const imgWrapper = document.createElement('div'); - imgWrapper.className = 'card-image-wrapper'; - - const img = document.createElement('img'); - img.className = 'card-image'; - img.src = era.image ? `https://corsproxy.io/?${encodeURIComponent(era.image)}` : 'assets/logo.svg'; - img.alt = era.name; - img.loading = 'lazy'; - - imgWrapper.appendChild(img); - - const title = document.createElement('div'); - title.className = 'card-title'; - title.textContent = era.name; - - const subtitle = document.createElement('div'); - subtitle.className = 'card-subtitle'; - subtitle.textContent = era.timeline || 'Unreleased'; - - card.appendChild(imgWrapper); - card.appendChild(title); - card.appendChild(subtitle); - - card.onclick = () => showEraSongs(era, artistName); - - erasContainer.appendChild(card); - }); - - requestAnimationFrame(() => { - erasContainer.style.opacity = '1'; - erasContainer.style.transform = 'translateY(0)'; - }); -} - -function showEraSongs(era, artistName) { - const modal = document.getElementById('tracker-modal'); - const overlay = modal.querySelector('.modal-overlay'); - const closeBtn = document.getElementById('close-tracker-modal'); - - const img = document.getElementById('tracker-header-image'); - const title = document.getElementById('tracker-header-title'); - const meta = document.getElementById('tracker-header-meta'); - - img.src = era.image ? `https://corsproxy.io/?${encodeURIComponent(era.image)}` : 'assets/logo.svg'; - img.alt = era.name; - title.textContent = era.name; - meta.textContent = `${artistName} • ${era.timeline || 'Unreleased'}`; - - const trackList = document.getElementById('tracker-tracklist'); - const filterContainer = document.getElementById('tracker-filters'); - - filterContainer.innerHTML = ''; - while (trackList.lastElementChild && !trackList.lastElementChild.classList.contains('track-list-header')) { - trackList.removeChild(trackList.lastElementChild); + if (artistsData.length === 0) { + await loadArtistsPopularity(); + await loadArtistsData(); } - const filters = [ - { label: 'All', emoji: '' }, - { label: 'Best Of', emoji: '⭐' }, - { label: 'Special', emoji: '✨' }, - { label: 'Grails', emoji: '🏆' }, - { label: 'Wanted', emoji: '🥇' }, - { label: 'Worst Of', emoji: '🗑️' }, - ]; + gridContainer.innerHTML = ''; + allArtistCards = []; - let activeFilter = ''; + artistsData.forEach((artist) => { + const sheetId = getSheetId(artist.url); + if (!sheetId) return; - const applyFilter = () => { - const items = trackList.querySelectorAll('.track-item'); + const artistCard = document.createElement('div'); + artistCard.className = 'card'; + artistCard.style.cursor = 'pointer'; + artistCard.dataset.artistName = artist.name.toLowerCase(); - items.forEach((item) => { - const titleEl = item.querySelector('.title'); - if (titleEl) { - const title = titleEl.textContent.trim(); - if (activeFilter && !title.startsWith(activeFilter)) { - item.style.display = 'none'; - } else { - item.style.display = ''; - } - } - }); + const normalizedName = normalizeArtistName(artist.name); + const coverImage = `https://assets.artistgrid.cx/${normalizedName}.webp`; - const categories = trackList.querySelectorAll('h4'); - categories.forEach((cat) => { - let next = cat.nextElementSibling; - let hasVisibleItems = false; + artistCard.innerHTML = ` +
    + ${artist.name} +
    +
    +

    ${artist.name}

    +

    Unreleased Music

    +
    + `; - while (next && next.tagName !== 'H4') { - if (next.classList.contains('track-item') && next.style.display !== 'none') { - hasVisibleItems = true; - break; - } - next = next.nextElementSibling; - } - - cat.style.display = hasVisibleItems ? 'block' : 'none'; - }); - }; - - filters.forEach((filter) => { - const btn = document.createElement('button'); - btn.className = 'btn-secondary'; - btn.textContent = filter.emoji ? `${filter.emoji} ${filter.label}` : filter.label; - btn.style.fontSize = '0.85rem'; - btn.style.padding = '0.4rem 0.8rem'; - btn.style.borderRadius = '2rem'; - - if (filter.emoji === '') { - btn.style.backgroundColor = 'var(--primary)'; - btn.style.color = 'var(--primary-foreground)'; - } - - btn.onclick = () => { - Array.from(filterContainer.children).forEach((b) => { - b.style.backgroundColor = ''; - b.style.color = ''; - }); - btn.style.backgroundColor = 'var(--primary)'; - btn.style.color = 'var(--primary-foreground)'; - - activeFilter = filter.emoji; - applyFilter(); + artistCard.onclick = () => { + navigate(`/unreleased/${sheetId}`); }; - filterContainer.appendChild(btn); + gridContainer.appendChild(artistCard); + allArtistCards.push(artistCard); }); - let globalIndex = 1; - - if (era.data) { - Object.entries(era.data).forEach(([category, songs]) => { - if (!songs || songs.length === 0) return; - - const catTitle = document.createElement('h4'); - catTitle.textContent = category; - catTitle.style.padding = '1rem 0.5rem 0.5rem'; - catTitle.style.color = 'var(--highlight)'; - catTitle.style.fontWeight = '600'; - catTitle.style.borderBottom = '1px solid var(--border)'; - catTitle.style.marginBottom = '0.5rem'; - trackList.appendChild(catTitle); - - const isValidUrl = (u) => u && typeof u === 'string' && u.trim().length > 0; - - songs.forEach((song) => { - const trackItem = document.createElement('div'); - trackItem.className = 'track-item'; - - trackItem.innerHTML = ` -
    ${globalIndex++}
    -
    -
    -
    ${escapeHtml(song.name)}
    -
    ${escapeHtml(song.extra || artistName || document.getElementById('artist-detail-name')?.textContent || 'Unknown Artist')}
    -
    -
    -
    ${song.track_length || '--:--'}
    -
    - -
    - `; - - const hasValidUrl = isValidUrl(song.url) || (song.urls && song.urls.some(isValidUrl)); - - trackItem.oncontextmenu = (e) => { - if (!hasValidUrl) return; - e.preventDefault(); - const contextMenu = document.getElementById('context-menu'); - if (contextMenu) { - const rawUrl = - (isValidUrl(song.url) ? song.url : null) || (song.urls ? song.urls.find(isValidUrl) : null); - const directUrl = getDirectUrl(rawUrl); - - const track = { - id: `tracker-${song.name}`, - title: song.name, - artist: { - name: - artistName || - document.getElementById('artist-detail-name')?.textContent || - 'Unknown Artist', - }, - artists: [ - { - name: - artistName || - document.getElementById('artist-detail-name')?.textContent || - 'Unknown Artist', - }, - ], - album: { - title: era.name, - cover: era.image, - }, - duration: parseDuration(song.track_length), - isTracker: true, - audioUrl: directUrl, - remoteUrl: directUrl, - }; - - contextMenu._contextTrack = track; - - ['go-to-album', 'go-to-artist', 'toggle-like', 'download', 'track-mix'].forEach((action) => { - const item = contextMenu.querySelector(`[data-action="${action}"]`); - if (item) item.style.display = 'none'; - }); - - let left = e.pageX; - let top = e.pageY; - if (left + 160 > window.innerWidth) left = window.innerWidth - 170; - if (top + 200 > window.innerHeight) top = e.pageY - 200; - - contextMenu.style.left = `${left}px`; - contextMenu.style.top = `${top}px`; - contextMenu.style.display = 'block'; - } - }; - - if (hasValidUrl) { - trackItem.onclick = async () => { - if (song.track_length === '-') { - const targetUrl = song.urls && song.urls.length > 0 ? song.urls[0] : song.url; - if (targetUrl) window.open(targetUrl, '_blank'); - return; - } - - if (trackItem.classList.contains('loading')) return; - - document.body.style.cursor = 'wait'; - trackItem.classList.add('loading'); - const trackNumEl = trackItem.querySelector('.track-number'); - const originalNum = trackNumEl.textContent; - trackNumEl.innerHTML = - ''; - - let urlsToTry = []; - if (isValidUrl(song.url)) { - urlsToTry.push(song.url); - } - if (song.urls) { - urlsToTry.push(...song.urls.filter(isValidUrl)); - } - - let audioUrl = null; - let successfulUrl = null; - - for (let rawUrl of urlsToTry) { - console.log(`Trying: ${rawUrl}`); - - let downloadUrl = rawUrl; - - if (rawUrl.includes('pillows.su/f/')) { - const match = rawUrl.match(/pillows\.su\/f\/([a-f0-9]+)/); - if (match) { - downloadUrl = `https://api.pillows.su/api/download/${match[1]}`; - } - } else if (rawUrl.includes('music.froste.lol/song/')) { - const match = rawUrl.match(/music\.froste\.lol\/song\/([a-f0-9]+)/); - if (match) { - downloadUrl = `https://music.froste.lol/song/${match[1]}/download`; - } - } - - try { - console.log(`Fetching: ${downloadUrl}`); - const response = await fetch(downloadUrl); - - if (response.ok) { - const contentType = response.headers.get('content-type') || ''; - if ( - contentType.includes('audio/') || - contentType.includes('mpeg') || - contentType.includes('octet-stream') - ) { - const arrayBuffer = await response.arrayBuffer(); - if (arrayBuffer.byteLength > 1000) { - const blob = new Blob([arrayBuffer], { type: 'audio/mpeg' }); - audioUrl = URL.createObjectURL(blob); - successfulUrl = downloadUrl; - console.log(`✓ Success (${(arrayBuffer.byteLength / 1024).toFixed(0)}KB)`); - break; - } - } - } - } catch (e) { - console.log(`Download from ${downloadUrl} failed:`, e.message); - } - } - - document.body.style.cursor = 'default'; - trackItem.classList.remove('loading'); - trackNumEl.textContent = originalNum; - - if (!audioUrl) { - alert( - `Unable to load this track! :( The source may be unavailable.\n\nTried ${urlsToTry.length} URL(s)` - ); - return; - } - - if (globalPlayer) { - const track = { - id: `tracker-${song.name}`, - title: song.name, - artist: { - name: - artistName || - document.getElementById('artist-detail-name')?.textContent || - 'Unknown Artist', - }, - artists: [ - { - name: - artistName || - document.getElementById('artist-detail-name')?.textContent || - 'Unknown Artist', - }, - ], - album: { - title: era.name, - cover: era.image, - }, - duration: parseDuration(song.track_length), - isTracker: true, - audioUrl: audioUrl, - remoteUrl: - successfulUrl || - (urlsToTry.length > 0 ? getDirectUrl(urlsToTry[0]) : null) || - getDirectUrl(song.url), - }; - - globalPlayer.setQueue([track], 0); - document.getElementById('shuffle-btn')?.classList.remove('active'); - globalPlayer.playTrackFromQueue(); - } - }; - - const downloadBtn = trackItem.querySelector('.track-action-btn'); - if (downloadBtn) { - downloadBtn.onclick = (e) => { - e.stopPropagation(); - alert('Download not available for tracker songs yet.'); - }; - } - } else { - trackItem.classList.add('unavailable'); - trackItem.style.opacity = '0.5'; - trackItem.style.cursor = 'default'; - } - - trackList.appendChild(trackItem); - }); - }); + if (artistsData.length === 0) { + gridContainer.innerHTML = + '

    No unreleased music data available.

    '; } - modal.classList.add('active'); + // Setup search functionality + if (searchInput) { + searchInput.addEventListener('input', (e) => { + const query = e.target.value.toLowerCase().trim(); + let visibleCount = 0; - const closeModal = () => modal.classList.remove('active'); - overlay.onclick = closeModal; - closeBtn.onclick = closeModal; + allArtistCards.forEach((card) => { + const artistName = card.dataset.artistName; + if (artistName.includes(query)) { + card.style.display = ''; + visibleCount++; + } else { + card.style.display = 'none'; + } + }); + + // Show/hide no results message + if (noResults) { + noResults.style.display = visibleCount === 0 && query ? 'block' : 'none'; + } + }); + } +} + +// Render track page for unreleased songs +export async function renderTrackerTrackPage(trackId, container, ui) { + // Parse track ID: tracker-{sheetId}-{eraName}-{index} + const parts = trackId.split('-'); + if (parts.length < 4) { + container.innerHTML = '

    Invalid track ID.

    '; + return; + } + + // Reconstruct sheetId (might contain hyphens) + const sheetId = parts[1]; + const eraName = decodeURIComponent(parts.slice(2, -1).join('-')); + const trackIndex = parseInt(parts[parts.length - 1]); + + if (!artistsData.length) { + await loadArtistsData(); + } + + const artist = artistBySheetId.get(sheetId); + if (!artist) { + container.innerHTML = '

    Artist not found.

    '; + return; + } + + const trackerData = await fetchTrackerData(sheetId); + if (!trackerData || !trackerData.eras) { + container.innerHTML = '

    Failed to load track data.

    '; + return; + } + + const era = trackerData.eras[eraName]; + if (!era || !era.data) { + container.innerHTML = '

    Track not found.

    '; + return; + } + + // Find the specific track + let currentTrack = null; + let currentIndex = 0; + let allTracks = []; + + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + songs.forEach((song, idx) => { + const track = createTrackFromSong(song, era, artist.name, allTracks.length, sheetId); + allTracks.push(track); + if (allTracks.length - 1 === trackIndex) { + currentTrack = track; + currentIndex = allTracks.length - 1; + } + }); + } + }); + + if (!currentTrack) { + container.innerHTML = '

    Track not found.

    '; + return; + } + + // Show track page using album template + const imageEl = document.getElementById('album-detail-image'); + const titleEl = document.getElementById('album-detail-title'); + const metaEl = document.getElementById('album-detail-meta'); + const prodEl = document.getElementById('album-detail-producer'); + const tracklistContainer = document.getElementById('album-detail-tracklist'); + const playBtn = document.getElementById('play-album-btn'); + + imageEl.src = era.image || 'assets/logo.svg'; + imageEl.style.backgroundColor = ''; + imageEl.onerror = function () { + this.src = 'assets/logo.svg'; + }; + + titleEl.textContent = currentTrack.title; + metaEl.innerHTML = `${era.timeline || 'Unreleased'} • ${formatTime(currentTrack.duration)}`; + prodEl.innerHTML = `By ${artist.name} • From ${era.name}`; + + if (playBtn) { + playBtn.innerHTML = `${SVG_PLAY}Play Track`; + playBtn.onclick = () => { + const availableTracks = allTracks.filter((t) => !t.unavailable); + const trackPos = availableTracks.findIndex((t) => t.id === currentTrack.id); + if (trackPos >= 0 && availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, trackPos); + globalPlayer.playTrackFromQueue(); + } + }; + } + + // Hide unnecessary buttons + const shuffleBtn = document.getElementById('shuffle-album-btn'); + const downloadBtn = document.getElementById('download-album-btn'); + const likeBtn = document.getElementById('like-album-btn'); + const mixBtn = document.getElementById('album-mix-btn'); + const addToPlaylistBtn = document.getElementById('add-album-to-playlist-btn'); + + if (shuffleBtn) shuffleBtn.style.display = 'none'; + if (downloadBtn) downloadBtn.style.display = 'none'; + if (likeBtn) likeBtn.style.display = 'none'; + if (mixBtn) mixBtn.style.display = 'none'; + if (addToPlaylistBtn) addToPlaylistBtn.style.display = 'none'; + + // Render just this track + renderTrackerTracks(tracklistContainer, [currentTrack]); + + // Add click handler + const trackItem = tracklistContainer.querySelector('.track-item'); + if (trackItem && !currentTrack.unavailable) { + trackItem.onclick = (e) => { + if (e.target.closest('.track-menu-btn')) return; + + const availableTracks = allTracks.filter((t) => !t.unavailable); + const trackPos = availableTracks.findIndex((t) => t.id === currentTrack.id); + if (trackPos >= 0 && availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, trackPos); + globalPlayer.playTrackFromQueue(); + } + }; + } + + // Show other projects + const moreAlbumsSection = document.getElementById('album-section-more-albums'); + const moreAlbumsContainer = document.getElementById('album-detail-more-albums'); + const moreAlbumsTitle = document.getElementById('album-title-more-albums'); + + if (moreAlbumsSection && moreAlbumsContainer) { + const otherEras = Object.values(trackerData.eras).filter((e) => e.name !== eraName); + if (otherEras.length > 0) { + moreAlbumsContainer.innerHTML = otherEras + .map((e) => { + let trackCount = 0; + if (e.data) { + Object.values(e.data).forEach((songs) => { + if (songs && songs.length) trackCount += songs.length; + }); + } + return createProjectCardHTML(e, artist, sheetId, trackCount); + }) + .join(''); + + if (moreAlbumsTitle) moreAlbumsTitle.textContent = `More unreleased from ${artist.name}`; + moreAlbumsSection.style.display = 'block'; + } else { + moreAlbumsSection.style.display = 'none'; + } + } + + const epsSection = document.getElementById('album-section-eps'); + const similarArtistsSection = document.getElementById('album-section-similar-artists'); + const similarAlbumsSection = document.getElementById('album-section-similar-albums'); + + if (epsSection) epsSection.style.display = 'none'; + if (similarArtistsSection) similarArtistsSection.style.display = 'none'; + if (similarAlbumsSection) similarAlbumsSection.style.display = 'none'; + + document.title = `${currentTrack.title} - ${artist.name}`; } export async function initTracker(player) { globalPlayer = player; - await loadArtistsData(); - - const checkAndRenderTracker = async () => { - const artistNameEl = document.getElementById('artist-detail-name'); - const trackerSection = document.getElementById('artist-tracker-section'); - - if (artistNameEl && trackerSection && artistNameEl.textContent) { - const artistName = artistNameEl.textContent.trim(); - - if (trackerSection.dataset.artist === artistName) return; - - trackerSection.dataset.artist = artistName; - trackerSection.innerHTML = ''; - trackerSection.style.display = 'none'; - - const artistEntry = artistsData.find((a) => a.name.toLowerCase() === artistName.toLowerCase()); - - if (artistEntry && artistEntry.url) { - const sheetId = getSheetId(artistEntry.url); - if (sheetId) { - renderLoadButton(trackerSection, sheetId, artistEntry.name); - } - } - } - }; - - const observer = new MutationObserver(checkAndRenderTracker); - - const artistPage = document.getElementById('page-artist'); - if (artistPage) { - observer.observe(artistPage, { attributes: true, childList: true, subtree: true }); - checkAndRenderTracker(); - } + await Promise.all([loadArtistsPopularity(), loadArtistsData()]); +} + +// Helper function to find a tracker artist by name (for use in normal artist pages) +export function findTrackerArtistByName(artistName) { + // First try exact match + let match = artistsData.find((a) => a.name.toLowerCase() === artistName.toLowerCase()); + if (match) return match; + + // Try fuzzy match (remove special chars and spaces) + const normalized = artistName.toLowerCase().replace(/[^a-z0-9]/g, ''); + match = artistsData.find((a) => { + const aNormalized = a.name.toLowerCase().replace(/[^a-z0-9]/g, ''); + return aNormalized === normalized || aNormalized.includes(normalized) || normalized.includes(aNormalized); + }); + + return match || null; +} + +// Helper function to get artist's unreleased projects (for use in normal artist pages) +export async function getArtistUnreleasedProjects(artistName) { + const artist = findTrackerArtistByName(artistName); + if (!artist) return null; + + const sheetId = getSheetId(artist.url); + if (!sheetId) return null; + + const trackerData = await fetchTrackerData(sheetId); + if (!trackerData || !trackerData.eras) return null; + + return { + artist, + sheetId, + eras: Object.values(trackerData.eras), + }; } diff --git a/js/ui.js b/js/ui.js index 6410409..e15f732 100644 --- a/js/ui.js +++ b/js/ui.js @@ -23,6 +23,7 @@ import { getVibrantColorFromImage } from './vibrant-color.js'; import { syncManager } from './accounts/pocketbase.js'; import { Visualizer } from './visualizer.js'; import { navigate } from './router.js'; +import { renderUnreleasedPage as renderUnreleasedTrackerPage, renderTrackerArtistPage as renderTrackerArtistContent, renderTrackerProjectPage as renderTrackerProjectContent, renderTrackerTrackPage as renderTrackerTrackContent, findTrackerArtistByName, getArtistUnreleasedProjects, createProjectCardHTML } from './tracker.js'; export class UIRenderer { constructor(api, player) { @@ -109,31 +110,42 @@ export class UIRenderer { if (track) { const isLocal = track.isLocal; const isTracker = track.isTracker || (track.id && String(track.id).startsWith('tracker-')); - const shouldHide = isLocal || isTracker; + const shouldHideLikes = isLocal || isTracker; if (likeBtn) { - if (shouldHide) { + if (shouldHideLikes) { likeBtn.style.display = 'none'; } else { likeBtn.style.display = 'flex'; this.updateLikeState(likeBtn.parentElement, 'track', track.id); } } + + // For tracker tracks: show add playlist, hide lyrics + // For normal tracks: hide add playlist, show lyrics (unless local) if (addPlaylistBtn) { - if (shouldHide) addPlaylistBtn.style.setProperty('display', 'none', 'important'); - else addPlaylistBtn.style.removeProperty('display'); + if (isTracker) { + addPlaylistBtn.style.removeProperty('display'); + addPlaylistBtn.style.display = 'flex'; + } else { + addPlaylistBtn.style.setProperty('display', 'none', 'important'); + } } if (mobileAddPlaylistBtn) { - if (shouldHide) mobileAddPlaylistBtn.style.setProperty('display', 'none', 'important'); - else mobileAddPlaylistBtn.style.removeProperty('display'); + if (isTracker) { + mobileAddPlaylistBtn.style.removeProperty('display'); + mobileAddPlaylistBtn.style.display = 'flex'; + } else { + mobileAddPlaylistBtn.style.setProperty('display', 'none', 'important'); + } } if (lyricsBtn) { - if (isLocal) lyricsBtn.style.display = 'none'; + if (isLocal || isTracker) lyricsBtn.style.display = 'none'; else lyricsBtn.style.removeProperty('display'); } if (fsLikeBtn) { - if (shouldHide) { + if (shouldHideLikes) { fsLikeBtn.style.display = 'none'; } else { fsLikeBtn.style.display = 'flex'; @@ -141,7 +153,7 @@ export class UIRenderer { } } if (fsAddPlaylistBtn) { - if (shouldHide) fsAddPlaylistBtn.style.display = 'none'; + if (shouldHideLikes) fsAddPlaylistBtn.style.display = 'none'; else fsAddPlaylistBtn.style.display = 'flex'; } } else { @@ -2192,6 +2204,8 @@ export class UIRenderer { albumsContainer.innerHTML = this.createSkeletonCards(6, false); if (epsContainer) epsContainer.innerHTML = this.createSkeletonCards(6, false); if (epsSection) epsSection.style.display = 'none'; + const loadUnreleasedSection = document.getElementById('artist-section-load-unreleased'); + if (loadUnreleasedSection) loadUnreleasedSection.style.display = 'none'; if (similarContainer) similarContainer.innerHTML = this.createSkeletonCards(6, true); if (similarSection) similarSection.style.display = 'block'; @@ -2299,6 +2313,89 @@ export class UIRenderer { } }); + // Check for unreleased projects + const unreleasedSection = document.getElementById('artist-section-unreleased'); + const unreleasedContainer = document.getElementById('artist-detail-unreleased'); + const loadUnreleasedBtn = document.getElementById('load-unreleased-btn'); + const loadUnreleasedSection = document.getElementById('artist-section-load-unreleased'); + if (unreleasedSection && unreleasedContainer && loadUnreleasedBtn && loadUnreleasedSection) { + // Initially hide the unreleased section + unreleasedSection.style.display = 'none'; + loadUnreleasedSection.style.display = 'none'; + + // Check if artist has unreleased projects + const trackerArtist = findTrackerArtistByName(artist.name); + if (trackerArtist) { + // Show the load button section + loadUnreleasedSection.style.display = 'block'; + + // Add click handler to load and display unreleased projects + loadUnreleasedBtn.onclick = async () => { + loadUnreleasedBtn.disabled = true; + loadUnreleasedBtn.textContent = 'Loading...'; + + try { + const unreleasedData = await getArtistUnreleasedProjects(artist.name); + if (unreleasedData && unreleasedData.eras.length > 0) { + const { artist: trackerArtistData, sheetId, eras } = unreleasedData; + + unreleasedContainer.innerHTML = eras.map(e => { + let trackCount = 0; + if (e.data) { + Object.values(e.data).forEach((songs) => { + if (songs && songs.length) trackCount += songs.length; + }); + } + return createProjectCardHTML(e, trackerArtistData, sheetId, trackCount); + }).join(''); + + unreleasedSection.style.display = 'block'; + loadUnreleasedBtn.style.display = 'none'; + + // Add click handlers + unreleasedContainer.querySelectorAll('.card').forEach((card) => { + const eraName = decodeURIComponent(card.dataset.trackerProjectId); + const era = eras.find(e => e.name === eraName); + if (!era) return; + + card.onclick = (e) => { + if (e.target.closest('.card-play-btn')) { + e.stopPropagation(); + let eraTracks = []; + if (era.data) { + Object.values(era.data).forEach((songs) => { + if (songs && songs.length) { + songs.forEach((song, index) => { + const track = createTrackFromSong(song, era, trackerArtistData.name, eraTracks.length, sheetId); + eraTracks.push(track); + }); + } + }); + } + const availableTracks = eraTracks.filter(t => !t.unavailable); + if (availableTracks.length > 0) { + globalPlayer.setQueue(availableTracks, 0); + globalPlayer.playTrackFromQueue(); + } + } else if (e.target.closest('.card-menu-btn')) { + e.stopPropagation(); + } else { + navigate(`/unreleased/${sheetId}/${encodeURIComponent(era.name)}`); + } + }; + }); + } else { + loadUnreleasedBtn.textContent = 'No unreleased projects'; + } + } catch (error) { + console.error('Failed to load unreleased projects:', error); + loadUnreleasedBtn.textContent = 'Failed to load'; + loadUnreleasedBtn.disabled = false; + } + }; + } + } + recentActivityManager.addArtist(artist); document.title = artist.name; @@ -2376,6 +2473,30 @@ export class UIRenderer { } } + async renderUnreleasedPage() { + this.showPage('unreleased'); + const container = document.getElementById('unreleased-content'); + await renderUnreleasedTrackerPage(container); + } + + async renderTrackerArtistPage(sheetId) { + this.showPage('tracker-artist'); + const container = document.getElementById('tracker-artist-projects-container'); + await renderTrackerArtistContent(sheetId, container); + } + + async renderTrackerProjectPage(sheetId, projectName) { + this.showPage('album'); // Use album page template + const container = document.getElementById('album-detail-tracklist'); + await renderTrackerProjectContent(sheetId, projectName, container, this); + } + + async renderTrackerTrackPage(trackId) { + this.showPage('album'); // Use album page template + const container = document.getElementById('album-detail-tracklist'); + await renderTrackerTrackContent(trackId, container, this); + } + updatePlaylistHeaderActions(playlist, isOwned, tracks, showShare = false, onSort = null) { const actionsDiv = document.getElementById('page-playlist').querySelector('.detail-header-actions'); diff --git a/js/utils.js b/js/utils.js index 58f82bb..5ee3f40 100644 --- a/js/utils.js +++ b/js/utils.js @@ -274,7 +274,16 @@ export const getTrackArtists = (track = {}, { fallback = 'Unknown Artist' } = {} export const getTrackArtistsHTML = (track = {}, { fallback = 'Unknown Artist' } = {}) => { if (track?.artists?.length) { return track.artists - .map((artist) => `${artist.name}`) + .map((artist) => { + // Check if this is a tracker/unreleased track + const isTracker = track.isTracker || (track.id && String(track.id).startsWith('tracker-')); + if (isTracker && track.trackerInfo?.sheetId) { + // For tracker tracks, link to the tracker artist page + return `${artist.name}`; + } + // For normal tracks, use the artist ID + return `${artist.name}`; + }) .join(', '); }