content, css: demo new cover artworks ui + data integration

This is not remotely comprehensive and mostly just touches
album and track info pages.

9 files changed, 85 insertions, 53 deletions

diff --git a/src/content/dependencies/generateAlbumCoverArtwork.js b/src/content/dependencies/generateAlbumCoverArtwork.js
index ff7d2b85..7c546fc6 100644
--- a/src/content/dependencies/generateAlbumCoverArtwork.js
+++ b/src/content/dependencies/generateAlbumCoverArtwork.js
@@ -3,6 +3,7 @@ export default {
     'generateCoverArtwork',
     'generateCoverArtworkArtTagDetails',
     'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkOriginDetails',
     'generateCoverArtworkReferenceDetails',
     'image',
     'linkAlbumReferencedArtworks',
@@ -18,11 +19,14 @@ export default {
     image:
       relation('image'),
 
+    originDetails:
+      relation('generateCoverArtworkOriginDetails', album.coverArtwork),
+
     artTagDetails:
-      relation('generateCoverArtworkArtTagDetails', album.artTags),
+      relation('generateCoverArtworkArtTagDetails', album.coverArtwork),
 
     artistDetails:
-      relation('generateCoverArtworkArtistDetails', album.coverArtistContribs),
+      relation('generateCoverArtworkArtistDetails', album.coverArtwork),
 
     referenceDetails:
       relation('generateCoverArtworkReferenceDetails',
@@ -60,6 +64,11 @@ export default {
       default: 'tags',
     },
 
+    showOriginDetails: {
+      type: 'boolean',
+      default: false,
+    },
+
     showReferenceLinks: {
       type: 'boolean',
       default: false,
@@ -81,6 +90,9 @@ export default {
       warnings: data.warnings,
 
       details: [
+        slots.showOriginDetails &&
+          relations.originDetails,
+
         slots.details === 'tags' &&
           relations.artTagDetails,
 
diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index aae56637..2af461a4 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -115,6 +115,7 @@ export default {
         cover:
           (relations.cover
             ? relations.cover.slots({
+                showOriginDetails: true,
                 showReferenceLinks: true,
               })
             : null),
diff --git a/src/content/dependencies/generateAlbumReleaseInfo.js b/src/content/dependencies/generateAlbumReleaseInfo.js
index 217282c0..f9806c30 100644
--- a/src/content/dependencies/generateAlbumReleaseInfo.js
+++ b/src/content/dependencies/generateAlbumReleaseInfo.js
@@ -14,9 +14,6 @@ export default {
     relations.artistContributionsLine =
       relation('generateReleaseInfoContributionsLine', album.artistContribs);
 
-    relations.coverArtistContributionsLine =
-      relation('generateReleaseInfoContributionsLine', album.coverArtistContribs);
-
     relations.wallpaperArtistContributionsLine =
       relation('generateReleaseInfoContributionsLine', album.wallpaperArtistContribs);
 
@@ -73,21 +70,6 @@ export default {
               chronologyKind: 'album',
             }),
 
-            relations.coverArtistContributionsLine.slots({
-              stringKey: capsule + '.coverArtBy',
-              chronologyKind: 'coverArt',
-            }),
-
-            relations.wallpaperArtistContributionsLine.slots({
-              stringKey: capsule + '.wallpaperArtBy',
-              chronologyKind: 'wallpaperArt',
-            }),
-
-            relations.bannerArtistContributionsLine.slots({
-              stringKey: capsule + '.bannerArtBy',
-              chronologyKind: 'bannerArt',
-            }),
-
             language.$(capsule, 'released', {
               [language.onlyIfOptions]: ['date'],
               date: language.formatDate(data.date),
diff --git a/src/content/dependencies/generateCoverArtworkArtTagDetails.js b/src/content/dependencies/generateCoverArtworkArtTagDetails.js
index b4edbbdd..b20f599b 100644
--- a/src/content/dependencies/generateCoverArtworkArtTagDetails.js
+++ b/src/content/dependencies/generateCoverArtworkArtTagDetails.js
@@ -4,19 +4,19 @@ export default {
   contentDependencies: ['linkArtTagGallery'],
   extraDependencies: ['html'],
 
-  query: (artTags) => ({
+  query: (artwork) => ({
     linkableArtTags:
-      artTags
+      artwork.artTags
         .filter(tag => !tag.isContentWarning),
   }),
 
-  relations: (relation, query, _artTags) => ({
+  relations: (relation, query, _artwork) => ({
     artTagLinks:
       query.linkableArtTags
         .map(tag => relation('linkArtTagGallery', tag)),
   }),
 
-  data: (query, _artTags) => {
+  data: (query, _artwork) => {
     const seenShortNames = new Set();
     const duplicateShortNames = new Set();
 
diff --git a/src/content/dependencies/generateCoverArtworkArtistDetails.js b/src/content/dependencies/generateCoverArtworkArtistDetails.js
index 5b235353..b9dd1fe2 100644
--- a/src/content/dependencies/generateCoverArtworkArtistDetails.js
+++ b/src/content/dependencies/generateCoverArtworkArtistDetails.js
@@ -2,9 +2,9 @@ export default {
   contentDependencies: ['linkArtistGallery'],
   extraDependencies: ['html', 'language'],
 
-  relations: (relation, contributions) => ({
+  relations: (relation, artwork) => ({
     artistLinks:
-      contributions
+      artwork.artistContribs
         .map(contrib => contrib.artist)
         .map(artist =>
           relation('linkArtistGallery', artist)),
diff --git a/src/content/dependencies/generateCoverArtworkOriginDetails.js b/src/content/dependencies/generateCoverArtworkOriginDetails.js
new file mode 100644
index 00000000..8b5a28ac
--- /dev/null
+++ b/src/content/dependencies/generateCoverArtworkOriginDetails.js
@@ -0,0 +1,44 @@
+export default {
+  contentDependencies: ['generateArtistCredit'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, artwork) => ({
+    credit:
+      relation('generateArtistCredit', artwork.artistContribs, []),
+  }),
+
+  data: (artwork) => ({
+    date:
+      (artwork.date !== artwork.thing.date
+        ? artwork.date
+        : null),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('misc.coverArtwork', capsule =>
+      html.tag('p', {class: 'image-details'},
+        {[html.onlyIfContent]: true},
+        {[html.joinChildren]: html.tag('br')},
+
+        {class: 'origin-details'},
+
+        [
+          relations.credit.slots({
+            showAnnotation: true,
+            showExternalLinks: true,
+            showChronology: true,
+            showWikiEdits: true,
+
+            trimAnnotation: false,
+
+            chronologyKind: 'coverArt',
+
+            normalStringKey: capsule + '.artworkBy',
+          }),
+
+          language.$(capsule, 'released', {
+            [language.onlyIfOptions]: ['date'],
+            date: language.formatDate(data.date),
+          })
+        ])),
+};
diff --git a/src/content/dependencies/generateTrackCoverArtwork.js b/src/content/dependencies/generateTrackCoverArtwork.js
index 9153e2fc..937347a3 100644
--- a/src/content/dependencies/generateTrackCoverArtwork.js
+++ b/src/content/dependencies/generateTrackCoverArtwork.js
@@ -3,6 +3,7 @@ export default {
     'generateCoverArtwork',
     'generateCoverArtworkArtTagDetails',
     'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkOriginDetails',
     'generateCoverArtworkReferenceDetails',
     'image',
     'linkAlbum',
@@ -15,13 +16,10 @@ export default {
   query: (track) => ({
     artTags:
       (track.hasUniqueCoverArt
-        ? track.artTags
-        : track.album.artTags),
-
-    coverArtistContribs:
-      (track.hasUniqueCoverArt
-        ? track.coverArtistContribs
-        : track.album.coverArtistContribs),
+        ? track.trackArtwork.artTags
+     : track.album.hasCoverArt
+        ? track.album.coverArtwork.artTags
+        : []),
   }),
 
   relations: (relation, query, track) => ({
@@ -31,13 +29,14 @@ export default {
     image:
       relation('image'),
 
+    originDetails:
+      relation('generateCoverArtworkOriginDetails', track.trackArtwork),
+
     artTagDetails:
-      relation('generateCoverArtworkArtTagDetails',
-        query.artTags),
+      relation('generateCoverArtworkArtTagDetails', track.trackArtwork),
 
     artistDetails:
-      relation('generateCoverArtworkArtistDetails',
-        query.coverArtistContribs),
+      relation('generateCoverArtworkArtistDetails', track.trackArtwork),
 
     referenceDetails:
       relation('generateCoverArtworkReferenceDetails',
@@ -85,6 +84,11 @@ export default {
       default: 'tags',
     },
 
+    showOriginDetails: {
+      type: 'boolean',
+      default: false,
+    },
+
     showReferenceLinks: {
       type: 'boolean',
       default: false,
@@ -111,6 +115,9 @@ export default {
       warnings: data.warnings,
 
       details: [
+        slots.showOriginDetails &&
+          relations.originDetails,
+
         slots.details === 'tags' &&
           relations.artTagDetails,
 
@@ -131,7 +138,7 @@ export default {
           html.tag('p', {class: 'image-details'},
             {class: 'non-unique-details'},
 
-            language.$('misc.trackArtFromAlbum', {
+            language.$('misc.coverArtwork.trackArtFromAlbum', {
               album:
                 relations.albumLink.slots({
                   color: false,
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 1c349c2e..a2a83d2d 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -144,6 +144,7 @@ export default {
         cover:
           (relations.cover
             ? relations.cover.slots({
+                showOriginDetails: true,
                 showReferenceLinks: true,
                 showNonUniqueLine: true,
               })
diff --git a/src/content/dependencies/generateTrackReleaseInfo.js b/src/content/dependencies/generateTrackReleaseInfo.js
index 6f473041..54e462c7 100644
--- a/src/content/dependencies/generateTrackReleaseInfo.js
+++ b/src/content/dependencies/generateTrackReleaseInfo.js
@@ -14,11 +14,6 @@ export default {
     relations.artistContributionLinks =
       relation('generateReleaseInfoContributionsLine', track.artistContribs);
 
-    if (track.hasUniqueCoverArt) {
-      relations.coverArtistContributionsLine =
-        relation('generateReleaseInfoContributionsLine', track.coverArtistContribs);
-    }
-
     if (!empty(track.urls)) {
       relations.externalLinks =
         track.urls.map(url =>
@@ -59,21 +54,11 @@ export default {
               chronologyKind: 'track',
             }),
 
-            relations.coverArtistContributionsLine?.slots({
-              stringKey: capsule + '.coverArtBy',
-              chronologyKind: 'trackArt',
-            }),
-
             language.$(capsule, 'released', {
               [language.onlyIfOptions]: ['date'],
               date: language.formatDate(data.date),
             }),
 
-            language.$(capsule, 'artReleased', {
-              [language.onlyIfOptions]: ['date'],
-              date: language.formatDate(data.coverArtDate),
-            }),
-
             language.$(capsule, 'duration', {
               [language.onlyIfOptions]: ['duration'],
               duration: language.formatDuration(data.duration),