content, css: cover artwork reference details, non-unique art line

9 files changed, 192 insertions, 15 deletions

diff --git a/src/content/dependencies/generateAlbumCoverArtwork.js b/src/content/dependencies/generateAlbumCoverArtwork.js
index d52d57ce..1e11c0ac 100644
--- a/src/content/dependencies/generateAlbumCoverArtwork.js
+++ b/src/content/dependencies/generateAlbumCoverArtwork.js
@@ -3,7 +3,10 @@ export default {
     'generateCoverArtwork',
     'generateCoverArtworkArtTagDetails',
     'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkReferenceDetails',
     'image',
+    'linkAlbumReferencedArtworks',
+    'linkAlbumReferencingArtworks',
   ],
 
   extraDependencies: ['html', 'language'],
@@ -20,6 +23,17 @@ export default {
 
     artistDetails:
       relation('generateCoverArtworkArtistDetails', album.coverArtistContribs),
+
+    referenceDetails:
+      relation('generateCoverArtworkReferenceDetails',
+        album.referencedArtworks,
+        album.referencedByArtworks),
+
+    referencedArtworksLink:
+      relation('linkAlbumReferencedArtworks', album),
+
+    referencingArtworksLink:
+      relation('linkAlbumReferencingArtworks', album),
   }),
 
   data: (album) => ({
@@ -40,6 +54,11 @@ export default {
       validate: v => v.is('tags', 'artists'),
       default: 'tags',
     },
+
+    showReferenceLinks: {
+      type: 'boolean',
+      default: false,
+    },
   },
 
   generate: (data, relations, slots, {language}) =>
@@ -55,11 +74,21 @@ export default {
 
       dimensions: data.dimensions,
 
-      details:
-        (slots.details === 'tags'
-          ? relations.artTagDetails
-       : slots.details === 'artists'
-          ? relations.artistDetails
-          : null),
+      details: [
+        slots.details === 'tags' &&
+          relations.artTagDetails,
+
+        slots.details === 'artists' &&
+          relations.artistDetails,
+
+        slots.showReferenceLinks &&
+          relations.referenceDetails.slots({
+            referencedLink:
+              relations.referencedArtworksLink,
+
+            referencingLink:
+              relations.referencingArtworksLink,
+          }),
+      ],
     }),
 };
diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index a291dedb..14745b96 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -108,7 +108,10 @@ export default {
 
         additionalNames: relations.additionalNamesBox,
 
-        cover: relations.cover,
+        cover:
+          relations.cover?.slots({
+            showReferenceLinks: true,
+          }),
 
         mainContent: [
           relations.releaseInfo,
diff --git a/src/content/dependencies/generateCoverArtworkReferenceDetails.js b/src/content/dependencies/generateCoverArtworkReferenceDetails.js
new file mode 100644
index 00000000..006b2b4b
--- /dev/null
+++ b/src/content/dependencies/generateCoverArtworkReferenceDetails.js
@@ -0,0 +1,56 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  data: (referenced, referencedBy) => ({
+    referenced:
+      referenced.length,
+
+    referencedBy:
+      referencedBy.length,
+  }),
+
+  slots: {
+    referencedLink: {type: 'html', mutable: true},
+    referencingLink: {type: 'html', mutable: true},
+  },
+
+  generate: (data, slots, {html, language}) =>
+    language.encapsulate('releaseInfo', capsule => {
+      const referencedText =
+        language.$(capsule, 'referencesArtworks', {
+          [language.onlyIfOptions]: ['artworks'],
+
+          artworks:
+            language.countArtworks(data.referenced, {
+              blankIfZero: true,
+              unit: true,
+            }),
+        });
+
+      const referencingText =
+        language.$(capsule, 'referencedByArtworks', {
+          [language.onlyIfOptions]: ['artworks'],
+
+          artworks:
+            language.countArtworks(data.referencedBy, {
+              blankIfZero: true,
+              unit: true,
+            }),
+        });
+
+      return (
+        html.tag('p', {class: 'image-details'},
+          {[html.onlyIfContent]: true},
+          {[html.joinChildren]: html.tag('br')},
+
+          {class: 'reference-details'},
+
+          [
+            !html.isBlank(referencedText) &&
+              slots.referencedLink.slot('content', referencedText),
+
+            !html.isBlank(referencingText) &&
+              slots.referencingLink.slot('content', referencingText),
+          ]));
+    }),
+}
diff --git a/src/content/dependencies/generateTrackCoverArtwork.js b/src/content/dependencies/generateTrackCoverArtwork.js
index 2ad14993..90ce2b4a 100644
--- a/src/content/dependencies/generateTrackCoverArtwork.js
+++ b/src/content/dependencies/generateTrackCoverArtwork.js
@@ -3,7 +3,11 @@ export default {
     'generateCoverArtwork',
     'generateCoverArtworkArtTagDetails',
     'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkReferenceDetails',
     'image',
+    'linkAlbum',
+    'linkTrackReferencedArtworks',
+    'linkTrackReferencingArtworks',
   ],
 
   extraDependencies: ['html', 'language'],
@@ -26,6 +30,20 @@ export default {
         (track.hasUniqueCoverArt
           ? track.coverArtistContribs
           : track.album.coverArtistContribs)),
+
+    referenceDetails:
+      relation('generateCoverArtworkReferenceDetails',
+        track.referencedArtworks,
+        track.referencedByArtworks),
+
+    referencedArtworksLink:
+      relation('linkTrackReferencedArtworks', track),
+
+    referencingArtworksLink:
+      relation('linkTrackReferencingArtworks', track),
+
+    albumLink:
+      relation('linkAlbum', track.album),
   }),
 
   data: (track) => ({
@@ -41,6 +59,9 @@ export default {
       (track.hasUniqueCoverArt
         ? track.coverArtDimensions
         : track.album.coverArtDimensions),
+
+    nonUnique:
+      !track.hasUniqueCoverArt,
   }),
 
   slots: {
@@ -50,9 +71,19 @@ export default {
       validate: v => v.is('tags', 'artists'),
       default: 'tags',
     },
+
+    showReferenceLinks: {
+      type: 'boolean',
+      default: false,
+    },
+
+    showNonUniqueLine: {
+      type: 'boolean',
+      default: false,
+    },
   },
 
-  generate: (data, relations, slots, {language}) =>
+  generate: (data, relations, slots, {html, language}) =>
     relations.coverArtwork.slots({
       mode: slots.mode,
 
@@ -65,12 +96,34 @@ export default {
 
       dimensions: data.dimensions,
 
-      details:
-        (slots.details === 'tags'
-          ? relations.artTagDetails
-       : slots.details === 'artists'
-          ? relations.artistDetails
-          : null),
+      details: [
+        slots.details === 'tags' &&
+          relations.artTagDetails,
+
+        slots.details === 'artists'&&
+          relations.artistDetails,
+
+        slots.showReferenceLinks &&
+          relations.referenceDetails.slots({
+            referencedLink:
+              relations.referencedArtworksLink,
+
+            referencingLink:
+              relations.referencingArtworksLink,
+          }),
+
+        slots.showNonUniqueLine &&
+        data.nonUnique &&
+          html.tag('p', {class: 'image-details'},
+            {class: 'non-unique-details'},
+
+            language.$('misc.trackArtFromAlbum', {
+              album:
+                relations.albumLink.slots({
+                  color: false,
+                }),
+            })),
+      ],
     }),
 };
 
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index ea13032a..39f2a437 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -139,7 +139,11 @@ export default {
         color: data.color,
         styleRules: [relations.albumStyleRules],
 
-        cover: relations.cover,
+        cover:
+          relations.cover?.slots({
+            showReferenceLinks: true,
+            showNonUniqueLine: true,
+          }),
 
         mainContent: [
           relations.releaseInfo,
diff --git a/src/content/dependencies/linkAlbumReferencedArtworks.js b/src/content/dependencies/linkAlbumReferencedArtworks.js
new file mode 100644
index 00000000..ba51b5e3
--- /dev/null
+++ b/src/content/dependencies/linkAlbumReferencedArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, album) =>
+    ({link: relation('linkThing', 'localized.albumReferencedArtworks', album)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/content/dependencies/linkAlbumReferencingArtworks.js b/src/content/dependencies/linkAlbumReferencingArtworks.js
new file mode 100644
index 00000000..4d5e799d
--- /dev/null
+++ b/src/content/dependencies/linkAlbumReferencingArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, album) =>
+    ({link: relation('linkThing', 'localized.albumReferencingArtworks', album)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/content/dependencies/linkTrackReferencedArtworks.js b/src/content/dependencies/linkTrackReferencedArtworks.js
new file mode 100644
index 00000000..b4cb08fe
--- /dev/null
+++ b/src/content/dependencies/linkTrackReferencedArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, track) =>
+    ({link: relation('linkThing', 'localized.trackReferencedArtworks', track)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/content/dependencies/linkTrackReferencingArtworks.js b/src/content/dependencies/linkTrackReferencingArtworks.js
new file mode 100644
index 00000000..c9c9f4d1
--- /dev/null
+++ b/src/content/dependencies/linkTrackReferencingArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, track) =>
+    ({link: relation('linkThing', 'localized.trackReferencingArtworks', track)}),
+
+  generate: (relations) => relations.link,
+};