basic artist list in info cards

1 files changed, 23 insertions, 0 deletions

diff --git a/static/client.js b/static/client.js
index 96d227f1..6883b83b 100644
--- a/static/client.js
+++ b/static/client.js
@@ -223,6 +223,17 @@ function link(a, type, {name, directory, color}) {
     a.href = getLinkHref(type, directory);
 }
 
+function joinElements(type, elements) {
+    // We can't use the Intl APIs with elements, 8ecuase it only oper8tes on
+    // strings. So instead, we'll pass the element's outer HTML's (which means
+    // the entire HTML of that element).
+    //
+    // That does mean this function returns a string, so always 8e sure to
+    // set innerHTML when using it (not appendChild).
+
+    return list[type](elements.map(el => el.outerHTML));
+}
+
 const infoCard = (() => {
     const container = document.getElementById('info-card-container');
 
@@ -257,12 +268,24 @@ const infoCard = (() => {
                 container.classList.add('show');
             }, 50);
 
+            // 8asic details.
+
             const nameLink = container.querySelector('.info-card-name a');
             link(nameLink, 'track', data);
 
             const albumLink = container.querySelector('.info-card-album a');
             link(albumLink, 'album', data.links.album);
 
+            const artistSpan = container.querySelector('.info-card-artists span');
+            artistSpan.innerHTML = joinElements('conjunction', data.links.artists.map(({ who: artist }) => {
+                const a = document.createElement('a');
+                a.href = getLinkHref('artist', artist.directory);
+                a.innerText = artist.name;
+                return a;
+            }));
+
+            // Cover art.
+
             const [ containerNoReveal, containerReveal ] = [
                 container.querySelector('.info-card-art-container.no-reveal'),
                 container.querySelector('.info-card-art-container.reveal')