Add code

frontend/Index.svelte

@@ -1,7 +1,6 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-
 	import { Block, UploadText } from "@gradio/atoms";
 	import Video from "./shared/InteractiveVideo.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
@@ -27,6 +26,7 @@
 	export let min_width: number | undefined = undefined;
 	export let gradio;
 	export let rtc_configuration: Object;
+	export let time_limit: number | null = null;
 	// export let gradio: Gradio<{
 	// 	change: never;
 	// 	clear: never;
@@ -80,6 +80,7 @@
 		{root}
 		{server}
 		{rtc_configuration}
+		{time_limit}
 		on:clear={() => gradio.dispatch("clear")}
 		on:play={() => gradio.dispatch("play")}
 		on:pause={() => gradio.dispatch("pause")}

frontend/shared/InteractiveVideo.svelte

@@ -11,11 +11,11 @@
 	export let label: string | undefined = undefined;
 	export let show_label = true;
 	export let include_audio: boolean;
-	export let root: string;
 	export let i18n: I18nFormatter;
 	export let active_source: "webcam" | "upload" = "webcam";
 	export let handle_reset_value: () => void = () => {};
 	export let stream_handler: Client["stream"];
+	export let time_limit: number | null = null;
 	export let server: {
 		offer: (body: any) => Promise<any>;
 	};
@@ -44,9 +44,9 @@
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
 <div data-testid="video" class="video-container">
 	<Webcam
-		{root}
 		{rtc_configuration}
 		{include_audio}
+		{time_limit}
 		on:error
 		on:start_recording
 		on:stop_recording

frontend/shared/Webcam.svelte

@@ -21,7 +21,8 @@
 	let video_source: HTMLVideoElement;
 	let available_video_devices: MediaDeviceInfo[] = [];
 	let selected_device: MediaDeviceInfo | null = null;
-	let time_limit: number | null = null;
+	let _time_limit: number | null = null;
+    export let time_limit: number | null = null;
 	let stream_state: "open" | "waiting" | "closed" = "closed";
     export const webrtc_id = Math.random().toString(36).substring(2);
 
@@ -29,7 +30,7 @@
 		state: "open" | "closed" | "waiting"
 	) => {
 		if (state === "closed") {
-			time_limit = null;
+			_time_limit = null;
 			stream_state = "closed";
 		} else if (state === "waiting") {
 			stream_state = "waiting";
@@ -38,14 +39,8 @@
 		}
 	};
 
-	export const set_time_limit = (time: number): void => {
-		if (recording) time_limit = time;
-	};
-
 	let canvas: HTMLCanvasElement;
     export let rtc_configuration: Object;
-	export let pending = false;
-	export let root = "";
 	export let stream_every = 1;
 	export let server: {
 		offer: (body: any) => Promise<any>;
@@ -133,10 +128,15 @@
             console.log("config", configuration);
             pc = new RTCPeerConnection(configuration);
             pc.addEventListener("connectionstatechange",
-                (event) => {
+                async (event) => {
                    switch(pc.connectionState) {
                         case "connected":
-                            stream_state = "open"
+                            stream_state = "open";
+                            _time_limit = time_limit;
+                            break;
+                        case "disconnected":
+                            stream_state = "closed";
+                            await access_webcam();
                             break;
                         default:
                             break;
@@ -196,7 +196,7 @@
 </script>
 
 <div class="wrap">
-	<StreamingBar {time_limit} />
+	<StreamingBar time_limit={_time_limit} />
 	<!-- svelte-ignore a11y-media-has-caption -->
 	<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
 	<video