Fix avatar background when bgKey undefined

src/Avatar.jsx

@@ -34,7 +34,7 @@ export function Avatar({
 }) {
   const backgroundColor = useMemo(() => {
     const index = hashStringToArrIndex(
-      bgKey || fallback || src,
+      bgKey || fallback || src || "",
       backgroundColors.length
     );
     return backgroundColors[index];

src/Avatar.module.css

@@ -56,4 +56,5 @@
   width: 90px;
   height: 90px;
   border-radius: 90px;
+  font-size: 48px;
 }

src/ClientContext.jsx

@@ -182,12 +182,21 @@ export function ClientProvider({ children }) {
   }, [history]);
 
   useEffect(() => {
-    if ("BroadcastChannel" in window) {
+    if (client) {
       const loadTime = Date.now();
-      const broadcastChannel = new BroadcastChannel("matrix-video-chat");
 
-      function onMessage({ data }) {
-        if (data.load !== undefined && data.load > loadTime) {
+      const onToDeviceEvent = (event) => {
+        if (event.getType() !== "org.matrix.call_duplicate_session") {
+          return;
+        }
+
+        const content = event.getContent();
+
+        if (content.session_id === client.getSessionId()) {
+          return;
+        }
+
+        if (content.timestamp > loadTime) {
           if (client) {
             client.stopClient();
           }
@@ -199,13 +208,18 @@ export function ClientProvider({ children }) {
             ),
           }));
         }
-      }
+      };
 
-      broadcastChannel.addEventListener("message", onMessage);
-      broadcastChannel.postMessage({ load: loadTime });
+      client.on("toDeviceEvent", onToDeviceEvent);
+
+      client.sendToDevice("org.matrix.call_duplicate_session", {
+        [client.getUserId()]: {
+          "*": { session_id: client.getSessionId(), timestamp: loadTime },
+        },
+      });
 
       return () => {
-        broadcastChannel.removeEventListener("message", onMessage);
+        client.removeListener("toDeviceEvent", onToDeviceEvent);
       };
     }
   }, [client]);

src/UserMenuContainer.jsx

@@ -43,14 +43,7 @@ export function UserMenuContainer({ preventNavigation }) {
           displayName || (userName ? userName.replace("@", "") : undefined)
         }
       />
-      {modalState.isOpen && (
-        <ProfileModal
-          client={client}
-          isAuthenticated={isAuthenticated}
-          isPasswordlessUser={isPasswordlessUser}
-          {...modalProps}
-        />
-      )}
+      {modalState.isOpen && <ProfileModal client={client} {...modalProps} />}
     </>
   );
 }

src/icons/Edit.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.64856 7.35501C2.65473 7.31601 2.67231 7.27972 2.69908 7.25069L8.40377 1.06442C8.47865 0.983217 8.60518 0.978093 8.68638 1.05297L9.8626 2.13763C9.9438 2.21251 9.94893 2.33904 9.87405 2.42024L4.16936 8.60651C4.1426 8.63554 4.10783 8.656 4.06946 8.6653L2.66781 9.00511C2.52911 9.03873 2.40084 8.92044 2.42315 8.77948L2.64856 7.35501Z" fill="white"/>
+<path d="M1.75 9.44346C1.33579 9.44346 1 9.77925 1 10.1935C1 10.6077 1.33579 10.9435 1.75 10.9435L10.75 10.9435C11.1642 10.9435 11.5 10.6077 11.5 10.1935C11.5 9.77925 11.1642 9.44346 10.75 9.44346L1.75 9.44346Z" fill="white"/>
+</svg>

src/input/AvatarInputField.jsx

