diff --git a/js/app.js b/js/app.js
index 678bf7b..2e548b5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -7,7 +7,8 @@ import {
REPEAT_MODE, SVG_PLAY, SVG_PAUSE,
SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore,
buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce,
- sanitizeForFilename
+ sanitizeForFilename,
+ getTrackArtists
} from './utils.js';
const downloadTasks = new Map();
@@ -735,6 +736,9 @@ document.addEventListener('DOMContentLoaded', async () => {
const html = currentQueue.map((track, index) => {
const isPlaying = index === player.currentQueueIndex;
+ const trackArtists = getTrackArtists(track, {
+ fallback: "Unknown"
+ });
return `
@@ -749,7 +753,7 @@ document.addEventListener('DOMContentLoaded', async () => {
class="track-item-cover" loading="lazy">
${track.title}
-
${track.artist?.name || 'Unknown'}
+
${trackArtists}
${formatTime(track.duration)}
diff --git a/js/player.js b/js/player.js
index d2210cb..39e548f 100644
--- a/js/player.js
+++ b/js/player.js
@@ -1,5 +1,5 @@
//player.js
-import { REPEAT_MODE, formatTime } from './utils.js';
+import { REPEAT_MODE, formatTime, getTrackArtists } from './utils.js';
export class Player {
constructor(audioElement, api, quality = 'LOSSLESS') {
@@ -127,11 +127,13 @@ async playTrackFromQueue() {
const track = currentQueue[this.currentQueueIndex];
this.currentTrack = 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 .artist').textContent = track.artist?.name || 'Unknown Artist';
+ document.querySelector('.now-playing-bar .artist').textContent = trackArtists;
document.title = `${track.title} • ${track.artist?.name || 'Unknown'}`;
this.updatePlayingTrackIndicator();
diff --git a/js/ui.js b/js/ui.js
index c68ba5c..af82d88 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,5 +1,5 @@
//ui.js
-import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent } from './utils.js';
+import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent, getTrackArtists } from './utils.js';
import { recentActivityManager } from './storage.js';
export class UIRenderer {
@@ -26,6 +26,7 @@ export class UIRenderer {
const playIconSmall = '';
const trackNumberHTML = `${showCover ? playIconSmall : index + 1}
`;
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
+ const trackArtists = getTrackArtists(track);
return `
@@ -37,7 +38,7 @@ export class UIRenderer {
${track.title}
${explicitBadge}
- ${track.artist?.name ?? 'Unknown Artist'}
+ ${trackArtists}
${formatTime(track.duration)}
@@ -114,7 +115,7 @@ export class UIRenderer {
renderListWithTracks(container, tracks, showCover) {
const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div');
-
+
tempDiv.innerHTML = tracks.map((track, i) =>
this.createTrackItemHTML(track, i, showCover)
).join('');
@@ -418,4 +419,4 @@ async renderHomePage() {
}
});
}
-}
\ No newline at end of file
+}
diff --git a/js/utils.js b/js/utils.js
index 05754a2..8ebdcc5 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -155,4 +155,12 @@ export const debounce = (func, wait) => {
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
-};
\ No newline at end of file
+};
+
+export const getTrackArtists = (track = {}, { fallback = 'Unknown Artist' } = {}) => {
+ if (track?.artists?.length) {
+ return track.artists.map(artist => artist?.name).join(', ');
+ }
+
+ return fallback;
+}