display original file size in image overlay

4 files changed, 36 insertions, 7 deletions

diff --git a/src/write/bind-utilities.js b/src/write/bind-utilities.js
index 427111b4..993aa3ce 100644
--- a/src/write/bind-utilities.js
+++ b/src/write/bind-utilities.js
@@ -55,6 +55,7 @@ export function bindUtilities({
   absoluteTo,
   defaultLanguage,
   getSizeOfAdditionalFile,
+  getSizeOfImageFile,
   language,
   languages,
   to,
@@ -70,6 +71,7 @@ export function bindUtilities({
     absoluteTo,
     defaultLanguage,
     getSizeOfAdditionalFile,
+    getSizeOfImageFile,
     html,
     language,
     languages,
@@ -80,7 +82,9 @@ export function bindUtilities({
 
   bound.img = bindOpts(img, {
     [bindOpts.bindIndex]: 0,
+    getSizeOfImageFile,
     html,
+    to,
   });
 
   bound.getColors = bindOpts(getColors, {
diff --git a/src/write/build-modes/live-dev-server.js b/src/write/build-modes/live-dev-server.js
index a8fd3705..dfebda0e 100644
--- a/src/write/build-modes/live-dev-server.js
+++ b/src/write/build-modes/live-dev-server.js
@@ -63,6 +63,7 @@ export async function go({
   cachebust,
   developersComment,
   getSizeOfAdditionalFile,
+  getSizeOfImageFile,
 }) {
   const host = cliOptions['host'] ?? defaultHost;
   const port = parseInt(cliOptions['port'] ?? defaultPort);
@@ -313,6 +314,7 @@ export async function go({
         absoluteTo,
         defaultLanguage,
         getSizeOfAdditionalFile,
+        getSizeOfImageFile,
         language,
         languages,
         to,
diff --git a/src/write/build-modes/static-build.js b/src/write/build-modes/static-build.js
index fa724536..8e02342c 100644
--- a/src/write/build-modes/static-build.js
+++ b/src/write/build-modes/static-build.js
@@ -95,6 +95,7 @@ export async function go({
   cachebust,
   developersComment,
   getSizeOfAdditionalFile,
+  getSizeOfImageFile,
 }) {
   const outputPath = cliOptions['out-path'] || process.env.HSMUSIC_OUT;
   const appendIndexHTML = cliOptions['append-index-html'] ?? false;
@@ -304,6 +305,7 @@ export async function go({
           absoluteTo,
           defaultLanguage,
           getSizeOfAdditionalFile,
+          getSizeOfImageFile,
           language,
           languages,
           to,
diff --git a/src/write/page-template.js b/src/write/page-template.js
index bd52c456..e0b37d49 100644
--- a/src/write/page-template.js
+++ b/src/write/page-template.js
@@ -6,7 +6,6 @@ import {getColors} from '../util/colors.js';
 import {
   getFooterLocalizationLinks,
   getRevealStringFromContentWarningMessage,
-  img,
 } from '../misc-templates.js';
 
 export function generateDevelopersCommentHTML({
@@ -51,6 +50,7 @@ export function generateDocumentHTML(pageInfo, {
   developersComment,
   generateCoverLink,
   generateStickyHeadingContainer,
+  img,
   getThemeString,
   language,
   languages,
@@ -487,7 +487,6 @@ export function generateDocumentHTML(pageInfo, {
       html.tag('div', {id: 'info-card'}, [
         html.tag('div', {class: ['info-card-art-container', 'no-reveal']},
           img({
-            html,
             class: 'info-card-art',
             src: '',
             link: true,
@@ -495,7 +494,6 @@ export function generateDocumentHTML(pageInfo, {
           })),
         html.tag('div', {class: ['info-card-art-container', 'reveal']},
           img({
-            html,
             class: 'info-card-art',
             src: '',
             link: true,
@@ -527,10 +525,33 @@ export function generateDocumentHTML(pageInfo, {
         html.tag('img', {id: 'image-overlay-image-thumb'}),
       ]),
       html.tag('div', {id: 'image-overlay-action-container'}, [
-        language.$('releaseInfo.viewOriginalFile', {
-          link: html.tag('a', {id: 'image-overlay-view-original'},
-            language.$('releaseInfo.viewOriginalFile.link')),
-        }),
+        html.tag('div', {id: 'image-overlay-action-content-without-size'},
+          language.$('releaseInfo.viewOriginalFile', {
+            link: html.tag('a', {class: 'image-overlay-view-original'},
+              language.$('releaseInfo.viewOriginalFile.link')),
+          })),
+
+        html.tag('div', {id: 'image-overlay-action-content-with-size'}, [
+          language.$('releaseInfo.viewOriginalFile.withSize', {
+            link: html.tag('a', {class: 'image-overlay-view-original'},
+              language.$('releaseInfo.viewOriginalFile.link')),
+            size: html.tag('span',
+              {[html.joinChildren]: ''},
+              [
+                html.tag('span', {id: 'image-overlay-file-size-kilobytes'},
+                  language.$('count.fileSize.kilobytes', {
+                    kilobytes: html.tag('span', {class: 'image-overlay-file-size-count'}),
+                  })),
+                html.tag('span', {id: 'image-overlay-file-size-megabytes'},
+                  language.$('count.fileSize.megabytes', {
+                    megabytes: html.tag('span', {class: 'image-overlay-file-size-count'}),
+                  })),
+              ]),
+          }),
+
+          html.tag('span', {id: 'image-overlay-file-size-warning'},
+            language.$('releaseInfo.viewOriginalFile.sizeWarning')),
+        ]),
       ]),
     ]));