From bd7e3fea3371a43d608832f13805f3a0967cf42b Mon Sep 17 00:00:00 2001 From: Eduard Prigoana Date: Wed, 22 Oct 2025 18:58:36 +0300 Subject: [PATCH] fix. --- js/app.js | 13 ++++++++----- js/player.js | 18 ++++++++++-------- js/ui.js | 5 +++-- js/utils.js | 6 +++++- 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/js/app.js b/js/app.js index 769db6d..428f63f 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,4 @@ +//app.js import { LosslessAPI } from './api.js'; import { apiSettings, themeManager, lastFMStorage } from './storage.js'; import { UIRenderer } from './ui.js'; @@ -8,7 +9,8 @@ import { SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore, buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce, sanitizeForFilename, - getTrackArtists + getTrackArtists, + getTrackTitle } from './utils.js'; const downloadTasks = new Map(); @@ -39,13 +41,13 @@ function addDownloadTask(trackId, track, filename, api) { const taskEl = document.createElement('div'); taskEl.className = 'download-task'; taskEl.dataset.trackId = trackId; - + const trackTitle = getTrackTitle(track); taskEl.innerHTML = `
-
${track.title}
+
${trackTitle}
${track.artist?.name || 'Unknown'}
@@ -186,7 +188,7 @@ async function downloadAlbumAsZip(album, tracks, api, quality) { const track = tracks[i]; const filename = buildTrackFilename(track, quality); - updateBulkDownloadProgress(notification, i, tracks.length, track.title); + updateBulkDownloadProgress(notification, i, tracks.length, trackTitle); const blob = await downloadTrackBlob(track, quality, api); zip.file(`${folderName}/${filename}`, blob); @@ -779,6 +781,7 @@ document.addEventListener('DOMContentLoaded', async () => { const html = currentQueue.map((track, index) => { const isPlaying = index === player.currentQueueIndex; + const trackTitle = getTrackTitle(track); const trackArtists = getTrackArtists(track, { fallback: "Unknown" }); @@ -795,7 +798,7 @@ document.addEventListener('DOMContentLoaded', async () => {
-
${track.title}
+
${trackTitle}
${trackArtists}
diff --git a/js/player.js b/js/player.js index ba43204..6045879 100644 --- a/js/player.js +++ b/js/player.js @@ -1,5 +1,5 @@ //player.js -import { REPEAT_MODE, formatTime, getTrackArtists } from './utils.js'; +import { REPEAT_MODE, formatTime, getTrackArtists, getTrackTitle} from './utils.js'; export class Player { constructor(audioElement, api, quality = 'LOSSLESS') { @@ -99,7 +99,7 @@ export class Player { for (const { track, index } of tracksToPreload) { if (this.preloadCache.has(track.id)) continue; - + const trackTitle = getTrackTitle(track); try { const streamUrl = await this.api.getStreamUrl(track.id, this.quality); @@ -113,7 +113,7 @@ export class Player { } catch (error) { if (error.name !== 'AbortError') { - console.debug('Failed to get stream URL for preload:', track.title); + console.debug('Failed to get stream URL for preload:', trackTitle); } } } @@ -128,13 +128,14 @@ async playTrackFromQueue() { const track = currentQueue[this.currentQueueIndex]; this.currentTrack = track; + const trackTitle = getTrackTitle(track); const trackArtists = getTrackArtists(track); document.querySelector('.now-playing-bar .cover').src = this.api.getCoverUrl(track.album?.cover, '1280'); - document.querySelector('.now-playing-bar .title').textContent = track.title; + document.querySelector('.now-playing-bar .title').textContent = trackTitle; document.querySelector('.now-playing-bar .artist').textContent = trackArtists; - document.title = `${track.title} • ${track.artist?.name || 'Unknown'}`; + document.title = `${trackTitle} • ${track.artist?.name || 'Unknown'}`; this.updatePlayingTrackIndicator(); this.updateMediaSession(track); @@ -183,8 +184,8 @@ async playTrackFromQueue() { this.setupCrossfadeListener(); } catch (error) { - console.error(`Could not play track: ${track.title}`, error); - document.querySelector('.now-playing-bar .title').textContent = `Error: ${track.title}`; + console.error(`Could not play track: ${trackTitle}`, error); + document.querySelector('.now-playing-bar .title').textContent = `Error: ${trackTitle}`; document.querySelector('.now-playing-bar .artist').textContent = error.message || 'Could not load track'; } } @@ -412,6 +413,7 @@ async playTrackFromQueue() { const artwork = []; const sizes = ['1280']; const coverId = track.album?.cover; + const trackTitle = getTrackTitle(track); if (coverId) { sizes.forEach(size => { @@ -424,7 +426,7 @@ async playTrackFromQueue() { } navigator.mediaSession.metadata = new MediaMetadata({ - title: track.title || 'Unknown Title', + title: trackTitle || 'Unknown Title', artist: track.artist?.name || 'Unknown Artist', album: track.album?.title || 'Unknown Album', artwork: artwork.length > 0 ? artwork : undefined diff --git a/js/ui.js b/js/ui.js index 2aab374..39f74ba 100644 --- a/js/ui.js +++ b/js/ui.js @@ -1,5 +1,5 @@ //ui.js -import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent, getTrackArtists } from './utils.js'; +import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent, getTrackArtists, getTrackTitle } from './utils.js'; import { recentActivityManager } from './storage.js'; export class UIRenderer { @@ -27,6 +27,7 @@ export class UIRenderer { const trackNumberHTML = `
${showCover ? playIconSmall : index + 1}
`; const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : ''; const trackArtists = getTrackArtists(track); + const trackTitle = getTrackTitle(track); return `
@@ -35,7 +36,7 @@ export class UIRenderer { ${showCover ? `Track Cover` : ''}
- ${track.title} + ${trackTitle} ${explicitBadge}
${trackArtists}
diff --git a/js/utils.js b/js/utils.js index 6b4095e..f1faab8 100644 --- a/js/utils.js +++ b/js/utils.js @@ -70,7 +70,7 @@ export const buildTrackFilename = (track, quality) => { const artistName = sanitizeForFilename(track.artist?.name); const albumTitle = sanitizeForFilename(track.album?.title); - const trackTitle = sanitizeForFilename(track.title); + const trackTitle = sanitizeForFilename(getTrackTitle(track)); return `${artistName} - ${albumTitle} - ${padded} ${trackTitle}.${extension}`; }; @@ -156,6 +156,10 @@ export const debounce = (func, wait) => { timeout = setTimeout(later, wait); }; }; +export const getTrackTitle = (track, { fallback = 'Unknown Title' } = {}) => { + if (!track?.title) return fallback; + return track?.version ? `${track.title} (${track.version})` : track.title; +}; export const getTrackArtists = (track = {}, { fallback = 'Unknown Artist' } = {}) => { if (track?.artists?.length) {