Start using LiveKit SDK for media devices

This version is not supposed to properly work, this is a work in
progress.

Main changes:
* Completely removed the PTT logic (for simplicity, it could be
  introduced later).
* Abstracted away the work with the media devices.
* Defined confined interfaces of the affected components so that they
  only get the data that they need without importing Matris JS SDK or
  LiveKit SDK, so that we can exchange their "backend" at any time.
* Started using JS/TS SDK from LiveKit as well as their React SDK to
  define the state of the local media devices and local streams.

src/room/InCallView.tsx

@@ -50,7 +50,6 @@ import { Avatar } from "../Avatar";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { useMediaHandler } from "../settings/useMediaHandler";
 import { useShowInspector, useSpatialAudio } from "../settings/useSetting";
 import { useModalTriggerState } from "../Modal";
 import { useAudioContext } from "../video-grid/useMediaStream";
@@ -64,6 +63,7 @@ import { ParticipantInfo } from "./useGroupCall";
 import { TileDescriptor } from "../video-grid/TileDescriptor";
 import { AudioSink } from "../video-grid/AudioSink";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
+import { MediaDevicesState } from "./devices/useMediaDevices";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -77,6 +77,7 @@ interface Props {
   participants: Map<RoomMember, Map<string, ParticipantInfo>>;
   roomName: string;
   avatarUrl: string;
+  mediaDevices: MediaDevicesState;
   microphoneMuted: boolean;
   localVideoMuted: boolean;
   toggleLocalVideoMuted: () => void;
@@ -99,6 +100,7 @@ export function InCallView({
   participants,
   roomName,
   avatarUrl,
+  mediaDevices,
   microphoneMuted,
   localVideoMuted,
   toggleLocalVideoMuted,
@@ -349,7 +351,6 @@ export function InCallView({
   // audio rendering for feeds that we're displaying, which will need to be fixed
   // once we start having more participants than we can fit on a screen, but this
   // is a workaround for now.
-  const { audioOutput } = useMediaHandler();
   const audioElements: JSX.Element[] = [];
   if (!spatialAudio || maximisedParticipant) {
     for (const item of items) {
@@ -357,7 +358,7 @@ export function InCallView({
       audioElements.push(
         <AudioSink
           tileDescriptor={item}
-          audioOutput={audioOutput}
+          audioOutput="AUDIO OUTPUT?"
           key={item.id}
         />
       );
@@ -389,9 +390,9 @@ export function InCallView({
         )}
         {!maximisedParticipant && (
           <OverflowMenu
+            roomId={roomIdOrAlias}
+            mediaDevices={mediaDevices}
             inCall
-            roomIdOrAlias={roomIdOrAlias}
-            groupCall={groupCall}
             showInvite={joinRule === JoinRule.Public}
             feedbackModalState={feedbackModalState}
             feedbackModalProps={feedbackModalProps}