拆分 videoChat

frontend/Index.svelte

@@ -8,7 +8,7 @@
 	import StaticVideo from "./shared/StaticVideo.svelte";
 	import StaticAudio from "./shared/StaticAudio.svelte";
 	import InteractiveAudio from "./shared/InteractiveAudio.svelte";
-
+	import VideoChat from './shared/VideoChat.svelte'
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -34,6 +34,7 @@
 	export let modality: "video" | "audio" | "audio-video" = "video";
 	export let mode: "send-receive" | "receive" | "send" = "send-receive";
 	export let show_local_video: string | undefined = undefined;
+	export let video_chat: boolean = false;
 	export let rtp_params: RTCRtpParameters = {} as RTCRtpParameters;
 	export let track_constraints: MediaTrackConstraints = {};
 	export let icon: string | undefined = undefined;
@@ -53,7 +54,24 @@
 	$: console.log("value", value);
 </script>
 
-<Block
+{#if video_chat}
+	<Block
+	{visible}
+	variant={"solid"}
+	border_mode={dragging ? "focus" : "base"}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{height}
+	{width}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}>
+		<VideoChat></VideoChat>
+	</Block>
+
+{:else}<Block
 	{visible}
 	variant={"solid"}
 	border_mode={dragging ? "focus" : "base"}
@@ -158,3 +176,4 @@
 		/>
 	{/if}
 </Block>
+{/if}

frontend/shared/VideoChat.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { ComponentType } from "svelte";
+	import type { FileData, Client } from "@gradio/client";
+
+	import type { I18nFormatter } from "@gradio/utils";
+
+	export let value: string = null;
+	export let label: string | undefined = undefined;
+	export let show_label = true;
+	export let include_audio: boolean;
+	export let show_local_video: string | undefined;
+	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 button_labels: {start: string, stop: string, waiting: string};
+	export let server: {
+		offer: (body: any) => Promise<any>;
+	};
+	export let rtc_configuration: Object;
+	export let track_constraints: MediaTrackConstraints = {};
+	export let mode: "send" | "send-receive";
+	export let on_change_cb: (msg: "change" | "tick") => void;
+	export let rtp_params: RTCRtpParameters = {} as RTCRtpParameters;
+	export let icon: string | undefined | ComponentType = undefined;
+    export let icon_button_color: string = "var(--color-accent)";
+    export let pulse_color: string = "var(--color-accent)";
+
+	const dispatch = createEventDispatcher<{
+		change: FileData | null;
+		clear?: never;
+		play?: never;
+		pause?: never;
+		end?: never;
+		drag: boolean;
+		error: string;
+		upload: FileData;
+		start_recording?: never;
+		stop_recording?: never;
+		tick: never;
+	}>();
+
+	let dragging = false;
+	$: dispatch("drag", dragging);
+
+	$: console.log("value", value)
+
+</script>
+
+<div>whatever i need</div>
+
+<style>
+
+</style>