From f61b789661300238460001a91697269a00de7271 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 5 Apr 2023 21:40:46 -0300 Subject: content: generateCoverArtwork --- src/content/dependencies/generateAlbumInfoPage.js | 3 ++ .../dependencies/generateAlbumInfoPageContent.js | 11 ++++++ src/content/dependencies/generateCoverArtwork.js | 43 ++++++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 src/content/dependencies/generateCoverArtwork.js (limited to 'src/content') diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index bc4ac1dc..74d80e33 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -13,6 +13,7 @@ export default { relations(relation, album) { const relations = {}; + relations.content = relation('generateAlbumInfoPageContent', album); relations.socialEmbed = relation('generateAlbumSocialEmbed', album); relations.albumStyleRules = relation('generateAlbumStyleRules', album); relations.colorStyleRules = relation('generateColorStyleRules', album.color); @@ -25,6 +26,8 @@ export default { }) { const page = {}; + Object.assign(page, relations.content); + page.title = language.$('albumPage.title', {album: data.name}); page.themeColor = data.color; diff --git a/src/content/dependencies/generateAlbumInfoPageContent.js b/src/content/dependencies/generateAlbumInfoPageContent.js index 41c9d309..e959f274 100644 --- a/src/content/dependencies/generateAlbumInfoPageContent.js +++ b/src/content/dependencies/generateAlbumInfoPageContent.js @@ -7,6 +7,7 @@ export default { 'generateAlbumTrackList', 'generateContributionLinks', 'generateContentHeading', + 'generateCoverArtwork', 'linkAlbumCommentary', 'linkAlbumGallery', 'linkExternal', @@ -21,6 +22,9 @@ export default { relations(relation, album) { const relations = {}; + relations.cover = + relation('generateCoverArtwork', album.artTags); + const contributionLinksRelation = contribs => relation('generateContributionLinks', contribs, { showContribution: true, @@ -80,6 +84,9 @@ export default { data(album) { const data = {}; + data.coverArtDirectory = album.directory; + data.coverArtFileExtension = album.coverArtFileExtension; + data.date = album.date; data.duration = accumulateSum(album.tracks, track => track.duration); data.durationApproximate = album.tracks.length > 1; @@ -109,6 +116,10 @@ export default { }) { const content = {}; + content.cover = relations.cover + .slot('path', ['media.albumCover', data.coverArtDirectory, data.coverArtFileExtension]) + .slot('alt', language.$('misc.alt.trackCover')); + content.main = { headingMode: 'sticky', content: html.tag(null, [ diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js new file mode 100644 index 00000000..62fc3566 --- /dev/null +++ b/src/content/dependencies/generateCoverArtwork.js @@ -0,0 +1,43 @@ +import {empty} from '../../util/sugar.js'; + +export default { + contentDependencies: ['image', 'linkArtTag'], + extraDependencies: ['html', 'language'], + + relations(relation, artTags) { + const relations = {}; + + relations.image = + relation('image', artTags); + + if (artTags) { + relations.tagLinks = + artTags + .filter(tag => !tag.isContentWarning) + .map(tag => relation('linkArtTag', tag)); + } else { + relations.tagLinks = null; + } + + return relations; + }, + + generate(relations, {html, language}) { + return html.template(slot => + html.tag('div', {id: 'cover-art-container'}, [ + relations.image + .slot('path', slot('path')) + .slot('alt', slot('alt')) + .slot('thumb', 'medium') + .slot('id', 'cover-art') + .slot('link', true) + .slot('square', true), + + !empty(relations.tagLinks) && + html.tag('p', + language.$('releaseInfo.artTags.inline', { + tags: language.formatUnitList(relations.tagLinks), + })), + ])); + }, +}; -- cgit 1.3.0-6-gf8a5