0.2

frontend/main.ts

@@ -4,23 +4,44 @@ const startAudioBtn = document.querySelector<HTMLButtonElement>("#start-audio-bt
 const stopAudioBtn = document.querySelector<HTMLButtonElement>("#stop-audio-btn");
 const audioStatus = document.querySelector<HTMLElement>("#audio-status");
 
-if (startAudioBtn === null || stopAudioBtn === null || audioStatus === null) {
+const startVideoBtn = document.querySelector<HTMLButtonElement>("#start-video-btn");
+const stopVideoBtn = document.querySelector<HTMLButtonElement>("#stop-video-btn");
+const videoStatus = document.querySelector<HTMLElement>("#video-status");
+
+if (
+    startAudioBtn === null ||
+    stopAudioBtn === null ||
+    audioStatus === null ||
+    startVideoBtn === null ||
+    stopVideoBtn === null ||
+    videoStatus === null
+) {
     throw new Error("missing UI elements");
 }
 
 function setAudioStatus(message: string): void {
-    if (audioStatus) {
+    if (audioStatus)
         audioStatus.textContent = message;
-    }
 }
 
 function setAudioButtons(isRecording: boolean): void {
-    if (startAudioBtn) {
+    if (startAudioBtn)
         startAudioBtn.disabled = isRecording;
-    }
-    if (stopAudioBtn) {
+    if (stopAudioBtn)
         stopAudioBtn.disabled = !isRecording;
-    }
+}
+
+function setVideoStatus(message: string): void {
+
+    if (videoStatus)
+        videoStatus.textContent = message;
+}
+
+function setVideoButtons(isRecording: boolean): void {
+    if (startVideoBtn)
+        startVideoBtn.disabled = isRecording;
+    if (stopVideoBtn)
+        stopVideoBtn.disabled = !isRecording;
 }
 
 startAudioBtn.addEventListener("click", async () => {
@@ -48,3 +69,29 @@ stopAudioBtn.addEventListener("click", async () => {
         setAudioButtons(true);
     }
 });
+
+startVideoBtn.addEventListener("click", async () => {
+    startVideoBtn.disabled = true;
+
+    try {
+        const path = await invoke<string>("start_video_recording");
+        setVideoStatus(`Video recording started.\nOutput: ${path}`);
+        setVideoButtons(true);
+    } catch (error) {
+        setVideoStatus(`Start video failed.\n${String(error)}`);
+        setVideoButtons(false);
+    }
+});
+
+stopVideoBtn.addEventListener("click", async () => {
+    stopVideoBtn.disabled = true;
+
+    try {
+        const path = await invoke<string>("stop_video_recording");
+        setVideoStatus(`Video recording stopped.\nSaved file: ${path}`);
+        setVideoButtons(false);
+    } catch (error) {
+        setVideoStatus(`Stop video failed.\n${String(error)}`);
+        setVideoButtons(true);
+    }
+});