tauri-video02/frontend/main.ts

import { invoke } from "@tauri-apps/api/core";
import { AvStartResponse } from './ts/bindings/AvStartResponse';
import { AvStopResponse } from './ts/bindings/AvStopResponse';

type Mode = "idle" | "audio" | "video" | "av";

const startAudioBtn = document.querySelector<HTMLButtonElement>("#start-audio-btn");
const stopAudioBtn = document.querySelector<HTMLButtonElement>("#stop-audio-btn");
const audioStatus = document.querySelector<HTMLElement>("#audio-status");

const startVideoBtn = document.querySelector<HTMLButtonElement>("#start-video-btn");
const stopVideoBtn = document.querySelector<HTMLButtonElement>("#stop-video-btn");
const videoStatus = document.querySelector<HTMLElement>("#video-status");

const startAvBtn = document.querySelector<HTMLButtonElement>("#start-av-btn");
const stopAvBtn = document.querySelector<HTMLButtonElement>("#stop-av-btn");
const avStatus = document.querySelector<HTMLElement>("#av-status");

const previewElement = document.querySelector<HTMLImageElement>("#video-preview");

if (
    startAudioBtn === null ||
    stopAudioBtn === null ||
    audioStatus === null ||
    startVideoBtn === null ||
    stopVideoBtn === null ||
    videoStatus === null ||
    startAvBtn === null ||
    stopAvBtn === null ||
    avStatus === null ||
    previewElement === null
) {
    throw new Error("missing UI elements");
}

let currentMode: Mode = "idle";
let previewTimer: number | null = null;
let previewRequestInFlight = false;
let previewObjectUrl: string | null = null;

function setAudioStatus(message: string): void {
    if (audioStatus)
        audioStatus.textContent = message;
}

function setVideoStatus(message: string): void {
    if (videoStatus)
        videoStatus.textContent = message;
}

function setAvStatus(message: string): void {
    if (avStatus)
        avStatus.textContent = message;
}

function setAudioButtons(isRecording: boolean): void {
    if (startAudioBtn)
        startAudioBtn.disabled = isRecording;
    if (stopAudioBtn)
        stopAudioBtn.disabled = !isRecording;
}

function setVideoButtons(isRecording: boolean): void {
    if (startVideoBtn)
        startVideoBtn.disabled = isRecording;
    if (stopVideoBtn)
        stopVideoBtn.disabled = !isRecording;
}

function setAvButtons(isRecording: boolean): void {
    if (startAvBtn)
        startAvBtn.disabled = isRecording;
    if (stopAvBtn)
        stopAvBtn.disabled = !isRecording;
}

function setAllButtonsForMode(mode: Mode): void {
    if (mode === "idle") {
        setAudioButtons(false);
        setVideoButtons(false);
        setAvButtons(false);
        return;
    }

    setAudioButtons(mode === "audio");
    setVideoButtons(mode === "video");
    setAvButtons(mode === "av");

    if (mode !== "audio") {
        if (stopAudioBtn)
            stopAudioBtn.disabled = true;
        if (startAudioBtn)
            startAudioBtn.disabled = true;
    }

    if (mode !== "video") {
        if (stopVideoBtn)
            stopVideoBtn.disabled = true;
        if (startVideoBtn)
            startVideoBtn.disabled = true;
    }

    if (mode !== "av") {
        if (stopAvBtn)
            stopAvBtn.disabled = true;
        if (startAvBtn)
            startAvBtn.disabled = true;
    }
}

function setCurrentMode(mode: Mode): void {
    currentMode = mode;
    setAllButtonsForMode(mode);
}

function base64ToUint8Array(base64: string): Uint8Array {
    const binary = window.atob(base64);
    const bytes = new Uint8Array(binary.length);

    let index = 0;
    while (index < binary.length) {
        bytes[index] = binary.charCodeAt(index);
        index += 1;
    }

    return bytes;
}

function updatePreviewImageFromBase64(encoded: string): void {
    const bytes = base64ToUint8Array(encoded);
    const copied = new Uint8Array(bytes.byteLength);

    copied.set(bytes);

    const blob = new Blob([copied.buffer], { type: "image/jpeg" });
    const objectUrl = URL.createObjectURL(blob);

    if (previewObjectUrl !== null) {
        URL.revokeObjectURL(previewObjectUrl);
    }

    previewObjectUrl = objectUrl;
    if (previewElement)
        previewElement.src = objectUrl;
}

