content, css: generateMusicVideoDateLine

4 files changed, 99 insertions, 82 deletions

diff --git a/src/content/dependencies/generateMusicVideo.js b/src/content/dependencies/generateMusicVideo.js
index 628c1a17..035cd353 100644
--- a/src/content/dependencies/generateMusicVideo.js
+++ b/src/content/dependencies/generateMusicVideo.js
@@ -7,41 +7,22 @@ export default {
         dimensions: musicVideo.coverArtDimensions,
       }),
 
-    releaseLine:
-      relation('generateMusicVideoReleaseLine', musicVideo, thing),
+    artistsLine:
+      relation('generateMusicVideoArtistsLine', musicVideo),
+
+    dateLine:
+      relation('generateMusicVideoDateLine', musicVideo, thing),
 
     contributorCredit:
       relation('generateArtistCredit', musicVideo.contributorContribs, []),
   }),
 
-  data: (musicVideo, track) => ({
+  data: (musicVideo, _thing) => ({
     label:
       musicVideo.label,
 
     url:
       musicVideo.url,
-
-    sameDay:
-      (() => {
-        if (!musicVideo.dateIsSpecified) return null;
-
-        const compare = (a, b) =>
-          a.toDateString() === b.toDateString();
-
-        if (compare(musicVideo.date, track.album.date)) {
-          if (track.album.style === 'single') {
-            return 'single';
-          } else {
-            return 'album';
-          }
-        }
-
-        if (compare(musicVideo.date, track.date)) {
-          return 'track';
-        }
-
-        return null;
-      })(),
   }),
 
   generate: (data, relations, {language, html}) =>
@@ -63,41 +44,33 @@ export default {
           link: data.url,
         }),
 
-        html.tag('p', {class: 'music-video-info'},
+        html.tag('p',
           {[html.joinChildren]: html.tag('br')},
 
           [
-            html.tag('span', {class: 'release-line'},
+            html.tag('span', {class: 'artists-line'},
               {[html.onlyIfContent]: true},
 
-              relations.releaseLine),
-
-            language.encapsulate(capsule, 'date', capsule => [
-              data.sameDay == 'album' &&
-                language.$(capsule, 'sameDayAsAlbum'),
-
-              data.sameDay == 'single' &&
-                language.$(capsule, 'sameDayAsTrack'),
+              relations.artistsLine),
 
-              data.sameDay === 'track' &&
-                language.$(capsule, 'sameDayAsTrack'),
-            ]),
+            relations.dateLine,
+          ]),
 
-            language.encapsulate(capsule, 'contributorsLine', capsule =>
-              language.$(capsule, {
-                [language.onlyIfOptions]: ['credit'],
+        html.tag('p',
+          language.encapsulate(capsule, 'contributorsLine', capsule =>
+            language.$(capsule, {
+              [language.onlyIfOptions]: ['credit'],
 
-                credit:
-                  relations.contributorCredit.slots({
-                    normalStringKey: language.encapsulate(capsule, 'credit'),
+              credit:
+                relations.contributorCredit.slots({
+                  normalStringKey: language.encapsulate(capsule, 'credit'),
 
-                    showAnnotation: true,
-                    showChronology: true,
-                    chunkwrap: false,
+                  showAnnotation: true,
+                  showChronology: true,
+                  chunkwrap: false,
 
-                    chronologyKind: 'musicVideoContribution',
-                  }),
-              })),
-          ]),
+                  chronologyKind: 'musicVideoContribution',
+                }),
+            }))),
       ])),
 };
