Import unfinished mute states refactor

src/room/GroupCallView.tsx

@@ -38,7 +38,7 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
-import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
+import { type MuteStates } from "../state/MuteStates";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { leaveRTCSession } from "../rtcSessionHelpers";
@@ -76,6 +76,12 @@ import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useAppBarTitle } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 
+/**
+ * If there already are this many participants in the call, we automatically mute
+ * the user.
+ */
+export const MUTE_PARTICIPANT_COUNT = 8;
+
 declare global {
   interface Window {
     rtcSession?: MatrixRTCSession;

src/room/RoomPage.tsx

@@ -20,6 +20,8 @@ import {
   CheckIcon,
   UnknownSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useObservable } from "observable-hooks";
+import { map } from "rxjs";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
@@ -35,12 +37,13 @@ import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useProfile } from "../profile/useProfile";
-import { useMuteStates } from "./MuteStates";
 import { useOptInAnalytics } from "../settings/settings";
 import { Config } from "../config/Config";
 import { Link } from "../button/Link";
 import { ErrorView } from "../ErrorView";
-import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
+import { useMediaDevices } from "../MediaDevicesContext";
+import { MuteStates } from "../state/MuteStates";
+import { ObservableScope } from "../state/ObservableScope";
 
 export const RoomPage: FC = () => {
   const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
@@ -62,7 +65,18 @@ export const RoomPage: FC = () => {
 
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
   const [joined, setJoined] = useState(false);
-  const muteStates = useMuteStates(joined);
+
+  const devices = useMediaDevices();
+  const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
+  const joined$ = useObservable(
+    (inputs$) => inputs$.pipe(map(([joined]) => joined)),
+    [joined],
+  );
+  useEffect(() => {
+    const scope = new ObservableScope();
+    setMuteStates(new MuteStates(scope, devices, joined$));
+    return (): void => scope.end();
+  }, [devices, joined$]);
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
@@ -99,10 +113,10 @@ export const RoomPage: FC = () => {
     }
   }, [groupCallState.kind]);
 
-  const groupCallView = (): JSX.Element => {
+  const groupCallView = (): ReactNode => {
     switch (groupCallState.kind) {
       case "loaded":
-        return (
+        return muteStates && (
           <GroupCallView
             widget={widget}
             client={client!}
@@ -134,7 +148,7 @@ export const RoomPage: FC = () => {
             </>
           );
         return (
-          <LobbyView
+          muteStates && <LobbyView
             client={client!}
             matrixInfo={{
               userId: client!.getUserId() ?? "",