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/input/Input.jsx

@@ -38,14 +38,25 @@ export const InputField = forwardRef(
         )}
       >
         {prefix && <span>{prefix}</span>}
-        <input
+        {type === "textarea" ? (
-          id={id}
+          <textarea
-          {...rest}
+            id={id}
-          ref={ref}
+            {...rest}
-          type={type}
+            ref={ref}
-          checked={checked}
+            type={type}
-          disabled={disabled}
+            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/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,
       };

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

@@ -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

@@ -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) {
+        onReload();
-          history.push(`/room/${roomIdOrAlias}`);
-        }
       }
 
       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}>
+    <MediaHandlerProvider client={client}>
-      {(groupCall) => (
+      <GroupCallLoader client={client} roomId={roomId} viaServers={viaServers}>
-        <GroupCallView
+        {(groupCall) => (
-          client={client}
+          <GroupCallView
-          roomId={roomId}
+            client={client}
-          groupCall={groupCall}
+            roomId={roomId}
-          isPasswordlessUser={isPasswordlessUser}
+            groupCall={groupCall}
-          simpleGrid={simpleGrid}
+            isPasswordlessUser={isPasswordlessUser}
-        />
+            simpleGrid={simpleGrid}
-      )}
+          />
-    </GroupCallLoader>
+        )}
+      </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 }))
+      .then((groupCall) =>
-      .catch((error) => setState({ loading: false, error }));
+        setState((prevState) => ({ ...prevState, loading: false, groupCall }))
-  }, [client, roomId]);
+      )
+      .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({
+export function SettingsModal({ setShowInspector, showInspector, ...rest }) {
-  client,
-  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}
             />
           )}