diff --git a/src/content/dependencies/generateMusicVideoReleaseLine.js b/src/content/dependencies/generateMusicVideoArtistsLine.js
index e4e196e9..959d3648 100644
--- a/src/content/dependencies/generateMusicVideoReleaseLine.js
+++ b/src/content/dependencies/generateMusicVideoArtistsLine.js
@@ -1,25 +1,20 @@
 export default {
-  relations: (relation, musicVideo, thing) => ({
-    datetimestamp:
-      relation('generateAbsoluteDatetimestamp', musicVideo.date, thing.date),
-
+  relations: (relation, musicVideo) => ({
     artistCredit:
       relation('generateArtistCredit', musicVideo.artistContribs, []),
   }),
 
-  data: (data) => ({
+  data: (musicVideo) => ({
     label:
-      (data.label !== 'Music video'
-        ? data.label
+      (musicVideo.label !== 'Music video'
+        ? musicVideo.label
         : null),
   }),
 
   generate(data, relations, {html, language}) {
-    const {artistCredit, datetimestamp} = relations;
+    const {artistCredit} = relations;
     const capsule = language.encapsulate('misc.musicVideo');
 
-    datetimestamp.setSlot('style', 'full-difference');
-
     let artistsLineCapsule = language.encapsulate(capsule, 'artistsLine');
     let artistsLineOptions = {[language.onlyIfOptions]: ['credit']};
 
@@ -28,11 +23,6 @@ export default {
       artistsLineOptions.label = data.label;
     }
 
-    if (!html.isBlank(datetimestamp)) {
-      artistsLineCapsule += '.withDate';
-      artistsLineOptions.date = datetimestamp;
-    }
-
     artistsLineOptions.credit =
       html.tag('span', {class: 'by'},
         {[html.onlyIfContent]: true},
@@ -46,16 +36,6 @@ export default {
           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();
+    return language.$(artistsLineCapsule, artistsLineOptions);
   },
 }
diff --git a/src/content/dependencies/generateMusicVideoDateLine.js b/src/content/dependencies/generateMusicVideoDateLine.js
new file mode 100644
index 00000000..4fb281f4
--- /dev/null
+++ b/src/content/dependencies/generateMusicVideoDateLine.js
@@ -0,0 +1,56 @@
+function sameDay(musicVideo, thing) {
+  if (!musicVideo.dateIsSpecified) return null;
+
+  const compare = (a, b) =>
+    a.toDateString() === b.toDateString();
+
+  const album = thing.isTrack ? thing.album : thing;
+  const track = thing.isTrack ? thing : null;
+
+  if (compare(musicVideo.date, album.date)) {
+    if (album.style === 'single') {
+      return 'single';
+    } else {
+      return 'album';
+    }
+  }
+
+  if (compare(musicVideo.date, track.date)) {
+    return 'track';
+  }
+
+  return null;
+
+}
+
+export default {
+  data: (musicVideo, thing) => ({
+    date:
+      musicVideo.date,
+
+    dateIsSpecified:
+      musicVideo.dateIsSpecified,
+
+    sameDay:
+      sameDay(musicVideo, thing),
+  }),
+
+  generate: (data, {language}) =>
+    language.encapsulate('misc.musicVideo.date', capsule => [
+      data.sameDay === 'album' &&
+        language.$(capsule, 'sameDayAsAlbum'),
+
+      data.sameDay === 'single' &&
+        language.$(capsule, 'sameDayAsTrack'),
+
+      data.sameDay === 'track' &&
+        language.$(capsule, 'sameDayAsTrack'),
+
+      data.sameDay === null &&
+      data.dateIsSpecified &&
+        language.$(capsule, {
+          date:
+            language.formatDate(data.date),
+        }),
+    ]),
+};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 806eac3a..71beae4a 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1897,8 +1897,16 @@ p.image-details.origin-details .filename-line {
   text-align: center;
 }
 
-.music-video .music-video-info {
-  margin: 5px 5px 6px;
+.music-video .image-container ~ p {
+  margin: 3px 5px;
+}
+
+.music-video .image-container + p {
+  margin-top: 5px;
+}
+
+.music-video .image-container ~ p:last-child {
+  margin-bottom: 6px;
 }
 
 .music-video .image-container {
@@ -1944,17 +1952,17 @@ p.image-details.origin-details .filename-line {
   transform: scale(1.02);
 }
 
-.music-video .release-line {
+.music-video .artists-line {
   display: block;
   padding-left: 1.2ch;
   text-indent: -1.2ch;
 }
 
-.music-video .release-line > * {
+.music-video .artists-line > * {
   text-indent: 0;
 }
 
-.music-video .release-line + br {
+.music-video .artists-line + br {
   display: none;
 }