2 files changed, 158 insertions, 0 deletions
diff --git a/src/content/dependencies/generateAlbumGalleryInfoLine.js b/src/content/dependencies/generateAlbumGalleryInfoLine.js
new file mode 100644
index 00000000..d4bd4d75
--- /dev/null
+++ b/src/content/dependencies/generateAlbumGalleryInfoLine.js
@@ -0,0 +1,38 @@
+import {getTotalDuration} from '../../util/wiki-data.js';
+
+export default {
+  extraDependencies: ['html', 'language'],
+
+  data(album) {
+    return {
+      name: album.name,
+      date: album.date,
+      duration: getTotalDuration(album.tracks),
+      numTracks: album.tracks.length,
+    };
+  },
+
+  generate(data, {html, language}) {
+    const parts = ['albumGalleryPage.infoLine'];
+    const options = {};
+
+    options.tracks =
+      html.tag('b',
+        language.countTracks(data.numTracks, {unit: true}));
+
+    options.duration =
+      html.tag('b',
+        language.formatDuration(data.duration, {unit: true}));
+
+    if (data.date) {
+      parts.push('withDate');
+      options.date =
+        html.tag('b',
+          language.formatDate(data.date));
+    }
+
+    return (
+      html.tag('p', {class: 'quick-info'},
+        language.formatString(parts.join('.'), options)));
+  },
+};
diff --git a/src/content/dependencies/generateAlbumGalleryPage.js b/src/content/dependencies/generateAlbumGalleryPage.js
new file mode 100644
index 00000000..354c8401
--- /dev/null
+++ b/src/content/dependencies/generateAlbumGalleryPage.js
@@ -0,0 +1,120 @@
+export default {
+  contentDependencies: [
+    'generateAlbumGalleryInfoLine',
+    'generateAlbumNavAccent',
+    'generateAlbumStyleRules',
+    'generateColorStyleRules',
+    'generateCoverGrid',
+    'generatePageLayout',
+    'image',
+    'linkAlbum',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations(relation, album) {
+    const relations = {};
+
+    relations.layout =
+      relation('generatePageLayout');
+
+    relations.albumStyleRules =
+      relation('generateAlbumStyleRules', album);
+
+    relations.colorStyleRules =
+      relation('generateColorStyleRules', album.color);
+
+    relations.albumLink =
+      relation('linkAlbum', album);
+
+    relations.albumNavAccent =
+      relation('generateAlbumNavAccent', album, null);
+
+    relations.infoLine =
+      relation('generateAlbumGalleryInfoLine', album);
+
+    relations.coverGrid =
+      relation('generateCoverGrid');
+
+    relations.links =
+      album.tracks.map(track =>
+        relation('linkTrack', track));
+
+    relations.images =
+      album.tracks.map(track =>
+        (track.hasUniqueCoverArt
+          ? relation('image', track.artTags)
+          : relation('image')));
+
+    return relations;
+  },
+
+  data(album) {
+    const data = {};
+
+    data.name = album.name;
+
+    data.names =
+      album.tracks.map(track => track.name);
+
+    data.paths =
+      album.tracks.map(track =>
+        (track.hasUniqueCoverArt
+          ? ['media.trackCover', track.album.directory, track.directory, track.coverArtFileExtension]
+          : null));
+
+    return data;
+  },
+
+  generate(data, relations, {language}) {
+    return relations.layout
+      .slots({
+        title:
+          language.$('albumGalleryPage.title', {
+            album: data.name,
+          }),
+
+        headingMode: 'static',
+
+        colorStyleRules: [relations.colorStyleRules],
+        additionalStyleRules: [relations.albumStyleRules],
+
+        mainClasses: ['top-index'],
+        mainContent: [
+          relations.infoLine,
+
+          relations.coverGrid
+            .slots({
+              links: relations.links,
+              names: data.names,
+              images:
+                relations.images.map((image, i) =>
+                  image.slots({
+                    path: data.paths[i],
+                    missingSourceContent:
+                      language.$('misc.albumGalleryGrid.noCoverArt', {
+                        name: data.names[i],
+                      }),
+                  })),
+            }),
+        ],
+
+        navLinkStyle: 'hierarchical',
+        navLinks: [
+          {auto: 'home'},
+          {
+            html:
+              relations.albumLink
+                .slot('attributes', {class: 'current'}),
+            accent:
+              relations.albumNavAccent.slots({
+                showTrackNavigation: false,
+                showExtraLinks: true,
+                currentExtra: 'gallery',
+              }),
+          },
+        ],
+      });
+  },
+};