content, css: generateAlbumTrackList: handle missing durations

With bad CSS, at the moment.

2 files changed, 61 insertions, 5 deletions

diff --git a/src/content/dependencies/generateAlbumTrackListItem.js b/src/content/dependencies/generateAlbumTrackListItem.js
index a66414d..2772496 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 0000000..40c0e35
--- /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'),
+        }),
+    }),
+};