@@ -0,0 +1,78 @@
+import { useObjectRef } from "@react-aria/utils";
+import React, { useEffect } from "react";
+import { useCallback } from "react";
+import { useState } from "react";
+import { forwardRef } from "react";
+import { Avatar } from "../Avatar";
+import { Button } from "../button";
+import classNames from "classnames";
+import { ReactComponent as EditIcon } from "../icons/Edit.svg";
+import styles from "./AvatarInputField.module.css";
+
+export const AvatarInputField = forwardRef(
+  (
+    { id, label, className, avatarUrl, displayName, onRemoveAvatar, ...rest },
+    ref
+  ) => {
+    const [removed, setRemoved] = useState(false);
+    const [objUrl, setObjUrl] = useState(null);
+
+    const fileInputRef = useObjectRef(ref);
+
+    useEffect(() => {
+      const onChange = (e) => {
+        if (e.target.files.length > 0) {
+          setObjUrl(URL.createObjectURL(e.target.files[0]));
+          setRemoved(false);
+        } else {
+          setObjUrl(null);
+        }
+      };
+
+      fileInputRef.current.addEventListener("change", onChange);
+
+      return () => {
+        if (fileInputRef.current) {
+          fileInputRef.current.removeEventListener("change", onChange);
+        }
+      };
+    });
+
+    const onPressRemoveAvatar = useCallback(() => {
+      setRemoved(true);
+      onRemoveAvatar();
+    }, [onRemoveAvatar]);
+
+    return (
+      <div className={classNames(styles.avatarInputField, className)}>
+        <div className={styles.avatarContainer}>
+          <Avatar
+            size="xl"
+            src={removed ? null : objUrl || avatarUrl}
+            fallback={displayName.slice(0, 1).toUpperCase()}
+          />
+          <input
+            id={id}
+            accept="image/png, image/jpeg"
+            ref={fileInputRef}
+            type="file"
+            className={styles.fileInput}
+            role="button"
+            aria-label={label}
+            {...rest}
+          />
+          <label htmlFor={id} className={styles.fileInputButton}>
+            <EditIcon />
+          </label>
+        </div>
+        <Button
+          className={styles.removeButton}
+          variant="icon"
+          onPress={onPressRemoveAvatar}
+        >
+          Remove
+        </Button>
+      </div>
+    );
+  }
+);

src/input/AvatarInputField.module.css