async function refreshPreviewFrame(): Promise<void> {
    if (previewRequestInFlight) {
        return;
    }

    if (currentMode !== "video" && currentMode !== "av") {
        return;
    }

    previewRequestInFlight = true;

    try {
        const encoded = await invoke<string | null>("get_video_preview_frame_base64");

        if (encoded !== null && encoded.length > 0) {
            updatePreviewImageFromBase64(encoded);
        }
    } catch (error) {
        console.error("preview refresh failed", error);
    } finally {
        previewRequestInFlight = false;
    }
}

function startPreviewPolling(): void {
    if (previewTimer !== null) {
        return;
    }

    window.setTimeout(() => {
        void refreshPreviewFrame();
    }, 120);

    previewTimer = window.setInterval(() => {
        void refreshPreviewFrame();
    }, 200);
}

function stopPreviewPolling(): void {
    if (previewTimer !== null) {
        window.clearInterval(previewTimer);
        previewTimer = null;
    }

    previewRequestInFlight = false;

    if (previewObjectUrl !== null) {
        URL.revokeObjectURL(previewObjectUrl);
        previewObjectUrl = null;
    }

    if (previewElement)
        previewElement.removeAttribute("src");
}

startAudioBtn.addEventListener("click", async () => {
    if (currentMode !== "idle") {
        setAudioStatus("Another mode is already running.");
        return;
    }

    setCurrentMode("audio");

    try {
        const path = await invoke<string>("start_audio_recording");
        setAudioStatus(`Audio recording started.\nOutput: ${path}`);
    } catch (error) {
        setAudioStatus(`Start audio failed.\n${String(error)}`);
        setCurrentMode("idle");
    }
});

stopAudioBtn.addEventListener("click", async () => {
    if (currentMode !== "audio") {
        setAudioStatus("Audio mode is not running.");
        return;
    }

    stopAudioBtn.disabled = true;

    try {
        const path = await invoke<string>("stop_audio_recording");
        setAudioStatus(`Audio recording stopped.\nSaved file: ${path}`);
        setCurrentMode("idle");
    } catch (error) {
        setAudioStatus(`Stop audio failed.\n${String(error)}`);
        setCurrentMode("audio");
    }
});

startVideoBtn.addEventListener("click", async () => {
    if (currentMode !== "idle") {
        setVideoStatus("Another mode is already running.");
        return;
    }

    setCurrentMode("video");

    try {
        const path = await invoke<string>("start_video_recording");
        setVideoStatus(`Video recording started.\nOutput: ${path}`);
        startPreviewPolling();
    } catch (error) {
        setVideoStatus(`Start video failed.\n${String(error)}`);
        stopPreviewPolling();
        setCurrentMode("idle");
    }
});

stopVideoBtn.addEventListener("click", async () => {
    if (currentMode !== "video") {
        setVideoStatus("Video mode is not running.");
        return;
    }

    stopVideoBtn.disabled = true;

    try {
        const path = await invoke<string>("stop_video_recording");
        setVideoStatus(`Video recording stopped.\nSaved file: ${path}`);
        stopPreviewPolling();
        setCurrentMode("idle");
    } catch (error) {
        setVideoStatus(`Stop video failed.\n${String(error)}`);
        setCurrentMode("video");
    }
});

startAvBtn.addEventListener("click", async () => {
    if (currentMode !== "idle") {
        setAvStatus("Another mode is already running.");
        return;
    }

    setCurrentMode("av");

    try {
        const result = await invoke<AvStartResponse>("start_av_recording");

        setAvStatus(
            `AV recording started.\nAudio: ${result.audio_path}\nVideo: ${result.video_path}`
        );

        startPreviewPolling();
    } catch (error) {
        setAvStatus(`Start AV failed.\n${String(error)}`);
        stopPreviewPolling();
        setCurrentMode("idle");
    }
});

stopAvBtn.addEventListener("click", async () => {
    if (currentMode !== "av") {
        setAvStatus("AV mode is not running.");
        return;
    }

    stopAvBtn.disabled = true;

    try {
        const result = await invoke<AvStopResponse>("stop_av_recording");

        setAvStatus(
            `AV recording stopped.\nAudio: ${result.audio_path}\nVideo: ${result.video_path}`
        );

        stopPreviewPolling();
        setCurrentMode("idle");
    } catch (error) {
        setAvStatus(`Stop AV failed.\n${String(error)}`);
        setCurrentMode("av");
    }
});

setCurrentMode("idle");