feat(webp): Making webp works for story mode

Signed-off-by: Vincent Boutour <[email protected]>
ViBiOh · Jul 31, 2022 · e6f8dd1 · e6f8dd1
1 parent 8afa4a0
commit e6f8dd1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/cmd/fibr/templates/async-image.html b/cmd/fibr/templates/async-image.html
@@ -137,14 +137,19 @@
 
         try {
           await isWebPCompatible();
-          window.dispatchEvent(new Event('thumbnail-done'));
         } catch (e) {
-          resolveScript(
+          await resolveScript(
             'https://unpkg.com/[email protected]/dist-cjs/webp-hero.bundle.js',
             'sha512-DA6h9H5Sqn55/uVn4JI4aSPFnAWoCQYYDXUnvjOAMNVx11///hX4QaFbQt5yWsrIm9hSI5fLJYfRWt3KXneSXQ==',
             'anonymous',
-          ).then(() => new webpHero.WebpMachine().polyfillDocument());
+          );
+
+          const webpMachine = new webpHero.WebpMachine();
+          webpMachine.polyfillDocument();
+          webpMachine.clearCache();
         }
+
+        window.dispatchEvent(new Event('thumbnail-done'));
       },
       false,
     );

diff --git a/cmd/fibr/templates/story.html b/cmd/fibr/templates/story.html
@@ -238,17 +238,30 @@
     });
 
     window.addEventListener('thumbnail-done', () => {
-      const lazyImageObserver = new IntersectionObserver((entries, observer) => {
-        entries.forEach((entry) => {
-          if (!entry.isIntersecting) {
-            return;
-          }
-
-          const lazyImage = entry.target;
-          lazyImage.src = lazyImage.dataset.src;
-          lazyImageObserver.unobserve(lazyImage);
-        });
-      });
+      const lazyImageObserver = new IntersectionObserver(
+        async (entries, observer) => {
+          entries.forEach(async (entry) => {
+            if (!entry.isIntersecting) {
+              return;
+            }
+
+            const lazyImage = entry.target;
+            if (window.webpHero) {
+              const content = await fetch(lazyImage.dataset.src, {
+                credentials: 'same-origin',
+              }).arrayBuffer();
+
+              const webpMachine = new webpHero.WebpMachine();
+              lazyImage.src = await webpMachine.decode(new Uint8Array(content));
+              webpMachine.clearCache();
+            } else {
+              lazyImage.src = lazyImage.dataset.src;
+            }
+
+            lazyImageObserver.unobserve(lazyImage);
+          });
+        },
+      );
 
       document
         .querySelectorAll('img.thumbnail')