WebP image support for Firefox

main.go

@@ -26,6 +26,7 @@ func configure(app *aero.Application) *aero.Application {
 
 	// Content security policy
 	app.ContentSecurityPolicy.Set("img-src", "https: data:")
+	app.ContentSecurityPolicy.Set("connect-src", "https: wss: data:")
 
 	// Security
 	configureHTTPS(app)

scripts/AnimeNotifier.ts

@@ -12,7 +12,7 @@ import InfiniteScroller from "./InfiniteScroller"
 import ServiceWorkerManager from "./ServiceWorkerManager"
 import ServerEvents from "./ServerEvents"
 import { displayAiringDate, displayDate, displayTime } from "./DateView"
-import { findAll, canUseWebP, requestIdleCallback, swapElements, delay, findAllInside } from "./Utils"
+import { findAll, supportsWebP, requestIdleCallback, swapElements, delay, findAllInside } from "./Utils"
 import * as actions from "./Actions"
 
 export default class AnimeNotifier {
@@ -106,10 +106,7 @@ export default class AnimeNotifier {
 		this.run()
 	}
 
-	run() {
+	async run() {
-		// Check for WebP support
-		this.webpEnabled = canUseWebP()
-
 		// Initiate the elements we need
 		this.user = document.getElementById("user")
 		this.app.content = document.getElementById("content")
@@ -151,6 +148,9 @@ export default class AnimeNotifier {
 		// Infinite scrolling
 		this.infiniteScroller = new InfiniteScroller(this.app.content.parentElement, 150)
 
+		// WebP
+		this.webpEnabled = await supportsWebP()
+
 		// Loading
 		this.loading(false)
 	}

scripts/Utils/canUseWebP.ts

@@ -1,3 +0,0 @@
-export function canUseWebP(): boolean {
-	return document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp") === 0
-}

scripts/Utils/index.ts

@@ -1,4 +1,4 @@
-export * from "./canUseWebP"
+export * from "./supportsWebP"
 export * from "./delay"
 export * from "./findAll"
 export * from "./plural"

scripts/Utils/supportsWebP.ts

@@ -0,0 +1,9 @@
+export async function supportsWebP(): Promise<boolean> {
+	if(!window.createImageBitmap) {
+		return false
+	}
+
+	const data = "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA="
+	const blob = await fetch(data).then(r => r.blob())
+	return createImageBitmap(blob).then(() => true, () => false)
+}