content: generateMusicVideoReleaseLine: wrap "by" nicely

2 files changed, 77 insertions, 36 deletions

diff --git a/src/content/dependencies/generateMusicVideo.js b/src/content/dependencies/generateMusicVideo.js
index 7f0108af..e83fdf80 100644
--- a/src/content/dependencies/generateMusicVideo.js
+++ b/src/content/dependencies/generateMusicVideo.js
@@ -7,11 +7,8 @@ export default {
         dimensions: musicVideo.coverArtDimensions,
       }),
 
-    datetimestamp:
-      relation('generateAbsoluteDatetimestamp', musicVideo.date, thing.date),
-
-    artistCredit:
-      relation('generateArtistCredit', musicVideo.artistContribs, []),
+    releaseLine:
+      relation('generateMusicVideoReleaseLine', musicVideo, thing),
 
     contributorCredit:
       relation('generateArtistCredit', musicVideo.contributorContribs, []),
@@ -48,42 +45,25 @@ export default {
           {[html.joinChildren]: html.tag('br')},
 
           [
-            language.encapsulate(capsule, 'by', workingCapsule => {
-              const workingOptions = {};
-
-              if (data.label) {
-                workingCapsule += '.customLabel';
-                workingOptions.label = data.label;
-              }
-
-              const {datetimestamp} = relations;
-
-              datetimestamp.setSlot('style', 'year-difference');
-
-              if (!html.isBlank(datetimestamp)) {
-                workingCapsule += '.withDate';
-                workingOptions.date = datetimestamp;
-              }
-
-              return relations.artistCredit.slots({
-                normalStringKey: workingCapsule,
-                additionalStringOptions: workingOptions,
+            html.tag('span', {class: 'release-line'},
+              {[html.onlyIfContent]: true},
 
-                showAnnotation: true,
-                showChronology: true,
+              relations.releaseLine),
 
-                chronologyKind: 'musicVideo',
-              });
-            }),
+            language.encapsulate(capsule, 'contributorsLine', capsule =>
+              language.$(capsule, {
+                [language.onlyIfOptions]: ['credit'],
 
-            relations.contributorCredit.slots({
-              normalStringKey: language.encapsulate(capsule, 'contributors'),
+                credit:
+                  relations.contributorCredit.slots({
+                    normalStringKey: language.encapsulate(capsule, 'credit'),
 
-              showAnnotation: true,
-              showChronology: true,
+                    showAnnotation: true,
+                    showChronology: true,
 
-              chronologyKind: 'musicVideoContribution',
-            }),
+                    chronologyKind: 'musicVideoContribution',
+                  }),
+              })),
           ]),
       ])),
 };
diff --git a/src/content/dependencies/generateMusicVideoReleaseLine.js b/src/content/dependencies/generateMusicVideoReleaseLine.js
new file mode 100644
index 00000000..dc11f584
--- /dev/null
+++ b/src/content/dependencies/generateMusicVideoReleaseLine.js
@@ -0,0 +1,61 @@
+export default {
+  relations: (relation, musicVideo, thing) => ({
+    datetimestamp:
+      relation('generateAbsoluteDatetimestamp', musicVideo.date, thing.date),
+
+    artistCredit:
+      relation('generateArtistCredit', musicVideo.artistContribs, []),
+  }),
+
+  data: (data) => ({
+    label:
+      (data.label !== 'Music video'
+        ? data.label
+        : null),
+  }),
+
+  generate(data, relations, {html, language}) {
+    const {artistCredit, datetimestamp} = relations;
+    const capsule = language.encapsulate('misc.musicVideo');
+
+    datetimestamp.setSlot('style', 'year-difference');
+
+    let artistsLineCapsule = language.encapsulate(capsule, 'artistsLine');
+    let artistsLineOptions = {[language.onlyIfOptions]: ['credit']};
+
+    if (data.label) {
+      artistsLineCapsule += '.customLabel';
+      artistsLineOptions.label = data.label;
+    }
+
+    if (!html.isBlank(datetimestamp)) {
+      artistsLineCapsule += '.withDate';
+      artistsLineOptions.date = datetimestamp;
+    }
+
+    artistsLineOptions.credit =
+      html.tag('span', {class: 'by'},
+        {[html.onlyIfContent]: true},
+
+        artistCredit.slots({
+          normalStringKey: language.encapsulate(capsule, 'artistsLine.credit'),
+
+          showAnnotation: true,
+          showChronology: true,
+
+          chronologyKind: 'musicVideo',
+        }));
+
+    const artistsLine = language.$(artistsLineCapsule, artistsLineOptions);
+
+    if (!html.isBlank(artistsLine)) {
+      return artistsLine;
+    }
+
+    if (!html.isBlank(datetimestamp)) {
+      return language.$(capsule, 'date', {date: datetimestamp});
+    }
+
+    return html.blank();
+  },
+}