content, client: integrate separate media cache

2 files changed, 16 insertions, 7 deletions

diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 6c0aeec..8aa9753 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -77,6 +77,11 @@ export default {
       originalSrc = '';
     }
 
+    // TODO: This feels janky. It's necessary to deal with static content that
+    // includes strings like <img src="media/misc/foo.png">, but processing the
+    // src string directly when a parts-formed path *is* available seems wrong.
+    // It should be possible to do urls.from(slots.path[0]).to(...slots.path),
+    // for example, but will require reworking the control flow here a little.
     let mediaSrc = null;
     if (originalSrc.startsWith(to('media.root'))) {
       mediaSrc =
@@ -160,7 +165,7 @@ export default {
       // which is the HTML output-appropriate path including `../../` or
       // another alternate base path.
       const selectedSize = getThumbnailEqualOrSmaller(slots.thumb, mediaSrc);
-      thumbSrc = originalSrc.replace(/\.(jpg|png)$/, `.${selectedSize}.jpg`);
+      thumbSrc = to('thumb.path', mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`));
 
       const dimensions = getDimensionsOfImagePath(mediaSrc);
       availableThumbs = getThumbnailsAvailableForDimensions(dimensions);
diff --git a/src/static/client2.js b/src/static/client2.js
index 758d91a..523b48d 100644
--- a/src/static/client2.js
+++ b/src/static/client2.js
@@ -954,10 +954,14 @@ function handleImageLinkClicked(evt) {
   const thumbImage = document.getElementById('image-overlay-image-thumb');
 
   const {href: originalSrc} = evt.target.closest('a');
-  const {dataset: {
-    originalSize: originalFileSize,
-    thumbs: availableThumbList,
-  }} = evt.target.closest('a').querySelector('img');
+
+  const {
+    src: embeddedSrc,
+    dataset: {
+      originalSize: originalFileSize,
+      thumbs: availableThumbList,
+    },
+  } = evt.target.closest('a').querySelector('img');
 
   updateFileSizeInformation(originalFileSize);
 
@@ -967,8 +971,8 @@ function handleImageLinkClicked(evt) {
   if (availableThumbList) {
     const {thumb: mainThumb, length: mainLength} = getPreferredThumbSize(availableThumbList);
     const {thumb: smallThumb, length: smallLength} = getSmallestThumbSize(availableThumbList);
-    mainSrc = originalSrc.replace(/\.(jpg|png)$/, `.${mainThumb}.jpg`);
-    thumbSrc = originalSrc.replace(/\.(jpg|png)$/, `.${smallThumb}.jpg`);
+    mainSrc = embeddedSrc.replace(/\.[a-z]+\.(jpg|png)$/, `.${mainThumb}.jpg`);
+    thumbSrc = embeddedSrc.replace(/\.[a-z]+\.(jpg|png)$/, `.${smallThumb}.jpg`);
     // Show the thumbnail size on each <img> element's data attributes.
     // Y'know, just for debugging convenience.
     mainImage.dataset.displayingThumb = `${mainThumb}:${mainLength}`;