From fb9d6c23d7f6a3a1c2870f7cad8703ad2f7a267a Mon Sep 17 00:00:00 2001
From: Drew Fisher <drew.m.fisher@gmail.com>
Date: Sun, 28 Aug 2022 04:34:30 -0700
Subject: [PATCH] Reimplement WebRTC controls as a hook

This replaces the hierarchy of components that managed our WebRTC
interactions with a new `useCallState` hook which encapsulates all of
the call state management functionality.  This provides a key benefit:
we can hoist the actual state storage higher in the component tree,
which means that we won't lose call state when switching layouts between
desktop and mobile screen widths.

As a bonus, this change also corrects a bunch of things from the audio
calls implementation that would have gone awry under `StrictMode` in
React 18 due to doing side-effectful actions outside of `useEffect`
blocks.

Fixes #594.
---
 imports/client/components/CallSection.tsx | 615 ++---------------
 imports/client/components/ChatPeople.tsx  | 198 +-----
 imports/client/components/PuzzlePage.tsx  |  53 ++
 imports/client/hooks/useCallState.ts      | 789 ++++++++++++++++++++++
 4 files changed, 922 insertions(+), 733 deletions(-)
 create mode 100644 imports/client/hooks/useCallState.ts

diff --git a/imports/client/components/CallSection.tsx b/imports/client/components/CallSection.tsx
index 37021d2ed..b8820c9a4 100644
--- a/imports/client/components/CallSection.tsx
+++ b/imports/client/components/CallSection.tsx
@@ -1,20 +1,14 @@
 /* eslint-disable no-console */
 import { Meteor } from 'meteor/meteor';
-import { useTracker, useSubscribe, useFind } from 'meteor/react-meteor-data';
+import { useTracker } from 'meteor/react-meteor-data';
 import { _ } from 'meteor/underscore';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
 import { faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons/faMicrophoneSlash';
 import { faVolumeMute } from '@fortawesome/free-solid-svg-icons/faVolumeMute';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Device, types } from 'mediasoup-client';
 import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
+  useCallback, useEffect, useRef, useState,
 } from 'react';
 import Alert from 'react-bootstrap/Alert';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
@@ -22,20 +16,8 @@ import Tooltip from 'react-bootstrap/Tooltip';
 import styled from 'styled-components';
 import Flags from '../../Flags';
 import MeteorUsers from '../../lib/models/MeteorUsers';
-import ConnectAcks from '../../lib/models/mediasoup/ConnectAcks';
-import Consumers from '../../lib/models/mediasoup/Consumers';
-import Peers from '../../lib/models/mediasoup/Peers';
-import ProducerServers from '../../lib/models/mediasoup/ProducerServers';
-import Routers from '../../lib/models/mediasoup/Routers';
-import Transports from '../../lib/models/mediasoup/Transports';
-import { ConsumerType } from '../../lib/schemas/mediasoup/Consumer';
 import { PeerType } from '../../lib/schemas/mediasoup/Peer';
-import { RouterType } from '../../lib/schemas/mediasoup/Router';
-import { TransportType } from '../../lib/schemas/mediasoup/Transport';
-import mediasoupAckConsumer from '../../methods/mediasoupAckConsumer';
-import mediasoupConnectTransport from '../../methods/mediasoupConnectTransport';
-import mediasoupSetProducerPaused from '../../methods/mediasoupSetProducerPaused';
-import { trace } from '../tracing';
+import { Action, CallState } from '../hooks/useCallState';
 import Avatar from './Avatar';
 import Loading from './Loading';
 import Spectrum from './Spectrum';
@@ -99,114 +81,17 @@ const JoiningCall = ({ details }: { details?: string }) => {
   );
 };
 
