fix(web reader): conditional webp support

closes #65

komga-webui/src/functions/check-webp.ts

@@ -0,0 +1,20 @@
+// check_webp_feature:
+//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
+//   'callback(feature, isSupported)' will be passed back the detection result (in an asynchronous way!)
+export function checkWebpFeature (feature: string, callback: (feature: string, isSupported: boolean) => void) {
+  const kTestImages: any = {
+    lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
+    lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
+    alpha: 'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==',
+    animation: 'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA'
+  }
+  const img = new Image()
+  img.onload = function () {
+    const result = (img.width > 0) && (img.height > 0)
+    callback(feature, result)
+  }
+  img.onerror = function () {
+    callback(feature, false)
+  }
+  img.src = 'data:image/webp;base64,' + kTestImages[feature]
+}

komga-webui/src/views/BookReader.vue

@@ -205,6 +205,7 @@
 </template>
 
 <script lang="ts">
+import { checkWebpFeature } from '@/functions/check-webp'
 import Vue from 'vue'
 import Slick from 'vue-slick'
 
@@ -239,6 +240,13 @@ export default Vue.extend({
       }
     }
   },
+  created () {
+    checkWebpFeature('lossy', (feature, isSupported) => {
+      if (isSupported) {
+        this.supportedMediaTypes.push('image/webp')
+      }
+    })
+  },
   async mounted () {
     window.addEventListener('keydown', this.keyPressed)
     this.setup(this.bookId, Number(this.$route.query.page))