From 5522bb97469e50f7762259d310d9db246ef8ce4a Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <towerofnix@gmail.com>
Date: Fri, 7 May 2021 15:19:21 -0300
Subject: use banner dimensions from data, not arbitrarily

this prevents some nasty layout flicker on album pages with banners!
the old values are still there as fallback, but you should probably
specify the new Banner Dimensions field to make use of this.
---
 src/upd8.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/upd8.js b/src/upd8.js
index c0bea08..2647911 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -654,6 +654,16 @@ function getBasicField(lines, name) {
     return line && line.slice(name.length + 1).trim();
 }
 
+function getDimensionsField(lines, name) {
+    const string = getBasicField(lines, name);
+    if (!string) return string;
+    const parts = string.split(/[x,* ]+/g);
+    if (parts.length !== 2) throw new Error(`Invalid dimensions: ${string} (expected width & height)`);
+    const nums = parts.map(part => Number(part.trim()));
+    if (nums.includes(NaN)) throw new Error(`Invalid dimensions: ${string} (couldn't parse as numbers)`);
+    return nums;
+}
+
 function getBooleanField(lines, name) {
     // The ?? oper8tor (which is just, hilariously named, lol) can 8e used to
     // specify a default!
@@ -1197,6 +1207,7 @@ async function processAlbumDataFile(file) {
     album.wallpaperStyle = getMultilineField(albumSection, 'Wallpaper Style');
     album.bannerArtists = getContributionField(albumSection, 'Banner Art');
     album.bannerStyle = getMultilineField(albumSection, 'Banner Style');
+    album.bannerDimensions = getDimensionsField(albumSection, 'Banner Dimensions');
     album.date = getBasicField(albumSection, 'Date');
     album.trackArtDate = getBasicField(albumSection, 'Track Art Date') || album.date;
     album.coverArtDate = getBasicField(albumSection, 'Cover Art Date') || album.date;
@@ -2206,6 +2217,7 @@ writePage.html = (pageFn, {paths, strings, to}) => {
     banner.classes ??= [];
     banner.src ??= '';
     banner.position ??= '';
+    banner.dimensions ??= [0, 0];
 
     main.classes ??= [];
     main.content ??= '';
@@ -2328,8 +2340,8 @@ writePage.html = (pageFn, {paths, strings, to}) => {
         html.tag('img', {
             src: banner.src,
             alt: banner.alt,
-            width: 1100,
-            height: 200
+            width: banner.dimensions[0] || 1100,
+            height: banner.dimensions[1] || 200
         })
     );
 
@@ -2989,6 +3001,7 @@ function writeAlbumPage(album) {
         ]),
 
         banner: album.bannerArtists && {
+            dimensions: album.bannerDimensions,
             src: to('media.albumBanner', album.directory),
             alt: strings('misc.alt.albumBanner'),
             position: 'top'
@@ -3231,6 +3244,7 @@ function writeTrackPage(track) {
         /*
         banner: album.bannerArtists && {
             classes: ['dim'],
+            dimensions: album.bannerDimensions,
             src: to('media.albumBanner', album.directory),
             alt: strings('misc.alt.albumBanner'),
             position: 'bottom'
-- 
cgit 1.3.0-6-gf8a5