reviewer-inner poc

qt/aqt/mediasrv.py

@@ -335,6 +335,7 @@ def is_sveltekit_page(path: str) -> bool:
         "import-page",
         "image-occlusion",
         "reviewer",
+        "reviewer-inner",
     ]
 
 

ts/routes/reviewer-inner/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import "../../reviewer/reviewer.scss";
+
+    addEventListener("message", (e) => {
+        switch (e.data.type) {
+            case "html":
+                document.body.innerHTML = e.data.value;
+                break;
+            case "nightMode":
+                // This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
+                // I will probably use #night-mode in the url.
+                const root = document.querySelector("html")!;
+                const nightMode = e.data.value;
+                if (e.data.value) {
+                    root.classList.add("night-mode");
+                } else {
+                    root.classList.remove("night-mode");
+                }
+                document.body.className = nightMode ? "nightMode card" : "card";
+                root.className = nightMode ? "night-mode" : "";
+                root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
+                break;
+            default:
+                console.warn(`Unknown message type: ${e.data.type}`);
+                break;
+        }
+    });
+
+    window.parent.postMessage({ type: "ready" });
+</script>

ts/routes/reviewer/Reviewer.svelte

@@ -7,7 +7,12 @@
 </script>
 
 <div id="qa" class={$cardClass}>
-    <iframe bind:this={iframe} title="card" frameborder="0"></iframe>
+    <iframe
+        src="/reviewer-inner"
+        bind:this={iframe}
+        title="card"
+        frameborder="0"
+    ></iframe>
 </div>
 
 <style lang="scss">

ts/routes/reviewer/reviewer-bottom/reviewer-bottom.ts

@@ -77,11 +77,6 @@ export function setupBottomBar() {
     }
     */
 
-    // TODO This should probably be a "ready" command now that it is part of the actual reviewer,
-    // Currently this depends on this component mounting after the reviewer which it should but seems hacky.
-    // Maybe use a counter with a counter.subscribe($counter == 2 then call("ready"))
-    bridgeCommand("bottomReady");
-
     return {
         answerButtons,
         remaining,

ts/routes/reviewer/reviewer.ts

@@ -1,26 +1,12 @@
+import { bridgeCommand } from "@tslib/bridgecommand";
 import { writable } from "svelte/store";
-import { isNightMode } from "../../html-filter/helpers";
 import { preloadAnswerImages } from "../../reviewer/images";
 
 export function setupReviewer(iframe: HTMLIFrameElement) {
     const cardClass = writable("");
 
     function updateHtml(htmlString) {
-        if (iframe?.contentDocument) {
+        iframe.contentWindow?.postMessage({ type: "html", value: htmlString });
-            const nightMode = isNightMode();
-            iframe.contentDocument.body.innerHTML = htmlString;
-            iframe.contentDocument.head.innerHTML = document.head.innerHTML;
-            iframe.contentDocument.body.className = nightMode
-                ? "nightMode card"
-                : "card";
-            const root = iframe.contentDocument.querySelector("html")!;
-            root.className = nightMode
-                ? "night-mode"
-                : "";
-            root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
-            // @ts-ignore
-            iframe.contentDocument.pycmd = bridgeCommand;
-        }
     }
 
     function showQuestion(q, a, cc) {
@@ -30,6 +16,21 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
         preloadAnswerImages(a);
     }
 
+    addEventListener("message", (e) => {
+        switch (e.data.type) {
+            case "ready":
+                // TODO This should probably be a "ready" command now that it is part of the actual reviewer,
+                // Currently this depends on the reviewer component mounting after the bottom-reviewer which it should but seems hacky.
+                // Maybe use a counter with a counter.subscribe($counter == 2 then call("ready"))
+                bridgeCommand("bottomReady");
+                iframe.contentWindow?.postMessage({ type: "nightMode", value: true });
+                break;
+            default:
+                console.warn(`Unknown message type: ${e.data.type}`);
+                break;
+        }
+    });
+
     globalThis._showAnswer = updateHtml;
     globalThis._showQuestion = showQuestion;