screen recorder

(function() {
    let recorder = null;
    let chunks = [];
    let isRecording = false;
    let cropCanvas = document.createElement("canvas");
    let cropCtx = cropCanvas.getContext("2d");
    let recordRegion = new RegionSelection();

    // UI Elements
    const container = document.createElement("div");
    container.style = "position:absolute; top:50px; left:10px; z-index:10000; background:white; padding:10px; border:1px solid black; font-family:Verdana; display:flex; flex-direction:column; gap:5px;";
    container.innerHTML = `
        <b style="font-size:12px;">OWOT Screen Recorder</b>
        <button id="btn-select">1. Select Area</button>
        <button id="btn-start" disabled>2. Start Recording</button>
        <button id="btn-stop" disabled>3. Stop & Save</button>
        <div id="rec-status" style="font-size:10px; color:red; display:none;">● Recording...</div>
    `;
    document.body.appendChild(container);

    let bounds = null;

    // 1. Selection Logic
    document.getElementById("btn-select").onclick = () => {
        recordRegion.startSelection();
        w.doAnnounce("Drag to select the recording area.");
    };

    recordRegion.onselection((coordA, coordB, regWidth, regHeight) => {
        // Calculate pixel coordinates from world coordinates
        const posA = tileAndCharsToWindowCoords(coordA[0], coordA[1], coordA[2], coordA[3]);
        const posB = tileAndCharsToWindowCoords(coordB[0], coordB[1], coordB[2], coordB[3]);

        // Account for high-DPI displays (zoomRatio)
        const ratio = window.devicePixelRatio || 1;

        const x = posA[0] * ratio;
        const y = posA[1] * ratio;
        const width = (posB[0] - posA[0] + (cellW / zoomRatio)) * ratio;
        const height = (posB[1] - posA[1] + (cellH / zoomRatio)) * ratio;

        bounds = { x, y, width, height };

        document.getElementById("btn-start").disabled = false;
        w.doAnnounce("Area selected. Ready to record.");
    });

    // 2. Recording Logic
    document.getElementById("btn-start").onclick = () => {
        if (!bounds) return;

        // Prepare recording canvas
        cropCanvas.width = bounds.width;
        cropCanvas.height = bounds.height;

        chunks = [];
        const stream = cropCanvas.captureStream(30); // 30 FPS
        recorder = new MediaRecorder(stream, {
            mimeType: 'video/webm;codecs=vp9'
        });

        recorder.ondataavailable = (e) => {
            if (e.data.size > 0) chunks.push(e.data);
        };

        recorder.onstop = () => {
            const blob = new Blob(chunks, { type: 'video/webm' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `owot-capture-${Date.now()}.webm`;
            a.click();
            w.doAnnounce("Recording saved!");
        };

        recorder.start();
        isRecording = true;

        document.getElementById("btn-start").disabled = true;
        document.getElementById("btn-stop").disabled = false;
        document.getElementById("rec-status").style.display = "block";
    };

    document.getElementById("btn-stop").onclick = () => {
        isRecording = false;
        recorder.stop();
        document.getElementById("btn-stop").disabled = true;
        document.getElementById("btn-start").disabled = false;
        document.getElementById("rec-status").style.display = "none";
    };

    // 3. Frame Processing Hook
    // We hook into OWOT's internal render loop to copy the area to our hidden canvas
    w.on("frame", () => {
        if (isRecording && bounds) {
            // Copy the specific region from the main OWOT canvas to our capture canvas
            cropCtx.drawImage(
                owot,
                bounds.x, bounds.y, bounds.width, bounds.height, // Source
                0, 0, bounds.width, bounds.height               // Destination
            );
        }
    });

    w.doAnnounce("Recorder script loaded.");
})();