Kafejo Fora: My first public Overte world

```javascript
//
//  televido.js
//
//  Televida regilo por Overte (Kafejo Fora)
//
//  Aldonu ĉi tiun skripton kiel klientan skripton al via WebView
//  (Krei > Ecoj > Skripto). Ĝi aldonas butonon "REMOTE" al la tabulkomputilo,
//  kiu malfermas la regilan interfacon de la televido.
//
//  Permesataj filmetoj: PeerTube, YouTube, Jitsi kaj rektaj filmeto-dosieroj
//  (mp4, webm, ogv, ogg, m4v). La hejma paĝo estas https://sepiasearch.org/.
//
//  Bazita sur scene_app.js de AleziaKurdis: https://github.com/AleziaKurdis/inertia/blob/main/NEBULA-BAZAAR/scene_app.js
(function() {
    //======================= KONFIGURACIO =======================//
    const jsMainFileName = "televido.js";
    const ROOT = Script.resolvePath('').split(jsMainFileName)[0];

    const APP_NAME = "REMOTE"; // La nomo, kiu aperas en Overte
    const APP_ICON_INACTIVE = ROOT + "bildoj/tv-malaktiva.svg";
    const APP_ICON_ACTIVE = ROOT + "bildoj/tv-aktiva.svg";
    const ICON_CAPTION_COLOR = "#ffae00";
    const HOME_URL = "https://sepiasearch.org/";
    const WEBVIEW_ENTITY_ID = ""; // Nebezonata, se la skripto estas sur la WebView-ento mem
    const APP_URL = "https://turingon.codeberg.page/Overte-Models/KafejoFora/skriptoj/aplikajo/teleregilo.html";
    const channel = "overte.tv.application"; // Kanalo por la komunikado kun la interfaco
    //==========================================================//

    let tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");

    let appStatus = false;
    let isRunning = false;
    let button;
    let thisEntityID;

    let historyStack = [];
    let historyIndex = -1;

    // Liveri la identigilon de la WebView-ento, kiun la skripto regas:
    function getWebviewID() {
        return WEBVIEW_ENTITY_ID || thisEntityID;
    }

    // Forigi ĉirkaŭajn spacojn kaj kompletigi la protokolon "https://", se ĝi mankas:
    function normalizeUrl(url) {
        url = url.trim();
        if (url === "") {
            return "";
        }
        if (!/^https?:\/\//i.test(url)) {
            url = "https://" + url;
        }
        return url;
    }

    // Kontroli ĉu la adreso estas permesata filmetofonto kaj redoni ĝin en ludebla formo; "" se rifuzita:
    function validateUrl(rawUrl) {
        let url = normalizeUrl(rawUrl);
        if (url === "") {
            return "";
        }
        let id = "";
        let match;

        // YouTube-videoj (watch?v=, youtu.be, shorts, live, embed) transformiĝas al enplektaĵo de youtube-nocookie:
        if (/youtube\.com|youtu\.be|youtube-nocookie\.com/i.test(url)) {
            match = url.match(/youtu\.be\/([A-Za-z0-9_-]{6,})/i);
            if (match) {
                id = match[1];
            }
            if (id === "") {
                match = url.match(/[?&]v=([A-Za-z0-9_-]{6,})/);
                if (match) {
                    id = match[1];
                }
            }
            if (id === "") {
                match = url.match(/\/(embed|shorts|live)\/([A-Za-z0-9_-]{6,})/i);
                if (match) {
                    id = match[2];
                }
            }
            if (id !== "") {
                return "https://www.youtube.com/watch?v=" + id;
            }
            return url; // YouTube-paĝo sen video-identigilo (ekz. la hejmpaĝo) estas permesata senchange
        }

        // PeerTube-videoj (/w/, /videos/watch/, /videos/embed/, /watch/, /embed/) transformiĝas al /videos/embed/-formo:
        match = url.match(/^https?:\/\/([^\/?#]+)\/(?:w|videos\/embed|videos\/watch|watch|embed)\/([A-Za-z0-9-]+)/i);
        if (match) {
            return "https://" + match[1] + "/videos/embed/" + match[2];
        }

        // Jitsi-kunvenoj (meet.jit.si kaj propraj serviloj kun "jitsi" en la adreso):
        match = url.match(/^https?:\/\/([^\/?#]+)/i);
        if (match) {
            let host = match[1].toLowerCase();
            if (host.indexOf("jitsi") !== -1 || host === "meet.jit.si") {
                return url;
            }
        }

        // La hejma serĉejo SepiaSearch (hejma kaj serĉopaĝoj):
        if (/^https?:\/\/(www\.)?sepiasearch\.org(\/|$|\?)/i.test(url)) {
            return url;
        }

        // Rektaj filmeto-dosieroj, kiujn la retumilo povas ludi:
        if (/\.(mp4|webm|ogv|ogg|m4v)([?#]|$)/i.test(url)) {
            return url;
        }

        return ""; // Nekonata aŭ nepermesata fonto
    }

    // Ŝargi la donitan adreson en la WebView-ento de la televido:
    function setWebviewUrl(url) {
        Entities.editEntity(getWebviewID(), { "sourceUrl": url });
    }

    // Sendi la nunan staton (adreso kaj eblecoj reen/sekven) al la interfaco:
    function sendStateToUI() {
        let state = {
            "channel": channel,
            "action": "CURRENT_STATE",
            "data": {
                "url": historyStack[historyIndex],
                "canGoBack": historyIndex > 0,
                "canGoForward": historyIndex < historyStack.length - 1
            }
        };
        tablet.emitScriptEvent(JSON.stringify(state));
    }

    // Informi la interfacon, ke la enigita adreso ne estas permesata:
    function sendWarningToUI() {
        let state = {
            "channel": channel,
            "action": "WARNING",
            "message": "Not allowed: only PeerTube, YouTube, Jitsi, or direct video files (mp4, webm, ogv, ogg, m4v)."
        };
        tablet.emitScriptEvent(JSON.stringify(state));
    }

    // Kontrolas la adreson, enmetas ĝin en la historion kaj ŝargas la televidon:
    function navigate(rawUrl) {
        let url = validateUrl(rawUrl);
        if (url === "") {
            // Nepermesata adreso: la televido restas ĉe la nuna video, la interfaco montras averton:
            sendWarningToUI();
            sendStateToUI();
            return;
        }
        // Forigi la "sekvan" historion, kiam oni enigas novan adreson:
        historyStack = historyStack.slice(0, historyIndex + 1);
        historyStack.push(url);
        historyIndex = historyStack.length - 1;
        setWebviewUrl(url);
        sendStateToUI();
    }

    // Iri unu paĝon malantaŭen en la historio:
    function goBack() {
        if (historyIndex > 0) {
            historyIndex--;
            setWebviewUrl(historyStack[historyIndex]);
            sendStateToUI();
        }
    }

    // Iri unu paĝon antaŭen en la historio:
    function goForward() {
        if (historyIndex < historyStack.length - 1) {
            historyIndex++;
            setWebviewUrl(historyStack[historyIndex]);
            sendStateToUI();
        }
    }

    // Reŝargi la nunan paĝon, saltrilante trans "about:blank" por devigi veran reŝargon:
    function reload() {
        let url = historyStack[historyIndex];
        if (url === undefined) {
            return;
        }
        Entities.editEntity(getWebviewID(), { "sourceUrl": "about:blank" });
        Script.setTimeout(function() {
            Entities.editEntity(getWebviewID(), { "sourceUrl": url });
        }, 100);
    }

    // Iri al la hejma paĝo (SepiaSearch):
    function goHome() {
        navigate(HOME_URL);
    }

    // Prilabori la komandojn venantajn de la regila interfaco:
    function onAppWebEventReceived(message) {
        if (typeof message !== "string") {
            return;
        }
        let instruction;
        try {
            instruction = JSON.parse(message);
        } catch (e) {
            return;
        }
        if (instruction.channel !== channel) {
            return;
        }
        switch (instruction.action) {
            case "UI_READY":
                sendStateToUI();
                break;
            case "NAVIGATE":
                navigate(instruction.url);
                break;
            case "BACK":
                goBack();
                break;
            case "FORWARD":
                goForward();
                break;
            case "RELOAD":
                reload();
                break;
            case "HOME":
                goHome();
                break;
        }
    }

    // Aperigi la tabulkomputilan butonon de la aplikaĵo:
    function showButton() {
        tablet.screenChanged.connect(onScreenChanged);
        button = tablet.addButton({
            "text": APP_NAME,
            "icon": APP_ICON_INACTIVE,
            "activeIcon": APP_ICON_ACTIVE,
            "sortOrder": 0,
            "captionColor": ICON_CAPTION_COLOR
        });
        button.clicked.connect(clicked);
        isRunning = true;
    }

    // Malfermi aŭ fermi la regilan interfacon, kiam oni klakas la butonon:
    function clicked() {
        let colorCaption;
        if (appStatus === true) {
            tablet.webEventReceived.disconnect(onAppWebEventReceived);
            tablet.gotoHomeScreen();
            colorCaption = ICON_CAPTION_COLOR;
            appStatus = false;
        } else {
            tablet.gotoWebScreen(APP_URL);
            tablet.webEventReceived.connect(onAppWebEventReceived);
            colorCaption = "#000000";
            appStatus = true;
        }
        button.editProperties({
            "isActive": appStatus,
            "captionColor": colorCaption
        });
    }

    // Observi la ŝanĝojn de la tabulkomputila ekrano por ĝustigi la butonon:
    function onScreenChanged(type, url) {
        let colorCaption;
        if (type === "Web" && url.indexOf(APP_URL) !== -1) {
            colorCaption = "#000000";
            appStatus = true;
        } else {
            colorCaption = ICON_CAPTION_COLOR;
            appStatus = false;
        }
        if (button) {
            button.editProperties({
                "isActive": appStatus,
                "captionColor": colorCaption
            });
        }
    }

    // Purigi ĉion, kiam la uzanto ŝanĝas domajnon:
    function onDomainChanged(domain) {
        cleanup();
    }

    // Forigi la butonon kaj la konektojn:
    function cleanup() {
        Window.domainChanged.disconnect(onDomainChanged);
        if (appStatus) {
            tablet.gotoHomeScreen();
            tablet.webEventReceived.disconnect(onAppWebEventReceived);
            appStatus = false;
        }
        if (isRunning) {
            tablet.screenChanged.disconnect(onScreenChanged);
            if (button) {
                button.clicked.disconnect(clicked);
                tablet.removeButton(button);
                button = null;
            }
            isRunning = false;
        }
    }

    // Farita ĉe la ŝargo de la skripto: preni la nunan adreson kaj aperigi la butonon:
    this.preload = function(entityID) {
        thisEntityID = entityID;
        let properties = Entities.getEntityProperties(getWebviewID(), ["sourceUrl"]);

        // Komencigi la historion per la paĝo, kiu nun estas montrata:
        let initialUrl = properties.sourceUrl;
        if (initialUrl === undefined || initialUrl === "") {
            initialUrl = HOME_URL;
        }
        historyStack = [initialUrl];
        historyIndex = 0;

        Window.domainChanged.connect(onDomainChanged);
        showButton();
    };

    // Farita ĉe la fino de la skripto: purigi ĉion:
    this.unload = function(entityID) {
        cleanup();
    };

    Script.scriptEnding.connect(cleanup);
});
```

