www: refactor audio/video controls into "track controls"

tom-james-watson · Dec 5, 2022 · bf59085 · bf59085
1 parent 33951ba
commit bf59085
Showing 1 changed file with 25 additions and 54 deletions.
diff --git a/www/components/room/controls.tsx b/www/components/room/controls.tsx
@@ -36,15 +36,15 @@ 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);
 
   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,84 +54,55 @@ 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", {
     "text-slate-800": !enabled,
   });
 
   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
       />
     </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 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() {