basic artist list in info cards

2 files changed, 24 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')
diff --git a/upd8.js b/upd8.js
index abf4d17e..36873665 100755
--- a/upd8.js
+++ b/upd8.js
@@ -2443,6 +2443,7 @@ writePage.html = (pageFn, {paths, strings, to}) => {
                     </div>
                     <h1 class="info-card-name"><a></a></h1>
                     <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p>
+                    <p class="info-card-artists">${strings('releaseInfo.by', {artists: '<span></span>'})}</p>
                 </div>
             </div>
         </div>