WebP bridge is working again

scripts/AnimeNotifier.ts

@@ -1,7 +1,7 @@
 import { Application } from "./Application"
 import { Diff } from "./Diff"
 import { displayAiringDate, displayDate } from "./DateView"
-import { findAll, delay } from "./Utils"
+import { findAll, delay, canUseWebP } from "./Utils"
 import { MutationQueue } from "./MutationQueue"
 import * as actions from "./Actions"
 
@@ -9,6 +9,7 @@ export class AnimeNotifier {
 	app: Application
 	user: HTMLElement
 	title: string
+	webpEnabled: boolean
 	visibilityObserver: IntersectionObserver
 
 	imageFound: MutationQueue
@@ -80,6 +81,9 @@ export class AnimeNotifier {
 			document.documentElement.classList.add("osx")
 		}
 
+		// Check for WebP support
+		this.webpEnabled = canUseWebP()
+
 		// Initiate the elements we need
 		this.user = this.app.find("user")
 		this.app.content = this.app.find("content")
@@ -207,7 +211,13 @@ export class AnimeNotifier {
 	lazyLoadImage(img: HTMLImageElement) {
 		// Once the image becomes visible, load it
 		img["became visible"] = () => {
-			img.src = img.dataset.src
+			// Replace URL with WebP if supported
+			if(this.webpEnabled && img.dataset.webp) {
+				let dot = img.dataset.src.lastIndexOf(".")
+				img.src = img.dataset.src.substring(0, dot) + ".webp"
+			} else {
+				img.src = img.dataset.src
+			}
 
 			if(img.naturalWidth === 0) {
 				img.onload = () => {

scripts/Utils.ts

@@ -11,5 +11,17 @@ export function delay<T>(millis: number, value?: T): Promise<T> {
 }
 
 export function plural(count: number, singular: string): string {
-	return (count === 1 || count === -1) ? (count + ' ' + singular) : (count + ' ' + singular + 's')
+	return (count === 1 || count === -1) ? (count + " " + singular) : (count + " " + singular + "s")
+}
+
+export function canUseWebP(): boolean {
+    let canvas = document.createElement("canvas")
+
+    if(!!(canvas.getContext && canvas.getContext("2d"))) {
+        // WebP representation possible
+        return canvas.toDataURL("image/webp").indexOf("data:image/webp") === 0
+    } else {
+        // In very old browsers (IE 8) canvas is not supported
+        return false
+    }
 }