info card thumbnail & image link/color niceness

3 files changed, 71 insertions, 52 deletions

diff --git a/common/common.js b/common/common.js
index 56ee7b35..165e0f6d 100644
--- a/common/common.js
+++ b/common/common.js
@@ -117,7 +117,26 @@ const C = {
         (artist.flashes ? artist.flashes.asContributor.length : 0)
     ),
 
-    getArtistCommentary: (artist, {justEverythingMan}) => justEverythingMan.filter(thing => thing.commentary && thing.commentary.replace(/<\/?b>/g, '').includes('<i>' + artist.name + ':</i>'))
+    getArtistCommentary: (artist, {justEverythingMan}) => justEverythingMan.filter(thing => thing.commentary && thing.commentary.replace(/<\/?b>/g, '').includes('<i>' + artist.name + ':</i>')),
+
+    // Graciously stolen from https://stackoverflow.com/a/54071699! ::::)
+    // in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
+    rgb2hsl: (r,g,b) => {
+        let a=Math.max(r,g,b), n=a-Math.min(r,g,b), f=(1-Math.abs(a+a-n-1));
+        let h= n && ((a==r) ? (g-b)/n : ((a==g) ? 2+(b-r)/n : 4+(r-g)/n));
+        return [60*(h<0?h+6:h), f ? n/f : 0, (a+a-n)/2];
+    },
+
+    getColors: primary => {
+        const [ r, g, b ] = primary.slice(1)
+            .match(/[0-9a-fA-F]{2,2}/g)
+            .slice(0, 3)
+            .map(val => parseInt(val, 16) / 255);
+        const [ h, s, l ] = C.rgb2hsl(r, g, b);
+        const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`;
+
+        return {primary, dim};
+    }
 };
 
 if (typeof module === 'object') {
diff --git a/static/client.js b/static/client.js
index 60bf62b4..a4fb8243 100644
--- a/static/client.js
+++ b/static/client.js
@@ -177,11 +177,16 @@ const HIDE_HOVER_DELAY = 250;
 let fastHover = false;
 let endFastHoverTimeout = null;
 
-function link(a, type, {name, directory, color}) {
+function colorLink(a, color) {
     if (color) {
-        a.style.setProperty('--primary-color', color);
+        const { primary, dim } = C.getColors(color);
+        a.style.setProperty('--primary-color', primary);
+        a.style.setProperty('--dim-color', dim);
     }
+}
 
+function link(a, type, {name, directory, color}) {
+    colorLink(a, color);
     a.innerText = name
     a.href = getLinkHref(type, directory);
 }
@@ -227,7 +232,11 @@ const infoCard = (() => {
             link(albumLink, 'album', data.links.album);
 
             const img = container.querySelector('.info-card-art');
-            img.src = rebase(data.cover.path, 'rebaseMedia');
+            img.src = rebase(data.cover.paths.small, 'rebaseMedia');
+
+            const imgLink = container.querySelector('.info-card-art-container a');
+            colorLink(imgLink, data.color);
+            imgLink.href = rebase(data.cover.paths.original, 'rebaseMedia');
         });
     }
 
diff --git a/upd8.js b/upd8.js
index 70fc89e7..db6f04ce 100755
--- a/upd8.js
+++ b/upd8.js
@@ -2103,6 +2103,14 @@ function img({
     }
 }
 
+function serializeImagePaths(original) {
+    return {
+        original,
+        medium: thumb.medium(original),
+        small: thumb.small(original)
+    };
+}
+
 function serializeLink(thing) {
     return Object.fromEntries([
         ['name', thing.name],
@@ -2403,6 +2411,7 @@ writePage.html = (pageFn, {paths, strings, to}) => {
                         ${img({
                             class: 'info-card-art',
                             src: '',
+                            link: true,
                             square: true
                         })}
                     </div>
@@ -3096,26 +3105,30 @@ function writeTrackPage(track) {
     const data = {
         type: 'data',
         path: ['track', track.directory],
-        data: () => ({
-            name: track.name,
-            directory: track.directory,
-            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),
-                album: serializeLink(track.album),
-                groups: track.album.groups.map(serializeLink),
-                references: track.references.map(serializeLink),
-                referencedBy: track.referencedBy.map(serializeLink)
-            }
-        })
+        data: () => {
+            const coverPath = getTrackCover(track, {
+                to: urls.from('media.root').to
+            });
+
+            return {
+                name: track.name,
+                directory: track.directory,
+                date: track.date,
+                duration: track.duration,
+                color: track.color,
+                cover: {
+                    paths: serializeImagePaths(coverPath)
+                },
+                links: {
+                    artists: serializeContribs(track.artists),
+                    contributors: serializeContribs(track.contributors),
+                    album: serializeLink(track.album),
+                    groups: track.album.groups.map(serializeLink),
+                    references: track.references.map(serializeLink),
+                    referencedBy: track.referencedBy.map(serializeLink)
+                }
+            };
+        }
     };
 
     // const page = ({strings, writePage}) => writePage('track', track.directory, ({to}) => ({
@@ -4932,39 +4945,17 @@ function getArtistString(artists, {strings, to, showIcons = false, showContrib =
     }));
 }
 
-// Graciously stolen from https://stackoverflow.com/a/54071699! ::::)
-// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
-function rgb2hsl(r,g,b) {
-    let a=Math.max(r,g,b), n=a-Math.min(r,g,b), f=(1-Math.abs(a+a-n-1));
-    let h= n && ((a==r) ? (g-b)/n : ((a==g) ? 2+(b-r)/n : 4+(r-g)/n));
-    return [60*(h<0?h+6:h), f ? n/f : 0, (a+a-n)/2];
-}
-
-function getColorVariables(color) {
-    if (!color) {
-        color = wikiInfo.color;
-    }
-
-    const [ r, g, b ] = color.slice(1)
-        .match(/[0-9a-fA-F]{2,2}/g)
-        .slice(0, 3)
-        .map(val => parseInt(val, 16) / 255);
-    const [ h, s, l ] = rgb2hsl(r, g, b);
-    const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`;
-
-    return [
-        `--primary-color: ${color}`,
-        `--dim-color: ${dim}`
-    ];
-}
-
 function getLinkThemeString(thing) {
-    return getColorVariables(thing.color).join('; ');
+    const { primary, dim } = C.getColors(thing.color || wikiInfo.color);
+    return `--primary-color: ${primary}; --dim-color: ${dim}`;
 }
 
 function getThemeString(thing, additionalVariables = []) {
+    const { primary, dim } = C.getColors(thing.color || wikiInfo.color);
+
     const variables = [
-        ...getColorVariables(thing.color),
+        `--primary-color: ${primary}`,
+        `--dim-color: ${dim}`,
         ...additionalVariables
     ].filter(Boolean);