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

2024-11-15 00:04:59 +08:00 · 2021-12-16 10:10:58 -08:00 · 2021-12-16 10:10:58 -08:00 · 4385301cfb
commit 4385301cfb
parent 4debc9e3f5 24944f1cac
10 changed files with 141 additions and 70 deletions
--- a/src/ConferenceCallManagerHooks.jsx
+++ b/src/ConferenceCallManagerHooks.jsx
@ -612,17 +612,35 @@ export function getRoomUrl(roomId) {
  }
 }

-export function useDisplayName(client) {
-  const [{ loading, displayName, error, success }, setState] = useState(() => ({
-    success: false,
-    loading: false,
-    displayName: client?.getUser(client.getUserId())?.displayName,
-    error: null,
-  }));
+function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
+  const width = Math.floor(avatarSize * window.devicePixelRatio);
+  const height = Math.floor(avatarSize * window.devicePixelRatio);
+  return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
+}
+
+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 }) => {
-      setState({ success: false, loading: false, displayName, error: null });
+    const onChangeUser = (_event, { displayName, avatarUrl }) => {
+      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(
-    (displayName) => {
+  const saveProfile = useCallback(
+    async ({ displayName, avatar }) => {
      if (client) {
        setState((prev) => ({
          ...prev,
@ -650,30 +670,33 @@ export function useDisplayName(client) {
          success: false,
        }));

-        client
-          .setDisplayName(displayName)
-          .then(() => {
-            setState((prev) => ({
-              ...prev,
-              displayName,
-              loading: false,
-              success: true,
-            }));
-          })
-          .catch((error) => {
-            setState((prev) => ({
-              ...prev,
-              loading: false,
-              error,
-              success: false,
-            }));
-          });
+        try {
+          await client.setDisplayName(displayName);
+
+          const url = await client.uploadContent(avatar);
+          await client.setAvatarUrl(url);
+
+          setState((prev) => ({
+            ...prev,
+            displayName,
+            avatarUrl: getAvatarUrl(client, url),
+            loading: false,
+            success: true,
+          }));
+        } catch (error) {
+          setState((prev) => ({
+            ...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 };
 }
--- a/src/Input.jsx
+++ b/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>
    );
  }
--- a/src/Input.module.css
+++ b/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;
--- a/src/LoginPage.jsx
+++ b/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>
--- a/src/Menu.module.css
+++ b/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;
 }
--- a/src/ProfileModal.jsx
+++ b/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,
-  } = useDisplayName(client);
+    saveProfile,
+  } = 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);
-      submitDisplayName(displayName);
+      const avatar = data.get("avatar");
+
+      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>
--- a/src/RegisterPage.jsx
+++ b/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>
--- a/src/Room.jsx
+++ b/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 ? (
--- a/src/Room.module.css
+++ b/src/Room.module.css
@ -63,8 +63,8 @@ limitations under the License.

 .preview {
  position: relative;
-  max-width: 816px;
-  max-height: 75vh;
+  min-height: 280px;
+  height: 50vh;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--bgColor3);
--- a/src/UserMenu.jsx
+++ b/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 { displayName } = useDisplayName(client);
+  const {
+    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}>