-type ProducerCallback = ({ id }: { id: string }) => void;
-
-const ProducerManager = ({
-  paused,
-  track,
-  transport,
-}: {
-  paused: boolean;
-  track: MediaStreamTrack;
-  transport: types.Transport;
-}) => {
-  const [dupedTrack, setDupedTrack] = useState<MediaStreamTrack>();
-  useEffect(() => {
-    setDupedTrack(track.clone());
-  }, [track]);
-
-  const [producer, setProducer] = useState<types.Producer>();
-  useEffect(() => {
-    return () => {
-      producer?.close();
-    };
-  }, [producer]);
-
-  const [producerParams, setProducerParams] = useState<[string, string]>();
-  const producerServerCallback = useRef<ProducerCallback>();
-
-  useEffect(() => {
-    if (producer && paused !== producer.paused) {
-      if (paused) {
-        producer.pause();
-      } else {
-        producer.resume();
-      }
-      mediasoupSetProducerPaused.call({
-        mediasoupProducerId: producer.id,
-        paused,
-      });
-    }
-  }, [paused, producer]);
-
-  const onProduce = useCallback((
-    { kind, rtpParameters, appData }: {
-      kind: string,
-      rtpParameters:
-      types.RtpParameters,
-      appData: any,
-    },
-    callback: ProducerCallback,
-  ) => {
-    if (dupedTrack?.id !== appData.trackId) {
-      return;
-    }
-
-    producerServerCallback.current = callback;
-    setProducerParams([kind, JSON.stringify(rtpParameters)]);
-  }, [dupedTrack?.id]);
-  useEffect(() => {
-    transport.on('produce', onProduce);
-    return () => {
-      transport.off('produce', onProduce);
-    };
-  }, [transport, onProduce]);
-
-  useEffect(() => {
-    const observer = ProducerServers.find({ trackId: dupedTrack?.id }).observeChanges({
-      added: (_id, fields) => {
-        producerServerCallback.current?.({ id: fields.producerId! });
-        producerServerCallback.current = undefined;
-      },
-    });
-    return () => observer.stop();
-  }, [dupedTrack?.id]);
-
-  useEffect(() => {
-    if (!dupedTrack) {
-      return;
-    }
-    void (async () => {
-      console.log('Creating Mediasoup producer', { track: dupedTrack.id });
-      // transport.produce will emit a 'produce' event before it resolves,
-      // triggering onProduce above
-      const newProducer = await transport.produce({
-        track: dupedTrack,
-        zeroRtpOnPause: true,
-        appData: { trackId: dupedTrack.id },
-      });
-      setProducer(newProducer);
-    })();
-  }, [transport, dupedTrack]);
-
-  useSubscribe(producerParams ? 'mediasoup:producer' : undefined, transport.appData._id, dupedTrack?.id, ...(producerParams ?? []));
-
-  return null;
-};
-
-const ProducerBox = ({
+const SelfBox = ({
   muted,
   deafened,
   audioContext,
   stream,
-  transport,
   popperBoundaryRef,
 }: {
   muted: boolean,
   deafened: boolean,
   audioContext: AudioContext,
   stream: MediaStream,
-  transport: types.Transport,
   popperBoundaryRef: React.RefObject<HTMLElement>,
 }) => {
   const spectraDisabled = useTracker(() => Flags.active('disable.spectra'));
@@ -219,21 +104,6 @@ const ProducerBox = ({
     };
   });
 
-  const [tracks, setTracks] = useState<MediaStreamTrack[]>([]);
-  useEffect(() => {
-    // Use Meteor.defer here because the addtrack/removetrack events seem to
-    // sometimes fire _before_ the track has actually been added to the stream's
-    // track set.
-    const captureTracks = () => Meteor.defer(() => setTracks(stream.getTracks()));
-    captureTracks();
-    stream.addEventListener('addtrack', captureTracks);
-    stream.addEventListener('removetrack', captureTracks);
-    return () => {
-      stream.removeEventListener('addtrack', captureTracks);
-      stream.removeEventListener('removetrack', captureTracks);
-    };
-  }, [stream]);
-
   return (
     <OverlayTrigger
       placement="bottom"
@@ -271,77 +141,11 @@ const ProducerBox = ({
             />
           ) : null}
         </div>
-        {tracks.map((track) => (
-          <ProducerManager
-            key={track.id}
-            paused={muted || deafened}
-            track={track}
-            transport={transport}
-          />
-        ))}
       </PeopleItemDiv>
     </OverlayTrigger>
   );
 };
 
-const ConsumerManager = ({
-  setTrack,
-  recvTransport,
-  serverConsumer,
-}: {
-  setTrack: (consumer: string, track?: MediaStreamTrack) => void;
-  recvTransport: types.Transport,
-  serverConsumer: ConsumerType,
-}) => {
-  const [consumer, setConsumer] = useState<types.Consumer>();
-  useEffect(() => {
-    setTrack(serverConsumer._id, consumer?.track);
-    return () => setTrack(serverConsumer._id, undefined);
-  }, [serverConsumer._id, consumer?.track, setTrack]);
-
-  const {
-    _id: meteorConsumerId,
-    consumerId: mediasoupConsumerId,
-    producerId,
-    kind,
-    rtpParameters,
-    paused,
-  } = serverConsumer;
-
-  useEffect(() => {
-    if (!consumer) {
-      return;
-    }
-
-    if (paused) {
-      consumer.pause();
-    } else {
-      consumer.resume();
-    }
-  }, [consumer, paused]);
-
-  useEffect(() => {
-    void (async () => {
-      console.log('Creating new Mediasoup consumer', { mediasoupConsumerId, producerId });
-      const newConsumer = await recvTransport.consume({
-        id: mediasoupConsumerId,
-        producerId,
-        kind,
-        rtpParameters: JSON.parse(rtpParameters),
-      });
-      setConsumer(newConsumer);
-      mediasoupAckConsumer.call({ consumerId: meteorConsumerId });
-    })();
-  }, [meteorConsumerId, mediasoupConsumerId, producerId, kind, rtpParameters, recvTransport]);
-
-  // Use a separate useEffect here since the above will return before the promise resolves
-  useEffect(() => {
-    return () => consumer?.close();
-  }, [consumer]);
-
-  return null;
-};
-
 const ChatterTooltip = styled(Tooltip)`
   // Force chatter tooltip overlay to get larger than the default
   // react-bootstrap stylesheet permits.  We can only apply classes to the root
@@ -355,19 +159,18 @@ const ChatterTooltip = styled(Tooltip)`
 const PeerBox = ({
   audioContext,
   selfDeafened,
-  recvTransport,
   peer,
-  consumers,
   popperBoundaryRef,
+  stream,
 }: {
   audioContext: AudioContext,
   selfDeafened: boolean,
-  recvTransport: types.Transport,
   peer: PeerType,
-  consumers: ConsumerType[],
   popperBoundaryRef: React.RefObject<HTMLElement>,
+  stream: MediaStream | undefined,
 }) => {
   const spectraDisabled = useTracker(() => Flags.active('disable.spectra'));
+  const audioRef = React.createRef<HTMLAudioElement>();
   const { userId, name, discordAccount } = useTracker(() => {
     const user = MeteorUsers.findOne(peer.createdBy);
     return {
@@ -376,34 +179,16 @@ const PeerBox = ({
       discordAccount: user?.discordAccount,
     };
   }, [peer.createdBy]);
-
-  const { current: stream } = useRef(new MediaStream());
-
-  const [tracks, setTracks] = useState<Map<string, MediaStreamTrack>>(new Map());
-  const setTrack = useCallback((consumer: string, track?: MediaStreamTrack) => {
-    setTracks((prevTracks) => {
-      const prevTrack = prevTracks.get(consumer);
-      const newTracks = new Map(prevTracks);
-
-      if (prevTrack) {
-        stream.removeTrack(prevTrack);
-        newTracks.delete(consumer);
-      }
-      if (track) {
-        stream.addTrack(track);
-        newTracks.set(consumer, track);
-      }
-
-      return newTracks;
-    });
-  }, [stream]);
-
-  const audioRef = useRef<HTMLAudioElement>(null);
   useEffect(() => {
-    if (audioRef.current && tracks.size > 0) {
-      audioRef.current.srcObject = stream;
+    if (audioRef.current) {
+      if (stream) {
+        // eslint-disable-next-line no-param-reassign
+        audioRef.current.srcObject = stream;
+      } else {
+        audioRef.current.srcObject = null;
+      }
     }
-  }, [tracks, stream]);
+  }, [stream, audioRef]);
 
   const { muted, deafened } = peer;
 
@@ -437,7 +222,7 @@ const PeerBox = ({
         <div>
           {muted && <MutedIcon><FontAwesomeIcon icon={faMicrophoneSlash} /></MutedIcon>}
           {deafened && <DeafenedIcon><FontAwesomeIcon icon={faVolumeMute} /></DeafenedIcon>}
-          {!spectraDisabled && !muted && (tracks.size > 0) ? (
+          {!spectraDisabled && !muted && stream && stream.getTracks().length > 0 ? (
             <Spectrum
               width={40}
               height={40}
@@ -446,22 +231,18 @@ const PeerBox = ({
             />
           ) : null}
         </div>
-        <audio ref={audioRef} autoPlay playsInline muted={selfDeafened} />
-        {consumers.map((consumer) => (
-          <ConsumerManager
-            key={consumer._id}
-            setTrack={setTrack}
-            recvTransport={recvTransport}
-            serverConsumer={consumer}
-          />
-        ))}
+        <audio
+          autoPlay
+          playsInline
+          muted={selfDeafened}
+          ref={audioRef}
+        />
       </PeopleItemDiv>
     </OverlayTrigger>
   );
 };
 
 const Callers = ({
-  puzzleId,
   muted,
   deafened,
   audioContext,
@@ -469,10 +250,8 @@ const Callers = ({
   callersExpanded,
   onToggleCallersExpanded,
   otherPeers,
-  sendTransport,
-  recvTransport,
+  peerStreams,
 }: {
-  puzzleId: string,
   muted: boolean;
   deafened: boolean;
   audioContext: AudioContext;
@@ -480,30 +259,22 @@ const Callers = ({
   callersExpanded: boolean;
   onToggleCallersExpanded(): void;
   otherPeers: PeerType[];
-  sendTransport: types.Transport;
-  recvTransport: types.Transport;
+  peerStreams: Map<string, MediaStream>;
 }) => {
   const callersHeaderIcon = callersExpanded ? faCaretDown : faCaretRight;
   const callerCount = otherPeers.length + 1; // +1 for self
   const chatterRef = useRef<HTMLDivElement>(null);
 
-  const consumers = useFind(
-    () => Consumers.find({ call: puzzleId }, { sort: { _id: 1 } }),
-    [puzzleId]
-  );
-  const groupedConsumers = useMemo(() => {
-    return _.groupBy(consumers, (consumer) => consumer.producerPeer);
-  }, [consumers]);
   const peerBoxes = otherPeers.map((peer) => {
+    const stream = peerStreams.get(peer._id);
     return (
       <PeerBox
         key={peer._id}
         selfDeafened={deafened}
         audioContext={audioContext}
-        recvTransport={recvTransport}
         peer={peer}
-        consumers={groupedConsumers[peer._id] ?? []}
         popperBoundaryRef={chatterRef}
+        stream={stream}
       />
     );
   });
@@ -515,12 +286,11 @@ const Callers = ({
         {`${callerCount} caller${callerCount !== 1 ? 's' : ''}`}
       </ChatterSubsectionHeader>
       <PeopleListDiv collapsed={!callersExpanded}>
-        <ProducerBox
+        <SelfBox
           muted={muted}
           deafened={deafened}
           audioContext={audioContext}
           stream={localStream}
-          transport={sendTransport}
           popperBoundaryRef={chatterRef}
         />
         {peerBoxes}
@@ -529,330 +299,47 @@ const Callers = ({
   );
 };
 
-const useTransport = (
-  device: types.Device,
-  transportParams: TransportType,
-) => {
-  const [transport, setTransport] = useState<types.Transport>();
-  const connectRef = useRef<() => void>();
-
-  const {
-    _id,
-    direction,
-    transportId,
-    iceParameters,
-    iceCandidates,
-    dtlsParameters: serverDtlsParameters,
-  } = transportParams;
-
-  useEffect(() => {
-    console.log('Creating new Mediasoup transport', { transportId, direction });
-    const method = direction === 'send' ? 'createSendTransport' : 'createRecvTransport';
-    const newTransport = device[method]({
-      id: transportId,
-      iceParameters: JSON.parse(iceParameters),
-      iceCandidates: JSON.parse(iceCandidates),
-      dtlsParameters: JSON.parse(serverDtlsParameters),
-      appData: {
-        _id,
-      },
-    });
-    newTransport.on('connect', ({ dtlsParameters: clientDtlsParameters }, callback) => {
-      connectRef.current = callback;
-      // No need to set a callback here, since the ConnectAck record acts as a
-      // callback
-      mediasoupConnectTransport.call({
-        transportId: _id,
-        dtlsParameters: JSON.stringify(clientDtlsParameters),
-      });
-    });
-    setTransport(newTransport);
-    return () => {
-      newTransport.close();
-    };
-  }, [device, _id, direction, transportId, iceParameters, iceCandidates, serverDtlsParameters]);
-
-  return [transport, connectRef] as const;
-};
-
-const CallTransportConnector = ({
-  puzzleId,
-  muted,
-  deafened,
-  audioContext,
-  localStream,
-  callersExpanded,
-  onToggleCallersExpanded,
-  selfPeer,
-  otherPeers,
-  device,
-  sendServerParams,
-  recvServerParams,
-  onHeightChange,
-}: {
-  puzzleId: string,
-  muted: boolean;
-  deafened: boolean;
-  audioContext: AudioContext;
-  localStream: MediaStream;
-  callersExpanded: boolean;
-  onToggleCallersExpanded(): void;
-  selfPeer: PeerType;
-  otherPeers: PeerType[];
-  device: types.Device;
-  sendServerParams: TransportType;
-  recvServerParams: TransportType;
-  onHeightChange(): void;
-}) => {
-  // Because our connection might be to a different server than the mediasoup
-  // router is hosted on, the Meteor transport_connect call will return before
-  // the connection parameters have been passed to the server-side transport.
-  // Therefore, stash the acknowledgement callback on a ref and call it once the
-  // corresponding ConnectAck db record is created.
-  const [sendTransport, sendTransportConnectCallback] = useTransport(device, sendServerParams);
-  const [recvTransport, recvTransportConnectCallback] = useTransport(device, recvServerParams);
-  useEffect(() => {
-    const observer = ConnectAcks.find({ peer: selfPeer._id }).observeChanges({
-      added: (_id, fields) => {
-        if (fields.direction === 'send') {
-          sendTransportConnectCallback.current?.();
-          sendTransportConnectCallback.current = undefined;
-        } else if (fields.direction === 'recv') {
-          recvTransportConnectCallback.current?.();
-          recvTransportConnectCallback.current = undefined;
-        }
-      },
-    });
-    return () => observer.stop();
-  }, [selfPeer._id, sendTransportConnectCallback, recvTransportConnectCallback]);
-
-  const notReadyYet = !sendTransport || !recvTransport;
-  useLayoutEffect(() => {
-    // Notify any time we might change the height of what we render
-    trace('CallTransportConnector useLayoutEffect', {
-      notReadyYet,
-      callersExpanded,
-      otherPeers: otherPeers.length,
-    });
-    onHeightChange();
-  }, [onHeightChange, notReadyYet, callersExpanded, otherPeers.length]);
-
-  trace('CallTransportConnector render', {
-    hasSend: !!sendTransport,
-    hasRecv: !!recvTransport,
-    otherPeers: otherPeers.length,
-  });
-
-  if (!sendTransport || !recvTransport) {
-    // No JoiningCall warning here - if we have params coming in we're
-    // guaranteed to create the local transports
-    return null;
-  }
-
-  return (
-    <Callers
-      puzzleId={puzzleId}
-      muted={muted}
-      deafened={deafened}
-      audioContext={audioContext}
-      localStream={localStream}
-      callersExpanded={callersExpanded}
-      onToggleCallersExpanded={onToggleCallersExpanded}
-      otherPeers={otherPeers}
-      sendTransport={sendTransport}
-      recvTransport={recvTransport}
-    />
-  );
-};
-
-const CallTransportCreator = ({
-  puzzleId,
+const CallSection = ({
   muted,
   deafened,
   audioContext,
   localStream,
   callersExpanded,
   onToggleCallersExpanded,
-  selfPeer,
-  otherPeers,
-  router,
-  onHeightChange,
+  callState,
+  callDispatch,
 }: {
-  puzzleId: string,
   muted: boolean;
   deafened: boolean;
   audioContext: AudioContext;
   localStream: MediaStream;
   callersExpanded: boolean;
   onToggleCallersExpanded(): void;
-  selfPeer: PeerType;
-  otherPeers: PeerType[];
-  router: RouterType;
-  onHeightChange(): void;
+  callState: CallState;
+  callDispatch: React.Dispatch<Action>;
 }) => {
-  const [device, setDevice] = useState<types.Device>();
-  useEffect(() => {
-    void (async () => {
-      console.log('Creating new Mediasoup device');
-      const newDevice = new Device();
-      await newDevice.load({
-        routerRtpCapabilities: JSON.parse(router.rtpCapabilities),
-      });
-      setDevice(newDevice);
-    })();
-  }, [router.rtpCapabilities]);
-
-  useSubscribe(device ? 'mediasoup:transports' : undefined, selfPeer._id, JSON.stringify(device?.rtpCapabilities));
-  const { sendServerParams, recvServerParams } = useTracker(() => {
-    return {
-      // Note that these queries don't pin to the specific TransportRequest
-      // created by the subscription above, so for some reason we delete and
-      // recreate that subscription, we might transiently see the old Transports
-      // instead of the current ones. As the old subscription is torn down, the
-      // old Transports will be deleted as well, so this should converge on its
-      // own.
-      sendServerParams: Transports.findOne({ peer: selfPeer._id, direction: 'send' }),
-      recvServerParams: Transports.findOne({ peer: selfPeer._id, direction: 'recv' }),
-    };
-  }, [selfPeer._id]);
-
-  const hasDevice = !!device;
-  useLayoutEffect(() => {
-    trace('CallSection useLayoutEffect', {
-      hasDevice,
-      sendId: sendServerParams?._id,
-      recvId: recvServerParams?._id,
-    });
-    onHeightChange();
-  }, [onHeightChange, hasDevice, sendServerParams?._id, recvServerParams?._id]);
-
-  trace('CallSection render', {
-    hasDevice,
-    sendServerParams,
-    recvServerParams,
-  });
-
-  if (!device) {
-    return null;
+  const onToggleMute = useCallback(() => {
+    callDispatch({ type: 'toggle-mute' });
+  }, [callDispatch]);
+  const onToggleDeafen = useCallback(() => {
+    callDispatch({ type: 'toggle-deafen' });
+  }, [callDispatch]);
+  const onLeaveCall = useCallback(() => {
+    callDispatch({ type: 'leave-call' });
+  }, [callDispatch]);
+
+  if (!callState.device) {
+    return <JoiningCall details="Missing device" />;
   }
 
-  if (!sendServerParams || !recvServerParams) {
-    return <JoiningCall details="Missing transport parameters" />;
-  }
-
-  return (
-    <CallTransportConnector
-      puzzleId={puzzleId}
-      muted={muted}
-      deafened={deafened}
-      audioContext={audioContext}
-      localStream={localStream}
-      callersExpanded={callersExpanded}
-      onToggleCallersExpanded={onToggleCallersExpanded}
-      selfPeer={selfPeer}
-      otherPeers={otherPeers}
-      device={device}
-      sendServerParams={sendServerParams}
-      recvServerParams={recvServerParams}
-      onHeightChange={onHeightChange}
-    />
-  );
-};
-
-const CallJoiner = ({
-  huntId,
-  puzzleId,
-  tabId,
-  muted,
-  deafened,
-  audioContext,
-  localStream,
-  callersExpanded,
-  onToggleCallersExpanded,
-  onHeightChange,
-}: {
-  huntId: string;
-  puzzleId: string;
-  tabId: string;
-  muted: boolean;
-  deafened: boolean;
-  audioContext: AudioContext;
-  localStream: MediaStream;
-  callersExpanded: boolean;
-  onToggleCallersExpanded(): void;
-  onHeightChange(): void;
-}) => {
-  useSubscribe('mediasoup:join', huntId, puzzleId, tabId);
-
-  const userId = useTracker(() => Meteor.userId(), []);
-  const peers = useFind(() => Peers.find({ call: puzzleId }));
-  const selfPeer = useMemo(() => {
-    return peers.find((peer) => peer.createdBy === userId && peer.tab === tabId);
-  }, [peers, tabId, userId]);
-  const otherPeers = useMemo(
-    () => peers.filter((p) => p._id !== selfPeer?._id),
-    [peers, selfPeer?._id]
-  );
-  const router = useTracker(() => Routers.findOne({ call: puzzleId }), [puzzleId]);
-
-  useLayoutEffect(() => {
-    // We might change height when showing the JoiningCall message
-    onHeightChange();
-  }, [onHeightChange, selfPeer, router]);
-
-  if (!selfPeer) {
+  if (!callState.selfPeer) {
     return <JoiningCall details="Missing peer record for self" />;
   }
-  if (!router) {
+
+  if (!callState.router) {
     return <JoiningCall details="Missing router" />;
   }
 
-  return (
-    <CallTransportCreator
-      puzzleId={puzzleId}
-      muted={muted}
-      deafened={deafened}
-      audioContext={audioContext}
-      localStream={localStream}
-      callersExpanded={callersExpanded}
-      onToggleCallersExpanded={onToggleCallersExpanded}
-      selfPeer={selfPeer}
-      otherPeers={otherPeers}
-      router={router}
-      onHeightChange={onHeightChange}
-    />
-  );
-};
-
-const CallSection = ({
-  huntId,
-  puzzleId,
-  tabId,
-  muted,
-  deafened,
-  onToggleMute,
-  onToggleDeafen,
-  onLeaveCall,
-  audioContext,
-  localStream,
-  callersExpanded,
-  onToggleCallersExpanded,
-  onHeightChange,
-}: {
-  huntId: string;
-  puzzleId: string;
-  tabId: string;
-  muted: boolean;
-  deafened: boolean;
-  onToggleMute(): void;
-  onToggleDeafen(): void;
-  onLeaveCall(): void;
-  audioContext: AudioContext;
-  localStream: MediaStream;
-  callersExpanded: boolean;
-  onToggleCallersExpanded(): void;
-  onHeightChange(): void;
-}) => {
   return (
     <>
       <AVActions>
@@ -872,17 +359,15 @@ const CallSection = ({
         </AVButton>
         <AVButton variant="danger" size="sm" onClick={onLeaveCall}>Leave call</AVButton>
       </AVActions>
-      <CallJoiner
-        huntId={huntId}
-        puzzleId={puzzleId}
-        tabId={tabId}
+      <Callers
         muted={muted}
         deafened={deafened}
         audioContext={audioContext}
         localStream={localStream}
         callersExpanded={callersExpanded}
         onToggleCallersExpanded={onToggleCallersExpanded}
-        onHeightChange={onHeightChange}
+        otherPeers={callState.otherPeers}
+        peerStreams={callState.peerStreams}
       />
     </>
   );
diff --git a/imports/client/components/ChatPeople.tsx b/imports/client/components/ChatPeople.tsx
index 1e82e546d..9da023e9c 100644
--- a/imports/client/components/ChatPeople.tsx
+++ b/imports/client/components/ChatPeople.tsx
@@ -1,5 +1,4 @@
 import { Meteor } from 'meteor/meteor';
-import { Random } from 'meteor/random';
 import { useSubscribe, useTracker } from 'meteor/react-meteor-data';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
@@ -17,8 +16,7 @@ import CallHistories from '../../lib/models/mediasoup/CallHistories';
 import Peers from '../../lib/models/mediasoup/Peers';
 import relativeTimeFormat from '../../lib/relativeTimeFormat';
 import { DiscordAccountType } from '../../lib/schemas/DiscordAccount';
-import { PeerType } from '../../lib/schemas/mediasoup/Peer';
-import mediasoupSetPeerState from '../../methods/mediasoupSetPeerState';
+import { Action, CallJoinState, CallState } from '../hooks/useCallState';
 import useSubscribeAvatars from '../hooks/useSubscribeAvatars';
 import { Subscribers } from '../subscribers';
 import { trace } from '../tracing';
@@ -31,8 +29,6 @@ import {
 } from './styling/PeopleComponents';
 import { PuzzlePagePadding } from './styling/constants';
 
-const tabId = Random.id();
-
 interface ViewerSubscriber {
   user: string;
   name: string | undefined;
@@ -83,43 +79,6 @@ const PeopleListHeader = styled(ChatterSubsectionHeader)`
   text-indent: -1rem;
 `;
 
-enum CallState {
-  CHAT_ONLY = 'chatonly',
-  REQUESTING_STREAM = 'requestingstream',
-  STREAM_ERROR = 'streamerror',
-  IN_CALL = 'call',
-}
-
-interface AudioControls {
-  // A note on mute and deafen: being deafened implies you are also not
-  // broadcasting audio to other parties, because that would allow for
-  // situations where you are being disruptive to others but don't know it.
-  // This state value for muted is "explicitly muted" rather than "implicitly
-  // muted by deafen".  You are effectively muted (and will appear muted to
-  // other) if you are muted or deafened.  The `muted` boolean field here will
-  // only track if you are explicitly muted, but in all props for all children,
-  // the muted property represents "effectively muted".  (We track them
-  // separately because if you mute before deafening, then undeafen should
-  // leave you muted, and we'd lose that bit otherwise.)
-  muted: boolean;
-  deafened: boolean;
-}
-
-interface ChatAudioState {
-  audioContext: AudioContext | undefined;
-  mediaSource: MediaStream | undefined;
-}
-
-// Helper to tear down tracks of streams
-function stopTracks(stream: MediaStream | null | undefined) {
-  if (stream) {
-    const tracks = stream.getTracks();
-    tracks.forEach((track) => {
-      track.stop();
-    });
-  }
-}
-
 const ChatterSection = styled.section`
   flex: 0;
   background-color: #ebd0e3;
@@ -128,43 +87,29 @@ const ChatterSection = styled.section`
   padding: ${PuzzlePagePadding};
 `;
 
-function participantState(explicitlyMuted: boolean, deafened: boolean) {
-  if (deafened) {
-    return 'deafened';
-  } else if (explicitlyMuted) {
-    return 'muted';
-  } else {
-    return 'active';
-  }
-}
-
 // ChatPeople is the component that deals with all user presence and
 // WebRTC call subscriptions, state, and visualization.
 const ChatPeople = ({
-  huntId, puzzleId, puzzleDeleted, onHeightChange,
+  huntId, puzzleId, puzzleDeleted, onHeightChange, callState, callDispatch,
 }: {
   huntId: string;
   puzzleId: string;
   puzzleDeleted: boolean;
   onHeightChange: () => void;
+  callState: CallState;
+  callDispatch: React.Dispatch<Action>;
 }) => {
-  const [callState, setCallState] = useState<CallState>(CallState.CHAT_ONLY);
   const [error, setError] = useState<string>('');
   const chatterRef = useRef<HTMLDivElement>(null);
 
-  const [localAudioControls, setLocalAudioControls] = useState<AudioControls>({
-    muted: false,
-    deafened: false,
-  });
+  const {
+    audioControls,
+    audioState,
+  } = callState;
 
   const [callersExpanded, setCallersExpanded] = useState<boolean>(true);
   const [viewersExpanded, setViewersExpanded] = useState<boolean>(true);
 
-  const [audioState, setAudioState] = useState<ChatAudioState>({
-    audioContext: undefined,
-    mediaSource: undefined,
-  });
-
   const subscriberTopic = `puzzle:${puzzleId}`;
   const subscribersLoading = useSubscribe('subscribers.fetch', subscriberTopic);
   const callMembersLoading = useSubscribe('mediasoup:metadata', huntId, puzzleId);
@@ -204,7 +149,6 @@ const ChatPeople = ({
     unknown,
     viewers,
     rtcViewers,
-    selfPeer,
   } = useTracker(() => {
     if (loading) {
       return {
@@ -225,12 +169,7 @@ const ChatPeople = ({
       hunt: huntId,
       call: puzzleId,
     }).fetch();
-    let self: PeerType | undefined;
     rtcParticipants.forEach((p) => {
-      if (p.createdBy === Meteor.userId() && p.tab === tabId) {
-        self = p;
-      }
-
       const user = MeteorUsers.findOne(p.createdBy);
       if (!user || !user.displayName) {
         unknownCount += 1;
@@ -272,61 +211,9 @@ const ChatPeople = ({
       unknown: unknownCount,
       viewers: viewersAcc,
       rtcViewers: rtcViewersAcc,
-      selfPeer: self,
     };
   }, [loading, subscriberTopic, huntId, puzzleId]);
 
-  const updatePeerState = useCallback((muted: boolean, deafened: boolean) => {
-    const effectiveState = participantState(muted, deafened);
-    if (selfPeer) {
-      mediasoupSetPeerState.call({ peerId: selfPeer._id, state: effectiveState });
-    }
-  }, [selfPeer]);
-
-  const toggleMuted = useCallback(() => {
-    setLocalAudioControls((prevState) => {
-      const nextState = {
-        muted: !(prevState.deafened || prevState.muted),
-        deafened: false,
-      };
-
-      // Pausing or unpausing the consumer in mediasoup should be sufficient to
-      // stop transmitting audio, but just to be sure, we disable the capture
-      // stream here as well.
-      audioState.mediaSource?.getTracks().forEach((t) => {
-        // eslint-disable-next-line no-param-reassign
-        t.enabled = !nextState.muted;
-      });
-
-      // Tell the server about our new state
-      updatePeerState(nextState.muted, nextState.deafened);
-
-      return nextState;
-    });
-  }, [updatePeerState, audioState.mediaSource]);
-
-  const toggleDeafened = useCallback(() => {
-    setLocalAudioControls((prevState) => {
-      const nextState = {
-        muted: prevState.muted,
-        deafened: !prevState.deafened,
-      };
-
-      // Pausing or unpausing the consumer in mediasoup should be sufficient to
-      // stop transmitting audio, but just to be sure, we disable the capture
-      // stream here as well.
-      audioState.mediaSource?.getTracks().forEach((t) => {
-        // eslint-disable-next-line no-param-reassign
-        t.enabled = !nextState.muted;
-      });
-
-      // Tell the server about our new state
-      updatePeerState(nextState.muted, nextState.deafened);
-
-      return nextState;
-    });
-  }, [updatePeerState, audioState.mediaSource]);
-
   const toggleCallersExpanded = useCallback(() => {
     setCallersExpanded((prevState) => {
       return !prevState;
@@ -339,12 +226,12 @@ const ChatPeople = ({
     });
   }, []);
 
-  const { muted, deafened } = localAudioControls;
+  const { muted, deafened } = audioControls;
 
   const joinCall = useCallback(async () => {
     trace('ChatPeople joinCall');
     if (navigator.mediaDevices) {
-      setCallState(CallState.REQUESTING_STREAM);
+      callDispatch({ type: 'request-capture' });
       const preferredAudioDeviceId = localStorage.getItem(PREFERRED_AUDIO_DEVICE_STORAGE_KEY) ||
         undefined;
       // Get the user media stream.
@@ -363,7 +250,7 @@ const ChatPeople = ({
         mediaSource = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
       } catch (e) {
         setError(`Couldn't get local microphone: ${(e as Error).message}`);
-        setCallState(CallState.STREAM_ERROR);
+        callDispatch({ type: 'capture-error', error: e as Error });
         return;
       }
 
@@ -371,39 +258,19 @@ const ChatPeople = ({
         (window as {webkitAudioContext?: AudioContext}).webkitAudioContext;
       const audioContext = new AudioContext();
 
-      setAudioState({
-        audioContext,
-        mediaSource,
+      callDispatch({
+        type: 'join-call',
+        audioState: {
+          mediaSource,
+          audioContext,
+        },
       });
-      setCallState(CallState.IN_CALL);
     } else {
-      setError('Couldn\'t get local microphone: browser denies access on non-HTTPS origins');
-      setCallState(CallState.STREAM_ERROR);
+      const msg = 'Couldn\'t get local microphone: browser denies access on non-HTTPS origins';
+      setError(msg);
+      callDispatch({ type: 'capture-error', error: new Error(msg) });
     }
-  }, []);
-
-  const leaveCall = useCallback(() => {
-    trace('ChatPeople leaveCall');
-    stopTracks(audioState.mediaSource);
-    setCallState(CallState.CHAT_ONLY);
-    setLocalAudioControls({
-      muted: false,
-      deafened: false,
-    });
-    setAudioState({
-      audioContext: undefined,
-      mediaSource: undefined,
-    });
-  }, [audioState]);
-
-  useEffect(() => {
-    // When unmounting, stop any tracks that might be running
-    return () => {
-      trace('ChatPeople stop tracks on unmount');
-      // Stop any tracks that might be running.
-      stopTracks(audioState.mediaSource);
-    };
-  }, [audioState.mediaSource]);
+  }, [callDispatch]);
 
   useLayoutEffect(() => {
     trace('ChatPeople useLayoutEffect', {
@@ -441,9 +308,9 @@ const ChatPeople = ({
   // TODO: find osme way to factor this out other than "immediately invoked fat-arrow function"
   const callersSubsection = (() => {
     const callersHeaderIcon = callersExpanded ? faCaretDown : faCaretRight;
-    switch (callState) {
-      case CallState.CHAT_ONLY:
-      case CallState.REQUESTING_STREAM: {
+    switch (callState.callState) {
+      case CallJoinState.CHAT_ONLY:
+      case CallJoinState.REQUESTING_STREAM: {
         const joinLabel = rtcViewers.length > 0 ? 'Join audio call' : 'Start audio call';
         return (
           <>
@@ -469,25 +336,20 @@ const ChatPeople = ({
           </>
         );
       }
-      case CallState.IN_CALL:
+      case CallJoinState.IN_CALL:
         return (
           <CallSection
-            huntId={huntId}
-            puzzleId={puzzleId}
-            tabId={tabId}
-            onLeaveCall={leaveCall}
-            onToggleMute={toggleMuted}
-            onToggleDeafen={toggleDeafened}
             muted={muted || deafened}
             deafened={deafened}
-            audioContext={audioState.audioContext!}
-            localStream={audioState.mediaSource!}
+            audioContext={audioState!.audioContext!}
+            localStream={audioState!.mediaSource!}
             callersExpanded={callersExpanded}
             onToggleCallersExpanded={toggleCallersExpanded}
-            onHeightChange={onHeightChange}
+            callState={callState}
+            callDispatch={callDispatch}
           />
         );
-      case CallState.STREAM_ERROR:
+      case CallJoinState.STREAM_ERROR:
         return (
           <div>
             {`ERROR GETTING MIC: ${error}`}
diff --git a/imports/client/components/PuzzlePage.tsx b/imports/client/components/PuzzlePage.tsx
index b9e1e5cd3..39e7bb06e 100644
--- a/imports/client/components/PuzzlePage.tsx
+++ b/imports/client/components/PuzzlePage.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable max-len, no-console */
 import { Meteor } from 'meteor/meteor';
+import { Random } from 'meteor/random';
 import { useSubscribe, useTracker } from 'meteor/react-meteor-data';
 import { _ } from 'meteor/underscore';
 import { faEdit } from '@fortawesome/free-solid-svg-icons/faEdit';
@@ -52,6 +53,7 @@ import sendChatMessage from '../../methods/sendChatMessage';
 import undestroyPuzzle from '../../methods/undestroyPuzzle';
 import updatePuzzle from '../../methods/updatePuzzle';
 import { useBreadcrumb } from '../hooks/breadcrumb';
+import useCallState, { Action, CallState } from '../hooks/useCallState';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import useSubscribeDisplayNames from '../hooks/useSubscribeDisplayNames';
 import markdown from '../markdown';
@@ -65,6 +67,11 @@ import TagList from './TagList';
 import FixedLayout from './styling/FixedLayout';
 import { MonospaceFontFamily, SolvedPuzzleBackgroundColor } from './styling/constants';
 
+// Shows a state dump as an in-page overlay when enabled.
+const DEBUG_SHOW_CALL_STATE = false;
+
+const tabId = Random.id();
+
 const FilteredChatFields: ('_id' | 'puzzle' | 'text' | 'sender' | 'timestamp')[] = ['_id', 'puzzle', 'text', 'sender', 'timestamp'];
 type FilteredChatMessageType = Pick<ChatMessageType, typeof FilteredChatFields[0]>
 
@@ -536,12 +543,15 @@ interface ChatSectionHandle {
 
 const ChatSection = React.forwardRef(({
   chatDataLoading, puzzleDeleted, displayNames, puzzleId, huntId,
+  callState, callDispatch,
 }: {
   chatDataLoading: boolean;
   puzzleDeleted: boolean;
   displayNames: Record<string, string>;
   puzzleId: string;
   huntId: string;
+  callState: CallState;
+  callDispatch: React.Dispatch<Action>;
 }, forwardedRef: React.Ref<ChatSectionHandle>) => {
   const historyRef = useRef<React.ElementRef<typeof ChatHistoryMemo>>(null);
   const scrollToTargetRequestRef = useRef<boolean>(false);
@@ -598,6 +608,8 @@ const ChatSection = React.forwardRef(({
         puzzleId={puzzleId}
         puzzleDeleted={puzzleDeleted}
         onHeightChange={scrollHistoryToTarget}
+        callState={callState}
+        callDispatch={callDispatch}
       />
       <ChatHistoryMemo ref={historyRef} puzzleId={puzzleId} displayNames={displayNames} />
       <ChatInput
@@ -1293,6 +1305,8 @@ const PuzzlePage = React.memo(() => {
   const documentTitle = `${title} :: Jolly Roger`;
   useDocumentTitle(documentTitle);
 
+  const [callState, dispatch] = useCallState({ huntId, puzzleId, tabId });
+
   const onResize = useCallback(() => {
     setIsDesktop(window.innerWidth >= MinimumDesktopWidth);
     trace('PuzzlePage onResize', { hasRef: !!chatSectionRef.current });
@@ -1361,12 +1375,50 @@ const PuzzlePage = React.memo(() => {
       displayNames={displayNames}
       huntId={huntId}
       puzzleId={puzzleId}
+      callState={callState}
+      callDispatch={dispatch}
     />
   );
   const deletedModal = activePuzzle.deleted && (
     <PuzzleDeletedModal puzzleId={puzzleId} huntId={huntId} replacedBy={activePuzzle.replacedBy} />
   );
 
+  let debugPane: React.ReactNode | undefined;
+  if (DEBUG_SHOW_CALL_STATE) {
+    (window as any).globalCallState = callState;
+    const peerStreamsForRendering = new Map();
+    callState.peerStreams.forEach((stream, peerId) => {
+      peerStreamsForRendering.set(peerId, `active: ${stream.active}, tracks: ${stream.getTracks().length}`);
+    });
+    const callStateForRendering = {
+      ...callState,
+      peerStreams: peerStreamsForRendering,
+      audioState: {
+        mediaSource: callState.audioState?.mediaSource ? 'present' : 'absent',
+        audioContext: callState.audioState?.audioContext ? 'present' : 'absent',
+      },
+      device: callState.device ? 'present' : 'absent',
+      transports: {
+        recv: callState.transports.recv ? 'present' : 'absent',
+        send: callState.transports.send ? 'present' : 'absent',
+      },
+      router: callState.router ? 'present' : 'absent',
+    };
+    debugPane = (
+      <pre
+        style={{
+          position: 'absolute',
+          right: '0',
+          bottom: '0',
+          fontSize: '12px',
+          backgroundColor: 'rgba(255,255,255,.7)',
+        }}
+      >
+        {JSON.stringify(callStateForRendering, undefined, 2)}
+      </pre>
+    );
+  }
+
   if (isDesktop) {
     return (
       <>
@@ -1387,6 +1439,7 @@ const PuzzlePage = React.memo(() => {
             <PuzzleContent>
               {metadata}
               <PuzzlePageMultiplayerDocument document={document} />
+              {debugPane}
             </PuzzleContent>
           </SplitPanePlus>
         </FixedLayout>
diff --git a/imports/client/hooks/useCallState.ts b/imports/client/hooks/useCallState.ts
new file mode 100644
index 000000000..6f3839ab6
--- /dev/null
+++ b/imports/client/hooks/useCallState.ts
@@ -0,0 +1,789 @@
+/* eslint-disable no-console */
+import { Meteor } from 'meteor/meteor';
+import { useFind, useTracker } from 'meteor/react-meteor-data';
+import { _ } from 'meteor/underscore';
+import { Device, types } from 'mediasoup-client';
+import React, {
+  useEffect, useMemo, useReducer, useRef, useState, useCallback,
+} from 'react';
+import ConnectAcks from '../../lib/models/mediasoup/ConnectAcks';
+import Consumers from '../../lib/models/mediasoup/Consumers';
+import Peers from '../../lib/models/mediasoup/Peers';
+import ProducerServers from '../../lib/models/mediasoup/ProducerServers';
+import Routers from '../../lib/models/mediasoup/Routers';
+import Transports from '../../lib/models/mediasoup/Transports';
+import { PeerType } from '../../lib/schemas/mediasoup/Peer';
+import { RouterType } from '../../lib/schemas/mediasoup/Router';
+import { TransportType } from '../../lib/schemas/mediasoup/Transport';
+import mediasoupAckConsumer from '../../methods/mediasoupAckConsumer';
+import mediasoupConnectTransport from '../../methods/mediasoupConnectTransport';
+import mediasoupSetPeerState from '../../methods/mediasoupSetPeerState';
+import mediasoupSetProducerPaused from '../../methods/mediasoupSetProducerPaused';
+
+const DEBUG_LOGGING = false;
+
+function log(...args: any[]) {
+  if (DEBUG_LOGGING) {
+    console.log(...args);
+  }
+}
+
+export enum CallJoinState {
+  CHAT_ONLY = 'chatonly',
+  REQUESTING_STREAM = 'requestingstream',
+  STREAM_ERROR = 'streamerror',
+  IN_CALL = 'call',
+}
+
+// A note on mute and deafen: being deafened implies you are also not
+// broadcasting audio to other parties, because that would allow for
+// situations where you are being disruptive to others but don't know it.
+// This state value for muted is "explicitly muted" rather than "implicitly
+// muted by deafen".  You are effectively muted (and will appear muted to
+// other) if you are muted or deafened.  The `muted` boolean field here will
+// only track if you are explicitly muted, but in all props for all children,
+// the muted property represents "effectively muted".  (We track them
+// separately because if you mute before deafening, then undeafen should
+// leave you muted, and we'd lose that bit otherwise.)
+export type AudioControls = {
+  muted: boolean;
+  deafened: boolean;
+};
+
+function participantState(explicitlyMuted: boolean, deafened: boolean) {
+  if (deafened) {
+    return 'deafened';
+  } else if (explicitlyMuted) {
+    return 'muted';
+  } else {
+    return 'active';
+  }
+}
+
+export type AudioState = {
+  audioContext: AudioContext | undefined;
+  mediaSource: MediaStream | undefined;
+};
+export type Transports = {
+  send: types.Transport | undefined;
+  recv: types.Transport | undefined;
+};
+
+export type CallState = ({
+  callState: CallJoinState.CHAT_ONLY | CallJoinState.REQUESTING_STREAM | CallJoinState.STREAM_ERROR;
+  audioState?: AudioState;
+} | {
+  callState: CallJoinState.IN_CALL;
+  audioState: AudioState;
+}) & {
+  device: types.Device | undefined;
+  transports: Transports;
+  router: RouterType | undefined;
+  audioControls: AudioControls;
+  selfPeer: PeerType | undefined;
+  otherPeers: PeerType[];
+  peerStreams: Map<string, MediaStream>; // map from Peer._id to stream
+};
+
+export type Action =
+  | { type: 'request-capture' }
+  | { type: 'capture-error', error: Error }
+  | { type: 'join-call', audioState: AudioState }
+  | { type: 'set-device', device: types.Device | undefined }
+  | { type: 'set-transport', direction: 'send' | 'recv', transport: types.Transport | undefined }
+  | { type: 'set-router', router: RouterType | undefined }
+  | { type: 'leave-call' }
+  | { type: 'toggle-mute' }
+  | { type: 'toggle-deafen' }
+  | { type: 'set-peers', selfPeer: PeerType | undefined, otherPeers: PeerType[] }
+  | { type: 'add-peer-track', peerId: string, track: MediaStreamTrack }
+  | { type: 'remove-peer-track', peerId: string, track: MediaStreamTrack }
+  | { type: 'reset' };
+
+const INITIAL_STATE: CallState = {
+  callState: CallJoinState.CHAT_ONLY,
+  audioControls: {
+    muted: false,
+    deafened: false,
+  },
+  device: undefined,
+  transports: {
+    send: undefined,
+    recv: undefined,
+  },
+  router: undefined,
+  selfPeer: undefined,
+  otherPeers: [] as PeerType[],
+  peerStreams: new Map<string, MediaStream>(),
+};
+
+function reducer(state: CallState, action: Action): CallState {
+  log('dispatch', action);
+  switch (action.type) {
+    case 'request-capture':
+      return { ...state, callState: CallJoinState.REQUESTING_STREAM };
+    case 'capture-error':
+      return { ...state, callState: CallJoinState.STREAM_ERROR };
+    case 'join-call':
+      return {
+        ...state,
+        callState: CallJoinState.IN_CALL,
+        audioState: action.audioState,
+        audioControls: {
+          muted: false,
+          deafened: false,
+        },
+      };
+    case 'set-device':
+      return {
+        ...state,
+        device: action.device,
+      };
+    case 'set-transport':
+      return {
+        ...state,
+        transports: {
+          ...state.transports,
+          [action.direction]: action.transport,
+        },
+      };
+    case 'set-router':
+      return {
+        ...state,
+        router: action.router,
+      };
+    case 'leave-call':
+      return INITIAL_STATE;
+    case 'toggle-mute': {
+      if (state.callState !== CallJoinState.IN_CALL || !state.audioControls) {
+        throw new Error("Can't toggle mute if not in call");
+      }
+      const nextMuted = !(state.audioControls.deafened || state.audioControls.muted);
+      return {
+        ...state,
+        audioControls: {
+          muted: nextMuted,
+          deafened: false,
+        },
+      };
+    }
+    case 'toggle-deafen':
+      if (state.callState !== CallJoinState.IN_CALL || !state.audioControls) {
+        throw new Error("Can't toggle mute if not in call");
+      }
+      return {
+        ...state,
+        audioControls: {
+          muted: state.audioControls.muted,
+          deafened: !state.audioControls.deafened,
+        },
+      };
+    case 'set-peers':
+      return {
+        ...state,
+        selfPeer: action.selfPeer,
+        otherPeers: action.otherPeers,
+      };
+    case 'add-peer-track': {
+      const newStream = new MediaStream();
+      state.peerStreams.get(action.peerId)?.getTracks().forEach((track) => {
+        newStream.addTrack(track);
+      });
+      newStream.addTrack(action.track);
+      const newPeerStreams = new Map(state.peerStreams);
+      newPeerStreams.set(action.peerId, newStream);
+      return {
+        ...state,
+        peerStreams: newPeerStreams,
+      };
+    }
+    case 'remove-peer-track': {
+      const newStream = new MediaStream();
+      let trackCount = 0;
+      state.peerStreams.get(action.peerId)?.getTracks().forEach((track) => {
+        if (track !== action.track) {
+          trackCount += 1;
+          newStream.addTrack(track);
+        }
+      });
+      const newPeerStreams = new Map(state.peerStreams);
+      if (trackCount > 0) {
+        newPeerStreams.set(action.peerId, newStream);
+      } else {
+        newPeerStreams.delete(action.peerId);
+      }
+      return {
+        ...state,
+        peerStreams: newPeerStreams,
+      };
+    }
+    case 'reset':
+      return INITIAL_STATE;
+    default:
+      throw new Error();
+  }
+}
+
+const useTransport = (
+  device: types.Device | undefined,
+  direction: 'send' | 'recv',
+  transportParams: TransportType | undefined,
+  dispatch: React.Dispatch<Action>,
+) => {
+  const connectRef = useRef<() => void>();
+
+  const hasParams = !!device && !!transportParams;
+  useEffect(() => {
+    if (hasParams) {
+      const _id = transportParams._id;
+      const transportId = transportParams.transportId;
+      const iceParameters = transportParams.iceParameters;
+      const iceCandidates = transportParams.iceCandidates;
+      const serverDtlsParameters = transportParams.dtlsParameters;
+      console.log('Creating new Mediasoup transport', { transportId, direction });
+      const method = direction === 'send' ? 'createSendTransport' : 'createRecvTransport';
+      const newTransport = device[method]({
+        id: transportId,
+        iceParameters: JSON.parse(iceParameters),
+        iceCandidates: JSON.parse(iceCandidates),
+        dtlsParameters: JSON.parse(serverDtlsParameters),
+        appData: {
+          _id,
+        },
+      });
+      newTransport.on('connect', ({ dtlsParameters: clientDtlsParameters }, callback) => {
+        connectRef.current = callback;
+        // No need to set a callback here, since the ConnectAck record acts as a
+        // callback
+        mediasoupConnectTransport.call({
+          transportId: _id,
+          dtlsParameters: JSON.stringify(clientDtlsParameters),
+        }, (err) => {
+          if (err) {
+            console.error(`Failed to connect transport ${direction}`, err);
+          }
+        });
+      });
+      log(`setting ${direction} transport`, newTransport);
+      dispatch({
+        type: 'set-transport',
+        direction,
+        transport: newTransport,
+      });
+      return () => {
+        if (!newTransport.closed) newTransport.close();
+      };
+    } else {
+      log(`clearing ${direction} transport`);
+      dispatch({
+        type: 'set-transport',
+        direction,
+        transport: undefined,
+      });
+      return undefined;
+    }
+  }, [
+    device, hasParams, transportParams?._id, direction,
+    transportParams?.transportId, transportParams?.iceParameters, transportParams?.iceCandidates,
+    transportParams?.dtlsParameters, dispatch,
+  ]);
+
+  return connectRef;
+};
+
+type ProducerCallback = ({ id }: { id: string }) => void;
+type ProducerState = {
+  producer: types.Producer | undefined;
+  subHandle: Meteor.SubscriptionHandle | undefined;
+  producerServerCallback: ProducerCallback | undefined;
+  kind: string | undefined;
+  rtpParameters: string | undefined;
+}
+
+type ConsumerState = {
+  consumer: types.Consumer | undefined;
+  peerId: string;
+}
+
+const useCallState = ({ huntId, puzzleId, tabId }: {
+  huntId: string,
+  puzzleId: string,
+  tabId: string,
+}): [CallState, React.Dispatch<Action>] => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+
+  useEffect(() => {
+    // If huntId, puzzleId, or tabId change (but mostly puzzleId), reset
+    // call state.
+    return () => {
+      log('huntId/puzzleId/tabId changed, resetting call state');
+      dispatch({ type: 'reset' });
+    };
+  }, [huntId, puzzleId, tabId]);
+
+  useEffect(() => {
+    // When mediaSource (the mic capture stream) changes, stop all the tracks.
+    return () => {
+      if (state.audioState?.mediaSource) {
+        state.audioState?.mediaSource.getTracks().forEach((track) => {
+          track.stop();
+        });
+      }
+    };
+  }, [state.audioState?.mediaSource]);
+
+  const joinSubRef = useRef<Meteor.SubscriptionHandle | undefined>(undefined);
+  useEffect(() => {
+    if (state.callState === CallJoinState.IN_CALL && !joinSubRef.current) {
+      // Subscribe to 'mediasoup:join' for huntId, puzzleId, tabId
+      joinSubRef.current = Meteor.subscribe('mediasoup:join', huntId, puzzleId, tabId);
+    }
+
+    return () => {
+      if (joinSubRef.current) {
+        joinSubRef.current.stop();
+        joinSubRef.current = undefined;
+      }
+    };
+  }, [state.callState, huntId, puzzleId, tabId]);
+
+  const userId = useTracker(() => Meteor.userId(), []);
+  const peers = useFind(() => Peers.find({ hunt: huntId, call: puzzleId }), [huntId, puzzleId]);
+  const selfPeer = useMemo(() => {
+    return peers.find((peer) => peer.createdBy === userId && peer.tab === tabId);
+  }, [peers, tabId, userId]);
+  const otherPeers = useMemo(
+    () => peers.filter((p) => p._id !== selfPeer?._id),
+    [peers, selfPeer?._id]
+  );
+  // Make sure to keep state.peers up-to-date.
+  useEffect(() => {
+    dispatch({ type: 'set-peers', selfPeer, otherPeers });
+  }, [selfPeer, otherPeers]);
+  const router = useTracker(() => Routers.findOne({ call: puzzleId }), [puzzleId]);
+  useEffect(() => {
+    dispatch({ type: 'set-router', router });
+  }, [router]);
+
+  // Once we have the Router for this room, we can create a mediasoup client device.
+  // If we disconnect from the call, though, we want to make sure to get a new
+  // Device for the next call.
+  const device = state.device;
+  useEffect(() => {
+    if (router?._id) {
+      void (async () => {
+        console.log('Creating new Mediasoup device');
+        const newDevice = new Device();
+        await newDevice.load({
+          routerRtpCapabilities: JSON.parse(router.rtpCapabilities),
+        });
+        dispatch({ type: 'set-device', device: newDevice });
+      })();
+    } else {
+      console.log('Clearing Mediasoup device');
+      dispatch({ type: 'set-device', device: undefined });
+    }
+  }, [router?._id, router?.rtpCapabilities]);
+
+  const rtpCaps = device ? JSON.stringify(device.rtpCapabilities) : undefined;
+  const transportSubHandle = useRef<Meteor.SubscriptionHandle | undefined>(undefined);
+  useEffect(() => {
+    if (!transportSubHandle.current && device && selfPeer?._id) {
+      log(`subscribe mediasoup:transports ${selfPeer._id}`, rtpCaps);
+      transportSubHandle.current = Meteor.subscribe('mediasoup:transports', selfPeer._id, rtpCaps);
+    }
+
+    return () => {
+      if (transportSubHandle.current) {
+        transportSubHandle.current.stop();
+        transportSubHandle.current = undefined;
+      }
+    };
+  }, [device, selfPeer?._id, rtpCaps]);
+
+  const hasSelfPeer = !!selfPeer;
+  const { sendServerParams, recvServerParams } = useTracker(() => {
+    return {
+      // Note that these queries don't pin to the specific TransportRequest
+      // created by the subscription above, so for some reason we delete and
+      // recreate that subscription, we might transiently see the old Transports
+      // instead of the current ones. As the old subscription is torn down, the
+      // old Transports will be deleted as well, so this should converge on its
+      // own.
+      sendServerParams: hasSelfPeer ? Transports.findOne({ peer: selfPeer._id, direction: 'send' }) : undefined,
+      recvServerParams: hasSelfPeer ? Transports.findOne({ peer: selfPeer._id, direction: 'recv' }) : undefined,
+    };
+  }, [hasSelfPeer, selfPeer?._id]);
+
+  // We now believe we have the parameters we need to connect call transports.
+
+  // Because our connection might be to a different server than the mediasoup
+  // router is hosted on, the Meteor transport_connect call will return before
+  // the connection parameters have been passed to the server-side transport.
+  // Therefore, stash the acknowledgement callback on a ref and call it once the
+  // corresponding ConnectAck db record is created.
+  const sendTransportConnectCallback = useTransport(device, 'send', sendServerParams, dispatch);
+  const recvTransportConnectCallback = useTransport(device, 'recv', recvServerParams, dispatch);
+  const sendTransport = state.transports.send;
+  const recvTransport = state.transports.recv;
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (hasSelfPeer) {
+      const observer = ConnectAcks.find({ peer: selfPeer._id }).observeChanges({
+        added: (_id, fields) => {
+          if (fields.direction === 'send') {
+            sendTransportConnectCallback.current?.();
+            sendTransportConnectCallback.current = undefined;
+          } else if (fields.direction === 'recv') {
+            recvTransportConnectCallback.current?.();
+            recvTransportConnectCallback.current = undefined;
+          }
+        },
+      });
+      return () => observer.stop();
+    }
+    return undefined;
+  }, [hasSelfPeer, selfPeer?._id, sendTransportConnectCallback, recvTransportConnectCallback]);
+
+  // const notReadyYet = !sendTransport || !recvTransport;
+
+  // ==========================================================================
+  // Producer (audio from local microphone, sending to server) logic
+  // Extract the tracks from the current media source stream
+  const [producerTracks, setProducerTracks] = useState<MediaStreamTrack[]>([]);
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    // Use Meteor.defer here because the addtrack/removetrack events seem to
+    // sometimes fire _before_ the track has actually been added to the stream's
+    // track set.
+    const stream = state.audioState?.mediaSource;
+    if (stream) {
+      const captureTracks = () => Meteor.defer(() => setProducerTracks(stream.getTracks()));
+      captureTracks();
+      stream.addEventListener('addtrack', captureTracks);
+      stream.addEventListener('removetrack', captureTracks);
+      return () => {
+        stream.removeEventListener('addtrack', captureTracks);
+        stream.removeEventListener('removetrack', captureTracks);
+      };
+    } else {
+      setProducerTracks([]);
+      return undefined;
+    }
+  }, [state.audioState?.mediaSource]);
+
+  // map from track ID to state for that track, including subscription handle
+  const producerMapRef = useRef<Map<string, ProducerState>>(new Map());
+  // force side effects from onProduce
+  const [producerParamsGeneration, setProducerParamsGeneration] = useState<number>(0);
+  // force side-effects when producer is ready
+  const [producerGeneration, setProducerGeneration] = useState<number>(0);
+
+  const onProduce = useCallback((
+    { kind, rtpParameters, appData }: {
+      kind: string,
+      rtpParameters: types.RtpParameters,
+      appData: any,
+    },
+    callback: ProducerCallback,
+  ) => {
+    log(`onProduce(kind=${kind}, track id=${appData.trackId})`);
+    // extract track Id from app data
+    const producerState = producerMapRef.current.get(appData.trackId);
+    if (!producerState) {
+      console.error(`got onProduce callback for ${appData.trackId} but found no producer state`);
+    } else {
+      producerState.kind = kind;
+      producerState.rtpParameters = JSON.stringify(rtpParameters);
+      producerState.producerServerCallback = callback;
+      setProducerParamsGeneration((prevValue) => (prevValue + 1));
+    }
+  }, []);
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (sendTransport) {
+      sendTransport?.on('produce', onProduce);
+      return () => {
+        sendTransport?.off('produce', onProduce);
+      };
+    }
+    return undefined;
+  }, [sendTransport, onProduce]);
+
+  useEffect(() => {
+    const observer = ProducerServers.find().observeChanges({
+      added: (_id, fields) => {
+        log(`ProducerServers added ${_id}`, fields);
+        const trackId = fields.trackId;
+        if (!trackId) {
+          console.error('Expected trackId in', _id, fields);
+          return;
+        }
+        const producerState = producerMapRef.current.get(trackId);
+        if (producerState?.producerServerCallback) {
+          log(`Calling producerServerCallback(id: ${fields.producerId})`);
+          producerState.producerServerCallback({ id: fields.producerId! });
+          producerState.producerServerCallback = undefined;
+          log('%cOutbound track live', 'color: green; background: yellow;');
+        }
+      },
+    });
+    return () => observer.stop();
+  }, []);
+
+  useEffect(() => {
+    log('producerTracks', producerTracks.map((t) => t.id));
+    const activeTrackIds = new Set();
+    producerTracks.forEach((track) => {
+      activeTrackIds.add(track.id);
+      // Subscribe if no sub created yet
+
+      if (sendTransport) {
+        if (!producerMapRef.current.has(track.id)) {
+          // Create empty entry, before we attempt to produce for the track
+          producerMapRef.current.set(track.id, {
+            producer: undefined,
+            subHandle: undefined,
+            producerServerCallback: undefined,
+            kind: undefined,
+            rtpParameters: undefined,
+          });
+          console.log('Creating Mediasoup producer', { track: track.id });
+          // Tell the mediasoup library to produce a stream from this track.
+          void (async () => {
+            const newProducer = await sendTransport.produce({
+              track,
+              zeroRtpOnPause: true,
+              appData: { trackId: track.id },
+            });
+            log('got producer', newProducer);
+            const entry = producerMapRef.current.get(track.id);
+            if (entry) {
+              entry.producer = newProducer;
+            } else {
+              console.error(`no entry in producerMapRef for ${track.id}`);
+            }
+            setProducerGeneration((prevValue) => prevValue + 1);
+          })();
+        }
+
+        // Safe: we just set it above
+        const producerState = producerMapRef.current.get(track.id)!;
+        if (!producerState.subHandle && producerState.kind &&
+          producerState.rtpParameters) {
+          // Indicate intent to produce to the backend.
+          log(`subscribe mediasoup:producer tp=${sendTransport.appData._id} track=${track.id} kind=${producerState.kind}`);
+          producerState.subHandle = Meteor.subscribe('mediasoup:producer', sendTransport.appData._id, track.id, producerState.kind, producerState.rtpParameters);
+        }
+      }
+    });
+
+    // Drop any producers for tracks that are no longer in producerTracks.
+    producerMapRef.current.forEach((producerState, trackId) => {
+      if (!activeTrackIds.has(trackId)) {
+        // Stop the producer if present
+        if (producerState.producer) {
+          log('stopping producer for track', trackId);
+          producerState.producer.close();
+        }
+        // Stop the producer sub if present.
+        if (producerState.subHandle) {
+          log('stopping producer sub for track', trackId);
+          producerState.subHandle.stop();
+        }
+        log('producerMapRef.delete', trackId);
+        // Drop the removed track from the producerMapRef.
+        producerMapRef.current.delete(trackId);
+      }
+    });
+  }, [sendTransport, producerTracks, producerParamsGeneration]);
+
+  // Ensure mute state is respected by mediasoup.
+  const producerShouldBePaused = state.audioControls?.muted || state.audioControls?.deafened;
+  useEffect(() => {
+    if (producerShouldBePaused !== undefined) {
+      // Update producer pause state
+      producerTracks.forEach((track) => {
+        const producer = producerMapRef.current.get(track.id)?.producer;
+        if (producer && (producerShouldBePaused !== producer.paused)) {
+          if (producerShouldBePaused) {
+            // eslint-disable-next-line no-param-reassign
+            track.enabled = false;
+            log('pausing producer for track', track.id);
+            producer.pause();
+          } else {
+            // eslint-disable-next-line no-param-reassign
+            track.enabled = true;
+            log('resuming producer for track', track.id);
+            producer.resume();
+          }
+          mediasoupSetProducerPaused.call({
+            mediasoupProducerId: producer.id,
+            paused: producerShouldBePaused,
+          }, (err) => {
+            if (err) {
+              console.error("Couldn't tell backend we've paused producer", track.id, err);
+            }
+          });
+        }
+      });
+    }
+  }, [producerTracks, producerShouldBePaused, producerGeneration]);
+
+  // Ensure we update peer state so that mute/deafen are visible to others.
+  useEffect(() => {
+    const audioControls = state.audioControls;
+    if (selfPeer && audioControls) {
+      const serverEffectiveState = participantState(selfPeer.muted, selfPeer.deafened);
+      const localEffectiveState = participantState(audioControls.muted, audioControls.deafened);
+      if (serverEffectiveState !== localEffectiveState) {
+        mediasoupSetPeerState.call({ peerId: selfPeer._id, state: localEffectiveState }, (err) => {
+          if (err) {
+            console.error(`Couldn't set peer state for ${selfPeer._id} to ${localEffectiveState}`, err);
+          }
+        });
+      }
+    }
+  }, [selfPeer, state.audioControls?.muted, state.audioControls?.deafened, state.audioControls]);
+
+  // Ensure we clean up producers when unmounting.
+  useEffect(() => {
+    const producerMap = producerMapRef.current;
+    return () => {
+      // TODO: dedupe this and the effect above
+      producerMap.forEach((producerState, trackId) => {
+        // Stop the producer if present
+        if (producerState.producer) {
+          log('stopping producer for track', trackId);
+          producerState.producer.close();
+        }
+
+        // Stop the producer sub if present.
+        if (producerState.subHandle) {
+          log('stopping producer sub for track', trackId);
+          producerState.subHandle.stop();
+        }
+
+        // Drop the removed track from the producerMapRef.
+        log('producerMapRef.delete', trackId);
+        producerMap.delete(trackId);
+      });
+    };
+  }, []);
+
+  // ==========================================================================
+  // Consumer (audio from other peers, fetching from server) logic
+  const puzzleConsumers = useFind(
+    () => Consumers.find({ call: puzzleId }, { sort: { _id: 1 } }),
+    [puzzleId]
+  );
+  const groupedConsumers = useMemo(() => {
+    return _.groupBy(puzzleConsumers, (consumer) => consumer.producerPeer);
+  }, [puzzleConsumers]);
+
+  // Map from consumer._id to our working state for that consumer.
+  const consumerMapRef = useRef<Map<string, ConsumerState>>(new Map());
+
+  const cleanupConsumer = useCallback((meteorId, consumerState) => {
+    // Drop it.
+    if (consumerState.consumer) {
+      log('Stopping consumer', meteorId);
+      consumerState.consumer.close();
+      dispatch({ type: 'remove-peer-track', peerId: consumerState.peerId, track: consumerState.consumer.track });
+    }
+
+    // Delete it.
+    log('consumerMapRef delete', meteorId);
+    consumerMapRef.current.delete(meteorId);
+  }, []);
+
+  useEffect(() => {
+    const activeConsumerIds = new Set();
+    const activePeerIds = new Set();
+    if (state.callState === CallJoinState.IN_CALL) {
+      otherPeers.forEach((peer) => {
+        activePeerIds.add(peer._id);
+        const consumers = groupedConsumers[peer._id] ?? [];
+        consumers.forEach((consumer) => {
+          const {
+            _id: meteorConsumerId,
+            consumerId: mediasoupConsumerId,
+            producerId,
+            kind,
+            rtpParameters,
+            paused,
+          } = consumer;
+          activeConsumerIds.add(consumer._id);
+          if (recvTransport) {
+            if (!consumerMapRef.current.has(consumer._id)) {
+              consumerMapRef.current.set(consumer._id, {
+                consumer: undefined,
+                peerId: peer._id,
+              });
+              log('consumers', consumerMapRef.current);
+              // Create a new Mediasoup consumer
+              void (async () => {
+                console.log('Creating new Mediasoup consumer', { mediasoupConsumerId, producerId });
+                const newConsumer = await recvTransport.consume({
+                  id: mediasoupConsumerId,
+                  producerId,
+                  kind,
+                  rtpParameters: JSON.parse(rtpParameters),
+                });
+                log('new consumer:', newConsumer);
+                const entry = consumerMapRef.current.get(consumer._id);
+                if (entry) {
+                  // Save on the ref so we can clean it up later if needed.
+                  entry.consumer = newConsumer;
+                  // Push the track into state.
+                  dispatch({ type: 'add-peer-track', peerId: peer._id, track: newConsumer.track });
+                  mediasoupAckConsumer.call({ consumerId: meteorConsumerId }, (err) => {
+                    if (err) {
+                      console.error(`Couldn't ack consumer: _id: ${meteorConsumerId} consumerId: ${mediasoupConsumerId}`, err);
+                    }
+                  });
+                } else {
+                  console.error(`Created Mediasoup consumer for ${consumer._id} but id not in consumer map`);
+                }
+              })();
+            }
+
+            const consumerState = consumerMapRef.current.get(consumer._id);
+            if (consumerState && consumerState.consumer) {
+              if (consumerState.consumer.paused !== paused) {
+                if (paused) {
+                  consumerState.consumer.pause();
+                } else {
+                  consumerState.consumer.resume();
+                }
+              }
+            }
+          }
+        });
+      });
+    }
+
+    // Clean up any no-longer-present consumers
+    consumerMapRef.current.forEach((consumerState, meteorId) => {
+      if (!activeConsumerIds.has(meteorId)) {
+        cleanupConsumer(meteorId, consumerState);
+      }
+    });
+  }, [
+    state.callState, recvTransport, otherPeers, puzzleConsumers, groupedConsumers, cleanupConsumer,
+  ]);
+
+  useEffect(() => {
+    // Also clean up consumers on unmount.
+    const consumerMap = consumerMapRef.current;
+    return () => {
+      consumerMap.forEach((consumerState, meteorId) => {
+        cleanupConsumer(meteorId, consumerState);
+      });
+    };
+  }, [cleanupConsumer]);
+
+  return [state, dispatch];
+};
+
+export default useCallState;