From 8fd50d6f0ba8dcfcfe34eb1321dc0bdd307b8c6a Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 5 May 2022 19:33:01 -0300 Subject: support albums without cover art --- src/data/things.js | 1 + src/data/yaml.js | 1 + src/misc-templates.js | 9 +++++++-- src/page/album.js | 6 ++++-- src/page/track.js | 5 +++-- src/static/site.css | 31 +++++++++++++++++++++++++++++-- src/strings-default.json | 3 ++- src/upd8.js | 12 ++++++++---- src/util/wiki-data.js | 13 ++++++++++--- 9 files changed, 65 insertions(+), 16 deletions(-) diff --git a/src/data/things.js b/src/data/things.js index 4cc5d06..b225143 100644 --- a/src/data/things.js +++ b/src/data/things.js @@ -474,6 +474,7 @@ Album.propertyDescriptors = { update: {validate: isDimensions} }, + hasCoverArt: Thing.common.flag(true), hasTrackArt: Thing.common.flag(true), isMajorRelease: Thing.common.flag(false), isListedOnHomepage: Thing.common.flag(true), diff --git a/src/data/yaml.js b/src/data/yaml.js index fdb7d9c..2e0e985 100644 --- a/src/data/yaml.js +++ b/src/data/yaml.js @@ -219,6 +219,7 @@ export const processAlbumDocument = makeProcessDocument(Album, { coverArtDate: 'Cover Art Date', dateAddedToWiki: 'Date Added', + hasCoverArt: 'Has Cover Art', hasTrackArt: 'Has Track Art', isMajorRelease: 'Major Release', isListedOnHomepage: 'Listed on Homepage', diff --git a/src/misc-templates.js b/src/misc-templates.js index 306063b..995aaa2 100644 --- a/src/misc-templates.js +++ b/src/misc-templates.js @@ -277,6 +277,7 @@ export function getGridHTML({ entries, srcFn, linkFn, + noSrcTextFn = () => '', altFn = () => '', detailsFn = null, lazy = true @@ -291,7 +292,8 @@ export function getGridHTML({ thumb: 'small', lazy: (typeof lazy === 'number' ? i >= lazy : lazy), square: true, - reveal: getRevealStringFromTags(item.artTags, {strings}) + reveal: getRevealStringFromTags(item.artTags, {strings}), + noSrcText: noSrcTextFn(item) })} ${item.name} ${detailsFn && `${detailsFn(item)}`} @@ -307,10 +309,13 @@ export function getAlbumGridHTML({ return getGridHTML({ srcFn: getAlbumCover, linkFn: link.album, - detailsFn: details && (album => strings('misc.albumGridDetails', { + detailsFn: details && (album => strings('misc.albumGrid.details', { tracks: strings.count.tracks(album.tracks.length, {unit: true}), time: strings.count.duration(getTotalDuration(album.tracks)) })), + noSrcTextFn: album => strings('misc.albumGrid.noCoverArt', { + album: album.name + }), ...props }); } diff --git a/src/page/album.js b/src/page/album.js index 70320b2..eac0a9f 100644 --- a/src/page/album.js +++ b/src/page/album.js @@ -118,6 +118,8 @@ export function write(album, {wikiData}) { strings }); + const cover = getAlbumCover(album); + return { title: strings('albumPage.title', {album: album.name}), stylesheet: getAlbumStylesheet(album), @@ -134,8 +136,8 @@ export function write(album, {wikiData}) { main: { content: fixWS` - ${generateCoverLink({ - src: getAlbumCover(album), + ${cover && generateCoverLink({ + src: cover, alt: strings('misc.alt.albumCover'), tags: album.artTags })} diff --git a/src/page/track.js b/src/page/track.js index 17e7585..960f00c 100644 --- a/src/page/track.js +++ b/src/page/track.js @@ -138,6 +138,7 @@ export function write(track, {wikiData}) { to }) => { const generateTrackList = bindOpts(unbound_generateTrackList, {getArtistString, link, strings}); + const cover = getTrackCover(track); return { title: strings('trackPage.title', {track: track.name}), @@ -160,8 +161,8 @@ export function write(track, {wikiData}) { main: { content: fixWS` - ${generateCoverLink({ - src: getTrackCover(track), + ${cover && generateCoverLink({ + src: cover, alt: strings('misc.alt.trackCover'), tags: track.artTags })} diff --git a/src/static/site.css b/src/static/site.css index c88343e..5122f3f 100644 --- a/src/static/site.css +++ b/src/static/site.css @@ -439,6 +439,26 @@ footer > :last-child { overflow: hidden; width: 100%; height: 100%; + position: relative; +} + +.image-text-area { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 5px 15px; + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset; + line-height: 1.35em; + color: var(--primary-color); + font-style: oblique; + text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75); } img { @@ -520,11 +540,18 @@ h1 { text-decoration: underline; } -.grid-item > span:first-of-type { - margin-top: 0.45em; +.grid-item > span { display: block; } +.grid-item > span:not(:first-child) { + margin-top: 2px; +} + +.grid-item > span:first-of-type { + margin-top: 6px; +} + .grid-item:hover > span:first-of-type { text-decoration: underline; } diff --git a/src/strings-default.json b/src/strings-default.json index 86fb73f..1fc6d8a 100644 --- a/src/strings-default.json +++ b/src/strings-default.json @@ -148,7 +148,8 @@ "misc.jumpTo.withLinks": "Jump to: {LINKS}.", "misc.contentWarnings": "cw: {WARNINGS}", "misc.contentWarnings.reveal": "click to show", - "misc.albumGridDetails": "({TRACKS}, {TIME})", + "misc.albumGrid.details": "({TRACKS}, {TIME})", + "misc.albumGrid.noCoverArt": "{ALBUM}", "misc.uiLanguage": "UI Language: {LANGUAGES}", "homepage.title": "{TITLE}", "homepage.news.title": "News", diff --git a/src/upd8.js b/src/upd8.js index 1447118..13cf2e7 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -606,6 +606,7 @@ function stringifyThings(thingData) { function img({ src, alt, + noSrcText = '', thumb: thumbKey, reveal, id, @@ -620,7 +621,7 @@ function img({ const willLink = typeof link === 'string' || link; const originalSrc = src; - const thumbSrc = thumbKey ? thumb[thumbKey](src) : src; + const thumbSrc = src && (thumbKey ? thumb[thumbKey](src) : src); const imgAttributes = html.attributes({ id: link ? '' : id, @@ -630,10 +631,13 @@ function img({ height }); - const nonlazyHTML = wrap(``); - const lazyHTML = lazy && wrap(``, true); + const noSrcHTML = !src && wrap(`
${noSrcText}
`); + const nonlazyHTML = src && wrap(``); + const lazyHTML = src && lazy && wrap(``, true); - if (lazy) { + if (!src) { + return noSrcHTML; + } else if (lazy) { return fixWS` ${lazyHTML} diff --git a/src/util/wiki-data.js b/src/util/wiki-data.js index 545e21e..c0c6dc3 100644 --- a/src/util/wiki-data.js +++ b/src/util/wiki-data.js @@ -98,7 +98,12 @@ export function filterAlbumsByCommentary(albums) { } export function getAlbumCover(album, {to}) { - return to('media.albumCover', album.directory, album.coverArtFileExtension); + // Some albums don't have art! This function returns null in that case. + if (album.hasCoverArt) { + return to('media.albumCover', album.directory, album.coverArtFileExtension); + } else { + return null; + } } export function getAlbumListTag(album) { @@ -155,8 +160,10 @@ export function getTotalDuration(tracks) { } export function getTrackCover(track, {to}) { - // Some al8ums don't have any track art at all, and in those, every track - // just inherits the al8um's own cover art. + // Some albums don't have any track art at all, and in those, every track + // just inherits the album's own cover art. Note that since cover art isn't + // guaranteed on albums either, it's possible that this function returns + // null! if (!track.hasCoverArt) { return getAlbumCover(track.album, {to}); } else { -- cgit 1.3.0-6-gf8a5