HIGHLY WIP album gallery pages

4 files changed, 92 insertions, 3 deletions

diff --git a/src/page/album.js b/src/page/album.js
index 834f52d7..ab44e656 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -52,6 +52,9 @@ export function write(album, {wikiData}) {
   const hasAdditionalFiles = !empty(album.additionalFiles);
   const albumDuration = getTotalDuration(album.tracks);
 
+  // TODO: code this obviously
+  const hasGalleryPage = true;
+
   const displayTrackGroups =
     album.trackGroups &&
       (album.trackGroups.length > 1 ||
@@ -96,7 +99,7 @@ export function write(album, {wikiData}) {
     }),
   };
 
-  const page = {
+  const infoPage = {
     type: 'page',
     path: ['album', album.directory],
     page: ({
@@ -234,6 +237,13 @@ export function write(album, {wikiData}) {
                 hasAdditionalFiles &&
                   generateAdditionalFilesShortcut(album.additionalFiles),
 
+                hasGalleryPage &&
+                  language.$('releaseInfo.viewGallery', {
+                    link: link.albumGallery(album, {
+                      text: language.$('releaseInfo.viewGallery.link'),
+                    }),
+                  }),
+
                 hasCommentaryEntries &&
                   language.$('releaseInfo.viewCommentary', {
                     link: link.albumCommentary(album, {
@@ -355,7 +365,78 @@ export function write(album, {wikiData}) {
     },
   };
 
-  return [page, data];
+  // TODO: only gen if there are any tracks with art
+  const galleryPage = {
+    type: 'page',
+    path: ['albumGallery', album.directory],
+    page: ({
+      // generateInfoGalleryLinks,
+      // generateNavigationLinks,
+      getAlbumCover,
+      getGridHTML,
+      getTrackCover,
+      // getLinkThemeString,
+      getThemeString,
+      html,
+      language,
+      link,
+    }) => ({
+      title: language.$('albumGalleryPage.title', {album: album.name}),
+
+      themeColor: album.color,
+      theme: getThemeString(album.color),
+
+      main: {
+        classes: ['top-index'],
+        content: [
+          html.tag('h1',
+            language.$('albumGalleryPage.title', {
+              album: album.name,
+            })),
+
+          html.tag('p',
+            {class: 'quick-info'},
+            (album.date
+              ? language.$('albumGalleryPage.infoLine.withDate', {
+                  tracks: html.tag('b',
+                    language.countTracks(album.tracks.length, {unit: true})),
+                  duration: html.tag('b',
+                    language.formatDuration(albumDuration, {unit: true})),
+                  date: html.tag('b',
+                    language.formatDate(album.date)),
+                })
+              : language.$('albumGalleryPage.infoLine', {
+                  tracks: html.tag('b',
+                    language.countTracks(album.tracks.length, {unit: true})),
+                  duration: html.tag('b',
+                    language.formatDuration(albumDuration, {unit: true})),
+                }))),
+
+          html.tag('div',
+            {class: 'grid-listing'},
+            getGridHTML({
+              srcFn: t => t.album ? getTrackCover(t) : getAlbumCover(t),
+              linkFn: (t, opts) => t.album ? link.track(t, opts) : link.album(t, opts),
+              noSrcTextFn: t =>
+                language.$('misc.albumGalleryGrid.noCoverArt', {
+                  name: t.name,
+                }),
+
+              entries: [
+                // {item: album},
+                ...album.tracks.map(track => ({item: track})),
+              ],
+            })),
+        ],
+      },
+    }),
+  };
+
+  return [
+    infoPage,
+    galleryPage,
+    data,
+  ];
 }
 
 // Utility functions
diff --git a/src/strings-default.json b/src/strings-default.json
index d24f04a1..4990bd11 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -94,6 +94,8 @@
   "releaseInfo.duration": "Duration: {DURATION}.",
   "releaseInfo.viewCommentary": "View {LINK}!",
   "releaseInfo.viewCommentary.link": "commentary page",
+  "releaseInfo.viewGallery": "View {LINK}!",
+  "releaseInfo.viewGallery.link": "gallery page",
   "releaseInfo.listenOn": "Listen on {LINKS}.",
   "releaseInfo.listenOn.noLinks": "This track has no URLs at which it can be listened.",
   "releaseInfo.visitOn": "Visit on {LINKS}.",
@@ -183,6 +185,7 @@
   "misc.contentWarnings.reveal": "click to show",
   "misc.albumGrid.details": "({TRACKS}, {TIME})",
   "misc.albumGrid.noCoverArt": "{ALBUM}",
+  "misc.albumGalleryGrid.noCoverArt": "{NAME}",
   "misc.uiLanguage": "UI Language: {LANGUAGES}",
   "homepage.title": "{TITLE}",
   "homepage.news.title": "News",
@@ -197,6 +200,9 @@
   "albumPage.title": "{ALBUM}",
   "albumPage.nav.album": "{ALBUM}",
   "albumPage.nav.randomTrack": "Random Track",
+  "albumGalleryPage.title": "{ALBUM} - Gallery",
+  "albumGalleryPage.infoLine": "{TRACKS} totaling {DURATION}.",
+  "albumGalleryPage.infoLine.withDate": "{TRACKS} totaling {DURATION}. Released {DATE}.",
   "albumCommentaryPage.title": "{ALBUM} - Commentary",
   "albumCommentaryPage.infoLine": "{WORDS} across {ENTRIES}.",
   "albumCommentaryPage.nav.album": "Album: {ALBUM}",
diff --git a/src/url-spec.js b/src/url-spec.js
index ce479267..0af613cc 100644
--- a/src/url-spec.js
+++ b/src/url-spec.js
@@ -25,6 +25,7 @@ const urlSpec = {
       home: '',
 
       album: 'album/<>/',
+      albumGallery: 'album/<>/gallery/',
       albumCommentary: 'commentary/album/<>/',
 
       artist: 'artist/<>/',
diff --git a/src/util/link.js b/src/util/link.js
index bc3bd50a..7d53edc3 100644
--- a/src/util/link.js
+++ b/src/util/link.js
@@ -105,11 +105,12 @@ const link = {
     // href that ends with `/` and append `index.html` to the returned
     // value (for to.thing() functions). This is handy when developing
     // without a local server (i.e. using file:// protocol URLs in your
-    // 8rowser), 8ut isn't guaranteed to 8e 100% 8ug-free.
+    // we8 8rowser), 8ut isn't guaranteed to 8e 100% 8ug-free.
     appendIndexHTML: false,
   },
 
   album: linkDirectory('album'),
+  albumGallery: linkDirectory('albumGallery'),
   albumCommentary: linkDirectory('albumCommentary'),
   artist: linkDirectory('artist', {color: false}),
   artistGallery: linkDirectory('artistGallery', {color: false}),