```html
<!DOCTYPE html>
<!--
    teleregilo.html

    Tabulkomputila interfaco de la televida regilo. Ŝargas ĝin la skripto televido.js.
    Ĝi parolas kun la skripto per EventBridge:
    - sendas: UI_READY, NAVIGATE, BACK, FORWARD, RELOAD, HOME
    - ricevas: CURRENT_STATE, WARNING

    Bazita sur scene.html de AleziaKurdis: https://github.com/AleziaKurdis/inertia/blob/main/NEBULA-BAZAAR/application/scene.html
    Fono: simpla kafokoloro. Farita kiel kompakta 400 x 200 regilo.
    Permesataj filmetoj: PeerTube, YouTube, Jitsi kaj rektaj filmeto-dosieroj (mp4, webm, ogv, ogg, m4v).
-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Teleregilo</title>
    <style>
        @font-face {
            font-family: "Ubuntu";
            src: url(tiparo/Ubuntu-Regular.ttf);
            font-weight: normal;
        }
        @font-face {
            font-family: "Ubuntu";
            src: url(tiparo/Ubuntu-Bold.ttf);
            font-weight: bold;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Ubuntu", Arial, Helvetica, sans-serif;
            background-color: #a0846c; /* kafokoloro */
            overflow: hidden;
        }
        /* La karto */
        #card {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 200px;
            box-sizing: border-box;
            padding: 10px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.45);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #notice {
            color: #ffffff;
            font-size: 12px;
            line-height: 1.5;
            text-align: center;
            text-shadow: 0 1px 2px #000000;
        }
        #navbar {
            display: flex;
            gap: 4px;
        }
        #navbar button {
            width: 36px;
            height: 32px;
            flex-shrink: 0;
            border: 1px solid #777777;
            border-radius: 4px;
            background: #2b2b2b;
            color: #ffffff;
            font-size: 15px;
            cursor: pointer;
        }
        #navbar button:hover {
            background: #4a4a4a;
        }
        #navbar button:disabled {
            opacity: 0.3;
            cursor: default;
        }
        #address {
            flex: 1;
            min-width: 0;
            height: 32px;
            box-sizing: border-box;
            padding: 0 6px;
            border: 1px solid #777777;
            border-radius: 4px;
            background: #161616;
            color: #ffffff;
            font-size: 12px;
        }
        #address:focus {
            outline: none;
            border-color: #ffae00;
        }
    </style>
</head>
<body>
    <div id="card">
        <div id="notice">
            <div><b>Television</b></div>
            <div>Watch PeerTube, YouTube, Jitsi streams or videofiles in the
                mp4, webm, ogv, ogg, m4v formats.</div>
        </div>
        <div id="navbar">
            <button id="back" title="Go back">&#9664;</button>
            <button id="forward" title="Go forward">&#9654;</button>
            <button id="reload" title="Reload">&#10227;</button>
            <input id="address" type="text" spellcheck="false" autocomplete="off"
                placeholder="Enter address...">
            <button id="home" title="Home">&#8962;</button>
        </div>
    </div>
    <script>
        var channel = "overte.tv.application";

        var notice = document.getElementById("notice");
        var address = document.getElementById("address");
        var backBtn = document.getElementById("back");
        var forwardBtn = document.getElementById("forward");
        var reloadBtn = document.getElementById("reload");
        var homeBtn = document.getElementById("home");

        // Ĉu EventBridge ekzistas? Ene de Overte jes; en retumilo ne
        var hasBridge = (typeof EventBridge !== "undefined");

        // Sendi komandon al la skripto televido.js per EventBridge:
        function send(action, extra) {
            var message = { "channel": channel, "action": action };
            var key;
            for (key in extra) {
                if (extra.hasOwnProperty(key)) {
                    message[key] = extra[key];
                }
            }
            if (hasBridge) {
                EventBridge.emitWebEvent(JSON.stringify(message));
            }
        }

        // Montri avertmesaĝon en la noto-zono dum kvar sekundoj:
        var defaultNotice = notice.innerHTML;
        var noticeTimer = null;
        function showNotice(message) {
            notice.textContent = message;
            if (noticeTimer !== null) {
                clearTimeout(noticeTimer);
            }
            noticeTimer = setTimeout(function() {
                notice.innerHTML = defaultNotice;
                noticeTimer = null;
            }, 4000);
        }

        // Aŭskulti uzanto-enigojn
        backBtn.addEventListener("click", function() { send("BACK", {}); });
        forwardBtn.addEventListener("click", function() { send("FORWARD", {}); });
        reloadBtn.addEventListener("click", function() { send("RELOAD", {}); });
        homeBtn.addEventListener("click", function() { send("HOME", {}); });

        address.addEventListener("focus", function() { address.select(); });
        address.addEventListener("keydown", function(event) {
            if (event.key === "Enter") {
                send("NAVIGATE", { "url": address.value });
                address.blur();
            }
        });

        // Prilabori la staton kaj la avertojn de la skripto
        if (hasBridge) {
            EventBridge.scriptEventReceived.connect(function(message) {
                var state;
                try {
                    state = JSON.parse(message);
                } catch (e) {
                    return;
                }
                if (state.channel !== channel) {
                    return;
                }
                if (state.action === "CURRENT_STATE") {
                    address.value = state.data.url;
                    backBtn.disabled = !state.data.canGoBack;
                    forwardBtn.disabled = !state.data.canGoForward;
                } else if (state.action === "WARNING") {
                    showNotice(state.message);
                }
            });
            // Demandi la skripton pri la nuna stato
            send("UI_READY", {});
        }
    </script>
</body>
</html>
```