From 878026565914cfcda02ae19d3141a0cf08e09152 Mon Sep 17 00:00:00 2001
From: AlbertMingXu <albert.ming.xu@gmail.com>
Date: Tue, 10 Jun 2025 06:36:32 +0800
Subject: [PATCH] chore: dispatch starting_recording and stop_recording. (#342)

Co-authored-by: Ming Xu <albertxu@amazon.com>
---
 backend/fastrtc/webrtc.py               | 2 +-
 frontend/Index.svelte                   | 2 ++
 frontend/shared/InteractiveAudio.svelte | 7 +++++++
 frontend/shared/Webcam.svelte           | 2 ++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/backend/fastrtc/webrtc.py b/backend/fastrtc/webrtc.py
index 7b9b1e1..28dd923 100644
--- a/backend/fastrtc/webrtc.py
+++ b/backend/fastrtc/webrtc.py
@@ -57,7 +57,7 @@ class WebRTC(Component, WebRTCConnectionMixin):
     Demos: video_identity_2
     """
 
-    EVENTS = ["tick", "state_change", "submit"]
+    EVENTS = ["tick", "state_change", "submit", "start_recording", "stop_recording"]
     data_model = WebRTCModel
 
     def __init__(
diff --git a/frontend/Index.svelte b/frontend/Index.svelte
index 5ae708f..28c3b5a 100644
--- a/frontend/Index.svelte
+++ b/frontend/Index.svelte
@@ -208,6 +208,8 @@
       {pulse_color}
       {button_labels}
       {variant}
+      on:start_recording={() => gradio.dispatch("start_recording")}
+      on:stop_recording={() => gradio.dispatch("stop_recording")}
       on:tick={() => gradio.dispatch("tick")}
       on:error={({ detail }) => gradio.dispatch("error", detail)}
       on:warning={({ detail }) => gradio.dispatch("warning", detail)}
diff --git a/frontend/shared/InteractiveAudio.svelte b/frontend/shared/InteractiveAudio.svelte
index 2f5a65d..51715cf 100644
--- a/frontend/shared/InteractiveAudio.svelte
+++ b/frontend/shared/InteractiveAudio.svelte
@@ -104,6 +104,8 @@
     error: string;
     play: undefined;
     stop: undefined;
+    start_recording: undefined;
+    stop_recording: undefined;
   }>();
 
   async function access_mic(): Promise<void> {
@@ -147,6 +149,7 @@
 
   async function start_stream(): Promise<void> {
     if (stream_state === "open") {
+      dispatch("stop_recording");
       stop(pc);
       stream_state = "closed";
       _time_limit = null;
@@ -154,6 +157,8 @@
       await server.quit_output_stream({ webrtc_id: _webrtc_id });
       return;
     }
+
+    dispatch("start_recording");
     _webrtc_id = Math.random().toString(36).substring(2);
     value.webrtc_id = _webrtc_id;
     stream_state = "waiting";
@@ -325,6 +330,8 @@
     bind:this={audio_player}
     on:ended={() => dispatch("stop")}
     on:play={() => dispatch("play")}
+    on:start_recording
+    on:stop_recording
   />
   {#if variant === "textbox"}
     <TextboxWithMic
diff --git a/frontend/shared/Webcam.svelte b/frontend/shared/Webcam.svelte
index e8cdcbc..5a8b154 100644
--- a/frontend/shared/Webcam.svelte
+++ b/frontend/shared/Webcam.svelte
@@ -146,6 +146,7 @@
 
   async function start_webrtc(): Promise<void> {
     if (stream_state === "closed") {
+      dispatch("start_recording");
       await server.turn().then((rtc_configuration_) => {
         if (rtc_configuration_.error) {
           dispatch("error", rtc_configuration_.error);
@@ -207,6 +208,7 @@
           stream_state = "closed";
         });
     } else {
+      dispatch("stop_recording");
       stop(pc);
       stream_state = "closed";
       _time_limit = null;