diff options
| -rw-r--r-- | src/content/dependencies/generateMusicVideo.js | 52 | ||||
| -rw-r--r-- | src/content/dependencies/generateMusicVideoReleaseLine.js | 61 | ||||
| -rw-r--r-- | src/static/css/site.css | 10 | ||||
| -rw-r--r-- | src/strings-default.yaml | 30 |
4 files changed, 109 insertions, 44 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(); + }, +} diff --git a/src/static/css/site.css b/src/static/css/site.css index c9d8366d..1b4f3a84 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1944,6 +1944,16 @@ p.image-details.origin-details .filename-line { transform: scale(1.02); } +.music-video .release-line { + display: block; + padding-left: 1.2ch; + text-indent: -1.2ch; +} + +.music-video .release-line > * { + text-indent: 0; +} + .album-art-info { font-size: 0.8em; border: 2px solid var(--deep-color); diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 565330e0..4ddd6e48 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -988,22 +988,36 @@ misc: # musicVideo: # Strings for music videos, which are presented in a very similar - # fashion as cover artworks. + # fashion as cover artworks, although the strings are structured + # a bit differently. musicVideo: label: "Music video!" label.customLabel: "{LABEL}!" - by: "Music video by {ARTISTS}" - by.customLabel: "{LABEL} by {ARTISTS}" + artistsLine: >- + Music video {CREDIT} - by.withDate: >- - Music video ({DATE}) by {ARTISTS} + artistsLine.customLabel: >- + {LABEL} {CREDIT} - by.customLabel.withDate: >- - {LABEL} ({DATE}) by {ARTISTS} + artistsLine.withDate: >- + Music video ({DATE}) {CREDIT} - contributors: "Contributors: {ARTISTS}" + artistsLine.customLabel.withDate: >- + {LABEL} ({DATE}) {CREDIT} + + artistsLine.credit: >- + by {ARTISTS} + + date: >- + Released {DATE} + + contributorsLine: >- + Contributors: {CREDIT} + + contributorsLine.credit: >- + {ARTISTS} # coverGrid: # Generic strings for various sorts of gallery grids, displayed |