6537 lines
226 KiB
JavaScript
6537 lines
226 KiB
JavaScript
|
/**
|
|||
|
|
* Freedify - Music Streaming PWA
|
|||
|
|
* Enhanced search with albums, artists, playlists, and Spotify URL support
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// ========== STATE ==========
|
|||
|
|
const state = {
|
|||
|
|
queue: [],
|
|||
|
|
currentIndex: -1,
|
|||
|
|
isPlaying: false,
|
|||
|
|
searchType: 'track',
|
|||
|
|
detailTracks: [], // Tracks in current detail view
|
|||
|
|
repeatMode: 'none', // 'none' | 'all' | 'one'
|
|||
|
|
volume: parseFloat(localStorage.getItem('freedify_volume')) || 1,
|
|||
|
|
muted: false,
|
|||
|
|
crossfadeDuration: 1, // seconds (when crossfade is enabled)
|
|||
|
|
crossfadeEnabled: localStorage.getItem('freedify_crossfade') === 'true', // Crossfade toggle
|
|||
|
|
playlists: JSON.parse(localStorage.getItem('freedify_playlists') || '[]'), // User playlists
|
|||
|
|
scrobbledCurrent: false, // Track if current song was scrobbled
|
|||
|
|
listenBrainzConfig: { valid: false, username: null }, // LB status
|
|||
|
|
hiResMode: localStorage.getItem('freedify_hires') !== 'false', // Hi-Res 24-bit mode (Default True)
|
|||
|
|
sortOrder: 'newest', // 'newest' or 'oldest' for album sorting
|
|||
|
|
lastSearchResults: [], // Store last search results for re-rendering
|
|||
|
|
lastSearchType: 'track', // Store last search type
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ========== DOM ELEMENTS ==========
|
|||
|
|
// App.js v0106L - Robust Proxy Cleanup
|
|||
|
|
console.log("Freedify v0106L Loaded - Robust Proxy Cleanup");
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Helper for multiple selectors (Fix for ReferenceError: $$ is not defined)
|
|||
|
|
const $ = (selector) => document.querySelector(selector);
|
|||
|
|
const $$ = (selector) => document.querySelectorAll(selector);
|
|||
|
|
|
|||
|
|
// Global Event Delegation for Detail Tracks (Fixes click issues)
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
// Check if click is inside detail-tracks
|
|||
|
|
const trackItem = e.target.closest('#detail-tracks .track-item');
|
|||
|
|
if (!trackItem) return;
|
|||
|
|
|
|||
|
|
// Don't play if clicking buttons
|
|||
|
|
if (e.target.closest('.download-btn') || e.target.closest('.delete-track-btn') || e.target.closest('.info-btn')) return;
|
|||
|
|
|
|||
|
|
const index = parseInt(trackItem.dataset.index, 10);
|
|||
|
|
if (isNaN(index)) return;
|
|||
|
|
|
|||
|
|
// Auto-queue logic
|
|||
|
|
const sourceTracks = (state.detailTracks && state.detailTracks.length > 0) ? state.detailTracks : [];
|
|||
|
|
|
|||
|
|
if (sourceTracks.length === 0) return;
|
|||
|
|
|
|||
|
|
// Don't auto-queue podcast episodes - let user view details and explicitly play
|
|||
|
|
const clickedTrack = sourceTracks[index];
|
|||
|
|
if (clickedTrack && clickedTrack.source === 'podcast') {
|
|||
|
|
// Show the podcast modal instead of queuing
|
|||
|
|
showPodcastModal(encodeURIComponent(JSON.stringify(clickedTrack)));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const remainingTracks = sourceTracks.slice(index);
|
|||
|
|
|
|||
|
|
state.queue = remainingTracks;
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
|
|||
|
|
showToast(`Queueing ${remainingTracks.length} tracks...`);
|
|||
|
|
|
|||
|
|
updateQueueUI();
|
|||
|
|
|
|||
|
|
// Check if this track is already preloaded - use it instantly!
|
|||
|
|
if (preloadedTrackId === clickedTrack.id && preloadedReady && preloadedPlayer) {
|
|||
|
|
console.log('Using preloaded track (detail click):', clickedTrack.name);
|
|||
|
|
preloadedTrackId = null;
|
|||
|
|
preloadedReady = false;
|
|||
|
|
updatePlayerUI();
|
|||
|
|
updateFullscreenUI(clickedTrack);
|
|||
|
|
performGaplessSwitch();
|
|||
|
|
updateFormatBadge(getActivePlayer().src);
|
|||
|
|
setTimeout(preloadNextTrack, 500);
|
|||
|
|
} else {
|
|||
|
|
loadTrack(clickedTrack);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const searchInput = $('#search-input');
|
|||
|
|
const searchClear = $('#search-clear');
|
|||
|
|
const typeBtns = $$('.type-btn');
|
|||
|
|
const resultsSection = $('#results-section');
|
|||
|
|
const resultsContainer = $('#results-container');
|
|||
|
|
const detailView = $('#detail-view');
|
|||
|
|
const detailInfo = $('#detail-info');
|
|||
|
|
const detailTracks = $('#detail-tracks');
|
|||
|
|
const backBtn = $('#back-btn');
|
|||
|
|
const queueAllBtn = $('#queue-all-btn');
|
|||
|
|
const shuffleBtn = $('#shuffle-btn');
|
|||
|
|
const queueSection = $('#queue-section');
|
|||
|
|
const queueContainer = $('#queue-container');
|
|||
|
|
const queueClose = $('#queue-close');
|
|||
|
|
const queueClear = $('#queue-clear');
|
|||
|
|
const queueCount = $('#queue-count');
|
|||
|
|
const queueBtn = $('#queue-btn');
|
|||
|
|
|
|||
|
|
// Fullscreen Elements
|
|||
|
|
const fsToggleBtn = $('#fs-toggle-btn');
|
|||
|
|
const fullscreenPlayer = $('#fullscreen-player');
|
|||
|
|
const fsCloseBtn = $('#fs-close-btn');
|
|||
|
|
const fsArt = $('#fs-art');
|
|||
|
|
const fsTitle = $('#fs-title');
|
|||
|
|
const fsArtist = $('#fs-artist');
|
|||
|
|
const fsCurrentTime = $('#fs-current-time');
|
|||
|
|
const fsDuration = $('#fs-duration');
|
|||
|
|
const fsProgressBar = $('#fs-progress-bar');
|
|||
|
|
const fsPlayBtn = $('#fs-play-btn');
|
|||
|
|
const fsPrevBtn = $('#fs-prev-btn');
|
|||
|
|
const fsNextBtn = $('#fs-next-btn');
|
|||
|
|
const loadingOverlay = $('#loading-overlay');
|
|||
|
|
const loadingText = $('#loading-text');
|
|||
|
|
const errorMessage = $('#error-message');
|
|||
|
|
const errorText = $('#error-text');
|
|||
|
|
const errorRetry = $('#error-retry');
|
|||
|
|
const playerBar = $('#player-bar');
|
|||
|
|
const playerArt = $('#player-art');
|
|||
|
|
const playerTitle = $('#player-title');
|
|||
|
|
const playerArtist = $('#player-artist');
|
|||
|
|
const playerAlbum = $('#player-album');
|
|||
|
|
const playerYear = $('#player-year');
|
|||
|
|
const playBtn = $('#play-btn');
|
|||
|
|
const prevBtn = $('#prev-btn');
|
|||
|
|
const nextBtn = $('#next-btn');
|
|||
|
|
const shuffleQueueBtn = $('#shuffle-queue-btn');
|
|||
|
|
const repeatBtn = $('#repeat-btn');
|
|||
|
|
const progressBar = $('#progress-bar');
|
|||
|
|
const currentTime = $('#current-time');
|
|||
|
|
const duration = $('#duration');
|
|||
|
|
const audioPlayer = $('#audio-player');
|
|||
|
|
const audioPlayer2 = $('#audio-player-2');
|
|||
|
|
const miniPlayerBtn = $('#mini-player-btn');
|
|||
|
|
let pipWindow = null;
|
|||
|
|
|
|||
|
|
// Crossfade / Gapless state
|
|||
|
|
let activePlayer = 1; // 1 or 2, which player is currently active
|
|||
|
|
let crossfadeEnabled = localStorage.getItem('freedify_crossfade') === 'true';
|
|||
|
|
let CROSSFADE_DURATION = 1000; // Default: 1 second. Options: 500, 1000, 2000
|
|||
|
|
let crossfadeTimeout = null;
|
|||
|
|
let preloadedPlayer = null; // Ready player with next track loaded
|
|||
|
|
let preloadedReady = false; // True when preloaded track has fired canplaythrough
|
|||
|
|
|
|||
|
|
// Volume Controls
|
|||
|
|
const volumeSlider = $('#volume-slider');
|
|||
|
|
const muteBtn = $('#mute-btn');
|
|||
|
|
|
|||
|
|
// Toast & Shortcuts
|
|||
|
|
const toastContainer = $('#toast-container');
|
|||
|
|
const shortcutsHelp = $('#shortcuts-help');
|
|||
|
|
const shortcutsClose = $('#shortcuts-close');
|
|||
|
|
|
|||
|
|
// ========== SEARCH ==========
|
|||
|
|
let searchTimeout = null;
|
|||
|
|
// Only search on Enter key press (not as-you-type to avoid rate limiting)
|
|||
|
|
|
|||
|
|
searchInput.addEventListener('input', (e) => {
|
|||
|
|
// Just clear empty state when typing
|
|||
|
|
if (!e.target.value.trim()) {
|
|||
|
|
showEmptyState();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
searchInput.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
e.preventDefault();
|
|||
|
|
clearTimeout(searchTimeout);
|
|||
|
|
const query = searchInput.value.trim();
|
|||
|
|
if (query) {
|
|||
|
|
performSearch(query);
|
|||
|
|
}
|
|||
|
|
searchInput.blur();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
searchClear.addEventListener('click', () => {
|
|||
|
|
searchInput.value = '';
|
|||
|
|
showEmptyState();
|
|||
|
|
searchInput.focus();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const searchMoreBtn = $('#search-more-btn');
|
|||
|
|
const searchMoreMenu = $('#search-more-menu');
|
|||
|
|
|
|||
|
|
// Toggle Search More Menu
|
|||
|
|
if (searchMoreBtn) {
|
|||
|
|
searchMoreBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
searchMoreMenu.classList.toggle('hidden');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close menu when clicking elsewhere
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
if (searchMoreMenu && !searchMoreMenu.contains(e.target) && e.target !== searchMoreBtn) {
|
|||
|
|
searchMoreMenu.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Search type selector
|
|||
|
|
// Re-select all type buttons including new menu items
|
|||
|
|
const allTypeBtns = document.querySelectorAll('.type-btn, .type-btn-menu');
|
|||
|
|
|
|||
|
|
allTypeBtns.forEach(btn => {
|
|||
|
|
btn.addEventListener('click', () => {
|
|||
|
|
if (btn.id === 'search-more-btn') return; // Skip the toggle button itself
|
|||
|
|
|
|||
|
|
allTypeBtns.forEach(b => b.classList.remove('active'));
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
|
|||
|
|
// If it's a menu item, highlight the "More" button too as a visual indicator
|
|||
|
|
if (btn.classList.contains('type-btn-menu')) {
|
|||
|
|
searchMoreBtn.classList.add('active');
|
|||
|
|
searchMoreMenu.classList.add('hidden'); // Close menu on selection
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
state.searchType = btn.dataset.type;
|
|||
|
|
|
|||
|
|
// Special types
|
|||
|
|
if (state.searchType === 'favorites') {
|
|||
|
|
renderPlaylistsView();
|
|||
|
|
return;
|
|||
|
|
} else if (state.searchType === 'rec') {
|
|||
|
|
renderRecommendations();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const query = searchInput.value.trim();
|
|||
|
|
if (query) performSearch(query);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Sort Filter Removed
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Crossfade Toggle
|
|||
|
|
const crossfadeCheckbox = $('#crossfade-checkbox');
|
|||
|
|
if (crossfadeCheckbox) {
|
|||
|
|
// Initialize from state
|
|||
|
|
crossfadeCheckbox.checked = state.crossfadeEnabled;
|
|||
|
|
|
|||
|
|
crossfadeCheckbox.addEventListener('change', () => {
|
|||
|
|
state.crossfadeEnabled = crossfadeCheckbox.checked;
|
|||
|
|
localStorage.setItem('freedify_crossfade', state.crossfadeEnabled);
|
|||
|
|
showToast(state.crossfadeEnabled ? 'Crossfade enabled' : 'Crossfade disabled');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== PLAYLIST MANAGEMENT ==========
|
|||
|
|
function savePlaylists() {
|
|||
|
|
localStorage.setItem('freedify_playlists', JSON.stringify(state.playlists));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createPlaylist(name, tracks = []) {
|
|||
|
|
const playlist = {
|
|||
|
|
id: 'playlist_' + Date.now(),
|
|||
|
|
name: name,
|
|||
|
|
created: new Date().toISOString(),
|
|||
|
|
tracks: tracks.map(t => ({
|
|||
|
|
id: t.id,
|
|||
|
|
name: t.name,
|
|||
|
|
artists: t.artists,
|
|||
|
|
album: t.album || '',
|
|||
|
|
album_art: t.album_art || t.image || '/static/icon.svg',
|
|||
|
|
isrc: t.isrc || t.id,
|
|||
|
|
duration: t.duration || '0:00'
|
|||
|
|
}))
|
|||
|
|
};
|
|||
|
|
state.playlists.push(playlist);
|
|||
|
|
savePlaylists();
|
|||
|
|
showToast(`Created playlist "${name}"`);
|
|||
|
|
return playlist;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addToPlaylist(playlistId, trackOrTracks) {
|
|||
|
|
const playlist = state.playlists.find(p => p.id === playlistId);
|
|||
|
|
if (!playlist) return;
|
|||
|
|
|
|||
|
|
const tracksToAdd = Array.isArray(trackOrTracks) ? trackOrTracks : [trackOrTracks];
|
|||
|
|
let addedCount = 0;
|
|||
|
|
|
|||
|
|
tracksToAdd.forEach(track => {
|
|||
|
|
// Avoid duplicates
|
|||
|
|
if (playlist.tracks.some(t => t.id === track.id)) return;
|
|||
|
|
|
|||
|
|
playlist.tracks.push({
|
|||
|
|
id: track.id,
|
|||
|
|
name: track.name,
|
|||
|
|
artists: track.artists,
|
|||
|
|
album: track.album || '',
|
|||
|
|
album_art: track.album_art || track.image || '/static/icon.svg',
|
|||
|
|
isrc: track.isrc || track.id,
|
|||
|
|
duration: track.duration || '0:00'
|
|||
|
|
});
|
|||
|
|
addedCount++;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (addedCount > 0) {
|
|||
|
|
savePlaylists();
|
|||
|
|
showToast(`Added ${addedCount} tracks to "${playlist.name}"`);
|
|||
|
|
} else {
|
|||
|
|
showToast('Tracks already in playlist');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function deleteFromPlaylist(playlistId, trackId) {
|
|||
|
|
const playlist = state.playlists.find(p => p.id === playlistId);
|
|||
|
|
if (!playlist) return;
|
|||
|
|
|
|||
|
|
const idx = playlist.tracks.findIndex(t => t.id === trackId);
|
|||
|
|
if (idx !== -1) {
|
|||
|
|
playlist.tracks.splice(idx, 1);
|
|||
|
|
savePlaylists();
|
|||
|
|
showToast('Track removed');
|
|||
|
|
// Refresh view if currently viewing this playlist
|
|||
|
|
if (state.currentPlaylistView === playlistId) {
|
|||
|
|
showPlaylistDetail(playlist);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Expose for use in detail view
|
|||
|
|
window.deleteFromPlaylist = deleteFromPlaylist;
|
|||
|
|
|
|||
|
|
function deletePlaylist(playlistId) {
|
|||
|
|
state.playlists = state.playlists.filter(p => p.id !== playlistId);
|
|||
|
|
savePlaylists();
|
|||
|
|
showToast('Playlist deleted');
|
|||
|
|
renderPlaylistsView();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderPlaylistsView() {
|
|||
|
|
hideLoading();
|
|||
|
|
|
|||
|
|
if (state.playlists.length === 0) {
|
|||
|
|
resultsContainer.innerHTML = `
|
|||
|
|
<div class="empty-state">
|
|||
|
|
<span class="empty-icon">❤️</span>
|
|||
|
|
<p>No saved playlists yet</p>
|
|||
|
|
<p style="font-size: 0.9em; opacity: 0.7;">Import a Spotify playlist and click "Save to Playlist"</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const grid = document.createElement('div');
|
|||
|
|
grid.className = 'results-grid';
|
|||
|
|
|
|||
|
|
state.playlists.forEach(playlist => {
|
|||
|
|
const trackCount = playlist.tracks.length;
|
|||
|
|
const coverArt = playlist.tracks[0]?.album_art || '/static/icon.svg';
|
|||
|
|
grid.innerHTML += `
|
|||
|
|
<div class="album-item playlist-item" data-playlist-id="${playlist.id}">
|
|||
|
|
<div class="album-art-container">
|
|||
|
|
<img src="${coverArt}" alt="${playlist.name}" class="album-art" loading="lazy">
|
|||
|
|
<div class="album-overlay">
|
|||
|
|
<button class="play-album-btn">▶</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="album-info">
|
|||
|
|
<div class="album-name">${playlist.name}</div>
|
|||
|
|
<div class="album-artist">${trackCount} track${trackCount !== 1 ? 's' : ''}</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="delete-playlist-btn" title="Delete playlist">🗑️</button>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
resultsContainer.innerHTML = '';
|
|||
|
|
resultsContainer.appendChild(grid);
|
|||
|
|
|
|||
|
|
// Click handlers
|
|||
|
|
grid.querySelectorAll('.playlist-item').forEach(el => {
|
|||
|
|
el.addEventListener('click', (e) => {
|
|||
|
|
if (e.target.closest('.delete-playlist-btn')) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const id = el.dataset.playlistId;
|
|||
|
|
if (confirm('Delete this playlist?')) {
|
|||
|
|
deletePlaylist(id);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const playlist = state.playlists.find(p => p.id === el.dataset.playlistId);
|
|||
|
|
if (playlist) {
|
|||
|
|
showPlaylistDetail(playlist);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showPlaylistDetail(playlist) {
|
|||
|
|
// Track which playlist is being viewed
|
|||
|
|
state.currentPlaylistView = playlist.id;
|
|||
|
|
|
|||
|
|
// Reuse the existing detail view
|
|||
|
|
const albumData = {
|
|||
|
|
id: playlist.id,
|
|||
|
|
name: playlist.name,
|
|||
|
|
artists: `${playlist.tracks.length} tracks`,
|
|||
|
|
image: playlist.tracks[0]?.album_art || '/static/icon.svg',
|
|||
|
|
is_playlist: true,
|
|||
|
|
is_user_playlist: true // Flag to indicate this is a user-created playlist (for delete buttons)
|
|||
|
|
};
|
|||
|
|
showDetailView(albumData, playlist.tracks);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function performSearch(query, append = false) {
|
|||
|
|
if (!query) return;
|
|||
|
|
|
|||
|
|
// Track search state for Load More
|
|||
|
|
if (!append) {
|
|||
|
|
state.searchOffset = 0;
|
|||
|
|
state.lastSearchQuery = query;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showLoading(append ? 'Loading more...' : `Searching for "${query}"...`);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}&type=${state.searchType}&offset=${state.searchOffset}`);
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (!response.ok) throw new Error(data.detail || 'Search failed');
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
|
|||
|
|
// Check if it was a Spotify URL
|
|||
|
|
// Check if it was a Spotify/Imported URL
|
|||
|
|
if (data.is_url) {
|
|||
|
|
// Auto-open detail view for albums/playlists
|
|||
|
|
if (data.tracks && (data.type === 'album' || data.type === 'playlist' || data.type === 'artist')) {
|
|||
|
|
showDetailView(data.results[0], data.tracks);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// Auto-play single track (e.g. YouTube link)
|
|||
|
|
if (data.results && data.results.length === 1 && data.type === 'track') {
|
|||
|
|
const track = data.results[0];
|
|||
|
|
playTrack(track);
|
|||
|
|
showToast(`Playing imported track: ${track.name}`);
|
|||
|
|
// Also render it so they can see it
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderResults(data.results, data.type || state.searchType, append);
|
|||
|
|
|
|||
|
|
// Update offset for next load
|
|||
|
|
state.searchOffset += data.results.length;
|
|||
|
|
|
|||
|
|
// Show/hide Load More button
|
|||
|
|
const loadMoreBtn = $('#load-more-btn');
|
|||
|
|
if (loadMoreBtn) {
|
|||
|
|
if (data.results.length >= 20) {
|
|||
|
|
loadMoreBtn.classList.remove('hidden');
|
|||
|
|
} else {
|
|||
|
|
loadMoreBtn.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Search error:', error);
|
|||
|
|
showError(error.message || 'Search failed. Please try again.');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderResults(results, type, append = false) {
|
|||
|
|
const loadMoreBtn = $('#load-more-btn');
|
|||
|
|
|
|||
|
|
// Store results for re-rendering (when sort changes)
|
|||
|
|
if (!append) {
|
|||
|
|
state.lastSearchResults = results || [];
|
|||
|
|
state.lastSearchType = type;
|
|||
|
|
} else if (results) {
|
|||
|
|
state.lastSearchResults = [...state.lastSearchResults, ...results];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!results || results.length === 0) {
|
|||
|
|
if (!append) {
|
|||
|
|
resultsContainer.innerHTML = `
|
|||
|
|
<div class="empty-state">
|
|||
|
|
<span class="empty-icon">🔍</span>
|
|||
|
|
<p>No results found</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
if (loadMoreBtn) loadMoreBtn.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let grid;
|
|||
|
|
// Helper to get or create Load More button
|
|||
|
|
let persistentLoadMoreBtn = document.getElementById('load-more-btn');
|
|||
|
|
if (persistentLoadMoreBtn) {
|
|||
|
|
persistentLoadMoreBtn.remove(); // Rescue it
|
|||
|
|
} else {
|
|||
|
|
// Create fresh if missing (e.g. after view switch)
|
|||
|
|
persistentLoadMoreBtn = document.createElement('button');
|
|||
|
|
persistentLoadMoreBtn.id = 'load-more-btn';
|
|||
|
|
persistentLoadMoreBtn.className = 'load-more-btn hidden';
|
|||
|
|
persistentLoadMoreBtn.textContent = 'Load More Results';
|
|||
|
|
persistentLoadMoreBtn.addEventListener('click', () => {
|
|||
|
|
if (state.lastSearchQuery) {
|
|||
|
|
performSearch(state.lastSearchQuery, true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (append) {
|
|||
|
|
// Get existing grid or create new
|
|||
|
|
grid = resultsContainer.querySelector('.results-grid') || resultsContainer.querySelector('.results-list');
|
|||
|
|
if (!grid) {
|
|||
|
|
grid = document.createElement('div');
|
|||
|
|
// Use list layout for tracks, grid for others
|
|||
|
|
grid.className = (type === 'track') ? 'results-list' : 'results-grid';
|
|||
|
|
resultsContainer.innerHTML = '';
|
|||
|
|
resultsContainer.appendChild(grid);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
grid = document.createElement('div');
|
|||
|
|
// Use list layout for tracks, grid for others
|
|||
|
|
grid.className = (type === 'track') ? 'results-list' : 'results-grid';
|
|||
|
|
|
|||
|
|
resultsContainer.innerHTML = '';
|
|||
|
|
resultsContainer.appendChild(grid);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// For 'podcast' we reuse album card style
|
|||
|
|
if (type === 'podcast') {
|
|||
|
|
// For 'podcast' we reuse album card style
|
|||
|
|
results.forEach(item => {
|
|||
|
|
grid.innerHTML += renderAlbumCard(item);
|
|||
|
|
});
|
|||
|
|
} else if (type === 'track') {
|
|||
|
|
results.forEach(track => {
|
|||
|
|
grid.innerHTML += renderTrackCard(track);
|
|||
|
|
});
|
|||
|
|
} else if (type === 'album') {
|
|||
|
|
results.forEach(album => {
|
|||
|
|
grid.innerHTML += renderAlbumCard(album);
|
|||
|
|
});
|
|||
|
|
} else if (type === 'artist') {
|
|||
|
|
results.forEach(artist => {
|
|||
|
|
grid.innerHTML += renderArtistCard(artist);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// Always append Load More button at the very end
|
|||
|
|
if (persistentLoadMoreBtn) {
|
|||
|
|
resultsContainer.appendChild(persistentLoadMoreBtn);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Attach click listeners
|
|||
|
|
if (type === 'track') {
|
|||
|
|
grid.querySelectorAll('.track-item').forEach(el => {
|
|||
|
|
// Main card click (Play)
|
|||
|
|
el.addEventListener('click', (e) => {
|
|||
|
|
const trackId = String(el.dataset.id);
|
|||
|
|
const track = results.find(t => String(t.id) === trackId);
|
|||
|
|
console.log('Track card clicked, ID:', trackId, 'Found:', track?.name);
|
|||
|
|
if (track) {
|
|||
|
|
playTrack(track);
|
|||
|
|
showToast(`Playing "${track.name}"`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Queue button click
|
|||
|
|
const queueBtn = el.querySelector('.queue-btn');
|
|||
|
|
if (queueBtn) {
|
|||
|
|
queueBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const trackId = String(el.dataset.id);
|
|||
|
|
const track = results.find(t => String(t.id) === trackId);
|
|||
|
|
if (track) addToQueue(track);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Fetch features regarding DJ Mode
|
|||
|
|
if (state.djMode) {
|
|||
|
|
fetchAudioFeaturesForTracks(results);
|
|||
|
|
}
|
|||
|
|
} else if (type === 'album') {
|
|||
|
|
// Album cards - open album modal
|
|||
|
|
grid.querySelectorAll('.album-card').forEach(el => {
|
|||
|
|
el.addEventListener('click', () => {
|
|||
|
|
console.log('Album card clicked, ID:', el.dataset.id);
|
|||
|
|
openAlbum(el.dataset.id);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
} else if (type === 'podcast') {
|
|||
|
|
// Podcast cards - open podcast episodes (not album modal)
|
|||
|
|
grid.querySelectorAll('.album-card').forEach(el => {
|
|||
|
|
el.addEventListener('click', () => {
|
|||
|
|
console.log('Podcast card clicked, ID:', el.dataset.id);
|
|||
|
|
openPodcastEpisodes(el.dataset.id);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
} else if (type === 'artist') {
|
|||
|
|
grid.querySelectorAll('.artist-item').forEach((el, i) => {
|
|||
|
|
el.addEventListener('click', () => openArtist(results[i].id));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add track to queue (called from Queue button click)
|
|||
|
|
function addToQueue(track) {
|
|||
|
|
if (!track) return;
|
|||
|
|
state.queue.push(track);
|
|||
|
|
updateQueueUI();
|
|||
|
|
showToast(`Added "${track.name}" to queue`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const downloadModal = $('#download-modal');
|
|||
|
|
const downloadTrackName = $('#download-track-name');
|
|||
|
|
const downloadFormat = $('#download-format');
|
|||
|
|
const downloadCancelBtn = $('#download-cancel-btn');
|
|||
|
|
const downloadConfirmBtn = $('#download-confirm-btn');
|
|||
|
|
const downloadAllBtn = $('#download-all-btn'); // New button
|
|||
|
|
let trackToDownload = null;
|
|||
|
|
let isBatchDownload = false; // Flag for batch mode
|
|||
|
|
|
|||
|
|
// ... functions ...
|
|||
|
|
|
|||
|
|
// ========== DOWNLOAD LOGIC ==========
|
|||
|
|
|
|||
|
|
window.openDownloadModal = function(trackJson) {
|
|||
|
|
const track = JSON.parse(decodeURIComponent(trackJson));
|
|||
|
|
trackToDownload = track;
|
|||
|
|
isBatchDownload = false;
|
|||
|
|
|
|||
|
|
// Check if we are coming from detailed view (Album/Playlist)
|
|||
|
|
if (!detailView.classList.contains('hidden')) {
|
|||
|
|
state.pendingAlbumReopen = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
downloadTrackName.textContent = `${track.name} - ${track.artists}`;
|
|||
|
|
downloadModal.classList.remove('hidden');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (downloadAllBtn) {
|
|||
|
|
downloadAllBtn.addEventListener('click', () => {
|
|||
|
|
if (state.detailTracks.length === 0) return;
|
|||
|
|
|
|||
|
|
isBatchDownload = true;
|
|||
|
|
trackToDownload = null;
|
|||
|
|
|
|||
|
|
// Track previous view
|
|||
|
|
if (!detailView.classList.contains('hidden')) {
|
|||
|
|
state.pendingAlbumReopen = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Get album/playlist name
|
|||
|
|
const name = $('.detail-name').textContent;
|
|||
|
|
downloadTrackName.textContent = `All tracks from "${name}" (ZIP)`;
|
|||
|
|
downloadModal.classList.remove('hidden');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Download current playing track buttons
|
|||
|
|
const downloadCurrentBtn = $('#download-current-btn');
|
|||
|
|
const fsDownloadBtn = $('#fs-download-btn');
|
|||
|
|
|
|||
|
|
function downloadCurrentTrack() {
|
|||
|
|
if (state.currentIndex < 0 || !state.queue[state.currentIndex]) {
|
|||
|
|
showToast('No track playing');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
trackToDownload = track;
|
|||
|
|
isBatchDownload = false;
|
|||
|
|
downloadTrackName.textContent = `${track.name} - ${track.artists}`;
|
|||
|
|
|
|||
|
|
// Filter format options based on track source
|
|||
|
|
updateDownloadFormatOptions(track);
|
|||
|
|
|
|||
|
|
downloadModal.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update download format options based on track source quality
|
|||
|
|
function updateDownloadFormatOptions(track) {
|
|||
|
|
const source = track?.source || '';
|
|||
|
|
const formatSelect = $('#download-format');
|
|||
|
|
const hiresGroup = $('#hires-formats');
|
|||
|
|
const sourceHint = $('#download-source-hint');
|
|||
|
|
|
|||
|
|
// Categorize sources
|
|||
|
|
const isHiResSource = source === 'dab' || source === 'qobuz';
|
|||
|
|
const isHiFiSource = source === 'deezer' || source === 'jamendo' || source === 'tidal';
|
|||
|
|
const isLossySource = source === 'ytmusic' || source === 'youtube' || source === 'podcast' ||
|
|||
|
|
source === 'import' || source === 'archive' || source === 'phish' ||
|
|||
|
|
source === 'soundcloud' || source === 'bandcamp';
|
|||
|
|
|
|||
|
|
// Re-enable all options first
|
|||
|
|
formatSelect.querySelectorAll('option, optgroup').forEach(el => {
|
|||
|
|
el.disabled = false;
|
|||
|
|
el.style.display = '';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Hide/show hint
|
|||
|
|
if (sourceHint) {
|
|||
|
|
sourceHint.classList.add('hidden');
|
|||
|
|
sourceHint.textContent = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isLossySource) {
|
|||
|
|
// Lossy source: only MP3 available
|
|||
|
|
formatSelect.querySelectorAll('option').forEach(opt => {
|
|||
|
|
if (opt.dataset.minQuality !== 'lossy') {
|
|||
|
|
opt.disabled = true;
|
|||
|
|
opt.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// Hide optgroups for lossless
|
|||
|
|
formatSelect.querySelectorAll('optgroup').forEach(grp => {
|
|||
|
|
if (grp.label !== 'Lossy') {
|
|||
|
|
grp.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
formatSelect.value = 'mp3';
|
|||
|
|
if (sourceHint) {
|
|||
|
|
sourceHint.textContent = `⚠️ Source is ${source || 'external'} - only MP3 available`;
|
|||
|
|
sourceHint.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
} else if (isHiFiSource && !isHiResSource) {
|
|||
|
|
// HiFi source (16-bit lossless): hide 24-bit options
|
|||
|
|
if (hiresGroup) hiresGroup.style.display = 'none';
|
|||
|
|
formatSelect.querySelectorAll('option[data-min-quality="hires"]').forEach(opt => {
|
|||
|
|
opt.disabled = true;
|
|||
|
|
opt.style.display = 'none';
|
|||
|
|
});
|
|||
|
|
formatSelect.value = 'flac';
|
|||
|
|
} else if (isHiResSource) {
|
|||
|
|
// Hi-Res source: show 24-bit only if Hi-Res mode is enabled
|
|||
|
|
if (!state.hiResMode) {
|
|||
|
|
if (hiresGroup) hiresGroup.style.display = 'none';
|
|||
|
|
formatSelect.querySelectorAll('option[data-min-quality="hires"]').forEach(opt => {
|
|||
|
|
opt.disabled = true;
|
|||
|
|
opt.style.display = 'none';
|
|||
|
|
});
|
|||
|
|
formatSelect.value = 'flac';
|
|||
|
|
if (sourceHint) {
|
|||
|
|
sourceHint.textContent = '💡 Enable Hi-Res mode for 24-bit options';
|
|||
|
|
sourceHint.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// All options available
|
|||
|
|
formatSelect.value = 'flac_24';
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// Unknown source: default to 16-bit lossless, show 24-bit only if Hi-Res mode
|
|||
|
|
if (!state.hiResMode) {
|
|||
|
|
if (hiresGroup) hiresGroup.style.display = 'none';
|
|||
|
|
formatSelect.querySelectorAll('option[data-min-quality="hires"]').forEach(opt => {
|
|||
|
|
opt.disabled = true;
|
|||
|
|
opt.style.display = 'none';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
formatSelect.value = 'flac';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (downloadCurrentBtn) {
|
|||
|
|
downloadCurrentBtn.addEventListener('click', downloadCurrentTrack);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (fsDownloadBtn) {
|
|||
|
|
fsDownloadBtn.addEventListener('click', downloadCurrentTrack);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeDownloadModal() {
|
|||
|
|
downloadModal.classList.add('hidden');
|
|||
|
|
trackToDownload = null;
|
|||
|
|
isBatchDownload = false;
|
|||
|
|
|
|||
|
|
// Restore Album/Playlist view if it was active
|
|||
|
|
if (state.pendingAlbumReopen) {
|
|||
|
|
detailView.classList.remove('hidden');
|
|||
|
|
state.pendingAlbumReopen = false;
|
|||
|
|
// Also ensure Results are hidden if we are in detail view
|
|||
|
|
resultsSection.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
downloadCancelBtn.addEventListener('click', closeDownloadModal);
|
|||
|
|
|
|||
|
|
downloadConfirmBtn.addEventListener('click', async () => {
|
|||
|
|
const format = downloadFormat.value;
|
|||
|
|
const track = trackToDownload; // Capture before closing modal clears it
|
|||
|
|
const isBatch = isBatchDownload;
|
|||
|
|
|
|||
|
|
closeDownloadModal();
|
|||
|
|
|
|||
|
|
if (isBatch) {
|
|||
|
|
// Batch Download Logic
|
|||
|
|
const tracks = state.detailTracks;
|
|||
|
|
// ... (rest of batch logic)
|
|||
|
|
const name = $('.detail-name').textContent || 'Batch Download';
|
|||
|
|
const artist = $('.detail-artist').textContent;
|
|||
|
|
const albumName = artist ? `${artist} - ${name}` : name;
|
|||
|
|
|
|||
|
|
showLoading(`Preparing ZIP for "${albumName}" (${tracks.length} tracks)...`);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('/api/download-batch', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
tracks: tracks.map(t => t.isrc || t.id),
|
|||
|
|
names: tracks.map(t => t.name),
|
|||
|
|
artists: tracks.map(t => t.artists),
|
|||
|
|
album_name: albumName,
|
|||
|
|
format: format
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) throw new Error('Batch download failed');
|
|||
|
|
|
|||
|
|
const blob = await response.blob();
|
|||
|
|
const url = window.URL.createObjectURL(blob);
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.style.display = 'none';
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = `${albumName}.zip`.replace(/[\\/:"*?<>|]/g, "_");
|
|||
|
|
document.body.appendChild(a);
|
|||
|
|
a.click();
|
|||
|
|
window.URL.revokeObjectURL(url);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
showToast('Batch download started!');
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Batch download error:', error);
|
|||
|
|
hideLoading();
|
|||
|
|
showError('Failed to create ZIP. Please try again.');
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!track) return;
|
|||
|
|
|
|||
|
|
// Single Track Logic using captured track variable
|
|||
|
|
showLoading(`Downloading "${track.name}" as ${format.toUpperCase()}...`);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const query = `${track.name} ${track.artists}`;
|
|||
|
|
const isrc = track.isrc || track.id;
|
|||
|
|
|
|||
|
|
const filename = `${track.name} - ${track.artists}.${format === 'alac' ? 'm4a' : format}`.replace(/[\\/:"*?<>|]/g, "_");
|
|||
|
|
|
|||
|
|
const response = await fetch(`/api/download/${isrc}?q=${encodeURIComponent(query)}&format=${format}&filename=${encodeURIComponent(filename)}`);
|
|||
|
|
|
|||
|
|
if (!response.ok) throw new Error('Download failed');
|
|||
|
|
|
|||
|
|
const blob = await response.blob();
|
|||
|
|
const url = window.URL.createObjectURL(blob);
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.style.display = 'none';
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = filename;
|
|||
|
|
document.body.appendChild(a);
|
|||
|
|
a.click();
|
|||
|
|
window.URL.revokeObjectURL(url);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
showToast('Download started!');
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Download error:', error);
|
|||
|
|
hideLoading();
|
|||
|
|
showError('Failed to download track.');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function renderTrackCard(track) {
|
|||
|
|
const year = track.release_date ? track.release_date.slice(0, 4) : '';
|
|||
|
|
// Use horizontal list item layout
|
|||
|
|
return `
|
|||
|
|
<div class="track-item" data-id="${track.id}">
|
|||
|
|
<img class="track-album-art" src="${track.album_art || '/static/icon.svg'}" alt="${escapeHtml(track.name)}" loading="lazy">
|
|||
|
|
<div class="track-info">
|
|||
|
|
<div class="track-name">${escapeHtml(track.name)}</div>
|
|||
|
|
<div class="track-artist">${escapeHtml(track.artists)}</div>
|
|||
|
|
</div>
|
|||
|
|
<span class="track-duration">${track.duration_ms ? formatTime(track.duration_ms / 1000) : (track.duration && track.duration.toString().includes(':') ? track.duration : formatTime(track.duration))}</span>
|
|||
|
|
<button class="track-action-btn queue-btn" title="Add to Queue">+</button>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ... (keep renderAlbumCard and renderArtistCard as is) ...
|
|||
|
|
|
|||
|
|
function renderAlbumCard(album) {
|
|||
|
|
const year = (album.release_date && album.release_date.length >= 4) ? album.release_date.slice(0, 4) : '';
|
|||
|
|
const trackCount = album.total_tracks ? `${album.total_tracks} tracks` : '';
|
|||
|
|
// Check for HiRes quality (if available from API)
|
|||
|
|
const isHiRes = album.audio_quality?.isHiRes || album.is_hires || false;
|
|||
|
|
const hiResBadge = isHiRes ? '<span class="hires-badge">HI-RES</span>' : '';
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="album-card" data-id="${album.id}" data-year="${year || '0'}">
|
|||
|
|
<div class="album-card-art-container">
|
|||
|
|
<img class="album-card-art" src="${album.album_art || '/static/icon.svg'}" alt="${escapeHtml(album.name)}" loading="lazy">
|
|||
|
|
${hiResBadge}
|
|||
|
|
</div>
|
|||
|
|
<div class="album-card-info">
|
|||
|
|
<p class="album-card-title">${escapeHtml(album.name)}</p>
|
|||
|
|
<p class="album-card-artist">${escapeHtml(album.artists)}</p>
|
|||
|
|
<div class="album-card-meta">
|
|||
|
|
<span>${trackCount}</span>
|
|||
|
|
<span>${year}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderArtistCard(artist) {
|
|||
|
|
const followers = artist.followers ? `${(artist.followers / 1000).toFixed(0)}K followers` : '';
|
|||
|
|
return `
|
|||
|
|
<div class="artist-item" data-id="${artist.id}">
|
|||
|
|
<img class="artist-art" src="${artist.image || '/static/icon.svg'}" alt="Artist" loading="lazy">
|
|||
|
|
<div class="artist-info">
|
|||
|
|
<p class="artist-name">${escapeHtml(artist.name)}</p>
|
|||
|
|
<p class="artist-genres">${artist.genres?.slice(0, 2).join(', ') || 'Artist'}</p>
|
|||
|
|
<p class="artist-followers">${followers}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function openAlbum(albumId) {
|
|||
|
|
// Intercept setlists to open special modal
|
|||
|
|
if (albumId.startsWith('setlist_')) {
|
|||
|
|
openSetlistModal(albumId);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showLoading('Loading album...');
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/album/${albumId}`);
|
|||
|
|
const album = await response.json();
|
|||
|
|
if (!response.ok) throw new Error(album.detail);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
console.log('Opening album modal for:', album.name, album);
|
|||
|
|
showAlbumModal(album);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to load album:', error);
|
|||
|
|
showError('Failed to load album');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Open podcast episodes in detail view (not album modal)
|
|||
|
|
async function openPodcastEpisodes(podcastId) {
|
|||
|
|
showLoading('Loading podcast episodes...');
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/album/${podcastId}`);
|
|||
|
|
const podcast = await response.json();
|
|||
|
|
if (!response.ok) throw new Error(podcast.detail);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
console.log('Opening podcast episodes:', podcast.name, podcast);
|
|||
|
|
|
|||
|
|
// Use detail view for podcasts (allows clicking episodes for info modal)
|
|||
|
|
showDetailView(podcast, podcast.tracks || []);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to load podcast:', error);
|
|||
|
|
showError('Failed to load podcast');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== SETLIST MODAL ==========
|
|||
|
|
const setlistModal = $('#setlist-modal');
|
|||
|
|
const setlistCloseBtn = $('#setlist-close-btn');
|
|||
|
|
const setlistInfo = $('#setlist-info');
|
|||
|
|
const setlistTracks = $('#setlist-tracks');
|
|||
|
|
const setlistPlayBtn = $('#setlist-play-btn');
|
|||
|
|
let currentSetlist = null;
|
|||
|
|
|
|||
|
|
if (setlistCloseBtn) {
|
|||
|
|
setlistCloseBtn.addEventListener('click', () => {
|
|||
|
|
setlistModal.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (setlistPlayBtn) {
|
|||
|
|
setlistPlayBtn.addEventListener('click', () => {
|
|||
|
|
if (currentSetlist) {
|
|||
|
|
setlistModal.classList.add('hidden');
|
|||
|
|
// Check if we have a direct audio source URL or need to search
|
|||
|
|
if (currentSetlist.audio_url) {
|
|||
|
|
// Direct import (Phish.in) - use performSearch which handles URLs
|
|||
|
|
performSearch(currentSetlist.audio_url);
|
|||
|
|
} else if (currentSetlist.audio_search) {
|
|||
|
|
// Search Archive.org (Artist Date)
|
|||
|
|
performSearch(currentSetlist.audio_search);
|
|||
|
|
} else {
|
|||
|
|
showError("No audio source found for this setlist.");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function openSetlistModal(setlistId) {
|
|||
|
|
// Get modal elements fresh each time
|
|||
|
|
const modal = document.getElementById('setlist-modal');
|
|||
|
|
const infoEl = document.getElementById('setlist-info');
|
|||
|
|
const tracksEl = document.getElementById('setlist-tracks');
|
|||
|
|
const playBtn = document.getElementById('setlist-play-btn');
|
|||
|
|
|
|||
|
|
if (!modal) {
|
|||
|
|
showError("Setlist modal not available");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showLoading('Fetching setlist...');
|
|||
|
|
try {
|
|||
|
|
// Use existing endpoint which returns formatted setlist
|
|||
|
|
const response = await fetch(`/api/album/${setlistId}`);
|
|||
|
|
const setlist = await response.json();
|
|||
|
|
|
|||
|
|
if (!response.ok) throw new Error(setlist.detail);
|
|||
|
|
|
|||
|
|
currentSetlist = setlist;
|
|||
|
|
hideLoading();
|
|||
|
|
|
|||
|
|
// Render Modal Content
|
|||
|
|
infoEl.innerHTML = `
|
|||
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|||
|
|
<h2 style="font-size: 1.5rem; margin-bottom: 4px;">${escapeHtml(setlist.artists)}</h2>
|
|||
|
|
<p style="font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 4px;">${escapeHtml(setlist.venue)}</p>
|
|||
|
|
<p style="font-size: 1rem; color: var(--accent-color);">${setlist.date || setlist.release_date}</p>
|
|||
|
|
<p style="font-size: 0.9rem; color: var(--text-tertiary); margin-top: 8px;">
|
|||
|
|
${setlist.city}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
tracksEl.innerHTML = setlist.tracks.map((track, i) => `
|
|||
|
|
<div class="setlist-track-item" style="display: flex; padding: 8px 0; border-bottom: 1px solid var(--border-color);">
|
|||
|
|
<span style="color: var(--text-tertiary); width: 30px; text-align: right; margin-right: 12px; font-variant-numeric: tabular-nums;">${i + 1}</span>
|
|||
|
|
<div style="flex: 1;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: baseline;">
|
|||
|
|
<span style="font-weight: 500;">${escapeHtml(track.name)}</span>
|
|||
|
|
${track.set_name ? `<span style="font-size: 0.75rem; color: var(--text-tertiary); background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">${track.set_name}</span>` : ''}
|
|||
|
|
</div>
|
|||
|
|
${track.info ? `<p style="font-size: 0.8rem; color: var(--text-tertiary); margin: 2px 0 0;">${escapeHtml(track.info)}</p>` : ''}
|
|||
|
|
${track.cover_info ? `<p style="font-size: 0.8rem; color: var(--text-tertiary); margin: 2px 0 0;">(Cover of ${escapeHtml(track.cover_info)})</p>` : ''}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
|
|||
|
|
// Show audio source button label
|
|||
|
|
if (setlist.audio_source === 'phish.in') {
|
|||
|
|
playBtn.textContent = "🎧 Listen on Phish.in";
|
|||
|
|
} else {
|
|||
|
|
playBtn.textContent = "🎧 Search on Archive.org";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
modal.classList.remove('hidden');
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
showError('Failed to load setlist');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== ALBUM DETAILS MODAL ==========
|
|||
|
|
const albumModal = $('#album-modal');
|
|||
|
|
const albumModalClose = $('#album-modal-close');
|
|||
|
|
const albumModalOverlay = albumModal?.querySelector('.album-modal-overlay');
|
|||
|
|
let currentAlbumData = null;
|
|||
|
|
|
|||
|
|
// Close modal
|
|||
|
|
if (albumModalClose) {
|
|||
|
|
albumModalClose.addEventListener('click', () => {
|
|||
|
|
albumModal.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close on overlay click
|
|||
|
|
if (albumModalOverlay) {
|
|||
|
|
albumModalOverlay.addEventListener('click', () => {
|
|||
|
|
albumModal.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Tab switching
|
|||
|
|
const albumTabs = albumModal?.querySelectorAll('.album-tab');
|
|||
|
|
albumTabs?.forEach(tab => {
|
|||
|
|
tab.addEventListener('click', () => {
|
|||
|
|
albumTabs.forEach(t => t.classList.remove('active'));
|
|||
|
|
tab.classList.add('active');
|
|||
|
|
|
|||
|
|
const tabName = tab.dataset.tab;
|
|||
|
|
if (tabName === 'tracks') {
|
|||
|
|
$('#album-modal-tracks')?.classList.remove('hidden');
|
|||
|
|
$('#album-modal-info-tab')?.classList.add('hidden');
|
|||
|
|
} else {
|
|||
|
|
$('#album-modal-tracks')?.classList.add('hidden');
|
|||
|
|
$('#album-modal-info-tab')?.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Action buttons
|
|||
|
|
$('#album-play-btn')?.addEventListener('click', () => {
|
|||
|
|
if (currentAlbumData?.tracks?.length) {
|
|||
|
|
state.queue = [...currentAlbumData.tracks];
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
updateQueueUI();
|
|||
|
|
loadTrack(state.queue[0]);
|
|||
|
|
albumModal.classList.add('hidden');
|
|||
|
|
showToast(`Playing "${currentAlbumData.name}"`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#album-queue-btn')?.addEventListener('click', () => {
|
|||
|
|
if (currentAlbumData?.tracks?.length) {
|
|||
|
|
state.queue.push(...currentAlbumData.tracks);
|
|||
|
|
updateQueueUI();
|
|||
|
|
albumModal.classList.add('hidden');
|
|||
|
|
showToast(`Added ${currentAlbumData.tracks.length} tracks to queue`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#album-download-btn')?.addEventListener('click', () => {
|
|||
|
|
if (currentAlbumData) {
|
|||
|
|
isBatchDownload = true;
|
|||
|
|
trackToDownload = null;
|
|||
|
|
state.detailTracks = currentAlbumData.tracks;
|
|||
|
|
downloadTrackName.textContent = `${currentAlbumData.name} (${currentAlbumData.tracks?.length || 0} tracks)`;
|
|||
|
|
downloadModal.classList.remove('hidden');
|
|||
|
|
albumModal.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#album-playlist-btn')?.addEventListener('click', () => {
|
|||
|
|
if (currentAlbumData?.tracks?.length) {
|
|||
|
|
// Open add to playlist modal with all album tracks
|
|||
|
|
if (typeof openAddToPlaylistModal === 'function') {
|
|||
|
|
openAddToPlaylistModal(currentAlbumData.tracks, currentAlbumData.name);
|
|||
|
|
} else {
|
|||
|
|
showToast('Playlist feature coming soon');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function showAlbumModal(album) {
|
|||
|
|
if (!albumModal) return;
|
|||
|
|
|
|||
|
|
currentAlbumData = album;
|
|||
|
|
const tracks = album.tracks || [];
|
|||
|
|
|
|||
|
|
// Populate modal data
|
|||
|
|
$('#album-modal-art').src = album.album_art || album.image || '/static/icon.svg';
|
|||
|
|
$('#album-modal-title').textContent = album.name || 'Unknown Album';
|
|||
|
|
$('#album-modal-artist').textContent = album.artists || 'Unknown Artist';
|
|||
|
|
|
|||
|
|
// Metadata pills
|
|||
|
|
const date = album.release_date || '';
|
|||
|
|
const genre = album.genres?.[0] || album.genre || '';
|
|||
|
|
const trackCount = tracks.length || album.total_tracks || 0;
|
|||
|
|
const totalDuration = tracks.reduce((sum, t) => sum + (parseDuration(t.duration) || 0), 0);
|
|||
|
|
const durationMins = Math.round(totalDuration / 60);
|
|||
|
|
|
|||
|
|
$('#album-modal-date').textContent = `📅 ${date || 'Unknown'}`;
|
|||
|
|
// Genre removed
|
|||
|
|
$('#album-modal-trackcount').textContent = `🎵 ${trackCount} tracks`;
|
|||
|
|
$('#album-modal-duration').textContent = `⏱️ ${durationMins || '??'} min`;
|
|||
|
|
|
|||
|
|
// Quality badge
|
|||
|
|
const format = album.format || (state.hifiMode ? 'FLAC' : 'MP3');
|
|||
|
|
const bitDepth = album.audio_quality?.maximumBitDepth || 16;
|
|||
|
|
const sampleRate = album.audio_quality?.maximumSamplingRate || 44.1;
|
|||
|
|
$('#album-modal-quality').textContent = `🎵 ${format} • ${bitDepth}bit / ${sampleRate}kHz`;
|
|||
|
|
|
|||
|
|
// Render track list
|
|||
|
|
const tracksContainer = $('#album-modal-tracks');
|
|||
|
|
tracksContainer.innerHTML = tracks.map((track, i) => `
|
|||
|
|
<div class="album-modal-track" data-index="${i}">
|
|||
|
|
<span class="album-track-num">${i + 1}.</span>
|
|||
|
|
<button class="album-track-play" title="Play" data-index="${i}">▶</button>
|
|||
|
|
<div class="album-track-info">
|
|||
|
|
<p class="album-track-name">${escapeHtml(track.name)}</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="album-track-playlist" title="Add to Playlist" data-index="${i}">♡</button>
|
|||
|
|
<span class="album-track-duration">${track.duration || '--:--'}</span>
|
|||
|
|
<div class="album-track-actions">
|
|||
|
|
<button title="Add to Queue" data-action="queue" data-index="${i}">+</button>
|
|||
|
|
<button title="Download" data-action="download" data-index="${i}">⬇</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
|
|||
|
|
// Track click handlers
|
|||
|
|
tracksContainer.querySelectorAll('.album-track-play').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const idx = parseInt(btn.dataset.index);
|
|||
|
|
state.queue = [...tracks];
|
|||
|
|
state.currentIndex = idx;
|
|||
|
|
updateQueueUI();
|
|||
|
|
loadTrack(tracks[idx]);
|
|||
|
|
albumModal.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
tracksContainer.querySelectorAll('[data-action="queue"]').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const idx = parseInt(btn.dataset.index);
|
|||
|
|
state.queue.push(tracks[idx]);
|
|||
|
|
updateQueueUI();
|
|||
|
|
showToast(`Added "${tracks[idx].name}" to queue`);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Playlist button handler
|
|||
|
|
tracksContainer.querySelectorAll('.album-track-playlist').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const idx = parseInt(btn.dataset.index);
|
|||
|
|
const track = tracks[idx];
|
|||
|
|
// Open add to playlist modal
|
|||
|
|
if (typeof openAddToPlaylistModal === 'function') {
|
|||
|
|
openAddToPlaylistModal(track);
|
|||
|
|
} else {
|
|||
|
|
showToast('Playlist feature coming soon');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
tracksContainer.querySelectorAll('[data-action="download"]').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const idx = parseInt(btn.dataset.index);
|
|||
|
|
// Hide album modal first so download modal appears on top
|
|||
|
|
albumModal.classList.add('hidden');
|
|||
|
|
// Store album data so we can reopen after download closes
|
|||
|
|
state.pendingAlbumReopen = { album, tracks };
|
|||
|
|
openDownloadModal(encodeURIComponent(JSON.stringify(tracks[idx])));
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Album Info tab
|
|||
|
|
$('#album-modal-description').textContent = album.description ||
|
|||
|
|
`${album.name} by ${album.artists}. Released ${date}. ${trackCount} tracks.`;
|
|||
|
|
|
|||
|
|
// Reset to tracks tab
|
|||
|
|
albumTabs?.forEach(t => t.classList.remove('active'));
|
|||
|
|
albumModal.querySelector('[data-tab="tracks"]')?.classList.add('active');
|
|||
|
|
$('#album-modal-tracks')?.classList.remove('hidden');
|
|||
|
|
$('#album-modal-info-tab')?.classList.add('hidden');
|
|||
|
|
|
|||
|
|
// Show modal
|
|||
|
|
albumModal.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Helper to parse duration string to seconds
|
|||
|
|
function parseDuration(dur) {
|
|||
|
|
if (!dur) return 0;
|
|||
|
|
const parts = dur.split(':').map(Number);
|
|||
|
|
if (parts.length === 2) return parts[0] * 60 + parts[1];
|
|||
|
|
if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function openArtist(artistId) {
|
|||
|
|
showLoading('Loading artist...');
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/artist/${artistId}`);
|
|||
|
|
const artist = await response.json();
|
|||
|
|
if (!response.ok) throw new Error(artist.detail);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
showDetailView(artist, artist.tracks);
|
|||
|
|
} catch (error) {
|
|||
|
|
showError('Failed to load artist');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Updated showDetailView to handle downloads
|
|||
|
|
function showDetailView(item, tracks) {
|
|||
|
|
state.detailTracks = tracks || [];
|
|||
|
|
const isUserPlaylist = item.is_user_playlist || false;
|
|||
|
|
|
|||
|
|
// Render info section
|
|||
|
|
const isArtist = item.type === 'artist';
|
|||
|
|
const image = item.album_art || item.image || '/static/icon.svg';
|
|||
|
|
const subtitle = item.artists || item.owner || (item.genres?.slice(0, 2).join(', ')) || '';
|
|||
|
|
const stats = item.total_tracks ? `${item.total_tracks} tracks` :
|
|||
|
|
item.followers ? `${(item.followers / 1000).toFixed(0)}K followers` : '';
|
|||
|
|
|
|||
|
|
detailInfo.innerHTML = `
|
|||
|
|
<img class="detail-art${isArtist ? ' artist-art' : ''}" src="${image}" alt="Cover">
|
|||
|
|
<div class="detail-meta">
|
|||
|
|
<p class="detail-name">${escapeHtml(item.name)}</p>
|
|||
|
|
<p class="detail-artist">${escapeHtml(subtitle)}</p>
|
|||
|
|
<p class="detail-stats">${stats}</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Render tracks with download button (and delete for user playlists)
|
|||
|
|
detailTracks.innerHTML = tracks.map((t, i) => `
|
|||
|
|
<div class="track-item" data-index="${i}" data-track-id="${t.id}">
|
|||
|
|
<img class="track-album-art" src="${t.album_art || image}" alt="Art" loading="lazy">
|
|||
|
|
<div class="track-info">
|
|||
|
|
<p class="track-name">${escapeHtml(t.name)}</p>
|
|||
|
|
<p class="track-artist">${escapeHtml(t.artists)}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="track-actions">
|
|||
|
|
${renderDJBadgeForTrack(t)}
|
|||
|
|
<span class="track-duration">${t.duration}</span>
|
|||
|
|
${t.source === 'podcast' ? `
|
|||
|
|
<button class="info-btn" title="Episode Details" onclick="event.stopPropagation(); showPodcastModal('${encodeURIComponent(JSON.stringify(t))}')">ℹ️</button>
|
|||
|
|
` : ''}
|
|||
|
|
<button class="download-btn" title="Download" onclick="event.stopPropagation(); openDownloadModal('${encodeURIComponent(JSON.stringify(t))}')">
|
|||
|
|
⬇
|
|||
|
|
</button>
|
|||
|
|
${isUserPlaylist ? `
|
|||
|
|
<button class="delete-track-btn" title="Remove from playlist" onclick="event.stopPropagation(); deleteFromPlaylist('${item.id}', '${t.id}')">
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
` : ''}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
|
|||
|
|
// Show detail view
|
|||
|
|
detailView.classList.remove('hidden');
|
|||
|
|
resultsSection.classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (state.djMode && tracks.length > 0) {
|
|||
|
|
fetchAudioFeaturesForTracks(tracks);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== DOWNLOAD LOGIC ==========
|
|||
|
|
|
|||
|
|
window.openDownloadModal = function(trackJson) {
|
|||
|
|
const track = JSON.parse(decodeURIComponent(trackJson));
|
|||
|
|
trackToDownload = track;
|
|||
|
|
|
|||
|
|
downloadTrackName.textContent = `${track.name} - ${track.artists}`;
|
|||
|
|
downloadModal.classList.remove('hidden');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function closeDownloadModal() {
|
|||
|
|
downloadModal.classList.add('hidden');
|
|||
|
|
trackToDownload = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
downloadCancelBtn.addEventListener('click', closeDownloadModal);
|
|||
|
|
|
|||
|
|
downloadConfirmBtn.addEventListener('click', async () => {
|
|||
|
|
if (!trackToDownload) return;
|
|||
|
|
|
|||
|
|
const format = downloadFormat.value;
|
|||
|
|
const track = trackToDownload;
|
|||
|
|
|
|||
|
|
closeDownloadModal();
|
|||
|
|
|
|||
|
|
// Show non-blocking notification or toast could be better, but we'll use loading for now
|
|||
|
|
// or just let it happen in background. Let's show a loading indicator.
|
|||
|
|
showLoading(`Downloading "${track.name}" as ${format.toUpperCase()}...`);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const query = `${track.name} ${track.artists}`;
|
|||
|
|
const isrc = track.isrc || track.id; // Fallback to ID if ISRC missing
|
|||
|
|
|
|||
|
|
// Construct filename
|
|||
|
|
const filename = `${track.artists} - ${track.name}.${format === 'alac' ? 'm4a' : format}`.replace(/[\\/:"*?<>|]/g, "_");
|
|||
|
|
|
|||
|
|
const response = await fetch(`/api/download/${isrc}?q=${encodeURIComponent(query)}&format=${format}&filename=${encodeURIComponent(filename)}`);
|
|||
|
|
|
|||
|
|
if (!response.ok) throw new Error('Download failed');
|
|||
|
|
|
|||
|
|
const blob = await response.blob();
|
|||
|
|
const url = window.URL.createObjectURL(blob);
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.style.display = 'none';
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = filename;
|
|||
|
|
document.body.appendChild(a);
|
|||
|
|
a.click();
|
|||
|
|
window.URL.revokeObjectURL(url);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Download error:', error);
|
|||
|
|
showError('Failed to download track. Please try again.');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Configure Save to Drive button
|
|||
|
|
$('#download-drive-btn').addEventListener('click', async () => {
|
|||
|
|
if (!trackToDownload) return;
|
|||
|
|
|
|||
|
|
// Ensure signed in logic
|
|||
|
|
if (!googleAccessToken) {
|
|||
|
|
await signInWithGoogle();
|
|||
|
|
if (!googleAccessToken) return; // User cancelled or failed
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const format = downloadFormat.value;
|
|||
|
|
const track = trackToDownload;
|
|||
|
|
|
|||
|
|
closeDownloadModal();
|
|||
|
|
|
|||
|
|
showLoading(`Saving "${track.name}" to Google Drive (as ${format.toUpperCase()})...`);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 1. Get Folder ID
|
|||
|
|
const folderId = await findOrCreateFreedifyFolder();
|
|||
|
|
if (!folderId) throw new Error('Could not find or create "Freedify" folder');
|
|||
|
|
|
|||
|
|
// 2. Call Backend to Upload
|
|||
|
|
const query = `${track.name} ${track.artists}`;
|
|||
|
|
const isrc = track.isrc || track.id;
|
|||
|
|
|
|||
|
|
// Construct filename
|
|||
|
|
const filename = `${track.artists} - ${track.name}.${format === 'alac' ? 'm4a' : format}`.replace(/[\\/:"*?<>|]/g, "_");
|
|||
|
|
|
|||
|
|
const response = await fetch('/api/drive/upload', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
isrc: isrc,
|
|||
|
|
access_token: googleAccessToken,
|
|||
|
|
format: format,
|
|||
|
|
folder_id: folderId,
|
|||
|
|
filename: filename,
|
|||
|
|
q: query
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
const err = await response.json();
|
|||
|
|
throw new Error(err.detail || 'Upload failed');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
hideLoading();
|
|||
|
|
showToast(`✅ Saved to Drive: ${result.name}`);
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Drive save error:', error);
|
|||
|
|
hideLoading();
|
|||
|
|
showError(`Failed to save to Drive: ${error.message}`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close modal on outside click
|
|||
|
|
downloadModal.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === downloadModal) closeDownloadModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== KEYBOARD SHORTCUTS ==========
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|||
|
|
|
|||
|
|
switch (e.code) {
|
|||
|
|
case 'Space':
|
|||
|
|
e.preventDefault();
|
|||
|
|
togglePlay();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
if (e.shiftKey) getActivePlayer().currentTime += 10;
|
|||
|
|
else playNext();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
if (e.shiftKey) getActivePlayer().currentTime -= 10;
|
|||
|
|
else playPrevious();
|
|||
|
|
break;
|
|||
|
|
case 'Escape':
|
|||
|
|
if (!downloadModal.classList.contains('hidden')) {
|
|||
|
|
closeDownloadModal();
|
|||
|
|
} else if (!detailView.classList.contains('hidden')) {
|
|||
|
|
hideDetailView();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== SERVICE WORKER ==========
|
|||
|
|
if ('serviceWorker' in navigator) {
|
|||
|
|
navigator.serviceWorker.register('/sw.js').catch(console.error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Initial state
|
|||
|
|
showEmptyState();
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Duplicate render functions removed - using definitions at line 753
|
|||
|
|
|
|||
|
|
// ========== ALBUM / ARTIST / PLAYLIST DETAIL VIEW ==========
|
|||
|
|
// Note: openAlbum is defined earlier with setlist modal support
|
|||
|
|
|
|||
|
|
async function openArtist(artistId) {
|
|||
|
|
showLoading('Loading artist...');
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/artist/${artistId}`);
|
|||
|
|
const artist = await response.json();
|
|||
|
|
if (!response.ok) throw new Error(artist.detail);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
showDetailView(artist, artist.tracks);
|
|||
|
|
} catch (error) {
|
|||
|
|
showError('Failed to load artist');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showDetailView(item, tracks) {
|
|||
|
|
state.detailTracks = tracks || [];
|
|||
|
|
|
|||
|
|
// Render info section
|
|||
|
|
const isArtist = item.type === 'artist';
|
|||
|
|
const image = item.album_art || item.image || '/static/icon.svg';
|
|||
|
|
const subtitle = item.artists || item.owner || (item.genres?.slice(0, 2).join(', ')) || '';
|
|||
|
|
const stats = item.total_tracks ? `${item.total_tracks} tracks` :
|
|||
|
|
item.followers ? `${(item.followers / 1000).toFixed(0)}K followers` : '';
|
|||
|
|
|
|||
|
|
// Check if this is already a saved playlist (to avoid re-saving)
|
|||
|
|
const isSavedPlaylist = item.id && item.id.startsWith('playlist_');
|
|||
|
|
|
|||
|
|
detailInfo.innerHTML = `
|
|||
|
|
<img class="detail-art${isArtist ? ' artist-art' : ''}" src="${image}" alt="Cover">
|
|||
|
|
<div class="detail-meta">
|
|||
|
|
<p class="detail-name">${escapeHtml(item.name)}</p>
|
|||
|
|
<p class="detail-artist">${escapeHtml(subtitle)}</p>
|
|||
|
|
<p class="detail-stats">${stats}</p>
|
|||
|
|
${!isSavedPlaylist && tracks.length > 0 ? `<button id="save-playlist-btn" class="save-playlist-btn">Save to Playlist</button>` : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Add save playlist handler
|
|||
|
|
const saveBtn = $('#save-playlist-btn');
|
|||
|
|
if (saveBtn) {
|
|||
|
|
saveBtn.addEventListener('click', () => {
|
|||
|
|
const name = prompt('Enter playlist name:', item.name || 'My Playlist');
|
|||
|
|
if (name) {
|
|||
|
|
createPlaylist(name, state.detailTracks);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Render tracks
|
|||
|
|
detailTracks.innerHTML = tracks.map((t, i) => `
|
|||
|
|
<div class="track-item" data-index="${i}">
|
|||
|
|
<img class="track-album-art" src="${t.album_art || image}" alt="Art" loading="lazy">
|
|||
|
|
<div class="track-info">
|
|||
|
|
<p class="track-name">${escapeHtml(t.name)}</p>
|
|||
|
|
<p class="track-artist">${escapeHtml(t.artists)}</p>
|
|||
|
|
</div>
|
|||
|
|
<span class="track-duration">${t.duration}</span>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
|
|||
|
|
// Add click handlers
|
|||
|
|
$$('#detail-tracks .track-item').forEach((el, i) => {
|
|||
|
|
el.addEventListener('click', () => {
|
|||
|
|
const track = tracks[i];
|
|||
|
|
// Show podcast modal for podcast episodes, otherwise play directly
|
|||
|
|
if (track.source === 'podcast' && track.description) {
|
|||
|
|
showPodcastModal(track);
|
|||
|
|
} else {
|
|||
|
|
playTrack(track);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Show detail view
|
|||
|
|
detailView.classList.remove('hidden');
|
|||
|
|
resultsSection.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideDetailView() {
|
|||
|
|
detailView.classList.add('hidden');
|
|||
|
|
resultsSection.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
backBtn.addEventListener('click', hideDetailView);
|
|||
|
|
|
|||
|
|
queueAllBtn.addEventListener('click', () => {
|
|||
|
|
if (state.detailTracks.length === 0) return;
|
|||
|
|
|
|||
|
|
// Add all tracks to queue
|
|||
|
|
state.detailTracks.forEach(track => {
|
|||
|
|
if (!state.queue.find(t => t.id === track.id)) {
|
|||
|
|
state.queue.push(track);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
updateQueueUI();
|
|||
|
|
|
|||
|
|
// Start playing first if nothing is playing
|
|||
|
|
if (state.currentIndex === -1 && state.queue.length > 0) {
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
loadTrack(state.queue[0]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hideDetailView();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Shuffle & Play button
|
|||
|
|
shuffleBtn.addEventListener('click', () => {
|
|||
|
|
if (state.detailTracks.length === 0) return;
|
|||
|
|
|
|||
|
|
// Copy and shuffle tracks using Fisher-Yates
|
|||
|
|
const shuffled = [...state.detailTracks];
|
|||
|
|
for (let i = shuffled.length - 1; i > 0; i--) {
|
|||
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|||
|
|
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Clear queue and add shuffled tracks
|
|||
|
|
state.queue = [];
|
|||
|
|
shuffled.forEach(track => state.queue.push(track));
|
|||
|
|
|
|||
|
|
// Start playing first shuffled track
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
updateQueueUI();
|
|||
|
|
loadTrack(state.queue[0]);
|
|||
|
|
|
|||
|
|
hideDetailView();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== PLAYBACK ==========
|
|||
|
|
function playTrack(track) {
|
|||
|
|
if (!track || !track.id) {
|
|||
|
|
console.error("playTrack called with invalid track:", track);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// Add to queue if not already there
|
|||
|
|
const existingIndex = state.queue.findIndex(t => t && t.id === track.id);
|
|||
|
|
if (existingIndex === -1) {
|
|||
|
|
state.queue.push(track);
|
|||
|
|
state.currentIndex = state.queue.length - 1;
|
|||
|
|
} else {
|
|||
|
|
state.currentIndex = existingIndex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateQueueUI();
|
|||
|
|
|
|||
|
|
// Check if this track is already preloaded and ready - use it directly!
|
|||
|
|
if (preloadedTrackId === track.id && preloadedReady && preloadedPlayer) {
|
|||
|
|
console.log('Using preloaded track:', track.name);
|
|||
|
|
|
|||
|
|
// Reset preload state
|
|||
|
|
preloadedTrackId = null;
|
|||
|
|
preloadedReady = false;
|
|||
|
|
|
|||
|
|
// Update all UI
|
|||
|
|
updatePlayerUI();
|
|||
|
|
updateFullscreenUI(track);
|
|||
|
|
|
|||
|
|
// Switch to preloaded player
|
|||
|
|
performGaplessSwitch();
|
|||
|
|
|
|||
|
|
// Update format badge
|
|||
|
|
updateFormatBadge(getActivePlayer().src);
|
|||
|
|
|
|||
|
|
// Preload the next one
|
|||
|
|
setTimeout(preloadNextTrack, 500);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadTrack(track);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== ALBUM ART COLOR EXTRACTION ==========
|
|||
|
|
function extractDominantColor(imageUrl) {
|
|||
|
|
// Create an image to load the album art
|
|||
|
|
const img = new Image();
|
|||
|
|
img.crossOrigin = 'anonymous'; // Allow cross-origin images
|
|||
|
|
|
|||
|
|
img.onload = () => {
|
|||
|
|
try {
|
|||
|
|
// Create a small canvas for sampling
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
const sampleSize = 10; // Sample at 10x10 for performance
|
|||
|
|
canvas.width = sampleSize;
|
|||
|
|
canvas.height = sampleSize;
|
|||
|
|
|
|||
|
|
// Draw the scaled-down image
|
|||
|
|
ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
|
|||
|
|
|
|||
|
|
// Get pixel data
|
|||
|
|
const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
|
|||
|
|
const pixels = imageData.data;
|
|||
|
|
|
|||
|
|
// Calculate average color (excluding very dark/light pixels)
|
|||
|
|
let r = 0, g = 0, b = 0, count = 0;
|
|||
|
|
for (let i = 0; i < pixels.length; i += 4) {
|
|||
|
|
const pr = pixels[i], pg = pixels[i + 1], pb = pixels[i + 2];
|
|||
|
|
const brightness = (pr + pg + pb) / 3;
|
|||
|
|
|
|||
|
|
// Skip very dark or very light pixels
|
|||
|
|
if (brightness > 30 && brightness < 220) {
|
|||
|
|
r += pr;
|
|||
|
|
g += pg;
|
|||
|
|
b += pb;
|
|||
|
|
count++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (count > 0) {
|
|||
|
|
r = Math.round(r / count);
|
|||
|
|
g = Math.round(g / count);
|
|||
|
|
b = Math.round(b / count);
|
|||
|
|
|
|||
|
|
// Apply to player section as a subtle gradient
|
|||
|
|
const playerSection = $('.player-section');
|
|||
|
|
if (playerSection) {
|
|||
|
|
playerSection.style.background = `linear-gradient(180deg, rgba(${r}, ${g}, ${b}, 0.15) 0%, var(--bg-primary) 100%)`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
// Canvas tainted or other error - silently ignore
|
|||
|
|
console.log('Could not extract color from album art');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
img.onerror = () => {
|
|||
|
|
// Reset to default if image fails
|
|||
|
|
const playerSection = $('.player-section');
|
|||
|
|
if (playerSection) {
|
|||
|
|
playerSection.style.background = '';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
img.src = imageUrl;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updatePlayerUI() {
|
|||
|
|
if (state.currentIndex < 0 || !state.queue[state.currentIndex]) return;
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
|
|||
|
|
// Basic Info
|
|||
|
|
playerBar.classList.remove('hidden');
|
|||
|
|
playerTitle.textContent = track.name;
|
|||
|
|
playerArtist.textContent = track.artists || '-';
|
|||
|
|
|
|||
|
|
// Update visualizer info if active (Immersive Mode support)
|
|||
|
|
if (visualizerActive && typeof showVisualizerInfoBriefly === 'function') {
|
|||
|
|
showVisualizerInfoBriefly();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Album name (clickable to open album)
|
|||
|
|
if (playerAlbum) {
|
|||
|
|
playerAlbum.textContent = track.album || '-';
|
|||
|
|
playerAlbum.dataset.albumId = track.album_id || '';
|
|||
|
|
playerAlbum.dataset.albumName = track.album || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Release year only (extract from YYYY-MM-DD)
|
|||
|
|
if (playerYear) {
|
|||
|
|
const year = track.release_date ? track.release_date.slice(0, 4) : '';
|
|||
|
|
playerYear.textContent = year ? `(${year})` : '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
playerArt.src = track.album_art || '/static/icon.svg';
|
|||
|
|
|
|||
|
|
// Extract dominant color for player background
|
|||
|
|
if (track.album_art) {
|
|||
|
|
extractDominantColor(track.album_art);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// DJ Mode Info
|
|||
|
|
const playerDJInfo = $('#player-dj-info');
|
|||
|
|
if (state.djMode && playerDJInfo) {
|
|||
|
|
// Use embedded audio_features for local tracks, cache for others
|
|||
|
|
const isLocal = track.id?.startsWith('local_');
|
|||
|
|
const feat = isLocal ? track.audio_features : state.audioFeaturesCache[track.id];
|
|||
|
|
|
|||
|
|
if (feat) {
|
|||
|
|
const camelotClass = feat.camelot ? `camelot-${feat.camelot}` : '';
|
|||
|
|
playerDJInfo.innerHTML = `
|
|||
|
|
<div class="dj-badge-container" style="display: flex;">
|
|||
|
|
<span class="dj-badge bpm-badge">${feat.bpm} BPM</span>
|
|||
|
|
<span class="dj-badge camelot-badge ${camelotClass}">${feat.camelot}</span>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
playerDJInfo.classList.remove('hidden');
|
|||
|
|
} else {
|
|||
|
|
// If active track is missing features, fetch them (debounce/check logic needed to avoid loop?)
|
|||
|
|
// fetchAudioFeaturesForTracks([track]); // Avoiding loop, fetch should handle it
|
|||
|
|
playerDJInfo.innerHTML = '<div class="dj-badge-placeholder"></div>';
|
|||
|
|
playerDJInfo.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
} else if (playerDJInfo) {
|
|||
|
|
playerDJInfo.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update Mini Player
|
|||
|
|
if (pipWindow) updateMiniPlayer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update audio format badge (FLAC/MP3)
|
|||
|
|
async function updateFormatBadge(audioSrc) {
|
|||
|
|
const badge = document.getElementById('audio-format-badge');
|
|||
|
|
if (!badge) return;
|
|||
|
|
|
|||
|
|
// For local files, show nothing
|
|||
|
|
if (!audioSrc || audioSrc.startsWith('blob:') || audioSrc.startsWith('file:')) {
|
|||
|
|
badge.classList.add('hidden');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Get current track source to determine actual quality
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
const source = currentTrack?.source || '';
|
|||
|
|
|
|||
|
|
// Determine format based on source
|
|||
|
|
const isHiResSource = source === 'dab' || source === 'qobuz';
|
|||
|
|
const isHiFiSource = source === 'deezer' || source === 'jamendo';
|
|||
|
|
const isLossySource = source === 'ytmusic' || source === 'youtube' || source === 'podcast' || source === 'import';
|
|||
|
|
|
|||
|
|
badge.classList.remove('hidden', 'mp3', 'flac', 'hi-res');
|
|||
|
|
|
|||
|
|
if (isHiResSource && state.hiResMode) {
|
|||
|
|
// Hi-Res 24-bit (Dab/Qobuz with Hi-Res mode)
|
|||
|
|
badge.classList.add('flac', 'hi-res');
|
|||
|
|
badge.textContent = 'Hi-Res';
|
|||
|
|
} else if (isHiResSource || isHiFiSource) {
|
|||
|
|
// HiFi 16-bit FLAC (Deezer, Jamendo, or Dab without Hi-Res mode)
|
|||
|
|
badge.classList.add('flac');
|
|||
|
|
badge.textContent = 'FLAC';
|
|||
|
|
} else if (isLossySource) {
|
|||
|
|
// Lossy MP3/AAC (YouTube, podcasts, imports)
|
|||
|
|
badge.classList.add('mp3');
|
|||
|
|
badge.textContent = 'MP3';
|
|||
|
|
} else {
|
|||
|
|
// Unknown source - default based on preference
|
|||
|
|
badge.classList.add('flac');
|
|||
|
|
if (state.hiResMode) {
|
|||
|
|
badge.classList.add('hi-res');
|
|||
|
|
}
|
|||
|
|
badge.textContent = 'FLAC';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Also update the HiFi button in header
|
|||
|
|
if (typeof updateHifiButtonUI === 'function') {
|
|||
|
|
updateHifiButtonUI();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Player artist/album click handlers for discovery
|
|||
|
|
if (playerArtist) {
|
|||
|
|
playerArtist.addEventListener('click', () => {
|
|||
|
|
const artistName = playerArtist.textContent;
|
|||
|
|
if (artistName && artistName !== '-') {
|
|||
|
|
state.searchType = 'artist';
|
|||
|
|
document.querySelectorAll('.type-btn, .type-btn-menu').forEach(b => b.classList.remove('active'));
|
|||
|
|
const artistBtn = document.querySelector('[data-type="artist"]');
|
|||
|
|
if (artistBtn) artistBtn.classList.add('active');
|
|||
|
|
searchInput.value = artistName;
|
|||
|
|
performSearch(artistName);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (playerAlbum) {
|
|||
|
|
playerAlbum.addEventListener('click', () => {
|
|||
|
|
const albumId = playerAlbum.dataset.albumId;
|
|||
|
|
if (albumId) {
|
|||
|
|
openAlbum(albumId);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Track load state to prevent duplicates
|
|||
|
|
let loadInProgress = false;
|
|||
|
|
let loadTimeoutId = null;
|
|||
|
|
|
|||
|
|
async function loadTrack(track) {
|
|||
|
|
// Prevent duplicate loads
|
|||
|
|
if (loadInProgress) {
|
|||
|
|
console.log('Load already in progress, skipping duplicate load for:', track.name);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadInProgress = true;
|
|||
|
|
showLoading(`Loading "${track.name}"...`);
|
|||
|
|
state.scrobbledCurrent = false; // Reset scrobble status
|
|||
|
|
playerBar.classList.remove('hidden');
|
|||
|
|
|
|||
|
|
// Reset preload state on direct track load
|
|||
|
|
preloadedTrackId = null;
|
|||
|
|
preloadedPlayer = null;
|
|||
|
|
if (crossfadeTimeout) {
|
|||
|
|
clearTimeout(crossfadeTimeout);
|
|||
|
|
crossfadeTimeout = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Clear any existing load timeout
|
|||
|
|
if (loadTimeoutId) {
|
|||
|
|
clearTimeout(loadTimeoutId);
|
|||
|
|
loadTimeoutId = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updatePlayerUI();
|
|||
|
|
updateQueueUI();
|
|||
|
|
updateFullscreenUI(track); // Sync FS
|
|||
|
|
|
|||
|
|
// Get the active player
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
const playerGain = activePlayer === 1 ? gainNode1 : gainNode2;
|
|||
|
|
|
|||
|
|
// Make sure active player gain is at 1
|
|||
|
|
if (playerGain) playerGain.gain.value = 1;
|
|||
|
|
|
|||
|
|
// For ListenBrainz tracks, try to enrich with album art from search
|
|||
|
|
if (track.source === 'listenbrainz' && track.album_art === '/static/icon.svg') {
|
|||
|
|
try {
|
|||
|
|
const searchQuery = track.artists + ' ' + track.name;
|
|||
|
|
const searchRes = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}&type=track&limit=1`);
|
|||
|
|
const searchData = await searchRes.json();
|
|||
|
|
if (searchData.results && searchData.results.length > 0) {
|
|||
|
|
const foundTrack = searchData.results[0];
|
|||
|
|
if (foundTrack.album_art && foundTrack.album_art !== '/static/icon.svg') {
|
|||
|
|
track.album_art = foundTrack.album_art;
|
|||
|
|
console.log('Enriched LB track with album art:', foundTrack.album_art);
|
|||
|
|
updatePlayerUI(); // Refresh the player bar with new art
|
|||
|
|
updateFullscreenUI(track);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log('Could not enrich LB track art:', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Play
|
|||
|
|
if (track.is_local && track.src) {
|
|||
|
|
player.src = track.src;
|
|||
|
|
} else {
|
|||
|
|
const hiresParam = state.hiResMode ? '&hires=true' : '&hires=false';
|
|||
|
|
player.src = `/api/stream/${track.isrc || track.id}?q=${encodeURIComponent(track.name + ' ' + track.artists)}${hiresParam}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
player.load();
|
|||
|
|
|
|||
|
|
await new Promise((resolve, reject) => {
|
|||
|
|
const cleanup = () => {
|
|||
|
|
player.oncanplay = null;
|
|||
|
|
player.onerror = null;
|
|||
|
|
if (loadTimeoutId) {
|
|||
|
|
clearTimeout(loadTimeoutId);
|
|||
|
|
loadTimeoutId = null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
player.oncanplay = () => {
|
|||
|
|
cleanup();
|
|||
|
|
resolve();
|
|||
|
|
};
|
|||
|
|
player.onerror = () => {
|
|||
|
|
cleanup();
|
|||
|
|
reject(new Error('Failed to load audio'));
|
|||
|
|
};
|
|||
|
|
loadTimeoutId = setTimeout(() => {
|
|||
|
|
cleanup();
|
|||
|
|
reject(new Error('Timeout loading audio'));
|
|||
|
|
}, 120000);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
player.play();
|
|||
|
|
state.isPlaying = true;
|
|||
|
|
updatePlayButton();
|
|||
|
|
updateMediaSession(track);
|
|||
|
|
|
|||
|
|
// Detect audio format and update badge
|
|||
|
|
updateFormatBadge(player.src);
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Playback error:', error);
|
|||
|
|
showError('Failed to load track. Please try again.');
|
|||
|
|
} finally {
|
|||
|
|
loadInProgress = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Player controls
|
|||
|
|
playBtn.addEventListener('click', togglePlay);
|
|||
|
|
prevBtn.addEventListener('click', playPrevious);
|
|||
|
|
if (miniPlayerBtn) miniPlayerBtn.addEventListener('click', toggleMiniPlayer);
|
|||
|
|
nextBtn.addEventListener('click', playNext);
|
|||
|
|
|
|||
|
|
// Shuffle current queue
|
|||
|
|
shuffleQueueBtn.addEventListener('click', () => {
|
|||
|
|
if (state.queue.length <= 1) return;
|
|||
|
|
|
|||
|
|
// Get currently playing track
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
|
|||
|
|
// Remove current track from queue temporarily
|
|||
|
|
const otherTracks = state.queue.filter((_, i) => i !== state.currentIndex);
|
|||
|
|
|
|||
|
|
// Shuffle the other tracks using Fisher-Yates
|
|||
|
|
for (let i = otherTracks.length - 1; i > 0; i--) {
|
|||
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|||
|
|
[otherTracks[i], otherTracks[j]] = [otherTracks[j], otherTracks[i]];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Put current track at front, add shuffled tracks after
|
|||
|
|
state.queue = [currentTrack, ...otherTracks];
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
|
|||
|
|
updateQueueUI();
|
|||
|
|
|
|||
|
|
// Visual feedback
|
|||
|
|
shuffleQueueBtn.style.transform = 'scale(1.2)';
|
|||
|
|
setTimeout(() => shuffleQueueBtn.style.transform = '', 200);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function togglePlay() {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
|
|||
|
|
// Check if player has source logic (for refresh case)
|
|||
|
|
if (!player.src && state.queue.length > 0 && state.currentIndex >= 0) {
|
|||
|
|
// Queue exists but nothing loaded yet (refresh case)
|
|||
|
|
loadTrack(state.queue[state.currentIndex]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (player.paused) {
|
|||
|
|
player.play().catch(e => {
|
|||
|
|
console.warn('Play failed, trying to reload:', e);
|
|||
|
|
if (state.queue[state.currentIndex]) {
|
|||
|
|
loadTrack(state.queue[state.currentIndex]);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
player.pause();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function playNext() {
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
// Podcast: seek +15s instead of next track
|
|||
|
|
if (currentTrack && currentTrack.source === 'podcast') {
|
|||
|
|
player.currentTime = Math.min(player.duration || 0, player.currentTime + 15);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (state.currentIndex < state.queue.length - 1) {
|
|||
|
|
state.currentIndex++;
|
|||
|
|
|
|||
|
|
// Try to use preloaded player (no loading screen) - ONLY if ready
|
|||
|
|
if (preloadedReady && preloadedPlayer && preloadedTrackId === state.queue[state.currentIndex]?.id) {
|
|||
|
|
console.log('playNext: Using preloaded player for:', state.queue[state.currentIndex].name);
|
|||
|
|
preloadedTrackId = null;
|
|||
|
|
preloadedReady = false;
|
|||
|
|
updatePlayerUI();
|
|||
|
|
updateQueueUI();
|
|||
|
|
updateFullscreenUI(state.queue[state.currentIndex]);
|
|||
|
|
performGaplessSwitch();
|
|||
|
|
updateFormatBadge(getActivePlayer().src);
|
|||
|
|
updateMediaSession(state.queue[state.currentIndex]);
|
|||
|
|
setTimeout(preloadNextTrack, 500);
|
|||
|
|
} else {
|
|||
|
|
loadTrack(state.queue[state.currentIndex]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function playPrevious() {
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
// Podcast: seek -15s instead of prev track
|
|||
|
|
if (currentTrack && currentTrack.source === 'podcast') {
|
|||
|
|
player.currentTime = Math.max(0, player.currentTime - 15);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (player.currentTime > 3) {
|
|||
|
|
player.currentTime = 0;
|
|||
|
|
} else if (state.currentIndex > 0) {
|
|||
|
|
state.currentIndex--;
|
|||
|
|
loadTrack(state.queue[state.currentIndex]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Shared event handlers for both audio players
|
|||
|
|
function handlePlay() {
|
|||
|
|
state.isPlaying = true;
|
|||
|
|
updatePlayButton();
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
if (track) submitNowPlaying(track);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handlePause() {
|
|||
|
|
// Only update if the active player paused
|
|||
|
|
if (this === getActivePlayer()) {
|
|||
|
|
state.isPlaying = false;
|
|||
|
|
updatePlayButton();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleProgress() {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (player.duration > 0 && player.buffered.length > 0) {
|
|||
|
|
// Check if we have buffered enough to start next download
|
|||
|
|
const bufferedEnd = player.buffered.end(player.buffered.length - 1);
|
|||
|
|
if (bufferedEnd >= player.duration - 60) { // 60 seconds before end (for long songs)
|
|||
|
|
preloadNextTrack();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Bind events to both players
|
|||
|
|
audioPlayer.addEventListener('play', handlePlay);
|
|||
|
|
audioPlayer2.addEventListener('play', handlePlay);
|
|||
|
|
audioPlayer.addEventListener('pause', handlePause);
|
|||
|
|
audioPlayer2.addEventListener('pause', handlePause);
|
|||
|
|
audioPlayer.addEventListener('progress', handleProgress);
|
|||
|
|
audioPlayer2.addEventListener('progress', handleProgress);
|
|||
|
|
|
|||
|
|
// Ended fallback for audioPlayer2 only (audioPlayer uses playNextWithRepeat instead)
|
|||
|
|
// Note: audioPlayer's ended handler is added later as playNextWithRepeat
|
|||
|
|
audioPlayer2.addEventListener('ended', () => {
|
|||
|
|
// Skip if gapless already handled this transition
|
|||
|
|
if (crossfadeTimeout) return;
|
|||
|
|
if (getActivePlayer() === audioPlayer2) playNext();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
audioPlayer.addEventListener('timeupdate', handleTimeUpdate);
|
|||
|
|
audioPlayer2.addEventListener('timeupdate', handleTimeUpdate);
|
|||
|
|
|
|||
|
|
function handleTimeUpdate() {
|
|||
|
|
// Update Mini Player Time
|
|||
|
|
if (pipWindow) updateMiniPlayer();
|
|||
|
|
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (player.duration) {
|
|||
|
|
currentTime.textContent = formatTime(player.currentTime);
|
|||
|
|
duration.textContent = formatTime(player.duration);
|
|||
|
|
progressBar.value = (player.currentTime / player.duration) * 100;
|
|||
|
|
|
|||
|
|
// Sync FS Progress
|
|||
|
|
fsCurrentTime.textContent = currentTime.textContent;
|
|||
|
|
fsDuration.textContent = duration.textContent;
|
|||
|
|
fsProgressBar.value = progressBar.value;
|
|||
|
|
|
|||
|
|
// Update CSS variable for gradient fill
|
|||
|
|
progressBar.style.setProperty('--value', progressBar.value + '%');
|
|||
|
|
fsProgressBar.style.setProperty('--value', progressBar.value + '%');
|
|||
|
|
|
|||
|
|
// Scrobble Check (50% or 4 mins)
|
|||
|
|
if (!state.scrobbledCurrent && state.queue[state.currentIndex]) {
|
|||
|
|
if (player.currentTime > 240 || player.currentTime > player.duration / 2) {
|
|||
|
|
submitScrobble(state.queue[state.currentIndex]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Time-based preload trigger (1 minute before end - better for long songs)
|
|||
|
|
const timeRemaining = player.duration - player.currentTime;
|
|||
|
|
if (timeRemaining <= 60 && timeRemaining > 0 && !preloadedTrackId) {
|
|||
|
|
preloadNextTrack();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Crossfade/Gapless trigger: start transition before track ends
|
|||
|
|
// Using 200ms buffer - try to use preloaded player even if not flagged "ready"
|
|||
|
|
const crossfadeTime = crossfadeEnabled ? CROSSFADE_DURATION / 1000 : 0.2;
|
|||
|
|
|
|||
|
|
// Trigger if preloaded player exists (don't strictly require preloadedReady - streaming can start anyway)
|
|||
|
|
if (timeRemaining <= crossfadeTime && timeRemaining > 0 && preloadedPlayer && !crossfadeTimeout) {
|
|||
|
|
if (state.currentIndex < state.queue.length - 1) {
|
|||
|
|
// Mark that we're handling crossfade
|
|||
|
|
crossfadeTimeout = setTimeout(() => {
|
|||
|
|
crossfadeTimeout = null;
|
|||
|
|
}, crossfadeTime * 1000 + 500);
|
|||
|
|
|
|||
|
|
// Advance to next track
|
|||
|
|
state.currentIndex++;
|
|||
|
|
state.scrobbledCurrent = false;
|
|||
|
|
preloadedTrackId = null;
|
|||
|
|
preloadedReady = false; // Reset ready flag
|
|||
|
|
|
|||
|
|
// Update UI for new track
|
|||
|
|
updatePlayerUI();
|
|||
|
|
updateQueueUI();
|
|||
|
|
updateFullscreenUI(state.queue[state.currentIndex]); // Sync fullscreen UI
|
|||
|
|
|
|||
|
|
// Perform crossfade or gapless switch
|
|||
|
|
if (crossfadeEnabled) {
|
|||
|
|
performCrossfade();
|
|||
|
|
} else {
|
|||
|
|
performGaplessSwitch();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update format badge
|
|||
|
|
updateFormatBadge(getActivePlayer().src);
|
|||
|
|
|
|||
|
|
// Preload the next one
|
|||
|
|
setTimeout(preloadNextTrack, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
progressBar.addEventListener('input', (e) => {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (player.duration && Number.isFinite(player.duration)) {
|
|||
|
|
player.currentTime = (e.target.value / 100) * player.duration;
|
|||
|
|
e.target.style.setProperty('--value', e.target.value + '%');
|
|||
|
|
if (typeof fsProgressBar !== 'undefined') fsProgressBar.style.setProperty('--value', e.target.value + '%');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function updatePlayButton() {
|
|||
|
|
playBtn.textContent = state.isPlaying ? '⏸' : '▶';
|
|||
|
|
if (typeof updateFSPlayBtn === 'function') updateFSPlayBtn();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== QUEUE ==========
|
|||
|
|
// queueClose and queueClear are defined at top level
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
|
|||
|
|
queueBtn.addEventListener('click', () => {
|
|||
|
|
queueSection.classList.toggle('hidden');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
queueClose.addEventListener('click', () => {
|
|||
|
|
queueSection.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
queueClear.addEventListener('click', () => {
|
|||
|
|
state.queue = [];
|
|||
|
|
state.currentIndex = -1;
|
|||
|
|
updateQueueUI();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Delegated click handler for queue items (handles play, remove, and add-to-playlist)
|
|||
|
|
queueContainer.addEventListener('click', (e) => {
|
|||
|
|
// Check if clicked on remove button
|
|||
|
|
const removeBtn = e.target.closest('.queue-remove-btn');
|
|||
|
|
if (removeBtn) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const index = parseInt(removeBtn.dataset.index, 10);
|
|||
|
|
window.removeFromQueue(index);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check if clicked on heart button (add to playlist)
|
|||
|
|
const heartBtn = e.target.closest('.queue-heart-btn');
|
|||
|
|
if (heartBtn) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const index = parseInt(heartBtn.dataset.index, 10);
|
|||
|
|
const track = state.queue[index];
|
|||
|
|
if (track && window.openAddToPlaylistModal) {
|
|||
|
|
window.openAddToPlaylistModal(track);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check if clicked on queue item (to play)
|
|||
|
|
const queueItem = e.target.closest('.queue-item');
|
|||
|
|
if (queueItem) {
|
|||
|
|
const index = parseInt(queueItem.dataset.index, 10);
|
|||
|
|
state.currentIndex = index;
|
|||
|
|
loadTrack(state.queue[index]);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== QUEUE PERSISTENCE ==========
|
|||
|
|
function saveQueueToStorage() {
|
|||
|
|
try {
|
|||
|
|
// Save queue and current index
|
|||
|
|
const queueData = {
|
|||
|
|
queue: state.queue,
|
|||
|
|
currentIndex: state.currentIndex
|
|||
|
|
};
|
|||
|
|
localStorage.setItem('freedify_queue', JSON.stringify(queueData));
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('Could not save queue to storage:', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadQueueFromStorage() {
|
|||
|
|
try {
|
|||
|
|
const saved = localStorage.getItem('freedify_queue');
|
|||
|
|
if (saved) {
|
|||
|
|
const queueData = JSON.parse(saved);
|
|||
|
|
if (queueData.queue && Array.isArray(queueData.queue) && queueData.queue.length > 0) {
|
|||
|
|
state.queue = queueData.queue;
|
|||
|
|
state.currentIndex = queueData.currentIndex || 0;
|
|||
|
|
updateQueueUI();
|
|||
|
|
// Load the track but don't auto-play
|
|||
|
|
if (state.queue[state.currentIndex]) {
|
|||
|
|
updatePlayerUI();
|
|||
|
|
}
|
|||
|
|
console.log(`Restored queue: ${state.queue.length} tracks`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('Could not load queue from storage:', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateQueueUI() {
|
|||
|
|
queueCount.textContent = `(${state.queue.length})`;
|
|||
|
|
|
|||
|
|
// Persist queue to localStorage
|
|||
|
|
saveQueueToStorage();
|
|||
|
|
|
|||
|
|
if (state.queue.length === 0) {
|
|||
|
|
queueContainer.innerHTML = '<p style="text-align:center;color:var(--text-tertiary);padding:24px;">Queue is empty</p>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
queueContainer.innerHTML = state.queue.filter(t => t).map((track, i) => `
|
|||
|
|
<div class="queue-item" data-index="${i}">
|
|||
|
|
<img class="track-album-art" src="${track.album_art || '/static/icon.svg'}" alt="Art" style="width:40px;height:40px;">
|
|||
|
|
<div class="track-info">
|
|||
|
|
<p class="track-name" style="font-size:0.875rem;">${escapeHtml(track.name || 'Unknown')}</p>
|
|||
|
|
<p class="track-artist">${escapeHtml(track.artists || '')}</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="queue-heart-btn" data-action="add-to-playlist" data-index="${i}" title="Add to Playlist">🩷</button>
|
|||
|
|
<button class="queue-remove-btn" data-action="remove" data-index="${i}" title="Remove">×</button>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
|
|||
|
|
// Mark currently playing and scroll into view
|
|||
|
|
const currentEl = queueContainer.querySelector(`[data-index="${state.currentIndex}"]`);
|
|||
|
|
if (currentEl) {
|
|||
|
|
currentEl.classList.add('playing');
|
|||
|
|
currentEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== PRELOADING ==========
|
|||
|
|
let preloadedTrackId = null;
|
|||
|
|
|
|||
|
|
function preloadNextTrack() {
|
|||
|
|
if (state.currentIndex === -1 || state.currentIndex >= state.queue.length - 1) return;
|
|||
|
|
|
|||
|
|
const nextTrack = state.queue[state.currentIndex + 1];
|
|||
|
|
if (!nextTrack || nextTrack.id === preloadedTrackId) return;
|
|||
|
|
|
|||
|
|
preloadedTrackId = nextTrack.id;
|
|||
|
|
preloadedReady = false; // Reset ready flag
|
|||
|
|
console.log('Preloading next track into inactive player:', nextTrack.name);
|
|||
|
|
|
|||
|
|
const query = `${nextTrack.name} ${nextTrack.artists}`;
|
|||
|
|
const hiresParam = state.hiResMode ? '&hires=true' : '&hires=false';
|
|||
|
|
const streamUrl = `/api/stream/${nextTrack.isrc || nextTrack.id}?q=${encodeURIComponent(query)}${hiresParam}`;
|
|||
|
|
|
|||
|
|
// Load into the inactive player for gapless transition
|
|||
|
|
const inactivePlayer = activePlayer === 1 ? audioPlayer2 : audioPlayer;
|
|||
|
|
|
|||
|
|
// Set up canplay listener for faster ready detection
|
|||
|
|
// canplay fires when enough data is available to start (faster than canplaythrough)
|
|||
|
|
const onReady = () => {
|
|||
|
|
preloadedReady = true;
|
|||
|
|
console.log('Preloaded track ready (canplay):', nextTrack.name);
|
|||
|
|
inactivePlayer.removeEventListener('canplay', onReady);
|
|||
|
|
};
|
|||
|
|
inactivePlayer.addEventListener('canplay', onReady);
|
|||
|
|
|
|||
|
|
inactivePlayer.src = streamUrl;
|
|||
|
|
inactivePlayer.load();
|
|||
|
|
preloadedPlayer = inactivePlayer;
|
|||
|
|
|
|||
|
|
console.log('Next track loading into player', activePlayer === 1 ? 2 : 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Get the currently active audio player
|
|||
|
|
function getActivePlayer() {
|
|||
|
|
return activePlayer === 1 ? audioPlayer : audioPlayer2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Get the inactive audio player (for preloading)
|
|||
|
|
function getInactivePlayer() {
|
|||
|
|
return activePlayer === 1 ? audioPlayer2 : audioPlayer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Perform crossfade between players
|
|||
|
|
function performCrossfade() {
|
|||
|
|
const fadeOutGain = activePlayer === 1 ? gainNode1 : gainNode2;
|
|||
|
|
const fadeInGain = activePlayer === 1 ? gainNode2 : gainNode1;
|
|||
|
|
const newPlayer = getInactivePlayer();
|
|||
|
|
|
|||
|
|
if (!audioContext || !fadeOutGain || !fadeInGain) return;
|
|||
|
|
|
|||
|
|
const now = audioContext.currentTime;
|
|||
|
|
const fadeDuration = CROSSFADE_DURATION / 1000;
|
|||
|
|
|
|||
|
|
// Start playing the new track
|
|||
|
|
newPlayer.play().catch(e => console.error('Crossfade play error:', e));
|
|||
|
|
|
|||
|
|
// Crossfade: fade out current, fade in next
|
|||
|
|
fadeOutGain.gain.setValueAtTime(1, now);
|
|||
|
|
fadeOutGain.gain.linearRampToValueAtTime(0, now + fadeDuration);
|
|||
|
|
|
|||
|
|
fadeInGain.gain.setValueAtTime(0, now);
|
|||
|
|
fadeInGain.gain.linearRampToValueAtTime(1, now + fadeDuration);
|
|||
|
|
|
|||
|
|
// Switch active player
|
|||
|
|
activePlayer = activePlayer === 1 ? 2 : 1;
|
|||
|
|
|
|||
|
|
// Pause old player after fade completes
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const oldPlayer = getInactivePlayer();
|
|||
|
|
oldPlayer.pause();
|
|||
|
|
oldPlayer.currentTime = 0;
|
|||
|
|
}, CROSSFADE_DURATION + 100);
|
|||
|
|
|
|||
|
|
console.log('Crossfade to player', activePlayer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Instant gapless switch (no crossfade)
|
|||
|
|
function performGaplessSwitch() {
|
|||
|
|
const newPlayer = getInactivePlayer();
|
|||
|
|
const oldPlayer = getActivePlayer();
|
|||
|
|
const fadeOutGain = activePlayer === 1 ? gainNode1 : gainNode2;
|
|||
|
|
const fadeInGain = activePlayer === 1 ? gainNode2 : gainNode1;
|
|||
|
|
|
|||
|
|
// Ensure gains are set correctly
|
|||
|
|
if (fadeOutGain) fadeOutGain.gain.value = 0;
|
|||
|
|
if (fadeInGain) fadeInGain.gain.value = 1;
|
|||
|
|
|
|||
|
|
// Start new player
|
|||
|
|
newPlayer.play().catch(e => console.error('Gapless play error:', e));
|
|||
|
|
|
|||
|
|
// Stop old player immediately
|
|||
|
|
oldPlayer.pause();
|
|||
|
|
oldPlayer.currentTime = 0;
|
|||
|
|
|
|||
|
|
// Switch active player
|
|||
|
|
activePlayer = activePlayer === 1 ? 2 : 1;
|
|||
|
|
|
|||
|
|
console.log('Gapless switch to player', activePlayer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== MEDIA SESSION ==========
|
|||
|
|
function updateMediaSession(track) {
|
|||
|
|
// DJ Mode Info in Player
|
|||
|
|
const playerDJInfo = $('#player-dj-info');
|
|||
|
|
if (state.djMode && playerDJInfo) {
|
|||
|
|
const feat = state.audioFeaturesCache[track.id];
|
|||
|
|
if (feat) {
|
|||
|
|
const camelotClass = feat.camelot ? `camelot-${feat.camelot}` : '';
|
|||
|
|
playerDJInfo.innerHTML = `
|
|||
|
|
<div class="dj-badge-container" style="display: flex;">
|
|||
|
|
<span class="dj-badge bpm-badge">${feat.bpm} BPM</span>
|
|||
|
|
<span class="dj-badge camelot-badge ${camelotClass}">${feat.camelot}</span>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
playerDJInfo.classList.remove('hidden');
|
|||
|
|
} else {
|
|||
|
|
// Try to fetch if missing
|
|||
|
|
fetchAudioFeaturesForQueue();
|
|||
|
|
playerDJInfo.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
} else if (playerDJInfo) {
|
|||
|
|
playerDJInfo.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if ('mediaSession' in navigator) {
|
|||
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|||
|
|
title: track.name,
|
|||
|
|
artist: track.artists,
|
|||
|
|
album: track.album || '',
|
|||
|
|
artwork: track.album_art ? [{ src: track.album_art, sizes: '512x512' }] : []
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navigator.mediaSession.setActionHandler('play', () => getActivePlayer().play());
|
|||
|
|
navigator.mediaSession.setActionHandler('pause', () => getActivePlayer().pause());
|
|||
|
|
navigator.mediaSession.setActionHandler('previoustrack', playPrevious);
|
|||
|
|
navigator.mediaSession.setActionHandler('nexttrack', playNext);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== UI HELPERS ==========
|
|||
|
|
function showLoading(text) {
|
|||
|
|
loadingText.textContent = text || 'Loading...';
|
|||
|
|
loadingOverlay.classList.remove('hidden');
|
|||
|
|
errorMessage.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideLoading() {
|
|||
|
|
loadingOverlay.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showError(message) {
|
|||
|
|
hideLoading();
|
|||
|
|
errorText.textContent = message;
|
|||
|
|
errorMessage.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
errorRetry.addEventListener('click', () => {
|
|||
|
|
errorMessage.classList.add('hidden');
|
|||
|
|
const query = searchInput.value.trim();
|
|||
|
|
if (query) performSearch(query);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function showEmptyState() {
|
|||
|
|
resultsContainer.innerHTML = `
|
|||
|
|
<div class="empty-state">
|
|||
|
|
<span class="empty-icon">🔍</span>
|
|||
|
|
<p>Search for your favorite music</p>
|
|||
|
|
<p class="hint">Or paste a Spotify link to an album or playlist</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatTime(seconds) {
|
|||
|
|
if (!seconds || isNaN(seconds)) return '0:00';
|
|||
|
|
seconds = Math.floor(seconds);
|
|||
|
|
const mins = Math.floor(seconds / 60);
|
|||
|
|
const secs = Math.floor(seconds % 60);
|
|||
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function escapeHtml(text) {
|
|||
|
|
const div = document.createElement('div');
|
|||
|
|
div.textContent = text || '';
|
|||
|
|
return div.innerHTML;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== KEYBOARD SHORTCUTS ==========
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|||
|
|
|
|||
|
|
switch (e.code) {
|
|||
|
|
case 'Space':
|
|||
|
|
e.preventDefault();
|
|||
|
|
togglePlay();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
if (e.shiftKey) getActivePlayer().currentTime += 10;
|
|||
|
|
else playNext();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
if (e.shiftKey) getActivePlayer().currentTime -= 10;
|
|||
|
|
else playPrevious();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== SERVICE WORKER ==========
|
|||
|
|
if ('serviceWorker' in navigator) {
|
|||
|
|
navigator.serviceWorker.register('/sw.js').catch(console.error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Initial state
|
|||
|
|
showEmptyState();
|
|||
|
|
|
|||
|
|
// ========== FULLSCREEN PLAYER & EXTRAS ==========
|
|||
|
|
|
|||
|
|
window.removeFromQueue = function(index) {
|
|||
|
|
if (index === state.currentIndex) {
|
|||
|
|
// Removing currently playing
|
|||
|
|
state.queue.splice(index, 1);
|
|||
|
|
if (state.queue.length === 0) {
|
|||
|
|
getActivePlayer().pause();
|
|||
|
|
state.isPlaying = false;
|
|||
|
|
updatePlayButton();
|
|||
|
|
state.currentIndex = -1;
|
|||
|
|
// updatePlayerUI({ name: 'No track playing', artists: '-', album_art: '' }); // Reset UI
|
|||
|
|
playerTitle.textContent = 'No track playing';
|
|||
|
|
playerArtist.textContent = '-';
|
|||
|
|
playerArt.src = '';
|
|||
|
|
// Reset FS
|
|||
|
|
fsTitle.textContent = 'No track playing';
|
|||
|
|
fsArtist.textContent = 'Select music';
|
|||
|
|
} else {
|
|||
|
|
// If we remove last item
|
|||
|
|
if (index >= state.queue.length) {
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
loadTrack(state.queue[0]);
|
|||
|
|
} else {
|
|||
|
|
// Index stays same (next track shifted into it)
|
|||
|
|
playTrack(state.queue[index]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// Removing other track
|
|||
|
|
state.queue.splice(index, 1);
|
|||
|
|
if (index < state.currentIndex) {
|
|||
|
|
state.currentIndex--;
|
|||
|
|
}
|
|||
|
|
updateQueueUI();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function toggleFullScreen() {
|
|||
|
|
fullscreenPlayer.classList.toggle('hidden');
|
|||
|
|
if (!fullscreenPlayer.classList.contains('hidden')) {
|
|||
|
|
if (state.currentIndex >= 0) {
|
|||
|
|
updateFullscreenUI(state.queue[state.currentIndex]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateFullscreenUI(track) {
|
|||
|
|
if (!track) return;
|
|||
|
|
fsTitle.textContent = track.name;
|
|||
|
|
const year = track.release_date ? track.release_date.slice(0, 4) : '';
|
|||
|
|
fsArtist.textContent = year ? `${track.artists} • ${year}` : track.artists;
|
|||
|
|
fsArt.src = track.album_art || '/static/icon.svg';
|
|||
|
|
|
|||
|
|
// Backdrop
|
|||
|
|
const backdrop = document.querySelector('.fs-backdrop');
|
|||
|
|
if (backdrop) backdrop.style.backgroundImage = `url('${track.album_art || '/static/icon.svg'}')`;
|
|||
|
|
|
|||
|
|
// DJ Mode Info for Fullscreen
|
|||
|
|
const fsDJInfo = $('#fs-dj-info');
|
|||
|
|
if (state.djMode && fsDJInfo) {
|
|||
|
|
const isLocal = track.id?.startsWith('local_');
|
|||
|
|
const feat = isLocal ? track.audio_features : state.audioFeaturesCache[track.id];
|
|||
|
|
|
|||
|
|
if (feat) {
|
|||
|
|
const camelotClass = feat.camelot ? `camelot-${feat.camelot}` : '';
|
|||
|
|
fsDJInfo.innerHTML = `
|
|||
|
|
<div class="dj-badge-container" style="display: flex; justify-content: center; gap: 8px; margin-top: 8px;">
|
|||
|
|
<span class="dj-badge bpm-badge">${feat.bpm} BPM</span>
|
|||
|
|
<span class="dj-badge camelot-badge ${camelotClass}">${feat.camelot}</span>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
fsDJInfo.classList.remove('hidden');
|
|||
|
|
} else {
|
|||
|
|
fsDJInfo.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
} else if (fsDJInfo) {
|
|||
|
|
fsDJInfo.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateFSPlayBtn();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateFSPlayBtn() {
|
|||
|
|
if (!fsPlayBtn) return;
|
|||
|
|
fsPlayBtn.textContent = state.isPlaying ? '⏸' : '▶';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// FS Controls
|
|||
|
|
if (fsToggleBtn) fsToggleBtn.addEventListener('click', toggleFullScreen);
|
|||
|
|
if (fsCloseBtn) fsCloseBtn.addEventListener('click', toggleFullScreen);
|
|||
|
|
if (fsPlayBtn) fsPlayBtn.addEventListener('click', () => playBtn.click());
|
|||
|
|
|
|||
|
|
// FS Prev/Next - seek ±15s for podcasts, otherwise prev/next track
|
|||
|
|
const fsHeartBtn = $('#fs-heart-btn');
|
|||
|
|
if (fsPrevBtn) {
|
|||
|
|
fsPrevBtn.addEventListener('click', () => {
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (currentTrack && currentTrack.source === 'podcast') {
|
|||
|
|
player.currentTime = Math.max(0, player.currentTime - 15);
|
|||
|
|
} else {
|
|||
|
|
prevBtn.click();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (fsNextBtn) {
|
|||
|
|
fsNextBtn.addEventListener('click', () => {
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (currentTrack && currentTrack.source === 'podcast') {
|
|||
|
|
player.currentTime = Math.min(player.duration, player.currentTime + 15);
|
|||
|
|
} else {
|
|||
|
|
nextBtn.click();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// FS Heart button - add current track to playlist
|
|||
|
|
if (fsHeartBtn) {
|
|||
|
|
fsHeartBtn.addEventListener('click', () => {
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
if (currentTrack && window.openAddToPlaylistModal) {
|
|||
|
|
window.openAddToPlaylistModal(currentTrack);
|
|||
|
|
} else {
|
|||
|
|
showToast('No track playing');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// More Menu Controls
|
|||
|
|
const moreControlsBtn = $('#more-controls-btn');
|
|||
|
|
const playerMoreMenu = $('#player-more-menu');
|
|||
|
|
|
|||
|
|
if (moreControlsBtn && playerMoreMenu) {
|
|||
|
|
moreControlsBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
playerMoreMenu.classList.toggle('hidden');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close menu when clicking outside
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
if (!playerMoreMenu.classList.contains('hidden') &&
|
|||
|
|
!playerMoreMenu.contains(e.target) &&
|
|||
|
|
e.target !== moreControlsBtn) {
|
|||
|
|
playerMoreMenu.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (fsNextBtn) fsNextBtn.addEventListener('click', () => nextBtn.click());
|
|||
|
|
|
|||
|
|
if (fsProgressBar) {
|
|||
|
|
fsProgressBar.addEventListener('input', (e) => {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (player.duration) {
|
|||
|
|
player.currentTime = (e.target.value / 100) * player.duration;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Navigation Links
|
|||
|
|
playerTitle.classList.add('clickable-link');
|
|||
|
|
playerArtist.classList.add('clickable-link');
|
|||
|
|
|
|||
|
|
playerTitle.addEventListener('click', () => {
|
|||
|
|
if (state.currentIndex >= 0 && !fullscreenPlayer.classList.contains('hidden')) toggleFullScreen(); // Close FS if open? Or works anyway.
|
|||
|
|
if (state.currentIndex >= 0) {
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
performSearch(track.name + " " + track.artists);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
playerArtist.addEventListener('click', () => {
|
|||
|
|
if (state.currentIndex >= 0) {
|
|||
|
|
performSearch(state.queue[state.currentIndex].artists);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== TOAST NOTIFICATIONS ==========
|
|||
|
|
function showToast(message) {
|
|||
|
|
const toast = document.createElement('div');
|
|||
|
|
toast.className = 'toast';
|
|||
|
|
toast.textContent = message;
|
|||
|
|
toastContainer.appendChild(toast);
|
|||
|
|
|
|||
|
|
// Remove after animation
|
|||
|
|
setTimeout(() => toast.remove(), 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== VOLUME CONTROL ==========
|
|||
|
|
// Shared volume update function
|
|||
|
|
function updateVolume(vol) {
|
|||
|
|
if (vol < 0) vol = 0;
|
|||
|
|
if (vol > 1) vol = 1;
|
|||
|
|
|
|||
|
|
state.volume = vol;
|
|||
|
|
audioPlayer.volume = vol;
|
|||
|
|
audioPlayer2.volume = vol; // Apply to both players
|
|||
|
|
state.muted = vol === 0;
|
|||
|
|
|
|||
|
|
// Persist volume to localStorage
|
|||
|
|
localStorage.setItem('freedify_volume', vol.toString());
|
|||
|
|
|
|||
|
|
// Update main slider UI if needed
|
|||
|
|
const sliderVal = Math.round(vol * 100);
|
|||
|
|
if (volumeSlider.value != sliderVal) volumeSlider.value = sliderVal;
|
|||
|
|
|
|||
|
|
// Update PiP slider if exists
|
|||
|
|
if (pipWindow) {
|
|||
|
|
const waVol = pipWindow.document.getElementById('wa-vol');
|
|||
|
|
if (waVol && waVol.value != sliderVal) waVol.value = sliderVal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateMuteIcon();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
volumeSlider.addEventListener('input', (e) => {
|
|||
|
|
updateVolume(e.target.value / 100);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
muteBtn.addEventListener('click', () => {
|
|||
|
|
state.muted = !state.muted;
|
|||
|
|
if (state.muted) {
|
|||
|
|
audioPlayer.volume = 0;
|
|||
|
|
volumeSlider.value = 0;
|
|||
|
|
} else {
|
|||
|
|
audioPlayer.volume = state.volume || 1;
|
|||
|
|
volumeSlider.value = (state.volume || 1) * 100;
|
|||
|
|
}
|
|||
|
|
updateMuteIcon();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function updateMuteIcon() {
|
|||
|
|
if (state.muted || audioPlayer.volume === 0) {
|
|||
|
|
muteBtn.textContent = '🔇';
|
|||
|
|
} else if (audioPlayer.volume < 0.5) {
|
|||
|
|
muteBtn.textContent = '🔉';
|
|||
|
|
} else {
|
|||
|
|
muteBtn.textContent = '🔊';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== REPEAT MODE ==========
|
|||
|
|
repeatBtn.addEventListener('click', () => {
|
|||
|
|
// Cycle: none -> all -> one -> none
|
|||
|
|
if (state.repeatMode === 'none') {
|
|||
|
|
state.repeatMode = 'all';
|
|||
|
|
repeatBtn.classList.add('repeat-active');
|
|||
|
|
repeatBtn.title = 'Repeat: All';
|
|||
|
|
showToast('Repeat: All');
|
|||
|
|
} else if (state.repeatMode === 'all') {
|
|||
|
|
state.repeatMode = 'one';
|
|||
|
|
repeatBtn.classList.add('repeat-one');
|
|||
|
|
repeatBtn.title = 'Repeat: One';
|
|||
|
|
showToast('Repeat: One');
|
|||
|
|
} else {
|
|||
|
|
state.repeatMode = 'none';
|
|||
|
|
repeatBtn.classList.remove('repeat-active', 'repeat-one');
|
|||
|
|
repeatBtn.title = 'Repeat: Off';
|
|||
|
|
showToast('Repeat: Off');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Override playNext for repeat handling
|
|||
|
|
const originalPlayNext = playNext;
|
|||
|
|
window.playNextWithRepeat = function() {
|
|||
|
|
// Skip if gapless already handled this transition
|
|||
|
|
if (crossfadeTimeout) return;
|
|||
|
|
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (state.repeatMode === 'one') {
|
|||
|
|
player.currentTime = 0;
|
|||
|
|
player.play();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (state.currentIndex < state.queue.length - 1) {
|
|||
|
|
state.currentIndex++;
|
|||
|
|
|
|||
|
|
// Try to use preloaded player (no loading screen) - ONLY if ready
|
|||
|
|
if (preloadedReady && preloadedPlayer && preloadedTrackId === state.queue[state.currentIndex]?.id) {
|
|||
|
|
console.log('playNextWithRepeat: Using preloaded player for:', state.queue[state.currentIndex].name);
|
|||
|
|
preloadedTrackId = null;
|
|||
|
|
preloadedReady = false;
|
|||
|
|
updatePlayerUI();
|
|||
|
|
updateQueueUI();
|
|||
|
|
updateFullscreenUI(state.queue[state.currentIndex]);
|
|||
|
|
performGaplessSwitch();
|
|||
|
|
updateFormatBadge(getActivePlayer().src);
|
|||
|
|
updateMediaSession(state.queue[state.currentIndex]);
|
|||
|
|
setTimeout(preloadNextTrack, 500);
|
|||
|
|
} else {
|
|||
|
|
loadTrack(state.queue[state.currentIndex]);
|
|||
|
|
}
|
|||
|
|
} else if (state.repeatMode === 'all' && state.queue.length > 0) {
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
loadTrack(state.queue[0]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Replace ended handler with repeat-aware version
|
|||
|
|
audioPlayer.removeEventListener('ended', playNext);
|
|||
|
|
audioPlayer.addEventListener('ended', window.playNextWithRepeat);
|
|||
|
|
|
|||
|
|
// ========== KEYBOARD SHORTCUTS ==========
|
|||
|
|
shortcutsClose.addEventListener('click', () => {
|
|||
|
|
shortcutsHelp.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
// Skip if typing in input
|
|||
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|||
|
|
|
|||
|
|
switch (e.key) {
|
|||
|
|
case ' ':
|
|||
|
|
e.preventDefault();
|
|||
|
|
togglePlay();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
if (e.shiftKey) {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
player.currentTime = Math.min(player.duration, player.currentTime + 10);
|
|||
|
|
} else {
|
|||
|
|
playNext();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
if (e.shiftKey) {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
player.currentTime = Math.max(0, player.currentTime - 10);
|
|||
|
|
} else {
|
|||
|
|
playPrevious();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ArrowUp':
|
|||
|
|
e.preventDefault();
|
|||
|
|
updateVolume(Math.min(1, state.volume + 0.1));
|
|||
|
|
showToast(`Volume: ${Math.round(state.volume * 100)}%`);
|
|||
|
|
break;
|
|||
|
|
case 'ArrowDown':
|
|||
|
|
e.preventDefault();
|
|||
|
|
updateVolume(Math.max(0, state.volume - 0.1));
|
|||
|
|
showToast(`Volume: ${Math.round(state.volume * 100)}%`);
|
|||
|
|
break;
|
|||
|
|
case 'm':
|
|||
|
|
case 'M':
|
|||
|
|
muteBtn.click();
|
|||
|
|
break;
|
|||
|
|
case 's':
|
|||
|
|
case 'S':
|
|||
|
|
shuffleQueueBtn.click();
|
|||
|
|
showToast('Queue Shuffled');
|
|||
|
|
break;
|
|||
|
|
case 'r':
|
|||
|
|
case 'R':
|
|||
|
|
repeatBtn.click();
|
|||
|
|
break;
|
|||
|
|
case 'f':
|
|||
|
|
case 'F':
|
|||
|
|
toggleFullScreen();
|
|||
|
|
break;
|
|||
|
|
case 'q':
|
|||
|
|
case 'Q':
|
|||
|
|
queueSection.classList.toggle('hidden');
|
|||
|
|
break;
|
|||
|
|
case '?':
|
|||
|
|
shortcutsHelp.classList.toggle('hidden');
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== QUEUE DRAG & DROP ==========
|
|||
|
|
let draggedItem = null;
|
|||
|
|
let draggedIndex = -1;
|
|||
|
|
|
|||
|
|
function initQueueDragDrop() {
|
|||
|
|
const items = queueContainer.querySelectorAll('.queue-item');
|
|||
|
|
|
|||
|
|
items.forEach((item, index) => {
|
|||
|
|
item.setAttribute('draggable', 'true');
|
|||
|
|
|
|||
|
|
item.addEventListener('dragstart', (e) => {
|
|||
|
|
draggedItem = item;
|
|||
|
|
draggedIndex = index;
|
|||
|
|
item.classList.add('dragging');
|
|||
|
|
e.dataTransfer.effectAllowed = 'move';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
item.addEventListener('dragend', () => {
|
|||
|
|
item.classList.remove('dragging');
|
|||
|
|
draggedItem = null;
|
|||
|
|
draggedIndex = -1;
|
|||
|
|
items.forEach(i => i.classList.remove('drag-over'));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
item.addEventListener('dragover', (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.dataTransfer.dropEffect = 'move';
|
|||
|
|
if (item !== draggedItem) {
|
|||
|
|
item.classList.add('drag-over');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
item.addEventListener('dragleave', () => {
|
|||
|
|
item.classList.remove('drag-over');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
item.addEventListener('drop', (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (item === draggedItem) return;
|
|||
|
|
|
|||
|
|
const targetIndex = index;
|
|||
|
|
|
|||
|
|
// Reorder queue
|
|||
|
|
const [movedTrack] = state.queue.splice(draggedIndex, 1);
|
|||
|
|
state.queue.splice(targetIndex, 0, movedTrack);
|
|||
|
|
|
|||
|
|
// Update current index if needed
|
|||
|
|
if (state.currentIndex === draggedIndex) {
|
|||
|
|
state.currentIndex = targetIndex;
|
|||
|
|
} else if (draggedIndex < state.currentIndex && targetIndex >= state.currentIndex) {
|
|||
|
|
state.currentIndex--;
|
|||
|
|
} else if (draggedIndex > state.currentIndex && targetIndex <= state.currentIndex) {
|
|||
|
|
state.currentIndex++;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateQueueUI();
|
|||
|
|
showToast('Queue reordered');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Add track to queue
|
|||
|
|
function addToQueue(track) {
|
|||
|
|
if (!track) return;
|
|||
|
|
state.queue.push(track);
|
|||
|
|
updateQueueUI();
|
|||
|
|
showToast(`Added "${track.name}" to queue`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Patch updateQueueUI to init drag-drop
|
|||
|
|
const originalUpdateQueueUI = updateQueueUI;
|
|||
|
|
window.updateQueueUIPatched = function() {
|
|||
|
|
originalUpdateQueueUI();
|
|||
|
|
initQueueDragDrop();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Override the function (need to call it after original)
|
|||
|
|
const _originalUpdateQueueUI = updateQueueUI;
|
|||
|
|
updateQueueUI = function() {
|
|||
|
|
_originalUpdateQueueUI.apply(this, arguments);
|
|||
|
|
setTimeout(initQueueDragDrop, 0);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ========== EQUALIZER (Web Audio API) ==========
|
|||
|
|
const eqPanel = $('#eq-panel');
|
|||
|
|
const eqToggleBtn = $('#eq-toggle-btn');
|
|||
|
|
const eqCloseBtn = $('#eq-close-btn');
|
|||
|
|
const eqPresets = $$('.eq-preset');
|
|||
|
|
const bassBoostSlider = $('#bass-boost');
|
|||
|
|
const bassBoostVal = $('#bass-boost-val');
|
|||
|
|
const volumeBoostSlider = $('#volume-boost');
|
|||
|
|
const volumeBoostVal = $('#volume-boost-val');
|
|||
|
|
|
|||
|
|
// Audio context and nodes (created lazily)
|
|||
|
|
let audioContext = null;
|
|||
|
|
let sourceNode = null;
|
|||
|
|
let sourceNode2 = null;
|
|||
|
|
let gainNode1 = null; // Gain for player 1 (for crossfade)
|
|||
|
|
let gainNode2 = null; // Gain for player 2 (for crossfade)
|
|||
|
|
let eqFilters = [];
|
|||
|
|
let bassBoostFilter = null;
|
|||
|
|
let volumeBoostGain = null;
|
|||
|
|
let eqConnected = false;
|
|||
|
|
|
|||
|
|
// EQ frequency bands
|
|||
|
|
const EQ_BANDS = [
|
|||
|
|
{ id: 'eq-60', freq: 60, type: 'lowshelf' },
|
|||
|
|
{ id: 'eq-230', freq: 230, type: 'peaking' },
|
|||
|
|
{ id: 'eq-910', freq: 910, type: 'peaking' },
|
|||
|
|
{ id: 'eq-3600', freq: 3600, type: 'peaking' },
|
|||
|
|
{ id: 'eq-7500', freq: 7500, type: 'highshelf' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Presets (dB values for each band)
|
|||
|
|
const EQ_PRESETS = {
|
|||
|
|
flat: [0, 0, 0, 0, 0],
|
|||
|
|
bass: [6, 4, 0, 0, 0],
|
|||
|
|
treble: [0, 0, 0, 3, 6],
|
|||
|
|
vocal: [-2, 0, 4, 2, -1]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function initEqualizer() {
|
|||
|
|
if (audioContext) return; // Already initialized
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|||
|
|
|
|||
|
|
// Create source nodes for both audio players
|
|||
|
|
sourceNode = audioContext.createMediaElementSource(audioPlayer);
|
|||
|
|
sourceNode2 = audioContext.createMediaElementSource(audioPlayer2);
|
|||
|
|
|
|||
|
|
// Create gain nodes for crossfade control
|
|||
|
|
gainNode1 = audioContext.createGain();
|
|||
|
|
gainNode2 = audioContext.createGain();
|
|||
|
|
gainNode1.gain.value = 1; // Player 1 starts active
|
|||
|
|
gainNode2.gain.value = 0; // Player 2 starts silent
|
|||
|
|
|
|||
|
|
// Create EQ filter nodes
|
|||
|
|
eqFilters = EQ_BANDS.map(band => {
|
|||
|
|
const filter = audioContext.createBiquadFilter();
|
|||
|
|
filter.type = band.type;
|
|||
|
|
filter.frequency.value = band.freq;
|
|||
|
|
filter.gain.value = 0;
|
|||
|
|
if (band.type === 'peaking') filter.Q.value = 1;
|
|||
|
|
return filter;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Create bass boost filter (low shelf)
|
|||
|
|
bassBoostFilter = audioContext.createBiquadFilter();
|
|||
|
|
bassBoostFilter.type = 'lowshelf';
|
|||
|
|
bassBoostFilter.frequency.value = 100;
|
|||
|
|
bassBoostFilter.gain.value = 0;
|
|||
|
|
|
|||
|
|
// Create volume boost gain node
|
|||
|
|
volumeBoostGain = audioContext.createGain();
|
|||
|
|
volumeBoostGain.gain.value = 1;
|
|||
|
|
|
|||
|
|
// Connect chains:
|
|||
|
|
// Player 1: source -> gain1 -> first EQ filter
|
|||
|
|
// Player 2: source2 -> gain2 -> first EQ filter
|
|||
|
|
// Then: EQ chain -> bass boost -> volume boost -> destination
|
|||
|
|
sourceNode.connect(gainNode1);
|
|||
|
|
sourceNode2.connect(gainNode2);
|
|||
|
|
|
|||
|
|
// Both gains merge into first EQ filter
|
|||
|
|
const firstFilter = eqFilters[0];
|
|||
|
|
gainNode1.connect(firstFilter);
|
|||
|
|
gainNode2.connect(firstFilter);
|
|||
|
|
|
|||
|
|
// Connect EQ filter chain
|
|||
|
|
let lastNode = firstFilter;
|
|||
|
|
for (let i = 1; i < eqFilters.length; i++) {
|
|||
|
|
lastNode.connect(eqFilters[i]);
|
|||
|
|
lastNode = eqFilters[i];
|
|||
|
|
}
|
|||
|
|
lastNode.connect(bassBoostFilter);
|
|||
|
|
bassBoostFilter.connect(volumeBoostGain);
|
|||
|
|
volumeBoostGain.connect(audioContext.destination);
|
|||
|
|
|
|||
|
|
eqConnected = true;
|
|||
|
|
|
|||
|
|
// Load saved settings
|
|||
|
|
loadEqSettings();
|
|||
|
|
|
|||
|
|
console.log('Equalizer initialized with crossfade support');
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to initialize equalizer:', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadEqSettings() {
|
|||
|
|
const saved = localStorage.getItem('freedify_eq');
|
|||
|
|
if (saved) {
|
|||
|
|
try {
|
|||
|
|
const settings = JSON.parse(saved);
|
|||
|
|
EQ_BANDS.forEach((band, i) => {
|
|||
|
|
const slider = $(`#${band.id}`);
|
|||
|
|
if (slider && settings.bands[i] !== undefined) {
|
|||
|
|
slider.value = settings.bands[i];
|
|||
|
|
if (eqFilters[i]) eqFilters[i].gain.value = settings.bands[i];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (settings.bass !== undefined) {
|
|||
|
|
bassBoostSlider.value = settings.bass;
|
|||
|
|
if (bassBoostFilter) bassBoostFilter.gain.value = settings.bass;
|
|||
|
|
bassBoostVal.textContent = `${settings.bass}dB`;
|
|||
|
|
}
|
|||
|
|
if (settings.volume !== undefined) {
|
|||
|
|
volumeBoostSlider.value = settings.volume;
|
|||
|
|
if (volumeBoostGain) volumeBoostGain.gain.value = Math.pow(10, settings.volume / 20);
|
|||
|
|
volumeBoostVal.textContent = `${settings.volume}dB`;
|
|||
|
|
}
|
|||
|
|
} catch (e) { console.error('Error loading EQ settings:', e); }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveEqSettings() {
|
|||
|
|
const settings = {
|
|||
|
|
bands: EQ_BANDS.map(band => parseFloat($(`#${band.id}`).value)),
|
|||
|
|
bass: parseFloat(bassBoostSlider.value),
|
|||
|
|
volume: parseFloat(volumeBoostSlider.value)
|
|||
|
|
};
|
|||
|
|
localStorage.setItem('freedify_eq', JSON.stringify(settings));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyPreset(preset) {
|
|||
|
|
const values = EQ_PRESETS[preset];
|
|||
|
|
if (!values) return;
|
|||
|
|
|
|||
|
|
EQ_BANDS.forEach((band, i) => {
|
|||
|
|
const slider = $(`#${band.id}`);
|
|||
|
|
slider.value = values[i];
|
|||
|
|
if (eqFilters[i]) eqFilters[i].gain.value = values[i];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
eqPresets.forEach(btn => btn.classList.remove('active'));
|
|||
|
|
document.querySelector(`[data-preset="${preset}"]`)?.classList.add('active');
|
|||
|
|
|
|||
|
|
saveEqSettings();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Toggle EQ panel
|
|||
|
|
eqToggleBtn?.addEventListener('click', () => {
|
|||
|
|
if (!audioContext) initEqualizer();
|
|||
|
|
eqPanel.classList.toggle('hidden');
|
|||
|
|
eqToggleBtn.classList.toggle('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
eqCloseBtn?.addEventListener('click', () => {
|
|||
|
|
eqPanel.classList.add('hidden');
|
|||
|
|
eqToggleBtn.classList.remove('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Preset buttons
|
|||
|
|
eqPresets.forEach(btn => {
|
|||
|
|
btn.addEventListener('click', () => applyPreset(btn.dataset.preset));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// EQ band sliders
|
|||
|
|
EQ_BANDS.forEach((band, i) => {
|
|||
|
|
const slider = $(`#${band.id}`);
|
|||
|
|
slider?.addEventListener('input', () => {
|
|||
|
|
if (eqFilters[i]) eqFilters[i].gain.value = parseFloat(slider.value);
|
|||
|
|
saveEqSettings();
|
|||
|
|
// Clear preset selection when manually adjusting
|
|||
|
|
eqPresets.forEach(btn => btn.classList.remove('active'));
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Bass boost slider
|
|||
|
|
bassBoostSlider?.addEventListener('input', () => {
|
|||
|
|
const val = parseFloat(bassBoostSlider.value);
|
|||
|
|
if (bassBoostFilter) bassBoostFilter.gain.value = val;
|
|||
|
|
bassBoostVal.textContent = `${val}dB`;
|
|||
|
|
saveEqSettings();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Volume boost slider
|
|||
|
|
volumeBoostSlider?.addEventListener('input', () => {
|
|||
|
|
const val = parseFloat(volumeBoostSlider.value);
|
|||
|
|
// Convert dB to gain multiplier: gain = 10^(dB/20)
|
|||
|
|
if (volumeBoostGain) volumeBoostGain.gain.value = Math.pow(10, val / 20);
|
|||
|
|
volumeBoostVal.textContent = `${val}dB`;
|
|||
|
|
saveEqSettings();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Initialize EQ when audio starts playing (to resume AudioContext)
|
|||
|
|
audioPlayer.addEventListener('play', () => {
|
|||
|
|
if (!audioContext) {
|
|||
|
|
initEqualizer();
|
|||
|
|
} else if (audioContext.state === 'suspended') {
|
|||
|
|
audioContext.resume();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== THEME PICKER ==========
|
|||
|
|
const themeBtn = $('#theme-btn');
|
|||
|
|
const themePicker = $('#theme-picker');
|
|||
|
|
const themeOptions = $$('.theme-option');
|
|||
|
|
|
|||
|
|
// Load saved theme on startup
|
|||
|
|
(function loadSavedTheme() {
|
|||
|
|
const savedTheme = localStorage.getItem('freedify_theme') || '';
|
|||
|
|
if (savedTheme) {
|
|||
|
|
document.body.classList.add(savedTheme);
|
|||
|
|
}
|
|||
|
|
// Mark active option
|
|||
|
|
themeOptions.forEach(opt => {
|
|||
|
|
if (opt.dataset.theme === savedTheme) {
|
|||
|
|
opt.classList.add('active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Sync meta theme-color on load
|
|||
|
|
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
|
|||
|
|
if (metaThemeColor && savedTheme) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
|
|||
|
|
if (accentColor) metaThemeColor.content = accentColor;
|
|||
|
|
}, 50);
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// Toggle theme picker
|
|||
|
|
themeBtn?.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
themePicker.classList.toggle('hidden');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Theme selection
|
|||
|
|
themeOptions.forEach(opt => {
|
|||
|
|
opt.addEventListener('click', () => {
|
|||
|
|
const newTheme = opt.dataset.theme;
|
|||
|
|
|
|||
|
|
// Remove all theme classes
|
|||
|
|
document.body.classList.remove('theme-purple', 'theme-blue', 'theme-green', 'theme-pink', 'theme-orange');
|
|||
|
|
|
|||
|
|
// Add new theme
|
|||
|
|
if (newTheme) {
|
|||
|
|
document.body.classList.add(newTheme);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Save to localStorage
|
|||
|
|
localStorage.setItem('freedify_theme', newTheme);
|
|||
|
|
|
|||
|
|
// Update active state
|
|||
|
|
themeOptions.forEach(o => o.classList.remove('active'));
|
|||
|
|
opt.classList.add('active');
|
|||
|
|
|
|||
|
|
// Close picker
|
|||
|
|
themePicker.classList.add('hidden');
|
|||
|
|
|
|||
|
|
showToast(`Theme changed to ${opt.textContent}`);
|
|||
|
|
|
|||
|
|
// Update meta theme-color for mobile browser UI
|
|||
|
|
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
|
|||
|
|
if (metaThemeColor) {
|
|||
|
|
// Get computed color for current theme
|
|||
|
|
// Wait a tick for class change to apply
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
|
|||
|
|
if (accentColor) metaThemeColor.content = accentColor;
|
|||
|
|
}, 50);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close theme picker when clicking outside
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
if (!themePicker.contains(e.target) && e.target !== themeBtn) {
|
|||
|
|
themePicker.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== MEDIA SESSION API (Lock Screen Controls) ==========
|
|||
|
|
function updateMediaSession(track) {
|
|||
|
|
if (!('mediaSession' in navigator)) return;
|
|||
|
|
|
|||
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|||
|
|
title: track.name || 'Unknown Track',
|
|||
|
|
artist: track.artists || 'Unknown Artist',
|
|||
|
|
album: track.album || '',
|
|||
|
|
artwork: [
|
|||
|
|
{ src: track.album_art || '/static/icon.svg', sizes: '512x512', type: 'image/png' }
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Set up Media Session action handlers
|
|||
|
|
if ('mediaSession' in navigator) {
|
|||
|
|
navigator.mediaSession.setActionHandler('play', () => {
|
|||
|
|
getActivePlayer().play();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navigator.mediaSession.setActionHandler('pause', () => {
|
|||
|
|
getActivePlayer().pause();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navigator.mediaSession.setActionHandler('previoustrack', () => {
|
|||
|
|
playPrevious();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navigator.mediaSession.setActionHandler('nexttrack', () => {
|
|||
|
|
playNext();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
player.currentTime = Math.max(player.currentTime - (details.seekOffset || 10), 0);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navigator.mediaSession.setActionHandler('seekforward', (details) => {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
player.currentTime = Math.min(player.currentTime + (details.seekOffset || 10), player.duration);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
navigator.mediaSession.setActionHandler('seekto', (details) => {
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
if (details.fastSeek && 'fastSeek' in player) {
|
|||
|
|
player.fastSeek(details.seekTime);
|
|||
|
|
} else {
|
|||
|
|
player.currentTime = details.seekTime;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update position state periodically
|
|||
|
|
audioPlayer.addEventListener('timeupdate', () => {
|
|||
|
|
if ('mediaSession' in navigator && 'setPositionState' in navigator.mediaSession) {
|
|||
|
|
try {
|
|||
|
|
if (audioPlayer.duration && !isNaN(audioPlayer.duration)) {
|
|||
|
|
navigator.mediaSession.setPositionState({
|
|||
|
|
duration: audioPlayer.duration,
|
|||
|
|
playbackRate: audioPlayer.playbackRate,
|
|||
|
|
position: audioPlayer.currentTime
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (e) { /* Ignore errors */ }
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== GOOGLE DRIVE SYNC ==========
|
|||
|
|
// Client ID: fetched from server env var, or from localStorage, or prompted
|
|||
|
|
let GOOGLE_CLIENT_ID = localStorage.getItem('freedify_google_client_id') || '';
|
|||
|
|
// Expanded scope: appdata for favorites sync + drive.file for saving audio files
|
|||
|
|
const GOOGLE_SCOPES = 'https://www.googleapis.com/auth/drive.appdata https://www.googleapis.com/auth/drive.file';
|
|||
|
|
const SYNC_FILENAME = 'freedify_playlists.json';
|
|||
|
|
const FREEDIFY_FOLDER_NAME = 'Freedify';
|
|||
|
|
|
|||
|
|
let googleAccessToken = null;
|
|||
|
|
|
|||
|
|
// Fetch server-side config (Google Client ID from env vars)
|
|||
|
|
(async function loadServerConfig() {
|
|||
|
|
try {
|
|||
|
|
const res = await fetch('/api/config');
|
|||
|
|
if (res.ok) {
|
|||
|
|
const config = await res.json();
|
|||
|
|
if (config.google_client_id) {
|
|||
|
|
GOOGLE_CLIENT_ID = config.google_client_id;
|
|||
|
|
console.log('Google Client ID loaded from server config');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log('Could not load server config:', e.message);
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
const syncBtn = $('#sync-btn');
|
|||
|
|
|
|||
|
|
// Initialize Google API
|
|||
|
|
// Initialize Google API
|
|||
|
|
window.initGoogleApi = function() {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
if (typeof gapi === 'undefined') {
|
|||
|
|
console.log('Google API not loaded yet');
|
|||
|
|
resolve(false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
gapi.load('client', async () => {
|
|||
|
|
try {
|
|||
|
|
await gapi.client.init({
|
|||
|
|
discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
|
|||
|
|
});
|
|||
|
|
console.log("Google Drive API initialized");
|
|||
|
|
resolve(true);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to init Google API:', e);
|
|||
|
|
resolve(false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// If gapi is already loaded (race condition), init immediately
|
|||
|
|
if (typeof gapi !== 'undefined') {
|
|||
|
|
window.initGoogleApi();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Google Sign-In
|
|||
|
|
async function signInWithGoogle() {
|
|||
|
|
if (!GOOGLE_CLIENT_ID) {
|
|||
|
|
const clientId = prompt(
|
|||
|
|
'Enter your Google OAuth Client ID:\n\n' +
|
|||
|
|
'To get one:\n' +
|
|||
|
|
'1. Go to console.cloud.google.com\n' +
|
|||
|
|
'2. Create a project\n' +
|
|||
|
|
'3. Enable Drive API\n' +
|
|||
|
|
'4. Create OAuth credentials (Web application)\n' +
|
|||
|
|
'5. Add your domain to authorized origins'
|
|||
|
|
);
|
|||
|
|
if (clientId) {
|
|||
|
|
localStorage.setItem('freedify_google_client_id', clientId);
|
|||
|
|
location.reload();
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const client = google.accounts.oauth2.initTokenClient({
|
|||
|
|
client_id: GOOGLE_CLIENT_ID,
|
|||
|
|
scope: GOOGLE_SCOPES,
|
|||
|
|
callback: (response) => {
|
|||
|
|
if (response.access_token) {
|
|||
|
|
googleAccessToken = response.access_token;
|
|||
|
|
gapi.client.setToken({ access_token: googleAccessToken });
|
|||
|
|
syncBtn.classList.add('synced');
|
|||
|
|
showToast('Signed in to Google Drive');
|
|||
|
|
resolve(response.access_token);
|
|||
|
|
} else {
|
|||
|
|
resolve(null);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error_callback: (error) => {
|
|||
|
|
console.error('Google sign-in error:', error);
|
|||
|
|
showToast('Sign-in failed');
|
|||
|
|
resolve(null);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
client.requestAccessToken();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Find sync file in Drive
|
|||
|
|
async function findSyncFile() {
|
|||
|
|
try {
|
|||
|
|
const response = await gapi.client.drive.files.list({
|
|||
|
|
spaces: 'appDataFolder',
|
|||
|
|
q: `name='${SYNC_FILENAME}'`,
|
|||
|
|
fields: 'files(id, name, modifiedTime)'
|
|||
|
|
});
|
|||
|
|
return response.result.files?.[0] || null;
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Error finding sync file:', e);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Find or create "Freedify" folder in Drive root
|
|||
|
|
async function findOrCreateFreedifyFolder() {
|
|||
|
|
try {
|
|||
|
|
// Search for existing folder
|
|||
|
|
const response = await gapi.client.drive.files.list({
|
|||
|
|
q: `name='${FREEDIFY_FOLDER_NAME}' and mimeType='application/vnd.google-apps.folder' and trashed=false`,
|
|||
|
|
fields: 'files(id, name)'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.result.files && response.result.files.length > 0) {
|
|||
|
|
return response.result.files[0].id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Create folder if not found
|
|||
|
|
const createResponse = await gapi.client.drive.files.create({
|
|||
|
|
resource: {
|
|||
|
|
name: FREEDIFY_FOLDER_NAME,
|
|||
|
|
mimeType: 'application/vnd.google-apps.folder'
|
|||
|
|
},
|
|||
|
|
fields: 'id'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return createResponse.result.id;
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Error finding/creating folder:', e);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Upload to Drive with Granular Support
|
|||
|
|
// syncType: 'all', 'playlists', 'queue'
|
|||
|
|
async function uploadToDrive(syncType = 'all') {
|
|||
|
|
if (!googleAccessToken) {
|
|||
|
|
await signInWithGoogle();
|
|||
|
|
if (!googleAccessToken) return; // User cancelled auth
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const loadingText = syncType === 'all' ? 'Syncing all to Drive...' :
|
|||
|
|
syncType === 'playlists' ? 'Syncing playlists...' : 'Syncing queue...';
|
|||
|
|
showLoading(loadingText);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 1. Fetch EXISTING file first to preserve data we aren't updating
|
|||
|
|
const existingFile = await findSyncFile();
|
|||
|
|
let currentRemoteData = {};
|
|||
|
|
|
|||
|
|
if (existingFile) {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(
|
|||
|
|
`https://www.googleapis.com/drive/v3/files/${existingFile.id}?alt=media`,
|
|||
|
|
{ headers: { 'Authorization': `Bearer ${googleAccessToken}` } }
|
|||
|
|
);
|
|||
|
|
if (response.ok) {
|
|||
|
|
const json = await response.json();
|
|||
|
|
// Handle legacy array format
|
|||
|
|
if (Array.isArray(json)) {
|
|||
|
|
currentRemoteData = { playlists: json, queue: [] };
|
|||
|
|
} else {
|
|||
|
|
currentRemoteData = json;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.warn('Failed to read existing sync data, starting fresh', err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. Prepare NEW data by merging state into remote data
|
|||
|
|
const syncData = {
|
|||
|
|
playlists: currentRemoteData.playlists || [],
|
|||
|
|
queue: currentRemoteData.queue || [],
|
|||
|
|
currentIndex: currentRemoteData.currentIndex || 0,
|
|||
|
|
volume: currentRemoteData.volume || 1,
|
|||
|
|
syncedAt: new Date().toISOString()
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (syncType === 'all' || syncType === 'playlists') {
|
|||
|
|
syncData.playlists = state.playlists;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (syncType === 'all' || syncType === 'queue') {
|
|||
|
|
syncData.queue = state.queue;
|
|||
|
|
syncData.currentIndex = state.currentIndex;
|
|||
|
|
syncData.volume = state.volume;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. Upload
|
|||
|
|
const fileContent = JSON.stringify(syncData, null, 2);
|
|||
|
|
|
|||
|
|
const metadata = {
|
|||
|
|
name: SYNC_FILENAME,
|
|||
|
|
mimeType: 'application/json'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (!existingFile) {
|
|||
|
|
metadata.parents = ['appDataFolder'];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const form = new FormData();
|
|||
|
|
form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
|
|||
|
|
form.append('file', new Blob([fileContent], { type: 'application/json' }));
|
|||
|
|
|
|||
|
|
const url = existingFile
|
|||
|
|
? `https://www.googleapis.com/upload/drive/v3/files/${existingFile.id}?uploadType=multipart`
|
|||
|
|
: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart';
|
|||
|
|
|
|||
|
|
const response = await fetch(url, {
|
|||
|
|
method: existingFile ? 'PATCH' : 'POST',
|
|||
|
|
headers: { 'Authorization': `Bearer ${googleAccessToken}` },
|
|||
|
|
body: form
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
hideLoading();
|
|||
|
|
// Close modal if open
|
|||
|
|
$('#drive-sync-modal').classList.add('hidden');
|
|||
|
|
|
|||
|
|
let msg = 'Sync Complete!';
|
|||
|
|
if (syncType === 'playlists') msg = `Synced ${state.playlists.length} playlists to Drive`;
|
|||
|
|
if (syncType === 'queue') msg = `Synced queue (${state.queue.length} tracks)`;
|
|||
|
|
if (syncType === 'all') msg = `Synced Match & Queue to Drive`;
|
|||
|
|
|
|||
|
|
showToast(msg);
|
|||
|
|
localStorage.setItem('freedify_last_sync', new Date().toISOString());
|
|||
|
|
} else {
|
|||
|
|
throw new Error('Upload failed');
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Upload error:', e);
|
|||
|
|
hideLoading();
|
|||
|
|
showError('Failed to sync to Google Drive');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Download from Drive with Granular Support
|
|||
|
|
async function downloadFromDrive(syncType = 'all') {
|
|||
|
|
if (!googleAccessToken) {
|
|||
|
|
await signInWithGoogle();
|
|||
|
|
if (!googleAccessToken) return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showLoading('Loading from Google Drive...');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const file = await findSyncFile();
|
|||
|
|
|
|||
|
|
if (!file) {
|
|||
|
|
hideLoading();
|
|||
|
|
showToast('No saved data found in Drive');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const response = await fetch(
|
|||
|
|
`https://www.googleapis.com/drive/v3/files/${file.id}?alt=media`,
|
|||
|
|
{ headers: { 'Authorization': `Bearer ${googleAccessToken}` } }
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
const syncData = await response.json();
|
|||
|
|
|
|||
|
|
// Normalize data (handle legacy)
|
|||
|
|
const remotePlaylists = Array.isArray(syncData) ? syncData : (syncData.playlists || []);
|
|||
|
|
const remoteQueue = Array.isArray(syncData) ? [] : (syncData.queue || []);
|
|||
|
|
const remoteIndex = Array.isArray(syncData) ? 0 : (syncData.currentIndex || 0);
|
|||
|
|
|
|||
|
|
let restoredCount = 0;
|
|||
|
|
|
|||
|
|
// Apply updates
|
|||
|
|
if (syncType === 'all' || syncType === 'playlists') {
|
|||
|
|
state.playlists = remotePlaylists;
|
|||
|
|
savePlaylists();
|
|||
|
|
restoredCount = remotePlaylists.length;
|
|||
|
|
// If favorites view is active, refresh it
|
|||
|
|
if (state.searchType === 'favorites') renderPlaylistsView();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (syncType === 'all' || syncType === 'queue') {
|
|||
|
|
if (remoteQueue.length > 0) {
|
|||
|
|
state.queue = remoteQueue;
|
|||
|
|
state.currentIndex = remoteIndex;
|
|||
|
|
// Use remote volume only if 'all' to avoid startling volume jumps on just queue sync?
|
|||
|
|
// Let's stick to syncing volume on queue sync.
|
|||
|
|
if (syncData.volume) {
|
|||
|
|
state.volume = syncData.volume;
|
|||
|
|
if (audioPlayer) audioPlayer.volume = state.volume;
|
|||
|
|
if (audioPlayer2) audioPlayer2.volume = state.volume;
|
|||
|
|
if (volumeSlider) volumeSlider.value = Math.round(state.volume * 100);
|
|||
|
|
}
|
|||
|
|
updateQueueUI();
|
|||
|
|
updatePlayerUI();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
// Close modal
|
|||
|
|
$('#drive-sync-modal').classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (syncType === 'playlists') showToast(`Loaded ${restoredCount} playlists`);
|
|||
|
|
else if (syncType === 'queue') showToast(`Loaded queue (${remoteQueue.length} tracks)`);
|
|||
|
|
else showToast(`Loaded Library & Session`);
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
throw new Error('Download failed');
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Download error:', e);
|
|||
|
|
hideLoading();
|
|||
|
|
showError('Failed to load from Google Drive');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Drive Sync Modal UI & Events ---
|
|||
|
|
|
|||
|
|
function updateDriveModalUI() {
|
|||
|
|
const authSection = $('#drive-auth-section');
|
|||
|
|
const optionsSection = $('#drive-options-section');
|
|||
|
|
const userEmailSpan = $('#drive-user-email');
|
|||
|
|
|
|||
|
|
// Check if we have a valid access token (GIS flow stores it in googleAccessToken)
|
|||
|
|
if (googleAccessToken) {
|
|||
|
|
authSection.classList.add('hidden');
|
|||
|
|
optionsSection.classList.remove('hidden');
|
|||
|
|
if (userEmailSpan) userEmailSpan.textContent = 'Connected to Google Drive';
|
|||
|
|
} else {
|
|||
|
|
authSection.classList.remove('hidden');
|
|||
|
|
optionsSection.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function showDriveModal() {
|
|||
|
|
const modal = $('#drive-sync-modal');
|
|||
|
|
modal.classList.remove('hidden');
|
|||
|
|
|
|||
|
|
// Ensure API is ready
|
|||
|
|
if (typeof gapi !== 'undefined' && (!gapi.auth2 || !gapi.client.drive)) {
|
|||
|
|
$('#drive-loading').classList.remove('hidden');
|
|||
|
|
await initGoogleApi();
|
|||
|
|
$('#drive-loading').classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
updateDriveModalUI();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Open Modal
|
|||
|
|
syncBtn?.addEventListener('click', () => {
|
|||
|
|
showDriveModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close Modal
|
|||
|
|
$('#drive-modal-close')?.addEventListener('click', () => $('#drive-sync-modal').classList.add('hidden'));
|
|||
|
|
$('#drive-modal-close-top')?.addEventListener('click', () => $('#drive-sync-modal').classList.add('hidden'));
|
|||
|
|
|
|||
|
|
// Auth Buttons
|
|||
|
|
$('#drive-signin-btn')?.addEventListener('click', async () => {
|
|||
|
|
await signInWithGoogle();
|
|||
|
|
updateDriveModalUI();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#drive-signout-btn')?.addEventListener('click', () => {
|
|||
|
|
googleAccessToken = null;
|
|||
|
|
gapi.client.setToken(null);
|
|||
|
|
syncBtn?.classList.remove('synced');
|
|||
|
|
updateDriveModalUI();
|
|||
|
|
showToast('Signed out from Google Drive');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Granular Action Bindings
|
|||
|
|
$('#drive-up-all')?.addEventListener('click', () => uploadToDrive('all'));
|
|||
|
|
$('#drive-up-playlists')?.addEventListener('click', () => uploadToDrive('playlists'));
|
|||
|
|
$('#drive-up-queue')?.addEventListener('click', () => uploadToDrive('queue'));
|
|||
|
|
|
|||
|
|
$('#drive-down-all')?.addEventListener('click', () => downloadFromDrive('all'));
|
|||
|
|
$('#drive-down-playlists')?.addEventListener('click', () => downloadFromDrive('playlists'));
|
|||
|
|
$('#drive-down-queue')?.addEventListener('click', () => downloadFromDrive('queue'));
|
|||
|
|
|
|||
|
|
// ========== PODCAST EPISODE DETAILS MODAL ==========
|
|||
|
|
const podcastModal = $('#podcast-modal');
|
|||
|
|
const podcastModalClose = $('#podcast-modal-close');
|
|||
|
|
const podcastModalArt = $('#podcast-modal-art');
|
|||
|
|
const podcastModalTitle = $('#podcast-modal-title');
|
|||
|
|
const podcastModalDate = $('#podcast-modal-date');
|
|||
|
|
const podcastModalDuration = $('#podcast-modal-duration');
|
|||
|
|
const podcastModalDescription = $('#podcast-modal-description');
|
|||
|
|
const podcastModalPlay = $('#podcast-modal-play');
|
|||
|
|
|
|||
|
|
let currentPodcastEpisode = null;
|
|||
|
|
|
|||
|
|
function showPodcastModal(track) {
|
|||
|
|
if (!track || track.source !== 'podcast') return;
|
|||
|
|
|
|||
|
|
currentPodcastEpisode = track;
|
|||
|
|
|
|||
|
|
podcastModalArt.src = track.album_art || '/static/icon.svg';
|
|||
|
|
podcastModalTitle.textContent = track.name;
|
|||
|
|
podcastModalDate.textContent = track.datePublished || '';
|
|||
|
|
podcastModalDuration.textContent = `Duration: ${track.duration}`;
|
|||
|
|
|
|||
|
|
// Strip HTML tags from description and decode entities
|
|||
|
|
const tempDiv = document.createElement('div');
|
|||
|
|
tempDiv.innerHTML = track.description || 'No description available.';
|
|||
|
|
podcastModalDescription.textContent = tempDiv.textContent || tempDiv.innerText;
|
|||
|
|
|
|||
|
|
podcastModal.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
window.showPodcastModal = showPodcastModal;
|
|||
|
|
|
|||
|
|
function hidePodcastModal() {
|
|||
|
|
podcastModal.classList.add('hidden');
|
|||
|
|
currentPodcastEpisode = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close modal
|
|||
|
|
podcastModalClose?.addEventListener('click', hidePodcastModal);
|
|||
|
|
|
|||
|
|
// Close on backdrop click
|
|||
|
|
podcastModal?.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === podcastModal) hidePodcastModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Play button
|
|||
|
|
podcastModalPlay?.addEventListener('click', () => {
|
|||
|
|
if (currentPodcastEpisode) {
|
|||
|
|
playTrack(currentPodcastEpisode);
|
|||
|
|
hidePodcastModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close on Escape key
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape' && !podcastModal.classList.contains('hidden')) {
|
|||
|
|
hidePodcastModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// ========== HiFi MODE ==========
|
|||
|
|
const hifiBtn = $('#hifi-btn');
|
|||
|
|
|
|||
|
|
// Initialize HiFi button state - reflects actual playing quality, not just preference
|
|||
|
|
// Initialize HiFi button state - reflects user preference and source limits
|
|||
|
|
function updateHifiButtonUI() {
|
|||
|
|
if (hifiBtn) {
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
const source = currentTrack?.source || '';
|
|||
|
|
|
|||
|
|
// Determine constraint based on source
|
|||
|
|
const isLossySource = source === 'ytmusic' || source === 'youtube' || source === 'podcast' || source === 'import';
|
|||
|
|
|
|||
|
|
if (isLossySource) {
|
|||
|
|
// Force Lossy display if source is known bad
|
|||
|
|
hifiBtn.classList.remove('hi-res');
|
|||
|
|
hifiBtn.classList.add('active', 'lossy');
|
|||
|
|
hifiBtn.title = "Playing: Compressed Audio (MP3/AAC)";
|
|||
|
|
hifiBtn.textContent = "MP3";
|
|||
|
|
} else {
|
|||
|
|
// For all other sources (HiFi, Hi-Res, Unknown), reflect the MODE setting
|
|||
|
|
hifiBtn.classList.add('active');
|
|||
|
|
hifiBtn.classList.remove('lossy');
|
|||
|
|
|
|||
|
|
// Toggle Hi-Res vs HiFi based on state
|
|||
|
|
// If state.hiResMode is true -> Add class 'hi-res' -> CSS makes it Cyan/Pulse
|
|||
|
|
// If state.hiResMode is false -> Remove class 'hi-res' -> CSS makes it Green
|
|||
|
|
hifiBtn.classList.toggle('hi-res', state.hiResMode);
|
|||
|
|
|
|||
|
|
hifiBtn.title = state.hiResMode ? "Hi-Res Mode ON (24-bit)" : "HiFi Mode ON (16-bit)";
|
|||
|
|
hifiBtn.textContent = state.hiResMode ? "Hi-Res" : "HiFi";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Toggle HiFi mode
|
|||
|
|
if (hifiBtn) {
|
|||
|
|
hifiBtn.addEventListener('click', () => {
|
|||
|
|
state.hiResMode = !state.hiResMode;
|
|||
|
|
localStorage.setItem('freedify_hires', state.hiResMode);
|
|||
|
|
updateHifiButtonUI();
|
|||
|
|
|
|||
|
|
// Show toast notification
|
|||
|
|
showToast(state.hiResMode ?
|
|||
|
|
'💎 Hi-Res Mode ON - 24-bit Audio' :
|
|||
|
|
'🎵 HiFi Mode ON - 16-bit Audio', 3000);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Initialize UI on load
|
|||
|
|
updateHifiButtonUI();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== DJ MODE ==========
|
|||
|
|
const djModeBtn = $('#dj-mode-btn');
|
|||
|
|
const djSetlistModal = $('#dj-setlist-modal');
|
|||
|
|
const djModalClose = $('#dj-modal-close');
|
|||
|
|
const djStyleSelect = $('#dj-style-select');
|
|||
|
|
const djSetlistLoading = $('#dj-setlist-loading');
|
|||
|
|
const djSetlistResults = $('#dj-setlist-results');
|
|||
|
|
const djOrderedTracks = $('#dj-ordered-tracks');
|
|||
|
|
const djGenerateBtn = $('#dj-generate-btn');
|
|||
|
|
const djApplyBtn = $('#dj-apply-btn');
|
|||
|
|
|
|||
|
|
// Musical Key to Camelot Wheel conversion
|
|||
|
|
function musicalKeyToCamelot(key) {
|
|||
|
|
if (!key) return null;
|
|||
|
|
|
|||
|
|
// Normalize key: uppercase, handle sharps/flats
|
|||
|
|
const normalized = key.trim()
|
|||
|
|
.replace(/major/i, '')
|
|||
|
|
.replace(/minor/i, 'm')
|
|||
|
|
.replace(/♯/g, '#')
|
|||
|
|
.replace(/♭/g, 'b')
|
|||
|
|
.trim();
|
|||
|
|
|
|||
|
|
// Mapping of musical keys to Camelot notation
|
|||
|
|
// Minor keys (A column)
|
|||
|
|
const minorKeys = {
|
|||
|
|
'Abm': '1A', 'G#m': '1A',
|
|||
|
|
'Ebm': '2A', 'D#m': '2A',
|
|||
|
|
'Bbm': '3A', 'A#m': '3A',
|
|||
|
|
'Fm': '4A',
|
|||
|
|
'Cm': '5A',
|
|||
|
|
'Gm': '6A',
|
|||
|
|
'Dm': '7A',
|
|||
|
|
'Am': '8A',
|
|||
|
|
'Em': '9A',
|
|||
|
|
'Bm': '10A',
|
|||
|
|
'F#m': '11A', 'Gbm': '11A',
|
|||
|
|
'Dbm': '12A', 'C#m': '12A'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Major keys (B column)
|
|||
|
|
const majorKeys = {
|
|||
|
|
'B': '1B',
|
|||
|
|
'Gb': '2B', 'F#': '2B',
|
|||
|
|
'Db': '3B', 'C#': '3B',
|
|||
|
|
'Ab': '4B', 'G#': '4B',
|
|||
|
|
'Eb': '5B', 'D#': '5B',
|
|||
|
|
'Bb': '6B', 'A#': '6B',
|
|||
|
|
'F': '7B',
|
|||
|
|
'C': '8B',
|
|||
|
|
'G': '9B',
|
|||
|
|
'D': '10B',
|
|||
|
|
'A': '11B',
|
|||
|
|
'E': '12B'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Check minor first, then major
|
|||
|
|
if (minorKeys[normalized]) return minorKeys[normalized];
|
|||
|
|
if (majorKeys[normalized]) return majorKeys[normalized];
|
|||
|
|
|
|||
|
|
// Try case-insensitive match
|
|||
|
|
for (const [k, v] of Object.entries(minorKeys)) {
|
|||
|
|
if (k.toLowerCase() === normalized.toLowerCase()) return v;
|
|||
|
|
}
|
|||
|
|
for (const [k, v] of Object.entries(majorKeys)) {
|
|||
|
|
if (k.toLowerCase() === normalized.toLowerCase()) return v;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// If already in Camelot format, return as-is
|
|||
|
|
if (/^[1-9][0-2]?[AB]$/i.test(normalized)) {
|
|||
|
|
return normalized.toUpperCase();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return key; // Return original if no match
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// DJ Mode state
|
|||
|
|
state.djMode = localStorage.getItem('freedify_dj_mode') === 'true';
|
|||
|
|
state.audioFeaturesCache = {}; // Cache audio features by track ID
|
|||
|
|
state.lastSetlistResult = null;
|
|||
|
|
|
|||
|
|
// Initialize DJ mode on load
|
|||
|
|
if (state.djMode) {
|
|||
|
|
document.body.classList.add('dj-mode-active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Toggle DJ mode
|
|||
|
|
djModeBtn?.addEventListener('click', () => {
|
|||
|
|
state.djMode = !state.djMode;
|
|||
|
|
localStorage.setItem('freedify_dj_mode', state.djMode);
|
|||
|
|
document.body.classList.toggle('dj-mode-active', state.djMode);
|
|||
|
|
|
|||
|
|
if (state.djMode) {
|
|||
|
|
showToast('🎧 DJ Mode activated');
|
|||
|
|
// Fetch audio features for current queue
|
|||
|
|
if (state.queue.length > 0) {
|
|||
|
|
fetchAudioFeaturesForQueue();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
showToast('DJ Mode deactivated');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Helper to render DJ Badge
|
|||
|
|
function renderDJBadgeForTrack(track) {
|
|||
|
|
if (!state.djMode) return '';
|
|||
|
|
|
|||
|
|
// For local tracks, use embedded audio_features directly (trust Serato)
|
|||
|
|
const isLocal = track.id?.startsWith('local_');
|
|||
|
|
const feat = isLocal ? track.audio_features : state.audioFeaturesCache[track.id];
|
|||
|
|
|
|||
|
|
if (!feat) return '<div class="dj-badge-placeholder" data-id="' + track.id + '"></div>';
|
|||
|
|
|
|||
|
|
const camelotClass = feat.camelot ? `camelot-${feat.camelot}` : '';
|
|||
|
|
return `
|
|||
|
|
<div class="dj-badge-container" style="display: flex;">
|
|||
|
|
<span class="dj-badge bpm-badge">${feat.bpm} BPM</span>
|
|||
|
|
<span class="dj-badge camelot-badge ${camelotClass}">${feat.camelot}</span>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Generic fetch features for any list of tracks
|
|||
|
|
async function fetchAudioFeaturesForTracks(tracks) {
|
|||
|
|
if (!state.djMode || !tracks || tracks.length === 0) return;
|
|||
|
|
|
|||
|
|
// Filter out already cached AND local files (trust local metadata)
|
|||
|
|
const tracksToFetch = tracks
|
|||
|
|
.filter(t => t.id && !t.id.startsWith('LINK:') && !t.id.startsWith('pod_') && !t.id.startsWith('local_'))
|
|||
|
|
.filter(t => !state.audioFeaturesCache[t.id])
|
|||
|
|
.map(t => ({
|
|||
|
|
id: t.id,
|
|||
|
|
isrc: t.isrc || null,
|
|||
|
|
name: t.name || null,
|
|||
|
|
artists: t.artists || null
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
// De-duplicate by ID
|
|||
|
|
const uniqueTracks = [];
|
|||
|
|
const seenIds = new Set();
|
|||
|
|
tracksToFetch.forEach(t => {
|
|||
|
|
if (!seenIds.has(t.id)) {
|
|||
|
|
seenIds.add(t.id);
|
|||
|
|
uniqueTracks.push(t);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (uniqueTracks.length === 0) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('/api/audio-features/batch', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ tracks: uniqueTracks })
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
data.features.forEach((feat, i) => {
|
|||
|
|
if (feat) {
|
|||
|
|
state.audioFeaturesCache[uniqueTracks[i].id] = feat;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// Trigger UI updates
|
|||
|
|
updateDJBadgesInUI();
|
|||
|
|
updatePlayerUI();
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.warn('Failed to fetch audio features:', err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update all badges in DOM
|
|||
|
|
function updateDJBadgesInUI() {
|
|||
|
|
// Update placeholders
|
|||
|
|
$$('.dj-badge-placeholder').forEach(el => {
|
|||
|
|
const id = el.dataset.id;
|
|||
|
|
const feat = state.audioFeaturesCache[id];
|
|||
|
|
if (feat) {
|
|||
|
|
const camelotClass = feat.camelot ? `camelot-${feat.camelot}` : '';
|
|||
|
|
el.outerHTML = `
|
|||
|
|
<div class="dj-badge-container" style="display: flex;">
|
|||
|
|
<span class="dj-badge bpm-badge">${feat.bpm} BPM</span>
|
|||
|
|
<span class="dj-badge camelot-badge ${camelotClass}">${feat.camelot}</span>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Update Player
|
|||
|
|
if (state.currentIndex >= 0 && state.queue[state.currentIndex]) {
|
|||
|
|
updatePlayerUI();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Fetch audio features for tracks in queue
|
|||
|
|
async function fetchAudioFeaturesForQueue() {
|
|||
|
|
await fetchAudioFeaturesForTracks(state.queue);
|
|||
|
|
addDJBadgesToQueue();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Open DJ setlist modal
|
|||
|
|
function openDJSetlistModal() {
|
|||
|
|
if (state.queue.length < 3) {
|
|||
|
|
showToast('Add at least 3 tracks to queue for setlist generation');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
djSetlistModal?.classList.remove('hidden');
|
|||
|
|
djSetlistLoading?.classList.add('hidden');
|
|||
|
|
djSetlistResults?.classList.add('hidden');
|
|||
|
|
djApplyBtn?.classList.add('hidden');
|
|||
|
|
state.lastSetlistResult = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeDJSetlistModal() {
|
|||
|
|
djSetlistModal?.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
djModalClose?.addEventListener('click', closeDJSetlistModal);
|
|||
|
|
djSetlistModal?.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === djSetlistModal) closeDJSetlistModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Generate setlist
|
|||
|
|
djGenerateBtn?.addEventListener('click', async () => {
|
|||
|
|
// Ensure we have audio features
|
|||
|
|
await fetchAudioFeaturesForQueue();
|
|||
|
|
|
|||
|
|
// Build tracks data - use embedded audio_features for local, cache for others
|
|||
|
|
const tracksData = state.queue.map(t => {
|
|||
|
|
const isLocal = t.id.startsWith('local_');
|
|||
|
|
const feat = isLocal ? t.audio_features : state.audioFeaturesCache[t.id];
|
|||
|
|
return {
|
|||
|
|
id: t.id,
|
|||
|
|
name: t.name,
|
|||
|
|
artists: t.artists,
|
|||
|
|
bpm: feat?.bpm || 0,
|
|||
|
|
camelot: feat?.camelot || '?',
|
|||
|
|
energy: feat?.energy || 0.5
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
djSetlistLoading?.classList.remove('hidden');
|
|||
|
|
djSetlistResults?.classList.add('hidden');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('/api/dj/generate-setlist', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
tracks: tracksData,
|
|||
|
|
style: djStyleSelect?.value || 'progressive'
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) throw new Error('Generation failed');
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
state.lastSetlistResult = result;
|
|||
|
|
|
|||
|
|
// Render results
|
|||
|
|
renderSetlistResults(result, tracksData);
|
|||
|
|
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Setlist generation error:', err);
|
|||
|
|
showToast('Failed to generate setlist');
|
|||
|
|
} finally {
|
|||
|
|
djSetlistLoading?.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function renderSetlistResults(result, tracksData) {
|
|||
|
|
if (!djOrderedTracks) return;
|
|||
|
|
|
|||
|
|
const trackMap = {};
|
|||
|
|
tracksData.forEach(t => trackMap[t.id] = t);
|
|||
|
|
state.queue.forEach(t => trackMap[t.id] = { ...trackMap[t.id], ...t });
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
result.ordered_ids.forEach((id, i) => {
|
|||
|
|
const track = trackMap[id];
|
|||
|
|
if (!track) return;
|
|||
|
|
|
|||
|
|
// Use embedded audio_features for local tracks, cache for others
|
|||
|
|
const isLocal = id.startsWith('local_');
|
|||
|
|
const feat = isLocal ? (track.audio_features || {}) : (state.audioFeaturesCache[id] || {});
|
|||
|
|
const camelotClass = feat.camelot ? `camelot-${feat.camelot}` : '';
|
|||
|
|
|
|||
|
|
html += `
|
|||
|
|
<div class="dj-track-item">
|
|||
|
|
<div class="dj-track-number">${i + 1}</div>
|
|||
|
|
<div class="dj-track-info">
|
|||
|
|
<div class="dj-track-name">${escapeHtml(track.name)}</div>
|
|||
|
|
<div class="dj-track-artist">${escapeHtml(track.artists)}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dj-track-meta">
|
|||
|
|
<span class="dj-badge bpm-badge">${feat.bpm || '?'} BPM</span>
|
|||
|
|
<span class="dj-badge camelot-badge ${camelotClass}">${feat.camelot || '?'}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Add transition tip if available
|
|||
|
|
if (i < result.suggestions?.length) {
|
|||
|
|
const sug = result.suggestions[i];
|
|||
|
|
const tipClass = sug.harmonic_match ? 'harmonic' : (sug.bpm_diff > 8 ? 'caution' : '');
|
|||
|
|
const technique = sug.technique ? `<span class="dj-technique-badge">${escapeHtml(sug.technique)}</span>` : '';
|
|||
|
|
const timing = sug.timing ? `<span class="dj-timing">${escapeHtml(sug.timing)}</span>` : '';
|
|||
|
|
const tipText = sug.tip ? escapeHtml(sug.tip) : '';
|
|||
|
|
|
|||
|
|
html += `
|
|||
|
|
<div class="dj-transition ${tipClass}">
|
|||
|
|
<div class="dj-transition-header">
|
|||
|
|
💡 ${technique} ${timing}
|
|||
|
|
</div>
|
|||
|
|
<div class="dj-transition-tip">${tipText}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
djOrderedTracks.innerHTML = html;
|
|||
|
|
djSetlistResults?.classList.remove('hidden');
|
|||
|
|
djApplyBtn?.classList.remove('hidden');
|
|||
|
|
|
|||
|
|
// Show method used
|
|||
|
|
const methodText = result.method === 'ai-gemini-2.0-flash' ? '✨ AI Generated' : '📊 Algorithm';
|
|||
|
|
showToast(`${methodText} setlist ready!`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Apply setlist to queue
|
|||
|
|
djApplyBtn?.addEventListener('click', () => {
|
|||
|
|
if (!state.lastSetlistResult?.ordered_ids) return;
|
|||
|
|
|
|||
|
|
const trackMap = {};
|
|||
|
|
state.queue.forEach(t => trackMap[t.id] = t);
|
|||
|
|
|
|||
|
|
const newQueue = [];
|
|||
|
|
state.lastSetlistResult.ordered_ids.forEach(id => {
|
|||
|
|
if (trackMap[id]) newQueue.push(trackMap[id]);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Add any tracks not in the result (shouldn't happen but safety)
|
|||
|
|
state.queue.forEach(t => {
|
|||
|
|
if (!newQueue.find(q => q.id === t.id)) {
|
|||
|
|
newQueue.push(t);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
state.queue = newQueue;
|
|||
|
|
state.currentIndex = 0;
|
|||
|
|
updateQueueUI();
|
|||
|
|
|
|||
|
|
closeDJSetlistModal();
|
|||
|
|
showToast('Queue reordered! Ready to mix 🎧');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Add "Generate DJ Set" button to queue header
|
|||
|
|
const queueHeader = $('.queue-header');
|
|||
|
|
if (queueHeader) {
|
|||
|
|
const djBtn = document.createElement('button');
|
|||
|
|
djBtn.className = 'dj-generate-set-btn';
|
|||
|
|
djBtn.innerHTML = '✨ Generate Set';
|
|||
|
|
djBtn.addEventListener('click', openDJSetlistModal);
|
|||
|
|
queueHeader.querySelector('.queue-controls')?.prepend(djBtn);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Modify renderQueueItem to show DJ badges (override/extend existing)
|
|||
|
|
const originalUpdateQueue = typeof updateQueueUI !== 'undefined' ? updateQueueUI : null;
|
|||
|
|
function updateQueueWithDJ() {
|
|||
|
|
originalUpdateQueue?.();
|
|||
|
|
if (state.djMode && state.queue.length > 0) {
|
|||
|
|
fetchAudioFeaturesForQueue().then(() => {
|
|||
|
|
addDJBadgesToQueue();
|
|||
|
|
// Also update player UI if needed
|
|||
|
|
if (state.currentIndex >= 0) {
|
|||
|
|
updatePlayerUI();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addDJBadgesToQueue() {
|
|||
|
|
if (!state.djMode) return;
|
|||
|
|
|
|||
|
|
const queueItems = $$('#queue-container .queue-item');
|
|||
|
|
queueItems.forEach((item, i) => {
|
|||
|
|
if (i >= state.queue.length) return;
|
|||
|
|
const track = state.queue[i];
|
|||
|
|
const feat = state.audioFeaturesCache[track.id];
|
|||
|
|
|
|||
|
|
// Remove existing badges
|
|||
|
|
const existing = item.querySelector('.dj-badge-container');
|
|||
|
|
if (existing) existing.remove();
|
|||
|
|
|
|||
|
|
if (feat) {
|
|||
|
|
const camelotClass = feat.camelot ? `camelot-${feat.camelot}` : '';
|
|||
|
|
const badgeContainer = document.createElement('div');
|
|||
|
|
badgeContainer.className = 'dj-badge-container';
|
|||
|
|
badgeContainer.innerHTML = `
|
|||
|
|
<span class="dj-badge bpm-badge">${feat.bpm} BPM</span>
|
|||
|
|
<span class="dj-badge camelot-badge ${camelotClass}">${feat.camelot}</span>
|
|||
|
|
<div class="energy-bar"><div class="energy-fill" style="width: ${feat.energy * 100}%"></div></div>
|
|||
|
|
`;
|
|||
|
|
item.querySelector('.queue-info')?.appendChild(badgeContainer);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Escape key closes DJ modal
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape' && !djSetlistModal?.classList.contains('hidden')) {
|
|||
|
|
closeDJSetlistModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ========== LOCAL FILE HANDLING ==========
|
|||
|
|
function initLocalFiles() {
|
|||
|
|
initDragAndDrop();
|
|||
|
|
initManualUpload();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initDragAndDrop() {
|
|||
|
|
// Attach to window to catch drops anywhere
|
|||
|
|
const dropZone = window;
|
|||
|
|
|
|||
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|||
|
|
dropZone.addEventListener(eventName, preventDefaults, false);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function preventDefaults(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Highlight drop zone (using body class)
|
|||
|
|
window.addEventListener('dragenter', () => document.body.classList.add('dragging'), false);
|
|||
|
|
window.addEventListener('dragleave', (e) => {
|
|||
|
|
// Only remove if leaving the window
|
|||
|
|
if (e.clientX === 0 && e.clientY === 0) {
|
|||
|
|
document.body.classList.remove('dragging');
|
|||
|
|
}
|
|||
|
|
}, false);
|
|||
|
|
|
|||
|
|
window.addEventListener('drop', (e) => {
|
|||
|
|
document.body.classList.remove('dragging');
|
|||
|
|
handleDrop(e);
|
|||
|
|
}, false);
|
|||
|
|
|
|||
|
|
console.log("Drag & Drop initialized on window");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initManualUpload() {
|
|||
|
|
// const addLocalBtn = document.getElementById('add-local-btn'); // Replaced by Label
|
|||
|
|
const fileInput = document.getElementById('file-input');
|
|||
|
|
|
|||
|
|
if (fileInput) {
|
|||
|
|
console.log("Initializing Manual Upload via Label");
|
|||
|
|
// No click listener needed for Label
|
|||
|
|
|
|||
|
|
fileInput.addEventListener('change', (e) => {
|
|||
|
|
console.log("File Input Changed", e.target.files);
|
|||
|
|
if (e.target.files && e.target.files.length > 0) {
|
|||
|
|
handleFiles(e.target.files);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
console.error("Could not find add-local-btn or file-input");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleDrop(e) {
|
|||
|
|
const dt = e.dataTransfer;
|
|||
|
|
const files = dt.files;
|
|||
|
|
handleFiles(files);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleFiles(files) {
|
|||
|
|
// alert(`DEBUG: handleFiles called with ${files.length} files`);
|
|||
|
|
console.log("HandleFiles Entry:", files.length);
|
|||
|
|
|
|||
|
|
const validExtensions = ['.mp3', '.flac', '.wav', '.aiff', '.aac', '.ogg', '.m4a', '.wma'];
|
|||
|
|
|
|||
|
|
const audioFiles = Array.from(files).filter(file => {
|
|||
|
|
const isAudio = file.type.startsWith('audio/') ||
|
|||
|
|
// Fallback: check extension if type is empty or generic
|
|||
|
|
validExtensions.some(ext => file.name.toLowerCase().endsWith(ext));
|
|||
|
|
return isAudio;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// DEBUG: Log files
|
|||
|
|
// console.log("All files:", files);
|
|||
|
|
|
|||
|
|
if (audioFiles.length === 0) {
|
|||
|
|
if (files.length > 0) showToast('No supported audio files found', 'error');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showLoading(`Processing ${audioFiles.length} local files...`);
|
|||
|
|
|
|||
|
|
let processedCount = 0;
|
|||
|
|
for (const file of audioFiles) {
|
|||
|
|
try {
|
|||
|
|
const metadata = await extractMetadata(file);
|
|||
|
|
if (metadata) {
|
|||
|
|
addLocalTrackToQueue(file, metadata);
|
|||
|
|
processedCount++;
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error processing file:', file.name, err);
|
|||
|
|
showToast(`Error reading ${file.name}`, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
|
|||
|
|
if (processedCount > 0) {
|
|||
|
|
showToast(`Added ${processedCount} local tracks to queue!`, 'success');
|
|||
|
|
updateQueueUI();
|
|||
|
|
if (!state.isPlaying && state.queue.length === processedCount) {
|
|||
|
|
playTrack(0); // Auto play if queue was empty
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function extractMetadata(file) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
if (!window.jsmediatags) {
|
|||
|
|
console.warn("jsmediatags not loaded");
|
|||
|
|
resolve({ title: file.name, artist: 'Local File' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.jsmediatags.read(file, {
|
|||
|
|
onSuccess: (tag) => {
|
|||
|
|
const tags = tag.tags;
|
|||
|
|
console.log("Raw tags from jsmediatags:", Object.keys(tags)); // DEBUG: Show all tag names
|
|||
|
|
|
|||
|
|
let picture = null;
|
|||
|
|
if (tags.picture) {
|
|||
|
|
const { data, format } = tags.picture;
|
|||
|
|
let base64String = "";
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
base64String += String.fromCharCode(data[i]);
|
|||
|
|
}
|
|||
|
|
picture = `data:${format};base64,${window.btoa(base64String)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Helper to extract tag value (handles both direct and .data formats)
|
|||
|
|
const getTagValue = (tagName) => {
|
|||
|
|
const tag = tags[tagName];
|
|||
|
|
if (!tag) return null;
|
|||
|
|
if (typeof tag === 'string' || typeof tag === 'number') return tag;
|
|||
|
|
if (tag.data !== undefined) return tag.data;
|
|||
|
|
return null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Dynamic search: find any tag containing "bpm" in name
|
|||
|
|
let bpm = null;
|
|||
|
|
let key = null;
|
|||
|
|
|
|||
|
|
for (const tagName of Object.keys(tags)) {
|
|||
|
|
const lowerName = tagName.toLowerCase();
|
|||
|
|
const val = getTagValue(tagName);
|
|||
|
|
|
|||
|
|
if (!bpm && (lowerName.includes('bpm') || lowerName.includes('beats'))) {
|
|||
|
|
bpm = val;
|
|||
|
|
console.log(`Found BPM in tag "${tagName}":`, val);
|
|||
|
|
}
|
|||
|
|
if (!key && (lowerName.includes('key') || lowerName === 'tkey')) {
|
|||
|
|
key = val;
|
|||
|
|
console.log(`Found Key in tag "${tagName}":`, val);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Parse BPM as integer
|
|||
|
|
if (bpm) bpm = parseInt(String(bpm).replace(/\D/g, ''), 10) || null;
|
|||
|
|
|
|||
|
|
console.log("Final Extracted BPM:", bpm, "Key:", key); // DEBUG
|
|||
|
|
|
|||
|
|
resolve({
|
|||
|
|
title: tags.title || file.name,
|
|||
|
|
artist: tags.artist || 'Local Artist',
|
|||
|
|
album: tags.album || 'Local Album',
|
|||
|
|
bpm: bpm,
|
|||
|
|
key: key,
|
|||
|
|
picture: picture
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onError: (error) => {
|
|||
|
|
console.warn('Metadata read error:', error);
|
|||
|
|
resolve({ title: file.name, artist: 'Local File' });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addLocalTrackToQueue(file, metadata) {
|
|||
|
|
const blobUrl = URL.createObjectURL(file);
|
|||
|
|
const safeId = `local_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|||
|
|
|
|||
|
|
// Convert musical key to Camelot notation for color coding
|
|||
|
|
const camelotKey = musicalKeyToCamelot(metadata.key);
|
|||
|
|
|
|||
|
|
const track = {
|
|||
|
|
id: safeId,
|
|||
|
|
name: metadata.title,
|
|||
|
|
artists: metadata.artist,
|
|||
|
|
album: metadata.album,
|
|||
|
|
album_art: metadata.picture || '/static/icon.svg',
|
|||
|
|
duration: 'Unknown',
|
|||
|
|
isrc: safeId,
|
|||
|
|
audio_features: {
|
|||
|
|
bpm: metadata.bpm || 0,
|
|||
|
|
camelot: camelotKey || (metadata.bpm ? '?' : null),
|
|||
|
|
energy: 0.5,
|
|||
|
|
key: -1,
|
|||
|
|
mode: 1
|
|||
|
|
},
|
|||
|
|
src: blobUrl,
|
|||
|
|
is_local: true
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
state.queue.push(track);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Initialize
|
|||
|
|
// Initialize
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
initLocalFiles();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Expose for inline HTML handlers
|
|||
|
|
window.handleFiles = handleFiles;
|
|||
|
|
window.extractMetadata = extractMetadata;
|
|||
|
|
|
|||
|
|
// CSS for drag highlight
|
|||
|
|
const style = document.createElement('style');
|
|||
|
|
style.textContent = `
|
|||
|
|
body.dragging {
|
|||
|
|
border: 4px dashed #1db954;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
document.head.appendChild(style);
|
|||
|
|
|
|||
|
|
// ========== AI RADIO ==========
|
|||
|
|
state.aiRadioActive = false;
|
|||
|
|
state.aiRadioFetching = false;
|
|||
|
|
state.aiRadioSeedTrack = null; // Store original seed track to prevent genre drift
|
|||
|
|
const aiRadioBtn = $('#ai-radio-btn');
|
|||
|
|
let aiRadioStatusEl = null;
|
|||
|
|
let aiRadioInterval = null;
|
|||
|
|
|
|||
|
|
// Toggle AI Radio
|
|||
|
|
if (aiRadioBtn) {
|
|||
|
|
aiRadioBtn.addEventListener('click', () => {
|
|||
|
|
console.log('AI Radio button clicked!');
|
|||
|
|
state.aiRadioActive = !state.aiRadioActive;
|
|||
|
|
aiRadioBtn.classList.toggle('active', state.aiRadioActive);
|
|||
|
|
|
|||
|
|
if (state.aiRadioActive) {
|
|||
|
|
// Store the original seed track when AI Radio starts
|
|||
|
|
const currentTrack = state.queue[Math.max(0, state.currentIndex)];
|
|||
|
|
state.aiRadioSeedTrack = currentTrack ? {
|
|||
|
|
name: currentTrack.name,
|
|||
|
|
artists: currentTrack.artists,
|
|||
|
|
bpm: currentTrack.audio_features?.bpm,
|
|||
|
|
camelot: currentTrack.audio_features?.camelot
|
|||
|
|
} : null;
|
|||
|
|
console.log('AI Radio seed track:', state.aiRadioSeedTrack);
|
|||
|
|
|
|||
|
|
showAIRadioStatus('AI Radio Active');
|
|||
|
|
showToast('📻 AI Radio started! Will auto-add similar tracks.');
|
|||
|
|
checkAndAddTracks(); // Start immediately
|
|||
|
|
|
|||
|
|
// Set up periodic check every 2 minutes (120 seconds)
|
|||
|
|
aiRadioInterval = setInterval(() => {
|
|||
|
|
console.log('AI Radio periodic check...');
|
|||
|
|
checkAndAddTracks();
|
|||
|
|
}, 120000);
|
|||
|
|
} else {
|
|||
|
|
hideAIRadioStatus();
|
|||
|
|
showToast('📻 AI Radio stopped');
|
|||
|
|
state.aiRadioSeedTrack = null; // Clear seed track
|
|||
|
|
|
|||
|
|
// Clear the interval
|
|||
|
|
if (aiRadioInterval) {
|
|||
|
|
clearInterval(aiRadioInterval);
|
|||
|
|
aiRadioInterval = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
console.error('AI Radio button not found! #ai-radio-btn');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showAIRadioStatus(message) {
|
|||
|
|
if (!aiRadioStatusEl) {
|
|||
|
|
aiRadioStatusEl = document.createElement('div');
|
|||
|
|
aiRadioStatusEl.className = 'ai-radio-status';
|
|||
|
|
document.body.appendChild(aiRadioStatusEl);
|
|||
|
|
}
|
|||
|
|
aiRadioStatusEl.innerHTML = `
|
|||
|
|
<span class="spinner-small"></span>
|
|||
|
|
<span>${message}</span>
|
|||
|
|
`;
|
|||
|
|
aiRadioStatusEl.style.display = 'flex';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideAIRadioStatus() {
|
|||
|
|
if (aiRadioStatusEl) {
|
|||
|
|
aiRadioStatusEl.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function checkAndAddTracks() {
|
|||
|
|
if (!state.aiRadioActive || state.aiRadioFetching) return;
|
|||
|
|
|
|||
|
|
const remainingTracks = state.queue.length - Math.max(0, state.currentIndex) - 1;
|
|||
|
|
console.log('AI Radio check:', { queueLen: state.queue.length, currentIndex: state.currentIndex, remaining: remainingTracks });
|
|||
|
|
|
|||
|
|
// Add more tracks if we have less than 3 remaining
|
|||
|
|
if (remainingTracks < 3) {
|
|||
|
|
state.aiRadioFetching = true;
|
|||
|
|
showAIRadioStatus('Finding similar tracks...');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// Use the ORIGINAL seed track stored when AI Radio started (prevents genre drift)
|
|||
|
|
const seed = state.aiRadioSeedTrack;
|
|||
|
|
|
|||
|
|
// Get current queue for exclusion
|
|||
|
|
const queueTracks = state.queue.map(t => ({
|
|||
|
|
name: t.name,
|
|||
|
|
artists: t.artists
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
// If no seed, use a default mood
|
|||
|
|
const requestBody = {
|
|||
|
|
seed_track: seed,
|
|||
|
|
mood: seed ? null : "popular music hits",
|
|||
|
|
current_queue: queueTracks,
|
|||
|
|
count: 5
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
console.log('AI Radio request:', requestBody);
|
|||
|
|
|
|||
|
|
const response = await fetch('/api/ai-radio/generate', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify(requestBody)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
console.log('AI Radio response:', data);
|
|||
|
|
const searchTerms = data.search_terms || [];
|
|||
|
|
|
|||
|
|
// Search and add tracks
|
|||
|
|
let addedCount = 0;
|
|||
|
|
for (const term of searchTerms) {
|
|||
|
|
if (addedCount >= 3) break; // Limit adds per batch
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const searchRes = await fetch(`/api/search?q=${encodeURIComponent(term)}&type=track`);
|
|||
|
|
if (searchRes.ok) {
|
|||
|
|
const searchData = await searchRes.json();
|
|||
|
|
const results = searchData.results || [];
|
|||
|
|
|
|||
|
|
// Add first non-duplicate result
|
|||
|
|
for (const track of results.slice(0, 3)) {
|
|||
|
|
const isDupe = state.queue.some(q =>
|
|||
|
|
q.id === track.id ||
|
|||
|
|
(q.name?.toLowerCase() === track.name?.toLowerCase() &&
|
|||
|
|
q.artists?.toLowerCase() === track.artists?.toLowerCase())
|
|||
|
|
);
|
|||
|
|
if (!isDupe) {
|
|||
|
|
state.queue.push(track);
|
|||
|
|
addedCount++;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('AI Radio search error:', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (addedCount > 0) {
|
|||
|
|
updateQueueUI();
|
|||
|
|
showToast(`📻 Added ${addedCount} tracks to queue`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('AI Radio error:', err);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
state.aiRadioFetching = false;
|
|||
|
|
if (state.aiRadioActive) {
|
|||
|
|
showAIRadioStatus('AI Radio Active');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check when current track ends
|
|||
|
|
const originalPlayTrack = window.playTrack || playTrack;
|
|||
|
|
const aiRadioWrappedPlayTrack = async function(index) {
|
|||
|
|
await originalPlayTrack(index);
|
|||
|
|
if (state.aiRadioActive) {
|
|||
|
|
setTimeout(checkAndAddTracks, 1000);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Hook into track end
|
|||
|
|
audioPlayer?.addEventListener('ended', () => {
|
|||
|
|
if (state.aiRadioActive) {
|
|||
|
|
setTimeout(checkAndAddTracks, 500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// alert("DEBUG: App.js initialization COMPLETE. If you see this, script is good.");
|
|||
|
|
console.log("App.js initialization COMPLETE");
|
|||
|
|
|
|||
|
|
// ========== ADD TO PLAYLIST MODAL ==========
|
|||
|
|
const playlistModal = $('#playlist-modal');
|
|||
|
|
const playlistList = $('#playlist-list');
|
|||
|
|
const newPlaylistInput = $('#new-playlist-input');
|
|||
|
|
const createPlaylistBtn = $('#create-playlist-btn');
|
|||
|
|
const playlistModalClose = $('#playlist-modal-close');
|
|||
|
|
const addToPlaylistBtn = $('#add-to-playlist-btn');
|
|||
|
|
|
|||
|
|
let pendingTrackForPlaylist = null;
|
|||
|
|
|
|||
|
|
function openAddToPlaylistModal(track) {
|
|||
|
|
if (!track) {
|
|||
|
|
showToast('No track selected');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
pendingTrackForPlaylist = track;
|
|||
|
|
|
|||
|
|
// Render playlist list
|
|||
|
|
if (state.playlists.length === 0) {
|
|||
|
|
playlistList.innerHTML = '<p style="color: var(--text-tertiary); text-align:center; padding:16px;">No playlists yet. Create one below!</p>';
|
|||
|
|
} else {
|
|||
|
|
playlistList.innerHTML = state.playlists.map(p => `
|
|||
|
|
<div class="playlist-list-item" data-playlist-id="${p.id}">
|
|||
|
|
${escapeHtml(p.name)} <span style="opacity:0.6">(${p.tracks.length})</span>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
|
|||
|
|
// Click handler for each playlist item
|
|||
|
|
playlistList.querySelectorAll('.playlist-list-item').forEach(el => {
|
|||
|
|
el.addEventListener('click', () => {
|
|||
|
|
addToPlaylist(el.dataset.playlistId, pendingTrackForPlaylist);
|
|||
|
|
closeAddToPlaylistModal();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
playlistModal.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeAddToPlaylistModal() {
|
|||
|
|
playlistModal.classList.add('hidden');
|
|||
|
|
pendingTrackForPlaylist = null;
|
|||
|
|
newPlaylistInput.value = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Create new playlist from modal
|
|||
|
|
createPlaylistBtn?.addEventListener('click', () => {
|
|||
|
|
const name = newPlaylistInput.value.trim();
|
|||
|
|
if (!name) {
|
|||
|
|
showToast('Enter a playlist name');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let tracks = [];
|
|||
|
|
if (pendingTrackForPlaylist) {
|
|||
|
|
tracks = Array.isArray(pendingTrackForPlaylist) ? pendingTrackForPlaylist : [pendingTrackForPlaylist];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const newPlaylist = createPlaylist(name, tracks);
|
|||
|
|
closeAddToPlaylistModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close modal
|
|||
|
|
playlistModalClose?.addEventListener('click', closeAddToPlaylistModal);
|
|||
|
|
playlistModal?.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === playlistModal) closeAddToPlaylistModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Heart button in More Menu -> opens modal for current track
|
|||
|
|
addToPlaylistBtn?.addEventListener('click', () => {
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
if (currentTrack) {
|
|||
|
|
openAddToPlaylistModal(currentTrack);
|
|||
|
|
// Close More menu
|
|||
|
|
$('#player-more-menu')?.classList.add('hidden');
|
|||
|
|
} else {
|
|||
|
|
showToast('No track playing');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Expose for queue item hearts (will be wired in updateQueueUI)
|
|||
|
|
window.openAddToPlaylistModal = openAddToPlaylistModal;
|
|||
|
|
|
|||
|
|
// ========== LOAD MORE RESULTS ==========
|
|||
|
|
const loadMoreBtn = $('#load-more-btn');
|
|||
|
|
if (loadMoreBtn) {
|
|||
|
|
loadMoreBtn.addEventListener('click', () => {
|
|||
|
|
if (state.lastSearchQuery) {
|
|||
|
|
performSearch(state.lastSearchQuery, true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========== LISTENBRAINZ LOGIC ==========
|
|||
|
|
// Scrobble Logic
|
|||
|
|
async function submitNowPlaying(track) {
|
|||
|
|
if (!state.listenBrainzConfig.valid) return;
|
|||
|
|
try {
|
|||
|
|
await fetch('/api/listenbrainz/now-playing', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {'Content-Type': 'application/json'},
|
|||
|
|
body: JSON.stringify(track)
|
|||
|
|
});
|
|||
|
|
} catch (e) { console.error('Now playing error:', e); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function submitScrobble(track) {
|
|||
|
|
if (!state.listenBrainzConfig.valid || state.scrobbledCurrent) return;
|
|||
|
|
try {
|
|||
|
|
state.scrobbledCurrent = true; // Prevent double scrobble
|
|||
|
|
await fetch('/api/listenbrainz/scrobble', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {'Content-Type': 'application/json'},
|
|||
|
|
body: JSON.stringify(track)
|
|||
|
|
});
|
|||
|
|
console.log('Scrobbled:', track.name);
|
|||
|
|
} catch (e) { console.error('Scrobble error:', e); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check initial LB status
|
|||
|
|
fetch('/api/listenbrainz/validate')
|
|||
|
|
.then(res => res.json())
|
|||
|
|
.then(data => {
|
|||
|
|
state.listenBrainzConfig = data;
|
|||
|
|
if (data.valid) console.log('ListenBrainz connected:', data.username);
|
|||
|
|
})
|
|||
|
|
.catch(console.error);
|
|||
|
|
|
|||
|
|
async function renderRecommendations() {
|
|||
|
|
resultsSection.classList.remove('hidden');
|
|||
|
|
detailView.classList.add('hidden');
|
|||
|
|
queueSection.classList.add('hidden');
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
// ========== SPOTIFY "MADE FOR YOU" SECTION ==========
|
|||
|
|
// DISABLED: Spotify's sp_dc cookie auth doesn't provide personalized search results.
|
|||
|
|
// Re-enable when Spotify Developer API access is available with proper OAuth scopes.
|
|||
|
|
/*
|
|||
|
|
try {
|
|||
|
|
const spotifyRes = await fetch('/api/spotify/made-for-you');
|
|||
|
|
if (spotifyRes.ok) {
|
|||
|
|
const spotifyPlaylists = await spotifyRes.json();
|
|||
|
|
|
|||
|
|
if (spotifyPlaylists && spotifyPlaylists.length > 0) {
|
|||
|
|
html += `
|
|||
|
|
<div class="results-header">
|
|||
|
|
<h2>Spotify For You</h2>
|
|||
|
|
<span class="results-count">${spotifyPlaylists.length} playlists</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="results-grid horizontal-scroll" id="spotify-mfy-grid">
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
for (const playlist of spotifyPlaylists) {
|
|||
|
|
html += `
|
|||
|
|
<div class="album-card spotify-mfy-card" data-id="${playlist.id}">
|
|||
|
|
<div class="album-card-art-container">
|
|||
|
|
<img class="album-card-art" src="${playlist.image || '/static/icon.png'}" alt="${escapeHtml(playlist.name)}" loading="lazy">
|
|||
|
|
<span class="hires-badge" style="background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);">Spotify</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="album-card-info">
|
|||
|
|
<p class="album-card-title">${escapeHtml(playlist.name)}</p>
|
|||
|
|
<p class="album-card-artist">${escapeHtml(playlist.owner || 'Spotify')}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('Could not load Spotify Made For You:', e);
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// ========== LISTENBRAINZ SECTION ==========
|
|||
|
|
if (!state.listenBrainzConfig.valid) {
|
|||
|
|
if (!html) {
|
|||
|
|
// No Spotify AND no ListenBrainz - show empty state
|
|||
|
|
resultsContainer.innerHTML = `
|
|||
|
|
<div class="empty-state">
|
|||
|
|
<div class="empty-icon">✨</div>
|
|||
|
|
<p class="empty-text">Connect Spotify or ListenBrainz to see personalized recommendations.</p>
|
|||
|
|
<p class="empty-text" style="font-size: 0.9em; opacity: 0.8; margin-top: 8px;">Set SPOTIFY_SP_DC or LISTENBRAINZ_TOKEN in your environment variables.</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
resultsContainer.innerHTML = html;
|
|||
|
|
attachSpotifyMFYHandlers();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showLoading('Loading your ListenBrainz playlists...');
|
|||
|
|
try {
|
|||
|
|
// Fetch playlists first
|
|||
|
|
const playlistsRes = await fetch(`/api/listenbrainz/playlists/${state.listenBrainzConfig.username}`);
|
|||
|
|
const playlistsData = await playlistsRes.json();
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
|
|||
|
|
// Fetch and display stats panel
|
|||
|
|
try {
|
|||
|
|
const statsRes = await fetch(`/api/listenbrainz/stats/${state.listenBrainzConfig.username}`);
|
|||
|
|
if (statsRes.ok) {
|
|||
|
|
const stats = await statsRes.json();
|
|||
|
|
if (stats.listen_count > 0) {
|
|||
|
|
html += `
|
|||
|
|
<div class="stats-panel">
|
|||
|
|
<div class="stats-item">
|
|||
|
|
<span class="stats-value">${stats.listen_count.toLocaleString()}</span>
|
|||
|
|
<span class="stats-label">Total Scrobbles</span>
|
|||
|
|
</div>
|
|||
|
|
${stats.top_artists.length > 0 ? `
|
|||
|
|
<div class="stats-item top-artists">
|
|||
|
|
<span class="stats-label">Top This Week</span>
|
|||
|
|
<div class="stats-artists">
|
|||
|
|
${stats.top_artists.slice(0, 3).map(a => `<span class="artist-tag">${escapeHtml(a.name)}</span>`).join('')}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
` : ''}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('Could not load LB stats:', e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Show playlists section
|
|||
|
|
if (playlistsData.playlists && playlistsData.playlists.length > 0) {
|
|||
|
|
html += `
|
|||
|
|
<div class="results-header">
|
|||
|
|
<h2>ListenBrainz Playlists</h2>
|
|||
|
|
<span class="results-count">${playlistsData.count} playlists</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="results-grid" id="lb-playlists-grid">
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
for (const playlist of playlistsData.playlists) {
|
|||
|
|
html += `
|
|||
|
|
<div class="album-card lb-playlist-card" data-id="${playlist.id}">
|
|||
|
|
<div class="album-card-art-container">
|
|||
|
|
<img class="album-card-art" src="/static/icon.svg" alt="${escapeHtml(playlist.name)}" loading="lazy">
|
|||
|
|
<span class="hires-badge" style="background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);">LB</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="album-card-info">
|
|||
|
|
<p class="album-card-title">${escapeHtml(playlist.name)}</p>
|
|||
|
|
<p class="album-card-artist">${escapeHtml(playlist.artists)}</p>
|
|||
|
|
<div class="album-card-meta">
|
|||
|
|
<span>${playlist.total_tracks || '?'} tracks</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html += '</div>';
|
|||
|
|
} else {
|
|||
|
|
html += `
|
|||
|
|
<div class="results-header">
|
|||
|
|
<h2>ListenBrainz Playlists</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="empty-state" style="margin-bottom: 24px;">
|
|||
|
|
<div class="empty-icon">📋</div>
|
|||
|
|
<p class="empty-text">No playlists found. Weekly Exploration playlists are generated on Mondays!</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resultsContainer.innerHTML = html;
|
|||
|
|
|
|||
|
|
// Attach click handlers for playlist cards
|
|||
|
|
resultsContainer.querySelectorAll('.lb-playlist-card').forEach(card => {
|
|||
|
|
card.addEventListener('click', async () => {
|
|||
|
|
const playlistId = card.dataset.id;
|
|||
|
|
await openLBPlaylist(playlistId);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
attachSpotifyMFYHandlers();
|
|||
|
|
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e);
|
|||
|
|
showError('Failed to load ListenBrainz data');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Attach click handlers for Spotify "Made For You" cards
|
|||
|
|
function attachSpotifyMFYHandlers() {
|
|||
|
|
resultsContainer.querySelectorAll('.spotify-mfy-card').forEach(card => {
|
|||
|
|
card.addEventListener('click', async () => {
|
|||
|
|
const playlistId = card.dataset.id;
|
|||
|
|
await openSpotifyPlaylist(playlistId);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Open a Spotify playlist in detail view
|
|||
|
|
async function openSpotifyPlaylist(playlistId) {
|
|||
|
|
showLoading('Loading playlist tracks...');
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/content/playlist/${playlistId}?source=spotify`);
|
|||
|
|
const playlist = await res.json();
|
|||
|
|
|
|||
|
|
if (!res.ok) throw new Error(playlist.detail);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
console.log('Opening Spotify playlist:', playlist.name, playlist);
|
|||
|
|
|
|||
|
|
// Show in detail view
|
|||
|
|
showDetailView(playlist, playlist.tracks || []);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to load Spotify playlist:', e);
|
|||
|
|
showError('Failed to load playlist');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Open a ListenBrainz playlist in detail view
|
|||
|
|
async function openLBPlaylist(playlistId) {
|
|||
|
|
showLoading('Loading playlist tracks...');
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/listenbrainz/playlist/${playlistId}`);
|
|||
|
|
const playlist = await res.json();
|
|||
|
|
|
|||
|
|
if (!res.ok) throw new Error(playlist.detail);
|
|||
|
|
|
|||
|
|
hideLoading();
|
|||
|
|
console.log('Opening LB playlist:', playlist.name, playlist);
|
|||
|
|
|
|||
|
|
// Show in detail view
|
|||
|
|
showDetailView(playlist, playlist.tracks || []);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to load LB playlist:', e);
|
|||
|
|
showError('Failed to load playlist');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showToast(message, duration = 3000) {
|
|||
|
|
let toast = document.createElement('div');
|
|||
|
|
toast.className = 'toast-notification';
|
|||
|
|
toast.textContent = message;
|
|||
|
|
Object.assign(toast.style, {
|
|||
|
|
position: 'fixed',
|
|||
|
|
bottom: '80px',
|
|||
|
|
left: '50%',
|
|||
|
|
transform: 'translateX(-50%)',
|
|||
|
|
backgroundColor: 'var(--accent)',
|
|||
|
|
color: 'white',
|
|||
|
|
padding: '10px 20px',
|
|||
|
|
borderRadius: '20px',
|
|||
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
|
|||
|
|
zIndex: '10000',
|
|||
|
|
opacity: '0',
|
|||
|
|
transition: 'opacity 0.3s',
|
|||
|
|
pointerEvents: 'none'
|
|||
|
|
});
|
|||
|
|
document.body.appendChild(toast);
|
|||
|
|
|
|||
|
|
// Animate in
|
|||
|
|
requestAnimationFrame(() => toast.style.opacity = '1');
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toast.style.opacity = '0';
|
|||
|
|
setTimeout(() => toast.remove(), 300);
|
|||
|
|
}, duration);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==================== WINAMP MINI PLAYER ====================
|
|||
|
|
async function toggleMiniPlayer() {
|
|||
|
|
if (!('documentPictureInPicture' in window)) {
|
|||
|
|
showError('Mini Player not supported in this browser (Chrome/Edge 116+ required)');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (pipWindow) {
|
|||
|
|
pipWindow.close();
|
|||
|
|
pipWindow = null;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
pipWindow = await documentPictureInPicture.requestWindow({
|
|||
|
|
width: 320,
|
|||
|
|
height: 160,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Copy Styles
|
|||
|
|
[...document.styleSheets].forEach((styleSheet) => {
|
|||
|
|
try {
|
|||
|
|
const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
|
|||
|
|
const style = document.createElement('style');
|
|||
|
|
style.textContent = cssRules;
|
|||
|
|
pipWindow.document.head.appendChild(style);
|
|||
|
|
} catch (e) {
|
|||
|
|
// Ignore CORS errors for external sheets
|
|||
|
|
const link = document.createElement('link');
|
|||
|
|
link.rel = 'stylesheet';
|
|||
|
|
link.type = styleSheet.type;
|
|||
|
|
link.media = styleSheet.media;
|
|||
|
|
link.href = styleSheet.href;
|
|||
|
|
pipWindow.document.head.appendChild(link);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Render Winamp HTML
|
|||
|
|
updateMiniPlayerDOM();
|
|||
|
|
|
|||
|
|
// Bind Controls
|
|||
|
|
const doc = pipWindow.document;
|
|||
|
|
doc.getElementById('wa-prev').onclick = () => playPrevious();
|
|||
|
|
doc.getElementById('wa-play').onclick = () => {
|
|||
|
|
const p = getActivePlayer();
|
|||
|
|
if (p.paused) p.play(); else p.pause();
|
|||
|
|
updateMiniPlayer(); // Immediate update
|
|||
|
|
};
|
|||
|
|
doc.getElementById('wa-pause').onclick = () => getActivePlayer().pause();
|
|||
|
|
doc.getElementById('wa-next').onclick = () => playNext();
|
|||
|
|
doc.getElementById('wa-vol').oninput = (e) => {
|
|||
|
|
const val = e.target.value / 100;
|
|||
|
|
updateVolume(val); // Syncs main slider too
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Force initial update
|
|||
|
|
updateMiniPlayer();
|
|||
|
|
|
|||
|
|
// Handle Close
|
|||
|
|
pipWindow.addEventListener('pagehide', () => {
|
|||
|
|
pipWindow = null;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Failed to open Mini Player:', err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateMiniPlayerDOM() {
|
|||
|
|
if (!pipWindow) return;
|
|||
|
|
const doc = pipWindow.document;
|
|||
|
|
|
|||
|
|
// If body is empty, inject structure
|
|||
|
|
if (!doc.body.children.length) {
|
|||
|
|
doc.body.className = 'winamp-body';
|
|||
|
|
doc.body.innerHTML = `
|
|||
|
|
<div class="winamp-player">
|
|||
|
|
<div class="winamp-titlebar">
|
|||
|
|
<div style="width:10px; height:10px; background:#fff; margin-right:4px; clip-path: polygon(50% 0, 0 100%, 100% 100%);"></div>
|
|||
|
|
<span class="winamp-titlebar-text">FREEDIFY</span>
|
|||
|
|
<span style="flex:1"></span>
|
|||
|
|
<div style="background:#808080; width:8px; height:8px; border:1px solid #fff; cursor:pointer;" onclick="window.close()"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="winamp-main">
|
|||
|
|
<div class="winamp-art">
|
|||
|
|
<img id="wa-art" src="" />
|
|||
|
|
</div>
|
|||
|
|
<div class="winamp-content">
|
|||
|
|
<div class="winamp-display">
|
|||
|
|
<div id="wa-time" class="winamp-time">00:00</div>
|
|||
|
|
<div id="wa-marquee" class="winamp-marquee"><span>Ready to Llama...</span></div>
|
|||
|
|
<div class="winamp-info-line">
|
|||
|
|
<span id="wa-format" style="color:#00e000; font-weight:bold;">MP3</span>
|
|||
|
|
<span id="wa-state" style="margin-left:8px;">STOP</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="winamp-controls">
|
|||
|
|
<div class="winamp-btn" id="wa-prev" title="Prev"><svg viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></div>
|
|||
|
|
<div class="winamp-btn" id="wa-play" title="Play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
|
|||
|
|
<div class="winamp-btn" id="wa-pause" title="Pause"><svg viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg></div>
|
|||
|
|
<div class="winamp-btn" id="wa-next" title="Next"><svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg></div>
|
|||
|
|
<div style="font-size: 8px; color: #fff; margin-left: 4px; font-family: 'Courier New', monospace;">VOL</div>
|
|||
|
|
<input type="range" class="winamp-slider" id="wa-vol" title="Volume Control" min="0" max="100" value="${state.volume * 100}">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateMiniPlayer() {
|
|||
|
|
if (!pipWindow) return;
|
|||
|
|
const doc = pipWindow.document;
|
|||
|
|
const player = getActivePlayer();
|
|||
|
|
|
|||
|
|
// Time
|
|||
|
|
const cur = player.currentTime || 0;
|
|||
|
|
const mins = Math.floor(cur / 60);
|
|||
|
|
const secs = Math.floor(cur % 60);
|
|||
|
|
const timeStr = `${mins.toString().padStart(2,'0')}:${secs.toString().padStart(2,'0')}`;
|
|||
|
|
const timeEl = doc.getElementById('wa-time');
|
|||
|
|
if (timeEl && timeEl.textContent !== timeStr) timeEl.textContent = timeStr;
|
|||
|
|
|
|||
|
|
// Metadata (Title - Artist)
|
|||
|
|
const title = $('#player-title').textContent;
|
|||
|
|
const artist = $('#player-artist').textContent;
|
|||
|
|
const text = `${artist} - ${title}`;
|
|||
|
|
const marquee = doc.getElementById('wa-marquee');
|
|||
|
|
if (marquee) {
|
|||
|
|
// Update span content or create one if missing
|
|||
|
|
let span = marquee.querySelector('span');
|
|||
|
|
if (!span) {
|
|||
|
|
span = doc.createElement('span');
|
|||
|
|
marquee.appendChild(span);
|
|||
|
|
}
|
|||
|
|
if (span.textContent !== text) span.textContent = text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// State (Play/Pause/Stop)
|
|||
|
|
const stateEl = doc.getElementById('wa-state');
|
|||
|
|
const newState = player.paused ? 'PAUSE' : 'PLAY';
|
|||
|
|
if (stateEl && stateEl.textContent !== newState) stateEl.textContent = newState;
|
|||
|
|
|
|||
|
|
// Art
|
|||
|
|
const mainArt = $('#player-art');
|
|||
|
|
const waArt = doc.getElementById('wa-art');
|
|||
|
|
if (waArt && mainArt && waArt.src !== mainArt.src) waArt.src = mainArt.src;
|
|||
|
|
|
|||
|
|
// Format
|
|||
|
|
const badge = $('#audio-format-badge');
|
|||
|
|
const waFormat = doc.getElementById('wa-format');
|
|||
|
|
if (waFormat && badge) {
|
|||
|
|
waFormat.textContent = badge.textContent || 'MP3';
|
|||
|
|
waFormat.style.color = (badge.textContent === 'HiFi' || badge.textContent === 'FLAC') ? '#00e000' : '#c0c000';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==================== AI ASSISTANT MODAL ====================
|
|||
|
|
|
|||
|
|
const aiModal = document.getElementById('ai-modal');
|
|||
|
|
const aiModalClose = document.getElementById('ai-modal-close');
|
|||
|
|
const aiModalOverlay = aiModal?.querySelector('.ai-modal-overlay');
|
|||
|
|
const aiMenuBtn = document.getElementById('ai-menu-btn');
|
|||
|
|
|
|||
|
|
// Playlist Generator elements
|
|||
|
|
const aiPlaylistInput = document.getElementById('ai-playlist-input');
|
|||
|
|
const aiPlaylistGenBtn = document.getElementById('ai-playlist-gen-btn');
|
|||
|
|
const aiPlaylistResults = document.getElementById('ai-playlist-results');
|
|||
|
|
const aiDurationSlider = document.getElementById('ai-duration-slider');
|
|||
|
|
const aiDurationLabel = document.getElementById('ai-duration-label');
|
|||
|
|
|
|||
|
|
// Open/Close Modal
|
|||
|
|
function openAIModal() {
|
|||
|
|
if (aiModal) {
|
|||
|
|
aiModal.classList.remove('hidden');
|
|||
|
|
aiPlaylistInput?.focus();
|
|||
|
|
// Hide menu if open
|
|||
|
|
document.getElementById('search-more-menu')?.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeAIModal() {
|
|||
|
|
if (aiModal) {
|
|||
|
|
aiModal.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Event listeners
|
|||
|
|
aiMenuBtn?.addEventListener('click', openAIModal);
|
|||
|
|
aiModalClose?.addEventListener('click', closeAIModal);
|
|||
|
|
aiModalOverlay?.addEventListener('click', closeAIModal);
|
|||
|
|
|
|||
|
|
// Duration slider
|
|||
|
|
aiDurationSlider?.addEventListener('input', () => {
|
|||
|
|
if (aiDurationLabel) {
|
|||
|
|
aiDurationLabel.textContent = `${aiDurationSlider.value} min`;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Playlist Generator
|
|||
|
|
aiPlaylistGenBtn?.addEventListener('click', async () => {
|
|||
|
|
const description = aiPlaylistInput?.value?.trim();
|
|||
|
|
if (!description) return;
|
|||
|
|
|
|||
|
|
const duration = parseInt(aiDurationSlider?.value) || 60;
|
|||
|
|
|
|||
|
|
aiPlaylistGenBtn.disabled = true;
|
|||
|
|
aiPlaylistResults.innerHTML = '<div class="ai-loading">Generating playlist</div>';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await fetch('/api/ai/generate-playlist', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ description, duration_mins: duration })
|
|||
|
|
});
|
|||
|
|
const data = await res.json();
|
|||
|
|
|
|||
|
|
if (data.tracks && data.tracks.length > 0) {
|
|||
|
|
let html = `
|
|||
|
|
<div class="ai-results-header">
|
|||
|
|
<span>🎵 ${data.playlist_name || 'Generated Playlist'}</span>
|
|||
|
|
<span>${data.tracks.length} tracks</span>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
data.tracks.forEach((track, i) => {
|
|||
|
|
html += `
|
|||
|
|
<div class="ai-track-item" data-artist="${escapeHtml(track.artist)}" data-title="${escapeHtml(track.title)}">
|
|||
|
|
<span style="color: var(--text-tertiary); width: 24px;">${i + 1}</span>
|
|||
|
|
<div class="ai-track-info">
|
|||
|
|
<div class="ai-track-title">${escapeHtml(track.title)}</div>
|
|||
|
|
<div class="ai-track-artist">${escapeHtml(track.artist)}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
html += '<button class="ai-add-all-btn" id="ai-add-all">➕ Add All to Queue</button>';
|
|||
|
|
|
|||
|
|
aiPlaylistResults.innerHTML = html;
|
|||
|
|
|
|||
|
|
// Click handler for individual tracks
|
|||
|
|
aiPlaylistResults.querySelectorAll('.ai-track-item').forEach(item => {
|
|||
|
|
item.addEventListener('click', async () => {
|
|||
|
|
const searchQuery = `${item.dataset.artist} ${item.dataset.title}`;
|
|||
|
|
closeAIModal();
|
|||
|
|
searchInput.value = searchQuery;
|
|||
|
|
await performSearch(searchQuery);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Add all button
|
|||
|
|
document.getElementById('ai-add-all')?.addEventListener('click', async () => {
|
|||
|
|
closeAIModal();
|
|||
|
|
const wasEmpty = state.queue.length === 0;
|
|||
|
|
// Auto-play if queue was empty OR nothing is currently loaded/playing
|
|||
|
|
const shouldAutoPlay = wasEmpty || !state.currentTrack;
|
|||
|
|
|
|||
|
|
const tracks = data.tracks;
|
|||
|
|
if (tracks.length === 0) return;
|
|||
|
|
|
|||
|
|
// Helper to search for a track
|
|||
|
|
const searchTrack = async (track) => {
|
|||
|
|
try {
|
|||
|
|
const searchRes = await fetch(`/api/search?q=${encodeURIComponent(track.artist + ' ' + track.title)}&type=track&limit=1`);
|
|||
|
|
const searchData = await searchRes.json();
|
|||
|
|
if (searchData.results && searchData.results.length > 0) {
|
|||
|
|
return searchData.results[0];
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to find track:', track.title);
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let hasStartedPlaying = false;
|
|||
|
|
|
|||
|
|
// 1. Process FIRST track immediately for instant playback
|
|||
|
|
const firstTrack = tracks[0];
|
|||
|
|
const firstResult = await searchTrack(firstTrack);
|
|||
|
|
|
|||
|
|
if (firstResult) {
|
|||
|
|
addToQueue(firstResult);
|
|||
|
|
if (shouldAutoPlay) {
|
|||
|
|
playTrack(firstResult);
|
|||
|
|
hasStartedPlaying = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. Process REST in parallel to preserve order but run fast
|
|||
|
|
if (tracks.length > 1) {
|
|||
|
|
const restTracks = tracks.slice(1);
|
|||
|
|
// Fetch all in parallel
|
|||
|
|
// Note: If list is huge (e.g. 50+), we might want to batch this.
|
|||
|
|
// But for typical AI playlists (10-20), Promise.all is fine.
|
|||
|
|
const results = await Promise.all(restTracks.map(t => searchTrack(t)));
|
|||
|
|
|
|||
|
|
// Add valid results to queue in order
|
|||
|
|
let addedCount = 0;
|
|||
|
|
results.forEach(result => {
|
|||
|
|
if (result) {
|
|||
|
|
addToQueue(result);
|
|||
|
|
addedCount++;
|
|||
|
|
|
|||
|
|
// Fallback: If first track failed to play/find, play the first valid one we found here
|
|||
|
|
if (shouldAutoPlay && !hasStartedPlaying) {
|
|||
|
|
playTrack(result);
|
|||
|
|
hasStartedPlaying = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (addedCount > 0) {
|
|||
|
|
showToast(`Added ${addedCount + (firstResult ? 1 : 0)} tracks to queue`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
aiPlaylistResults.innerHTML = '<p style="color: var(--text-secondary);">Could not generate playlist. Try a different description.</p>';
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Playlist generation error:', e);
|
|||
|
|
aiPlaylistResults.innerHTML = '<p style="color: var(--error);">Playlist generation failed. Please try again.</p>';
|
|||
|
|
} finally {
|
|||
|
|
aiPlaylistGenBtn.disabled = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close on Escape
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape' && aiModal && !aiModal.classList.contains('hidden')) {
|
|||
|
|
closeAIModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('AI Assistant module loaded');
|
|||
|
|
|
|||
|
|
// ========== KEYBOARD SHORTCUTS ==========
|
|||
|
|
// Use existing shortcuts modal
|
|||
|
|
const shortcutsModal = $('#shortcuts-help');
|
|||
|
|
const shortcutsCloseBtn = $('#shortcuts-close');
|
|||
|
|
|
|||
|
|
function openShortcutsModal() {
|
|||
|
|
if (shortcutsModal) shortcutsModal.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeShortcutsModal() {
|
|||
|
|
if (shortcutsModal) shortcutsModal.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (shortcutsCloseBtn) {
|
|||
|
|
shortcutsCloseBtn.addEventListener('click', closeShortcutsModal);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close on backdrop click
|
|||
|
|
if (shortcutsModal) {
|
|||
|
|
shortcutsModal.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === shortcutsModal) closeShortcutsModal();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Global keyboard shortcuts
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
// Ignore if typing in input
|
|||
|
|
const target = e.target;
|
|||
|
|
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Check for modals first
|
|||
|
|
if (e.key === 'Escape') {
|
|||
|
|
if (shortcutsModal && !shortcutsModal.classList.contains('hidden')) {
|
|||
|
|
closeShortcutsModal();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// Other escape handlers exist in their own listeners
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ? - Show shortcuts help
|
|||
|
|
if (e.key === '?' || (e.shiftKey && e.key === '/')) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
openShortcutsModal();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// / - Focus search
|
|||
|
|
if (e.key === '/' && !e.shiftKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (searchInput) searchInput.focus();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Space - Play/Pause
|
|||
|
|
if (e.key === ' ') {
|
|||
|
|
e.preventDefault();
|
|||
|
|
togglePlay();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Arrow Left - Previous track
|
|||
|
|
if (e.key === 'ArrowLeft' && !e.metaKey && !e.ctrlKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
playPrevious();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Arrow Right - Next track
|
|||
|
|
if (e.key === 'ArrowRight' && !e.metaKey && !e.ctrlKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
playNext();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Arrow Up - Volume up
|
|||
|
|
if (e.key === 'ArrowUp' && !e.metaKey && !e.ctrlKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const newVol = Math.min(1, state.volume + 0.1);
|
|||
|
|
setVolume(newVol);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Arrow Down - Volume down
|
|||
|
|
if (e.key === 'ArrowDown' && !e.metaKey && !e.ctrlKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const newVol = Math.max(0, state.volume - 0.1);
|
|||
|
|
setVolume(newVol);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// M - Mute/Unmute
|
|||
|
|
if (e.key.toLowerCase() === 'm') {
|
|||
|
|
toggleMute();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// R - Toggle repeat
|
|||
|
|
if (e.key.toLowerCase() === 'r') {
|
|||
|
|
cycleRepeatMode();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// S - Shuffle (if in queue view) (no Shift)
|
|||
|
|
if (e.key.toLowerCase() === 's' && !e.shiftKey) {
|
|||
|
|
shuffleQueue();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Shift + S - Sync to Drive
|
|||
|
|
if (e.key.toLowerCase() === 's' && e.shiftKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
syncBtn?.click();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// F - Toggle fullscreen player
|
|||
|
|
if (e.key.toLowerCase() === 'f') {
|
|||
|
|
toggleFullscreenPlayer();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Q - Toggle queue
|
|||
|
|
if (e.key.toLowerCase() === 'q') {
|
|||
|
|
toggleQueue();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// E - Toggle EQ panel
|
|||
|
|
if (e.key.toLowerCase() === 'e') {
|
|||
|
|
eqToggleBtn?.click();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// P - Add current track to Playlist
|
|||
|
|
if (e.key.toLowerCase() === 'p') {
|
|||
|
|
// Yield to visualizer controls
|
|||
|
|
if (visualizerActive && visualizerMode === 'milkdrop') return;
|
|||
|
|
|
|||
|
|
const currentTrack = state.queue[state.currentIndex];
|
|||
|
|
if (currentTrack && window.openAddToPlaylistModal) {
|
|||
|
|
window.openAddToPlaylistModal(currentTrack);
|
|||
|
|
} else {
|
|||
|
|
showToast('No track playing');
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// H - Toggle HiFi / Hi-Res mode
|
|||
|
|
if (e.key.toLowerCase() === 'h') {
|
|||
|
|
hifiBtn?.click();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// D - Download current track
|
|||
|
|
if (e.key.toLowerCase() === 'd') {
|
|||
|
|
downloadCurrentTrack();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// A - Toggle AI Radio
|
|||
|
|
if (e.key.toLowerCase() === 'a') {
|
|||
|
|
aiRadioBtn?.click();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('Keyboard shortcuts loaded');
|
|||
|
|
|
|||
|
|
// ========== INIT: Load persisted state ==========
|
|||
|
|
// Load saved queue on startup
|
|||
|
|
setTimeout(() => {
|
|||
|
|
loadQueueFromStorage();
|
|||
|
|
// Apply saved volume to audio players AND slider UI
|
|||
|
|
audioPlayer.volume = state.volume;
|
|||
|
|
audioPlayer2.volume = state.volume;
|
|||
|
|
if (volumeSlider) {
|
|||
|
|
volumeSlider.value = Math.round(state.volume * 100);
|
|||
|
|
}
|
|||
|
|
console.log(`Volume restored: ${Math.round(state.volume * 100)}%`);
|
|||
|
|
}, 100);
|
|||
|
|
|
|||
|
|
// ========== LYRICS MODAL ==========
|
|||
|
|
const lyricsBtn = $('#lyrics-btn');
|
|||
|
|
const fsLyricsBtn = $('#fs-lyrics-btn');
|
|||
|
|
const lyricsModal = $('#lyrics-modal');
|
|||
|
|
const lyricsModalClose = $('#lyrics-modal-close');
|
|||
|
|
const lyricsModalArt = $('#lyrics-modal-art');
|
|||
|
|
const lyricsModalTitle = $('#lyrics-modal-title');
|
|||
|
|
const lyricsModalArtist = $('#lyrics-modal-artist');
|
|||
|
|
const lyricsModalAlbum = $('#lyrics-modal-album');
|
|||
|
|
const lyricsLoading = $('#lyrics-loading');
|
|||
|
|
const lyricsText = $('#lyrics-text');
|
|||
|
|
const lyricsNotFound = $('#lyrics-not-found');
|
|||
|
|
const lyricsSearchLink = $('#lyrics-search-link');
|
|||
|
|
const aboutDescription = $('#about-description');
|
|||
|
|
const aboutRelease = $('#about-release');
|
|||
|
|
const aboutWriters = $('#about-writers');
|
|||
|
|
const aboutProducers = $('#about-producers');
|
|||
|
|
const geniusLink = $('#genius-link');
|
|||
|
|
const annotationsList = $('#annotations-list');
|
|||
|
|
const annotationsEmpty = $('#annotations-empty');
|
|||
|
|
const lyricsTabs = document.querySelectorAll('.lyrics-tab');
|
|||
|
|
const lyricsPanels = document.querySelectorAll('.lyrics-panel');
|
|||
|
|
|
|||
|
|
let currentLyricsData = null;
|
|||
|
|
|
|||
|
|
async function openLyricsModal() {
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
if (!track) {
|
|||
|
|
showToast('No track playing');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Show modal and loading state
|
|||
|
|
lyricsModal.classList.remove('hidden');
|
|||
|
|
lyricsLoading.classList.remove('hidden');
|
|||
|
|
lyricsText.textContent = '';
|
|||
|
|
lyricsNotFound.classList.add('hidden');
|
|||
|
|
aboutDescription.textContent = '';
|
|||
|
|
aboutRelease.textContent = '';
|
|||
|
|
aboutWriters.textContent = '';
|
|||
|
|
aboutProducers.textContent = '';
|
|||
|
|
|
|||
|
|
// Set header info
|
|||
|
|
lyricsModalArt.src = track.album_art || '/static/icon.svg';
|
|||
|
|
lyricsModalTitle.textContent = track.name || 'Unknown';
|
|||
|
|
lyricsModalArtist.textContent = track.artists || 'Unknown Artist';
|
|||
|
|
lyricsModalAlbum.textContent = track.album || '';
|
|||
|
|
|
|||
|
|
// Reset to lyrics tab
|
|||
|
|
lyricsTabs.forEach(t => t.classList.remove('active'));
|
|||
|
|
lyricsPanels.forEach(p => p.classList.remove('active'));
|
|||
|
|
document.querySelector('[data-tab="lyrics"]')?.classList.add('active');
|
|||
|
|
document.getElementById('lyrics-panel')?.classList.add('active');
|
|||
|
|
|
|||
|
|
// Fetch lyrics
|
|||
|
|
try {
|
|||
|
|
const artist = track.artists || '';
|
|||
|
|
const title = track.name || '';
|
|||
|
|
const response = await fetch(`/api/lyrics?artist=${encodeURIComponent(artist)}&title=${encodeURIComponent(title)}`);
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
currentLyricsData = data;
|
|||
|
|
lyricsLoading.classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (data.found && data.lyrics) {
|
|||
|
|
lyricsText.textContent = data.lyrics;
|
|||
|
|
lyricsNotFound.classList.add('hidden');
|
|||
|
|
} else {
|
|||
|
|
lyricsText.textContent = '';
|
|||
|
|
lyricsNotFound.classList.remove('hidden');
|
|||
|
|
lyricsSearchLink.href = `https://genius.com/search?q=${encodeURIComponent(artist + ' ' + title)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Populate About tab
|
|||
|
|
if (data.about) {
|
|||
|
|
aboutDescription.textContent = data.about;
|
|||
|
|
} else {
|
|||
|
|
aboutDescription.textContent = 'No description available for this track.';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (data.release_date) {
|
|||
|
|
aboutRelease.innerHTML = `<strong>Released:</strong> ${data.release_date}`;
|
|||
|
|
}
|
|||
|
|
if (data.writers && data.writers.length > 0) {
|
|||
|
|
aboutWriters.innerHTML = `<strong>Written by:</strong> ${data.writers.join(', ')}`;
|
|||
|
|
}
|
|||
|
|
if (data.producers && data.producers.length > 0) {
|
|||
|
|
aboutProducers.innerHTML = `<strong>Produced by:</strong> ${data.producers.join(', ')}`;
|
|||
|
|
}
|
|||
|
|
if (data.genius_url) {
|
|||
|
|
geniusLink.href = data.genius_url;
|
|||
|
|
geniusLink.classList.remove('hidden');
|
|||
|
|
} else {
|
|||
|
|
geniusLink.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Populate Annotations tab
|
|||
|
|
if (data.annotations && data.annotations.length > 0) {
|
|||
|
|
annotationsList.innerHTML = data.annotations.map(ann => `
|
|||
|
|
<div class="annotation-item">
|
|||
|
|
<div class="annotation-fragment">"${ann.fragment}"</div>
|
|||
|
|
<div class="annotation-text">${ann.text}</div>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
annotationsEmpty.classList.add('hidden');
|
|||
|
|
} else {
|
|||
|
|
annotationsList.innerHTML = '';
|
|||
|
|
annotationsEmpty.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Lyrics fetch error:', error);
|
|||
|
|
lyricsLoading.classList.add('hidden');
|
|||
|
|
lyricsText.textContent = '';
|
|||
|
|
lyricsNotFound.classList.remove('hidden');
|
|||
|
|
const artist = track.artists || '';
|
|||
|
|
const title = track.name || '';
|
|||
|
|
lyricsSearchLink.href = `https://genius.com/search?q=${encodeURIComponent(artist + ' ' + title)}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeLyricsModal() {
|
|||
|
|
lyricsModal.classList.add('hidden');
|
|||
|
|
currentLyricsData = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Button handlers
|
|||
|
|
if (lyricsBtn) {
|
|||
|
|
lyricsBtn.addEventListener('click', openLyricsModal);
|
|||
|
|
}
|
|||
|
|
if (fsLyricsBtn) {
|
|||
|
|
fsLyricsBtn.addEventListener('click', openLyricsModal);
|
|||
|
|
}
|
|||
|
|
if (lyricsModalClose) {
|
|||
|
|
lyricsModalClose.addEventListener('click', closeLyricsModal);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close on backdrop click
|
|||
|
|
lyricsModal?.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === lyricsModal) {
|
|||
|
|
closeLyricsModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Tab switching
|
|||
|
|
lyricsTabs.forEach(tab => {
|
|||
|
|
tab.addEventListener('click', () => {
|
|||
|
|
const tabName = tab.dataset.tab;
|
|||
|
|
|
|||
|
|
lyricsTabs.forEach(t => t.classList.remove('active'));
|
|||
|
|
lyricsPanels.forEach(p => p.classList.remove('active'));
|
|||
|
|
|
|||
|
|
tab.classList.add('active');
|
|||
|
|
document.getElementById(`${tabName}-panel`)?.classList.add('active');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Add L keyboard shortcut for lyrics
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|||
|
|
if (e.key.toLowerCase() === 'l' && !e.ctrlKey && !e.metaKey) {
|
|||
|
|
openLyricsModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('Lyrics modal loaded');
|
|||
|
|
|
|||
|
|
// ========== MUSIC VIDEO ==========
|
|||
|
|
const fsVideoBtn = $('#fs-video-btn');
|
|||
|
|
|
|||
|
|
function openMusicVideo() {
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
if (!track) {
|
|||
|
|
showToast('No track playing');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const artist = track.artists || '';
|
|||
|
|
const title = track.name || '';
|
|||
|
|
const query = `${artist} ${title} official music video`;
|
|||
|
|
|
|||
|
|
// Open YouTube search in new tab
|
|||
|
|
const youtubeUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`;
|
|||
|
|
window.open(youtubeUrl, '_blank');
|
|||
|
|
|
|||
|
|
showToast('🎬 Opening YouTube...');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Button handlers
|
|||
|
|
if (fsVideoBtn) {
|
|||
|
|
fsVideoBtn.addEventListener('click', openMusicVideo);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Also add to more menu video button
|
|||
|
|
const videoBtn = $('#video-btn');
|
|||
|
|
if (videoBtn) {
|
|||
|
|
videoBtn.addEventListener('click', openMusicVideo);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// V keyboard shortcut for video
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|||
|
|
if (e.key.toLowerCase() === 'v' && !e.ctrlKey && !e.metaKey && !e.altKey) {
|
|||
|
|
if (e.shiftKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
openVisualizer();
|
|||
|
|
} else {
|
|||
|
|
openMusicVideo();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('Music video feature loaded');
|
|||
|
|
|
|||
|
|
// Concerts feature removed per user request
|
|||
|
|
|
|||
|
|
// ========== AUDIO VISUALIZER ==========
|
|||
|
|
const visualizerBtn = $('#fs-visualizer-btn');
|
|||
|
|
const visualizerOverlay = $('#visualizer-overlay');
|
|||
|
|
const visualizerCanvas = $('#visualizer-canvas');
|
|||
|
|
const visualizerCanvasWebgl = $('#visualizer-canvas-webgl');
|
|||
|
|
const visualizerClose = $('#visualizer-close');
|
|||
|
|
const vizTrackName = $('#viz-track-name');
|
|||
|
|
const vizTrackArtist = $('#viz-track-artist');
|
|||
|
|
const vizModeBtns = document.querySelectorAll('.viz-mode-btn');
|
|||
|
|
|
|||
|
|
let visualizerActive = false;
|
|||
|
|
let visualizerMode = 'bars';
|
|||
|
|
let vizAnalyser = null;
|
|||
|
|
let animationId = null;
|
|||
|
|
let particles = [];
|
|||
|
|
|
|||
|
|
// Butterchurn (MilkDrop) variables
|
|||
|
|
let butterchurnVisualizer = null;
|
|||
|
|
let butterchurnPresets = [];
|
|||
|
|
let butterchurnPresetNames = [];
|
|||
|
|
let currentPresetIndex = 0;
|
|||
|
|
|
|||
|
|
function initButterchurn() {
|
|||
|
|
const bc = window.butterchurn?.default || window.butterchurn;
|
|||
|
|
if (butterchurnVisualizer || !bc) {
|
|||
|
|
if (!bc) console.error('Butterchurn library not found on window object');
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const canvas = visualizerCanvasWebgl || visualizerCanvas; // Fallback if element missing
|
|||
|
|
butterchurnVisualizer = bc.createVisualizer(
|
|||
|
|
audioContext,
|
|||
|
|
canvas,
|
|||
|
|
{
|
|||
|
|
width: canvas.width,
|
|||
|
|
height: canvas.height,
|
|||
|
|
pixelRatio: window.devicePixelRatio || 1,
|
|||
|
|
textureRatio: 1
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// Load presets
|
|||
|
|
let presets = window.butterchurnPresets?.default || window.butterchurnPresets;
|
|||
|
|
if (presets) {
|
|||
|
|
// Check if it's a module with getPresets
|
|||
|
|
if (typeof presets.getPresets === 'function') {
|
|||
|
|
presets = presets.getPresets();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
butterchurnPresets = presets;
|
|||
|
|
butterchurnPresetNames = Object.keys(butterchurnPresets);
|
|||
|
|
console.log(`Loaded ${butterchurnPresetNames.length} MilkDrop presets`);
|
|||
|
|
|
|||
|
|
// Load a random preset to start
|
|||
|
|
if (butterchurnPresetNames.length > 0) {
|
|||
|
|
currentPresetIndex = Math.floor(Math.random() * butterchurnPresetNames.length);
|
|||
|
|
loadButterchurnPreset(currentPresetIndex);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Connect to audio
|
|||
|
|
butterchurnVisualizer.connectAudio(vizAnalyser || volumeBoostGain);
|
|||
|
|
|
|||
|
|
console.log('Butterchurn initialized');
|
|||
|
|
return butterchurnVisualizer;
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to init Butterchurn:', e);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadButterchurnPreset(index) {
|
|||
|
|
if (!butterchurnVisualizer || butterchurnPresetNames.length === 0) return;
|
|||
|
|
|
|||
|
|
// Ensure index is valid
|
|||
|
|
if (index < 0) index = butterchurnPresetNames.length - 1;
|
|||
|
|
if (index >= butterchurnPresetNames.length) index = 0;
|
|||
|
|
currentPresetIndex = index;
|
|||
|
|
|
|||
|
|
const presetName = butterchurnPresetNames[index];
|
|||
|
|
const preset = butterchurnPresets[presetName];
|
|||
|
|
|
|||
|
|
console.log(`Loading preset [${index}]: ${presetName}`, preset ? 'found' : 'missing');
|
|||
|
|
|
|||
|
|
if (preset) {
|
|||
|
|
try {
|
|||
|
|
butterchurnVisualizer.loadPreset(preset, 1.0); // 1.0 = blend time
|
|||
|
|
showToast(`🎆 ${presetName}`);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading preset:', err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nextButterchurnPreset() {
|
|||
|
|
console.log('Next preset clicked');
|
|||
|
|
loadButterchurnPreset(currentPresetIndex + 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function prevButterchurnPreset() {
|
|||
|
|
console.log('Prev preset clicked');
|
|||
|
|
loadButterchurnPreset(currentPresetIndex - 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function randomButterchurnPreset() {
|
|||
|
|
currentPresetIndex = Math.floor(Math.random() * butterchurnPresetNames.length);
|
|||
|
|
loadButterchurnPreset(currentPresetIndex);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initVisualizerAnalyser() {
|
|||
|
|
if (vizAnalyser) return;
|
|||
|
|
|
|||
|
|
// We need to use the existing audioContext from the equalizer
|
|||
|
|
// First ensure EQ is initialized (which creates the audioContext)
|
|||
|
|
if (!audioContext) {
|
|||
|
|
initEqualizer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!audioContext) {
|
|||
|
|
console.error('No audio context available for visualizer');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// Create analyser and connect it to the audio chain
|
|||
|
|
vizAnalyser = audioContext.createAnalyser();
|
|||
|
|
vizAnalyser.fftSize = 256;
|
|||
|
|
vizAnalyser.smoothingTimeConstant = 0.8;
|
|||
|
|
|
|||
|
|
// Connect the volumeBoostGain to the analyser, then analyser to destination
|
|||
|
|
// We need to disconnect volumeBoostGain from destination first
|
|||
|
|
// Actually, let's just connect analyser in parallel to monitor the output
|
|||
|
|
if (volumeBoostGain) {
|
|||
|
|
volumeBoostGain.connect(vizAnalyser);
|
|||
|
|
} else {
|
|||
|
|
// If no EQ chain, try direct connection (fallback)
|
|||
|
|
console.warn('No volumeBoostGain, visualizer may not work well');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('Visualizer analyser connected to audio chain');
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to init visualizer analyser:', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function drawBars(ctx, dataArray, width, height) {
|
|||
|
|
const barCount = 64;
|
|||
|
|
const barWidth = width / barCount - 2;
|
|||
|
|
const gradient = ctx.createLinearGradient(0, height, 0, 0);
|
|||
|
|
gradient.addColorStop(0, '#ec4899');
|
|||
|
|
gradient.addColorStop(0.5, '#f59e0b');
|
|||
|
|
gradient.addColorStop(1, '#10b981');
|
|||
|
|
|
|||
|
|
for (let i = 0; i < barCount; i++) {
|
|||
|
|
const barHeight = (dataArray[i] / 255) * height * 0.8;
|
|||
|
|
const x = i * (barWidth + 2);
|
|||
|
|
|
|||
|
|
ctx.fillStyle = gradient;
|
|||
|
|
ctx.fillRect(x, height - barHeight, barWidth, barHeight);
|
|||
|
|
|
|||
|
|
// Mirror reflection
|
|||
|
|
ctx.globalAlpha = 0.3;
|
|||
|
|
ctx.fillRect(x, height, barWidth, barHeight * 0.3);
|
|||
|
|
ctx.globalAlpha = 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function drawWave(ctx, dataArray, width, height) {
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.strokeStyle = '#ec4899';
|
|||
|
|
ctx.lineWidth = 3;
|
|||
|
|
|
|||
|
|
const sliceWidth = width / dataArray.length;
|
|||
|
|
let x = 0;
|
|||
|
|
|
|||
|
|
for (let i = 0; i < dataArray.length; i++) {
|
|||
|
|
const v = dataArray[i] / 255;
|
|||
|
|
const y = v * height;
|
|||
|
|
|
|||
|
|
if (i === 0) {
|
|||
|
|
ctx.moveTo(x, y);
|
|||
|
|
} else {
|
|||
|
|
ctx.lineTo(x, y);
|
|||
|
|
}
|
|||
|
|
x += sliceWidth;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ctx.stroke();
|
|||
|
|
|
|||
|
|
// Draw mirrored wave
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.strokeStyle = '#f59e0b';
|
|||
|
|
ctx.globalAlpha = 0.5;
|
|||
|
|
x = 0;
|
|||
|
|
for (let i = 0; i < dataArray.length; i++) {
|
|||
|
|
const v = dataArray[i] / 255;
|
|||
|
|
const y = height - (v * height);
|
|||
|
|
if (i === 0) ctx.moveTo(x, y);
|
|||
|
|
else ctx.lineTo(x, y);
|
|||
|
|
x += sliceWidth;
|
|||
|
|
}
|
|||
|
|
ctx.stroke();
|
|||
|
|
ctx.globalAlpha = 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function drawParticles(ctx, dataArray, width, height) {
|
|||
|
|
// Spawn new particles based on audio intensity
|
|||
|
|
const avgIntensity = dataArray.reduce((a, b) => a + b, 0) / dataArray.length;
|
|||
|
|
|
|||
|
|
if (avgIntensity > 100 && particles.length < 200) {
|
|||
|
|
for (let i = 0; i < 3; i++) {
|
|||
|
|
particles.push({
|
|||
|
|
x: Math.random() * width,
|
|||
|
|
y: height + 10,
|
|||
|
|
vx: (Math.random() - 0.5) * 4,
|
|||
|
|
vy: -(Math.random() * 5 + 2),
|
|||
|
|
size: Math.random() * 6 + 2,
|
|||
|
|
color: `hsl(${Math.random() * 60 + 300}, 100%, 60%)`,
|
|||
|
|
life: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update and draw particles
|
|||
|
|
particles = particles.filter(p => p.life > 0);
|
|||
|
|
for (const p of particles) {
|
|||
|
|
p.x += p.vx;
|
|||
|
|
p.y += p.vy;
|
|||
|
|
p.vy += 0.02; // Gravity
|
|||
|
|
p.life -= 0.01;
|
|||
|
|
|
|||
|
|
ctx.beginPath();
|
|||
|
|
const radius = Math.max(0, p.size * p.life);
|
|||
|
|
ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
|
|||
|
|
ctx.fillStyle = p.color;
|
|||
|
|
ctx.globalAlpha = p.life;
|
|||
|
|
ctx.fill();
|
|||
|
|
}
|
|||
|
|
ctx.globalAlpha = 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderVisualizer() {
|
|||
|
|
if (!visualizerActive || !vizAnalyser) return;
|
|||
|
|
|
|||
|
|
const canvas = visualizerCanvas;
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
const width = canvas.width;
|
|||
|
|
const height = canvas.height;
|
|||
|
|
|
|||
|
|
// Get frequency data
|
|||
|
|
const bufferLength = vizAnalyser.frequencyBinCount;
|
|||
|
|
const dataArray = new Uint8Array(bufferLength);
|
|||
|
|
vizAnalyser.getByteFrequencyData(dataArray);
|
|||
|
|
|
|||
|
|
// Clear canvas with fade effect
|
|||
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
|
|||
|
|
ctx.fillRect(0, 0, width, height);
|
|||
|
|
|
|||
|
|
// Draw based on mode
|
|||
|
|
switch (visualizerMode) {
|
|||
|
|
case 'milkdrop':
|
|||
|
|
// Butterchurn handles its own rendering
|
|||
|
|
if (butterchurnVisualizer) {
|
|||
|
|
butterchurnVisualizer.render();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'bars':
|
|||
|
|
drawBars(ctx, dataArray, width, height);
|
|||
|
|
break;
|
|||
|
|
case 'wave':
|
|||
|
|
drawWave(ctx, dataArray, width, height);
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case 'particles':
|
|||
|
|
drawParticles(ctx, dataArray, width, height);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
animationId = requestAnimationFrame(renderVisualizer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Visualizer Idle State
|
|||
|
|
let visualizerIdleTimer = null;
|
|||
|
|
let vizInfoBriefTimer = null;
|
|||
|
|
let visualizerListenersAttached = false;
|
|||
|
|
|
|||
|
|
function resetVisualizerIdleTimer() {
|
|||
|
|
if (!visualizerActive) return;
|
|||
|
|
|
|||
|
|
// Remove idle class (show UI)
|
|||
|
|
visualizerOverlay.classList.remove('user-idle');
|
|||
|
|
|
|||
|
|
// Clear existing timer
|
|||
|
|
if (visualizerIdleTimer) clearTimeout(visualizerIdleTimer);
|
|||
|
|
|
|||
|
|
// Set new timer (10s)
|
|||
|
|
visualizerIdleTimer = setTimeout(() => {
|
|||
|
|
if (visualizerActive) {
|
|||
|
|
visualizerOverlay.classList.add('user-idle');
|
|||
|
|
}
|
|||
|
|
}, 10000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showVisualizerInfoBriefly() {
|
|||
|
|
if (!visualizerActive) return;
|
|||
|
|
|
|||
|
|
// Ensure info is updated
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
if (track) {
|
|||
|
|
vizTrackName.textContent = track.name || 'Unknown Track';
|
|||
|
|
vizTrackArtist.textContent = track.artists || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add temp-visible class
|
|||
|
|
const info = document.querySelector('.visualizer-track-info');
|
|||
|
|
if (info) {
|
|||
|
|
info.classList.add('temp-visible');
|
|||
|
|
|
|||
|
|
if (vizInfoBriefTimer) clearTimeout(vizInfoBriefTimer);
|
|||
|
|
|
|||
|
|
vizInfoBriefTimer = setTimeout(() => {
|
|||
|
|
info.classList.remove('temp-visible');
|
|||
|
|
}, 15000); // 15s
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initVisualizerIdleState() {
|
|||
|
|
if (visualizerListenersAttached) return;
|
|||
|
|
|
|||
|
|
const events = ['mousemove', 'mousedown', 'click', 'keydown', 'touchstart'];
|
|||
|
|
events.forEach(event => {
|
|||
|
|
document.addEventListener(event, resetVisualizerIdleTimer);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
visualizerListenersAttached = true;
|
|||
|
|
resetVisualizerIdleTimer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openVisualizer() {
|
|||
|
|
const track = state.queue[state.currentIndex];
|
|||
|
|
if (!track) {
|
|||
|
|
showToast('Play a track first');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Initialize visualizer analyser (uses existing audioContext from EQ)
|
|||
|
|
initVisualizerAnalyser();
|
|||
|
|
if (audioContext?.state === 'suspended') {
|
|||
|
|
audioContext.resume();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Init idle state
|
|||
|
|
initVisualizerIdleState();
|
|||
|
|
visualizerOverlay.classList.remove('user-idle');
|
|||
|
|
|
|||
|
|
// Update track info
|
|||
|
|
vizTrackName.textContent = track.name || 'Unknown Track';
|
|||
|
|
vizTrackArtist.textContent = track.artists || '';
|
|||
|
|
|
|||
|
|
// Set canvas size
|
|||
|
|
visualizerCanvas.width = window.innerWidth;
|
|||
|
|
visualizerCanvas.height = window.innerHeight;
|
|||
|
|
if (visualizerCanvasWebgl) {
|
|||
|
|
visualizerCanvasWebgl.width = window.innerWidth;
|
|||
|
|
visualizerCanvasWebgl.height = window.innerHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Initial visibility
|
|||
|
|
if (visualizerMode === 'milkdrop') {
|
|||
|
|
if (!butterchurnVisualizer) initButterchurn();
|
|||
|
|
visualizerCanvasWebgl?.classList.remove('hidden');
|
|||
|
|
visualizerCanvas?.classList.add('hidden');
|
|||
|
|
} else {
|
|||
|
|
visualizerCanvasWebgl?.classList.add('hidden');
|
|||
|
|
visualizerCanvas?.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Show overlay
|
|||
|
|
visualizerOverlay.classList.remove('hidden');
|
|||
|
|
visualizerActive = true;
|
|||
|
|
|
|||
|
|
// Start rendering
|
|||
|
|
renderVisualizer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeVisualizer() {
|
|||
|
|
visualizerActive = false;
|
|||
|
|
visualizerOverlay.classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (animationId) {
|
|||
|
|
cancelAnimationFrame(animationId);
|
|||
|
|
animationId = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Button handlers
|
|||
|
|
if (visualizerBtn) {
|
|||
|
|
visualizerBtn.addEventListener('click', openVisualizer);
|
|||
|
|
}
|
|||
|
|
// Also add to more menu visualizer button
|
|||
|
|
const menuVisualizerBtn = $('#menu-visualizer-btn');
|
|||
|
|
if (menuVisualizerBtn) {
|
|||
|
|
menuVisualizerBtn.addEventListener('click', openVisualizer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (visualizerClose) {
|
|||
|
|
visualizerClose.addEventListener('click', closeVisualizer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close on ESC
|
|||
|
|
document.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape' && visualizerActive) {
|
|||
|
|
closeVisualizer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// N for Next Preset (MilkDrop)
|
|||
|
|
if ((e.key === 'n' || e.key === 'N') && visualizerActive && visualizerMode === 'milkdrop') {
|
|||
|
|
nextButterchurnPreset();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// P for Prev Preset (MilkDrop)
|
|||
|
|
if ((e.key === 'p' || e.key === 'P') && visualizerActive && visualizerMode === 'milkdrop') {
|
|||
|
|
prevButterchurnPreset();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Mode switching
|
|||
|
|
vizModeBtns.forEach(btn => {
|
|||
|
|
btn.addEventListener('click', () => {
|
|||
|
|
// Toggle preset button visibility
|
|||
|
|
const isMilkDrop = btn.dataset.mode === 'milkdrop';
|
|||
|
|
const nextPresetBtn = document.getElementById('viz-next-preset');
|
|||
|
|
const prevPresetBtn = document.getElementById('viz-prev-preset');
|
|||
|
|
|
|||
|
|
if (nextPresetBtn) nextPresetBtn.style.display = isMilkDrop ? 'block' : 'none';
|
|||
|
|
if (prevPresetBtn) prevPresetBtn.style.display = isMilkDrop ? 'block' : 'none';
|
|||
|
|
|
|||
|
|
// Handle normal mode switching
|
|||
|
|
if (!btn.id || (btn.id !== 'viz-next-preset' && btn.id !== 'viz-prev-preset')) {
|
|||
|
|
vizModeBtns.forEach(b => {
|
|||
|
|
if (b.id !== 'viz-next-preset' && b.id !== 'viz-prev-preset') b.classList.remove('active');
|
|||
|
|
});
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
visualizerMode = btn.dataset.mode;
|
|||
|
|
particles = []; // Clear particles when switching modes
|
|||
|
|
|
|||
|
|
// Init Butterchurn if needed
|
|||
|
|
if (visualizerMode === 'milkdrop') {
|
|||
|
|
if (!butterchurnVisualizer) initButterchurn();
|
|||
|
|
// Toggle canvases
|
|||
|
|
if (visualizerCanvasWebgl) {
|
|||
|
|
visualizerCanvasWebgl.classList.remove('hidden');
|
|||
|
|
visualizerCanvas.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// Toggle canvases
|
|||
|
|
if (visualizerCanvasWebgl) {
|
|||
|
|
visualizerCanvasWebgl.classList.add('hidden');
|
|||
|
|
visualizerCanvas.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const vizNextPresetBtn = document.getElementById('viz-next-preset');
|
|||
|
|
if (vizNextPresetBtn) {
|
|||
|
|
vizNextPresetBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
nextButterchurnPreset();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
const vizPrevPresetBtn = document.getElementById('viz-prev-preset');
|
|||
|
|
if (vizPrevPresetBtn) {
|
|||
|
|
vizPrevPresetBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
prevButterchurnPreset();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Handle window resize
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
if (visualizerActive) {
|
|||
|
|
visualizerCanvas.width = window.innerWidth;
|
|||
|
|
visualizerCanvas.height = window.innerHeight;
|
|||
|
|
|
|||
|
|
if (visualizerCanvasWebgl) {
|
|||
|
|
visualizerCanvasWebgl.width = window.innerWidth;
|
|||
|
|
visualizerCanvasWebgl.height = window.innerHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (butterchurnVisualizer) {
|
|||
|
|
butterchurnVisualizer.setRendererSize(window.innerWidth, window.innerHeight);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('Audio visualizer loaded');
|
|||
|
|
|
|||
|
|
// ========== CONCERT ALERTS ==========
|
|||
|
|
|
|||
|
|
const concertModal = $('#concert-modal');
|
|||
|
|
const concertModalClose = $('#concert-modal-close');
|
|||
|
|
const concertMenuBtn = $('#concert-search-menu-btn');
|
|||
|
|
const concertResults = $('#concert-results');
|
|||
|
|
const concertLoading = $('#concert-loading');
|
|||
|
|
const concertEmpty = $('#concert-empty');
|
|||
|
|
const concertArtistSearch = $('#concert-artist-search');
|
|||
|
|
const concertSearchBtn = $('#concert-search-btn');
|
|||
|
|
const concertTabs = $$('.concert-tab');
|
|||
|
|
const concertRecentSection = $('#concert-recent-section');
|
|||
|
|
const concertSearchSection = $('#concert-search-section');
|
|||
|
|
|
|||
|
|
// Concert State
|
|||
|
|
const concertState = {
|
|||
|
|
currentTab: 'recent'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Open Concert Modal (optionally with artist pre-filled from main search)
|
|||
|
|
function openConcertModal(artistQuery = null) {
|
|||
|
|
concertModal?.classList.remove('hidden');
|
|||
|
|
|
|||
|
|
// If artist query provided, switch to search tab and auto-search
|
|||
|
|
if (artistQuery && artistQuery.trim()) {
|
|||
|
|
concertState.currentTab = 'search';
|
|||
|
|
concertTabs.forEach(t => t.classList.remove('active'));
|
|||
|
|
concertTabs.forEach(t => { if (t.dataset.tab === 'search') t.classList.add('active'); });
|
|||
|
|
concertRecentSection?.classList.add('hidden');
|
|||
|
|
concertSearchSection?.classList.remove('hidden');
|
|||
|
|
|
|||
|
|
if (concertArtistSearch) {
|
|||
|
|
concertArtistSearch.value = artistQuery.trim();
|
|||
|
|
}
|
|||
|
|
searchConcerts(artistQuery.trim());
|
|||
|
|
} else if (concertState.currentTab === 'recent') {
|
|||
|
|
// Load concerts for recent artists by default
|
|||
|
|
loadConcertsForRecentArtists();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Close Concert Modal
|
|||
|
|
function closeConcertModal() {
|
|||
|
|
concertModal?.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Get unique artists from recent listen history
|
|||
|
|
function getRecentArtists() {
|
|||
|
|
const artistSet = new Set();
|
|||
|
|
const artists = [];
|
|||
|
|
|
|||
|
|
// Get from current queue
|
|||
|
|
state.queue.forEach(track => {
|
|||
|
|
if (track.artists && !artistSet.has(track.artists)) {
|
|||
|
|
artistSet.add(track.artists);
|
|||
|
|
artists.push(track.artists.split(',')[0].trim()); // Take first artist
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Limit to 10 unique artists
|
|||
|
|
return artists.slice(0, 10);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Load concerts for recent artists
|
|||
|
|
async function loadConcertsForRecentArtists() {
|
|||
|
|
const artists = getRecentArtists();
|
|||
|
|
|
|||
|
|
if (artists.length === 0) {
|
|||
|
|
concertResults.innerHTML = '';
|
|||
|
|
concertEmpty.classList.remove('hidden');
|
|||
|
|
concertEmpty.querySelector('p').textContent = 'Listen to some music first to see concert recommendations!';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
concertLoading.classList.remove('hidden');
|
|||
|
|
concertEmpty.classList.add('hidden');
|
|||
|
|
concertResults.innerHTML = '';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/concerts/for-artists?artists=${encodeURIComponent(artists.join(','))}`);
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
concertLoading.classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (data.events && data.events.length > 0) {
|
|||
|
|
renderConcertCards(data.events);
|
|||
|
|
} else {
|
|||
|
|
concertEmpty.classList.remove('hidden');
|
|||
|
|
concertEmpty.querySelector('p').textContent = 'No upcoming concerts found for your recent artists';
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Concert fetch error:', error);
|
|||
|
|
concertLoading.classList.add('hidden');
|
|||
|
|
concertEmpty.classList.remove('hidden');
|
|||
|
|
concertEmpty.querySelector('p').textContent = 'Failed to load concerts. Check API keys.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Search concerts for a specific artist
|
|||
|
|
async function searchConcerts(artist) {
|
|||
|
|
if (!artist.trim()) return;
|
|||
|
|
|
|||
|
|
concertLoading.classList.remove('hidden');
|
|||
|
|
concertEmpty.classList.add('hidden');
|
|||
|
|
concertResults.innerHTML = '';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/concerts/search?artist=${encodeURIComponent(artist)}`);
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
concertLoading.classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (data.events && data.events.length > 0) {
|
|||
|
|
renderConcertCards(data.events);
|
|||
|
|
} else {
|
|||
|
|
concertEmpty.classList.remove('hidden');
|
|||
|
|
concertEmpty.querySelector('p').textContent = `No upcoming concerts found for "${artist}"`;
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Concert search error:', error);
|
|||
|
|
concertLoading.classList.add('hidden');
|
|||
|
|
concertEmpty.classList.remove('hidden');
|
|||
|
|
concertEmpty.querySelector('p').textContent = 'Search failed. Check API keys.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Render concert cards
|
|||
|
|
function renderConcertCards(events) {
|
|||
|
|
concertResults.innerHTML = events.map(event => {
|
|||
|
|
const date = event.date ? new Date(event.date + 'T00:00:00').toLocaleDateString('en-US', {
|
|||
|
|
weekday: 'short',
|
|||
|
|
month: 'short',
|
|||
|
|
day: 'numeric',
|
|||
|
|
year: 'numeric'
|
|||
|
|
}) : 'TBA';
|
|||
|
|
|
|||
|
|
const time = event.time ? formatConcertTime(event.time) : '';
|
|||
|
|
const location = [event.city, event.state, event.country].filter(Boolean).join(', ');
|
|||
|
|
const priceRange = event.price_min && event.price_max
|
|||
|
|
? `$${Math.round(event.price_min)} - $${Math.round(event.price_max)}`
|
|||
|
|
: event.price_min
|
|||
|
|
? `From $${Math.round(event.price_min)}`
|
|||
|
|
: '';
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="concert-card">
|
|||
|
|
${event.image
|
|||
|
|
? `<img class="concert-card-image" src="${event.image}" alt="${event.artist}" onerror="this.outerHTML='<div class=\\'concert-card-image placeholder\\'>🎵</div>'">`
|
|||
|
|
: '<div class="concert-card-image placeholder">🎵</div>'
|
|||
|
|
}
|
|||
|
|
<div class="concert-card-info">
|
|||
|
|
<div class="concert-card-artist">
|
|||
|
|
${event.artist || event.name}
|
|||
|
|
<span class="concert-source-badge">${event.source}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="concert-card-venue">📍 ${event.venue}${location ? `, ${location}` : ''}</div>
|
|||
|
|
<div class="concert-card-date">📅 ${date}${time ? ` • ${time}` : ''}</div>
|
|||
|
|
${priceRange ? `<div class="concert-card-price">💰 ${priceRange}</div>` : ''}
|
|||
|
|
</div>
|
|||
|
|
<div class="concert-card-actions">
|
|||
|
|
${event.ticket_url
|
|||
|
|
? `<a href="${event.ticket_url}" target="_blank" rel="noopener" class="concert-ticket-btn">🎫 Tickets</a>`
|
|||
|
|
: ''
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Format time from HH:MM:SS to readable
|
|||
|
|
function formatConcertTime(timeStr) {
|
|||
|
|
if (!timeStr) return '';
|
|||
|
|
const [hours, minutes] = timeStr.split(':');
|
|||
|
|
const h = parseInt(hours);
|
|||
|
|
const ampm = h >= 12 ? 'PM' : 'AM';
|
|||
|
|
const hour12 = h % 12 || 12;
|
|||
|
|
return `${hour12}:${minutes} ${ampm}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Event Listeners
|
|||
|
|
concertMenuBtn?.addEventListener('click', () => {
|
|||
|
|
// Get text from main search input if any
|
|||
|
|
const mainSearchInput = $('#search-input');
|
|||
|
|
const artistQuery = mainSearchInput?.value || '';
|
|||
|
|
openConcertModal(artistQuery);
|
|||
|
|
// Close the more menu
|
|||
|
|
$('#search-more-menu')?.classList.add('hidden');
|
|||
|
|
});
|
|||
|
|
concertModalClose?.addEventListener('click', closeConcertModal);
|
|||
|
|
concertModal?.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === concertModal) closeConcertModal();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Tab switching
|
|||
|
|
concertTabs.forEach(tab => {
|
|||
|
|
tab.addEventListener('click', () => {
|
|||
|
|
const tabName = tab.dataset.tab;
|
|||
|
|
concertState.currentTab = tabName;
|
|||
|
|
|
|||
|
|
// Update active tab
|
|||
|
|
concertTabs.forEach(t => t.classList.remove('active'));
|
|||
|
|
tab.classList.add('active');
|
|||
|
|
|
|||
|
|
// Show/hide sections
|
|||
|
|
if (tabName === 'recent') {
|
|||
|
|
concertRecentSection.classList.remove('hidden');
|
|||
|
|
concertSearchSection.classList.add('hidden');
|
|||
|
|
loadConcertsForRecentArtists();
|
|||
|
|
} else {
|
|||
|
|
concertRecentSection.classList.add('hidden');
|
|||
|
|
concertSearchSection.classList.remove('hidden');
|
|||
|
|
concertResults.innerHTML = '';
|
|||
|
|
concertEmpty.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Search button
|
|||
|
|
concertSearchBtn?.addEventListener('click', () => {
|
|||
|
|
searchConcerts(concertArtistSearch?.value || '');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Search on Enter
|
|||
|
|
concertArtistSearch?.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
searchConcerts(concertArtistSearch.value);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('Concert alerts loaded');
|