Add audio output setting when available

src/room/InCallView.jsx

@@ -22,6 +22,7 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { useRageshakeRequestModal } from "../settings/rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { usePreventScroll } from "@react-aria/overlays";
+import { useMediaHandler } from "../settings/useMediaHandler";
 
 const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -51,6 +52,8 @@ export function InCallView({
   usePreventScroll();
   const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
 
+  const { audioOutput } = useMediaHandler();
+
   const items = useMemo(() => {
     const participants = [];
 
@@ -159,6 +162,7 @@ export function InCallView({
               item={item}
               getAvatar={renderAvatar}
               showName={items.length > 2 || item.focused}
+              audioOutputDevice={audioOutput}
               {...rest}
             />
           )}

src/room/LobbyView.jsx

@@ -14,6 +14,7 @@ import { useProfile } from "../profile/useProfile";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { useLocationNavigation } from "../useLocationNavigation";
+import { useMediaHandler } from "../settings/useMediaHandler";
 
 export function LobbyView({
   client,
@@ -31,7 +32,8 @@ export function LobbyView({
   roomId,
 }) {
   const { stream } = useCallFeed(localCallFeed);
-  const videoRef = useMediaStream(stream, true);
+  const { audioOutput } = useMediaHandler();
+  const videoRef = useMediaStream(stream, audioOutput, true);
   const { displayName, avatarUrl } = useProfile(client);
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
   const avatarSize = (previewBounds.height - 66) / 2;

src/room/OverflowMenu.jsx

@@ -75,7 +75,6 @@ export function OverflowMenu({
           {...settingsModalProps}
           setShowInspector={setShowInspector}
           showInspector={showInspector}
-          client={client}
         />
       )}
       {inviteModalState.isOpen && (

src/room/RoomPage.jsx

@@ -21,6 +21,7 @@ import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
 import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
+import { MediaHandlerProvider } from "../settings/useMediaHandler";
 
 export function RoomPage() {
   const { loading, isAuthenticated, error, client, isPasswordlessUser } =
@@ -47,16 +48,18 @@ export function RoomPage() {
   }
 
   return (
-    <GroupCallLoader client={client} roomId={roomId} viaServers={viaServers}>
-      {(groupCall) => (
-        <GroupCallView
-          client={client}
-          roomId={roomId}
-          groupCall={groupCall}
-          isPasswordlessUser={isPasswordlessUser}
-          simpleGrid={simpleGrid}
-        />
-      )}
-    </GroupCallLoader>
+    <MediaHandlerProvider client={client}>
+      <GroupCallLoader client={client} roomId={roomId} viaServers={viaServers}>
+        {(groupCall) => (
+          <GroupCallView
+            client={client}
+            roomId={roomId}
+            groupCall={groupCall}
+            isPasswordlessUser={isPasswordlessUser}
+            simpleGrid={simpleGrid}
+          />
+        )}
+      </GroupCallLoader>
+    </MediaHandlerProvider>
   );
 }