Merge remote-tracking branch 'origin/livekit' into dbkr/react_to_livekit_disconnect

src/room/GroupCallView.tsx

@@ -293,6 +293,7 @@ export function GroupCallView({
           setUserChoices(choices);
           enter();
         }}
+        muteAudio={participants.size > 8}
         isEmbedded={isEmbedded}
         hideHeader={hideHeader}
       />

src/room/InCallView.tsx

@@ -85,6 +85,7 @@ import { useLayoutStates } from "../video-grid/Layout";
 import { useSFUConfig } from "../livekit/OpenIDLoader";
 import { E2EELock } from "../E2EELock";
 import { useEventEmitterThree } from "../useEvents";
+import { useWakeLock } from "../useWakeLock";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -134,6 +135,7 @@ export function InCallView({
 }: InCallViewProps) {
   const { t } = useTranslation();
   usePreventScroll();
+  useWakeLock();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });

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>

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.

src/room/useGroupCall.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { useCallback, useEffect, useReducer, useState } from "react";
+import * as Sentry from "@sentry/react";
 import {
   GroupCallEvent,
   GroupCallState,
@@ -331,6 +332,7 @@ export function useGroupCall(
     }
 
     function onError(e: GroupCallError): void {
+      Sentry.captureException(e);
       if (e.code === GroupCallErrorCode.UnknownDevice) {
         const unknownDeviceError = e as GroupCallUnknownDeviceError;
         addUnencryptedEventUser(unknownDeviceError.userId);