From feb7b10ec137d5b87811124f278cf2e3a4cdebe0 Mon Sep 17 00:00:00 2001
From: Dazly Gonsalves <dazlygonsalves@gmail.com>
Date: Wed, 22 Oct 2025 20:21:15 +0530
Subject: [PATCH] feat(player): display all artists related to the track

---
 js/app.js    |  8 ++++++--
 js/player.js |  6 ++++--
 js/ui.js     |  9 +++++----
 js/utils.js  | 10 +++++++++-
 4 files changed, 24 insertions(+), 9 deletions(-)

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 `
                 <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>
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 = '<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>
@@ -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;
+}