cover art in info card

3 files changed, 39 insertions, 2 deletions

diff --git a/static/client.js b/static/client.js
index aae09193..60bf62b4 100644
--- a/static/client.js
+++ b/static/client.js
@@ -78,7 +78,7 @@ function getFlashListAndIndex() {
 
 // TODO: This should also use urlSpec.
 function fetchData(type, directory) {
-    return fetch(rebase(`data/${type}/${directory}/data.json`, 'rebaseData'))
+    return fetch(rebase(`${type}/${directory}/data.json`, 'rebaseData'))
         .then(res => res.json());
 }
 
@@ -225,6 +225,9 @@ const infoCard = (() => {
 
             const albumLink = container.querySelector('.info-card-album a');
             link(albumLink, 'album', data.links.album);
+
+            const img = container.querySelector('.info-card-art');
+            img.src = rebase(data.cover.path, 'rebaseMedia');
         });
     }
 
diff --git a/static/site.css b/static/site.css
index e13ec106..59f13c5c 100644
--- a/static/site.css
+++ b/static/site.css
@@ -752,7 +752,9 @@ li > ul {
 }
 
 .info-card {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: black;
+    color: white;
+
     border: 1px dotted var(--primary-color);
     border-radius: 3px;
     box-shadow: 0 5px 5px black;
@@ -773,6 +775,24 @@ li > ul {
     }
 }
 
+.info-card-art-container {
+    float: right;
+
+    width: 40%;
+    margin: 5px;
+    font-size: 0.8em;
+}
+
+.info-card-art-container .image-container {
+    padding: 2px;
+}
+
+.info-card-art {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
 .info-card-name {
     font-size: 1em;
     border-bottom: 1px dotted;
diff --git a/upd8.js b/upd8.js
index d34db5b6..cfddf581 100755
--- a/upd8.js
+++ b/upd8.js
@@ -2037,6 +2037,7 @@ function img({
     thumb: thumbKey = '',
     reveal = '',
     id = '',
+    class: className = '',
     width = '',
     height = '',
     link = false,
@@ -2051,6 +2052,7 @@ function img({
 
     const imgAttributes = attributes({
         id: link ? '' : id,
+        class: className,
         alt,
         width,
         height
@@ -2396,6 +2398,13 @@ writePage.html = (pageFn, {paths, strings, to}) => {
     const infoCardHTML = fixWS`
         <div id="info-card-container">
             <div class="info-card">
+                <div class="info-card-art-container">
+                    ${img({
+                        class: 'info-card-art',
+                        src: '',
+                        square: true
+                    })}
+                </div>
                 <h1 class="info-card-name"><a></a></h1>
                 <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p>
             </div>
@@ -3091,6 +3100,11 @@ function writeTrackPage(track) {
             date: track.date,
             duration: track.duration,
             color: track.color,
+            cover: {
+                path: getTrackCover(track, {
+                    to: urls.from('media.root').to
+                })
+            },
             links: {
                 artists: serializeContribs(track.artists),
                 contributors: serializeContribs(track.contributors),