diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 58fa0595..d47cbb31 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -37,6 +37,12 @@ import { findDeviceByName } from "../media-utils";
import { OpenIDLoader } from "../livekit/OpenIDLoader";
import { ActiveCall } from "./InCallView";
+/**
+ * If there already is this many participants in the call, we automatically mute
+ * the user
+ */
+const MUTE_PARTICIPANT_COUNT = 8;
+
declare global {
interface Window {
groupCall?: GroupCall;
@@ -229,6 +235,8 @@ export function GroupCallView({
groupCall.enter();
}, [groupCall]);
+ console.log("LOG participant size", participants.size);
+
if (error) {
return ;
} else if (state === GroupCallState.Entered && userChoices) {
@@ -293,7 +301,7 @@ export function GroupCallView({
setUserChoices(choices);
enter();
}}
- muteAudio={participants.size > 8}
+ initWithMutedAudio={participants.size > MUTE_PARTICIPANT_COUNT}
isEmbedded={isEmbedded}
hideHeader={hideHeader}
/>
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 6b51542a..c97cc3ca 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -33,7 +33,7 @@ interface Props {
onEnter: (userChoices: UserChoices) => void;
isEmbedded: boolean;
hideHeader: boolean;
- muteAudio: boolean;
+ initWithMutedAudio: boolean;
}
export function LobbyView(props: Props) {
@@ -67,7 +67,7 @@ export function LobbyView(props: Props) {
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index d39aeb17..9ba11a89 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -40,13 +40,13 @@ export type MatrixInfo = {
interface Props {
matrixInfo: MatrixInfo;
- muteAudio: boolean;
+ initWithMutedAudio: boolean;
onUserChoicesChanged: (choices: UserChoices) => void;
}
export function VideoPreview({
matrixInfo,
- muteAudio,
+ initWithMutedAudio,
onUserChoicesChanged,
}: Props) {
const { client } = useClient();
@@ -69,13 +69,9 @@ export function VideoPreview({
// Create local media tracks.
const [videoEnabled, setVideoEnabled] = useState(true);
- const [audioEnabled, setAudioEnabled] = useState(!muteAudio);
-
- useEffect(() => {
- if (muteAudio) {
- setAudioEnabled(false);
- }
- }, [muteAudio]);
+ const [audioEnabled, setAudioEnabled] = useState(
+ !initWithMutedAudio
+ );
// The settings are updated as soon as the device changes. We wrap the settings value in a ref to store their initial value.
// Not changing the device options prohibits the usePreviewTracks hook to recreate the tracks.
diff --git a/src/room/useGroupCall.ts b/src/room/useGroupCall.ts
index b0cbf76f..b02e7113 100644
--- a/src/room/useGroupCall.ts
+++ b/src/room/useGroupCall.ts
@@ -171,7 +171,7 @@ export function useGroupCall(
isScreensharing: false,
screenshareFeeds: [],
requestingScreenshare: false,
- participants: new Map(),
+ participants: getParticipants(groupCall),
hasLocalParticipant: false,
});