content: generateAlbumStyleRules: wallpaper parts

2 files changed, 42 insertions, 6 deletions

diff --git a/src/content/dependencies/generateAlbumStyleRules.js b/src/content/dependencies/generateAlbumStyleRules.js
index c5acf374..6bfcc62e 100644
--- a/src/content/dependencies/generateAlbumStyleRules.js
+++ b/src/content/dependencies/generateAlbumStyleRules.js
@@ -1,4 +1,4 @@
-import {empty} from '#sugar';
+import {empty, stitchArrays} from '#sugar';
 
 export default {
   extraDependencies: ['to'],
@@ -10,8 +10,22 @@ export default {
     data.hasBanner = !empty(album.bannerArtistContribs);
 
     if (data.hasWallpaper) {
-      data.wallpaperPath = ['media.albumWallpaper', album.directory, album.wallpaperFileExtension];
-      data.wallpaperStyle = album.wallpaperStyle;
+      if (!empty(album.wallpaperParts)) {
+        data.wallpaperMode = 'parts';
+
+        data.wallpaperPaths =
+          album.wallpaperParts.map(part =>
+            (part.asset
+              ? ['media.albumWallpaperPart', album.directory, part.asset]
+              : null));
+
+        data.wallpaperStyles =
+          album.wallpaperParts.map(part => part.style);
+      } else {
+        data.wallpaperMode = 'one';
+        data.wallpaperPath = ['media.albumWallpaper', album.directory, album.wallpaperFileExtension];
+        data.wallpaperStyle = album.wallpaperStyle;
+      }
     }
 
     if (data.hasBanner) {
@@ -42,13 +56,34 @@ export default {
         ? [`${selector} {`, indent(parts), `}`]
         : []);
 
-    const wallpaperRule =
-      data.hasWallpaper &&
+    const oneWallpaperRule =
+      data.wallpaperMode === 'one' &&
         rule(`body::before`, [
           `background-image: url("${to(...data.wallpaperPath)}");`,
           data.wallpaperStyle,
         ]);
 
+    const wallpaperPartRules =
+      data.wallpaperMode === 'parts' &&
+        stitchArrays({
+          path: data.wallpaperPaths,
+          style: data.wallpaperStyles,
+        }).map(({path, style}, index) =>
+            rule(`.wallpaper-part:nth-child(${index + 1})`, [
+              path && `background-image: url("${to(...path)}");`,
+              style,
+            ]));
+
+    const nukeBasicWallpaperRule =
+      data.wallpaperMode === 'parts' &&
+        rule(`body::before`, ['display: none']);
+
+    const wallpaperRules = [
+      oneWallpaperRule,
+      ...wallpaperPartRules || [],
+      nukeBasicWallpaperRule,
+    ];
+
     const bannerRule =
       data.hasBanner &&
         rule(`#banner img`, [
@@ -64,7 +99,7 @@ export default {
       ]);
 
     return (
-      [wallpaperRule, bannerRule, dataRule]
+      [...wallpaperRules, bannerRule, dataRule]
         .filter(Boolean)
         .flat()
         .join('\n'));
diff --git a/src/url-spec.js b/src/url-spec.js
index 4a57fa0f..6ca75e7d 100644
--- a/src/url-spec.js
+++ b/src/url-spec.js
@@ -114,6 +114,7 @@ const urlSpec = {
       albumBanner: 'album-art/<>/banner.<>',
       albumCover: 'album-art/<>/cover.<>',
       albumWallpaper: 'album-art/<>/bg.<>',
+      albumWallpaperPart: 'album-art/<>/<>',
 
       artistAvatar: 'artist-avatar/<>.<>',