Anki/ts/routes/reviewer/reviewer.ts

// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { bridgeCommand } from "@tslib/bridgecommand";
import { writable } from "svelte/store";
import { preloadAnswerImages } from "../../reviewer/images";

export function setupReviewer(iframe: HTMLIFrameElement) {
    const cardClass = writable("");

    function updateHtml(htmlString) {
        iframe.contentWindow?.postMessage({ type: "html", value: htmlString }, "*");
    }

    function showQuestion(q, a, cc) {
        updateHtml(q);
        // html.set(q);
        cardClass.set(cc);
        preloadAnswerImages(a);
    }

    function onReady() {
        // 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 }, "*");
    }

    iframe?.addEventListener("load", onReady);

    addEventListener("message", (e) => {
        switch (e.data.type) {
            case "pycmd": {
                const cmd = e.data.value as string;
                if (cmd.startsWith("play:")) {
                    bridgeCommand(e.data.value);
                } else {
                    console.error("pycmd command is either invalid or forbidden:", cmd);
                }
                break;
            }
            default: {
                console.warn(`Unknown message type: ${e.data.type}`);
                break;
            }
        }
    });

    globalThis._showAnswer = updateHtml;
    globalThis._showQuestion = showQuestion;

    return { cardClass };
}