From 2d943c73d7576e2326120acf815dea2462e6732c Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 4 Dec 2022 22:18:39 -0800
Subject: [PATCH 1/5] www: refactor audio/video controls into separate
 components

---
 www/components/room/controls.tsx | 78 ++++++++++++++++++++------------
 1 file changed, 50 insertions(+), 28 deletions(-)

diff --git a/www/components/room/controls.tsx b/www/components/room/controls.tsx
index 7142863..7ebebd9 100644
--- a/www/components/room/controls.tsx
+++ b/www/components/room/controls.tsx
@@ -36,8 +36,7 @@ function Control(props: ControlProps) {
   );
 }
 
-export default function Controls() {
-  const router = useRouter();
+function AudioControl() {
   const [local, setLocal] = useRecoilState(localState);
   const peers = useRecoilValue(peersState);
   const stream = mapGet(streamMap, LocalStreamKey);
@@ -46,13 +45,6 @@ export default function Controls() {
 
   const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
 
-  const handleLeave = React.useCallback(() => {
-    router.push(
-      `/goodbye?left=${router.query.roomCode}/${router.query.roomName}`,
-      "/goodbye"
-    );
-  }, [router]);
-
   const handleToggleAudio = React.useCallback(() => {
     peers.forEach((peer) => {
       const channel = rtcDataChannelMap.get(peer.sid);
@@ -76,6 +68,31 @@ export default function Controls() {
     setLocal(localActions.setAudioVideoEnabled(!audioEnabled, videoEnabled));
   }, [audioEnabled, local.name, peers, setLocal, stream, videoEnabled]);
 
+  const audioIconClassName = classNames("absolute", {
+    "text-slate-800": !audioEnabled,
+  });
+
+  return (
+    <Control disabled={!audioEnabled} text="Mic">
+      <Button
+        color={audioEnabled ? "slate" : "red"}
+        icon={<MicrophoneIcon width={24} className={audioIconClassName} />}
+        onClick={handleToggleAudio}
+        square
+      />
+    </Control>
+  );
+}
+
+function VideoControl() {
+  const [local, setLocal] = useRecoilState(localState);
+  const peers = useRecoilValue(peersState);
+  const stream = mapGet(streamMap, LocalStreamKey);
+
+  assert(local.status === "connecting" || local.status === "connected");
+
+  const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
+
   const handleToggleVideo = React.useCallback(() => {
     peers.forEach((peer) => {
       const channel = rtcDataChannelMap.get(peer.sid);
@@ -102,28 +119,33 @@ export default function Controls() {
   const videoIconClassName = classNames("absolute", {
     "text-slate-800": !videoEnabled,
   });
-  const audioIconClassName = classNames("absolute", {
-    "text-slate-800": !audioEnabled,
-  });
+  
+  return (
+    <Control disabled={!videoEnabled} text="Cam">
+      <Button
+        color={videoEnabled ? "slate" : "red"}
+        icon={<VideoCameraIcon width={24} className={videoIconClassName} />}
+        onClick={handleToggleVideo}
+        square
+      />
+    </Control>
+  );
+}
+
+export default function Controls() {
+  const router = useRouter();
+
+  const handleLeave = React.useCallback(() => {
+    router.push(
+      `/goodbye?left=${router.query.roomCode}/${router.query.roomName}`,
+      "/goodbye"
+    );
+  }, [router]);
 
   return (
     <div className="flex items-center justify-center m-2 sm:m-4 space-x-8">
-      <Control disabled={!audioEnabled} text="Mic">
-        <Button
-          color={audioEnabled ? "slate" : "red"}
-          icon={<MicrophoneIcon width={24} className={audioIconClassName} />}
-          onClick={handleToggleAudio}
-          square
-        />
-      </Control>
-      <Control disabled={!videoEnabled} text="Cam">
-        <Button
-          color={videoEnabled ? "slate" : "red"}
-          icon={<VideoCameraIcon width={24} className={videoIconClassName} />}
-          onClick={handleToggleVideo}
-          square
-        />
-      </Control>
+      <AudioControl />
+      <VideoControl />
       <Control text="Leave">
         <Button
           color="slate"

From 33951ba8a0109edab07f642ff16ceef619c241b3 Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 4 Dec 2022 22:28:07 -0800
Subject: [PATCH 2/5] www: refactor audio/video controls to look more generic

---
 www/components/room/controls.tsx | 44 +++++++++++++++++---------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/www/components/room/controls.tsx b/www/components/room/controls.tsx
index 7ebebd9..b47971a 100644
--- a/www/components/room/controls.tsx
+++ b/www/components/room/controls.tsx
@@ -44,8 +44,9 @@ function AudioControl() {
   assert(local.status === "connecting" || local.status === "connected");
 
   const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
+  const enabled = videoEnabled;
 
-  const handleToggleAudio = React.useCallback(() => {
+  const handleToggle = React.useCallback(() => {
     peers.forEach((peer) => {
       const channel = rtcDataChannelMap.get(peer.sid);
 
@@ -59,25 +60,25 @@ function AudioControl() {
       }
     });
 
-    const audioTracks = stream?.getAudioTracks();
+    const tracks = stream?.getAudioTracks();
 
-    if (audioTracks !== undefined && audioTracks.length > 0) {
-      audioTracks[0].enabled = !audioEnabled;
+    if (tracks !== undefined && tracks.length > 0) {
+      tracks[0].enabled = !enabled;
     }
 
     setLocal(localActions.setAudioVideoEnabled(!audioEnabled, videoEnabled));
   }, [audioEnabled, local.name, peers, setLocal, stream, videoEnabled]);
 
-  const audioIconClassName = classNames("absolute", {
-    "text-slate-800": !audioEnabled,
+  const iconClassName = classNames("absolute", {
+    "text-slate-800": !enabled,
   });
 
   return (
-    <Control disabled={!audioEnabled} text="Mic">
+    <Control disabled={!enabled} text="Mic">
       <Button
-        color={audioEnabled ? "slate" : "red"}
-        icon={<MicrophoneIcon width={24} className={audioIconClassName} />}
-        onClick={handleToggleAudio}
+        color={enabled ? "slate" : "red"}
+        icon={<MicrophoneIcon width={24} className={iconClassName} />}
+        onClick={handleToggle}
         square
       />
     </Control>
@@ -92,8 +93,9 @@ function VideoControl() {
   assert(local.status === "connecting" || local.status === "connected");
 
   const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
+  const enabled = videoEnabled;
 
-  const handleToggleVideo = React.useCallback(() => {
+  const handleToggle = React.useCallback(() => {
     peers.forEach((peer) => {
       const channel = rtcDataChannelMap.get(peer.sid);
 
@@ -107,25 +109,25 @@ function VideoControl() {
       }
     });
 
-    const videoTracks = stream?.getVideoTracks();
+    const tracks = stream?.getVideoTracks();
 
-    if (videoTracks !== undefined && videoTracks.length > 0) {
-      videoTracks[0].enabled = !videoEnabled;
+    if (tracks !== undefined && tracks.length > 0) {
+      tracks[0].enabled = !enabled;
     }
 
     setLocal(localActions.setAudioVideoEnabled(audioEnabled, !videoEnabled));
   }, [audioEnabled, local.name, peers, setLocal, stream, videoEnabled]);
 
-  const videoIconClassName = classNames("absolute", {
-    "text-slate-800": !videoEnabled,
+  const iconClassName = classNames("absolute", {
+    "text-slate-800": !enabled,
   });
-  
+
   return (
-    <Control disabled={!videoEnabled} text="Cam">
+    <Control disabled={!enabled} text="Cam">
       <Button
-        color={videoEnabled ? "slate" : "red"}
-        icon={<VideoCameraIcon width={24} className={videoIconClassName} />}
-        onClick={handleToggleVideo}
+        color={enabled ? "slate" : "red"}
+        icon={<VideoCameraIcon width={24} className={iconClassName} />}
+        onClick={handleToggle}
         square
       />
     </Control>

From bf590855eda9a1cc3c886e92015eb23df2589cc4 Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 4 Dec 2022 22:33:11 -0800
Subject: [PATCH 3/5] www: refactor audio/video controls into "track controls"

---
 www/components/room/controls.tsx | 79 ++++++++++----------------------
 1 file changed, 25 insertions(+), 54 deletions(-)

diff --git a/www/components/room/controls.tsx b/www/components/room/controls.tsx
index b47971a..1473c16 100644
--- a/www/components/room/controls.tsx
+++ b/www/components/room/controls.tsx
@@ -36,7 +36,7 @@ function Control(props: ControlProps) {
   );
 }
 
-function AudioControl() {
+function TrackControl(track: "video" | "audio") {
   const [local, setLocal] = useRecoilState(localState);
   const peers = useRecoilValue(peersState);
   const stream = mapGet(streamMap, LocalStreamKey);
@@ -44,7 +44,7 @@ function AudioControl() {
   assert(local.status === "connecting" || local.status === "connected");
 
   const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
-  const enabled = videoEnabled;
+  const enabled = track === "audio" ? audioEnabled : videoEnabled;
 
   const handleToggle = React.useCallback(() => {
     peers.forEach((peer) => {
@@ -54,19 +54,25 @@ function AudioControl() {
         sendMessage(channel, {
           type: "peer-state",
           name: local.name,
-          audioEnabled: !audioEnabled,
-          videoEnabled,
+          audioEnabled: track === "audio" ? !audioEnabled : audioEnabled,
+          videoEnabled: track === "video" ? !videoEnabled : videoEnabled,
         });
       }
     });
 
-    const tracks = stream?.getAudioTracks();
+    const tracks =
+      track === "audio" ? stream?.getAudioTracks() : stream?.getVideoTracks();
 
     if (tracks !== undefined && tracks.length > 0) {
       tracks[0].enabled = !enabled;
     }
 
-    setLocal(localActions.setAudioVideoEnabled(!audioEnabled, videoEnabled));
+    setLocal(
+      localActions.setAudioVideoEnabled(
+        track === "audio" ? !audioEnabled : audioEnabled,
+        track === "video" ? !videoEnabled : videoEnabled
+      )
+    );
   }, [audioEnabled, local.name, peers, setLocal, stream, videoEnabled]);
 
   const iconClassName = classNames("absolute", {
@@ -74,10 +80,16 @@ function AudioControl() {
   });
 
   return (
-    <Control disabled={!enabled} text="Mic">
+    <Control disabled={!enabled} text={track === "audio" ? "Mic" : "Cam"}>
       <Button
         color={enabled ? "slate" : "red"}
-        icon={<MicrophoneIcon width={24} className={iconClassName} />}
+        icon={
+          track === "audio" ? (
+            <MicrophoneIcon width={24} className={iconClassName} />
+          ) : (
+            <VideoCameraIcon width={24} className={iconClassName} />
+          )
+        }
         onClick={handleToggle}
         square
       />
@@ -85,53 +97,12 @@ function AudioControl() {
   );
 }
 
-function VideoControl() {
-  const [local, setLocal] = useRecoilState(localState);
-  const peers = useRecoilValue(peersState);
-  const stream = mapGet(streamMap, LocalStreamKey);
-
-  assert(local.status === "connecting" || local.status === "connected");
-
-  const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
-  const enabled = videoEnabled;
-
-  const handleToggle = React.useCallback(() => {
-    peers.forEach((peer) => {
-      const channel = rtcDataChannelMap.get(peer.sid);
-
-      if (channel !== undefined) {
-        sendMessage(channel, {
-          type: "peer-state",
-          name: local.name,
-          audioEnabled,
-          videoEnabled: !videoEnabled,
-        });
-      }
-    });
-
-    const tracks = stream?.getVideoTracks();
-
-    if (tracks !== undefined && tracks.length > 0) {
-      tracks[0].enabled = !enabled;
-    }
-
-    setLocal(localActions.setAudioVideoEnabled(audioEnabled, !videoEnabled));
-  }, [audioEnabled, local.name, peers, setLocal, stream, videoEnabled]);
-
-  const iconClassName = classNames("absolute", {
-    "text-slate-800": !enabled,
-  });
+function AudioControl() {
+  return TrackControl("audio");
+}
 
-  return (
-    <Control disabled={!enabled} text="Cam">
-      <Button
-        color={enabled ? "slate" : "red"}
-        icon={<VideoCameraIcon width={24} className={iconClassName} />}
-        onClick={handleToggle}
-        square
-      />
-    </Control>
-  );
+function VideoControl() {
+  return TrackControl("video");
 }
 
 export default function Controls() {

From 64355cd158c5791edd687c7d6e59dbc863e38980 Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 4 Dec 2022 22:37:58 -0800
Subject: [PATCH 4/5] www: move audio/videoEnabled upstream, to
 requestingDevices

---
 www/atoms/local.ts                         | 23 ++++++++++++++--------
 www/components/room/request-devices.tsx    |  4 +---
 www/components/room/request-permission.tsx |  5 +++--
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/www/atoms/local.ts b/www/atoms/local.ts
index 201dde2..a0b5566 100644
--- a/www/atoms/local.ts
+++ b/www/atoms/local.ts
@@ -16,6 +16,8 @@ export type Local =
   | {
       status: "requestingDevices";
       name: string;
+      audioEnabled: boolean;
+      videoEnabled: boolean;
     }
   | {
       status: "connecting";
@@ -46,18 +48,23 @@ const setAudioVideoEnabled =
     return { ...local, audioEnabled, videoEnabled };
   };
 
-const setConnecting =
+const setConnecting = (local: Local): Local => {
+  assert(local.status === "requestingDevices");
+  return { ...local, status: "connecting" };
+};
+
+const setRequestingDevices =
   (audioEnabled: boolean, videoEnabled: boolean) =>
   (local: Local): Local => {
-    assert(local.status === "requestingDevices");
-    return { ...local, status: "connecting", audioEnabled, videoEnabled };
+    assert(local.status === "requestingPermissions");
+    return {
+      ...local,
+      status: "requestingDevices",
+      audioEnabled,
+      videoEnabled,
+    };
   };
 
-const setRequestingDevices = (local: Local): Local => {
-  assert(local.status === "requestingPermissions");
-  return { ...local, status: "requestingDevices" };
-};
-
 const setRequestingPermissions =
   (name: string) =>
   (local: Local): Local => {
diff --git a/www/components/room/request-devices.tsx b/www/components/room/request-devices.tsx
index 3c6b1c0..03db4f0 100644
--- a/www/components/room/request-devices.tsx
+++ b/www/components/room/request-devices.tsx
@@ -25,9 +25,7 @@ export default function RequestDevices() {
   }, []);
 
   const joinRoom = React.useCallback(async () => {
-    const stream = mapGet(streamMap, LocalStreamKey);
-    const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
-    setLocal(localActions.setConnecting(audioEnabled, videoEnabled));
+    setLocal(localActions.setConnecting);
   }, [setLocal]);
 
   const handleDeviceChange = React.useCallback(
diff --git a/www/components/room/request-permission.tsx b/www/components/room/request-permission.tsx
index 812f70f..57ad4e5 100644
--- a/www/components/room/request-permission.tsx
+++ b/www/components/room/request-permission.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useSetRecoilState } from "recoil";
 import { localActions, localState, LocalStreamKey } from "../../atoms/local";
 import { streamMap } from "../../lib/mesh/maps";
-import { createLocalStream } from "../../lib/mesh/stream";
+import { createLocalStream, getVideoAudioEnabled } from "../../lib/mesh/stream";
 import PreForm from "./pre-form";
 
 export default function RequestPermission() {
@@ -11,7 +11,8 @@ export default function RequestPermission() {
   const requestPermissions = React.useCallback(async () => {
     const stream = await createLocalStream();
     streamMap.set(LocalStreamKey, stream);
-    setLocal(localActions.setRequestingDevices);
+    const { audioEnabled, videoEnabled } = getVideoAudioEnabled(stream);
+    setLocal(localActions.setRequestingDevices(audioEnabled, videoEnabled));
   }, [setLocal]);
 
   return (

From e9f71a741672177c3ca5359152616ba00100f430 Mon Sep 17 00:00:00 2001
From: Wolfgang Faust <wolfgang42@git>
Date: Sun, 4 Dec 2022 22:50:47 -0800
Subject: [PATCH 5/5] www: add audio and video toggles to device request screen

---
 www/atoms/local.ts                      |  6 +++++-
 www/components/room/controls.tsx        | 10 +++++++---
 www/components/room/request-devices.tsx |  3 +++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/www/atoms/local.ts b/www/atoms/local.ts
index a0b5566..ec5ab90 100644
--- a/www/atoms/local.ts
+++ b/www/atoms/local.ts
@@ -44,7 +44,11 @@ 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
index 1473c16..88074d6 100644
--- a/www/components/room/controls.tsx
+++ b/www/components/room/controls.tsx
@@ -41,7 +41,11 @@ 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 +101,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
index 03db4f0..735f697 100644
--- 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}