@@ -0,0 +1,41 @@
+.avatarInputField {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.avatarContainer {
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.fileInput {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.fileInput:focus + .fileInputButton {
+  outline: auto;
+}
+
+.fileInputButton {
+  position: absolute;
+  bottom: 11px;
+  right: -4px;
+  background-color: var(--bgColor4);
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.removeButton {
+  color: #0dbd8b;
+}

src/input/Input.jsx

@@ -38,14 +38,25 @@ export const InputField = forwardRef(
         )}
       >
         {prefix && <span>{prefix}</span>}
-        <input
-          id={id}
-          {...rest}
-          ref={ref}
-          type={type}
-          checked={checked}
-          disabled={disabled}
-        />
+        {type === "textarea" ? (
+          <textarea
+            id={id}
+            {...rest}
+            ref={ref}
+            type={type}
+            disabled={disabled}
+          />
+        ) : (
+          <input
+            id={id}
+            {...rest}
+            ref={ref}
+            type={type}
+            checked={checked}
+            disabled={disabled}
+          />
+        )}
+
         <label htmlFor={id}>
           {type === "checkbox" && (
             <div className={styles.checkbox}>

src/input/Input.module.css

@@ -29,7 +29,8 @@
   border: 1px solid var(--inputBorderColor);
 }
 
-.inputField input {
+.inputField input,
+.inputField textarea {
   font-weight: 400;
   font-size: 15px;
   border: none;
@@ -42,6 +43,7 @@
 }
 
 .inputField.disabled input,
+.inputField.disabled textarea,
 .inputField.disabled span {
   color: var(--textColor2);
 }
@@ -54,12 +56,14 @@
   padding-right: 0;
 }
 
-.inputField input::placeholder {
+.inputField input::placeholder,
+.inputField textarea::placeholder {
   transition: color 0.25s ease-in 0s;
   color: transparent;
 }
 
-.inputField input:placeholder-shown:focus::placeholder {
+.inputField input:placeholder-shown:focus::placeholder,
+.inputField textarea:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
   color: var(--textColor2);
 }
@@ -86,13 +90,17 @@
   border-color: var(--inputBorderColorFocused);
 }
 
-.inputField input:focus {
+.inputField input:focus,
+.inputField textarea:focus {
   outline: 0;
 }
 
 .inputField input:focus + label,
 .inputField input:not(:placeholder-shown) + label,
-.inputField.prefix input + label {
+.inputField.prefix input + label,
+.inputField textarea:focus + label,
+.inputField textarea:not(:placeholder-shown) + label,
+.inputField.prefix textarea + label {
   background-color: var(--bgColor2);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
@@ -102,7 +110,8 @@
   pointer-events: auto;
 }
 
-.inputField input:focus + label {
+.inputField input:focus + label,
+.inputField textarea:focus + label {
   color: var(--inputBorderColorFocused);
 }
 

src/profile/ProfileModal.jsx

@@ -3,22 +3,25 @@ import { Button } from "../button";
 import { useProfile } from "./useProfile";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Modal, ModalContent } from "../Modal";
+import { AvatarInputField } from "../input/AvatarInputField";
+import styles from "./ProfileModal.module.css";
 
-export function ProfileModal({
-  client,
-  isAuthenticated,
-  isPasswordlessUser,
-  ...rest
-}) {
+export function ProfileModal({ client, ...rest }) {
   const { onClose } = rest;
   const {
     success,
     error,
     loading,
     displayName: initialDisplayName,
+    avatarUrl,
     saveProfile,
   } = useProfile(client);
   const [displayName, setDisplayName] = useState(initialDisplayName || "");
+  const [removeAvatar, setRemoveAvatar] = useState(false);
+
+  const onRemoveAvatar = useCallback(() => {
+    setRemoveAvatar(true);
+  }, []);
 
   const onChangeDisplayName = useCallback(
     (e) => {
@@ -37,9 +40,10 @@ export function ProfileModal({
       saveProfile({
         displayName,
         avatar: avatar && avatar.size > 0 ? avatar : undefined,
+        removeAvatar: removeAvatar && (!avatar || avatar.size === 0),
       });
     },
-    [saveProfile]
+    [saveProfile, removeAvatar]
   );
 
   useEffect(() => {
@@ -52,6 +56,16 @@ export function ProfileModal({
     <Modal title="Profile" isDismissable {...rest}>
       <ModalContent>
         <form onSubmit={onSubmit}>
+          <FieldRow className={styles.avatarFieldRow}>
+            <AvatarInputField
+              id="avatar"
+              name="avatar"
+              label="Avatar"
+              avatarUrl={avatarUrl}
+              displayName={displayName}
+              onRemoveAvatar={onRemoveAvatar}
+            />
+          </FieldRow>
           <FieldRow>
             <InputField
               id="userId"
@@ -75,16 +89,6 @@ export function ProfileModal({
               onChange={onChangeDisplayName}
             />
           </FieldRow>
-          {isAuthenticated && (
-            <FieldRow>
-              <InputField
-                type="file"
-                id="avatar"
-                name="avatar"
-                label="Avatar"
-              />
-            </FieldRow>
-          )}
           {error && (
             <FieldRow>
               <ErrorMessage>{error.message}</ErrorMessage>

src/profile/ProfileModal.module.css

@@ -0,0 +1,3 @@
+.avatarFieldRow {
+  justify-content: center;
+}

src/profile/useProfile.js

@@ -9,7 +9,7 @@ export function useProfile(client) {
       return {
         success: false,
         loading: false,
-        displayName: user?.displayName,
+        displayName: user?.rawDisplayName,
         avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
         error: null,
       };
@@ -44,7 +44,7 @@ export function useProfile(client) {
   }, [client]);
 
   const saveProfile = useCallback(
-    async ({ displayName, avatar }) => {
+    async ({ displayName, avatar, removeAvatar }) => {
       if (client) {
         setState((prev) => ({
           ...prev,
@@ -58,7 +58,9 @@ export function useProfile(client) {
 
           let mxcAvatarUrl;
 
-          if (avatar) {
+          if (removeAvatar) {
+            await client.setAvatarUrl("");
+          } else if (avatar) {
             mxcAvatarUrl = await client.uploadContent(avatar);
             await client.setAvatarUrl(mxcAvatarUrl);
           }
@@ -66,7 +68,9 @@ export function useProfile(client) {
           setState((prev) => ({
             ...prev,
             displayName,
-            avatarUrl: mxcAvatarUrl
+            avatarUrl: removeAvatar
+              ? null
+              : mxcAvatarUrl
               ? getAvatarUrl(client, mxcAvatarUrl)
               : prev.avatarUrl,
             loading: false,

src/room/FeedbackModal.jsx

@@ -22,6 +22,7 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
         description,
         sendLogs,
         rageshakeRequestId,
+        roomId,
       });
 
       if (inCall && sendLogs) {
@@ -47,7 +48,7 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
               id="description"
               name="description"
               label="Description (optional)"
-              type="text"
+              type="textarea"
             />
           </FieldRow>
           <FieldRow>

src/room/GroupCallLoader.jsx

@@ -6,7 +6,7 @@ import { isLocalRoomId } from "../matrix-utils";
 import { RoomNotFoundView } from "./RoomNotFoundView";
 
 export function GroupCallLoader({ client, roomId, viaServers, children }) {
-  const { loading, error, groupCall } = useLoadGroupCall(
+  const { loading, error, groupCall, reload } = useLoadGroupCall(
     client,
     roomId,
     viaServers
@@ -29,7 +29,9 @@ export function GroupCallLoader({ client, roomId, viaServers, children }) {
         error.message.indexOf("Failed to fetch alias") !== -1)) &&
     isLocalRoomId(roomId)
   ) {
-    return <RoomNotFoundView client={client} roomId={roomId} />;
+    return (
+      <RoomNotFoundView client={client} roomId={roomId} onReload={reload} />
+    );
   }
 
   if (error) {

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 = [];
 
@@ -62,6 +65,7 @@ export function InCallView({
           screenshareFeeds.length === 0 && layout === "spotlight"
             ? callFeed.userId === activeSpeaker
             : false,
+        isLocal: callFeed.isLocal(),
       });
     }
 
@@ -78,6 +82,7 @@ export function InCallView({
         id: callFeed.stream.id,
         callFeed,
         focused: true,
+        isLocal: callFeed.isLocal(),
       });
     }
 
@@ -159,6 +164,8 @@ export function InCallView({
               item={item}
               getAvatar={renderAvatar}
               showName={items.length > 2 || item.focused}
+              audioOutputDevice={audioOutput}
+              disableSpeakingIndicator={items.length < 3}
               {...rest}
             />
           )}
@@ -189,7 +196,10 @@ export function InCallView({
         show={showInspector}
       />
       {rageshakeRequestModalState.isOpen && (
-        <RageshakeRequestModal {...rageshakeRequestModalProps} />
+        <RageshakeRequestModal
+          {...rageshakeRequestModalProps}
+          roomId={roomId}
+        />
       )}
     </div>
   );

src/room/LobbyView.jsx

@@ -10,11 +10,11 @@ import { OverflowMenu } from "./OverflowMenu";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { Body, Link } from "../typography/Typography";
 import { Avatar } from "../Avatar";
-import { getAvatarUrl } from "../matrix-utils";
 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,
@@ -32,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;
@@ -86,7 +87,7 @@ export function LobbyView({
                         borderRadius: avatarSize,
                         fontSize: Math.round(avatarSize / 2),
                       }}
-                      src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
+                      src={avatarUrl}
                       fallback={displayName.slice(0, 1).toUpperCase()}
                     />
                   </div>

src/room/OverflowMenu.jsx

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

src/room/RageshakeRequestModal.jsx

@@ -5,7 +5,7 @@ import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/rageshake";
 import { Body } from "../typography/Typography";
 
-export function RageshakeRequestModal({ rageshakeRequestId, ...rest }) {
+export function RageshakeRequestModal({ rageshakeRequestId, roomId, ...rest }) {
   const { submitRageshake, sending, sent, error } = useSubmitRageshake();
 
   useEffect(() => {
@@ -27,6 +27,7 @@ export function RageshakeRequestModal({ rageshakeRequestId, ...rest }) {
               submitRageshake({
                 sendLogs: true,
                 rageshakeRequestId,
+                roomId,
               })
             }
             disabled={sending}

src/room/RoomNotFoundView.jsx

@@ -8,7 +8,7 @@ import { Form } from "../form/Form";
 import { useHistory } from "react-router-dom";
 import styles from "./RoomNotFoundView.module.css";
 
-export function RoomNotFoundView({ client, roomId }) {
+export function RoomNotFoundView({ client, roomId, onReload }) {
   const history = useHistory();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
@@ -21,11 +21,9 @@ export function RoomNotFoundView({ client, roomId }) {
         setError(undefined);
         setLoading(true);
 
-        const roomIdOrAlias = await createRoom(client, roomName);
+        await createRoom(client, roomName);
 
-        if (roomIdOrAlias) {
-          history.push(`/room/${roomIdOrAlias}`);
-        }
+        onReload();
       }
 
       submit().catch((error) => {

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>
   );
 }

src/room/useLoadGroupCall.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 async function fetchGroupCall(
   client,
@@ -41,14 +41,23 @@ export function useLoadGroupCall(client, roomId, viaServers) {
     loading: true,
     error: undefined,
     groupCall: undefined,
+    reloadId: 0,
   });
 
   useEffect(() => {
     setState({ loading: true });
     fetchGroupCall(client, roomId, viaServers, 30000)
-      .then((groupCall) => setState({ loading: false, groupCall }))
-      .catch((error) => setState({ loading: false, error }));
-  }, [client, roomId]);
+      .then((groupCall) =>
+        setState((prevState) => ({ ...prevState, loading: false, groupCall }))
+      )
+      .catch((error) =>
+        setState((prevState) => ({ ...prevState, loading: false, error }))
+      );
+  }, [client, roomId, state.reloadId]);
 
-  return state;
+  const reload = useCallback(() => {
+    setState((prevState) => ({ ...prevState, reloadId: prevState.reloadId++ }));
+  }, []);
+
+  return { ...state, reload };
 }

src/settings/SettingsModal.jsx

@@ -13,12 +13,7 @@ import { Button } from "../button";
 import { useDownloadDebugLog } from "./rageshake";
 import { Body } from "../typography/Typography";
 
-export function SettingsModal({
-  client,
-  setShowInspector,
-  showInspector,
-  ...rest
-}) {
+export function SettingsModal({ setShowInspector, showInspector, ...rest }) {
   const {
     audioInput,
     audioInputs,
@@ -26,7 +21,10 @@ export function SettingsModal({
     videoInput,
     videoInputs,
     setVideoInput,
-  } = useMediaHandler(client);
+    audioOutput,
+    audioOutputs,
+    setAudioOutput,
+  } = useMediaHandler();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -56,6 +54,17 @@ export function SettingsModal({
               <Item key={deviceId}>{label}</Item>
             ))}
           </SelectInput>
+          {audioOutputs.length > 0 && (
+            <SelectInput
+              label="Speaker"
+              selectedKey={audioOutput}
+              onSelectionChange={setAudioOutput}
+            >
+              {audioOutputs.map(({ deviceId, label }) => (
+                <Item key={deviceId}>{label}</Item>
+              ))}
+            </SelectInput>
+          )}
         </TabItem>
         <TabItem
           title={

src/settings/rageshake.js

@@ -47,9 +47,16 @@ export function useSubmitRageshake() {
         body.append("touch_input", touchInput);
 
         if (client) {
+          const userId = client.getUserId();
+          const user = client.getUser(userId);
+          body.append("display_name", user?.displayName);
           body.append("user_id", client.credentials.userId);
           body.append("device_id", client.deviceId);
 
+          if (opts.roomId) {
+            body.append("room_id", opts.roomId);
+          }
+
           if (client.isCryptoEnabled()) {
             const keys = [`ed25519:${client.getDeviceEd25519Key()}`];
             if (client.getDeviceCurve25519Key) {

src/settings/useMediaHandler.js

@@ -1,72 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-export function useMediaHandler(client) {
-  const [{ audioInput, videoInput, audioInputs, videoInputs }, setState] =
-    useState(() => {
-      const mediaHandler = client.getMediaHandler();
-
-      return {
-        audioInput: mediaHandler.audioInput,
-        videoInput: mediaHandler.videoInput,
-        audioInputs: [],
-        videoInputs: [],
-      };
-    });
-
-  useEffect(() => {
-    const mediaHandler = client.getMediaHandler();
-
-    function updateDevices() {
-      navigator.mediaDevices.enumerateDevices().then((devices) => {
-        const audioInputs = devices.filter(
-          (device) => device.kind === "audioinput"
-        );
-        const videoInputs = devices.filter(
-          (device) => device.kind === "videoinput"
-        );
-
-        setState(() => ({
-          audioInput: mediaHandler.audioInput,
-          videoInput: mediaHandler.videoInput,
-          audioInputs,
-          videoInputs,
-        }));
-      });
-    }
-
-    updateDevices();
-
-    mediaHandler.on("local_streams_changed", updateDevices);
-    navigator.mediaDevices.addEventListener("devicechange", updateDevices);
-
-    return () => {
-      mediaHandler.removeListener("local_streams_changed", updateDevices);
-      navigator.mediaDevices.removeEventListener("devicechange", updateDevices);
-    };
-  }, []);
-
-  const setAudioInput = useCallback(
-    (deviceId) => {
-      setState((prevState) => ({ ...prevState, audioInput: deviceId }));
-      client.getMediaHandler().setAudioInput(deviceId);
-    },
-    [client]
-  );
-
-  const setVideoInput = useCallback(
-    (deviceId) => {
-      setState((prevState) => ({ ...prevState, videoInput: deviceId }));
-      client.getMediaHandler().setVideoInput(deviceId);
-    },
-    [client]
-  );
-
-  return {
-    audioInput,
-    audioInputs,
-    setAudioInput,
-    videoInput,
-    videoInputs,
-    setVideoInput,
-  };
-}

src/settings/useMediaHandler.jsx

@@ -0,0 +1,203 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useContext,
+  createContext,
+} from "react";
+
+const MediaHandlerContext = createContext();
+
+function getMediaPreferences() {
+  const mediaPreferences = localStorage.getItem("matrix-media-preferences");
+
+  if (mediaPreferences) {
+    try {
+      return JSON.parse(mediaPreferences);
+    } catch (e) {
+      return undefined;
+    }
+  } else {
+    return undefined;
+  }
+}
+
+function updateMediaPreferences(newPreferences) {
+  const oldPreferences = getMediaPreferences(newPreferences);
+
+  localStorage.setItem(
+    "matrix-media-preferences",
+    JSON.stringify({
+      ...oldPreferences,
+      ...newPreferences,
+    })
+  );
+}
+
+export function MediaHandlerProvider({ client, children }) {
+  const [
+    {
+      audioInput,
+      videoInput,
+      audioInputs,
+      videoInputs,
+      audioOutput,
+      audioOutputs,
+    },
+    setState,
+  ] = useState(() => {
+    const mediaPreferences = getMediaPreferences();
+    const mediaHandler = client.getMediaHandler();
+
+    mediaHandler.restoreMediaSettings(
+      mediaPreferences?.audioInput,
+      mediaPreferences?.videoInput
+    );
+
+    return {
+      audioInput: mediaHandler.audioInput,
+      videoInput: mediaHandler.videoInput,
+      audioOutput: undefined,
+      audioInputs: [],
+      videoInputs: [],
+      audioOutputs: [],
+    };
+  });
+
+  useEffect(() => {
+    const mediaHandler = client.getMediaHandler();
+
+    function updateDevices() {
+      navigator.mediaDevices.enumerateDevices().then((devices) => {
+        const mediaPreferences = getMediaPreferences();
+
+        const audioInputs = devices.filter(
+          (device) => device.kind === "audioinput"
+        );
+        const audioConnected = audioInputs.some(
+          (device) => device.deviceId === mediaHandler.audioInput
+        );
+
+        let audioInput = mediaHandler.audioInput;
+
+        if (!audioConnected && audioInputs.length > 0) {
+          audioInput = audioInputs[0].deviceId;
+        }
+
+        const videoInputs = devices.filter(
+          (device) => device.kind === "videoinput"
+        );
+        const videoConnected = videoInputs.some(
+          (device) => device.deviceId === mediaHandler.videoInput
+        );
+
+        let videoInput = mediaHandler.videoInput;
+
+        if (!videoConnected && videoInputs.length > 0) {
+          videoInput = videoInputs[0].deviceId;
+        }
+
+        const audioOutputs = devices.filter(
+          (device) => device.kind === "audiooutput"
+        );
+        let audioOutput = undefined;
+
+        if (
+          mediaPreferences &&
+          audioOutputs.some(
+            (device) => device.deviceId === mediaPreferences.audioOutput
+          )
+        ) {
+          audioOutput = mediaPreferences.audioOutput;
+        }
+
+        if (
+          mediaHandler.videoInput !== videoInput ||
+          mediaHandler.audioInput !== audioInput
+        ) {
+          mediaHandler.setMediaInputs(audioInput, videoInput);
+        }
+
+        updateMediaPreferences({ audioInput, videoInput, audioOutput });
+
+        setState({
+          audioInput,
+          videoInput,
+          audioOutput,
+          audioInputs,
+          videoInputs,
+          audioOutputs,
+        });
+      });
+    }
+    updateDevices();
+
+    mediaHandler.on("local_streams_changed", updateDevices);
+    navigator.mediaDevices.addEventListener("devicechange", updateDevices);
+
+    return () => {
+      mediaHandler.removeListener("local_streams_changed", updateDevices);
+      navigator.mediaDevices.removeEventListener("devicechange", updateDevices);
+      mediaHandler.stopAllStreams();
+    };
+  }, [client]);
+
+  const setAudioInput = useCallback(
+    (deviceId) => {
+      updateMediaPreferences({ audioInput: deviceId });
+      setState((prevState) => ({ ...prevState, audioInput: deviceId }));
+      client.getMediaHandler().setAudioInput(deviceId);
+    },
+    [client]
+  );
+
+  const setVideoInput = useCallback(
+    (deviceId) => {
+      updateMediaPreferences({ videoInput: deviceId });
+      setState((prevState) => ({ ...prevState, videoInput: deviceId }));
+      client.getMediaHandler().setVideoInput(deviceId);
+    },
+    [client]
+  );
+
+  const setAudioOutput = useCallback((deviceId) => {
+    updateMediaPreferences({ audioOutput: deviceId });
+    setState((prevState) => ({ ...prevState, audioOutput: deviceId }));
+  }, []);
+
+  const context = useMemo(
+    () => ({
+      audioInput,
+      audioInputs,
+      setAudioInput,
+      videoInput,
+      videoInputs,
+      setVideoInput,
+      audioOutput,
+      audioOutputs,
+      setAudioOutput,
+    }),
+    [
+      audioInput,
+      audioInputs,
+      setAudioInput,
+      videoInput,
+      videoInputs,
+      setVideoInput,
+      audioOutput,
+      audioOutputs,
+      setAudioOutput,
+    ]
+  );
+
+  return (
+    <MediaHandlerContext.Provider value={context}>
+      {children}
+    </MediaHandlerContext.Provider>
+  );
+}
+
+export function useMediaHandler() {
+  return useContext(MediaHandlerContext);
+}

src/video-grid/VideoGrid.stories.jsx

@@ -64,6 +64,7 @@ export const ParticipantsTest = () => {
               key={item.id}
               name={`User ${item.id}`}
               showName={items.length > 2 || item.focused}
+              disableSpeakingIndicator={items.length < 3}
               {...rest}
             />
           )}