display original file size in image overlay

2 files changed, 66 insertions, 3 deletions

diff --git a/src/static/client.js b/src/static/client.js
index 47936d82..af358210 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -670,14 +670,19 @@ function handleImageLinkClicked(evt) {
   container.classList.remove('loaded');
   container.classList.remove('errored');
 
-  const viewOriginal = document.getElementById('image-overlay-view-original');
+  const allViewOriginal = document.getElementsByClassName('image-overlay-view-original');
   const mainImage = document.getElementById('image-overlay-image');
   const thumbImage = document.getElementById('image-overlay-image-thumb');
 
   const source = evt.target.closest('a').href;
   mainImage.src = source.replace(/\.(jpg|png)$/, '.huge.jpg');
   thumbImage.src = source.replace(/\.(jpg|png)$/, '.small.jpg');
-  viewOriginal.href = source;
+  for (const viewOriginal of allViewOriginal) {
+    viewOriginal.href = source;
+  }
+
+  const fileSize = evt.target.closest('a').querySelector('img').dataset.originalSize;
+  updateFileSizeInformation(fileSize);
 
   mainImage.addEventListener('load', handleMainImageLoaded);
   mainImage.addEventListener('error', handleMainImageErrored);
@@ -695,4 +700,48 @@ function handleImageLinkClicked(evt) {
   }
 }
 
+function updateFileSizeInformation(fileSize) {
+  const fileSizeWarningThreshold = 8 * 10 ** 6;
+
+  const actionContentWithoutSize = document.getElementById('image-overlay-action-content-without-size');
+  const actionContentWithSize = document.getElementById('image-overlay-action-content-with-size');
+
+  if (!fileSize) {
+    actionContentWithSize.classList.remove('visible');
+    actionContentWithoutSize.classList.add('visible');
+    return;
+  }
+
+  actionContentWithoutSize.classList.remove('visible');
+  actionContentWithSize.classList.add('visible');
+
+  const megabytesContainer = document.getElementById('image-overlay-file-size-megabytes');
+  const kilobytesContainer = document.getElementById('image-overlay-file-size-kilobytes');
+  const megabytesContent = megabytesContainer.querySelector('.image-overlay-file-size-count');
+  const kilobytesContent = kilobytesContainer.querySelector('.image-overlay-file-size-count');
+  const fileSizeWarning = document.getElementById('image-overlay-file-size-warning');
+
+  fileSize = parseInt(fileSize);
+  const round = (exp) => Math.round(fileSize / 10 ** (exp - 1)) / 10;
+  console.log(round(3));
+
+  if (fileSize > fileSizeWarningThreshold) {
+    fileSizeWarning.classList.add('visible');
+  } else {
+    fileSizeWarning.classList.remove('visible');
+  }
+
+  if (fileSize > 10 ** 6) {
+    megabytesContainer.classList.add('visible');
+    kilobytesContainer.classList.remove('visible');
+    megabytesContent.innerText = round(6);
+  } else {
+    megabytesContainer.classList.remove('visible');
+    kilobytesContainer.classList.add('visible');
+    kilobytesContent.innerText = round(3);
+  }
+
+  void fileSizeWarning;
+}
+
 addImageOverlayClickHandlers();
diff --git a/src/static/site3.css b/src/static/site3.css
index 449e6fad..484c9f9d 100644
--- a/src/static/site3.css
+++ b/src/static/site3.css
@@ -1391,6 +1391,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 
 #image-overlay-image-thumb {
   filter: blur(16px);
+  transform: scale(1.5);
 }
 
 #image-overlay-container.loaded #image-overlay-image-thumb {
@@ -1400,7 +1401,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 }
 
 #image-overlay-action-container {
-  padding: 8px 4px 6px 4px;
+  padding: 4px 4px 6px 4px;
   border-radius: 0 0 5px 5px;
   background: var(--bg-black-color);
   color: white;
@@ -1408,6 +1409,19 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   text-align: center;
 }
 
+#image-overlay-container #image-overlay-action-content-without-size:not(.visible),
+#image-overlay-container #image-overlay-action-content-with-size:not(.visible),
+#image-overlay-container #image-overlay-file-size-warning:not(.visible),
+#image-overlay-container #image-overlay-file-size-kilobytes:not(.visible),
+#image-overlay-container #image-overlay-file-size-megabytes:not(.visible) {
+  display: none;
+}
+
+#image-overlay-file-size-warning {
+  opacity: 0.8;
+  font-size: 0.9em;
+}
+
 /* important easter egg mode */
 
 html[data-language-code="preview-en"][data-url-key="localized.home"] #content