content, css: track banners preview

5 files changed, 48 insertions, 3 deletions

diff --git a/src/content/dependencies/generateAlbumBanner.js b/src/content/dependencies/generateAlbumBanner.js
index dce258de..b8faf7e6 100644
--- a/src/content/dependencies/generateAlbumBanner.js
+++ b/src/content/dependencies/generateAlbumBanner.js
@@ -5,7 +5,11 @@ export default {
     }
 
     return {
-      banner: relation('generateBanner'),
+      banner:
+        relation('generateBanner'),
+
+      colorAttribute:
+        relation('generateColorStyleAttribute', album.color),
     };
   },
 
@@ -20,7 +24,14 @@ export default {
     };
   },
 
-  generate(data, relations, {html, language}) {
+  slots: {
+    mode: {
+      validate: v => v.is('main', 'sub'),
+      default: 'main',
+    },
+  },
+
+  generate(data, relations, slots, {html, language}) {
     if (!relations.banner) {
       return html.blank();
     }
@@ -29,6 +40,13 @@ export default {
       path: data.path,
       dimensions: data.dimensions,
       alt: language.$('misc.alt.albumBanner'),
+
+      attributes: [
+        slots.mode === 'sub' && [
+          {class: ['dim', 'short']},
+          relations.colorAttribute.slot('context', 'banner'),
+        ],
+      ],
     });
   },
 };
diff --git a/src/content/dependencies/generateBanner.js b/src/content/dependencies/generateBanner.js
index 509b15c2..b6214cc0 100644
--- a/src/content/dependencies/generateBanner.js
+++ b/src/content/dependencies/generateBanner.js
@@ -11,10 +11,17 @@ export default {
     alt: {
       type: 'string',
     },
+
+    attributes: {
+      type: 'attributes',
+      mutable: false,
+    },
   },
 
   generate: (slots, {html, to}) =>
     html.tag('div', {id: 'banner'},
+      slots.attributes,
+
       html.tag('img',
         {src: to(...slots.path)},
 
diff --git a/src/content/dependencies/generateColorStyleAttribute.js b/src/content/dependencies/generateColorStyleAttribute.js
index 277ec434..10dd7810 100644
--- a/src/content/dependencies/generateColorStyleAttribute.js
+++ b/src/content/dependencies/generateColorStyleAttribute.js
@@ -18,6 +18,7 @@ export default {
       validate: v => v.is(
         'any-content',
         'image-box',
+        'banner',
         'primary-only'),
 
       default: 'any-content',
diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js
index 0865ed3e..843fa94c 100644
--- a/src/content/dependencies/generateColorStyleVariables.js
+++ b/src/content/dependencies/generateColorStyleVariables.js
@@ -10,6 +10,7 @@ export default {
         'image-box',
         'page-root',
         'image-box',
+        'banner',
         'primary-only'),
 
       default: 'any-content',
@@ -30,6 +31,7 @@ export default {
       dim,
       deep,
       deepGhost,
+      abyss,
       lightGhost,
       bg,
       bgBlack,
@@ -42,13 +44,14 @@ export default {
       `--dim-color: ${dim}`,
       `--deep-color: ${deep}`,
       `--deep-ghost-color: ${deepGhost}`,
+      `--abyss-color: ${abyss}`,
       `--light-ghost-color: ${lightGhost}`,
       `--bg-color: ${bg}`,
       `--bg-black-color: ${bgBlack}`,
       `--shadow-color: ${shadow}`,
     ];
 
-    let selectedDeclarations;
+    let selectedDeclarations = [];
 
     switch (slots.context) {
       case 'any-content':
@@ -76,6 +79,12 @@ export default {
           `--primary-color: ${primary}`,
         ];
         break;
+
+      case 'banner':
+        selectedDeclarations = [
+          `--abyss-color: ${abyss}`,
+        ];
+        break;
     }
 
     switch (slots.mode) {
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 77adff02..6280b07e 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -68,6 +68,11 @@ export default {
         ? relation('generateSingleArtworkColumn', track)
         : relation('generateTrackArtworkColumn', track)),
 
+    banner:
+      (track.album.hasBannerArt
+        ? relation('generateAlbumBanner', track.album)
+        : null),
+
     contentHeading:
       relation('generateContentHeading'),
 
@@ -425,6 +430,11 @@ export default {
                 showExtraLinks: false,
               })),
 
+        banner:
+          relations.banner
+            ?.slot('mode', data.firstTrackInSingle ? 'main' : 'sub') ??
+          null,
+
         secondaryNav:
           relations.secondaryNav
             .slot('mode', data.firstTrackInSingle ? 'album' : 'track'),