From 8ee0e207bd9451a914460b8f0c6980e05e06267b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 24 Jul 2023 12:06:51 +0200
Subject: [PATCH 1/2] Automatically mute the user, if there already are more
 than 8 participants
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/livekit/useLiveKit.ts |  2 +-
 src/room/InCallView.tsx   | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/livekit/useLiveKit.ts b/src/livekit/useLiveKit.ts
index dac6a052..adb5c72c 100644
--- a/src/livekit/useLiveKit.ts
+++ b/src/livekit/useLiveKit.ts
@@ -11,7 +11,7 @@ export type UserChoices = {
 };
 
 export type DeviceChoices = {
-  selectedId: string;
+  selectedId?: string;
   enabled: boolean;
 };
 
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index c45edbc2..866c75af 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -97,7 +97,20 @@ export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
 
 export function ActiveCall(props: ActiveCallProps) {
   const sfuConfig = useSFUConfig();
-  const livekitRoom = useLiveKit(props.userChoices, sfuConfig);
+  const livekitRoom = useLiveKit(
+    {
+      audio: {
+        selectedId: props.userChoices.audio?.selectedId,
+        enabled:
+          (props.userChoices.audio?.enabled ?? false) &&
+          // Automatically mute the user, if there is more than 8 participants
+          // in the call
+          props.groupCall.participants.size <= 8,
+      },
+      video: props.userChoices.video,
+    },
+    sfuConfig
+  );
 
   if (!livekitRoom) {
     return null;

From c2a3d60efd544d721d8e6abc583156537c7525e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 24 Jul 2023 17:44:07 +0200
Subject: [PATCH 2/2] Mute in lobby
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/room/GroupCallView.tsx |  1 +
 src/room/InCallView.tsx    | 15 +--------------
 src/room/LobbyView.tsx     |  2 ++
 src/room/VideoPreview.tsx  | 15 +++++++++++++--
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 29d14b82..89a72002 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -279,6 +279,7 @@ export function GroupCallView({
           setUserChoices(choices);
           enter();
         }}
+        muteAudio={participants.size > 8}
         isEmbedded={isEmbedded}
         hideHeader={hideHeader}
       />
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 866c75af..c45edbc2 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -97,20 +97,7 @@ export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
 
 export function ActiveCall(props: ActiveCallProps) {
   const sfuConfig = useSFUConfig();
-  const livekitRoom = useLiveKit(
-    {
-      audio: {
-        selectedId: props.userChoices.audio?.selectedId,
-        enabled:
-          (props.userChoices.audio?.enabled ?? false) &&
-          // Automatically mute the user, if there is more than 8 participants
-          // in the call
-          props.groupCall.participants.size <= 8,
-      },
-      video: props.userChoices.video,
-    },
-    sfuConfig
-  );
+  const livekitRoom = useLiveKit(props.userChoices, sfuConfig);
 
   if (!livekitRoom) {
     return null;
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 0f07ae7d..6b51542a 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -33,6 +33,7 @@ interface Props {
   onEnter: (userChoices: UserChoices) => void;
   isEmbedded: boolean;
   hideHeader: boolean;
+  muteAudio: boolean;
 }
 
 export function LobbyView(props: Props) {
@@ -66,6 +67,7 @@ export function LobbyView(props: Props) {
         <div className={styles.joinRoomContent}>
           <VideoPreview
             matrixInfo={props.matrixInfo}
+            muteAudio={props.muteAudio}
             onUserChoicesChanged={setUserChoices}
           />
           <Trans>
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index 5fac133e..d39aeb17 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -40,10 +40,15 @@ export type MatrixInfo = {
 
 interface Props {
   matrixInfo: MatrixInfo;
+  muteAudio: boolean;
   onUserChoicesChanged: (choices: UserChoices) => void;
 }
 
-export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
+export function VideoPreview({
+  matrixInfo,
+  muteAudio,
+  onUserChoicesChanged,
+}: Props) {
   const { client } = useClient();
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
 
@@ -64,7 +69,13 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
 
   // Create local media tracks.
   const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
-  const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
+  const [audioEnabled, setAudioEnabled] = useState<boolean>(!muteAudio);
+
+  useEffect(() => {
+    if (muteAudio) {
+      setAudioEnabled(false);
+    }
+  }, [muteAudio]);
 
   // 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.