From c53d9751c7a8d8687a6a27b308462c5ca77953e5 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 6 Feb 2024 18:20:51 -0400 Subject: content, css: generateAlbumTrackList: handle missing durations With bad CSS, at the moment. --- .../dependencies/generateAlbumTrackListItem.js | 33 ++++++++++++++++++---- .../generateAlbumTrackListMissingDuration.js | 33 ++++++++++++++++++++++ 2 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 src/content/dependencies/generateAlbumTrackListMissingDuration.js (limited to 'src/content') 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'), + }), + }), +}; -- cgit 1.3.0-6-gf8a5