content, css: generateAlbumTrackList: handle missing durations

With bad CSS, at the moment.

4 files changed, 92 insertions, 10 deletions

diff --git a/src/content/dependencies/generateAlbumTrackListItem.js b/src/content/dependencies/generateAlbumTrackListItem.js
index a66414db..2772496e 100644
--- a/src/content/dependencies/generateAlbumTrackListItem.js
+++ b/src/content/dependencies/generateAlbumTrackListItem.js
@@ -2,13 +2,23 @@ import {compareArrays, empty} from '#sugar';
 
 export default {
   contentDependencies: [
+    'generateAlbumTrackListMissingDuration',
     'linkContribution',
     'linkTrack',
   ],
 
   extraDependencies: ['getColors', 'html', 'language'],
 
-  relations(relation, track) {
+  query(track) {
+    const query = {};
+
+    query.duration = track.duration ?? 0;
+    query.durationMissing = !track.duration;
+
+    return query;
+  },
+
+  relations(relation, query, track) {
     const relations = {};
 
     if (!empty(track.artistContribs)) {
@@ -20,13 +30,19 @@ export default {
     relations.trackLink =
       relation('linkTrack', track);
 
+    if (query.durationMissing) {
+      relations.missingDuration =
+        relation('generateAlbumTrackListMissingDuration');
+    }
+
     return relations;
   },
 
-  data(track, album) {
+  data(query, track, album) {
     const data = {};
 
-    data.duration = track.duration ?? 0;
+    data.duration = query.duration;
+    data.durationMissing = query.durationMissing;
 
     if (track.color !== album.color) {
       data.color = track.color;
@@ -50,11 +66,18 @@ export default {
       colorStyle = {style: `--primary-color: ${primary}`};
     }
 
-    const parts = ['trackList.item.withDuration'];
+    const parts = ['trackList.item'];
     const options = {};
 
+    parts.push('withDuration');
+
     options.duration =
-      language.formatDuration(data.duration);
+      (data.durationMissing
+        ? relations.missingDuration
+        : language.$('trackList.item.withDuration.duration', {
+            duration:
+              language.formatDuration(data.duration),
+          }));
 
     options.track =
       relations.trackLink
diff --git a/src/content/dependencies/generateAlbumTrackListMissingDuration.js b/src/content/dependencies/generateAlbumTrackListMissingDuration.js
new file mode 100644
index 00000000..40c0e353
--- /dev/null
+++ b/src/content/dependencies/generateAlbumTrackListMissingDuration.js
@@ -0,0 +1,33 @@
+export default {
+  contentDependencies: ['generateTextWithTooltip', 'generateTooltip'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation) => ({
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
+    tooltip:
+      relation('generateTooltip'),
+  }),
+
+  generate: (relations, {html, language}) =>
+    relations.textWithTooltip.slots({
+      attributes: {class: 'missing-duration'},
+
+      text:
+        html.tag('span',
+          language.$('trackList.item.withDuration.duration', {
+            duration:
+              html.tag('span', {class: 'duration-text'},
+                language.$('trackList.item.withDuration.duration.missing')),
+          })),
+
+      tooltip:
+        relations.tooltip.slots({
+          attributes: {class: 'missing-duration-tooltip'},
+
+          content:
+            language.$('trackList.item.withDuration.duration.missing.info'),
+        }),
+    }),
+};
diff --git a/src/static/site6.css b/src/static/site6.css
index 146ae7a4..f926a611 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -517,10 +517,27 @@ a:not([href]):hover {
   text-decoration-style: wavy !important;
 }
 
-.text-with-tooltip.datetimestamp > :first-child {
+.text-with-tooltip.datetimestamp > :first-child,
+.text-with-tooltip.missing-duration > :first-child {
   cursor: default;
 }
 
+.text-with-tooltip.missing-duration > :first-child {
+  opacity: 0.5;
+}
+
+.text-with-tooltip.missing-duration > :first-child:hover,
+.text-with-tooltip.missing-duration > :first-child.has-visible-tooltip {
+  text-decoration: none !important;
+  opacity: 1;
+}
+
+.text-with-tooltip.missing-duration > :first-child:hover .duration-text,
+.text-with-tooltip.missing-duration > :first-child.has-visible-tooltip .duration-text {
+  text-decoration: underline;
+  text-decoration-style: wavy;
+}
+
 .tooltip {
   position: absolute;
   z-index: 3;
@@ -557,7 +574,8 @@ li:not(:first-child:last-child) .tooltip,
   left: -34px;
 }
 
-.datetimestamp-tooltip {
+.datetimestamp-tooltip,
+.missing-duration-tooltip {
   padding: 3px 4px 2px 2px;
   left: -10px;
 }
@@ -581,7 +599,8 @@ li:not(:first-child:last-child) .tooltip,
   cursor: default;
 }
 
-.datetimestamp-tooltip .tooltip-content {
+.datetimestamp-tooltip .tooltip-content,
+.missing-duration-tooltip .tooltip-content {
   padding: 5px 6px;
   white-space: nowrap;
   font-size: 0.9em;
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index a1e4d842..0a6109a3 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -367,10 +367,17 @@ trackList:
     fromOther: "From somewhere else:"
 
   item:
-    withDuration: "({DURATION}) {TRACK}"
-    withDuration.withArtists: "({DURATION}) {TRACK} {BY}"
+    withDuration: "{DURATION} {TRACK}"
     withArtists: "{TRACK} {BY}"
+    withDuration.withArtists: "{DURATION} {TRACK} {BY}"
+
+    withDuration.duration:
+      _: "({DURATION})"
+      missing: "0:00"
+      missing.info: "no duration provided"
+
     withArtists.by: "by {ARTISTS}"
+
     rerelease: "{TRACK} (re-release)"
 
 #