Merge branch 'main' of github.com:vector-im/matrix-video-chat

src/ConferenceCallManagerHooks.jsx

@@ -612,17 +612,35 @@ export function getRoomUrl(roomId) {
   }
 }
 
-export function useDisplayName(client) {
+function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
-  const [{ loading, displayName, error, success }, setState] = useState(() => ({
+  const width = Math.floor(avatarSize * window.devicePixelRatio);
-    success: false,
+  const height = Math.floor(avatarSize * window.devicePixelRatio);
-    loading: false,
+  return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
-    displayName: client?.getUser(client.getUserId())?.displayName,
+}
-    error: null,
+
-  }));
+export function useProfile(client) {
+  const [{ loading, displayName, avatarUrl, error, success }, setState] =
+    useState(() => {
+      const user = client?.getUser(client.getUserId());
+
+      return {
+        success: false,
+        loading: false,
+        displayName: user?.displayName,
+        avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
+        error: null,
+      };
+    });
 
   useEffect(() => {
-    const onChangeDisplayName = (_event, { displayName }) => {
+    const onChangeUser = (_event, { displayName, avatarUrl }) => {
-      setState({ success: false, loading: false, displayName, error: null });
+      setState({
+        success: false,
+        loading: false,
+        displayName,
+        avatarUrl: getAvatarUrl(client, avatarUrl),
+        error: null,
+      });
     };
 
     let user;
@@ -630,18 +648,20 @@ export function useDisplayName(client) {
     if (client) {
       const userId = client.getUserId();
       user = client.getUser(userId);
-      user.on("User.displayName", onChangeDisplayName);
+      user.on("User.displayName", onChangeUser);
+      user.on("User.avatarUrl", onChangeUser);
     }
 
     return () => {
       if (user) {
-        user.removeListener("User.displayName", onChangeDisplayName);
+        user.removeListener("User.displayName", onChangeUser);
+        user.removeListener("User.avatarUrl", onChangeUser);
       }
     };
   }, [client]);
 
-  const setDisplayName = useCallback(
+  const saveProfile = useCallback(
-    (displayName) => {
+    async ({ displayName, avatar }) => {
       if (client) {
         setState((prev) => ({
           ...prev,
@@ -650,30 +670,33 @@ export function useDisplayName(client) {
           success: false,
         }));
 
-        client
+        try {
-          .setDisplayName(displayName)
+          await client.setDisplayName(displayName);
-          .then(() => {
+
-            setState((prev) => ({
+          const url = await client.uploadContent(avatar);
-              ...prev,
+          await client.setAvatarUrl(url);
-              displayName,
+
-              loading: false,
+          setState((prev) => ({
-              success: true,
+            ...prev,
-            }));
+            displayName,
-          })
+            avatarUrl: getAvatarUrl(client, url),
-          .catch((error) => {
+            loading: false,
-            setState((prev) => ({
+            success: true,
-              ...prev,
+          }));
-              loading: false,
+        } catch (error) {
-              error,
+          setState((prev) => ({
-              success: false,
+            ...prev,
-            }));
+            loading: false,
-          });
+            error,
+            success: false,
+          }));
+        }
       } else {
-        console.error("Client not initialized before calling setDisplayName");
+        console.error("Client not initialized before calling saveProfile");
       }
     },
     [client]
   );
 
-  return { loading, error, displayName, setDisplayName, success };
+  return { loading, error, displayName, avatarUrl, saveProfile, success };
 }

src/Input.jsx

@@ -22,14 +22,16 @@ export function Field({ children, className, ...rest }) {
 }
 
 export const InputField = forwardRef(
-  ({ id, label, className, type, checked, ...rest }, ref) => {
+  ({ id, label, className, type, checked, prefix, suffix, ...rest }, ref) => {
     return (
       <Field
         className={classNames(
           type === "checkbox" ? styles.checkboxField : styles.inputField,
+          { [styles.prefix]: !!prefix },
           className
         )}
       >
+        {prefix && <span>{prefix}</span>}
         <input id={id} {...rest} ref={ref} type={type} checked={checked} />
         <label htmlFor={id}>
           {type === "checkbox" && (
@@ -39,6 +41,7 @@ export const InputField = forwardRef(
           )}
           {label}
         </label>
+        {suffix && <span>{suffix}</span>}
       </Field>
     );
   }

src/Input.module.css

@@ -40,6 +40,10 @@
   min-width: 0;
 }
 
+.inputField span {
+  padding: 11px 9px;
+}
+
 .inputField input::placeholder {
   transition: color 0.25s ease-in 0s;
   color: transparent;
@@ -77,7 +81,8 @@
 }
 
 .inputField input:focus + label,
-.inputField input:not(:placeholder-shown) + label {
+.inputField input:not(:placeholder-shown) + label,
+.inputField.prefix input + 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;

src/LoginPage.jsx

@@ -67,17 +67,6 @@ export function LoginPage() {
             <h2>Log In</h2>
             <h4>To continue to Element</h4>
             <form onSubmit={onSubmitLoginForm}>
-              <FieldRow>
-                <InputField
-                  type="text"
-                  value={homeserver}
-                  onChange={(e) => setHomeServer(e.target.value)}
-                  placeholder="Homeserver"
-                  label="Homeserver"
-                  autoCorrect="off"
-                  autoCapitalize="none"
-                />
-              </FieldRow>
               <FieldRow>
                 <InputField
                   type="text"
@@ -86,6 +75,8 @@ export function LoginPage() {
                   label="Username"
                   autoCorrect="off"
                   autoCapitalize="none"
+                  prefix="@"
+                  suffix={`:${window.location.host}`}
                 />
               </FieldRow>
               <FieldRow>

src/Menu.module.css

@@ -30,10 +30,12 @@
 
 .menuItem.focused:first-child,
 .menuItem:hover:first-child {
-  border-radius: 8px 8px 0 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 
 .menuItem.focused:last-child,
 .menuItem:hover:last-child {
-  border-radius: 0 0 8px 8px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
 }

src/ProfileModal.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Button } from "./button";
-import { useDisplayName } from "./ConferenceCallManagerHooks";
+import { useProfile } from "./ConferenceCallManagerHooks";
 import { FieldRow, InputField, ErrorMessage } from "./Input";
 import { Modal, ModalContent } from "./Modal";
 
@@ -11,8 +11,8 @@ export function ProfileModal({ client, ...rest }) {
     error,
     loading,
     displayName: initialDisplayName,
-    setDisplayName: submitDisplayName,
+    saveProfile,
-  } = useDisplayName(client);
+  } = useProfile(client);
   const [displayName, setDisplayName] = useState(initialDisplayName || "");
 
   const onChangeDisplayName = useCallback(
@@ -27,10 +27,14 @@ export function ProfileModal({ client, ...rest }) {
       e.preventDefault();
       const data = new FormData(e.target);
       const displayName = data.get("displayName");
-      console.log(displayName);
+      const avatar = data.get("avatar");
-      submitDisplayName(displayName);
+
+      saveProfile({
+        displayName,
+        avatar,
+      });
     },
-    [setDisplayName]
+    [saveProfile]
   );
 
   useEffect(() => {
@@ -56,6 +60,9 @@ export function ProfileModal({ client, ...rest }) {
               onChange={onChangeDisplayName}
             />
           </FieldRow>
+          <FieldRow>
+            <InputField type="file" id="avatar" name="avatar" label="Avatar" />
+          </FieldRow>
           {error && (
             <FieldRow>
               <ErrorMessage>{error.message}</ErrorMessage>

src/RegisterPage.jsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import { FieldRow, InputField, ErrorMessage } from "./Input";
 import { Button } from "./button";
@@ -23,14 +23,15 @@ import styles from "./LoginPage.module.css";
 import { ReactComponent as Logo } from "./icons/LogoLarge.svg";
 
 export function RegisterPage() {
-  // TODO: Handle hitting login page with authenticated client
   const { register } = useClient();
   const registerUsernameRef = useRef();
-  const registerPasswordRef = useRef();
+  const confirmPasswordRef = useRef();
   const history = useHistory();
   const location = useLocation();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
+  const [password, setPassword] = useState("");
+  const [passwordConfirmation, setPasswordConfirmation] = useState("");
 
   const onSubmitRegisterForm = useCallback(
     (e) => {
@@ -55,6 +56,14 @@ export function RegisterPage() {
     [register, location, history]
   );
 
+  useEffect(() => {
+    if (password && passwordConfirmation && password !== passwordConfirmation) {
+      confirmPasswordRef.current.setCustomValidity("Passwords must match");
+    } else {
+      confirmPasswordRef.current.setCustomValidity("");
+    }
+  }, [password, passwordConfirmation]);
+
   return (
     <>
       <div className={styles.container}>
@@ -71,16 +80,31 @@ export function RegisterPage() {
                   label="Username"
                   autoCorrect="off"
                   autoCapitalize="none"
+                  prefix="@"
+                  suffix={`:${window.location.host}`}
                 />
               </FieldRow>
               <FieldRow>
                 <InputField
+                  required
                   type="password"
-                  ref={registerPasswordRef}
+                  onChange={(e) => setPassword(e.target.value)}
+                  value={password}
                   placeholder="Password"
                   label="Password"
                 />
               </FieldRow>
+              <FieldRow>
+                <InputField
+                  required
+                  type="password"
+                  onChange={(e) => setPasswordConfirmation(e.target.value)}
+                  value={passwordConfirmation}
+                  placeholder="Confirm Password"
+                  label="Confirm Password"
+                  ref={confirmPasswordRef}
+                />
+              </FieldRow>
               {error && (
                 <FieldRow>
                   <ErrorMessage>{error.message}</ErrorMessage>

src/Room.jsx

@@ -301,8 +301,8 @@ function RoomSetupView({
       </Header>
       <div className={styles.joinRoom}>
         <div className={styles.joinRoomContent}>
-          <h1>{roomName}</h1>
           <div className={styles.preview}>
+            <video ref={videoRef} muted playsInline disablePictureInPicture />
             {state === GroupCallState.LocalCallFeedUninitialized && (
               <p className={styles.webcamPermissions}>
                 Webcam/microphone permissions needed to join the call.
@@ -313,7 +313,6 @@ function RoomSetupView({
                 Accept webcam/microphone permissions to join the call.
               </p>
             )}
-            <video ref={videoRef} muted playsInline disablePictureInPicture />
             {state === GroupCallState.LocalCallFeedInitialized && (
               <>
                 <Button
@@ -442,7 +441,7 @@ function InRoomView({
         </LeftNav>
         <RightNav>
           <GridLayoutMenu layout={layout} setLayout={setLayout} />
-          <UserMenu />
+          <UserMenu disableLogout />
         </RightNav>
       </Header>
       {items.length === 0 ? (

src/Room.module.css

@@ -63,8 +63,8 @@ limitations under the License.
 
 .preview {
   position: relative;
-  max-width: 816px;
+  min-height: 280px;
-  max-height: 75vh;
+  height: 50vh;
   border-radius: 24px;
   overflow: hidden;
   background-color: var(--bgColor3);

src/UserMenu.jsx

@@ -8,16 +8,24 @@ import styles from "./UserMenu.module.css";
 import { Item } from "@react-stately/collections";
 import { Menu } from "./Menu";
 import { useHistory, useLocation } from "react-router-dom";
-import { useClient, useDisplayName } from "./ConferenceCallManagerHooks";
+import { useClient, useProfile } from "./ConferenceCallManagerHooks";
 import { useModalTriggerState } from "./Modal";
 import { ProfileModal } from "./ProfileModal";
 import { Tooltip, TooltipTrigger } from "./Tooltip";
+import { Avatar } from "./Avatar";
 
-export function UserMenu() {
+export function UserMenu({ disableLogout }) {
   const location = useLocation();
   const history = useHistory();
-  const { isAuthenticated, isGuest, logout, userName, client } = useClient();
+  const {
-  const { displayName } = useDisplayName(client);
+    isAuthenticated,
+    isGuest,
+    isPasswordlessUser,
+    logout,
+    userName,
+    client,
+  } = useClient();
+  const { displayName, avatarUrl } = useProfile(client);
   const { modalState, modalProps } = useModalTriggerState();
 
   const onAction = useCallback(
@@ -51,7 +59,7 @@ export function UserMenu() {
       });
     }
 
-    if (!isAuthenticated || isGuest) {
+    if (!isAuthenticated || isGuest || isPasswordlessUser) {
       arr.push(
         {
           key: "login",
@@ -64,7 +72,7 @@ export function UserMenu() {
           icon: LoginIcon,
         }
       );
-    } else {
+    } else if (!disableLogout) {
       arr.push({
         key: "logout",
         label: "Sign Out",
@@ -80,7 +88,16 @@ export function UserMenu() {
       <PopoverMenuTrigger placement="bottom right">
         <TooltipTrigger>
           <Button variant="icon" className={styles.userButton}>
-            <UserIcon />
+            {isAuthenticated && !isGuest && !isPasswordlessUser ? (
+              <Avatar
+                size="sm"
+                src={avatarUrl}
+                fallback={(displayName || userName).slice(0, 1).toUpperCase()}
+                className={styles.avatar}
+              />
+            ) : (
+              <UserIcon />
+            )}
           </Button>
           {(props) => (
             <Tooltip position="bottomLeft" {...props}>