Misc Firefox fixes (mainly work around anamorphic browser bug)

Jadefin.js

@@ -92,6 +92,8 @@ export default JadefinIntegrity("Jadefin", import.meta.url, () => window["Jadefi
             constructor(scriptURL, options) {
                 const args = {scriptURL, options};
 
+                window["Jadefin"].log.i(`Creating new worker: ${scriptURL}`);
+
                 JadefinUtils.events.dispatchEvent(new CustomEvent(JadefinUtils.eventTypes.WORKER_CREATING, {
                     detail: {
                         args
@@ -191,6 +193,10 @@ export default JadefinIntegrity("Jadefin", import.meta.url, () => window["Jadefi
                     name.startsWith("activity") ||
                     name.startsWith("node_modules.@juggle") ||
                     name.startsWith("node_modules.@mui") ||
+                    name.startsWith("hometab") ||
+                    name.startsWith("users") ||
+                    name.startsWith("livetvstatus") ||
+                    name.startsWith("favourites") ||
                     false
                 ) {
                     return null;

mods/jade/Filterworks.css

@@ -26,5 +26,6 @@
     left: 0;
     max-width: 100%;
     max-height: 100%;
-    flex-grow: 1;
+    /* Firefox hates aspect-ratio and flex-grow... this works fine in Chromium. */
+    /* flex-grow: 1; */
 }

mods/jade/Filterworks.js

@@ -160,6 +160,19 @@ export default JadefinIntegrity("Filterworks", import.meta.url, () => new (class
             this.update();
         });
 
+        // Required because Firefox flex-grow doesn't give a crap about aspect-ratio.
+        window.addEventListener("resize", () => {
+            setTimeout(() => this.updateSize(), 0);
+        });
+
+        // Required because Firefox doesn't give a crap about anamorphic video.
+        JadefinUtils.events.addEventListener("PatchFirefoxAnamorphic", e => {
+            const detail = e["detail"];
+
+            this.scaleWidth = detail.width;
+            this.updateSize();
+        });
+
         this.log.i("Ready");
     }
 
@@ -216,6 +229,7 @@ export default JadefinIntegrity("Filterworks", import.meta.url, () => new (class
         this.canvas = this.appliedFilter.start(video);
         if (this.canvas) {
             this.canvas.classList.add("filterworks-canvas");
+            this.updateSize();
             this.canvasParentEl.append(this.canvas);
 
             if (this.canvasParentEl.parentElement != video.parentElement) {
@@ -225,4 +239,24 @@ export default JadefinIntegrity("Filterworks", import.meta.url, () => new (class
             video.setAttribute("data-filterworks-canvas", "1");
         }
     }
+
+    updateSize() {
+        if (!this.canvas) {
+            return;
+        }
+
+        // TODO: Respect Jellyfin aspect ratio modes.
+        const scaleX = document.body.clientWidth / this.canvas.width;
+        const scaleY = document.body.clientHeight / this.canvas.height;
+        const scale = Math.min(scaleX, scaleY);
+
+        this.canvas.style.setProperty("width", `${this.canvas.width * scale}px`);
+        this.canvas.style.setProperty("height", `${this.canvas.height * scale}px`);
+
+        if (this.scaleWidth) {
+            this.canvas.style.setProperty("transform", `scaleX(${this.scaleWidth / this.video.videoWidth})`);
+        } else {
+            this.canvas.style.removeProperty("transform");
+        }
+    }
 })());

mods/jade/PatchFirefoxAnamorphic.js

@@ -0,0 +1,90 @@
+//@ts-check
+
+import JadefinIntegrity from '../../JadefinIntegrity.js';
+
+import Jadefin from "../../Jadefin.js";
+import JadefinMod from "../../JadefinMod.js";
+import JadefinModules from "../../JadefinModules.js";
+import JadefinUtils from "../../JadefinUtils.js";
+
+// Thanks, Mozilla, for killing Firefox... https://bugzilla.mozilla.org/show_bug.cgi?id=1331110
+export default JadefinIntegrity("PatchFirefoxAnamorphic", import.meta.url, () => new (class PatchFirefoxAnamorphic extends JadefinMod {
+    constructor() {
+        super();
+    }
+
+    async init(name, url) {
+        await super.init(name, url);
+
+        document.addEventListener("viewshow", () => {
+            if (JadefinUtils.routePathIsVideo) {
+                if (this._tryUpdateRepeat) {
+                    clearInterval(this._tryUpdateRepeat);
+                }
+
+                clearInterval(this._tryUpdateRepeat);
+                this._tryUpdateRepeat = setInterval(() => this.tryUpdate(), 100);
+            }
+
+            this.update();
+        });
+    }
+
+    tryUpdate() {
+        const video = JadefinUtils.video;
+        if (!video) {
+            return;
+        }
+
+        this.update();
+
+        if (this._tryUpdateRepeat) {
+            clearInterval(this._tryUpdateRepeat);
+        }
+    }
+
+    update() {
+        const video = JadefinUtils.video;
+        if (!video) {
+            this.video = null;
+            return this._dispatch(0);
+        }
+
+        if (this.video == video) {
+            return this._dispatch(0);
+        }
+
+        this.video = video;
+
+        const ratioStr = JadefinUtils.currentPlayer.streamInfo.mediaSource.MediaStreams.find(s => s.Type == "Video").AspectRatio;
+        const ratioStrSplit = ratioStr && ratioStr.split(":");
+        if (!ratioStrSplit || !ratioStrSplit[1]) {
+            this.log.i(`Aspect ratio couldn't be determined`);
+            return this._dispatch(0);
+        }
+
+        const wantedRatio = parseFloat(ratioStrSplit[0]) / parseFloat(ratioStrSplit[1]);
+        const wantedWidth = this.video.videoHeight * wantedRatio;
+        if (Math.abs(this.video.videoWidth - wantedWidth) < 32) {
+            this.log.i(`Aspect ratio is already correct (video width: ${this.video.videoWidth}; wanted width: ${wantedWidth})`);
+            return this._dispatch(0);
+        }
+
+        this.log.i(`Aspect ratio is wrong, correcting (video width: ${this.video.videoWidth}; wanted width: ${wantedWidth})`);
+        this.video.style.setProperty("transform", `scaleX(${wantedWidth / this.video.videoWidth})`);
+        this.video.style.setProperty("z-index", "-1");
+
+        this._dispatch(wantedWidth);
+    }
+
+    /**
+     * @param {number} width
+     */
+    _dispatch(width) {
+        JadefinUtils.events.dispatchEvent(new CustomEvent("PatchFirefoxAnamorphic", {
+            detail: {
+                width
+            }
+        }));
+    }
+})());

mods_jade.json

@@ -11,5 +11,7 @@
     "jade/Shortcuts.js",
 
     "jade/Filterworks.js",
-    "jade/filters/Anime4K.js"
+    "jade/filters/Anime4K.js",
+
+    "jade/PatchFirefoxAnamorphic.js"
 ]