From 722faa81ce3da8b7a14f3ff7e4aad3589123959e Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Tue, 26 Mar 2019 15:06:15 +0900
Subject: [PATCH] WebP image support for Firefox

---
 main.go                       |  1 +
 scripts/AnimeNotifier.ts      | 10 +++++-----
 scripts/Utils/canUseWebP.ts   |  3 ---
 scripts/Utils/index.ts        |  2 +-
 scripts/Utils/supportsWebP.ts |  9 +++++++++
 5 files changed, 16 insertions(+), 9 deletions(-)
 delete mode 100644 scripts/Utils/canUseWebP.ts
 create mode 100644 scripts/Utils/supportsWebP.ts

diff --git a/main.go b/main.go
index 4a4fd059..3b49c81d 100644
--- a/main.go
+++ b/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)
diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index ceebc8cc..42fd6887 100644
--- a/scripts/AnimeNotifier.ts
+++ b/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() {
-		// Check for WebP support
-		this.webpEnabled = canUseWebP()
-
+	async run() {
 		// 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)
 	}
diff --git a/scripts/Utils/canUseWebP.ts b/scripts/Utils/canUseWebP.ts
deleted file mode 100644
index d24155a1..00000000
--- a/scripts/Utils/canUseWebP.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function canUseWebP(): boolean {
-	return document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp") === 0
-}
\ No newline at end of file
diff --git a/scripts/Utils/index.ts b/scripts/Utils/index.ts
index ea90587f..dd8b1a20 100644
--- a/scripts/Utils/index.ts
+++ b/scripts/Utils/index.ts
@@ -1,4 +1,4 @@
-export * from "./canUseWebP"
+export * from "./supportsWebP"
 export * from "./delay"
 export * from "./findAll"
 export * from "./plural"
diff --git a/scripts/Utils/supportsWebP.ts b/scripts/Utils/supportsWebP.ts
new file mode 100644
index 00000000..978536fb
--- /dev/null
+++ b/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)
+}
\ No newline at end of file