www: add audio and video toggles to device request screen

tom-james-watson · Dec 5, 2022 · 314e3bb · 314e3bb
1 parent 64355cd
commit 314e3bb
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/www/atoms/local.ts b/www/atoms/local.ts
@@ -44,7 +44,7 @@ export const localState = atom<Local>({
 const setAudioVideoEnabled =
   (audioEnabled: boolean, videoEnabled: boolean) =>
   (local: Local): Local => {
-    assert(local.status === "connecting" || local.status === "connected");
+    assert(local.status === "requestingDevices" || local.status === "connecting" || local.status === "connected");
     return { ...local, audioEnabled, videoEnabled };
   };
 

diff --git a/www/components/room/controls.tsx b/www/components/room/controls.tsx
@@ -41,7 +41,7 @@ function TrackControl(track: "video" | "audio") {
   const peers = useRecoilValue(peersState);
   const stream = mapGet(streamMap, LocalStreamKey);
 
-  assert(local.status === "connecting" || local.status === "connected");
+  assert(local.status === "requestingDevices" || local.status === "connecting" || local.status === "connected");
 
   const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
   const enabled = track === "audio" ? audioEnabled : videoEnabled;
@@ -97,11 +97,11 @@ function TrackControl(track: "video" | "audio") {
   );
 }
 
-function AudioControl() {
+export function AudioControl() {
   return TrackControl("audio");
 }
 
-function VideoControl() {
+export function VideoControl() {
   return TrackControl("video");
 }
 

diff --git a/www/components/room/request-devices.tsx b/www/components/room/request-devices.tsx
@@ -11,6 +11,7 @@ import {
   stopStream,
 } from "../../lib/mesh/stream";
 import Select from "../lib/select";
+import {AudioControl, VideoControl} from "./controls";
 import LocalPreview from "./local-preview";
 import PreForm from "./pre-form";
 
@@ -108,6 +109,7 @@ export default function RequestDevices() {
             }
             setValue={handleAudioChange}
           />
+          <AudioControl/>
           <Select
             id="video-select"
             fallback="No cameras found"
@@ -131,6 +133,7 @@ export default function RequestDevices() {
             }
             setValue={handleVideoChange}
           />
+          <VideoControl/>
         </>
       }
       handleSubmit={joinRoom}