Add WebP polyfill to Vue.JS UI

openzim · Nov 7, 2024 · 9093847 · 9093847
1 parent 2630304
commit 9093847
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/zimui/package.json b/zimui/package.json
@@ -23,7 +23,8 @@
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3",
-    "vuetify": "^3.7.2"
+    "vuetify": "^3.7.2",
+    "webp-hero": "^0.0.2"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",

diff --git a/zimui/src/stores/main.ts b/zimui/src/stores/main.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import axios, { AxiosError } from 'axios'
 import type { PageContent, Shared, SharedPage } from '@/types/shared'
 import mathjaxService from '@/services/mathjax'
+import { WebpMachine, detectWebpSupport } from 'webp-hero'
 
 export type RootState = {
   shared: Shared | null
@@ -53,22 +54,32 @@ export const useMainStore = defineStore('main', {
       this.errorMessage = ''
       this.errorDetails = ''
 
-      return axios.get(`./content/page_content_${page.id}.json`).then(
-        (response) => {
-          this.isLoading = false
-          this.pageContent = response.data as PageContent
-          mathjaxService.removeMathJax()
-          mathjaxService.addMathJax(mathjaxService.frontFromTitle(page.title))
-        },
-        (error) => {
-          this.isLoading = false
-          this.shared = null
-          this.errorMessage = `Failed to load page content for page ${page.id}`
-          if (error instanceof AxiosError) {
-            this.handleAxiosError(error)
+      return axios
+        .get(`./content/page_content_${page.id}.json`)
+        .then(
+          (response) => {
+            this.isLoading = false
+            this.pageContent = response.data as PageContent
+            mathjaxService.removeMathJax()
+            mathjaxService.addMathJax(mathjaxService.frontFromTitle(page.title))
+          },
+          (error) => {
+            this.isLoading = false
+            this.shared = null
+            this.errorMessage = `Failed to load page content for page ${page.id}`
+            if (error instanceof AxiosError) {
+              this.handleAxiosError(error)
+            }
           }
-        }
-      )
+        )
+        .then(detectWebpSupport)
+        .then((supported) => {
+          if (!supported) {
+            console.log('Polyfilling WebP')
+            const webpMachine = new WebpMachine()
+            webpMachine.polyfillDocument()
+          }
+        })
     },
     checkResponseObject(response: unknown, msg: string = '') {
       if (response === null || typeof response !== 'object') {

diff --git a/zimui/yarn.lock b/zimui/yarn.lock
@@ -4811,6 +4811,11 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
+webp-hero@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/webp-hero/-/webp-hero-0.0.2.tgz#7adf20435ecfca73c764a3ad532a4304f15db52d"
+  integrity sha512-XDN8k2DZerXAawblkGKbcRXAz3WjY6Id5fTmrsOvblzFg5jELfoDCOxRDHD3zIGJo3OPEjLRsVS6Kzl36HxjqA==
+
 whatwg-encoding@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz#d0f4ef769905d426e1688f3e34381a99b60b76e5"