content: generateAlbumArtInfoBox: wiki file links preview

3 files changed, 116 insertions, 21 deletions

diff --git a/src/content/dependencies/generateAlbumArtInfoBox.js b/src/content/dependencies/generateAlbumArtInfoBox.js
index 5491192a..a3b4c02d 100644
--- a/src/content/dependencies/generateAlbumArtInfoBox.js
+++ b/src/content/dependencies/generateAlbumArtInfoBox.js
@@ -1,3 +1,7 @@
+import {basename} from 'node:path';
+
+import {empty} from '#sugar';
+
 export default {
   relations: (relation, album) => ({
     wallpaperArtistContributionsLine:
@@ -11,26 +15,100 @@ export default {
         ? relation('generateReleaseInfoContributionsLine',
             album.bannerArtwork.artistContribs)
         : null),
+
+    linkTemplate:
+      relation('linkTemplate'),
   }),
 
-  generate: (relations, {html, language}) =>
-    language.encapsulate('releaseInfo', capsule =>
-      html.tag('div', {class: 'album-art-info'},
-        {[html.onlyIfContent]: true},
-
-        html.tag('p',
-          {[html.onlyIfContent]: true},
-          {[html.joinChildren]: html.tag('br')},
-
-          [
-            relations.wallpaperArtistContributionsLine?.slots({
-              stringKey: capsule + '.wallpaperArtBy',
-              chronologyKind: 'wallpaperArt',
-            }),
-
-            relations.bannerArtistContributionsLine?.slots({
-              stringKey: capsule + '.bannerArtBy',
-              chronologyKind: 'bannerArt',
-            }),
-          ]))),
+  data: (album) => ({
+    wallpaperImagePath:
+      (album.wallpaperArtwork && empty(album.wallpaperParts)
+        ? album.wallpaperArtwork.path
+        : null),
+
+    wallpaperPartPaths:
+      album.wallpaperParts
+        .filter(part => part.asset)
+        .map(part => ['media.albumWallpaperPart', album.directory, part.asset]),
+
+    bannerImagePath:
+      (album.bannerArtwork
+        ? album.bannerArtwork.path
+        : null),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    html.tag('div', {class: 'album-art-info'},
+      {[html.onlyIfContent]: true},
+      {[html.joinChildren]: html.tag('hr', {class: 'cute'})},
+
+      [
+        language.encapsulate('releaseInfo', capsule =>
+          html.tag('p',
+            {[html.onlyIfContent]: true},
+            {[html.joinChildren]: html.tag('br')},
+
+            [
+              relations.wallpaperArtistContributionsLine?.slots({
+                stringKey: capsule + '.wallpaperArtBy',
+                chronologyKind: 'wallpaperArt',
+              }),
+
+              relations.bannerArtistContributionsLine?.slots({
+                stringKey: capsule + '.bannerArtBy',
+                chronologyKind: 'bannerArt',
+              }),
+            ])),
+
+        language.encapsulate('misc.downloadLayoutMedia', downloadCapsule =>
+          html.tag('p',
+            {[html.onlyIfContent]: true},
+            {[html.joinChildren]: html.tag('br')},
+
+            [
+              language.encapsulate(downloadCapsule, workingCapsule => {
+                const workingOptions = {};
+
+                let any = false;
+
+                if (data.wallpaperImagePath) {
+                  any = true;
+                  workingCapsule += '.withWallpaper';
+                  workingOptions.wallpaper =
+                    relations.linkTemplate.clone().slots({
+                      path: data.wallpaperImagePath,
+                      content: language.$(downloadCapsule, 'wallpaper'),
+                    });
+                }
+
+                if (data.bannerImagePath) {
+                  any = true;
+                  workingCapsule += '.withBanner';
+                  workingOptions.banner =
+                    relations.linkTemplate.clone().slots({
+                      path: data.bannerImagePath,
+                      content: language.$(downloadCapsule, 'banner'),
+                    });
+                }
+
+                if (any) {
+                  return language.$(workingCapsule, workingOptions);
+                } else {
+                  return html.blank();
+                }
+              }),
+
+              language.$(downloadCapsule, 'withWallpaperParts', {
+                [language.onlyIfOptions]: ['parts'],
+
+                parts:
+                  language.formatUnitList(
+                    data.wallpaperPartPaths.map(path =>
+                      relations.linkTemplate.clone().slots({
+                        path,
+                        content: language.sanitize(basename(path.at(-1))),
+                      }))),
+              }),
+            ])),
+      ]),
 };
diff --git a/src/static/css/features.css b/src/static/css/features.css
index c811c753..f2b4fa04 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -566,7 +566,8 @@
   }
 
   #artwork-column .album-art-info {
-    margin: 10px min(15px, 1vw) 15px;
+    margin: 10px min(15px, 1vw) 18px;
+    z-index: 2;
   }
 
   #artwork-column .cover-artwork:not(:first-child),
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index ed8f236f..9868745c 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -639,6 +639,22 @@ misc:
     cue: "Crediting sources"
     sticky: "Crediting sources:"
 
+  downloadLayoutMedia:
+    withWallpaper: >-
+      Wiki files: {WALLPAPER}
+
+    withBanner: >-
+      Wiki files: {BANNER}
+
+    withWallpaper.withBanner: >-
+      Wiki files: {WALLPAPER}, {BANNER}
+
+    withWallpaperParts: >-
+      Wallpaper: {PARTS}
+
+    wallpaper: "Wallpaper"
+    banner: "Banner"
+
   # external:
   #   Links which will generally bring you somewhere off of the wiki.
   #   The list of sites is hard-coded into the wiki software, so it