dynamic thumb size for image overlay

2 files changed, 30 insertions, 3 deletions

diff --git a/src/gen-thumbs.js b/src/gen-thumbs.js
index 21402cb6..64f1f27a 100644
--- a/src/gen-thumbs.js
+++ b/src/gen-thumbs.js
@@ -78,7 +78,9 @@ const CACHE_FILE = 'thumbnail-cache.json';
 const WARNING_DELAY_TIME = 10000;
 
 const thumbnailSpec = {
-  'huge': {size: 1600, quality: 95},
+  'huge': {size: 1600, quality: 90},
+  'semihuge': {size: 1200, quality: 92},
+  'large': {size: 800, quality: 93},
   'medium': {size: 400, quality: 95},
   'small': {size: 250, quality: 85},
 };
diff --git a/src/static/client.js b/src/static/client.js
index af358210..addc93a4 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -674,8 +674,10 @@ function handleImageLinkClicked(evt) {
   const mainImage = document.getElementById('image-overlay-image');
   const thumbImage = document.getElementById('image-overlay-image-thumb');
 
+  const mainThumbSize = getPreferredThumbSize();
+
   const source = evt.target.closest('a').href;
-  mainImage.src = source.replace(/\.(jpg|png)$/, '.huge.jpg');
+  mainImage.src = source.replace(/\.(jpg|png)$/, `.${mainThumbSize}.jpg`);
   thumbImage.src = source.replace(/\.(jpg|png)$/, '.small.jpg');
   for (const viewOriginal of allViewOriginal) {
     viewOriginal.href = source;
@@ -700,6 +702,30 @@ function handleImageLinkClicked(evt) {
   }
 }
 
+function getPreferredThumbSize() {
+  // Assuming a square, the image will be constrained to the lesser window
+  // dimension. Coefficient here matches CSS dimensions for image overlay.
+  const constrainedLength = Math.floor(Math.min(
+    0.80 * window.innerWidth,
+    0.80 * window.innerHeight));
+
+  // Match device pixel ratio, which is 2x for "retina" displays and certain
+  // device configurations.
+  const visualLength = window.devicePixelRatio * constrainedLength;
+
+  const largeLength = 800;
+  const semihugeLength = 1200;
+  const goodEnoughThreshold = 0.90;
+
+  if (Math.floor(visualLength * goodEnoughThreshold) <= largeLength) {
+    return 'large';
+  } else if (Math.floor(visualLength * goodEnoughThreshold) <= semihugeLength) {
+    return 'semihuge';
+  } else {
+    return 'huge';
+  }
+}
+
 function updateFileSizeInformation(fileSize) {
   const fileSizeWarningThreshold = 8 * 10 ** 6;
 
@@ -723,7 +749,6 @@ function updateFileSizeInformation(fileSize) {
 
   fileSize = parseInt(fileSize);
   const round = (exp) => Math.round(fileSize / 10 ** (exp - 1)) / 10;
-  console.log(round(3));
 
   if (fileSize > fileSizeWarningThreshold) {
     fileSizeWarning.classList.add('visible');