diff --git a/frontend/shared/VideoChat.svelte b/frontend/shared/VideoChat.svelte index 773dc41..b22d4e4 100644 --- a/frontend/shared/VideoChat.svelte +++ b/frontend/shared/VideoChat.svelte @@ -11,10 +11,7 @@ set_available_devices } from "./stream_utils"; import { start, stop } from "./webrtc_utils"; - import { VolumeMuted } from "@gradio/icons"; - let local_video_source: HTMLVideoElement; - let remote_video_source: HTMLVideoElement; let available_video_devices: MediaDeviceInfo[] = []; let available_audio_devices: MediaDeviceInfo[] = []; let selected_video_device: MediaDeviceInfo | null = null; @@ -37,16 +34,12 @@ } }; - let canvas: HTMLCanvasElement; export let track_constraints: MediaTrackConstraints | null = null; export let rtc_configuration: Object; export let stream_every = 1; export let server: { offer: (body: any) => Promise; }; - - export let include_audio: boolean; - export let show_local_video: string | undefined; export let i18n: I18nFormatter; let volumeMuted = false @@ -99,7 +92,7 @@ const node = localVideoRef; await get_video_stream(audioDeviceId ? { deviceId: { exact: audioDeviceId }, - }: include_audio, node, videoDeviceId, track_constraints).then( + }: true, node, videoDeviceId, track_constraints).then( async (local_stream) => { stream = local_stream; selected_video_device = @@ -385,10 +378,13 @@ {/if} {#if stream_state === "closed"}
{/if} -
+
{#each available_video_devices as device, i} -
handle_device_change(device.deviceId)}>{device.label}
- {#if selected_video_device && device.deviceId === selected_video_device.deviceId}
{/if} +
handle_device_change(device.deviceId)}>{device.label} + {#if selected_video_device && device.deviceId === selected_video_device.deviceId}
+ +
{/if} +
{/each}
@@ -399,8 +395,11 @@ {#if stream_state === "closed"}
{/if}
{#each available_audio_devices as device, i} -
handle_device_change(device.deviceId)}>{device.label}
- {#if selected_audio_device && device.deviceId === selected_audio_device.deviceId}
{/if} +
handle_device_change(device.deviceId)}>{device.label} + {#if selected_audio_device && device.deviceId === selected_audio_device.deviceId}
+ +
{/if} +
{/each}
@@ -524,6 +523,7 @@ background: rgba(90, 90, 90, 0.5); backdrop-filter: blur(8px); .selector { + position: relative; cursor: pointer; height: 42px; line-height: 42px; @@ -534,17 +534,16 @@ } padding-left: 15px; padding-right: 50px; - &.active { - .active-icon { - display: block; - } - } + .active-icon { position: absolute; right: 10px; width: 40px; - height: 40px;; - + height: 40px; + display: flex; + align-items: center; + justify-content: center; + top: 0; } }