content: generateCoverArtwork

3 files changed, 57 insertions, 0 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index bc4ac1dc..74d80e33 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -13,6 +13,7 @@ export default {
   relations(relation, album) {
     const relations = {};
 
+    relations.content = relation('generateAlbumInfoPageContent', album);
     relations.socialEmbed = relation('generateAlbumSocialEmbed', album);
     relations.albumStyleRules = relation('generateAlbumStyleRules', album);
     relations.colorStyleRules = relation('generateColorStyleRules', album.color);
@@ -25,6 +26,8 @@ export default {
   }) {
     const page = {};
 
+    Object.assign(page, relations.content);
+
     page.title = language.$('albumPage.title', {album: data.name});
 
     page.themeColor = data.color;
diff --git a/src/content/dependencies/generateAlbumInfoPageContent.js b/src/content/dependencies/generateAlbumInfoPageContent.js
index 41c9d309..e959f274 100644
--- a/src/content/dependencies/generateAlbumInfoPageContent.js
+++ b/src/content/dependencies/generateAlbumInfoPageContent.js
@@ -7,6 +7,7 @@ export default {
     'generateAlbumTrackList',
     'generateContributionLinks',
     'generateContentHeading',
+    'generateCoverArtwork',
     'linkAlbumCommentary',
     'linkAlbumGallery',
     'linkExternal',
@@ -21,6 +22,9 @@ export default {
   relations(relation, album) {
     const relations = {};
 
+    relations.cover =
+      relation('generateCoverArtwork', album.artTags);
+
     const contributionLinksRelation = contribs =>
       relation('generateContributionLinks', contribs, {
         showContribution: true,
@@ -80,6 +84,9 @@ export default {
   data(album) {
     const data = {};
 
+    data.coverArtDirectory = album.directory;
+    data.coverArtFileExtension = album.coverArtFileExtension;
+
     data.date = album.date;
     data.duration = accumulateSum(album.tracks, track => track.duration);
     data.durationApproximate = album.tracks.length > 1;
@@ -109,6 +116,10 @@ export default {
   }) {
     const content = {};
 
+    content.cover = relations.cover
+      .slot('path', ['media.albumCover', data.coverArtDirectory, data.coverArtFileExtension])
+      .slot('alt', language.$('misc.alt.trackCover'));
+
     content.main = {
       headingMode: 'sticky',
       content: html.tag(null, [
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
new file mode 100644
index 00000000..62fc3566
--- /dev/null
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -0,0 +1,43 @@
+import {empty} from '../../util/sugar.js';
+
+export default {
+  contentDependencies: ['image', 'linkArtTag'],
+  extraDependencies: ['html', 'language'],
+
+  relations(relation, artTags) {
+    const relations = {};
+
+    relations.image =
+      relation('image', artTags);
+
+    if (artTags) {
+      relations.tagLinks =
+        artTags
+          .filter(tag => !tag.isContentWarning)
+          .map(tag => relation('linkArtTag', tag));
+    } else {
+      relations.tagLinks = null;
+    }
+
+    return relations;
+  },
+
+  generate(relations, {html, language}) {
+    return html.template(slot =>
+      html.tag('div', {id: 'cover-art-container'}, [
+        relations.image
+          .slot('path', slot('path'))
+          .slot('alt', slot('alt'))
+          .slot('thumb', 'medium')
+          .slot('id', 'cover-art')
+          .slot('link', true)
+          .slot('square', true),
+
+        !empty(relations.tagLinks) &&
+          html.tag('p',
+            language.$('releaseInfo.artTags.inline', {
+              tags: language.formatUnitList(relations.tagLinks),
+            })),
+      ]));
+  },
+};