|
|
// MEDIA PLAYER FUNCTIONALITY
|
|
|
// ===============================
|
|
|
|
|
|
function initializeMediaPlayer() {
|
|
|
const trackTitle = document.getElementById('track-title');
|
|
|
const playButton = document.getElementById('play-button');
|
|
|
const stopButton = document.getElementById('stop-button');
|
|
|
const volumeSlider = document.getElementById('volume-slider');
|
|
|
|
|
|
// Start in idle state (no track playing)
|
|
|
const player = document.getElementById('media-player');
|
|
|
if (player && !currentTrack) player.classList.add('idle');
|
|
|
|
|
|
// Initialize HTML5 audio player
|
|
|
audioPlayer = document.getElementById('audio-player');
|
|
|
if (audioPlayer) {
|
|
|
// Set up audio event listeners
|
|
|
audioPlayer.addEventListener('timeupdate', updateAudioProgress);
|
|
|
audioPlayer.addEventListener('timeupdate', npCrossfadeTick);
|
|
|
audioPlayer.addEventListener('timeupdate', npThrottledPositionState);
|
|
|
audioPlayer.addEventListener('timeupdate', npMaybeLogPlay);
|
|
|
audioPlayer.addEventListener('ended', onAudioEnded);
|
|
|
audioPlayer.addEventListener('error', onAudioError);
|
|
|
audioPlayer.addEventListener('loadstart', onAudioLoadStart);
|
|
|
audioPlayer.addEventListener('canplay', onAudioCanPlay);
|
|
|
|
|
|
// Set initial volume — restore the saved level (Spotify-style), else 70%.
|
|
|
const _savedVol = npLoadSavedVolume();
|
|
|
const _initialVol = _savedVol === null ? 70 : _savedVol;
|
|
|
audioPlayer.volume = _initialVol / 100;
|
|
|
if (volumeSlider) volumeSlider.value = _initialVol;
|
|
|
// Sync the modal slider/fill too once DOM is ready.
|
|
|
syncVolumeUI(_initialVol);
|
|
|
}
|
|
|
|
|
|
// Track title click handled by initExpandedPlayer's media-player click handler
|
|
|
|
|
|
// Media controls
|
|
|
playButton.addEventListener('click', handlePlayPause);
|
|
|
stopButton.addEventListener('click', handleStop);
|
|
|
if (volumeSlider) volumeSlider.addEventListener('input', handleVolumeChange);
|
|
|
|
|
|
// Progress bar controls
|
|
|
const progressBar = document.getElementById('progress-bar');
|
|
|
if (progressBar) {
|
|
|
// Handle seeking
|
|
|
progressBar.addEventListener('input', handleProgressBarChange);
|
|
|
progressBar.addEventListener('mousedown', () => {
|
|
|
progressBar.dataset.seeking = 'true';
|
|
|
});
|
|
|
progressBar.addEventListener('mouseup', () => {
|
|
|
delete progressBar.dataset.seeking;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Update volume slider styling
|
|
|
if (volumeSlider) volumeSlider.addEventListener('input', updateVolumeSliderAppearance);
|
|
|
|
|
|
// Mini player prev / next buttons
|
|
|
const miniPrevBtn = document.getElementById('mini-prev-btn');
|
|
|
const miniNextBtn = document.getElementById('mini-next-btn');
|
|
|
if (miniPrevBtn) miniPrevBtn.addEventListener('click', (e) => { e.stopPropagation(); playPreviousInQueue(); });
|
|
|
if (miniNextBtn) miniNextBtn.addEventListener('click', (e) => { e.stopPropagation(); playNextInQueue(); });
|
|
|
|
|
|
// Mini shuffle / repeat — share the modal handlers (which now sync both UIs)
|
|
|
const miniShuffleBtn = document.getElementById('mini-shuffle-btn');
|
|
|
const miniRepeatBtn = document.getElementById('mini-repeat-btn');
|
|
|
if (miniShuffleBtn) miniShuffleBtn.addEventListener('click', (e) => { e.stopPropagation(); handleNpShuffle(); });
|
|
|
if (miniRepeatBtn) miniRepeatBtn.addEventListener('click', (e) => { e.stopPropagation(); handleNpRepeat(); });
|
|
|
|
|
|
// Restore a previously-saved queue (does not auto-play)
|
|
|
npRestoreQueue();
|
|
|
}
|
|
|
|
|
|
function toggleMediaPlayerExpansion() {
|
|
|
// No-op: controls are always visible in the new layout.
|
|
|
// Kept for backward compatibility with any callers.
|
|
|
}
|
|
|
|
|
|
function extractTrackTitle(filename) {
|
|
|
if (!filename) return null;
|
|
|
|
|
|
// Strip the ``<source_id>||<display>`` prefix used by YouTube /
|
|
|
// Tidal / Qobuz / torrent / usenet plugins to thread the source-
|
|
|
// side identifier through ``filename`` without polluting the
|
|
|
// display string. The id always comes first, the human title
|
|
|
// after. If no separator is present, fall through with the raw
|
|
|
// value so existing slskd / streaming-source paths are untouched.
|
|
|
let title = filename;
|
|
|
const sepIdx = title.indexOf('||');
|
|
|
if (sepIdx >= 0) {
|
|
|
title = title.slice(sepIdx + 2);
|
|
|
}
|
|
|
|
|
|
// Remove file extension
|
|
|
title = title.replace(/\.[^/.]+$/, '');
|
|
|
|
|
|
// Remove path components, keep only the filename
|
|
|
title = title.split('/').pop().split('\\').pop();
|
|
|
|
|
|
// Clean up common filename patterns
|
|
|
title = title
|
|
|
.replace(/^\d+\.?\s*/, '') // Remove track numbers at start
|
|
|
.replace(/^\d+\s*-\s*/, '') // Remove "01 - " patterns
|
|
|
.replace(/\s*-\s*\d{4}\s*$/, '') // Remove years at end
|
|
|
.replace(/\s*\[\d+kbps\].*$/, '') // Remove bitrate info
|
|
|
.replace(/\s*\(.*?\)\s*$/, '') // Remove parenthetical info at end
|
|
|
.trim();
|
|
|
|
|
|
return title || null;
|
|
|
}
|
|
|
|
|
|
function _stripSourceIdPrefix(value) {
|
|
|
// Defensive cleanup for callers that pass a raw ``<source_id>||<display>``
|
|
|
// string straight into setTrackInfo without first running
|
|
|
// extractTrackTitle. The id always precedes the separator; the display
|
|
|
// string follows. Strings with no separator pass through unchanged.
|
|
|
if (!value || typeof value !== 'string') return value;
|
|
|
const idx = value.indexOf('||');
|
|
|
if (idx < 0) return value;
|
|
|
return value.slice(idx + 2);
|
|
|
}
|
|
|
|
|
|
function setTrackInfo(track) {
|
|
|
currentTrack = track;
|
|
|
npPlayLogged = false; // new track — allow one play-log once it's heard a bit
|
|
|
|
|
|
const trackTitleElement = document.getElementById('track-title');
|
|
|
const trackTitle = _stripSourceIdPrefix(track.title) || 'Unknown Track';
|
|
|
|
|
|
// Set up the HTML structure for scrolling
|
|
|
trackTitleElement.innerHTML = `<span class="title-text">${escapeHtml(trackTitle)}</span>`;
|
|
|
|
|
|
document.getElementById('artist-name').textContent = _stripSourceIdPrefix(track.artist) || 'Unknown Artist';
|
|
|
document.getElementById('album-name').textContent = _stripSourceIdPrefix(track.album) || 'Unknown Album';
|
|
|
|
|
|
// Check if title needs scrolling (similar to GUI app)
|
|
|
setTimeout(() => {
|
|
|
checkAndEnableScrolling(trackTitleElement, trackTitle);
|
|
|
}, 100); // Allow DOM to settle
|
|
|
|
|
|
// Enable controls
|
|
|
document.getElementById('play-button').disabled = false;
|
|
|
document.getElementById('stop-button').disabled = false;
|
|
|
|
|
|
// Hide no track message and expand player
|
|
|
document.getElementById('no-track-message').classList.add('hidden');
|
|
|
document.getElementById('media-player').classList.remove('idle');
|
|
|
|
|
|
const gotoArtistBtn = document.getElementById('np-goto-artist');
|
|
|
if (gotoArtistBtn) {
|
|
|
if (track.artist_id) {
|
|
|
gotoArtistBtn.href = buildArtistDetailPath(track.artist_id, track.artist_source || null);
|
|
|
gotoArtistBtn.style.pointerEvents = '';
|
|
|
gotoArtistBtn.setAttribute('aria-disabled', 'false');
|
|
|
gotoArtistBtn.tabIndex = 0;
|
|
|
} else {
|
|
|
gotoArtistBtn.href = '#';
|
|
|
gotoArtistBtn.style.pointerEvents = 'none';
|
|
|
gotoArtistBtn.setAttribute('aria-disabled', 'true');
|
|
|
gotoArtistBtn.tabIndex = -1;
|
|
|
}
|
|
|
// Close the expanded now-playing modal when the user navigates
|
|
|
// to the artist page — otherwise the modal sits open over the
|
|
|
// page they just opened. ``_npGotoArtistHandlerAttached`` flag
|
|
|
// keeps us from binding multiple listeners across setTrackInfo
|
|
|
// calls (fires on every track change).
|
|
|
if (!gotoArtistBtn._npGotoArtistHandlerAttached) {
|
|
|
gotoArtistBtn.addEventListener('click', () => {
|
|
|
if (gotoArtistBtn.getAttribute('aria-disabled') === 'true') return;
|
|
|
try { closeNowPlayingModal(); } catch (e) { console.debug('closeNowPlayingModal failed:', e); }
|
|
|
});
|
|
|
gotoArtistBtn._npGotoArtistHandlerAttached = true;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Sync expanded player and media session
|
|
|
updateNpTrackInfo();
|
|
|
updateMediaSessionMetadata();
|
|
|
updateMediaSessionPlaybackState();
|
|
|
// Reset the lock-screen scrubber when duration becomes known for the new track.
|
|
|
if (audioPlayer) audioPlayer.addEventListener('loadedmetadata', updateMediaSessionPositionState, { once: true });
|
|
|
|
|
|
// Kick off lyrics fetch for the new track. The panel stays
|
|
|
// collapsed by default — fetching in the background means the
|
|
|
// user gets instant lyrics the first time they expand it.
|
|
|
_npLyricsLoadForTrack({
|
|
|
title: track.title,
|
|
|
artist: track.artist,
|
|
|
album: track.album,
|
|
|
is_library: track.is_library,
|
|
|
filename: track.filename,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function checkAndEnableScrolling(element, text) {
|
|
|
// Remove any existing scrolling class and reset styles
|
|
|
element.classList.remove('scrolling');
|
|
|
element.style.removeProperty('--scroll-distance');
|
|
|
|
|
|
// Force a layout to get accurate measurements
|
|
|
element.offsetWidth;
|
|
|
|
|
|
// Get the inner text element
|
|
|
const titleTextElement = element.querySelector('.title-text');
|
|
|
if (!titleTextElement) return;
|
|
|
|
|
|
// Check if text is wider than container
|
|
|
const containerWidth = element.offsetWidth;
|
|
|
const textWidth = titleTextElement.scrollWidth;
|
|
|
|
|
|
// Enable scrolling if text is significantly wider than container
|
|
|
if (textWidth > containerWidth + 15) {
|
|
|
const scrollDistance = containerWidth - textWidth;
|
|
|
element.style.setProperty('--scroll-distance', `${scrollDistance}px`);
|
|
|
element.classList.add('scrolling');
|
|
|
console.log(`📜 Enabled scrolling for title: "${text}"`);
|
|
|
console.log(`📜 Container: ${containerWidth}px, Text: ${textWidth}px, Scroll: ${scrollDistance}px`);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function clearTrack() {
|
|
|
// Clear track state
|
|
|
currentTrack = null;
|
|
|
isPlaying = false;
|
|
|
npSetPlayContext(''); // hide "Playing from" when nothing's playing
|
|
|
|
|
|
const trackTitleElement = document.getElementById('track-title');
|
|
|
trackTitleElement.innerHTML = '<span class="title-text">No track</span>';
|
|
|
trackTitleElement.classList.remove('scrolling'); // Remove scrolling animation
|
|
|
trackTitleElement.style.removeProperty('--scroll-distance'); // Clear CSS variable
|
|
|
|
|
|
document.getElementById('artist-name').textContent = 'Unknown Artist';
|
|
|
document.getElementById('album-name').textContent = 'Unknown Album';
|
|
|
// Reset play button SVGs (don't use textContent — it destroys SVG children)
|
|
|
const clearPlayBtn = document.getElementById('play-button');
|
|
|
const clearPlayIcon = clearPlayBtn.querySelector('.play-icon');
|
|
|
const clearPauseIcon = clearPlayBtn.querySelector('.pause-icon');
|
|
|
if (clearPlayIcon) clearPlayIcon.style.display = '';
|
|
|
if (clearPauseIcon) clearPauseIcon.style.display = 'none';
|
|
|
clearPlayBtn.disabled = true;
|
|
|
document.getElementById('stop-button').disabled = true;
|
|
|
|
|
|
// Reset progress bar and time displays
|
|
|
const progressBar = document.getElementById('progress-bar');
|
|
|
const progressFill = document.getElementById('progress-fill');
|
|
|
if (progressBar) {
|
|
|
progressBar.value = 0;
|
|
|
delete progressBar.dataset.seeking;
|
|
|
}
|
|
|
if (progressFill) {
|
|
|
progressFill.style.width = '0%';
|
|
|
}
|
|
|
|
|
|
const currentTimeElement = document.getElementById('current-time');
|
|
|
const totalTimeElement = document.getElementById('total-time');
|
|
|
if (currentTimeElement) currentTimeElement.textContent = '0:00';
|
|
|
if (totalTimeElement) totalTimeElement.textContent = '0:00';
|
|
|
|
|
|
// Hide loading animation
|
|
|
hideLoadingAnimation();
|
|
|
|
|
|
// Show no track message and collapse player
|
|
|
document.getElementById('no-track-message').classList.remove('hidden');
|
|
|
document.getElementById('media-player').classList.add('idle');
|
|
|
|
|
|
const gotoArtistBtn = document.getElementById('np-goto-artist');
|
|
|
if (gotoArtistBtn) {
|
|
|
gotoArtistBtn.href = '#';
|
|
|
gotoArtistBtn.style.pointerEvents = 'none';
|
|
|
gotoArtistBtn.setAttribute('aria-disabled', 'true');
|
|
|
gotoArtistBtn.tabIndex = -1;
|
|
|
}
|
|
|
|
|
|
// Reset queue state
|
|
|
npQueue = [];
|
|
|
npQueueIndex = -1;
|
|
|
|
|
|
// Sync expanded player and media session
|
|
|
updateNpTrackInfo();
|
|
|
updateNpPlayButton();
|
|
|
updateNpProgress();
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
updateMediaSessionPlaybackState();
|
|
|
stopSidebarVisualizer();
|
|
|
if (npModalOpen) closeNowPlayingModal();
|
|
|
|
|
|
console.log('🧹 Track cleared and media player reset');
|
|
|
}
|
|
|
|
|
|
function setPlayingState(playing) {
|
|
|
isPlaying = playing;
|
|
|
const playButton = document.getElementById('play-button');
|
|
|
// Toggle SVG icons (don't use textContent — it destroys SVG children)
|
|
|
const playIcon = playButton.querySelector('.play-icon');
|
|
|
const pauseIcon = playButton.querySelector('.pause-icon');
|
|
|
if (playIcon) playIcon.style.display = playing ? 'none' : '';
|
|
|
if (pauseIcon) pauseIcon.style.display = playing ? '' : 'none';
|
|
|
updateNpPlayButton();
|
|
|
updateMediaSessionPlaybackState();
|
|
|
|
|
|
// Sidebar audio visualizer
|
|
|
if (playing) {
|
|
|
npInitVisualizer();
|
|
|
startSidebarVisualizer();
|
|
|
} else {
|
|
|
stopSidebarVisualizer();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function handlePlayPause() {
|
|
|
// Use new streaming system toggle function
|
|
|
togglePlayback();
|
|
|
}
|
|
|
|
|
|
async function handleStop() {
|
|
|
// Tear down any in-flight crossfade so its second audio doesn't keep playing.
|
|
|
npCancelCrossfade();
|
|
|
// Use new streaming system stop function
|
|
|
await stopStream();
|
|
|
clearTrack();
|
|
|
}
|
|
|
|
|
|
function handleVolumeChange(event) {
|
|
|
const volume = event.target.value;
|
|
|
updateVolumeSliderAppearance();
|
|
|
npPersistVolume(volume);
|
|
|
|
|
|
// Update HTML5 audio player volume
|
|
|
if (audioPlayer) {
|
|
|
audioPlayer.volume = volume / 100;
|
|
|
}
|
|
|
|
|
|
// Sync modal volume and clear mute state
|
|
|
npMuted = false;
|
|
|
const npVol = document.getElementById('np-volume-slider');
|
|
|
const npFill = document.getElementById('np-volume-fill');
|
|
|
if (npVol) npVol.value = volume;
|
|
|
if (npFill) npFill.style.width = volume + '%';
|
|
|
updateNpMuteIcon();
|
|
|
}
|
|
|
|
|
|
function handleProgressBarChange(event) {
|
|
|
// Handle seeking in the audio track
|
|
|
if (!audioPlayer || !audioPlayer.duration) return;
|
|
|
|
|
|
const progress = parseFloat(event.target.value);
|
|
|
const newTime = (progress / 100) * audioPlayer.duration;
|
|
|
|
|
|
console.log(`🎯 Seeking to ${formatTime(newTime)} (${progress.toFixed(1)}%)`);
|
|
|
|
|
|
try {
|
|
|
audioPlayer.currentTime = newTime;
|
|
|
|
|
|
// Update visual progress immediately
|
|
|
const progressFill = document.getElementById('progress-fill');
|
|
|
if (progressFill) {
|
|
|
progressFill.style.width = `${progress}%`;
|
|
|
}
|
|
|
|
|
|
// Update time displays immediately
|
|
|
const currentTimeElement = document.getElementById('current-time');
|
|
|
if (currentTimeElement) {
|
|
|
currentTimeElement.textContent = formatTime(newTime);
|
|
|
}
|
|
|
|
|
|
// Sync modal progress
|
|
|
const npBar = document.getElementById('np-progress-bar');
|
|
|
const npFill = document.getElementById('np-progress-fill');
|
|
|
const npTime = document.getElementById('np-current-time');
|
|
|
if (npBar) npBar.value = progress;
|
|
|
if (npFill) npFill.style.width = progress + '%';
|
|
|
if (npTime) npTime.textContent = formatTime(newTime);
|
|
|
} catch (error) {
|
|
|
console.warn('⚠️ Seek failed:', error.message);
|
|
|
// Reset progress bar to current position
|
|
|
const actualProgress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
|
|
|
event.target.value = actualProgress;
|
|
|
const progressFill = document.getElementById('progress-fill');
|
|
|
if (progressFill) {
|
|
|
progressFill.style.width = `${actualProgress}%`;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateVolumeSliderAppearance() {
|
|
|
const slider = document.getElementById('volume-slider');
|
|
|
if (!slider) return;
|
|
|
const value = slider.value;
|
|
|
slider.style.setProperty('--volume-percent', `${value}%`);
|
|
|
}
|
|
|
|
|
|
function showLoadingAnimation() {
|
|
|
document.getElementById('loading-animation').classList.remove('hidden');
|
|
|
}
|
|
|
|
|
|
function hideLoadingAnimation() {
|
|
|
document.getElementById('loading-animation').classList.add('hidden');
|
|
|
}
|
|
|
|
|
|
function setLoadingProgress(percentage) {
|
|
|
const loadingAnimation = document.getElementById('loading-animation');
|
|
|
const progressBar = loadingAnimation.querySelector('.loading-progress');
|
|
|
const loadingText = loadingAnimation.querySelector('.loading-text');
|
|
|
|
|
|
loadingAnimation.classList.remove('hidden');
|
|
|
progressBar.style.width = `${percentage}%`;
|
|
|
loadingText.textContent = `${Math.round(percentage)}%`;
|
|
|
}
|
|
|
|
|
|
// ===============================
|
|
|
// STREAMING FUNCTIONALITY
|
|
|
// ===============================
|
|
|
|
|
|
let _streamLock = false;
|
|
|
|
|
|
async function startStream(searchResult) {
|
|
|
// Start streaming a track - handles same track toggle and new track streaming
|
|
|
try {
|
|
|
// Prevent multiple concurrent stream starts (rapid clicking)
|
|
|
if (_streamLock) {
|
|
|
console.log('⏳ Stream already starting, ignoring duplicate click');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
console.log(`🎮 startStream() called with data:`, searchResult);
|
|
|
|
|
|
// Check if this is the same track that's currently playing/loading
|
|
|
const currentTrackId = currentTrack ? `${currentTrack.username}:${currentTrack.filename}` : null;
|
|
|
const newTrackId = `${searchResult.username}:${searchResult.filename}`;
|
|
|
|
|
|
console.log(`🎮 startStream() called for: ${searchResult.filename}`);
|
|
|
console.log(`🎮 Current track ID: ${currentTrackId}`);
|
|
|
console.log(`🎮 New track ID: ${newTrackId}`);
|
|
|
|
|
|
if (currentTrackId === newTrackId && audioPlayer && !audioPlayer.paused) {
|
|
|
// Same track clicked while playing - toggle pause
|
|
|
console.log("🔄 Toggling playback for same track");
|
|
|
togglePlayback();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// Lock to prevent duplicate stream starts
|
|
|
_streamLock = true;
|
|
|
|
|
|
// Different track or no current track - start new stream
|
|
|
console.log("🎵 Starting new stream");
|
|
|
|
|
|
// Stop current streaming/playback if any
|
|
|
await stopStream();
|
|
|
|
|
|
// Set track info and show loading state
|
|
|
setTrackInfo({
|
|
|
title: extractTrackTitle(searchResult.filename) || searchResult.title || 'Unknown Track',
|
|
|
artist: searchResult.artist || searchResult.username || 'Unknown Artist',
|
|
|
album: searchResult.album || 'Unknown Album',
|
|
|
username: searchResult.username,
|
|
|
filename: searchResult.filename,
|
|
|
image_url: searchResult.image_url || searchResult.album_cover_url || null
|
|
|
});
|
|
|
|
|
|
showLoadingAnimation();
|
|
|
setLoadingProgress(0);
|
|
|
|
|
|
// Start streaming request
|
|
|
const response = await fetch(API.stream.start, {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify(searchResult)
|
|
|
});
|
|
|
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
if (!data.success) {
|
|
|
throw new Error(data.error || 'Failed to start streaming');
|
|
|
}
|
|
|
|
|
|
console.log("✅ Stream started successfully");
|
|
|
|
|
|
// Start status polling
|
|
|
startStreamStatusPolling();
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('Error starting stream:', error);
|
|
|
showToast(`Failed to start stream: ${error.message}`, 'error');
|
|
|
hideLoadingAnimation();
|
|
|
clearTrack();
|
|
|
} finally {
|
|
|
_streamLock = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function startStreamStatusPolling() {
|
|
|
// Start polling for stream status updates with retry logic
|
|
|
if (streamStatusPoller) {
|
|
|
clearInterval(streamStatusPoller);
|
|
|
}
|
|
|
|
|
|
// Reset polling state
|
|
|
streamPollingRetries = 0;
|
|
|
streamPollingInterval = 1000; // Reset to 1-second interval
|
|
|
|
|
|
console.log('🔄 Starting enhanced stream status polling');
|
|
|
updateStreamStatus(); // Initial check
|
|
|
streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
|
|
|
}
|
|
|
|
|
|
function stopStreamStatusPolling() {
|
|
|
// Stop polling for stream status updates
|
|
|
if (streamStatusPoller) {
|
|
|
clearInterval(streamStatusPoller);
|
|
|
streamStatusPoller = null;
|
|
|
streamPollingRetries = 0;
|
|
|
streamPollingInterval = 1000; // Reset interval
|
|
|
console.log('⏹️ Stopped stream status polling');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Phase 4: Track last known tool statuses to prevent repeated toasts on terminal states
|
|
|
let _lastToolStatus = {};
|
|
|
|
|
|
// Phase 5: Sync/Discovery/Scan WebSocket router functions
|
|
|
function updateSyncProgressFromData(data) {
|
|
|
const pid = data.playlist_id;
|
|
|
const callback = _syncProgressCallbacks[pid];
|
|
|
if (callback) callback(data);
|
|
|
}
|
|
|
|
|
|
function updateDiscoveryProgressFromData(data) {
|
|
|
const id = data.id;
|
|
|
const callback = _discoveryProgressCallbacks[id];
|
|
|
if (callback) callback(data);
|
|
|
}
|
|
|
|
|
|
function updateWatchlistScanFromData(data) {
|
|
|
if (!data.success) return;
|
|
|
if (_lastWatchlistScanStatus === data.status && data.status !== 'scanning') return;
|
|
|
_lastWatchlistScanStatus = data.status;
|
|
|
handleWatchlistScanData(data);
|
|
|
}
|
|
|
|
|
|
function updateMediaScanFromData(data) {
|
|
|
if (!data.success || !data.status) return;
|
|
|
const status = data.status;
|
|
|
const statusKey = status.is_scanning ? 'scanning' : (status.status || 'unknown');
|
|
|
if (_lastMediaScanStatus === statusKey && statusKey !== 'scanning') return;
|
|
|
_lastMediaScanStatus = statusKey;
|
|
|
|
|
|
const phaseLabel = document.getElementById('media-scan-phase-label');
|
|
|
const progressLabel = document.getElementById('media-scan-progress-label');
|
|
|
const button = document.getElementById('media-scan-btn');
|
|
|
const progressBar = document.getElementById('media-scan-progress-bar');
|
|
|
const statusValue = document.getElementById('media-scan-status');
|
|
|
|
|
|
if (status.is_scanning) {
|
|
|
if (phaseLabel) phaseLabel.textContent = 'Media server scanning...';
|
|
|
if (progressLabel) progressLabel.textContent = status.progress_message || 'Scan in progress';
|
|
|
} else if (status.status === 'idle') {
|
|
|
if (button) button.disabled = false;
|
|
|
if (phaseLabel) phaseLabel.textContent = 'Scan completed successfully';
|
|
|
if (progressBar) progressBar.style.width = '0%';
|
|
|
if (progressLabel) progressLabel.textContent = 'Ready for next scan';
|
|
|
if (statusValue) {
|
|
|
statusValue.textContent = 'Idle';
|
|
|
statusValue.style.color = '#b3b3b3';
|
|
|
}
|
|
|
showToast('✅ Media scan completed', 'success', 3000);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let _wishlistAutoProcessingNotified = false;
|
|
|
function updateWishlistStatsFromData(data) {
|
|
|
// Auto-processing detection: close modal and notify (once only)
|
|
|
if (data.is_auto_processing) {
|
|
|
if (!_wishlistAutoProcessingNotified) {
|
|
|
if (currentPage === 'wishlist') navigateToPage('active-downloads');
|
|
|
showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
|
|
|
_wishlistAutoProcessingNotified = true;
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
// Reset flag when auto-processing ends
|
|
|
_wishlistAutoProcessingNotified = false;
|
|
|
// Store latest stats for countdown timer refresh
|
|
|
_lastWishlistStats = data;
|
|
|
}
|
|
|
|
|
|
async function updateStreamStatus() {
|
|
|
if (socketConnected) return; // WebSocket handles this
|
|
|
// Poll server for streaming progress and handle state changes with enhanced error recovery
|
|
|
try {
|
|
|
const controller = new AbortController();
|
|
|
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
|
|
|
|
|
|
const response = await fetch(API.stream.status, {
|
|
|
signal: controller.signal
|
|
|
});
|
|
|
|
|
|
clearTimeout(timeoutId);
|
|
|
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
|
}
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
// Reset retry count on successful response
|
|
|
streamPollingRetries = 0;
|
|
|
streamPollingInterval = 1000; // Reset to normal interval
|
|
|
|
|
|
// Update current stream state
|
|
|
currentStream.status = data.status;
|
|
|
currentStream.progress = data.progress;
|
|
|
|
|
|
switch (data.status) {
|
|
|
case 'loading':
|
|
|
setLoadingProgress(data.progress);
|
|
|
// Update loading text with progress
|
|
|
const loadingText = document.querySelector('.loading-text');
|
|
|
if (loadingText && data.progress > 0) {
|
|
|
loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
|
|
|
}
|
|
|
break;
|
|
|
|
|
|
case 'queued':
|
|
|
// Show queue status with better messaging
|
|
|
const queueText = document.querySelector('.loading-text');
|
|
|
if (queueText) {
|
|
|
queueText.textContent = 'Queuing with uploader...';
|
|
|
}
|
|
|
setLoadingProgress(0); // Reset progress for queue state
|
|
|
break;
|
|
|
|
|
|
case 'ready':
|
|
|
// Stream is ready - start audio playback
|
|
|
console.log('🎵 Stream ready, starting audio playback');
|
|
|
stopStreamStatusPolling();
|
|
|
// Restore player UI if JS state was wiped (e.g. page refresh)
|
|
|
if (!currentTrack && data.track_info) {
|
|
|
const ti = data.track_info;
|
|
|
setTrackInfo({
|
|
|
title: ti.name || ti.title || 'Unknown Track',
|
|
|
artist: ti.artist || 'Unknown Artist',
|
|
|
album: ti.album || 'Unknown Album',
|
|
|
filename: ti.filename || '',
|
|
|
is_library: !!ti.is_library,
|
|
|
image_url: ti.image_url || null,
|
|
|
id: ti.id || null,
|
|
|
artist_id: ti.artist_id || null,
|
|
|
album_id: ti.album_id || null,
|
|
|
});
|
|
|
}
|
|
|
await startAudioPlayback();
|
|
|
break;
|
|
|
|
|
|
case 'error':
|
|
|
console.error('❌ Streaming error:', data.error_message);
|
|
|
stopStreamStatusPolling();
|
|
|
hideLoadingAnimation();
|
|
|
showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
|
|
|
clearTrack();
|
|
|
break;
|
|
|
|
|
|
case 'stopped':
|
|
|
// Handle stopped state — do NOT clear track here; explicit stop (handleStop)
|
|
|
// calls clearTrack() directly. Clearing here collapses the player mid-playback
|
|
|
// when the backend transitions to 'stopped' after audio naturally ends or during
|
|
|
// queue track transitions.
|
|
|
console.log('🛑 Stream stopped');
|
|
|
stopStreamStatusPolling();
|
|
|
hideLoadingAnimation();
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
streamPollingRetries++;
|
|
|
console.warn(`Stream status polling error (attempt ${streamPollingRetries}):`, error.message);
|
|
|
|
|
|
if (streamPollingRetries >= maxStreamPollingRetries) {
|
|
|
// Too many consecutive failures - give up
|
|
|
console.error('❌ Stream status polling failed after maximum retries');
|
|
|
stopStreamStatusPolling();
|
|
|
hideLoadingAnimation();
|
|
|
showToast('Lost connection to streaming server', 'error');
|
|
|
clearTrack();
|
|
|
} else {
|
|
|
// Implement exponential backoff for retries
|
|
|
const backoffMultiplier = Math.min(streamPollingRetries, 5); // Max 5x backoff
|
|
|
streamPollingInterval = 1000 * backoffMultiplier;
|
|
|
|
|
|
// Restart polling with new interval
|
|
|
if (streamStatusPoller) {
|
|
|
clearInterval(streamStatusPoller);
|
|
|
streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
|
|
|
console.log(`🔄 Retrying stream status polling with ${streamPollingInterval}ms interval`);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateStreamStatusFromData(data) {
|
|
|
const prev = _lastToolStatus['stream'];
|
|
|
_lastToolStatus['stream'] = data.status;
|
|
|
// Skip repeated terminal states to avoid duplicate toasts/actions
|
|
|
if (prev !== undefined && data.status === prev && data.status !== 'loading' && data.status !== 'queued') return;
|
|
|
|
|
|
currentStream.status = data.status;
|
|
|
currentStream.progress = data.progress;
|
|
|
|
|
|
switch (data.status) {
|
|
|
case 'loading':
|
|
|
setLoadingProgress(data.progress);
|
|
|
const loadingText = document.querySelector('.loading-text');
|
|
|
if (loadingText && data.progress > 0) {
|
|
|
loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
|
|
|
}
|
|
|
break;
|
|
|
case 'queued':
|
|
|
const queueText = document.querySelector('.loading-text');
|
|
|
if (queueText) {
|
|
|
queueText.textContent = 'Queuing with uploader...';
|
|
|
}
|
|
|
setLoadingProgress(0);
|
|
|
break;
|
|
|
case 'ready':
|
|
|
console.log('🎵 Stream ready, starting audio playback');
|
|
|
stopStreamStatusPolling();
|
|
|
// Restore player UI if JS state was wiped (e.g. page refresh)
|
|
|
if (!currentTrack && data.track_info) {
|
|
|
const ti = data.track_info;
|
|
|
setTrackInfo({
|
|
|
title: ti.name || ti.title || 'Unknown Track',
|
|
|
artist: ti.artist || 'Unknown Artist',
|
|
|
album: ti.album || 'Unknown Album',
|
|
|
filename: ti.filename || '',
|
|
|
is_library: !!ti.is_library,
|
|
|
image_url: ti.image_url || null,
|
|
|
id: ti.id || null,
|
|
|
artist_id: ti.artist_id || null,
|
|
|
album_id: ti.album_id || null,
|
|
|
});
|
|
|
}
|
|
|
startAudioPlayback();
|
|
|
break;
|
|
|
case 'error':
|
|
|
console.error('❌ Streaming error:', data.error_message);
|
|
|
stopStreamStatusPolling();
|
|
|
hideLoadingAnimation();
|
|
|
showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
|
|
|
clearTrack();
|
|
|
break;
|
|
|
case 'stopped':
|
|
|
// Do NOT clear track here — explicit stop (handleStop) calls clearTrack() directly.
|
|
|
// Clearing here collapses the player after audio naturally ends or during queue transitions.
|
|
|
console.log('🛑 Stream stopped');
|
|
|
stopStreamStatusPolling();
|
|
|
hideLoadingAnimation();
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function startAudioPlayback() {
|
|
|
// Start HTML5 audio playback of the streamed file with enhanced state management
|
|
|
try {
|
|
|
if (!audioPlayer) {
|
|
|
throw new Error('Audio player not initialized');
|
|
|
}
|
|
|
|
|
|
// Show loading state while preparing audio
|
|
|
const loadingText = document.querySelector('.loading-text');
|
|
|
if (loadingText) {
|
|
|
loadingText.textContent = 'Preparing playback...';
|
|
|
}
|
|
|
|
|
|
// Set audio source with cache-busting timestamp
|
|
|
const audioUrl = `/stream/audio?t=${new Date().getTime()}`;
|
|
|
console.log(`🎵 Loading audio from: ${audioUrl}`);
|
|
|
|
|
|
// Clear any existing source first
|
|
|
audioPlayer.pause();
|
|
|
audioPlayer.currentTime = 0;
|
|
|
audioPlayer.src = '';
|
|
|
|
|
|
// Set new source
|
|
|
audioPlayer.src = audioUrl;
|
|
|
audioPlayer.load(); // Force reload
|
|
|
|
|
|
// Wait for audio to be ready with promise-based approach
|
|
|
await new Promise((resolve, reject) => {
|
|
|
const timeout = setTimeout(() => {
|
|
|
reject(new Error('Audio loading timeout'));
|
|
|
}, 15000); // 15-second timeout
|
|
|
|
|
|
const onCanPlay = () => {
|
|
|
clearTimeout(timeout);
|
|
|
audioPlayer.removeEventListener('canplay', onCanPlay);
|
|
|
audioPlayer.removeEventListener('error', onError);
|
|
|
resolve();
|
|
|
};
|
|
|
|
|
|
const onError = (event) => {
|
|
|
clearTimeout(timeout);
|
|
|
audioPlayer.removeEventListener('canplay', onCanPlay);
|
|
|
audioPlayer.removeEventListener('error', onError);
|
|
|
const error = event.target.error || new Error('Audio loading failed');
|
|
|
reject(error);
|
|
|
};
|
|
|
|
|
|
audioPlayer.addEventListener('canplay', onCanPlay);
|
|
|
audioPlayer.addEventListener('error', onError);
|
|
|
|
|
|
// If already ready, resolve immediately
|
|
|
if (audioPlayer.readyState >= 3) { // HAVE_FUTURE_DATA
|
|
|
onCanPlay();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
console.log('✅ Audio loaded and ready for playback');
|
|
|
|
|
|
// Try to start playback with retry logic
|
|
|
let retryCount = 0;
|
|
|
const maxRetries = 3;
|
|
|
|
|
|
while (retryCount < maxRetries) {
|
|
|
try {
|
|
|
await audioPlayer.play();
|
|
|
console.log('✅ Audio playback started successfully');
|
|
|
|
|
|
// Update UI to playing state
|
|
|
hideLoadingAnimation();
|
|
|
setPlayingState(true);
|
|
|
|
|
|
// Show media player if hidden
|
|
|
const noTrackMessage = document.getElementById('no-track-message');
|
|
|
if (noTrackMessage) {
|
|
|
noTrackMessage.classList.add('hidden');
|
|
|
}
|
|
|
|
|
|
// Update volume to current slider value
|
|
|
const volumeSlider = document.getElementById('volume-slider');
|
|
|
if (volumeSlider) {
|
|
|
audioPlayer.volume = volumeSlider.value / 100;
|
|
|
}
|
|
|
|
|
|
// Enable play/stop buttons
|
|
|
const playButton = document.getElementById('play-button');
|
|
|
const stopButton = document.getElementById('stop-button');
|
|
|
if (playButton) playButton.disabled = false;
|
|
|
if (stopButton) stopButton.disabled = false;
|
|
|
|
|
|
return; // Success!
|
|
|
|
|
|
} catch (playError) {
|
|
|
retryCount++;
|
|
|
console.warn(`⚠️ Audio play attempt ${retryCount} failed:`, playError.message);
|
|
|
|
|
|
if (retryCount >= maxRetries) {
|
|
|
throw playError; // Re-throw after max retries
|
|
|
}
|
|
|
|
|
|
// Wait before retry with exponential backoff
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('❌ Error starting audio playback:', error);
|
|
|
hideLoadingAnimation();
|
|
|
|
|
|
// Provide user-friendly error messages
|
|
|
let userMessage = 'Playback failed';
|
|
|
|
|
|
if (error.message.includes('no supported source') ||
|
|
|
error.message.includes('Not supported') ||
|
|
|
error.message.includes('MEDIA_ELEMENT_ERROR')) {
|
|
|
userMessage = 'Audio format not supported by your browser. Try downloading instead.';
|
|
|
} else if (error.message.includes('network') || error.message.includes('fetch')) {
|
|
|
userMessage = 'Network error - please check your connection';
|
|
|
} else if (error.message.includes('decode')) {
|
|
|
userMessage = 'Audio file is corrupted or incompatible';
|
|
|
} else if (error.message.includes('timeout')) {
|
|
|
userMessage = 'Audio loading timeout - file may be too large';
|
|
|
} else if (error.message.includes('AbortError')) {
|
|
|
userMessage = 'Playback was interrupted';
|
|
|
}
|
|
|
|
|
|
showToast(userMessage, 'error');
|
|
|
// Only clear track if not in queue playback mode — queue handles its own error recovery
|
|
|
if (npQueue.length === 0) {
|
|
|
clearTrack();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function stopStream() {
|
|
|
// Stop streaming and clean up all state
|
|
|
try {
|
|
|
// Stop status polling
|
|
|
stopStreamStatusPolling();
|
|
|
|
|
|
// Stop audio playback
|
|
|
if (audioPlayer) {
|
|
|
audioPlayer.pause();
|
|
|
audioPlayer.src = '';
|
|
|
}
|
|
|
|
|
|
// Call backend stop endpoint
|
|
|
const response = await fetch(API.stream.stop, { method: 'POST' });
|
|
|
if (response.ok) {
|
|
|
const data = await response.json();
|
|
|
console.log('🛑 Stream stopped:', data.message);
|
|
|
}
|
|
|
|
|
|
// Reset UI state
|
|
|
hideLoadingAnimation();
|
|
|
setPlayingState(false);
|
|
|
|
|
|
// Reset stream state
|
|
|
currentStream = {
|
|
|
status: 'stopped',
|
|
|
progress: 0,
|
|
|
track: null
|
|
|
};
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('Error stopping stream:', error);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function togglePlayback() {
|
|
|
// Toggle play/pause for currently loaded audio
|
|
|
if (!audioPlayer || !currentTrack) {
|
|
|
console.log('⚠️ No audio player or track to toggle');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (audioPlayer.paused) {
|
|
|
audioPlayer.play()
|
|
|
.then(() => {
|
|
|
setPlayingState(true);
|
|
|
console.log('▶️ Resumed playback');
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('Error resuming playback:', error);
|
|
|
showToast('Failed to resume playback', 'error');
|
|
|
});
|
|
|
} else {
|
|
|
audioPlayer.pause();
|
|
|
setPlayingState(false);
|
|
|
console.log('⏸️ Paused playback');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===============================
|
|
|
// AUDIO EVENT HANDLERS
|
|
|
// ===============================
|
|
|
|
|
|
function updateAudioProgress() {
|
|
|
// Update progress bar based on audio playback time
|
|
|
if (!audioPlayer || !audioPlayer.duration) return;
|
|
|
|
|
|
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
|
|
|
|
|
|
// Update progress bar
|
|
|
const progressBar = document.getElementById('progress-bar');
|
|
|
const progressFill = document.getElementById('progress-fill');
|
|
|
if (progressBar && !progressBar.dataset.seeking) {
|
|
|
progressBar.value = progress;
|
|
|
// Update visual progress fill
|
|
|
if (progressFill) {
|
|
|
progressFill.style.width = `${progress}%`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Update time display
|
|
|
const currentTimeElement = document.getElementById('current-time');
|
|
|
const totalTimeElement = document.getElementById('total-time');
|
|
|
|
|
|
if (currentTimeElement) {
|
|
|
currentTimeElement.textContent = formatTime(audioPlayer.currentTime);
|
|
|
}
|
|
|
if (totalTimeElement) {
|
|
|
totalTimeElement.textContent = formatTime(audioPlayer.duration);
|
|
|
}
|
|
|
|
|
|
// Sync expanded player modal
|
|
|
if (npModalOpen) updateNpProgress();
|
|
|
|
|
|
// Sync lyrics highlight when synced LRC is loaded.
|
|
|
if (_npLyricsState.synced && _npLyricsState.lines.length) {
|
|
|
_npLyricsHighlight(audioPlayer.currentTime);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ─────────────────────────────────────────────────────────────────
|
|
|
// Lyrics panel (now-playing modal)
|
|
|
// ─────────────────────────────────────────────────────────────────
|
|
|
|
|
|
// Module-level state for the currently-loaded lyrics. Reset on each
|
|
|
// track change. ``lines`` is an array of {time, text} for synced
|
|
|
// lyrics or null for plain text. ``activeIndex`` tracks the last
|
|
|
// highlighted line to avoid re-rendering on every timeupdate tick.
|
|
|
const _npLyricsState = {
|
|
|
trackKey: null,
|
|
|
lines: [],
|
|
|
synced: false,
|
|
|
activeIndex: -1,
|
|
|
fetchInFlight: false,
|
|
|
autoOpen: false,
|
|
|
};
|
|
|
|
|
|
function _npLyricsResetUI() {
|
|
|
const content = document.getElementById('np-lyrics-content');
|
|
|
const status = document.getElementById('np-lyrics-status');
|
|
|
if (content) content.innerHTML = '<div class="np-lyrics-empty">No lyrics loaded</div>';
|
|
|
if (status) status.textContent = '';
|
|
|
}
|
|
|
|
|
|
function _npLyricsParseLrc(synced) {
|
|
|
// Parse a standard LRC string. Lines without a timestamp are
|
|
|
// dropped (metadata tags like ``[ti:Title]`` aren't lyrics). The
|
|
|
// same line can carry multiple timestamps — emit one entry per
|
|
|
// timestamp so seeks land correctly when a chorus repeats.
|
|
|
const out = [];
|
|
|
if (!synced) return out;
|
|
|
const re = /\[(\d+):(\d+(?:\.\d+)?)\]/g;
|
|
|
synced.split(/\r?\n/).forEach(raw => {
|
|
|
const stamps = [];
|
|
|
let m;
|
|
|
re.lastIndex = 0;
|
|
|
while ((m = re.exec(raw)) !== null) {
|
|
|
const minutes = parseInt(m[1], 10);
|
|
|
const seconds = parseFloat(m[2]);
|
|
|
if (!Number.isFinite(minutes) || !Number.isFinite(seconds)) continue;
|
|
|
stamps.push(minutes * 60 + seconds);
|
|
|
}
|
|
|
if (!stamps.length) return;
|
|
|
const text = raw.replace(re, '').trim();
|
|
|
stamps.forEach(t => out.push({ time: t, text }));
|
|
|
});
|
|
|
out.sort((a, b) => a.time - b.time);
|
|
|
return out;
|
|
|
}
|
|
|
|
|
|
function _npLyricsRenderSynced(lines) {
|
|
|
const content = document.getElementById('np-lyrics-content');
|
|
|
if (!content) return;
|
|
|
if (!lines.length) {
|
|
|
content.innerHTML = '<div class="np-lyrics-empty">No timestamped lyrics for this track</div>';
|
|
|
return;
|
|
|
}
|
|
|
content.innerHTML = lines.map((line, idx) => {
|
|
|
const safe = (line.text || '').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])) || ' ';
|
|
|
return `<div class="np-lyrics-line" data-idx="${idx}" title="Jump to this line">${safe}</div>`;
|
|
|
}).join('');
|
|
|
|
|
|
// Click a line → seek playback to its timestamp (synced lyrics only).
|
|
|
content.querySelectorAll('.np-lyrics-line').forEach(el => {
|
|
|
el.addEventListener('click', () => {
|
|
|
const idx = Number(el.dataset.idx);
|
|
|
const line = _npLyricsState.lines[idx];
|
|
|
if (!line || !audioPlayer || !isFinite(line.time)) return;
|
|
|
try {
|
|
|
audioPlayer.currentTime = line.time;
|
|
|
if (audioPlayer.paused) audioPlayer.play().catch(() => {});
|
|
|
} catch (_) {}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function _npLyricsRenderPlain(text) {
|
|
|
const content = document.getElementById('np-lyrics-content');
|
|
|
if (!content) return;
|
|
|
const safe = (text || '').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
|
content.innerHTML = `<div class="np-lyrics-plain">${safe.replace(/\n/g, '<br>')}</div>`;
|
|
|
}
|
|
|
|
|
|
function _npLyricsHighlight(currentTime) {
|
|
|
const { lines } = _npLyricsState;
|
|
|
if (!lines.length) return;
|
|
|
let idx = -1;
|
|
|
// Binary-search style linear scan — N is small (200 lines max).
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
|
if (lines[i].time <= currentTime) idx = i;
|
|
|
else break;
|
|
|
}
|
|
|
if (idx === _npLyricsState.activeIndex) return;
|
|
|
_npLyricsState.activeIndex = idx;
|
|
|
const content = document.getElementById('np-lyrics-content');
|
|
|
if (!content) return;
|
|
|
content.querySelectorAll('.np-lyrics-line').forEach((el, i) => {
|
|
|
el.classList.remove('active', 'passed', 'upcoming');
|
|
|
if (i === idx) el.classList.add('active');
|
|
|
else if (i < idx) el.classList.add('passed');
|
|
|
else el.classList.add('upcoming');
|
|
|
});
|
|
|
const activeEl = content.querySelector('.np-lyrics-line.active');
|
|
|
if (activeEl) {
|
|
|
// Smooth-scroll the active line into the middle of the lyrics body.
|
|
|
const body = document.getElementById('np-lyrics-body');
|
|
|
if (body) {
|
|
|
const bodyRect = body.getBoundingClientRect();
|
|
|
const lineRect = activeEl.getBoundingClientRect();
|
|
|
const targetTop = (lineRect.top - bodyRect.top) - (bodyRect.height / 2) + (lineRect.height / 2);
|
|
|
body.scrollTo({ top: body.scrollTop + targetTop, behavior: 'smooth' });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function _npLyricsTrackKey(track) {
|
|
|
if (!track) return null;
|
|
|
return `${track.title || ''}|${track.artist || ''}|${track.album || ''}`;
|
|
|
}
|
|
|
|
|
|
async function _npLyricsLoadForTrack(track) {
|
|
|
const key = _npLyricsTrackKey(track);
|
|
|
if (!key) return;
|
|
|
if (_npLyricsState.trackKey === key) return; // already loaded
|
|
|
if (_npLyricsState.fetchInFlight) return;
|
|
|
_npLyricsState.trackKey = key;
|
|
|
_npLyricsState.lines = [];
|
|
|
_npLyricsState.synced = false;
|
|
|
_npLyricsState.activeIndex = -1;
|
|
|
_npLyricsResetUI();
|
|
|
const status = document.getElementById('np-lyrics-status');
|
|
|
if (status) status.textContent = 'Fetching…';
|
|
|
_npLyricsState.fetchInFlight = true;
|
|
|
try {
|
|
|
const resp = await fetch('/api/lyrics/fetch', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({
|
|
|
title: _stripSourceIdPrefix(track.title) || '',
|
|
|
artist: _stripSourceIdPrefix(track.artist) || '',
|
|
|
album: _stripSourceIdPrefix(track.album) || '',
|
|
|
duration: Math.round(audioPlayer?.duration || 0),
|
|
|
file_path: track.is_library ? track.filename : null,
|
|
|
}),
|
|
|
});
|
|
|
const data = await resp.json();
|
|
|
if (_npLyricsState.trackKey !== key) return; // track changed mid-fetch
|
|
|
if (data && data.success) {
|
|
|
if (data.synced) {
|
|
|
const parsed = _npLyricsParseLrc(data.synced);
|
|
|
if (parsed.length) {
|
|
|
_npLyricsState.synced = true;
|
|
|
_npLyricsState.lines = parsed;
|
|
|
_npLyricsRenderSynced(parsed);
|
|
|
if (status) status.textContent = 'Synced';
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (data.plain) {
|
|
|
_npLyricsState.synced = false;
|
|
|
_npLyricsState.lines = [];
|
|
|
_npLyricsRenderPlain(data.plain);
|
|
|
if (status) status.textContent = 'Plain';
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
const content = document.getElementById('np-lyrics-content');
|
|
|
if (content) content.innerHTML = '<div class="np-lyrics-empty">No lyrics found</div>';
|
|
|
if (status) status.textContent = '';
|
|
|
} catch (e) {
|
|
|
console.debug('lyrics fetch failed:', e);
|
|
|
const content = document.getElementById('np-lyrics-content');
|
|
|
if (content) content.innerHTML = '<div class="np-lyrics-empty">Lyrics unavailable</div>';
|
|
|
if (status) status.textContent = '';
|
|
|
} finally {
|
|
|
_npLyricsState.fetchInFlight = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function _npLyricsTogglePanel(forceOpen = null) {
|
|
|
const panel = document.getElementById('np-lyrics-panel');
|
|
|
const body = document.getElementById('np-lyrics-body');
|
|
|
const toggle = document.getElementById('np-lyrics-toggle');
|
|
|
if (!panel || !body || !toggle) return;
|
|
|
const willOpen = forceOpen === null ? body.classList.contains('hidden') : forceOpen;
|
|
|
if (willOpen) {
|
|
|
body.classList.remove('hidden');
|
|
|
panel.classList.remove('collapsed');
|
|
|
toggle.setAttribute('aria-expanded', 'true');
|
|
|
} else {
|
|
|
body.classList.add('hidden');
|
|
|
panel.classList.add('collapsed');
|
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function _npLyricsInit() {
|
|
|
const toggle = document.getElementById('np-lyrics-toggle');
|
|
|
if (toggle && !toggle._lyricsBound) {
|
|
|
toggle.addEventListener('click', () => _npLyricsTogglePanel());
|
|
|
toggle._lyricsBound = true;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function onAudioEnded() {
|
|
|
// Handle audio playback completion
|
|
|
console.log('🏁 Audio playback ended');
|
|
|
setPlayingState(false);
|
|
|
|
|
|
// Reset progress to beginning
|
|
|
const progressBar = document.getElementById('progress-bar');
|
|
|
const progressFill = document.getElementById('progress-fill');
|
|
|
if (progressBar) {
|
|
|
progressBar.value = 0;
|
|
|
}
|
|
|
if (progressFill) {
|
|
|
progressFill.style.width = '0%';
|
|
|
}
|
|
|
|
|
|
const currentTimeElement = document.getElementById('current-time');
|
|
|
if (currentTimeElement) {
|
|
|
currentTimeElement.textContent = '0:00';
|
|
|
}
|
|
|
|
|
|
// If a crossfade is mid-flight it OWNS the advance to the next track —
|
|
|
// bail so we don't double-advance (crossfade's npFinishCrossfade →
|
|
|
// playQueueItem already handles it).
|
|
|
if (npXfadeActive) return;
|
|
|
|
|
|
// Repeat-one is handled by audioPlayer.loop (set in handleNpRepeat)
|
|
|
// Auto-advance to next track if queue has a next item (guard against race conditions)
|
|
|
if (npQueue.length > 0 && !npLoadingQueueItem) {
|
|
|
const hasNext = npShuffleOn
|
|
|
? npQueue.length > 1
|
|
|
: (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all');
|
|
|
if (hasNext) { playNextInQueue(); return; }
|
|
|
}
|
|
|
|
|
|
// Radio mode: auto-fetch similar tracks when queue is exhausted
|
|
|
if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
|
|
|
npFetchRadioTracks();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function onAudioError(event) {
|
|
|
// Handle audio playback errors
|
|
|
const error = event.target.error;
|
|
|
console.error('❌ Audio error:', error);
|
|
|
|
|
|
// Don't show error toast if it's just a format/codec issue and retrying
|
|
|
if (error && error.code) {
|
|
|
console.error(`Audio error code: ${error.code}, message: ${error.message || 'Unknown error'}`);
|
|
|
|
|
|
// Only show user-facing errors for serious issues
|
|
|
if (error.code === 4) { // MEDIA_ELEMENT_ERROR: Media not supported
|
|
|
console.warn('⚠️ Media format not supported by browser, but streaming may still work');
|
|
|
// Don't clear track or show error - let retry logic handle it
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
hideLoadingAnimation();
|
|
|
|
|
|
// Only clear track after a short delay to allow for recovery
|
|
|
setTimeout(() => {
|
|
|
if (audioPlayer && audioPlayer.error) {
|
|
|
let userMessage = 'Audio format not supported by your browser. Try downloading instead.';
|
|
|
|
|
|
if (error && error.code) {
|
|
|
switch (error.code) {
|
|
|
case 1: // MEDIA_ERR_ABORTED
|
|
|
userMessage = 'Playback was stopped';
|
|
|
break;
|
|
|
case 2: // MEDIA_ERR_NETWORK
|
|
|
userMessage = 'Network error - please try again';
|
|
|
break;
|
|
|
case 3: // MEDIA_ERR_DECODE
|
|
|
userMessage = 'Audio file is corrupted or incompatible';
|
|
|
break;
|
|
|
case 4: // MEDIA_ERR_SRC_NOT_SUPPORTED
|
|
|
userMessage = 'Audio format not supported by your browser. Try downloading instead.';
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
showToast(userMessage, 'error');
|
|
|
// Only clear track if not in queue playback — queue handles its own recovery
|
|
|
if (npQueue.length === 0) {
|
|
|
clearTrack();
|
|
|
}
|
|
|
}
|
|
|
}, 2000);
|
|
|
}
|
|
|
|
|
|
function onAudioLoadStart() {
|
|
|
// Handle audio load start
|
|
|
console.log('🔄 Audio loading started');
|
|
|
}
|
|
|
|
|
|
function onAudioCanPlay() {
|
|
|
// Handle when audio can start playing
|
|
|
console.log('✅ Audio ready to play');
|
|
|
}
|
|
|
|
|
|
function formatTime(seconds) {
|
|
|
// Format seconds as MM:SS
|
|
|
if (!seconds || !isFinite(seconds)) return '0:00';
|
|
|
|
|
|
const minutes = Math.floor(seconds / 60);
|
|
|
const secs = Math.floor(seconds % 60);
|
|
|
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
|
|
}
|
|
|
|
|
|
function formatCountdownTime(seconds) {
|
|
|
// Format seconds as countdown timer (e.g., "24m 13s", "2h 15m", "23h 59m")
|
|
|
if (seconds === null || seconds === undefined || seconds < 0) return '';
|
|
|
if (seconds === 0) return '0s'; // Show "0s" instead of hiding timer
|
|
|
|
|
|
const hours = Math.floor(seconds / 3600);
|
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
const secs = Math.floor(seconds % 60);
|
|
|
|
|
|
if (hours > 0) {
|
|
|
return `${hours}h ${minutes}m`;
|
|
|
} else if (minutes > 0) {
|
|
|
return `${minutes}m ${secs}s`;
|
|
|
} else {
|
|
|
return `${secs}s`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===============================
|
|
|
// AUDIO FORMAT SUPPORT DETECTION
|
|
|
// ===============================
|
|
|
|
|
|
function getFileExtension(filename) {
|
|
|
if (!filename) return '';
|
|
|
const ext = filename.toLowerCase().match(/\.([^.]+)$/);
|
|
|
return ext ? ext[1] : '';
|
|
|
}
|
|
|
|
|
|
function isAudioFormatSupported(filename) {
|
|
|
const ext = getFileExtension(filename);
|
|
|
const supportedFormats = ['mp3', 'ogg', 'wav']; // Most reliable formats
|
|
|
const partialSupport = ['flac', 'aac', 'm4a', 'opus', 'webm']; // Test browser support
|
|
|
const unsupported = ['wma', 'ape', 'aiff']; // Generally problematic
|
|
|
|
|
|
if (supportedFormats.includes(ext)) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
if (partialSupport.includes(ext)) {
|
|
|
// Test if browser can actually play this format
|
|
|
return canPlayAudioFormat(ext);
|
|
|
}
|
|
|
|
|
|
return false; // Unsupported formats
|
|
|
}
|
|
|
|
|
|
function canPlayAudioFormat(extension) {
|
|
|
const audio = document.createElement('audio');
|
|
|
|
|
|
const mimeTypes = {
|
|
|
'mp3': 'audio/mpeg',
|
|
|
'ogg': 'audio/ogg; codecs="vorbis"',
|
|
|
'wav': 'audio/wav',
|
|
|
'flac': 'audio/flac',
|
|
|
'aac': 'audio/aac',
|
|
|
'm4a': 'audio/mp4; codecs="mp4a.40.2"', // More specific M4A MIME type
|
|
|
'opus': 'audio/ogg; codecs="opus"',
|
|
|
'webm': 'audio/webm; codecs="opus"',
|
|
|
'wma': 'audio/x-ms-wma'
|
|
|
};
|
|
|
|
|
|
const mimeType = mimeTypes[extension];
|
|
|
if (!mimeType) {
|
|
|
console.warn(`🎵 [FORMAT CHECK] No MIME type found for extension: ${extension}`);
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
const canPlay = audio.canPlayType(mimeType);
|
|
|
console.log(`🎵 [FORMAT CHECK] ${extension} (${mimeType}): ${canPlay}`);
|
|
|
|
|
|
let isSupported = canPlay === 'probably' || canPlay === 'maybe';
|
|
|
|
|
|
// Special handling for M4A - try fallback MIME types if first one fails
|
|
|
if (!isSupported && extension === 'm4a') {
|
|
|
const fallbackMimeTypes = ['audio/mp4', 'audio/x-m4a', 'audio/aac'];
|
|
|
console.log(`🎵 [FORMAT CHECK] M4A failed with primary MIME type, trying fallbacks...`);
|
|
|
|
|
|
for (const fallbackMime of fallbackMimeTypes) {
|
|
|
const fallbackResult = audio.canPlayType(fallbackMime);
|
|
|
console.log(`🎵 [FORMAT CHECK] M4A fallback (${fallbackMime}): ${fallbackResult}`);
|
|
|
if (fallbackResult === 'probably' || fallbackResult === 'maybe') {
|
|
|
isSupported = true;
|
|
|
console.log(`🎵 [FORMAT CHECK] M4A supported with fallback MIME type: ${fallbackMime}`);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
console.log(`🎵 [FORMAT CHECK] ${extension} final support result: ${isSupported}`);
|
|
|
return isSupported;
|
|
|
}
|
|
|
|
|
|
// ===============================
|
|
|
// EXPANDED NOW PLAYING MODAL
|
|
|
// ===============================
|
|
|
|
|
|
let npModalOpen = false;
|
|
|
let npRepeatMode = 'off'; // 'off' | 'all' | 'one'
|
|
|
let npShuffleOn = false;
|
|
|
let npQueue = [];
|
|
|
let npQueueIndex = -1;
|
|
|
let npMuted = false;
|
|
|
let npPreMuteVolume = 70;
|
|
|
let npMediaSessionThrottle = 0;
|
|
|
let npLoadingQueueItem = false;
|
|
|
let npRadioMode = false;
|
|
|
let npRecentlyPlayedIds = [];
|
|
|
let npAudioContext = null;
|
|
|
let npAnalyser = null;
|
|
|
let npMediaSource = null;
|
|
|
let npVizAnimFrame = null;
|
|
|
let npVizInitialized = false;
|
|
|
let npCrossfadeOn = false;
|
|
|
let npSleepMinutes = 0; // 0 = off
|
|
|
let npSleepTimerId = null;
|
|
|
|
|
|
function npQueueHasNext() {
|
|
|
if (npQueue.length === 0) return false;
|
|
|
return npShuffleOn
|
|
|
? npQueue.length > 1
|
|
|
: (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all');
|
|
|
}
|
|
|
|
|
|
function npEnsureCurrentTrackInQueue() {
|
|
|
if (!currentTrack || !currentTrack.is_library || npQueue.length > 0) return;
|
|
|
npQueue.push({
|
|
|
title: currentTrack.title,
|
|
|
artist: currentTrack.artist,
|
|
|
album: currentTrack.album,
|
|
|
file_path: currentTrack.filename || currentTrack.file_path,
|
|
|
filename: currentTrack.filename || currentTrack.file_path,
|
|
|
is_library: true,
|
|
|
image_url: currentTrack.image_url,
|
|
|
id: currentTrack.id,
|
|
|
artist_id: currentTrack.artist_id,
|
|
|
album_id: currentTrack.album_id,
|
|
|
bitrate: currentTrack.bitrate,
|
|
|
sample_rate: currentTrack.sample_rate
|
|
|
});
|
|
|
npQueueIndex = 0;
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
function npSetRadioMode(enabled, options = {}) {
|
|
|
const { toast = true, fetchIfNeeded = false } = options;
|
|
|
npRadioMode = Boolean(enabled);
|
|
|
const radioBtn = document.getElementById('np-radio-btn');
|
|
|
if (radioBtn) {
|
|
|
radioBtn.classList.toggle('active', npRadioMode);
|
|
|
radioBtn.setAttribute('aria-pressed', npRadioMode ? 'true' : 'false');
|
|
|
radioBtn.title = npRadioMode
|
|
|
? 'Radio mode on - similar tracks will auto-queue'
|
|
|
: 'Radio mode - auto-add similar tracks';
|
|
|
}
|
|
|
if (toast) {
|
|
|
showToast(npRadioMode ? 'Radio mode on - similar tracks will auto-queue' : 'Radio mode off', 'success');
|
|
|
}
|
|
|
// Context label: only set the generic "Radio" if a more specific one (e.g.
|
|
|
// "<Artist> Radio") wasn't already set by the caller.
|
|
|
if (npRadioMode) {
|
|
|
if (!npPlayContext || !/radio/i.test(npPlayContext)) npSetPlayContext('Radio');
|
|
|
} else if (/radio/i.test(npPlayContext)) {
|
|
|
npSetPlayContext('');
|
|
|
}
|
|
|
if (npRadioMode && fetchIfNeeded && currentTrack && currentTrack.id && !npLoadingQueueItem && !npQueueHasNext()) {
|
|
|
npEnsureCurrentTrackInQueue();
|
|
|
npFetchRadioTracks();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function initExpandedPlayer() {
|
|
|
const closeBtn = document.getElementById('np-close-btn');
|
|
|
const overlay = document.getElementById('np-modal-overlay');
|
|
|
const playBtn = document.getElementById('np-play-btn');
|
|
|
const stopBtn = document.getElementById('np-stop-btn');
|
|
|
const shuffleBtn = document.getElementById('np-shuffle-btn');
|
|
|
const repeatBtn = document.getElementById('np-repeat-btn');
|
|
|
const muteBtn = document.getElementById('np-mute-btn');
|
|
|
const npProgressBar = document.getElementById('np-progress-bar');
|
|
|
const npVolumeSlider = document.getElementById('np-volume-slider');
|
|
|
|
|
|
if (!overlay) return;
|
|
|
|
|
|
// Close handlers
|
|
|
closeBtn.addEventListener('click', closeNowPlayingModal);
|
|
|
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeNowPlayingModal(); });
|
|
|
|
|
|
// Control handlers
|
|
|
playBtn.addEventListener('click', () => { togglePlayback(); });
|
|
|
stopBtn.addEventListener('click', async () => { await handleStop(); closeNowPlayingModal(); });
|
|
|
|
|
|
// Click album art → toggle the music-synced visualizer takeover
|
|
|
const artContainer = document.getElementById('np-album-art-container');
|
|
|
if (artContainer) {
|
|
|
artContainer.addEventListener('click', () => {
|
|
|
const on = artContainer.classList.toggle('viz-on');
|
|
|
if (on) { npBuildArtViz(); npInitVisualizer(); npStartVisualizerLoop(); }
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Sleep timer — cycles off → 15 → 30 → 60 min → off
|
|
|
const sleepBtn = document.getElementById('np-sleep-btn');
|
|
|
if (sleepBtn) sleepBtn.addEventListener('click', npCycleSleepTimer);
|
|
|
|
|
|
// Crossfade toggle (real dual-audio crossfade for library tracks)
|
|
|
const xfadeBtn = document.getElementById('np-crossfade-btn');
|
|
|
if (xfadeBtn) {
|
|
|
try { npCrossfadeOn = localStorage.getItem('soulsync-crossfade') === '1'; } catch (e) {}
|
|
|
xfadeBtn.classList.toggle('active', npCrossfadeOn);
|
|
|
xfadeBtn.addEventListener('click', () => {
|
|
|
npCrossfadeOn = !npCrossfadeOn;
|
|
|
xfadeBtn.classList.toggle('active', npCrossfadeOn);
|
|
|
try { localStorage.setItem('soulsync-crossfade', npCrossfadeOn ? '1' : '0'); } catch (e) {}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
shuffleBtn.addEventListener('click', handleNpShuffle);
|
|
|
repeatBtn.addEventListener('click', handleNpRepeat);
|
|
|
muteBtn.addEventListener('click', handleNpMuteToggle);
|
|
|
|
|
|
// Progress bar (mouse)
|
|
|
npProgressBar.addEventListener('input', handleNpProgressBarChange);
|
|
|
npProgressBar.addEventListener('mousedown', () => { npProgressBar.dataset.seeking = 'true'; });
|
|
|
npProgressBar.addEventListener('mouseup', () => { delete npProgressBar.dataset.seeking; });
|
|
|
|
|
|
// Seek hover tooltip — shows the timestamp the cursor is over.
|
|
|
const npSeekTip = document.getElementById('np-seek-tip');
|
|
|
if (npSeekTip) {
|
|
|
npProgressBar.addEventListener('mousemove', (e) => {
|
|
|
if (!audioPlayer || !isFinite(audioPlayer.duration) || audioPlayer.duration <= 0) {
|
|
|
npSeekTip.classList.remove('visible');
|
|
|
return;
|
|
|
}
|
|
|
const rect = npProgressBar.getBoundingClientRect();
|
|
|
const frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
|
|
npSeekTip.textContent = formatTime(frac * audioPlayer.duration);
|
|
|
npSeekTip.style.left = (frac * 100) + '%';
|
|
|
npSeekTip.classList.add('visible');
|
|
|
});
|
|
|
npProgressBar.addEventListener('mouseleave', () => npSeekTip.classList.remove('visible'));
|
|
|
}
|
|
|
|
|
|
// Progress bar (touch)
|
|
|
npProgressBar.addEventListener('touchstart', () => { npProgressBar.dataset.seeking = 'true'; }, { passive: true });
|
|
|
npProgressBar.addEventListener('touchmove', (e) => {
|
|
|
const touch = e.touches[0];
|
|
|
const rect = npProgressBar.getBoundingClientRect();
|
|
|
const pct = Math.max(0, Math.min(100, ((touch.clientX - rect.left) / rect.width) * 100));
|
|
|
npProgressBar.value = pct;
|
|
|
npProgressBar.dispatchEvent(new Event('input'));
|
|
|
}, { passive: true });
|
|
|
npProgressBar.addEventListener('touchend', () => { delete npProgressBar.dataset.seeking; }, { passive: true });
|
|
|
|
|
|
// Volume slider
|
|
|
npVolumeSlider.addEventListener('input', handleNpVolumeChange);
|
|
|
|
|
|
// Keyboard shortcuts (global)
|
|
|
document.addEventListener('keydown', handlePlayerKeyboardShortcuts);
|
|
|
|
|
|
// Make sidebar media player clickable to open modal
|
|
|
const mediaPlayer = document.getElementById('media-player');
|
|
|
if (mediaPlayer) {
|
|
|
mediaPlayer.style.cursor = 'pointer';
|
|
|
mediaPlayer.addEventListener('click', (e) => {
|
|
|
// Don't open modal when clicking controls (let expand-hint through)
|
|
|
if (e.target.closest('.play-button, .stop-button, .volume-slider, .volume-control, .progress-bar, .volume-icon, .mini-nav-btn') && !e.target.closest('.expand-hint')) return;
|
|
|
if (currentTrack) openNowPlayingModal();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Prev / Next buttons
|
|
|
const prevBtn = document.getElementById('np-prev-btn');
|
|
|
const nextBtn = document.getElementById('np-next-btn');
|
|
|
if (prevBtn) prevBtn.addEventListener('click', () => { playPreviousInQueue(); });
|
|
|
if (nextBtn) nextBtn.addEventListener('click', () => { playNextInQueue(); });
|
|
|
|
|
|
// Queue panel toggle + clear
|
|
|
const queueToggle = document.getElementById('np-queue-toggle');
|
|
|
if (queueToggle) {
|
|
|
queueToggle.addEventListener('click', () => {
|
|
|
const body = document.getElementById('np-queue-body');
|
|
|
if (body) body.classList.toggle('hidden');
|
|
|
queueToggle.classList.toggle('active');
|
|
|
});
|
|
|
}
|
|
|
const queueClearBtn = document.getElementById('np-queue-clear');
|
|
|
if (queueClearBtn) queueClearBtn.addEventListener('click', () => { clearQueue(); });
|
|
|
|
|
|
// Radio mode button
|
|
|
const radioBtn = document.getElementById('np-radio-btn');
|
|
|
if (radioBtn) {
|
|
|
radioBtn.addEventListener('click', () => {
|
|
|
npSetRadioMode(!npRadioMode, { fetchIfNeeded: true });
|
|
|
});
|
|
|
}
|
|
|
// Action link (Go to Artist)
|
|
|
const gotoArtistBtn = document.getElementById('np-goto-artist');
|
|
|
if (gotoArtistBtn) {
|
|
|
gotoArtistBtn.style.textDecoration = 'none';
|
|
|
gotoArtistBtn.style.color = 'inherit';
|
|
|
}
|
|
|
// Buffering state listeners on audioPlayer
|
|
|
if (audioPlayer) {
|
|
|
audioPlayer.addEventListener('waiting', () => {
|
|
|
const ring = document.getElementById('np-buffering-ring');
|
|
|
if (ring) ring.classList.remove('hidden');
|
|
|
});
|
|
|
audioPlayer.addEventListener('canplay', () => {
|
|
|
const ring = document.getElementById('np-buffering-ring');
|
|
|
if (ring) ring.classList.add('hidden');
|
|
|
});
|
|
|
audioPlayer.addEventListener('playing', () => {
|
|
|
const ring = document.getElementById('np-buffering-ring');
|
|
|
if (ring) ring.classList.add('hidden');
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Init Media Session API
|
|
|
initMediaSession();
|
|
|
}
|
|
|
|
|
|
function openNowPlayingModal() {
|
|
|
const overlay = document.getElementById('np-modal-overlay');
|
|
|
if (!overlay) return;
|
|
|
npModalOpen = true;
|
|
|
overlay.classList.remove('hidden');
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
syncExpandedPlayerUI();
|
|
|
// Bind lyrics toggle (idempotent — only attaches once). Lyrics
|
|
|
// fetch fires from setTrackInfo so by the time the modal opens
|
|
|
// the panel is usually already populated.
|
|
|
_npLyricsInit();
|
|
|
// Start visualizer if already playing
|
|
|
if (isPlaying) { npInitVisualizer(); npStartVisualizerLoop(); }
|
|
|
}
|
|
|
|
|
|
function closeNowPlayingModal() {
|
|
|
const overlay = document.getElementById('np-modal-overlay');
|
|
|
if (!overlay) return;
|
|
|
npModalOpen = false;
|
|
|
overlay.classList.add('hidden');
|
|
|
document.body.style.overflow = '';
|
|
|
npStopVisualizerLoop();
|
|
|
}
|
|
|
|
|
|
function syncExpandedPlayerUI() {
|
|
|
if (!npModalOpen) return;
|
|
|
|
|
|
// Track info
|
|
|
updateNpTrackInfo();
|
|
|
|
|
|
// Play state
|
|
|
updateNpPlayButton();
|
|
|
|
|
|
// Progress
|
|
|
updateNpProgress();
|
|
|
|
|
|
// Volume
|
|
|
const sidebarVol = document.getElementById('volume-slider');
|
|
|
const npVol = document.getElementById('np-volume-slider');
|
|
|
const npVolFill = document.getElementById('np-volume-fill');
|
|
|
if (sidebarVol && npVol) {
|
|
|
npVol.value = sidebarVol.value;
|
|
|
if (npVolFill) npVolFill.style.width = sidebarVol.value + '%';
|
|
|
}
|
|
|
|
|
|
// Visualizer
|
|
|
const viz = document.getElementById('np-visualizer');
|
|
|
if (viz) viz.classList.toggle('playing', isPlaying);
|
|
|
|
|
|
// Album-art scale-on-play (Phase A restyle — CSS keys off .np-modal.playing)
|
|
|
const npModalEl = document.querySelector('.np-modal');
|
|
|
if (npModalEl) npModalEl.classList.toggle('playing', isPlaying);
|
|
|
|
|
|
// Queue
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
function updateNpTrackInfo() {
|
|
|
const titleEl = document.getElementById('np-track-title');
|
|
|
const artistEl = document.getElementById('np-artist-name');
|
|
|
const albumEl = document.getElementById('np-album-name');
|
|
|
const artImg = document.getElementById('np-album-art');
|
|
|
const artPlaceholder = document.getElementById('np-album-art-placeholder');
|
|
|
const badgesEl = document.getElementById('np-format-badges');
|
|
|
const actionBtns = document.getElementById('np-action-buttons');
|
|
|
|
|
|
if (!titleEl) return;
|
|
|
|
|
|
// Sidebar album art
|
|
|
const sidebarArt = document.getElementById('sidebar-album-art');
|
|
|
|
|
|
if (currentTrack) {
|
|
|
// Track text transition animation
|
|
|
const textEls = [titleEl, artistEl, albumEl];
|
|
|
const oldTitle = titleEl.textContent;
|
|
|
const newTitle = currentTrack.title || 'Unknown Track';
|
|
|
const trackChanged = oldTitle !== newTitle && oldTitle !== 'No track';
|
|
|
|
|
|
titleEl.textContent = newTitle;
|
|
|
artistEl.textContent = currentTrack.artist || 'Unknown Artist';
|
|
|
albumEl.textContent = currentTrack.album || 'Unknown Album';
|
|
|
|
|
|
if (trackChanged) {
|
|
|
textEls.forEach(el => {
|
|
|
el.classList.remove('np-text-transition');
|
|
|
void el.offsetWidth; // force reflow
|
|
|
el.classList.add('np-text-transition');
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Album art (modal + sidebar) + ambient glow extraction
|
|
|
const artUrl = getNpAlbumArtUrl();
|
|
|
if (artUrl && artImg) {
|
|
|
// Only set crossOrigin for external URLs — local paths break with CORS headers
|
|
|
if (artUrl.startsWith('http')) {
|
|
|
artImg.crossOrigin = 'anonymous';
|
|
|
} else {
|
|
|
artImg.removeAttribute('crossOrigin');
|
|
|
}
|
|
|
artImg.src = artUrl;
|
|
|
artImg.classList.remove('hidden');
|
|
|
artImg.onerror = () => { artImg.classList.add('hidden'); npResetAmbientGlow(); };
|
|
|
artImg.onload = () => { npExtractAmbientColor(artImg); };
|
|
|
} else if (artImg) {
|
|
|
artImg.classList.add('hidden');
|
|
|
npResetAmbientGlow();
|
|
|
}
|
|
|
if (sidebarArt) {
|
|
|
if (artUrl) {
|
|
|
sidebarArt.src = artUrl;
|
|
|
sidebarArt.style.display = '';
|
|
|
sidebarArt.onerror = () => { sidebarArt.src = '/static/trans2.png'; };
|
|
|
} else {
|
|
|
sidebarArt.src = '/static/trans2.png';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Format badges (richer: include bitrate/sample_rate)
|
|
|
if (badgesEl) {
|
|
|
badgesEl.innerHTML = '';
|
|
|
const filename = currentTrack.filename || '';
|
|
|
if (filename) {
|
|
|
const ext = getFileExtension(filename);
|
|
|
if (ext) {
|
|
|
let label = ext.toUpperCase();
|
|
|
if (currentTrack.sample_rate) {
|
|
|
const khz = (currentTrack.sample_rate / 1000);
|
|
|
label += ' ' + (khz % 1 === 0 ? khz.toFixed(0) : khz.toFixed(1)) + 'kHz';
|
|
|
}
|
|
|
const badge = document.createElement('span');
|
|
|
badge.className = 'np-format-badge' + (ext === 'flac' ? ' flac' : '');
|
|
|
badge.textContent = label;
|
|
|
badgesEl.appendChild(badge);
|
|
|
}
|
|
|
if (currentTrack.bitrate) {
|
|
|
const brBadge = document.createElement('span');
|
|
|
brBadge.className = 'np-format-badge';
|
|
|
brBadge.textContent = currentTrack.bitrate + 'k';
|
|
|
badgesEl.appendChild(brBadge);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Action buttons visibility
|
|
|
if (actionBtns) {
|
|
|
const hasArtist = currentTrack.artist_id;
|
|
|
actionBtns.classList.toggle('hidden', !hasArtist);
|
|
|
}
|
|
|
|
|
|
// Track recently played for radio mode
|
|
|
if (currentTrack.id && !npRecentlyPlayedIds.includes(currentTrack.id)) {
|
|
|
npRecentlyPlayedIds.push(currentTrack.id);
|
|
|
if (npRecentlyPlayedIds.length > 50) npRecentlyPlayedIds.shift();
|
|
|
}
|
|
|
} else {
|
|
|
titleEl.textContent = 'No track';
|
|
|
artistEl.textContent = 'Unknown Artist';
|
|
|
albumEl.textContent = 'Unknown Album';
|
|
|
if (artImg) artImg.classList.add('hidden');
|
|
|
if (sidebarArt) sidebarArt.src = '/static/trans2.png';
|
|
|
if (badgesEl) badgesEl.innerHTML = '';
|
|
|
if (actionBtns) actionBtns.classList.add('hidden');
|
|
|
npResetAmbientGlow();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function npExtractAmbientColor(imgEl) {
|
|
|
try {
|
|
|
const canvas = document.createElement('canvas');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
canvas.width = 64;
|
|
|
canvas.height = 64;
|
|
|
ctx.drawImage(imgEl, 0, 0, 64, 64);
|
|
|
const data = ctx.getImageData(0, 0, 64, 64).data;
|
|
|
|
|
|
// Dominant VIBRANT color, not a flat average (averaging muddies to
|
|
|
// grey-brown). Bin colors into a coarse 4-bit-per-channel histogram,
|
|
|
// weight each bin by saturation² × pixel-count so a punchy accent in
|
|
|
// the cover wins over a large dull background. Apple-Music-style.
|
|
|
const bins = new Map();
|
|
|
for (let i = 0; i < data.length; i += 16) { // sample every 4th pixel
|
|
|
const r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3];
|
|
|
if (a < 128) continue;
|
|
|
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
|
|
const brightness = (r + g + b) / 3;
|
|
|
if (brightness < 24 || brightness > 240) continue; // skip near-black/white
|
|
|
const sat = max === 0 ? 0 : (max - min) / max; // 0..1
|
|
|
const key = ((r >> 4) << 8) | ((g >> 4) << 4) | (b >> 4);
|
|
|
const weight = (0.15 + sat * sat) ; // floor so greys still count a little
|
|
|
const bin = bins.get(key);
|
|
|
if (bin) { bin.r += r; bin.g += g; bin.b += b; bin.n++; bin.w += weight; }
|
|
|
else bins.set(key, { r, g, b, n: 1, w: weight });
|
|
|
}
|
|
|
let best = null, bestScore = -1;
|
|
|
for (const bin of bins.values()) {
|
|
|
const score = bin.w; // saturation-weighted population
|
|
|
if (score > bestScore) { bestScore = score; best = bin; }
|
|
|
}
|
|
|
if (best) {
|
|
|
let r = Math.round(best.r / best.n);
|
|
|
let g = Math.round(best.g / best.n);
|
|
|
let b = Math.round(best.b / best.n);
|
|
|
// Nudge toward vivid: lift saturation/brightness a touch so the
|
|
|
// glow reads as a color, not a wash.
|
|
|
[r, g, b] = npPunchUpColor(r, g, b);
|
|
|
const modal = document.querySelector('.np-modal');
|
|
|
if (modal) {
|
|
|
modal.style.setProperty('--np-ambient-r', r);
|
|
|
modal.style.setProperty('--np-ambient-g', g);
|
|
|
modal.style.setProperty('--np-ambient-b', b);
|
|
|
}
|
|
|
}
|
|
|
} catch (e) {
|
|
|
// Cross-origin or canvas error — ignore silently
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Lift a color toward vividness for the ambient glow (boost saturation,
|
|
|
// floor brightness) without fully desaturating dark/pastel covers.
|
|
|
function npPunchUpColor(r, g, b) {
|
|
|
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
|
|
if (max === min) return [r, g, b]; // grey — leave it
|
|
|
// Pull each channel away from the mid to boost perceived saturation ~1.3x.
|
|
|
const mid = (max + min) / 2;
|
|
|
const boost = 1.3;
|
|
|
let nr = Math.round(mid + (r - mid) * boost);
|
|
|
let ng = Math.round(mid + (g - mid) * boost);
|
|
|
let nb = Math.round(mid + (b - mid) * boost);
|
|
|
// Floor overall brightness so very dark covers still glow.
|
|
|
const bright = (nr + ng + nb) / 3;
|
|
|
if (bright < 70) { const lift = 70 / Math.max(bright, 1); nr *= lift; ng *= lift; nb *= lift; }
|
|
|
const clamp = v => Math.max(0, Math.min(255, Math.round(v)));
|
|
|
return [clamp(nr), clamp(ng), clamp(nb)];
|
|
|
}
|
|
|
|
|
|
// ── Crossfade engine (library tracks only) ──
|
|
|
// EXPERIMENTAL. Real crossfade needs two tracks playing at once; /stream/audio
|
|
|
// only serves the ONE current track (single global stream_state), so we use a
|
|
|
// dedicated /stream/library-audio endpoint + a second <audio> to play the NEXT
|
|
|
// library track and ramp volumes. Streamed (non-library) tracks can't crossfade
|
|
|
// and fall back to the normal hard cut.
|
|
|
const NP_CROSSFADE_SECONDS = 6;
|
|
|
let npXfadeAudio = null;
|
|
|
let npXfadeActive = false;
|
|
|
let npXfadeTimer = null;
|
|
|
let npXfadeMainVol = null; // main-player volume to restore if a crossfade is aborted
|
|
|
|
|
|
// Abort an in-flight crossfade (manual skip / stop during the fade). Restores
|
|
|
// the main player's volume and tears down the second audio element. Safe to
|
|
|
// call when no crossfade is active (no-op).
|
|
|
function npCancelCrossfade() {
|
|
|
if (npXfadeTimer) { clearInterval(npXfadeTimer); npXfadeTimer = null; }
|
|
|
if (npXfadeAudio) { try { npXfadeAudio.pause(); } catch (_) {} npXfadeAudio.src = ''; npXfadeAudio.volume = 0; npXfadeAudio = null; }
|
|
|
if (npXfadeActive && audioPlayer && npXfadeMainVol !== null) {
|
|
|
audioPlayer.volume = npXfadeMainVol; // undo any partial fade-down
|
|
|
}
|
|
|
npXfadeActive = false;
|
|
|
npXfadeMainVol = null;
|
|
|
}
|
|
|
|
|
|
function npCrossfadeTick() {
|
|
|
if (!npCrossfadeOn || npXfadeActive || npRepeatMode === 'one') return;
|
|
|
if (!audioPlayer || !audioPlayer.duration || !isFinite(audioPlayer.duration)) return;
|
|
|
const remaining = audioPlayer.duration - audioPlayer.currentTime;
|
|
|
if (remaining > NP_CROSSFADE_SECONDS || remaining <= 0.2) return;
|
|
|
|
|
|
// Determine the next track (respects shuffle/repeat-all the same way
|
|
|
// playNextInQueue does, but we only crossfade plain sequential next).
|
|
|
const nextIdx = npQueueIndex + 1;
|
|
|
const next = npQueue[nextIdx];
|
|
|
if (!next || !next.is_library || !next.file_path) return; // only library→library
|
|
|
|
|
|
npStartCrossfade(nextIdx, next);
|
|
|
}
|
|
|
|
|
|
function npStartCrossfade(nextIdx, next) {
|
|
|
npXfadeActive = true;
|
|
|
const xa = document.getElementById('audio-player-xfade');
|
|
|
if (!xa) { npXfadeActive = false; return; }
|
|
|
npXfadeAudio = xa;
|
|
|
|
|
|
const targetVol = audioPlayer.volume; // fade the new track up to current level
|
|
|
npXfadeMainVol = targetVol; // remember to restore on abort
|
|
|
xa.src = `/stream/library-audio?path=${encodeURIComponent(next.file_path)}&t=${Date.now()}`;
|
|
|
xa.volume = 0;
|
|
|
xa.play().then(() => {
|
|
|
const fadeMs = NP_CROSSFADE_SECONDS * 1000;
|
|
|
const step = 60; // ms between volume steps
|
|
|
const steps = Math.max(1, Math.floor(fadeMs / step));
|
|
|
let n = 0;
|
|
|
const startOutVol = audioPlayer.volume;
|
|
|
npXfadeTimer = setInterval(() => {
|
|
|
// A manual skip/stop may have cancelled us mid-fade.
|
|
|
if (!npXfadeActive) { clearInterval(npXfadeTimer); npXfadeTimer = null; return; }
|
|
|
n++;
|
|
|
const t = Math.min(1, n / steps);
|
|
|
audioPlayer.volume = Math.max(0, startOutVol * (1 - t));
|
|
|
xa.volume = Math.min(targetVol, targetVol * t);
|
|
|
if (t >= 1) {
|
|
|
clearInterval(npXfadeTimer);
|
|
|
npXfadeTimer = null;
|
|
|
npFinishCrossfade(nextIdx, targetVol);
|
|
|
}
|
|
|
}, step);
|
|
|
}).catch(() => {
|
|
|
// Couldn't preload (e.g. endpoint/file issue) — abort gracefully, let
|
|
|
// the normal 'ended' hard-cut advance handle it.
|
|
|
npXfadeActive = false;
|
|
|
npXfadeAudio = null;
|
|
|
npXfadeMainVol = null;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function npFinishCrossfade(nextIdx, restoreVol) {
|
|
|
// The crossfade audio has fully faded in; promote the queue index and let
|
|
|
// the normal play path take over so all the usual state (track info, art,
|
|
|
// visualizer, server stream_state) is set for the now-current track.
|
|
|
const xa = npXfadeAudio;
|
|
|
if (xa) { try { xa.pause(); } catch (_) {} xa.src = ''; xa.volume = 0; }
|
|
|
npXfadeAudio = null;
|
|
|
npXfadeActive = false;
|
|
|
npXfadeMainVol = null;
|
|
|
if (npXfadeTimer) { clearInterval(npXfadeTimer); npXfadeTimer = null; }
|
|
|
if (audioPlayer) audioPlayer.volume = restoreVol;
|
|
|
// playQueueItem re-points stream_state + reloads audioPlayer for the next
|
|
|
// track; there's a brief silent reload, but the perceived crossfade already
|
|
|
// happened. Honest trade-off of the single-stream-state design.
|
|
|
playQueueItem(nextIdx);
|
|
|
}
|
|
|
|
|
|
function npResetAmbientGlow() {
|
|
|
const modal = document.querySelector('.np-modal');
|
|
|
if (modal) {
|
|
|
modal.style.setProperty('--np-ambient-r', '29');
|
|
|
modal.style.setProperty('--np-ambient-g', '185');
|
|
|
modal.style.setProperty('--np-ambient-b', '84');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateNpPlayButton() {
|
|
|
const playIcon = document.querySelector('.np-icon-play');
|
|
|
const pauseIcon = document.querySelector('.np-icon-pause');
|
|
|
if (playIcon && pauseIcon) {
|
|
|
playIcon.classList.toggle('hidden', isPlaying);
|
|
|
pauseIcon.classList.toggle('hidden', !isPlaying);
|
|
|
}
|
|
|
|
|
|
const viz = document.getElementById('np-visualizer');
|
|
|
if (viz) viz.classList.toggle('playing', isPlaying);
|
|
|
|
|
|
// Drive Web Audio visualizer (only when modal is open to save CPU)
|
|
|
if (isPlaying && npModalOpen) {
|
|
|
npInitVisualizer();
|
|
|
npStartVisualizerLoop();
|
|
|
} else {
|
|
|
npStopVisualizerLoop();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateNpProgress() {
|
|
|
if (!npModalOpen || !audioPlayer) return;
|
|
|
|
|
|
const npProgressBar = document.getElementById('np-progress-bar');
|
|
|
const npProgressFill = document.getElementById('np-progress-fill');
|
|
|
const npCurrentTime = document.getElementById('np-current-time');
|
|
|
const npTotalTime = document.getElementById('np-total-time');
|
|
|
|
|
|
if (audioPlayer.duration) {
|
|
|
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
|
|
|
if (npProgressBar && !npProgressBar.dataset.seeking) {
|
|
|
npProgressBar.value = progress;
|
|
|
}
|
|
|
if (npProgressFill) npProgressFill.style.width = progress + '%';
|
|
|
if (npCurrentTime) npCurrentTime.textContent = formatTime(audioPlayer.currentTime);
|
|
|
if (npTotalTime) npTotalTime.textContent = formatTime(audioPlayer.duration);
|
|
|
} else {
|
|
|
if (npProgressBar) npProgressBar.value = 0;
|
|
|
if (npProgressFill) npProgressFill.style.width = '0%';
|
|
|
if (npCurrentTime) npCurrentTime.textContent = '0:00';
|
|
|
if (npTotalTime) npTotalTime.textContent = '0:00';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleNpProgressBarChange(event) {
|
|
|
if (!audioPlayer || !audioPlayer.duration) return;
|
|
|
const progress = parseFloat(event.target.value);
|
|
|
const newTime = (progress / 100) * audioPlayer.duration;
|
|
|
|
|
|
try {
|
|
|
audioPlayer.currentTime = newTime;
|
|
|
updateMediaSessionPositionState();
|
|
|
|
|
|
// Sync sidebar progress
|
|
|
const sidebarBar = document.getElementById('progress-bar');
|
|
|
const sidebarFill = document.getElementById('progress-fill');
|
|
|
if (sidebarBar) sidebarBar.value = progress;
|
|
|
if (sidebarFill) sidebarFill.style.width = progress + '%';
|
|
|
|
|
|
// Sync modal progress fill
|
|
|
const npFill = document.getElementById('np-progress-fill');
|
|
|
if (npFill) npFill.style.width = progress + '%';
|
|
|
|
|
|
// Update time displays
|
|
|
const sidebarTime = document.getElementById('current-time');
|
|
|
const npTime = document.getElementById('np-current-time');
|
|
|
if (sidebarTime) sidebarTime.textContent = formatTime(newTime);
|
|
|
if (npTime) npTime.textContent = formatTime(newTime);
|
|
|
} catch (error) {
|
|
|
console.warn('Seek failed:', error.message);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleNpVolumeChange(event) {
|
|
|
const volume = parseInt(event.target.value);
|
|
|
if (audioPlayer) audioPlayer.volume = volume / 100;
|
|
|
npPersistVolume(volume);
|
|
|
|
|
|
// Sync sidebar volume slider
|
|
|
const sidebarVol = document.getElementById('volume-slider');
|
|
|
if (sidebarVol) {
|
|
|
sidebarVol.value = volume;
|
|
|
sidebarVol.style.setProperty('--volume-percent', volume + '%');
|
|
|
}
|
|
|
|
|
|
// Update modal volume fill
|
|
|
const npFill = document.getElementById('np-volume-fill');
|
|
|
if (npFill) npFill.style.width = volume + '%';
|
|
|
|
|
|
// Update mute state
|
|
|
npMuted = volume === 0;
|
|
|
updateNpMuteIcon();
|
|
|
}
|
|
|
|
|
|
function handleNpMuteToggle() {
|
|
|
const npVol = document.getElementById('np-volume-slider');
|
|
|
if (!npVol) return;
|
|
|
|
|
|
if (npMuted) {
|
|
|
// Unmute — restore previous volume
|
|
|
npVol.value = npPreMuteVolume;
|
|
|
npVol.dispatchEvent(new Event('input'));
|
|
|
npMuted = false;
|
|
|
} else {
|
|
|
// Mute — save current volume, set to 0
|
|
|
npPreMuteVolume = parseInt(npVol.value) || 70;
|
|
|
npVol.value = 0;
|
|
|
npVol.dispatchEvent(new Event('input'));
|
|
|
npMuted = true;
|
|
|
}
|
|
|
updateNpMuteIcon();
|
|
|
}
|
|
|
|
|
|
function updateNpMuteIcon() {
|
|
|
const muteBtn = document.getElementById('np-mute-btn');
|
|
|
const volIcon = muteBtn ? muteBtn.querySelector('.np-icon-vol') : null;
|
|
|
const mutedIcon = muteBtn ? muteBtn.querySelector('.np-icon-muted') : null;
|
|
|
if (volIcon && mutedIcon) {
|
|
|
volIcon.classList.toggle('hidden', npMuted);
|
|
|
mutedIcon.classList.toggle('hidden', !npMuted);
|
|
|
}
|
|
|
if (muteBtn) muteBtn.classList.toggle('muted', npMuted);
|
|
|
}
|
|
|
|
|
|
// Reflect shuffle/repeat state on BOTH the modal and mini-player buttons.
|
|
|
function syncShuffleRepeatUI() {
|
|
|
const npShuffle = document.getElementById('np-shuffle-btn');
|
|
|
const miniShuffle = document.getElementById('mini-shuffle-btn');
|
|
|
if (npShuffle) npShuffle.classList.toggle('active', npShuffleOn);
|
|
|
if (miniShuffle) miniShuffle.classList.toggle('active', npShuffleOn);
|
|
|
|
|
|
const repeatOn = npRepeatMode !== 'off';
|
|
|
const repeatOne = npRepeatMode === 'one';
|
|
|
const npRepeat = document.getElementById('np-repeat-btn');
|
|
|
const miniRepeat = document.getElementById('mini-repeat-btn');
|
|
|
if (npRepeat) npRepeat.classList.toggle('active', repeatOn);
|
|
|
if (miniRepeat) miniRepeat.classList.toggle('active', repeatOn);
|
|
|
const npBadge = document.getElementById('np-repeat-one-badge');
|
|
|
const miniBadge = document.getElementById('mini-repeat-one-badge');
|
|
|
if (npBadge) npBadge.classList.toggle('hidden', !repeatOne);
|
|
|
if (miniBadge) miniBadge.style.display = repeatOne ? '' : 'none';
|
|
|
}
|
|
|
|
|
|
function handleNpShuffle() {
|
|
|
npShuffleOn = !npShuffleOn;
|
|
|
syncShuffleRepeatUI();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
function handleNpRepeat() {
|
|
|
if (npRepeatMode === 'off') {
|
|
|
npRepeatMode = 'all';
|
|
|
if (audioPlayer) audioPlayer.loop = false;
|
|
|
} else if (npRepeatMode === 'all') {
|
|
|
npRepeatMode = 'one';
|
|
|
if (audioPlayer) audioPlayer.loop = true;
|
|
|
} else {
|
|
|
npRepeatMode = 'off';
|
|
|
if (audioPlayer) audioPlayer.loop = false;
|
|
|
}
|
|
|
syncShuffleRepeatUI();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
// ===============================
|
|
|
// QUEUE MANAGEMENT
|
|
|
// ===============================
|
|
|
|
|
|
// "Playing from" context shown above the track title (Spotify-style).
|
|
|
let npPlayContext = '';
|
|
|
function npSetPlayContext(text) {
|
|
|
npPlayContext = text || '';
|
|
|
const box = document.getElementById('np-play-context');
|
|
|
const nameEl = document.getElementById('np-play-context-name');
|
|
|
if (!box || !nameEl) return;
|
|
|
if (npPlayContext) {
|
|
|
nameEl.textContent = npPlayContext;
|
|
|
box.classList.remove('hidden');
|
|
|
} else {
|
|
|
box.classList.add('hidden');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function addToQueue(track) {
|
|
|
npQueue.push(track);
|
|
|
showToast('Added to queue', 'success');
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
// If nothing is currently playing, auto-play the first queued track
|
|
|
if (!currentTrack) {
|
|
|
playQueueItem(npQueue.length - 1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Insert a track to play right after the current one (Spotify "Play next").
|
|
|
function playNext(track) {
|
|
|
if (npQueue.length === 0 || npQueueIndex < 0) {
|
|
|
// Nothing queued / playing — same as add-to-queue (which auto-plays).
|
|
|
addToQueue(track);
|
|
|
return;
|
|
|
}
|
|
|
npQueue.splice(npQueueIndex + 1, 0, track);
|
|
|
showToast('Playing next', 'success');
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
function removeFromQueue(index) {
|
|
|
if (index < 0 || index >= npQueue.length) return;
|
|
|
const wasCurrentTrack = (index === npQueueIndex);
|
|
|
npQueue.splice(index, 1);
|
|
|
// Adjust current index
|
|
|
if (npQueue.length === 0) {
|
|
|
npQueueIndex = -1;
|
|
|
// Current track keeps playing but queue is now empty — that's OK
|
|
|
} else if (index < npQueueIndex) {
|
|
|
npQueueIndex--;
|
|
|
} else if (wasCurrentTrack) {
|
|
|
// Removed the currently playing item
|
|
|
if (npQueueIndex >= npQueue.length) {
|
|
|
npQueueIndex = npQueue.length - 1;
|
|
|
}
|
|
|
// Play the next track at the adjusted index
|
|
|
playQueueItem(npQueueIndex);
|
|
|
}
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
function clearQueue() {
|
|
|
npQueue = [];
|
|
|
npQueueIndex = -1;
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
function playNextInQueue() {
|
|
|
if (npQueue.length === 0) return;
|
|
|
if (npShuffleOn) {
|
|
|
// Pick a random index that is not the current one
|
|
|
const candidates = [];
|
|
|
for (let i = 0; i < npQueue.length; i++) {
|
|
|
if (i !== npQueueIndex) candidates.push(i);
|
|
|
}
|
|
|
if (candidates.length === 0) return;
|
|
|
const next = candidates[Math.floor(Math.random() * candidates.length)];
|
|
|
playQueueItem(next);
|
|
|
} else {
|
|
|
const next = npQueueIndex + 1;
|
|
|
if (next >= npQueue.length) {
|
|
|
// End of queue — repeat-all wraps to start
|
|
|
if (npRepeatMode === 'all') {
|
|
|
playQueueItem(0);
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
playQueueItem(next);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function playPreviousInQueue() {
|
|
|
// If more than 3 seconds in, restart current track
|
|
|
if (audioPlayer && audioPlayer.currentTime > 3) {
|
|
|
audioPlayer.currentTime = 0;
|
|
|
if (audioPlayer.paused) audioPlayer.play();
|
|
|
return;
|
|
|
}
|
|
|
if (npQueue.length === 0) return;
|
|
|
const prev = npQueueIndex - 1;
|
|
|
if (prev < 0) {
|
|
|
// At start — restart current track
|
|
|
if (audioPlayer) {
|
|
|
audioPlayer.currentTime = 0;
|
|
|
if (audioPlayer.paused) audioPlayer.play();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
playQueueItem(prev);
|
|
|
}
|
|
|
|
|
|
async function playQueueItem(index) {
|
|
|
if (index < 0 || index >= npQueue.length) return;
|
|
|
if (npLoadingQueueItem) return; // Prevent race condition from double-advance
|
|
|
// Manual skip / row-click during a crossfade: tear down the stray fade so it
|
|
|
// can't fire npFinishCrossfade on top of this change. No-op for the
|
|
|
// legitimate handoff (npFinishCrossfade already cleared the flag first).
|
|
|
npCancelCrossfade();
|
|
|
npLoadingQueueItem = true;
|
|
|
npQueueIndex = index;
|
|
|
const track = npQueue[index];
|
|
|
|
|
|
try {
|
|
|
if (track.is_library) {
|
|
|
// Library track playback flow
|
|
|
await stopStream();
|
|
|
setTrackInfo({
|
|
|
title: track.title,
|
|
|
artist: track.artist,
|
|
|
album: track.album,
|
|
|
filename: track.file_path,
|
|
|
is_library: true,
|
|
|
image_url: track.image_url,
|
|
|
id: track.id,
|
|
|
artist_id: track.artist_id,
|
|
|
album_id: track.album_id,
|
|
|
bitrate: track.bitrate,
|
|
|
sample_rate: track.sample_rate
|
|
|
});
|
|
|
showLoadingAnimation();
|
|
|
|
|
|
const response = await fetch('/api/library/play', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({
|
|
|
file_path: track.file_path,
|
|
|
title: track.title || '',
|
|
|
artist: track.artist || '',
|
|
|
album: track.album || ''
|
|
|
})
|
|
|
});
|
|
|
const result = await response.json();
|
|
|
if (!result.success) throw new Error(result.error || 'Failed to start playback');
|
|
|
// Re-apply repeat-one loop property
|
|
|
if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
|
|
|
await startAudioPlayback();
|
|
|
} else {
|
|
|
// Non-library (stream) tracks cannot be queued for auto-advance
|
|
|
// Just show track info — the stream flow handles its own playback
|
|
|
setTrackInfo({
|
|
|
title: track.title,
|
|
|
artist: track.artist,
|
|
|
album: track.album,
|
|
|
filename: track.filename || track.file_path,
|
|
|
is_library: false,
|
|
|
image_url: track.image_url,
|
|
|
id: track.id,
|
|
|
artist_id: track.artist_id,
|
|
|
album_id: track.album_id,
|
|
|
bitrate: track.bitrate,
|
|
|
sample_rate: track.sample_rate
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('Queue playback error:', error);
|
|
|
showToast(`Skipping track: ${error.message}`, 'error');
|
|
|
hideLoadingAnimation();
|
|
|
// Auto-skip to next track on failure instead of stopping the queue
|
|
|
npLoadingQueueItem = false;
|
|
|
const nextIdx = npQueueIndex + 1;
|
|
|
if (nextIdx < npQueue.length) {
|
|
|
setTimeout(() => playQueueItem(nextIdx), 500);
|
|
|
}
|
|
|
return;
|
|
|
} finally {
|
|
|
npLoadingQueueItem = false;
|
|
|
}
|
|
|
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
function renderNpQueue() {
|
|
|
const listEl = document.getElementById('np-queue-list');
|
|
|
const emptyEl = document.getElementById('np-queue-empty');
|
|
|
const countEl = document.getElementById('np-queue-count');
|
|
|
if (!listEl) return;
|
|
|
|
|
|
if (countEl) countEl.textContent = npQueue.length > 0 ? `(${npQueue.length})` : '';
|
|
|
|
|
|
if (npQueue.length === 0) {
|
|
|
listEl.innerHTML = '';
|
|
|
if (emptyEl) emptyEl.classList.remove('hidden');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (emptyEl) emptyEl.classList.add('hidden');
|
|
|
listEl.innerHTML = '';
|
|
|
|
|
|
npQueue.forEach((track, i) => {
|
|
|
const item = document.createElement('div');
|
|
|
item.className = 'np-queue-item' + (i === npQueueIndex ? ' active' : '');
|
|
|
item.onclick = () => playQueueItem(i);
|
|
|
|
|
|
// Drag-to-reorder
|
|
|
item.draggable = true;
|
|
|
item.dataset.qindex = i;
|
|
|
item.addEventListener('dragstart', npQueueDragStart);
|
|
|
item.addEventListener('dragover', npQueueDragOver);
|
|
|
item.addEventListener('drop', npQueueDrop);
|
|
|
item.addEventListener('dragend', npQueueDragEnd);
|
|
|
|
|
|
// Album thumbnail
|
|
|
const art = document.createElement('img');
|
|
|
art.className = 'np-queue-item-art';
|
|
|
art.alt = '';
|
|
|
if (track.image_url) {
|
|
|
art.src = track.image_url;
|
|
|
art.onerror = () => { art.style.visibility = 'hidden'; };
|
|
|
} else {
|
|
|
art.style.visibility = 'hidden';
|
|
|
}
|
|
|
item.appendChild(art);
|
|
|
|
|
|
const info = document.createElement('div');
|
|
|
info.className = 'np-queue-item-info';
|
|
|
|
|
|
const title = document.createElement('div');
|
|
|
title.className = 'np-queue-item-title';
|
|
|
title.textContent = track.title || 'Unknown Track';
|
|
|
|
|
|
const artist = document.createElement('div');
|
|
|
artist.className = 'np-queue-item-artist';
|
|
|
artist.textContent = track.artist || 'Unknown Artist';
|
|
|
|
|
|
info.appendChild(title);
|
|
|
info.appendChild(artist);
|
|
|
item.appendChild(info);
|
|
|
|
|
|
// Active row → equalizer animation; others → duration
|
|
|
if (i === npQueueIndex) {
|
|
|
const eq = document.createElement('div');
|
|
|
eq.className = 'np-queue-item-eq';
|
|
|
eq.innerHTML = '<i></i><i></i><i></i>';
|
|
|
item.appendChild(eq);
|
|
|
} else if (track.duration) {
|
|
|
const dur = document.createElement('span');
|
|
|
dur.className = 'np-queue-item-duration';
|
|
|
dur.textContent = formatTime(track.duration);
|
|
|
item.appendChild(dur);
|
|
|
}
|
|
|
|
|
|
const removeBtn = document.createElement('button');
|
|
|
removeBtn.className = 'np-queue-item-remove';
|
|
|
removeBtn.innerHTML = '✕';
|
|
|
removeBtn.title = 'Remove from queue';
|
|
|
removeBtn.onclick = (e) => {
|
|
|
e.stopPropagation();
|
|
|
removeFromQueue(i);
|
|
|
};
|
|
|
item.appendChild(removeBtn);
|
|
|
|
|
|
listEl.appendChild(item);
|
|
|
});
|
|
|
|
|
|
npUpdateUpNext();
|
|
|
npPersistQueue();
|
|
|
}
|
|
|
|
|
|
// ── Queue persistence across page reloads (localStorage) ──
|
|
|
const NP_QUEUE_STORAGE_KEY = 'soulsync-np-queue';
|
|
|
|
|
|
function npPersistQueue() {
|
|
|
try {
|
|
|
if (!npQueue.length) { localStorage.removeItem(NP_QUEUE_STORAGE_KEY); return; }
|
|
|
localStorage.setItem(NP_QUEUE_STORAGE_KEY, JSON.stringify({
|
|
|
queue: npQueue,
|
|
|
index: npQueueIndex,
|
|
|
savedAt: Date.now(),
|
|
|
}));
|
|
|
} catch (e) { /* quota / disabled storage — non-fatal */ }
|
|
|
}
|
|
|
|
|
|
// Restore the saved queue into the panel WITHOUT auto-playing (the user
|
|
|
// reloaded; resume playback is their choice via clicking a row).
|
|
|
function npRestoreQueue() {
|
|
|
try {
|
|
|
const raw = localStorage.getItem(NP_QUEUE_STORAGE_KEY);
|
|
|
if (!raw) return;
|
|
|
const data = JSON.parse(raw);
|
|
|
if (data && Array.isArray(data.queue) && data.queue.length) {
|
|
|
npQueue = data.queue;
|
|
|
// Don't claim a track is "playing" on a fresh load — nothing is.
|
|
|
npQueueIndex = -1;
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
} catch (e) { /* corrupt entry — ignore */ }
|
|
|
}
|
|
|
|
|
|
// ── Queue drag-to-reorder ──
|
|
|
let npDragFromIndex = null;
|
|
|
|
|
|
function npQueueDragStart(e) {
|
|
|
npDragFromIndex = Number(e.currentTarget.dataset.qindex);
|
|
|
e.currentTarget.classList.add('dragging');
|
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
|
// Firefox requires data to be set for drag to fire.
|
|
|
try { e.dataTransfer.setData('text/plain', String(npDragFromIndex)); } catch (_) {}
|
|
|
}
|
|
|
|
|
|
function npQueueDragOver(e) {
|
|
|
e.preventDefault();
|
|
|
e.dataTransfer.dropEffect = 'move';
|
|
|
const row = e.currentTarget;
|
|
|
document.querySelectorAll('.np-queue-item.drag-over').forEach(r => r.classList.remove('drag-over'));
|
|
|
row.classList.add('drag-over');
|
|
|
}
|
|
|
|
|
|
function npQueueDrop(e) {
|
|
|
e.preventDefault();
|
|
|
e.stopPropagation();
|
|
|
const to = Number(e.currentTarget.dataset.qindex);
|
|
|
npReorderQueue(npDragFromIndex, to);
|
|
|
}
|
|
|
|
|
|
function npQueueDragEnd() {
|
|
|
document.querySelectorAll('.np-queue-item').forEach(r => r.classList.remove('dragging', 'drag-over'));
|
|
|
npDragFromIndex = null;
|
|
|
}
|
|
|
|
|
|
// Move a queue item, keeping npQueueIndex pointed at the SAME playing track.
|
|
|
function npReorderQueue(from, to) {
|
|
|
if (from === null || from === to || from < 0 || to < 0) return;
|
|
|
if (from >= npQueue.length || to >= npQueue.length) return;
|
|
|
const [moved] = npQueue.splice(from, 1);
|
|
|
npQueue.splice(to, 0, moved);
|
|
|
|
|
|
// Recompute which index now holds the currently-playing track.
|
|
|
if (npQueueIndex === from) {
|
|
|
npQueueIndex = to;
|
|
|
} else if (from < npQueueIndex && to >= npQueueIndex) {
|
|
|
npQueueIndex -= 1;
|
|
|
} else if (from > npQueueIndex && to <= npQueueIndex) {
|
|
|
npQueueIndex += 1;
|
|
|
}
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
}
|
|
|
|
|
|
// Up-next peek: show the track that plays after the current one.
|
|
|
function npUpdateUpNext() {
|
|
|
const box = document.getElementById('np-upnext');
|
|
|
if (!box) return;
|
|
|
const next = npQueue[npQueueIndex + 1];
|
|
|
if (!next) { box.classList.add('hidden'); return; }
|
|
|
box.classList.remove('hidden');
|
|
|
const art = document.getElementById('np-upnext-art');
|
|
|
const title = document.getElementById('np-upnext-title');
|
|
|
const artist = document.getElementById('np-upnext-artist');
|
|
|
if (title) title.textContent = next.title || 'Unknown Track';
|
|
|
if (artist) artist.textContent = next.artist || 'Unknown Artist';
|
|
|
if (art) {
|
|
|
if (next.image_url) { art.src = next.image_url; art.style.visibility = ''; art.onerror = () => { art.style.visibility = 'hidden'; }; }
|
|
|
else { art.style.visibility = 'hidden'; }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Sleep timer: cycle off → 15 → 30 → 60 → off; stops playback when it fires.
|
|
|
function npCycleSleepTimer() {
|
|
|
const steps = [0, 15, 30, 60];
|
|
|
npSleepMinutes = steps[(steps.indexOf(npSleepMinutes) + 1) % steps.length];
|
|
|
const btn = document.getElementById('np-sleep-btn');
|
|
|
const label = document.getElementById('np-sleep-label');
|
|
|
if (npSleepTimerId) { clearTimeout(npSleepTimerId); npSleepTimerId = null; }
|
|
|
if (npSleepMinutes > 0) {
|
|
|
if (label) label.textContent = `Sleep ${npSleepMinutes}m`;
|
|
|
if (btn) btn.classList.add('active');
|
|
|
npSleepTimerId = setTimeout(() => {
|
|
|
handleStop();
|
|
|
npSleepMinutes = 0;
|
|
|
if (label) label.textContent = 'Sleep';
|
|
|
if (btn) btn.classList.remove('active');
|
|
|
}, npSleepMinutes * 60 * 1000);
|
|
|
} else {
|
|
|
if (label) label.textContent = 'Sleep';
|
|
|
if (btn) btn.classList.remove('active');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function updateNpPrevNextButtons() {
|
|
|
const canPrev = npQueueIndex > 0 || (audioPlayer && audioPlayer.currentTime > 3);
|
|
|
const canNext = npQueue.length > 0 && (npShuffleOn ? npQueue.length > 1 : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
|
|
|
|
|
|
// Full Now Playing modal buttons
|
|
|
const prevBtn = document.getElementById('np-prev-btn');
|
|
|
const nextBtn = document.getElementById('np-next-btn');
|
|
|
if (prevBtn) prevBtn.disabled = !canPrev;
|
|
|
if (nextBtn) nextBtn.disabled = !canNext;
|
|
|
|
|
|
// Mini player buttons
|
|
|
const miniPrevBtn = document.getElementById('mini-prev-btn');
|
|
|
const miniNextBtn = document.getElementById('mini-next-btn');
|
|
|
if (miniPrevBtn) miniPrevBtn.disabled = !canPrev;
|
|
|
if (miniNextBtn) miniNextBtn.disabled = !canNext;
|
|
|
}
|
|
|
|
|
|
function handlePlayerKeyboardShortcuts(event) {
|
|
|
// Don't intercept when typing in inputs or when non-player modals are open
|
|
|
const tag = document.activeElement.tagName.toLowerCase();
|
|
|
if (tag === 'input' || tag === 'textarea' || tag === 'select' || document.activeElement.isContentEditable) return;
|
|
|
|
|
|
// Only handle when player modal is open OR when no other modal is visible
|
|
|
const otherModals = document.querySelectorAll('.modal-overlay:not(.hidden):not(#np-modal-overlay)');
|
|
|
if (otherModals.length > 0 && !npModalOpen) return;
|
|
|
|
|
|
switch (event.key) {
|
|
|
case ' ':
|
|
|
if (!currentTrack) return;
|
|
|
event.preventDefault();
|
|
|
togglePlayback();
|
|
|
break;
|
|
|
case 'ArrowLeft':
|
|
|
if (!audioPlayer || !audioPlayer.duration) return;
|
|
|
event.preventDefault();
|
|
|
audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 5);
|
|
|
break;
|
|
|
case 'ArrowRight':
|
|
|
if (!audioPlayer || !audioPlayer.duration) return;
|
|
|
event.preventDefault();
|
|
|
audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 5);
|
|
|
break;
|
|
|
case 'ArrowUp':
|
|
|
event.preventDefault();
|
|
|
if (audioPlayer) {
|
|
|
const newVol = Math.min(1, audioPlayer.volume + 0.05);
|
|
|
audioPlayer.volume = newVol;
|
|
|
syncVolumeUI(Math.round(newVol * 100));
|
|
|
}
|
|
|
break;
|
|
|
case 'ArrowDown':
|
|
|
event.preventDefault();
|
|
|
if (audioPlayer) {
|
|
|
const newVol = Math.max(0, audioPlayer.volume - 0.05);
|
|
|
audioPlayer.volume = newVol;
|
|
|
syncVolumeUI(Math.round(newVol * 100));
|
|
|
}
|
|
|
break;
|
|
|
case 'm':
|
|
|
case 'M':
|
|
|
event.preventDefault();
|
|
|
handleNpMuteToggle(); // works whether or not the modal is open
|
|
|
break;
|
|
|
case 'n':
|
|
|
case 'N':
|
|
|
event.preventDefault();
|
|
|
if (npQueue.length > 0) playNextInQueue();
|
|
|
break;
|
|
|
case 'p':
|
|
|
case 'P':
|
|
|
event.preventDefault();
|
|
|
playPreviousInQueue();
|
|
|
break;
|
|
|
case 'Escape':
|
|
|
if (npModalOpen) closeNowPlayingModal();
|
|
|
break;
|
|
|
default:
|
|
|
return; // Don't prevent default for unhandled keys
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function syncVolumeUI(volumePercent) {
|
|
|
// Sync both sidebar and modal volume UIs
|
|
|
const sidebarVol = document.getElementById('volume-slider');
|
|
|
const npVol = document.getElementById('np-volume-slider');
|
|
|
const npFill = document.getElementById('np-volume-fill');
|
|
|
|
|
|
if (sidebarVol) {
|
|
|
sidebarVol.value = volumePercent;
|
|
|
sidebarVol.style.setProperty('--volume-percent', volumePercent + '%');
|
|
|
}
|
|
|
if (npVol) npVol.value = volumePercent;
|
|
|
if (npFill) npFill.style.width = volumePercent + '%';
|
|
|
npPersistVolume(volumePercent);
|
|
|
}
|
|
|
|
|
|
// Remember volume across reloads (Spotify-style). Stored 0..100.
|
|
|
const NP_VOLUME_STORAGE_KEY = 'soulsync-volume';
|
|
|
function npPersistVolume(percent) {
|
|
|
try { localStorage.setItem(NP_VOLUME_STORAGE_KEY, String(Math.round(percent))); } catch (e) {}
|
|
|
}
|
|
|
function npLoadSavedVolume() {
|
|
|
try {
|
|
|
const raw = localStorage.getItem(NP_VOLUME_STORAGE_KEY);
|
|
|
if (raw === null) return null;
|
|
|
const v = parseInt(raw, 10);
|
|
|
return (isFinite(v) && v >= 0 && v <= 100) ? v : null;
|
|
|
} catch (e) { return null; }
|
|
|
}
|
|
|
|
|
|
function getNpAlbumArtUrl() {
|
|
|
if (!currentTrack) return null;
|
|
|
return currentTrack.image_url || currentTrack.album_cover_url || currentTrack.thumb_url || null;
|
|
|
}
|
|
|
|
|
|
// ===============================
|
|
|
// WEB AUDIO VISUALIZER
|
|
|
// ===============================
|
|
|
|
|
|
function npInitVisualizer() {
|
|
|
if (npVizInitialized || !audioPlayer) return;
|
|
|
try {
|
|
|
if (!npAudioContext) {
|
|
|
npAudioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
|
}
|
|
|
if (!npMediaSource) {
|
|
|
npMediaSource = npAudioContext.createMediaElementSource(audioPlayer);
|
|
|
npAnalyser = npAudioContext.createAnalyser();
|
|
|
npAnalyser.fftSize = 64;
|
|
|
npAnalyser.smoothingTimeConstant = 0.8;
|
|
|
npMediaSource.connect(npAnalyser);
|
|
|
npAnalyser.connect(npAudioContext.destination);
|
|
|
}
|
|
|
npVizInitialized = true;
|
|
|
} catch (e) {
|
|
|
console.warn('Web Audio visualizer init failed, using CSS fallback:', e.message);
|
|
|
// Mark as CSS fallback
|
|
|
const viz = document.getElementById('np-visualizer');
|
|
|
if (viz) viz.classList.add('np-viz-css-fallback');
|
|
|
npVizInitialized = true; // don't retry
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Number of bars in the big album-art visualizer takeover.
|
|
|
const NP_ART_VIZ_BAR_COUNT = 28;
|
|
|
|
|
|
function npBuildArtViz() {
|
|
|
const container = document.getElementById('np-art-viz');
|
|
|
if (!container || container.children.length > 0) return;
|
|
|
for (let i = 0; i < NP_ART_VIZ_BAR_COUNT; i++) {
|
|
|
const bar = document.createElement('div');
|
|
|
bar.className = 'np-art-viz-bar';
|
|
|
container.appendChild(bar);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function npStartVisualizerLoop() {
|
|
|
if (npVizAnimFrame) return; // Already running
|
|
|
if (!npAnalyser) return; // No analyser — CSS fallback handles it
|
|
|
|
|
|
if (npAudioContext && npAudioContext.state === 'suspended') {
|
|
|
npAudioContext.resume();
|
|
|
}
|
|
|
|
|
|
const bars = document.querySelectorAll('.np-viz-bar');
|
|
|
const bufferLength = npAnalyser.frequencyBinCount;
|
|
|
const dataArray = new Uint8Array(bufferLength);
|
|
|
|
|
|
function draw() {
|
|
|
npVizAnimFrame = requestAnimationFrame(draw);
|
|
|
npAnalyser.getByteFrequencyData(dataArray);
|
|
|
|
|
|
// Map 7 transport bars to frequency bins (skip bin 0 = DC offset)
|
|
|
for (let i = 0; i < bars.length; i++) {
|
|
|
const binIndex = Math.min(i + 1, bufferLength - 1);
|
|
|
const value = dataArray[binIndex] / 255; // 0..1
|
|
|
const scale = Math.max(0.08, value); // minimum visible height
|
|
|
bars[i].style.transform = `scaleY(${scale})`;
|
|
|
}
|
|
|
|
|
|
// Big album-art visualizer (when toggled on) — same real analyser,
|
|
|
// spread across more bars for a fuller spectrum.
|
|
|
const artBars = document.querySelectorAll('.np-art-viz-bar');
|
|
|
if (artBars.length) {
|
|
|
const span = bufferLength - 1;
|
|
|
for (let i = 0; i < artBars.length; i++) {
|
|
|
const binIndex = 1 + Math.floor((i / artBars.length) * span);
|
|
|
const value = dataArray[Math.min(binIndex, bufferLength - 1)] / 255;
|
|
|
artBars[i].style.height = Math.max(6, value * 100) + '%';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
draw();
|
|
|
}
|
|
|
|
|
|
function npStopVisualizerLoop() {
|
|
|
if (npVizAnimFrame) {
|
|
|
cancelAnimationFrame(npVizAnimFrame);
|
|
|
npVizAnimFrame = null;
|
|
|
}
|
|
|
// Reset bars to min
|
|
|
const bars = document.querySelectorAll('.np-viz-bar');
|
|
|
bars.forEach(bar => { bar.style.transform = 'scaleY(0.125)'; });
|
|
|
}
|
|
|
|
|
|
// ===============================
|
|
|
// SIDEBAR AUDIO VISUALIZER
|
|
|
// ===============================
|
|
|
|
|
|
let sidebarVizAnimFrame = null;
|
|
|
let sidebarVisualizerType = 'bars'; // bars | wave | spectrum | mirror | equalizer | none
|
|
|
const SIDEBAR_VIZ_BAR_COUNT = 32;
|
|
|
|
|
|
let _sidebarVizBuiltType = null;
|
|
|
|
|
|
function buildSidebarVizElements(type) {
|
|
|
const container = document.getElementById('sidebar-visualizer');
|
|
|
if (!container) return;
|
|
|
if (_sidebarVizBuiltType === type && container.children.length > 0) return;
|
|
|
_sidebarVizBuiltType = type;
|
|
|
container.innerHTML = '';
|
|
|
container.className = 'sidebar-visualizer';
|
|
|
|
|
|
if (type === 'bars') {
|
|
|
container.classList.add('viz-bars');
|
|
|
for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
|
|
|
const bar = document.createElement('div');
|
|
|
bar.className = 'sidebar-viz-bar';
|
|
|
container.appendChild(bar);
|
|
|
}
|
|
|
} else if (type === 'wave' || type === 'spectrum') {
|
|
|
container.classList.add('viz-canvas');
|
|
|
const canvas = document.createElement('canvas');
|
|
|
canvas.className = 'sidebar-viz-canvas';
|
|
|
canvas.width = 10;
|
|
|
canvas.height = 600;
|
|
|
container.appendChild(canvas);
|
|
|
} else if (type === 'mirror') {
|
|
|
container.classList.add('viz-mirror');
|
|
|
for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
|
|
|
const bar = document.createElement('div');
|
|
|
bar.className = 'sidebar-viz-mirror-bar';
|
|
|
container.appendChild(bar);
|
|
|
}
|
|
|
} else if (type === 'equalizer') {
|
|
|
container.classList.add('viz-equalizer');
|
|
|
for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
|
|
|
const wrap = document.createElement('div');
|
|
|
wrap.className = 'sidebar-viz-eq-wrap';
|
|
|
const bar = document.createElement('div');
|
|
|
bar.className = 'sidebar-viz-eq-bar';
|
|
|
const peak = document.createElement('div');
|
|
|
peak.className = 'sidebar-viz-eq-peak';
|
|
|
wrap.appendChild(bar);
|
|
|
wrap.appendChild(peak);
|
|
|
container.appendChild(wrap);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function startSidebarVisualizer() {
|
|
|
const type = sidebarVisualizerType;
|
|
|
if (type === 'none') return;
|
|
|
|
|
|
const container = document.getElementById('sidebar-visualizer');
|
|
|
if (!container) return;
|
|
|
|
|
|
buildSidebarVizElements(type);
|
|
|
container.classList.add('active');
|
|
|
|
|
|
if (sidebarVizAnimFrame) return;
|
|
|
if (!npAnalyser) return;
|
|
|
|
|
|
const bufferLength = npAnalyser.frequencyBinCount;
|
|
|
const dataArray = new Uint8Array(bufferLength);
|
|
|
const hueStart = 200, hueRange = 160;
|
|
|
|
|
|
// Helper: average frequency bins for a given segment index
|
|
|
function getBinValue(i, count) {
|
|
|
const binsPerSeg = Math.max(1, Math.floor((bufferLength - 1) / count));
|
|
|
let sum = 0;
|
|
|
const start = i * binsPerSeg + 1;
|
|
|
for (let b = 0; b < binsPerSeg; b++) sum += dataArray[Math.min(start + b, bufferLength - 1)];
|
|
|
return (sum / binsPerSeg) / 255;
|
|
|
}
|
|
|
|
|
|
// ── Bars ──
|
|
|
if (type === 'bars') {
|
|
|
const bars = container.querySelectorAll('.sidebar-viz-bar');
|
|
|
if (bars.length === 0) return;
|
|
|
function drawBars() {
|
|
|
sidebarVizAnimFrame = requestAnimationFrame(drawBars);
|
|
|
npAnalyser.getByteFrequencyData(dataArray);
|
|
|
for (let i = 0; i < bars.length; i++) {
|
|
|
const value = getBinValue(i, bars.length);
|
|
|
const scale = Math.max(0.08, value);
|
|
|
const hue = (hueStart + (i / bars.length) * hueRange + value * 30) % 360;
|
|
|
bars[i].style.transform = `scaleX(${scale})`;
|
|
|
bars[i].style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
|
|
|
}
|
|
|
}
|
|
|
drawBars();
|
|
|
|
|
|
// ── Wave ──
|
|
|
} else if (type === 'wave') {
|
|
|
const canvas = container.querySelector('.sidebar-viz-canvas');
|
|
|
if (!canvas) return;
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
let hueOffset = 0;
|
|
|
function drawWave() {
|
|
|
sidebarVizAnimFrame = requestAnimationFrame(drawWave);
|
|
|
const ch = container.clientHeight;
|
|
|
if (ch > 0 && canvas.height !== ch) canvas.height = ch;
|
|
|
npAnalyser.getByteFrequencyData(dataArray);
|
|
|
const w = canvas.width, h = canvas.height;
|
|
|
if (h === 0) return;
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
|
|
let totalEnergy = 0;
|
|
|
for (let i = 1; i < bufferLength; i++) totalEnergy += dataArray[i];
|
|
|
const avgEnergy = totalEnergy / (bufferLength - 1) / 255;
|
|
|
hueOffset = (hueOffset + 0.5) % 360;
|
|
|
|
|
|
const segments = 64;
|
|
|
ctx.lineWidth = 3;
|
|
|
ctx.lineCap = 'round';
|
|
|
ctx.beginPath();
|
|
|
for (let i = 0; i <= segments; i++) {
|
|
|
const y = (i / segments) * h;
|
|
|
const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
|
|
|
const value = dataArray[binIdx] / 255;
|
|
|
const x = (w / 2) + Math.sin((i / segments) * Math.PI * 4 + Date.now() * 0.003) * value * (w - 2) * 0.4;
|
|
|
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
|
|
|
}
|
|
|
const grad = ctx.createLinearGradient(0, 0, 0, h);
|
|
|
grad.addColorStop(0, `hsla(${hueOffset + 200}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
|
|
|
grad.addColorStop(0.5, `hsla(${hueOffset + 280}, 80%, 55%, ${0.3 + avgEnergy * 0.7})`);
|
|
|
grad.addColorStop(1, `hsla(${hueOffset + 360}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
|
|
|
ctx.strokeStyle = grad;
|
|
|
ctx.stroke();
|
|
|
ctx.lineWidth = 6;
|
|
|
ctx.globalAlpha = 0.15 + avgEnergy * 0.2;
|
|
|
ctx.stroke();
|
|
|
ctx.globalAlpha = 1;
|
|
|
}
|
|
|
drawWave();
|
|
|
|
|
|
// ── Spectrum (mountain/terrain fill) ──
|
|
|
} else if (type === 'spectrum') {
|
|
|
const canvas = container.querySelector('.sidebar-viz-canvas');
|
|
|
if (!canvas) return;
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
let hueOffset = 0;
|
|
|
// Smoothed values for fluid motion
|
|
|
const smoothed = new Float32Array(64);
|
|
|
|
|
|
function drawSpectrum() {
|
|
|
sidebarVizAnimFrame = requestAnimationFrame(drawSpectrum);
|
|
|
const ch = container.clientHeight;
|
|
|
if (ch > 0 && canvas.height !== ch) canvas.height = ch;
|
|
|
npAnalyser.getByteFrequencyData(dataArray);
|
|
|
const w = canvas.width, h = canvas.height;
|
|
|
if (h === 0) return;
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
|
|
hueOffset = (hueOffset + 0.3) % 360;
|
|
|
const segments = smoothed.length;
|
|
|
|
|
|
// Smooth the frequency data
|
|
|
for (let i = 0; i < segments; i++) {
|
|
|
const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
|
|
|
const target = dataArray[binIdx] / 255;
|
|
|
smoothed[i] += (target - smoothed[i]) * 0.25;
|
|
|
}
|
|
|
|
|
|
// Draw filled mountain shape from left edge
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(0, 0);
|
|
|
for (let i = 0; i <= segments; i++) {
|
|
|
const y = (i / segments) * h;
|
|
|
const value = i < segments ? smoothed[i] : smoothed[segments - 1];
|
|
|
const x = value * w * 0.95;
|
|
|
ctx.lineTo(x, y);
|
|
|
}
|
|
|
ctx.lineTo(0, h);
|
|
|
ctx.closePath();
|
|
|
|
|
|
// Gradient fill
|
|
|
const fillGrad = ctx.createLinearGradient(0, 0, 0, h);
|
|
|
fillGrad.addColorStop(0, `hsla(${hueOffset + 200}, 85%, 55%, 0.7)`);
|
|
|
fillGrad.addColorStop(0.25, `hsla(${hueOffset + 240}, 80%, 50%, 0.6)`);
|
|
|
fillGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 85%, 50%, 0.65)`);
|
|
|
fillGrad.addColorStop(0.75, `hsla(${hueOffset + 330}, 80%, 50%, 0.6)`);
|
|
|
fillGrad.addColorStop(1, `hsla(${hueOffset + 360}, 85%, 55%, 0.7)`);
|
|
|
ctx.fillStyle = fillGrad;
|
|
|
ctx.fill();
|
|
|
|
|
|
// Bright edge line
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(0, 0);
|
|
|
for (let i = 0; i <= segments; i++) {
|
|
|
const y = (i / segments) * h;
|
|
|
const value = i < segments ? smoothed[i] : smoothed[segments - 1];
|
|
|
ctx.lineTo(value * w * 0.95, y);
|
|
|
}
|
|
|
const lineGrad = ctx.createLinearGradient(0, 0, 0, h);
|
|
|
lineGrad.addColorStop(0, `hsla(${hueOffset + 200}, 90%, 70%, 0.9)`);
|
|
|
lineGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 90%, 65%, 0.9)`);
|
|
|
lineGrad.addColorStop(1, `hsla(${hueOffset + 360}, 90%, 70%, 0.9)`);
|
|
|
ctx.strokeStyle = lineGrad;
|
|
|
ctx.lineWidth = 1.5;
|
|
|
ctx.stroke();
|
|
|
|
|
|
// Outer glow
|
|
|
ctx.lineWidth = 4;
|
|
|
ctx.globalAlpha = 0.2;
|
|
|
ctx.stroke();
|
|
|
ctx.globalAlpha = 1;
|
|
|
}
|
|
|
drawSpectrum();
|
|
|
|
|
|
// ── Mirror (bars from center outward) ──
|
|
|
} else if (type === 'mirror') {
|
|
|
const bars = container.querySelectorAll('.sidebar-viz-mirror-bar');
|
|
|
if (bars.length === 0) return;
|
|
|
function drawMirror() {
|
|
|
sidebarVizAnimFrame = requestAnimationFrame(drawMirror);
|
|
|
npAnalyser.getByteFrequencyData(dataArray);
|
|
|
const half = Math.floor(bars.length / 2);
|
|
|
for (let i = 0; i < half; i++) {
|
|
|
const value = getBinValue(i, half);
|
|
|
const scale = Math.max(0.06, value);
|
|
|
const hue = (hueStart + (i / half) * hueRange + value * 30) % 360;
|
|
|
const color = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
|
|
|
// Top half — mirror index from center
|
|
|
const topIdx = half - 1 - i;
|
|
|
const bottomIdx = half + i;
|
|
|
bars[topIdx].style.transform = `scaleX(${scale})`;
|
|
|
bars[topIdx].style.backgroundColor = color;
|
|
|
if (bottomIdx < bars.length) {
|
|
|
bars[bottomIdx].style.transform = `scaleX(${scale})`;
|
|
|
bars[bottomIdx].style.backgroundColor = color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
drawMirror();
|
|
|
|
|
|
// ── Equalizer (bars with falling peak indicators) ──
|
|
|
} else if (type === 'equalizer') {
|
|
|
const wraps = container.querySelectorAll('.sidebar-viz-eq-wrap');
|
|
|
if (wraps.length === 0) return;
|
|
|
const peaks = new Float32Array(wraps.length);
|
|
|
const peakVelocity = new Float32Array(wraps.length);
|
|
|
|
|
|
function drawEqualizer() {
|
|
|
sidebarVizAnimFrame = requestAnimationFrame(drawEqualizer);
|
|
|
npAnalyser.getByteFrequencyData(dataArray);
|
|
|
for (let i = 0; i < wraps.length; i++) {
|
|
|
const value = getBinValue(i, wraps.length);
|
|
|
const scale = Math.max(0.06, value);
|
|
|
const hue = (hueStart + (i / wraps.length) * hueRange + value * 30) % 360;
|
|
|
const barEl = wraps[i].querySelector('.sidebar-viz-eq-bar');
|
|
|
const peakEl = wraps[i].querySelector('.sidebar-viz-eq-peak');
|
|
|
|
|
|
barEl.style.transform = `scaleX(${scale})`;
|
|
|
barEl.style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
|
|
|
|
|
|
// Peak hold with gravity
|
|
|
if (value > peaks[i]) {
|
|
|
peaks[i] = value;
|
|
|
peakVelocity[i] = 0;
|
|
|
} else {
|
|
|
peakVelocity[i] += 0.002; // gravity
|
|
|
peaks[i] = Math.max(0, peaks[i] - peakVelocity[i]);
|
|
|
}
|
|
|
const peakPos = Math.max(0.06, peaks[i]);
|
|
|
peakEl.style.left = `${peakPos * 100}%`;
|
|
|
peakEl.style.backgroundColor = `hsla(${hue}, 90%, 75%, ${0.6 + peaks[i] * 0.4})`;
|
|
|
peakEl.style.boxShadow = `0 0 4px hsla(${hue}, 90%, 70%, ${peaks[i] * 0.5})`;
|
|
|
}
|
|
|
}
|
|
|
drawEqualizer();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function stopSidebarVisualizer() {
|
|
|
if (sidebarVizAnimFrame) {
|
|
|
cancelAnimationFrame(sidebarVizAnimFrame);
|
|
|
sidebarVizAnimFrame = null;
|
|
|
}
|
|
|
const container = document.getElementById('sidebar-visualizer');
|
|
|
if (container) {
|
|
|
container.classList.remove('active');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Listen for visualizer type changes in settings — use isPlaying (not wasRunning)
|
|
|
// so switching from 'none' to a real type while music plays starts the visualizer
|
|
|
document.addEventListener('change', (e) => {
|
|
|
if (e.target.id === 'sidebar-visualizer-type') {
|
|
|
const newType = e.target.value;
|
|
|
stopSidebarVisualizer();
|
|
|
_sidebarVizBuiltType = null; // force rebuild for new type
|
|
|
sidebarVisualizerType = newType;
|
|
|
if (isPlaying && newType !== 'none') {
|
|
|
npInitVisualizer();
|
|
|
startSidebarVisualizer();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// ===============================
|
|
|
// RADIO MODE
|
|
|
// ===============================
|
|
|
|
|
|
async function npFetchRadioTracks() {
|
|
|
if (!currentTrack || !currentTrack.id) return;
|
|
|
try {
|
|
|
npLoadingQueueItem = true;
|
|
|
const excludeIds = npRecentlyPlayedIds.join(',');
|
|
|
const resp = await fetch(`/api/library/radio?track_id=${currentTrack.id}&limit=50&exclude=${encodeURIComponent(excludeIds)}`);
|
|
|
if (!resp.ok) {
|
|
|
console.warn('Radio endpoint returned', resp.status);
|
|
|
npLoadingQueueItem = false;
|
|
|
return;
|
|
|
}
|
|
|
const data = await resp.json();
|
|
|
// Bail if radio was toggled off during the fetch
|
|
|
if (!npRadioMode) { npLoadingQueueItem = false; return; }
|
|
|
if (data.tracks && data.tracks.length > 0) {
|
|
|
data.tracks.forEach(t => {
|
|
|
npQueue.push({
|
|
|
title: t.title || 'Unknown Track',
|
|
|
artist: t.artist || 'Unknown Artist',
|
|
|
album: t.album || 'Unknown Album',
|
|
|
file_path: t.file_path,
|
|
|
filename: t.file_path,
|
|
|
is_library: true,
|
|
|
image_url: t.image_url || null,
|
|
|
id: t.id,
|
|
|
artist_id: t.artist_id,
|
|
|
album_id: t.album_id,
|
|
|
bitrate: t.bitrate,
|
|
|
sample_rate: t.sample_rate
|
|
|
});
|
|
|
});
|
|
|
showToast(`Radio: Added ${data.tracks.length} similar tracks`, 'success');
|
|
|
renderNpQueue();
|
|
|
updateNpPrevNextButtons();
|
|
|
npLoadingQueueItem = false;
|
|
|
// Only auto-advance if nothing is currently playing (triggered by onAudioEnded)
|
|
|
if (!isPlaying) {
|
|
|
playNextInQueue();
|
|
|
}
|
|
|
} else {
|
|
|
showToast('Radio: No similar tracks found', 'info');
|
|
|
npLoadingQueueItem = false;
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.warn('Radio fetch error:', e);
|
|
|
npLoadingQueueItem = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Media Session API
|
|
|
function initMediaSession() {
|
|
|
if (!('mediaSession' in navigator)) return;
|
|
|
|
|
|
navigator.mediaSession.setActionHandler('play', () => {
|
|
|
if (audioPlayer && currentTrack) {
|
|
|
audioPlayer.play().then(() => setPlayingState(true));
|
|
|
}
|
|
|
});
|
|
|
navigator.mediaSession.setActionHandler('pause', () => {
|
|
|
if (audioPlayer) {
|
|
|
audioPlayer.pause();
|
|
|
setPlayingState(false);
|
|
|
}
|
|
|
});
|
|
|
navigator.mediaSession.setActionHandler('stop', () => {
|
|
|
handleStop();
|
|
|
});
|
|
|
navigator.mediaSession.setActionHandler('seekbackward', () => {
|
|
|
if (audioPlayer && audioPlayer.duration) {
|
|
|
audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10);
|
|
|
}
|
|
|
});
|
|
|
navigator.mediaSession.setActionHandler('seekforward', () => {
|
|
|
if (audioPlayer && audioPlayer.duration) {
|
|
|
audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
|
|
|
}
|
|
|
});
|
|
|
navigator.mediaSession.setActionHandler('previoustrack', () => {
|
|
|
if (npQueue.length > 0) playPreviousInQueue();
|
|
|
});
|
|
|
navigator.mediaSession.setActionHandler('nexttrack', () => {
|
|
|
if (npQueue.length > 0) playNextInQueue();
|
|
|
});
|
|
|
// Scrub from the lock screen / notification scrubber.
|
|
|
try {
|
|
|
navigator.mediaSession.setActionHandler('seekto', (details) => {
|
|
|
if (!audioPlayer || !isFinite(audioPlayer.duration)) return;
|
|
|
if (details.fastSeek && 'fastSeek' in audioPlayer) {
|
|
|
audioPlayer.fastSeek(details.seekTime);
|
|
|
} else if (typeof details.seekTime === 'number') {
|
|
|
audioPlayer.currentTime = details.seekTime;
|
|
|
}
|
|
|
updateMediaSessionPositionState();
|
|
|
});
|
|
|
} catch (e) { /* some browsers don't support seekto — handlers above still work */ }
|
|
|
}
|
|
|
|
|
|
// Log a SoulSync play once a track has been heard ~10s (the standard "counts
|
|
|
// as a play" threshold) — feeds 'recently played' + smart-radio recency.
|
|
|
let npPlayLogged = false;
|
|
|
function npMaybeLogPlay() {
|
|
|
if (npPlayLogged || !currentTrack || !audioPlayer) return;
|
|
|
if (!isFinite(audioPlayer.currentTime) || audioPlayer.currentTime < 10) return;
|
|
|
npPlayLogged = true; // set first so a slow request can't double-fire
|
|
|
try {
|
|
|
fetch('/api/library/log-play', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({
|
|
|
track: {
|
|
|
id: currentTrack.id,
|
|
|
title: currentTrack.title,
|
|
|
artist: currentTrack.artist,
|
|
|
album: currentTrack.album,
|
|
|
},
|
|
|
duration_ms: Math.round((audioPlayer.duration || 0) * 1000),
|
|
|
}),
|
|
|
}).catch(() => {}); // fire-and-forget; logging must never affect playback
|
|
|
} catch (e) { /* non-fatal */ }
|
|
|
}
|
|
|
|
|
|
// timeupdate fires ~4x/s; only push position to the OS ~1x/s.
|
|
|
let _npPosStateLast = 0;
|
|
|
function npThrottledPositionState() {
|
|
|
const now = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
|
|
|
if (now - _npPosStateLast < 950) return;
|
|
|
_npPosStateLast = now;
|
|
|
updateMediaSessionPositionState();
|
|
|
}
|
|
|
|
|
|
// Feeds the lock-screen scrubber its progress (elapsed / duration / rate).
|
|
|
// Without this the OS shows a dead, position-less media control.
|
|
|
function updateMediaSessionPositionState() {
|
|
|
if (!('mediaSession' in navigator) || !('setPositionState' in navigator.mediaSession)) return;
|
|
|
if (!audioPlayer || !isFinite(audioPlayer.duration) || audioPlayer.duration <= 0) return;
|
|
|
try {
|
|
|
navigator.mediaSession.setPositionState({
|
|
|
duration: audioPlayer.duration,
|
|
|
playbackRate: audioPlayer.playbackRate || 1,
|
|
|
position: Math.min(audioPlayer.currentTime, audioPlayer.duration),
|
|
|
});
|
|
|
} catch (e) { /* invalid state (e.g. mid-load) — skip this tick */ }
|
|
|
}
|
|
|
|
|
|
function updateMediaSessionMetadata() {
|
|
|
if (!('mediaSession' in navigator) || !currentTrack) return;
|
|
|
const artwork = [];
|
|
|
const artUrl = getNpAlbumArtUrl();
|
|
|
if (artUrl) artwork.push({ src: artUrl, sizes: '512x512', type: 'image/jpeg' });
|
|
|
|
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
|
title: currentTrack.title || 'Unknown Track',
|
|
|
artist: currentTrack.artist || 'Unknown Artist',
|
|
|
album: currentTrack.album || 'Unknown Album',
|
|
|
artwork: artwork
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function updateMediaSessionPlaybackState() {
|
|
|
if (!('mediaSession' in navigator)) return;
|
|
|
if (!currentTrack) {
|
|
|
navigator.mediaSession.playbackState = 'none';
|
|
|
} else {
|
|
|
navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===============================
|
