HoneyandClaude Sonnet 4.6
0552b3f5d0
- playQueue: unified shuffle for both web and Android — pre-shuffles the songs array with the tapped song pinned first, saves _origQueue for restore. Passes S.qIdx (0 when shuffled) to NSBridge.setQueue instead of startIdx. - _computeNextIdx: removed the random-pick shuffle branch entirely. Since the queue is already shuffled, sequential traversal IS the shuffle order. - toggleShuffle: removed !HAS_BRIDGE guard so queue reorder runs on Android too. Re-sends reordered queue to ExoPlayer so native order stays in sync with JS. Removed setShuffleMode call (we manage order ourselves via pre-shuffled array). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1296 lines
54 KiB
JavaScript
1296 lines
54 KiB
JavaScript
import { S } from './state.js';
|
|
import { esc, formatDur, toast } from './utils.js';
|
|
import { api, streamUrl, coverUrl, downloadUrl, dispTitle, dispArtist, dispArtistParts, dispAlbum } from './api.js';
|
|
// views.js/ui.js circular imports — safe (only used inside function bodies)
|
|
import { loadRecommendations } from './views.js';
|
|
import { updateLyricsHighlight, onNpSongChange, syncNowPlaying } from './nowplaying.js';
|
|
|
|
// ─── NATIVE BRIDGE DETECTION ───────────────────────────────────────────────
|
|
// True when running inside the NovaSonic Android wrapper (NSBridge injected before loadUrl).
|
|
const HAS_BRIDGE = typeof window.NSBridge !== 'undefined';
|
|
|
|
// Track native playback state; driven by window.NSPlayer callbacks below.
|
|
let _nativePos = 0; // ms
|
|
let _nativePlaying = false;
|
|
let _lastPositionMs = 0; // ms — set by onPositionUpdate, used for prev() decision
|
|
let _lastDurationMs = 0; // ms — set by onPositionUpdate, used for seek calculations
|
|
let _skipping = false; // true briefly after a skip — suppresses the transient isPlaying:false
|
|
let _skipTimer = null;
|
|
let _reconTick = 0; // counter for periodic track-reconciliation inside onPositionUpdate
|
|
|
|
// ─── SCROBBLE ─────────────────────────────────────────────────────────────
|
|
let _scrobbleTimer = null;
|
|
let _scrobbleId = null;
|
|
function _scheduleScrobble(id) {
|
|
if (_scrobbleId === String(id)) return; // already scheduled for this track
|
|
_cancelScrobble();
|
|
_scrobbleId = String(id);
|
|
_scrobbleTimer = setTimeout(() => {
|
|
if (_scrobbleId) api('scrobble', `&id=${_scrobbleId}&time=${Date.now()}`).catch(() => {});
|
|
_scrobbleId = null;
|
|
}, 15_000);
|
|
}
|
|
function _cancelScrobble() {
|
|
clearTimeout(_scrobbleTimer);
|
|
_scrobbleTimer = null;
|
|
_scrobbleId = null;
|
|
}
|
|
|
|
// Unified duration / position / seek helpers — use native state when available,
|
|
// fall back to HTMLAudioElement when not.
|
|
const _dur = () => HAS_BRIDGE ? _lastDurationMs / 1000 : (S.audio.duration || 0);
|
|
const _pos = () => HAS_BRIDGE ? _nativePos / 1000 : (S.audio.currentTime || 0);
|
|
const _seek = ms => HAS_BRIDGE ? _nsBridge('seekTo', ms) : (S.audio.currentTime = ms / 1000);
|
|
|
|
// Safe NSBridge caller — never throws into JS.
|
|
function _nsBridge(method, ...args) {
|
|
try { window.NSBridge[method](...args); } catch(_) {}
|
|
}
|
|
|
|
// Convert a single Navidrome song to the NSBridge Track schema.
|
|
function _trackToNative(s) {
|
|
return {
|
|
id: s.id,
|
|
url: streamUrl(s.id),
|
|
title: s.title || '',
|
|
artist: s.artist || '',
|
|
album: s.album || null,
|
|
artworkUrl: s.coverArt ? coverUrl(s.coverArt, 1024) : null,
|
|
durationMs: Math.floor((s.duration || 0) * 1000),
|
|
};
|
|
}
|
|
|
|
// Build the NSBridge Track JSON array from S.queue.
|
|
const buildTrackList = () => S.queue.map(_trackToNative);
|
|
|
|
// Push the current JS queue to native whenever S.queue changes (radio top-ups, etc.).
|
|
function _pushQueueIfBridge() {
|
|
if (!HAS_BRIDGE) return;
|
|
try {
|
|
window.NSBridge.setQueue(JSON.stringify(buildTrackList()), S.qIdx, !S.audio.paused);
|
|
} catch (e) { console.warn('NSBridge.setQueue failed', e); }
|
|
}
|
|
|
|
// Insert a single song into the native queue at the given index (-1 = append).
|
|
export function nativeInsertAt(song, position) {
|
|
if (!HAS_BRIDGE) return;
|
|
try { window.NSBridge.addToQueue(JSON.stringify(_trackToNative(song)), position); } catch(_) {}
|
|
}
|
|
|
|
// ─── NATIVE → JS CALLBACKS ────────────────────────────────────────────────
|
|
// window.NSPlayer is the surface that MusicService calls back into.
|
|
// Installed here so it exists before onPageFinished fires.
|
|
window.NSPlayer = {
|
|
|
|
// Called when MediaController connects (first load or WebView reload).
|
|
onReady() {
|
|
if (HAS_BRIDGE && S.queue.length > 0) {
|
|
try {
|
|
const raw = window.NSBridge.getState();
|
|
const state = raw ? (JSON.parse(raw) || {}) : {};
|
|
const nativeLen = state.queueLength || 0;
|
|
const nativePlaying = state.isPlaying || false;
|
|
const nativeIdx = typeof state.currentIndex === 'number' ? state.currentIndex : S.qIdx;
|
|
const nativeId = state.currentId || '';
|
|
|
|
// Helper: true if native's current song matches JS queue at nativeIdx
|
|
const inSync = nativeIdx >= 0 && nativeIdx < S.queue.length &&
|
|
(!nativeId || !S.queue[nativeIdx]?.id ||
|
|
String(nativeId) === String(S.queue[nativeIdx].id));
|
|
|
|
if (nativeLen > 0 && nativePlaying) {
|
|
if (inSync) {
|
|
// Native is actively playing and we have the right song — re-sync.
|
|
S.qIdx = nativeIdx;
|
|
_nativePlaying = true;
|
|
_nativePos = state.positionMs || 0;
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { updatePlayerUI(s, true); onNpSongChange(s.id); }
|
|
setPlayIcon(true);
|
|
renderQueue();
|
|
} else {
|
|
// Native is playing a song we don't have (e.g. radio advanced while backgrounded).
|
|
// Reset the stale JS queue to avoid showing the wrong song — native keeps playing.
|
|
S.queue = [];
|
|
S.qIdx = 0;
|
|
}
|
|
} else if (nativeLen > 0 && inSync) {
|
|
// Paused but we can confirm the current song — re-sync UI state only.
|
|
S.qIdx = nativeIdx;
|
|
_nativePlaying = false;
|
|
_nativePos = state.positionMs || 0;
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { updatePlayerUI(s, true); onNpSongChange(s.id); }
|
|
setPlayIcon(false);
|
|
renderQueue();
|
|
} else if (!nativePlaying) {
|
|
// Native is idle/empty — safe to push JS state (e.g. after cold start).
|
|
window.NSBridge.setQueue(JSON.stringify(buildTrackList()), S.qIdx, false);
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
// Always sync shuffle/repeat settings.
|
|
_nsBridge('setRepeatMode', S.repeat === false ? 'off' : S.repeat);
|
|
_nsBridge('setShuffleMode', S.shuffle);
|
|
},
|
|
|
|
// Play/pause/buffer state changed.
|
|
onPlaybackStateChanged(stateJson) {
|
|
try {
|
|
const state = JSON.parse(stateJson);
|
|
if (_skipping) {
|
|
if (state.isPlaying) {
|
|
// isPlaying:true during skip/seek — restart grace period instead of clearing immediately,
|
|
// so a follow-up buffering false event is also suppressed.
|
|
clearTimeout(_skipTimer);
|
|
_skipTimer = setTimeout(() => { _skipping = false; }, 600);
|
|
} else {
|
|
// Suppress transient isPlaying:false during track transitions / seeks.
|
|
return;
|
|
}
|
|
}
|
|
const prev = _nativePlaying;
|
|
_nativePlaying = state.isPlaying;
|
|
if (!state.isPlaying && !state.isBuffering) _cancelScrobble();
|
|
if (state.isPlaying && S.previewCurrent) stopPreview(false);
|
|
if (state.isPlaying !== prev) {
|
|
setPlayIcon(state.isPlaying);
|
|
document.getElementById('player-art')?.classList.toggle('spinning', state.isPlaying);
|
|
if (navigator.mediaSession)
|
|
navigator.mediaSession.playbackState = state.isPlaying ? 'playing' : 'paused';
|
|
// Safety net: when playback starts, verify JS is showing the correct track.
|
|
// Catches any edge cases where onTrackChanged was missed or queue drifted.
|
|
// Skip during _skipping window: snapshot may lag and still report the OLD index.
|
|
if (state.isPlaying && !_skipping) {
|
|
try {
|
|
const live = JSON.parse(window.NSBridge.getState() || '{}');
|
|
const liveIdx = live.currentIndex;
|
|
const liveId = live.currentId || '';
|
|
if (typeof liveIdx === 'number' && liveIdx !== S.qIdx &&
|
|
liveIdx >= 0 && liveIdx < S.queue.length) {
|
|
const expected = S.queue[liveIdx];
|
|
// Only update if song ID confirms native and JS queues are in sync.
|
|
if (!liveId || !expected?.id || String(liveId) === String(expected.id)) {
|
|
S.qIdx = liveIdx;
|
|
if (expected) { updatePlayerUI(expected, true); onNpSongChange(expected.id); }
|
|
}
|
|
}
|
|
} catch {}
|
|
}
|
|
}
|
|
} catch (e) {}
|
|
},
|
|
|
|
// Native moved to a different track (auto-advance, seek, or queue replace).
|
|
onTrackChanged(payloadJson) {
|
|
try {
|
|
const p = JSON.parse(payloadJson);
|
|
if (typeof p.index !== 'number') return;
|
|
// p.index comes directly from ExoPlayer (always accurate).
|
|
// Only advance to a higher live index to handle rapid forward skips where
|
|
// the callback can arrive before we processed the previous one.
|
|
// Never let a stale MediaController snapshot pull us BACK to an old index.
|
|
let idx = p.index;
|
|
try {
|
|
const live = JSON.parse(window.NSBridge.getState() || '{}');
|
|
if (typeof live.currentIndex === 'number' && live.currentIndex > idx) idx = live.currentIndex;
|
|
} catch {}
|
|
if (idx < 0 || idx >= S.queue.length) return;
|
|
// Verify using the trackId from the callback payload (ExoPlayer-direct, not the
|
|
// potentially-stale snapshot) so auto-advance is never rejected by a lagged snapshot.
|
|
const trackId = p.trackId || '';
|
|
if (trackId && S.queue[idx]?.id && String(trackId) !== String(S.queue[idx].id) && p.reason !== 'queue') return;
|
|
const indexChanged = (idx !== S.qIdx);
|
|
if (indexChanged && p.reason !== 'queue') _histPush(S.qIdx);
|
|
S.qIdx = idx;
|
|
const s = S.queue[S.qIdx];
|
|
if (!s) return;
|
|
updatePlayerUI(s, true);
|
|
syncNowPlaying();
|
|
onNpSongChange(s.id);
|
|
if (indexChanged) renderQueue();
|
|
// Schedule scrobble — fires after 12s of uninterrupted playback.
|
|
_scheduleScrobble(s.id);
|
|
// Radio mode: top up the queue when running low.
|
|
// fillRadioQueue sends addToQueue to native internally — no re-send here.
|
|
if (S.radioMode && S.queue.length - S.qIdx < 5) fillRadioQueue();
|
|
} catch (e) {}
|
|
},
|
|
|
|
// ~250 ms position tick while playing.
|
|
onPositionUpdate(posMs, durMs) {
|
|
_nativePos = posMs;
|
|
_lastPositionMs = posMs;
|
|
_lastDurationMs = durMs;
|
|
if (S._scrubbing) return;
|
|
// Every 8 ticks (~2 s): verify JS track matches native snapshot.
|
|
// Catches the gap between auto-advance and onTrackChanged arriving in JS
|
|
// (evaluateJavascript is deferred while WebView is backgrounded/resuming).
|
|
// During _skipping window snapshot is stale — reset counter and wait.
|
|
if (_skipping) { _reconTick = 0; }
|
|
else if (HAS_BRIDGE && ++_reconTick >= 8) {
|
|
_reconTick = 0;
|
|
try {
|
|
const snap = JSON.parse(window.NSBridge.getState() || '{}');
|
|
const snapId = String(snap.currentId || '');
|
|
if (snapId && snapId !== String(S.queue[S.qIdx]?.id || '')) {
|
|
const found = S.queue.findIndex(s => String(s.id) === snapId);
|
|
if (found >= 0) {
|
|
S.qIdx = found;
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { updatePlayerUI(s, true); syncNowPlaying(); onNpSongChange(s.id); renderQueue(); }
|
|
}
|
|
}
|
|
} catch {}
|
|
}
|
|
const dur = durMs / 1000;
|
|
const cur = posMs / 1000;
|
|
if (dur <= 0) return;
|
|
const p = (cur / dur) * 100;
|
|
document.getElementById('progress-fill').style.width = p + '%';
|
|
document.getElementById('time-cur').textContent = formatDur(cur);
|
|
document.getElementById('time-total').textContent = formatDur(dur);
|
|
if (S.npOpen) {
|
|
const fill = document.getElementById('np-fill');
|
|
const curEl = document.getElementById('np-cur');
|
|
const totEl = document.getElementById('np-tot');
|
|
if (fill) fill.style.width = p + '%';
|
|
if (curEl) curEl.textContent = formatDur(cur);
|
|
if (totEl) totEl.textContent = formatDur(dur);
|
|
if (S.npLyricsMode) updateLyricsHighlight(posMs);
|
|
}
|
|
},
|
|
|
|
// Last track finished with repeat off.
|
|
onQueueEnded() {
|
|
_nativePlaying = false;
|
|
setPlayIcon(false);
|
|
if (S.radioMode) {
|
|
const prevLen = S.queue.length;
|
|
fillRadioQueue().then(() => {
|
|
if (S.queue.length > prevLen) { _nsBridge('play'); return; }
|
|
// fillRadioQueue was locked by a concurrent fill — wait for it to finish
|
|
// then trigger play so native doesn't stay stopped after queue end.
|
|
if (_radioFilling) setTimeout(() => { if (S.queue.length > prevLen) _nsBridge('play'); }, 3000);
|
|
});
|
|
}
|
|
},
|
|
|
|
onError(message) { toast('Playback error: ' + message); },
|
|
};
|
|
|
|
// ─── COVER ART URL CACHE ───────────────────────────────────────────────────
|
|
// Stable URLs let the OS cache artwork images — without this every skip regenerates a new
|
|
// auth token URL, Samsung has to re-fetch the image, and the lock screen notification
|
|
// visually reloads.
|
|
const _coverCache = new Map();
|
|
function _cachedCoverUrl(id, size) {
|
|
const key = `${id}:${size}`;
|
|
if (!_coverCache.has(key)) _coverCache.set(key, coverUrl(id, size));
|
|
return _coverCache.get(key);
|
|
}
|
|
|
|
// ─── AUDIO SESSION — set once, never again ───────────────────────────────
|
|
let _audioSessionSet = false;
|
|
function _setAudioSession() {
|
|
if (HAS_BRIDGE || _audioSessionSet) return;
|
|
_audioSessionSet = true;
|
|
try { if(navigator.audioSession) navigator.audioSession.type = 'playback'; } catch {}
|
|
}
|
|
|
|
// ─── PRELOAD (resource hint keeps connection open through Doze gap) ───────
|
|
let _preUrl = '';
|
|
let _preId = '';
|
|
let _preLink = null;
|
|
|
|
function _nextIdx() {
|
|
if(S.repeat === 'one') return S.qIdx;
|
|
if(S.qIdx + 1 < S.queue.length) return S.qIdx + 1;
|
|
if(S.repeat === 'all') return 0;
|
|
return -1;
|
|
}
|
|
|
|
function _preloadNext() {
|
|
if (HAS_BRIDGE) return; // ExoPlayer handles buffering natively
|
|
const ni = _nextIdx();
|
|
if(ni < 0) return;
|
|
const next = S.queue[ni];
|
|
if(!next || _preId === next.id) return;
|
|
_preId = next.id;
|
|
_preUrl = streamUrl(next.id);
|
|
if(_preLink) _preLink.remove();
|
|
_preLink = document.createElement('link');
|
|
_preLink.rel = 'prefetch';
|
|
_preLink.as = 'fetch';
|
|
_preLink.href = _preUrl;
|
|
document.head.appendChild(_preLink);
|
|
if(next.coverArt) {
|
|
[256, 512, 1024].forEach(size => {
|
|
const img = new Image();
|
|
img.src = _cachedCoverUrl(next.coverArt, size);
|
|
});
|
|
}
|
|
}
|
|
|
|
function _clearPreload() {
|
|
_preId = ''; _preUrl = '';
|
|
if(_preLink) { _preLink.remove(); _preLink = null; }
|
|
}
|
|
|
|
// ─── PLAY HISTORY (for prev-in-shuffle) ──────────────────────────────────────
|
|
// Records the qIdx before each forward advance so prevSong() can retrace the
|
|
// actual play order instead of blindly decrementing (which is wrong in shuffle).
|
|
const _playHist = [];
|
|
function _histPush(idx) {
|
|
if (_playHist[_playHist.length - 1] === idx) return;
|
|
_playHist.push(idx);
|
|
if (_playHist.length > 50) _playHist.shift();
|
|
}
|
|
function _histClear() { _playHist.length = 0; }
|
|
|
|
// ─── PLAYBACK ─────────────────────────────────────────────────────────────
|
|
let _playGen = 0;
|
|
// Incremented on every playQueue() call so in-flight fillRadioQueue callbacks
|
|
// from the previous queue can detect they're stale and bail out.
|
|
let _queueGen = 0;
|
|
|
|
export function playQueue(songs, startIdx) {
|
|
_queueGen++;
|
|
_radioFilling = false; // cancel any in-flight radio fill for the old queue
|
|
S._origQueue = null;
|
|
_histClear();
|
|
// Spotify-style shuffle: build a fixed shuffled order once, pin the tapped song first.
|
|
// Applies to both web and Android — queue is traversed sequentially in this fixed order.
|
|
if (S.shuffle && songs.length > 1) {
|
|
const start = songs[startIdx];
|
|
const rest = songs.filter((_, i) => i !== startIdx).sort(() => Math.random() - 0.5);
|
|
S._origQueue = songs.map(s => ({...s}));
|
|
S.queue = [start, ...rest].map(s => ({...s}));
|
|
S.qIdx = 0;
|
|
} else {
|
|
S.queue = songs.map(s => ({...s}));
|
|
S.qIdx = startIdx;
|
|
}
|
|
_clearPreload();
|
|
|
|
if (HAS_BRIDGE) {
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { updatePlayerUI(s, true); onNpSongChange(s.id); }
|
|
renderQueue();
|
|
// Build the track list now (before rAF) while S.queue is current.
|
|
const trackListJson = JSON.stringify(buildTrackList());
|
|
// Defer the NSBridge call to AFTER the current render frame so the
|
|
// updatePlayerUI DOM changes are committed and visible before the
|
|
// @JavascriptInterface call (which blocks the JS thread while Java
|
|
// parses the JSON and creates MediaItems).
|
|
requestAnimationFrame(() => {
|
|
try { window.NSBridge.setQueue(trackListJson, S.qIdx, true); }
|
|
catch (e) { console.warn('NSBridge.setQueue failed', e); }
|
|
// fillRadioQueue AFTER setQueue so addToQueue lands in the new native queue,
|
|
// not the old one that setQueue is about to wipe.
|
|
if (S.radioMode) fillRadioQueue();
|
|
});
|
|
return;
|
|
}
|
|
|
|
playCurrent();
|
|
renderQueue();
|
|
if(S.radioMode) fillRadioQueue();
|
|
}
|
|
|
|
export function playCurrent() {
|
|
if(S.qIdx < 0 || S.qIdx >= S.queue.length) return;
|
|
const s = S.queue[S.qIdx];
|
|
|
|
if (HAS_BRIDGE) {
|
|
// Update DOM immediately for snappy feedback; onTrackChanged will confirm.
|
|
S._trackChanging = true;
|
|
_resetProgressUI();
|
|
updatePlayerUI(s, true);
|
|
onNpSongChange(s.id);
|
|
renderQueue();
|
|
_nsBridge('seekToIndex', S.qIdx, 0);
|
|
_nsBridge('play');
|
|
return;
|
|
}
|
|
|
|
const gen = ++_playGen;
|
|
S._trackChanging = true;
|
|
_resetProgressUI();
|
|
if(navigator.mediaSession) navigator.mediaSession.playbackState = 'playing';
|
|
updatePlayerUI(s, true);
|
|
onNpSongChange(s.id);
|
|
renderQueue();
|
|
_scheduleScrobble(s.id); // 12s timer — cancelled on pause/skip
|
|
|
|
const src = (_preId === s.id && _preUrl) ? _preUrl : streamUrl(s.id);
|
|
_clearPreload();
|
|
S.audio.src = src;
|
|
|
|
const _resetFlag = () => { if (_playGen === gen) S._trackChanging = false; };
|
|
|
|
const _applySession = () => {
|
|
if (_playGen !== gen) return;
|
|
updateMediaSession(s);
|
|
setTimeout(_preloadNext, 2000);
|
|
};
|
|
|
|
let _guardTimer = null;
|
|
let _canplayFn = null;
|
|
|
|
function _armCanplay() {
|
|
if (_canplayFn) S.audio.removeEventListener('canplay', _canplayFn);
|
|
clearTimeout(_guardTimer);
|
|
_guardTimer = setTimeout(() => {
|
|
if (_playGen !== gen) return;
|
|
S._trackChanging = false;
|
|
S.audio.play().then(_applySession).catch(() => {});
|
|
}, 10000);
|
|
_canplayFn = () => {
|
|
clearTimeout(_guardTimer);
|
|
_canplayFn = null;
|
|
if (_playGen !== gen) return;
|
|
if (!S.audio.paused) { _applySession(); return; }
|
|
_setAudioSession();
|
|
S.audio.play().then(_applySession).catch(_resetFlag);
|
|
};
|
|
S.audio.addEventListener('canplay', _canplayFn, { once: true });
|
|
}
|
|
|
|
_armCanplay();
|
|
_setAudioSession();
|
|
S.audio.play()
|
|
.then(() => {
|
|
clearTimeout(_guardTimer);
|
|
if (_canplayFn) S.audio.removeEventListener('canplay', _canplayFn);
|
|
_applySession();
|
|
})
|
|
.catch(err => {
|
|
if (_playGen !== gen) return;
|
|
S.audio.src = src;
|
|
S.audio.load();
|
|
_armCanplay();
|
|
});
|
|
}
|
|
|
|
function _updatePlayingHighlights() {
|
|
const id = String(S.queue[S.qIdx]?.id ?? '');
|
|
document.querySelectorAll('.song-item[data-song-id]').forEach(el => {
|
|
el.classList.toggle('playing', el.dataset.songId === id);
|
|
});
|
|
}
|
|
|
|
// Returns [{name, id}] using Navidrome's resolved artists when available,
|
|
// otherwise splits the artist string on ';' only (safe for names like Au/Ra).
|
|
export function parseArtists(s) {
|
|
if (Array.isArray(s.artists) && s.artists.length > 1) return s.artists;
|
|
return (s.artist || '').split(/\s*;\s*/).filter(Boolean)
|
|
.map((name, i) => ({ name, id: i === 0 ? (s.artistId || '') : '' }));
|
|
}
|
|
|
|
export function updatePlayerUI(s, _skipMediaSession = false) {
|
|
document.getElementById('player-title').textContent = dispTitle(s);
|
|
const artistParts = dispArtistParts(s, parseArtists);
|
|
document.getElementById('player-artist-name').innerHTML = artistParts.length
|
|
? artistParts.map(a => `<span style="cursor:pointer" onclick="s_goArtist(event,'${esc(a.name)}','${a.id||''}')">${esc(a.name)}</span>`)
|
|
.join('<span style="color:var(--text3)"> • </span>')
|
|
: '—';
|
|
document.getElementById('player-album-name').textContent = dispAlbum(s);
|
|
const art = document.getElementById('player-art');
|
|
const cv = coverUrl(s.coverArt, 256);
|
|
const existingImg = art.querySelector('img');
|
|
if (cv && existingImg) { if (existingImg.src !== cv) existingImg.src = cv; }
|
|
else art.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
|
|
updateStarBtn();
|
|
document.title = `${s.title} — NovaSonic`;
|
|
if (!_skipMediaSession) updateMediaSession(s);
|
|
if(document.getElementById('page-recommendations').classList.contains('active')) loadRecommendations();
|
|
try {
|
|
localStorage.setItem('ns_last_played', JSON.stringify({
|
|
song: { id:s.id, title:s.title, artist:s.artist, album:s.album, albumId:s.albumId,
|
|
artistId:s.artistId, coverArt:s.coverArt, duration:s.duration, _starred:s._starred||false },
|
|
queue: S.queue.map(t => ({ id:t.id, title:t.title, artist:t.artist, album:t.album,
|
|
albumId:t.albumId, artistId:t.artistId, coverArt:t.coverArt,
|
|
duration:t.duration, _starred:t._starred||false })),
|
|
qIdx: S.qIdx,
|
|
}));
|
|
} catch {}
|
|
_syncNpDirect(s);
|
|
_updatePlayingHighlights();
|
|
// Preload the hi-res NP cover now so opening the overlay is instant
|
|
const _npCv = coverUrl(s.coverArt, 1024);
|
|
if (_npCv && _npCv !== _npBgLastUrl) { const _pre = new Image(); _pre.src = _npCv; }
|
|
// Pre-warm the next song's 1024 cover so auto-advance NP swap is instant from cache
|
|
const _nextForPreload = S.qIdx + 1 < S.queue.length ? S.queue[S.qIdx + 1] : null;
|
|
if (_nextForPreload?.coverArt) {
|
|
const _nextCv = coverUrl(_nextForPreload.coverArt, 1024);
|
|
if (_nextCv) { const _preN = new Image(); _preN.src = _nextCv; }
|
|
}
|
|
}
|
|
|
|
// ── Solid cover-color background ────────────────────────────────────────────
|
|
// Fetch the cover as a blob (bypasses canvas CORS taint), draw on a tiny
|
|
// canvas, find the most vivid pixel, darken it to a moody solid background.
|
|
let _npColorActiveUrl = '';
|
|
async function _extractAndApplyColor(cv) {
|
|
if (!cv || !S.cfg?.coverColorBg) return;
|
|
if (cv === _npColorActiveUrl) return;
|
|
_npColorActiveUrl = cv;
|
|
try {
|
|
const res = await fetch(cv, { signal: AbortSignal.timeout(6000) });
|
|
const blob = await res.blob();
|
|
const burl = URL.createObjectURL(blob);
|
|
const img = await new Promise((ok, err) => {
|
|
const i = new Image(); i.onload = () => ok(i); i.onerror = err; i.src = burl;
|
|
});
|
|
URL.revokeObjectURL(burl);
|
|
if (cv !== _npColorActiveUrl) return; // superseded by next song
|
|
const c = document.createElement('canvas'); c.width = c.height = 24;
|
|
const ctx = c.getContext('2d'); ctx.drawImage(img, 0, 0, 24, 24);
|
|
const d = ctx.getImageData(0, 0, 24, 24).data;
|
|
let br = 20, bg2 = 20, bb = 40, best = 0;
|
|
for (let i = 0; i < d.length; i += 4) {
|
|
const r = d[i], g = d[i+1], b = d[i+2];
|
|
const mx = Math.max(r,g,b), mn = Math.min(r,g,b);
|
|
const sat = mx > 0 ? (mx-mn)/mx : 0;
|
|
const lum = (r+g+b)/3;
|
|
const score = sat * 2 + (lum > 30 && lum < 220 ? 1 : 0);
|
|
if (score > best) { best = score; br = r; bg2 = g; bb = b; }
|
|
}
|
|
// Darken significantly for a moody solid bg
|
|
const el = document.getElementById('np-overlay');
|
|
if (el && S.cfg?.coverColorBg)
|
|
el.style.setProperty('--np-solid', `${Math.round(br*.28)},${Math.round(bg2*.28)},${Math.round(bb*.28)}`);
|
|
} catch {}
|
|
}
|
|
|
|
export function updateNpColorMode() {
|
|
const el = document.getElementById('np-overlay');
|
|
if (!el) return;
|
|
const on = !!S.cfg?.coverColorBg;
|
|
el.classList.toggle('dynamic-color', on);
|
|
if (!on) { el.style.removeProperty('--np-solid'); _npColorActiveUrl = ''; }
|
|
else if (_npBgLastUrl) _extractAndApplyColor(_npBgLastUrl);
|
|
}
|
|
|
|
let _npBgCurr = 'a';
|
|
let _npBgLastUrl = '';
|
|
function _crossfadeNpBg(cv) {
|
|
if ((cv || '') === _npBgLastUrl) return;
|
|
_npBgLastUrl = cv || '';
|
|
if (S.cfg?.coverColorBg) _extractAndApplyColor(cv || '');
|
|
const doFade = () => {
|
|
const currEl = document.getElementById(`np-bg-${_npBgCurr}`);
|
|
const nextId = _npBgCurr === 'a' ? 'b' : 'a';
|
|
const nextEl = document.getElementById(`np-bg-${nextId}`);
|
|
if (!currEl || !nextEl) return;
|
|
nextEl.style.backgroundImage = cv ? `url('${cv}')` : 'none';
|
|
requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
nextEl.style.opacity = '1';
|
|
currEl.style.opacity = '0';
|
|
_npBgCurr = nextId;
|
|
}));
|
|
};
|
|
if (!cv) { doFade(); return; }
|
|
const img = new Image();
|
|
img.onload = doFade;
|
|
img.onerror = doFade;
|
|
img.src = cv;
|
|
}
|
|
|
|
export function _syncNpDirect(s) {
|
|
if(!S.npOpen || !s) return;
|
|
const cv = coverUrl(s.coverArt, 1024);
|
|
const cover = document.getElementById('np-cover');
|
|
if (cover) {
|
|
const existingImg = cover.querySelector('img');
|
|
if (cv && existingImg) { if (existingImg.src !== cv) existingImg.src = cv; }
|
|
else cover.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
|
|
}
|
|
_crossfadeNpBg(cv);
|
|
const t = document.getElementById('np-title'); if(t) t.textContent = dispTitle(s) || '—';
|
|
const an = document.getElementById('np-artist-name');
|
|
if(an) {
|
|
const parts = dispArtistParts(s, parseArtists);
|
|
an.innerHTML = parts.length
|
|
? parts.map(a => `<span style="cursor:pointer" onclick="closeNowPlaying();s_goArtist(event,'${esc(a.name)}','${a.id||''}')">${esc(a.name)}</span>`)
|
|
.join('<span style="opacity:.5"> • </span>')
|
|
: '—';
|
|
}
|
|
const aln = document.getElementById('np-album-name'); if(aln) aln.textContent = dispAlbum(s);
|
|
syncNpStar();
|
|
}
|
|
|
|
// Bump _playGen so any stale canplay/guard callbacks from the last playCurrent()
|
|
// bail out and don't call S.audio.play() after ABS has taken over audio.
|
|
export function cancelMusicAutoplay() { _playGen++; S.audio.pause(); }
|
|
|
|
// ─── TRANSPORT ────────────────────────────────────────────────────────────
|
|
|
|
export function togglePlay() {
|
|
if (HAS_BRIDGE) { _nsBridge('togglePlay'); return; }
|
|
if(S.audio.src) {
|
|
if (S.audio.paused) { S.audio.play(); }
|
|
else { S.audio.pause(); _cancelScrobble(); }
|
|
}
|
|
}
|
|
|
|
export const isPlaying = () => HAS_BRIDGE ? _nativePlaying : !S.audio.paused;
|
|
|
|
export function setPlayIcon(playing) {
|
|
document.getElementById('play-icon').innerHTML = playing
|
|
? '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>'
|
|
: '<polygon points="5 3 19 12 5 21 5 3"/>';
|
|
if(S.npOpen) {
|
|
document.getElementById('np-play-icon').innerHTML = playing
|
|
? '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>'
|
|
: '<polygon points="5 3 19 12 5 21 5 3"/>';
|
|
const cover = document.getElementById('np-cover');
|
|
if(cover) cover.classList.toggle('playing', playing);
|
|
}
|
|
}
|
|
|
|
function _computeNextIdx() {
|
|
if (S.repeat === 'one') return S.qIdx;
|
|
// No special shuffle case — queue is already in shuffled order when S.shuffle is on.
|
|
if (S.qIdx + 1 < S.queue.length) return S.qIdx + 1;
|
|
if (S.repeat === 'all') return 0;
|
|
return -1;
|
|
}
|
|
|
|
function _setSkipping() {
|
|
_skipping = true;
|
|
_reconTick = 0;
|
|
clearTimeout(_skipTimer);
|
|
_skipTimer = setTimeout(() => { _skipping = false; }, 2000);
|
|
}
|
|
|
|
function _resetProgressUI() {
|
|
if (HAS_BRIDGE) _nativePos = 0;
|
|
document.getElementById('progress-fill').style.width = '0%';
|
|
document.getElementById('time-cur').textContent = formatDur(0);
|
|
if (S.npOpen) {
|
|
const fill = document.getElementById('np-fill');
|
|
const cur = document.getElementById('np-cur');
|
|
if (fill) fill.style.width = '0%';
|
|
if (cur) cur.textContent = formatDur(0);
|
|
}
|
|
}
|
|
|
|
export function prevSong() {
|
|
_clearPreload();
|
|
if (HAS_BRIDGE) {
|
|
_setSkipping();
|
|
if (_lastPositionMs > 3000) {
|
|
// Restart current song explicitly — avoids relying on ExoPlayer's implicit prev-vs-restart logic.
|
|
_resetProgressUI();
|
|
_nsBridge('seekTo', 0);
|
|
return;
|
|
}
|
|
// Pop history to retrace actual play order (correct in shuffle where next jumps randomly).
|
|
// Fall back to S.qIdx-1 when history is empty (e.g. at the very start of a queue).
|
|
const prevIdx = _playHist.length > 0 ? _playHist.pop() : (S.qIdx > 0 ? S.qIdx - 1 : -1);
|
|
if (prevIdx >= 0 && prevIdx < S.queue.length) {
|
|
S.qIdx = prevIdx;
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { _resetProgressUI(); updatePlayerUI(s, true); syncNowPlaying(); onNpSongChange(s.id); renderQueue(); }
|
|
_nsBridge('seekToIndex', S.qIdx, 0);
|
|
_nsBridge('play');
|
|
}
|
|
return;
|
|
}
|
|
if(S.audio.currentTime > 3) { _resetProgressUI(); S.audio.currentTime = 0; return; }
|
|
if(S.qIdx > 0) { S.qIdx--; playCurrent(); }
|
|
}
|
|
|
|
export function nextSong() {
|
|
_clearPreload();
|
|
if (HAS_BRIDGE) {
|
|
_setSkipping();
|
|
const ni = _computeNextIdx();
|
|
if (ni >= 0 && ni < S.queue.length) {
|
|
_histPush(S.qIdx);
|
|
S.qIdx = ni;
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { _resetProgressUI(); updatePlayerUI(s, true); onNpSongChange(s.id); renderQueue(); }
|
|
// Explicit index prevents desync when JS and native queue pointers diverge.
|
|
_nsBridge('seekToIndex', ni, 0);
|
|
_nsBridge('play');
|
|
} else {
|
|
// Shuffle mode: native picks the shuffled-next item; onTrackChanged will confirm the index.
|
|
_nsBridge('next');
|
|
}
|
|
if (S.radioMode && S.queue.length - S.qIdx < 5) fillRadioQueue();
|
|
return;
|
|
}
|
|
if(S.qIdx < S.queue.length - 1) S.qIdx++;
|
|
else if(S.repeat) S.qIdx = 0;
|
|
else if(S.radioMode) { fillRadioQueue().then(() => { if(S.qIdx < S.queue.length-1) { S.qIdx++; playCurrent(); } }); return; }
|
|
else return;
|
|
if(S.radioMode && S.queue.length - S.qIdx < 5) fillRadioQueue();
|
|
playCurrent();
|
|
}
|
|
|
|
export function onEnded() {
|
|
if(S.repeat === 'one') { S.audio.currentTime = 0; S.audio.play(); return; }
|
|
_cancelScrobble(); // timer irrelevant now — song already finished
|
|
nextSong();
|
|
}
|
|
|
|
export function _applyShuffleRepeat() {
|
|
document.getElementById('btn-shuffle')?.classList.toggle('active', S.shuffle);
|
|
document.getElementById('np-shuffle-btn')?.classList.toggle('active', S.shuffle);
|
|
document.getElementById('badge-shuffle')?.classList.toggle('on', S.shuffle);
|
|
document.getElementById('btn-repeat')?.classList.toggle('active', S.repeat !== false);
|
|
document.getElementById('btn-repeat')?.classList.toggle('repeat-one', S.repeat === 'one');
|
|
const nb = document.getElementById('np-repeat-btn');
|
|
if(nb) { nb.classList.toggle('active', S.repeat !== false); nb.classList.toggle('repeat-one', S.repeat === 'one'); }
|
|
const badge = document.getElementById('badge-repeat');
|
|
if(badge) { badge.classList.toggle('on', S.repeat !== false); badge.textContent = S.repeat === 'one' ? '🔂 Einmal' : '🔁 Repeat'; }
|
|
}
|
|
|
|
export function toggleShuffle() {
|
|
S.shuffle = !S.shuffle;
|
|
localStorage.setItem('ns_shuffle', S.shuffle ? '1' : '0');
|
|
if (S.queue.length > 1) {
|
|
if (S.shuffle) {
|
|
const cur = S.queue[S.qIdx];
|
|
S._origQueue = [...S.queue];
|
|
const rest = S.queue.filter((_, i) => i !== S.qIdx).sort(() => Math.random() - 0.5);
|
|
S.queue = [cur, ...rest];
|
|
S.qIdx = 0;
|
|
} else if (S._origQueue) {
|
|
const cur = S.queue[S.qIdx];
|
|
S.queue = S._origQueue;
|
|
S._origQueue = null;
|
|
const idx = S.queue.findIndex(s => s.id === cur?.id);
|
|
S.qIdx = idx >= 0 ? idx : 0;
|
|
}
|
|
renderQueue();
|
|
// Re-send the reordered queue to native so ExoPlayer's order matches JS.
|
|
if (HAS_BRIDGE) {
|
|
const tl = JSON.stringify(buildTrackList());
|
|
try { window.NSBridge.setQueue(tl, S.qIdx, _nativePlaying); }
|
|
catch(e) { console.warn('NSBridge.setQueue failed', e); }
|
|
}
|
|
}
|
|
_applyShuffleRepeat();
|
|
}
|
|
|
|
export function toggleRepeat() {
|
|
S.repeat = S.repeat === false ? 'all' : S.repeat === 'all' ? 'one' : false;
|
|
localStorage.setItem('ns_repeat', S.repeat === false ? '0' : S.repeat);
|
|
_applyShuffleRepeat();
|
|
if (HAS_BRIDGE) _nsBridge('setRepeatMode', S.repeat === false ? 'off' : S.repeat);
|
|
}
|
|
|
|
// ─── RADIO ────────────────────────────────────────────────────────────────
|
|
|
|
export function _applyRadioBtn() {
|
|
const btn = document.getElementById('btn-radio-mode');
|
|
if(btn) { btn.classList.toggle('active', S.radioMode); btn.style.color = S.radioMode ? 'var(--blue)' : ''; }
|
|
const nb = document.getElementById('np-radio-btn');
|
|
if(nb) { nb.classList.toggle('active', S.radioMode); nb.style.color = S.radioMode ? 'var(--blue)' : ''; }
|
|
}
|
|
|
|
export async function toggleRadioMode() {
|
|
S.radioMode = !S.radioMode;
|
|
localStorage.setItem('ns_radio', S.radioMode ? '1' : '0');
|
|
_applyRadioBtn();
|
|
if(S.radioMode) await fillRadioQueue();
|
|
}
|
|
|
|
let _radioFilling = false;
|
|
|
|
export async function fillRadioQueue() {
|
|
if (!S.radioMode || _radioFilling) return;
|
|
_radioFilling = true;
|
|
const gen = _queueGen;
|
|
try {
|
|
const seed = S.queue[S.qIdx];
|
|
let newSongs = [];
|
|
|
|
// 1. Try similar songs seeded from the current track
|
|
if (seed?.id) {
|
|
const r = await api('getSimilarSongs2', `&id=${seed.id}&count=20`);
|
|
newSongs = r.similarSongs2?.song || [];
|
|
}
|
|
if (gen !== _queueGen) return;
|
|
|
|
// 2. Fall back to random if similar songs unavailable or empty
|
|
if (!newSongs.length) {
|
|
const r = await api('getRandomSongs', '&size=20');
|
|
newSongs = r.randomSongs?.song || [];
|
|
}
|
|
if (gen !== _queueGen) return;
|
|
if (!newSongs.length) return;
|
|
|
|
const recentIds = new Set(S.queue.slice(-50).map(s => s.id));
|
|
const deduped = newSongs.filter(s => !recentIds.has(s.id));
|
|
|
|
if (deduped.length === 0) {
|
|
// All similar songs recently played (small library) — try random as final fallback
|
|
if (gen !== _queueGen) return;
|
|
const rr = await api('getRandomSongs', '&size=20');
|
|
const randomFresh = (rr.randomSongs?.song || []).filter(s => !recentIds.has(s.id));
|
|
// If random is also exhausted, allow repeats to keep music playing
|
|
newSongs = randomFresh.length > 0 ? randomFresh : newSongs.slice(0, 5);
|
|
} else {
|
|
newSongs = deduped;
|
|
}
|
|
|
|
if (gen !== _queueGen) return;
|
|
const prevLen = S.queue.length;
|
|
S.queue.push(...newSongs);
|
|
renderQueue();
|
|
// Append-only: never call setQueue here (that resets position to 0).
|
|
S.queue.slice(prevLen).forEach(s => _nsBridge('addToQueue', JSON.stringify(_trackToNative(s)), -1));
|
|
} catch {
|
|
} finally {
|
|
_radioFilling = false;
|
|
}
|
|
}
|
|
|
|
// ─── PROGRESS & SCRUBBING ─────────────────────────────────────────────────
|
|
|
|
export function updateProgress() {
|
|
if(HAS_BRIDGE) return; // driven by NSPlayer.onPositionUpdate instead
|
|
if(!S.audio.duration || S._scrubbing) return;
|
|
syncMediaSessionPosition();
|
|
const rem = S.audio.duration - S.audio.currentTime;
|
|
if(rem > 0 && rem < 30 && !S._trackChanging) _preloadNext();
|
|
const p = (S.audio.currentTime / S.audio.duration) * 100;
|
|
document.getElementById('progress-fill').style.width = p + '%';
|
|
document.getElementById('time-cur').textContent = formatDur(S.audio.currentTime);
|
|
document.getElementById('time-total').textContent = formatDur(S.audio.duration);
|
|
if(S.npOpen) {
|
|
const fill = document.getElementById('np-fill');
|
|
const cur = document.getElementById('np-cur');
|
|
const tot = document.getElementById('np-tot');
|
|
if(fill) fill.style.width = p + '%';
|
|
if(cur) cur.textContent = formatDur(S.audio.currentTime);
|
|
if(tot) tot.textContent = formatDur(S.audio.duration);
|
|
if(S.npLyricsMode) updateLyricsHighlight(S.audio.currentTime * 1000);
|
|
}
|
|
}
|
|
|
|
export function seekTo(e) {
|
|
const bar = document.getElementById('progress-bar');
|
|
const dur = _dur();
|
|
if (!bar || !dur) return;
|
|
const rect = bar.getBoundingClientRect();
|
|
const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
|
const fill = document.getElementById('progress-fill');
|
|
if (fill) { fill.style.transition = 'none'; fill.style.width = (pos * 100) + '%'; }
|
|
S._scrubbing = true;
|
|
if (HAS_BRIDGE) {
|
|
_setSkipping();
|
|
_nsBridge('seekTo', Math.round(pos * _lastDurationMs));
|
|
const done = () => { S._scrubbing = false; requestAnimationFrame(() => { if (fill) fill.style.transition = ''; }); };
|
|
setTimeout(done, 500);
|
|
} else {
|
|
S.audio.currentTime = pos * dur;
|
|
const done = () => { S._scrubbing = false; requestAnimationFrame(() => { if (fill) fill.style.transition = ''; }); };
|
|
S.audio.addEventListener('seeked', done, { once: true });
|
|
setTimeout(done, 1500);
|
|
}
|
|
}
|
|
|
|
export function initProgressScrub() {
|
|
// Bottom mini-bar: mouse-only (touch disabled — too easy to accidentally seek on mobile).
|
|
_initBarScrub(
|
|
document.getElementById('progress-bar'),
|
|
document.getElementById('progress-fill'),
|
|
pos => { document.getElementById('time-cur').textContent = formatDur(pos * _dur()); },
|
|
/* noTouch= */ true
|
|
);
|
|
_initBarScrub(
|
|
document.getElementById('np-bar'),
|
|
document.getElementById('np-fill'),
|
|
pos => { const el = document.getElementById('np-cur'); if(el) el.textContent = formatDur(pos * _dur()); }
|
|
);
|
|
}
|
|
|
|
// Export for lyrics / other callers that need to seek by ms.
|
|
export function seekToMs(ms) {
|
|
if (HAS_BRIDGE) {
|
|
_setSkipping();
|
|
_nsBridge('seekTo', Math.round(ms));
|
|
} else {
|
|
S.audio.currentTime = ms / 1000;
|
|
}
|
|
}
|
|
|
|
function _initBarScrub(bar, fill, onMove, noTouch = false) {
|
|
if(!bar || !fill) return;
|
|
function getPos(clientX) { const r = bar.getBoundingClientRect(); return Math.max(0, Math.min(1, (clientX-r.left)/r.width)); }
|
|
function startScrub(pos) { S._scrubbing=true; fill.style.transition='none'; fill.style.width=(pos*100)+'%'; onMove(pos); }
|
|
function moveScrub(pos) { fill.style.width=(pos*100)+'%'; onMove(pos); }
|
|
function endScrub(pos) {
|
|
fill.style.width = (pos * 100) + '%';
|
|
const dur = _dur();
|
|
if (HAS_BRIDGE) {
|
|
_setSkipping();
|
|
_nsBridge('seekTo', Math.round(pos * _lastDurationMs));
|
|
S._scrubbing = false;
|
|
requestAnimationFrame(() => { fill.style.transition = ''; });
|
|
} else if (dur) {
|
|
S.audio.currentTime = pos * dur;
|
|
const done = () => { S._scrubbing = false; requestAnimationFrame(() => { fill.style.transition = ''; }); };
|
|
S.audio.addEventListener('seeked', done, { once: true });
|
|
setTimeout(done, 1500);
|
|
} else {
|
|
S._scrubbing = false;
|
|
fill.style.transition = '';
|
|
}
|
|
}
|
|
if (noTouch) {
|
|
// Block all touch input (including synthetic mousedown the browser fires after a tap).
|
|
bar.addEventListener('touchstart', e => { e.preventDefault(); }, { passive: false });
|
|
} else {
|
|
// Touch: require ≥8px horizontal drag before committing to scrub.
|
|
// A plain tap cancels cleanly without seeking.
|
|
let _touchStartX = 0, _touchMoved = false;
|
|
bar.addEventListener('touchstart', e => {
|
|
_touchStartX = e.touches[0].clientX;
|
|
_touchMoved = false;
|
|
e.stopPropagation();
|
|
e.preventDefault(); // block synthetic mousedown/click that would trigger scrub on plain tap
|
|
});
|
|
bar.addEventListener('touchmove', e => {
|
|
const dx = Math.abs(e.touches[0].clientX - _touchStartX);
|
|
if (!_touchMoved && dx >= 8) { _touchMoved = true; startScrub(getPos(e.touches[0].clientX)); }
|
|
if (_touchMoved && S._scrubbing) moveScrub(getPos(e.touches[0].clientX));
|
|
}, {passive:true});
|
|
bar.addEventListener('touchend', e => {
|
|
if (_touchMoved && S._scrubbing) endScrub(getPos(e.changedTouches[0].clientX));
|
|
else S._scrubbing = false;
|
|
_touchMoved = false;
|
|
}, {passive:true});
|
|
}
|
|
bar.addEventListener('pointerdown', e => {
|
|
if (noTouch && e.pointerType === 'touch') return; // bottom bar: mouse/stylus only
|
|
startScrub(getPos(e.clientX)); e.preventDefault();
|
|
const mm = e2 => { if(S._scrubbing) moveScrub(getPos(e2.clientX)); };
|
|
const mu = e2 => { if(S._scrubbing) endScrub(getPos(e2.clientX)); document.removeEventListener('pointermove',mm); document.removeEventListener('pointerup',mu); };
|
|
document.addEventListener('pointermove', mm);
|
|
document.addEventListener('pointerup', mu);
|
|
});
|
|
}
|
|
|
|
export function setVolume(v) {
|
|
// Square curve: slider 50 → actual 0.25, slider 30 → actual 0.09
|
|
// Matches how ears perceive loudness (logarithmic) so low values feel genuinely quiet.
|
|
const vol = Math.pow(v / 100, 2);
|
|
S.audio.volume = vol;
|
|
S.previewAudio.volume = vol;
|
|
const absAudio = document.getElementById('abs-audio');
|
|
if (absAudio) absAudio.volume = vol;
|
|
document.querySelectorAll('.volume-slider-sync').forEach(el => { el.value = v; });
|
|
if (HAS_BRIDGE) _nsBridge('setVolume', vol);
|
|
try { localStorage.setItem('ns_volume', v); } catch (_) {}
|
|
}
|
|
|
|
// ─── MEDIA SESSION ────────────────────────────────────────────────────────
|
|
|
|
export function updateMediaSession(s) {
|
|
// When native is active, Media3 owns the system notification — don't touch it.
|
|
if (HAS_BRIDGE) return;
|
|
if(!navigator.mediaSession) return;
|
|
const artwork = s.coverArt ? [
|
|
{ src: _cachedCoverUrl(s.coverArt, 256), sizes:'256x256', type:'image/jpeg' },
|
|
{ src: _cachedCoverUrl(s.coverArt, 512), sizes:'512x512', type:'image/jpeg' },
|
|
{ src: _cachedCoverUrl(s.coverArt, 1024), sizes:'1024x1024', type:'image/jpeg' },
|
|
] : [];
|
|
navigator.mediaSession.metadata = new MediaMetadata({ title:s.title, artist:s.artist||'', album:s.album||'', artwork });
|
|
navigator.mediaSession.setActionHandler('play', togglePlay);
|
|
navigator.mediaSession.setActionHandler('pause', togglePlay);
|
|
navigator.mediaSession.setActionHandler('previoustrack', prevSong);
|
|
navigator.mediaSession.setActionHandler('nexttrack', nextSong);
|
|
navigator.mediaSession.setActionHandler('seekbackward', d => { S.audio.currentTime = Math.max(0, S.audio.currentTime-(d.seekOffset||10)); });
|
|
navigator.mediaSession.setActionHandler('seekforward', d => { S.audio.currentTime = Math.min(S.audio.duration||0, S.audio.currentTime+(d.seekOffset||10)); });
|
|
navigator.mediaSession.setActionHandler('seekto', d => { if(d.seekTime!=null) S.audio.currentTime = d.seekTime; });
|
|
}
|
|
|
|
export function syncMediaSessionPosition() {
|
|
if (HAS_BRIDGE) return;
|
|
if(!navigator.mediaSession?.setPositionState || !S.audio.duration || isNaN(S.audio.duration)) return;
|
|
const now = Date.now();
|
|
if(now - S._msPosLast < 1000) return;
|
|
S._msPosLast = now;
|
|
try { navigator.mediaSession.setPositionState({ duration:S.audio.duration, playbackRate:S.audio.playbackRate||1, position:Math.min(S.audio.currentTime, S.audio.duration) }); } catch {}
|
|
}
|
|
|
|
// ─── STAR ─────────────────────────────────────────────────────────────────
|
|
|
|
export async function toggleStar(song, btn) {
|
|
try {
|
|
await api(song._starred ? 'unstar' : 'star', `&id=${song.id}`);
|
|
song._starred = !song._starred;
|
|
if(btn) {
|
|
btn.classList.toggle('starred', song._starred);
|
|
btn.querySelector('svg')?.setAttribute('fill', song._starred ? 'currentColor' : 'none');
|
|
}
|
|
if(S.queue[S.qIdx]?.id === song.id) updateStarBtn();
|
|
} catch(e) { toast('Fehler: ' + e.message); }
|
|
}
|
|
|
|
export function starCurrent() {
|
|
if(S.qIdx < 0 || !S.queue[S.qIdx]) return;
|
|
toggleStar(S.queue[S.qIdx], document.getElementById('btn-star-current'));
|
|
}
|
|
|
|
export function updateStarBtn() {
|
|
const s = S.queue[S.qIdx];
|
|
const icon = document.getElementById('star-icon');
|
|
if(!icon) return;
|
|
const isStarred = s && (s._starred || s.starred);
|
|
icon.setAttribute('fill', isStarred ? 'var(--accent)' : 'none');
|
|
icon.setAttribute('stroke', isStarred ? 'var(--accent)' : 'var(--text3)');
|
|
}
|
|
|
|
export function syncNpStar() {
|
|
if(!S.npOpen) return;
|
|
const s = S.queue[S.qIdx];
|
|
const icon = document.getElementById('np-star-icon');
|
|
if(!icon || !s) return;
|
|
const starred = s._starred || s.starred;
|
|
icon.setAttribute('fill', starred ? 'var(--accent)' : 'none');
|
|
icon.setAttribute('stroke', starred ? 'var(--accent)' : 'rgba(255,255,255,.5)');
|
|
}
|
|
|
|
export function npToggleStar() {
|
|
const s = S.queue[S.qIdx];
|
|
if(!s) return;
|
|
api(s._starred || s.starred ? 'unstar' : 'star', `&id=${s.id}`)
|
|
.then(() => { s._starred = !(s._starred || s.starred); s.starred = null; syncNpStar(); updateStarBtn(); })
|
|
.catch(e => toast('Fehler: ' + e.message));
|
|
}
|
|
|
|
// ─── QUEUE PANEL ──────────────────────────────────────────────────────────
|
|
|
|
let _renderedQueueKey = '';
|
|
|
|
export function renderQueue() {
|
|
const el = document.getElementById('queue-list');
|
|
if (!el) return;
|
|
const queueKey = S.queue.map(s => s.id).join(',');
|
|
|
|
if (queueKey === _renderedQueueKey && el.children.length === S.queue.length) {
|
|
el.querySelectorAll('.queue-item').forEach((item, i) => item.classList.toggle('active', i === S.qIdx));
|
|
el.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
|
|
return;
|
|
}
|
|
|
|
_renderedQueueKey = queueKey;
|
|
el.innerHTML = '';
|
|
if (!S.queue.length) { el.innerHTML = '<div class="empty-state" style="padding:40px 16px"><div class="icon">🎵</div><p>Leer</p></div>'; return; }
|
|
S.queue.forEach((s, i) => {
|
|
const item = document.createElement('div');
|
|
item.className = 'queue-item' + (i === S.qIdx ? ' active' : '');
|
|
const cv = coverUrl(s.coverArt, 128);
|
|
item.innerHTML = `<div class="qi-idx">${i+1}</div><div class="qi-art">${cv ? `<img src="${cv}">` : '♪'}</div><div class="qi-info"><div class="qi-title">${esc(dispTitle(s))}</div><div class="qi-artist">${esc(dispArtist(s))}</div></div>`;
|
|
item.onclick = () => { S.qIdx = i; playCurrent(); };
|
|
el.appendChild(item);
|
|
});
|
|
el.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
|
|
}
|
|
|
|
export function toggleQueue() {
|
|
S.queueOpen = !S.queueOpen;
|
|
document.getElementById('queue-panel').classList.toggle('open', S.queueOpen);
|
|
if(S.queueOpen) renderQueue();
|
|
_syncOverlayState();
|
|
}
|
|
|
|
// Called after showRomaji is toggled — re-renders all live player UI with new display mode.
|
|
export function refreshDisplayMode() {
|
|
_renderedQueueKey = ''; // force queue re-render
|
|
if (S.queueOpen) renderQueue();
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { updatePlayerUI(s, true); _syncNpDirect(s); }
|
|
}
|
|
|
|
// ─── DOWNLOAD ─────────────────────────────────────────────────────────────
|
|
|
|
export function dlSongLocal(s) {
|
|
const a = document.createElement('a');
|
|
a.href = downloadUrl(s.id);
|
|
a.download = `${s.artist||'Unknown'} - ${s.title}.${s.suffix||'mp3'}`;
|
|
document.body.appendChild(a); a.click(); document.body.removeChild(a);
|
|
toast(`⬇ ${s.title}`);
|
|
}
|
|
|
|
export function downloadCurrent() {
|
|
if(S.qIdx >= 0 && S.queue[S.qIdx]) dlSongLocal(S.queue[S.qIdx]);
|
|
}
|
|
|
|
// ─── PREVIEW ──────────────────────────────────────────────────────────────
|
|
|
|
export function playPreview(track) {
|
|
if(!track.previewUrl) { toast('Kein Preview verfügbar'); return; }
|
|
const wasPlaying = HAS_BRIDGE ? _nativePlaying : !S.audio.paused;
|
|
if(wasPlaying) {
|
|
if (HAS_BRIDGE) _nsBridge('pause');
|
|
else S.audio.pause();
|
|
}
|
|
S.previewCurrent = track;
|
|
S.previewCurrent._resumeMain = wasPlaying;
|
|
S.previewAudio.volume = S.audio.volume;
|
|
S.previewAudio.src = track.previewUrl;
|
|
S.previewAudio.play();
|
|
document.getElementById('preview-title').innerHTML = esc(track.trackName||'—') + '<span class="preview-badge">30s Preview</span>';
|
|
document.getElementById('preview-sub').textContent = (track.artistName||'') + (track.collectionName?' · '+track.collectionName:'');
|
|
const art = track.artworkUrl100 || track.artworkUrl60 || '';
|
|
document.getElementById('preview-art').innerHTML = art ? `<img src="${art}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art" style="font-size:16px">♪</div>';
|
|
document.getElementById('preview-bar').classList.add('visible');
|
|
document.getElementById('preview-fill').style.width = '0%';
|
|
}
|
|
|
|
export function stopPreview(resume) {
|
|
const shouldResume = resume !== false && S.previewCurrent?._resumeMain;
|
|
S.previewAudio.pause(); S.previewAudio.src = '';
|
|
document.getElementById('preview-bar').classList.remove('visible');
|
|
document.getElementById('preview-fill').style.width = '0%';
|
|
S.previewCurrent = null;
|
|
if (shouldResume) {
|
|
if (HAS_BRIDGE) _nsBridge('play');
|
|
else if (S.audio.src) S.audio.play();
|
|
}
|
|
}
|
|
|
|
export function updatePreviewProgress() {
|
|
if(!S.previewAudio.duration) return;
|
|
document.getElementById('preview-fill').style.width = (S.previewAudio.currentTime / S.previewAudio.duration * 100) + '%';
|
|
}
|
|
|
|
// ─── RESTORE LAST PLAYED ──────────────────────────────────────────────────
|
|
|
|
// ─── BACK-BUTTON / OVERLAY STATE SYNC ────────────────────────────────────
|
|
// Native back button: when JS has an overlay open, Android delegates the event
|
|
// to window.NSPlayer.handleBack() instead of minimising the app.
|
|
|
|
function _hasAnyOverlayOpen() {
|
|
if (S.npOpen || S.queueOpen) return true;
|
|
if (document.getElementById('np-sheet')?.classList.contains('open')) return true;
|
|
if (document.getElementById('ctx-menu')?.style.display === 'block') return true;
|
|
if (document.getElementById('sidebar')?.classList.contains('mobile-open')) return true;
|
|
return ['settings-modal','pl-modal','info-modal','dl-modal','edit-pl-modal','confirm-modal','notif-panel']
|
|
.some(id => document.getElementById(id)?.classList.contains('open'));
|
|
}
|
|
|
|
export function _syncOverlayState() {
|
|
if (!HAS_BRIDGE) return;
|
|
try { window.NSBridge.setOverlayState(_hasAnyOverlayOpen()); } catch {}
|
|
}
|
|
|
|
window.NSPlayer.handleBack = function() {
|
|
// Close overlays from topmost layer downward.
|
|
if (document.getElementById('np-sheet')?.classList.contains('open')) {
|
|
window.closeNpMenu?.(); _syncOverlayState(); return;
|
|
}
|
|
const ctxMenu = document.getElementById('ctx-menu');
|
|
if (ctxMenu?.style.display === 'block') {
|
|
ctxMenu.style.display = 'none'; ctxMenu.innerHTML = '';
|
|
_syncOverlayState(); return;
|
|
}
|
|
if (S.npOpen) {
|
|
window.closeNowPlaying?.(); _syncOverlayState(); return;
|
|
}
|
|
if (S.queueOpen) {
|
|
toggleQueue(); _syncOverlayState(); return;
|
|
}
|
|
// Generic modals
|
|
const modalMap = {
|
|
'settings-modal': 'closeSettings',
|
|
'pl-modal': 'closePlModal',
|
|
'info-modal': 'closeInfoModal',
|
|
'dl-modal': 'closeDlModal',
|
|
'edit-pl-modal': 'closeEditPlModal',
|
|
'confirm-modal': '_confirmCancel',
|
|
};
|
|
for (const [id, fn] of Object.entries(modalMap)) {
|
|
const el = document.getElementById(id);
|
|
if (el?.classList.contains('open')) {
|
|
if (window[fn]) window[fn](); else el.classList.remove('open');
|
|
_syncOverlayState(); return;
|
|
}
|
|
}
|
|
// Notif panel (generic fallback)
|
|
const notifPanel = document.getElementById('notif-panel');
|
|
if (notifPanel?.classList.contains('open')) {
|
|
notifPanel.classList.remove('open'); _syncOverlayState(); return;
|
|
}
|
|
// Sidebar
|
|
if (document.getElementById('sidebar')?.classList.contains('mobile-open')) {
|
|
window.closeSidebar?.(); _syncOverlayState(); return;
|
|
}
|
|
};
|
|
|
|
// MutationObserver keeps hasOpenOverlay in sync whenever the DOM changes class
|
|
// attributes (e.g. any overlay gains/loses the 'open' class).
|
|
if (HAS_BRIDGE) {
|
|
const _startOverlayObserver = () => {
|
|
if (!document.body) return;
|
|
new MutationObserver(_syncOverlayState).observe(document.body, {
|
|
attributes: true, attributeFilter: ['class'], subtree: true,
|
|
});
|
|
};
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', _startOverlayObserver);
|
|
} else {
|
|
_startOverlayObserver();
|
|
}
|
|
}
|
|
|
|
// Immediately sync JS track/play state with the native bridge snapshot.
|
|
// Called on app foreground so the UI is correct before any deferred evaluateJavascript callbacks fire.
|
|
export function reconcileNativeState() {
|
|
if (!HAS_BRIDGE) return;
|
|
try {
|
|
const snap = JSON.parse(window.NSBridge.getState() || '{}');
|
|
const snapId = String(snap.currentId || '');
|
|
if (snapId && snapId !== String(S.queue[S.qIdx]?.id || '')) {
|
|
const found = S.queue.findIndex(s => String(s.id) === snapId);
|
|
if (found >= 0) {
|
|
S.qIdx = found;
|
|
const s = S.queue[S.qIdx];
|
|
if (s) { updatePlayerUI(s, true); syncNowPlaying(); onNpSongChange(s.id); renderQueue(); }
|
|
}
|
|
}
|
|
if (typeof snap.isPlaying === 'boolean' && snap.isPlaying !== _nativePlaying) {
|
|
_nativePlaying = snap.isPlaying;
|
|
setPlayIcon(snap.isPlaying);
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
export function _restoreLastPlayed() {
|
|
try {
|
|
const saved = JSON.parse(localStorage.getItem('ns_last_played') || 'null');
|
|
if(!saved || !saved.song) return;
|
|
S.queue = saved.queue || [saved.song];
|
|
S.qIdx = saved.qIdx || 0;
|
|
const s = S.queue[S.qIdx];
|
|
if(!s) return;
|
|
document.getElementById('player-title').textContent = s.title || '—';
|
|
const artistParts = (s.artist || '').split(/\s*(?:\/|•|,)\s*/).filter(Boolean);
|
|
document.getElementById('player-artist-name').innerHTML = artistParts.length
|
|
? artistParts.map((name, i) => {
|
|
const aid = i === 0 ? (s.artistId || '') : '';
|
|
return `<span style="cursor:pointer" onclick="s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
|
|
}).join('<span style="color:var(--text3)"> • </span>')
|
|
: '—';
|
|
document.getElementById('player-album-name').textContent = s.album || '';
|
|
const art = document.getElementById('player-art');
|
|
const cv = coverUrl(s.coverArt, 256);
|
|
art.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
|
|
updateStarBtn();
|
|
document.title = `${s.title} — NovaSonic`;
|
|
if (HAS_BRIDGE) return; // native will sync state via NSPlayer.onReady
|
|
// Web path: prime the audio element so play button works immediately.
|
|
S.audio.src = streamUrl(s.id);
|
|
S.audio.load();
|
|
} catch {}
|
|
}
|