Initial avatar work
This commit is contained in:
parent
b57eaee5ca
commit
24944f1cac
3 changed files with 82 additions and 42 deletions
|
@ -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);
|
||||||
|
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,
|
success: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
displayName: client?.getUser(client.getUserId())?.displayName,
|
displayName: user?.displayName,
|
||||||
|
avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
|
||||||
error: null,
|
error: null,
|
||||||
}));
|
};
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
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;
|
let user;
|
||||||
|
@ -630,18 +648,20 @@ export function useDisplayName(client) {
|
||||||
if (client) {
|
if (client) {
|
||||||
const userId = client.getUserId();
|
const userId = client.getUserId();
|
||||||
user = client.getUser(userId);
|
user = client.getUser(userId);
|
||||||
user.on("User.displayName", onChangeDisplayName);
|
user.on("User.displayName", onChangeUser);
|
||||||
|
user.on("User.avatarUrl", onChangeUser);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (user) {
|
if (user) {
|
||||||
user.removeListener("User.displayName", onChangeDisplayName);
|
user.removeListener("User.displayName", onChangeUser);
|
||||||
|
user.removeListener("User.avatarUrl", onChangeUser);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [client]);
|
}, [client]);
|
||||||
|
|
||||||
const setDisplayName = useCallback(
|
const saveProfile = useCallback(
|
||||||
(displayName) => {
|
async ({ displayName, avatar }) => {
|
||||||
if (client) {
|
if (client) {
|
||||||
setState((prev) => ({
|
setState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
|
@ -650,30 +670,33 @@ export function useDisplayName(client) {
|
||||||
success: false,
|
success: false,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
client
|
try {
|
||||||
.setDisplayName(displayName)
|
await client.setDisplayName(displayName);
|
||||||
.then(() => {
|
|
||||||
|
const url = await client.uploadContent(avatar);
|
||||||
|
await client.setAvatarUrl(url);
|
||||||
|
|
||||||
setState((prev) => ({
|
setState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
displayName,
|
displayName,
|
||||||
|
avatarUrl: getAvatarUrl(client, url),
|
||||||
loading: false,
|
loading: false,
|
||||||
success: true,
|
success: true,
|
||||||
}));
|
}));
|
||||||
})
|
} catch (error) {
|
||||||
.catch((error) => {
|
|
||||||
setState((prev) => ({
|
setState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
loading: false,
|
loading: false,
|
||||||
error,
|
error,
|
||||||
success: false,
|
success: false,
|
||||||
}));
|
}));
|
||||||
});
|
}
|
||||||
} else {
|
} else {
|
||||||
console.error("Client not initialized before calling setDisplayName");
|
console.error("Client not initialized before calling saveProfile");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[client]
|
[client]
|
||||||
);
|
);
|
||||||
|
|
||||||
return { loading, error, displayName, setDisplayName, success };
|
return { loading, error, displayName, avatarUrl, saveProfile, success };
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { Button } from "./button";
|
import { Button } from "./button";
|
||||||
import { useDisplayName } from "./ConferenceCallManagerHooks";
|
import { useProfile } from "./ConferenceCallManagerHooks";
|
||||||
import { FieldRow, InputField, ErrorMessage } from "./Input";
|
import { FieldRow, InputField, ErrorMessage } from "./Input";
|
||||||
import { Modal, ModalContent } from "./Modal";
|
import { Modal, ModalContent } from "./Modal";
|
||||||
|
|
||||||
|
@ -11,8 +11,8 @@ export function ProfileModal({ client, ...rest }) {
|
||||||
error,
|
error,
|
||||||
loading,
|
loading,
|
||||||
displayName: initialDisplayName,
|
displayName: initialDisplayName,
|
||||||
setDisplayName: submitDisplayName,
|
saveProfile,
|
||||||
} = useDisplayName(client);
|
} = useProfile(client);
|
||||||
const [displayName, setDisplayName] = useState(initialDisplayName || "");
|
const [displayName, setDisplayName] = useState(initialDisplayName || "");
|
||||||
|
|
||||||
const onChangeDisplayName = useCallback(
|
const onChangeDisplayName = useCallback(
|
||||||
|
@ -27,10 +27,14 @@ export function ProfileModal({ client, ...rest }) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const data = new FormData(e.target);
|
const data = new FormData(e.target);
|
||||||
const displayName = data.get("displayName");
|
const displayName = data.get("displayName");
|
||||||
console.log(displayName);
|
const avatar = data.get("avatar");
|
||||||
submitDisplayName(displayName);
|
|
||||||
|
saveProfile({
|
||||||
|
displayName,
|
||||||
|
avatar,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
[setDisplayName]
|
[saveProfile]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -56,6 +60,9 @@ export function ProfileModal({ client, ...rest }) {
|
||||||
onChange={onChangeDisplayName}
|
onChange={onChangeDisplayName}
|
||||||
/>
|
/>
|
||||||
</FieldRow>
|
</FieldRow>
|
||||||
|
<FieldRow>
|
||||||
|
<InputField type="file" id="avatar" name="avatar" label="Avatar" />
|
||||||
|
</FieldRow>
|
||||||
{error && (
|
{error && (
|
||||||
<FieldRow>
|
<FieldRow>
|
||||||
<ErrorMessage>{error.message}</ErrorMessage>
|
<ErrorMessage>{error.message}</ErrorMessage>
|
||||||
|
|
|
@ -8,10 +8,11 @@ import styles from "./UserMenu.module.css";
|
||||||
import { Item } from "@react-stately/collections";
|
import { Item } from "@react-stately/collections";
|
||||||
import { Menu } from "./Menu";
|
import { Menu } from "./Menu";
|
||||||
import { useHistory, useLocation } from "react-router-dom";
|
import { useHistory, useLocation } from "react-router-dom";
|
||||||
import { useClient, useDisplayName } from "./ConferenceCallManagerHooks";
|
import { useClient, useProfile } from "./ConferenceCallManagerHooks";
|
||||||
import { useModalTriggerState } from "./Modal";
|
import { useModalTriggerState } from "./Modal";
|
||||||
import { ProfileModal } from "./ProfileModal";
|
import { ProfileModal } from "./ProfileModal";
|
||||||
import { Tooltip, TooltipTrigger } from "./Tooltip";
|
import { Tooltip, TooltipTrigger } from "./Tooltip";
|
||||||
|
import { Avatar } from "./Avatar";
|
||||||
|
|
||||||
export function UserMenu({ disableLogout }) {
|
export function UserMenu({ disableLogout }) {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
@ -24,7 +25,7 @@ export function UserMenu({ disableLogout }) {
|
||||||
userName,
|
userName,
|
||||||
client,
|
client,
|
||||||
} = useClient();
|
} = useClient();
|
||||||
const { displayName } = useDisplayName(client);
|
const { displayName, avatarUrl } = useProfile(client);
|
||||||
const { modalState, modalProps } = useModalTriggerState();
|
const { modalState, modalProps } = useModalTriggerState();
|
||||||
|
|
||||||
const onAction = useCallback(
|
const onAction = useCallback(
|
||||||
|
@ -87,7 +88,16 @@ export function UserMenu({ disableLogout }) {
|
||||||
<PopoverMenuTrigger placement="bottom right">
|
<PopoverMenuTrigger placement="bottom right">
|
||||||
<TooltipTrigger>
|
<TooltipTrigger>
|
||||||
<Button variant="icon" className={styles.userButton}>
|
<Button variant="icon" className={styles.userButton}>
|
||||||
|
{isAuthenticated && !isGuest && !isPasswordlessUser ? (
|
||||||
|
<Avatar
|
||||||
|
size="sm"
|
||||||
|
src={avatarUrl}
|
||||||
|
fallback={(displayName || userName).slice(0, 1).toUpperCase()}
|
||||||
|
className={styles.avatar}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
<UserIcon />
|
<UserIcon />
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
{(props) => (
|
{(props) => (
|
||||||
<Tooltip position="bottomLeft" {...props}>
|
<Tooltip position="bottomLeft" {...props}>
|
||||||
|
|
Loading…
Reference in a new issue