Use raw display names for members

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

@@ -163,6 +163,7 @@ export function InCallView({
               getAvatar={renderAvatar}
               showName={items.length > 2 || item.focused}
               audioOutputDevice={audioOutput}
+              disableSpeakingIndicator={items.length < 3}
               {...rest}
             />
           )}
@@ -193,7 +194,10 @@ export function InCallView({
         show={showInspector}
       />
       {rageshakeRequestModalState.isOpen && (
-        <RageshakeRequestModal {...rageshakeRequestModalProps} />
+        <RageshakeRequestModal
+          {...rageshakeRequestModalProps}
+          roomId={roomId}
+        />
       )}
     </div>
   );

src/room/OverflowMenu.jsx

@@ -17,7 +17,6 @@ export function OverflowMenu({
   roomId,
   setShowInspector,
   showInspector,
-  client,
   inCall,
   groupCall,
 }) {

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

@@ -9,6 +9,32 @@ import 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 [
     {
@@ -21,8 +47,14 @@ export function MediaHandlerProvider({ client, children }) {
     },
     setState,
   ] = useState(() => {
+    const mediaPreferences = getMediaPreferences();
     const mediaHandler = client.getMediaHandler();
 
+    mediaHandler.restoreMediaSettings(
+      mediaPreferences?.audioInput,
+      mediaPreferences?.videoInput
+    );
+
     return {
       audioInput: mediaHandler.audioInput,
       videoInput: mediaHandler.videoInput,
@@ -38,42 +70,67 @@ export function MediaHandlerProvider({ client, children }) {
 
     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;
 
-        const audioOutputPreference = localStorage.getItem(
-          "matrix-audio-output"
-        );
-
         if (
-          audioOutputPreference &&
+          mediaPreferences &&
           audioOutputs.some(
-            (device) => device.deviceId === audioOutputPreference
+            (device) => device.deviceId === mediaPreferences.audioOutput
           )
         ) {
-          audioOutput = audioOutputPreference;
+          audioOutput = mediaPreferences.audioOutput;
         }
 
+        if (
+          mediaHandler.videoInput !== videoInput ||
+          mediaHandler.audioInput !== audioInput
+        ) {
+          mediaHandler.setMediaInputs(audioInput, videoInput);
+        }
+
+        updateMediaPreferences({ audioInput, videoInput, audioOutput });
+
         setState({
-          audioInput: mediaHandler.audioInput,
+          audioInput,
-          videoInput: mediaHandler.videoInput,
+          videoInput,
           audioOutput,
           audioInputs,
-          audioOutputs,
           videoInputs,
+          audioOutputs,
         });
       });
     }
-
     updateDevices();
 
     mediaHandler.on("local_streams_changed", updateDevices);
@@ -82,11 +139,13 @@ export function MediaHandlerProvider({ client, children }) {
     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);
     },
@@ -95,6 +154,7 @@ export function MediaHandlerProvider({ client, children }) {
 
   const setVideoInput = useCallback(
     (deviceId) => {
+      updateMediaPreferences({ videoInput: deviceId });
       setState((prevState) => ({ ...prevState, videoInput: deviceId }));
       client.getMediaHandler().setVideoInput(deviceId);
     },
@@ -102,7 +162,7 @@ export function MediaHandlerProvider({ client, children }) {
   );
 
   const setAudioOutput = useCallback((deviceId) => {
-    localStorage.setItem("matrix-audio-output", deviceId);
+    updateMediaPreferences({ audioOutput: deviceId });
     setState((prevState) => ({ ...prevState, audioOutput: deviceId }));
   }, []);
 

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