From d7d618d9b9cbe616282d84e60de90010d18ab9c5 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 27 Jan 2021 20:57:00 -0400 Subject: support individual opacity for album wallpapers! --- static/site.css | 3 ++- upd8.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/static/site.css b/static/site.css index f0e10bb..1e8c078 100644 --- a/static/site.css +++ b/static/site.css @@ -13,6 +13,7 @@ --bg-color: #222222; --theme: 0; /* 0: dark (below light), 1: light (below dark) */ --bg: url("../media/bg.jpg"); + --bg-opacity: 0.5; } body { @@ -35,7 +36,7 @@ body::before { background-image: var(--bg); background-position: center; background-size: cover; - opacity: 0.5; + opacity: var(--bg-opacity); } #page-container { diff --git a/upd8.js b/upd8.js index 15cd03e..1624f34 100644 --- a/upd8.js +++ b/upd8.js @@ -619,6 +619,7 @@ async function processAlbumDataFile(file) { album.name = getBasicField(albumSection, 'Album'); album.artists = getContributionField(albumSection, 'Artists') || getContributionField(albumSection, 'Artist'); album.wallpaperArtists = getContributionField(albumSection, 'Wallpaper Art'); + album.wallpaperOpacity = getBasicField(albumSection, 'Wallpaper Opacity') || 0.5; album.date = getBasicField(albumSection, 'Date'); album.trackArtDate = getBasicField(albumSection, 'Track Art Date') || album.date; album.coverArtDate = getBasicField(albumSection, 'Cover Art Date') || album.date; @@ -666,9 +667,14 @@ async function processAlbumDataFile(file) { return {error: `Invalid Date field: "${album.date}"`}; } + if (album.wallpaperOpacity && isNaN(parseFloat(album.wallpaperOpacity))) { + return {error: `Invalid Wallpaper Opacity field: "${album.wallpaperOpacity}"}`}; + } + album.date = new Date(album.date); album.trackArtDate = new Date(album.trackArtDate); album.coverArtDate = new Date(album.coverArtDate); + album.wallpaperOpacity = parseFloat(album.wallpaperOpacity); if (isNaN(Date.parse(album.trackArtDate))) { return {error: `Invalid Track Art Date field: "${album.trackArtDate}"`}; @@ -3334,7 +3340,7 @@ function rgb2hsl(r,g,b) { } function getThemeString(thing) { - const {color, wallpaperArtists = null} = thing; + const {color} = thing; const [ r, g, b ] = color.slice(1) .match(/[0-9a-fA-F]{2,2}/g) @@ -3350,6 +3356,7 @@ function getThemeString(thing) { ); let bgUrl = ''; + let bgOpacity = 0; if (album?.wallpaperArtists) { // The 8ack-directory (..) here is necessary 8ecause CSS doesn't want // to consider the fact that this is, like, not talking a8out a URL @@ -3358,11 +3365,12 @@ function getThemeString(thing) { // file! 8ut I guess that's not what CSS spec says, or whatever. // Pretty cringe t8h. bgUrl = `../${C.MEDIA_DIRECTORY}/${C.MEDIA_ALBUM_ART_DIRECTORY}/${album.directory}/bg.jpg`; + bgOpacity = album.wallpaperOpacity; } return [ color && `--fg-color: ${color}; --dim-color: ${dim}`, - bgUrl && `--bg: url("${bgUrl}")` + bgUrl && `--bg: url("${bgUrl}"); --bg-opacity: ${bgOpacity}` ].filter(Boolean).join('; '); } -- cgit 1.3.0-6-gf8a5