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 +++++++++++++++++++ src/misc-templates.js | 50 ---------------------- 4 files changed, 57 insertions(+), 50 deletions(-) create mode 100644 src/content/dependencies/generateCoverArtwork.js (limited to 'src') diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index bc4ac1d..74d80e3 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 41c9d30..e959f27 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 0000000..62fc356 --- /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), + })), + ])); + }, +}; diff --git a/src/misc-templates.js b/src/misc-templates.js index f230772..885efa9 100644 --- a/src/misc-templates.js +++ b/src/misc-templates.js @@ -137,56 +137,6 @@ function unbound_getRevealStringFromArtTags(tags, { ); } -// Cover art links - -function unbound_generateCoverLink({ - html, - img, - language, - link, - - getRevealStringFromArtTags, - - alt, - path, - src, - tags = [], - to, - wikiData, -}) { - const {wikiInfo} = wikiData; - - if (!src && path) { - src = to(...path); - } - - if (!src) { - throw new Error(`Expected src or path`); - } - - const linkedTags = tags.filter(tag => !tag.isContentWarning); - - return html.tag('div', {id: 'cover-art-container'}, [ - img({ - src, - alt, - thumb: 'medium', - id: 'cover-art', - link: true, - square: true, - reveal: getRevealStringFromArtTags(tags), - }), - - wikiInfo.enableArtTagUI && - linkedTags.length && - html.tag('p', {class: 'tags'}, - language.$('releaseInfo.artTags.inline', { - tags: language.formatUnitList( - linkedTags.map(tag => link.tag(tag))), - })), - ]); -} - // Divided track lists function unbound_generateTrackListDividedByGroups(tracks, { -- cgit 1.3.0-6-gf8a5