feat(player): display all artists related to the track

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 `
                 <div class="queue-track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}" data-track-id="${track.id}" draggable="true">
@@ -749,7 +753,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                              class="track-item-cover" loading="lazy">
                         <div class="track-item-details">
                             <div class="title">${track.title}</div>
-                            <div class="artist">${track.artist?.name || 'Unknown'}</div>
+                            <div class="artist">${trackArtists}</div>
                         </div>
                     </div>
                     <div class="track-item-duration">${formatTime(track.duration)}</div>

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') {
@@ -128,10 +128,12 @@ 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();

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 = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
     const trackNumberHTML = `<div class="track-number">${showCover ? playIconSmall : index + 1}</div>`;
     const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
+    const trackArtists = getTrackArtists(track);
     
     return `
         <div class="track-item" data-track-id="${track.id}">
@@ -37,7 +38,7 @@ export class UIRenderer {
                         ${track.title}
                         ${explicitBadge}
                     </div>
-                    <div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div>
+                    <div class="artist">${trackArtists}</div>
                 </div>
             </div>
             <div class="track-item-duration">${formatTime(track.duration)}</div>

js/utils.js

@@ -156,3 +156,11 @@ export const debounce = (func, wait) => {
         timeout = setTimeout(later, wait);
     };
 };
+
+export const getTrackArtists = (track = {}, { fallback = 'Unknown Artist' } = {}) => {
+  if (track?.artists?.length) {
+    return track.artists.map(artist => artist?.name).join(', ');
+  }
+
+  return fallback;
+}