2 files changed, 83 insertions, 0 deletions
diff --git a/src/content/dependencies/generateMusicVideo.js b/src/content/dependencies/generateMusicVideo.js
new file mode 100644
index 00000000..a61cd5b7
--- /dev/null
+++ b/src/content/dependencies/generateMusicVideo.js
@@ -0,0 +1,77 @@
+export default {
+  relations: (relation, musicVideo) => ({
+    image:
+      relation('image', {
+        path: musicVideo.path,
+        artTags: [],
+        dimensions: musicVideo.coverArtDimensions,
+      }),
+
+    artistCredit:
+      relation('generateArtistCredit', musicVideo.artistContribs, []),
+
+    contributorCredit:
+      relation('generateArtistCredit', musicVideo.contributorContribs, []),
+  }),
+
+  data: (musicVideo) => ({
+    label:
+      musicVideo.label,
+
+    url:
+      musicVideo.url,
+  }),
+
+  generate: (data, relations, {language, html}) =>
+    language.encapsulate('misc.musicVideo', capsule =>
+      html.tag('div', {class: 'music-video'}, [
+        html.tag('p', {class: 'music-video-label'},
+          language.encapsulate(capsule, 'label', workingCapsule => {
+            const workingOptions = {};
+
+            if (data.label) {
+              workingCapsule += '.customLabel';
+              workingOptions.label = data.label;
+            }
+
+            return language.$(workingCapsule, workingOptions);
+          })),
+
+        relations.image.slots({
+          link: data.url,
+        }),
+
+        html.tag('p', {class: 'music-video-credits'},
+          {[html.joinChildren]: html.tag('br')},
+
+          [
+            language.encapsulate(capsule, 'by', workingCapsule => {
+              const additionalStringOptions = {};
+
+              if (data.label) {
+                workingCapsule += '.customLabel';
+                additionalStringOptions.label = data.label;
+              }
+
+              return relations.artistCredit.slots({
+                normalStringKey: workingCapsule,
+                additionalStringOptions,
+
+                showAnnotation: true,
+                showChronology: true,
+
+                chronologyKind: 'musicVideo',
+              });
+            }),
+
+            relations.contributorCredit.slots({
+              normalStringKey: language.encapsulate(capsule, 'contributors'),
+
+              showAnnotation: true,
+              showChronology: true,
+
+              chronologyKind: 'musicVideoContribution',
+            }),
+          ]),
+      ])),
+};
diff --git a/src/content/dependencies/generateTrackArtworkColumn.js b/src/content/dependencies/generateTrackArtworkColumn.js
index 234586e0..dde37376 100644
--- a/src/content/dependencies/generateTrackArtworkColumn.js
+++ b/src/content/dependencies/generateTrackArtworkColumn.js
@@ -10,6 +10,10 @@ export default {
         ? track.trackArtworks.map(artwork =>
             relation('generateCoverArtwork', artwork))
         : []),
+
+    trackMusicVideos:
+      track.musicVideos.map(musicVideo =>
+        relation('generateMusicVideo', musicVideo)),
   }),
 
   generate: (relations, {html}) =>
@@ -26,5 +30,7 @@ export default {
           showArtTagDetails: true,
           showReferenceDetails: true,
         })),
+
+      relations.trackMusicVideos,
     ]),
 };