mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-04 22:40:29 +03:00
open new user profile in all places
This commit is contained in:
parent
a44cefedcf
commit
1c56d626b1
3 changed files with 53 additions and 24 deletions
|
|
@ -19,9 +19,10 @@ import { getMemberDisplayName } from '../../utils/room';
|
|||
import { getMxIdLocalPart } from '../../utils/matrix';
|
||||
import * as css from './EventReaders.css';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { openProfileViewer } from '../../../client/action/navigation';
|
||||
import { UserAvatar } from '../user-avatar';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
|
||||
import { useSpaceOptionally } from '../../hooks/useSpace';
|
||||
|
||||
export type EventReadersProps = {
|
||||
room: Room;
|
||||
|
|
@ -33,6 +34,8 @@ export const EventReaders = as<'div', EventReadersProps>(
|
|||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const latestEventReaders = useRoomEventReaders(room, eventId);
|
||||
const openProfile = useOpenUserRoomProfile();
|
||||
const space = useSpaceOptionally();
|
||||
|
||||
const getName = (userId: string) =>
|
||||
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
|
||||
|
|
@ -57,19 +60,32 @@ export const EventReaders = as<'div', EventReadersProps>(
|
|||
<Box className={css.Content} direction="Column">
|
||||
{latestEventReaders.map((readerId) => {
|
||||
const name = getName(readerId);
|
||||
const avatarMxcUrl = room
|
||||
.getMember(readerId)
|
||||
?.getMxcAvatarUrl();
|
||||
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
|
||||
const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
|
||||
const avatarUrl = avatarMxcUrl
|
||||
? mx.mxcUrlToHttp(
|
||||
avatarMxcUrl,
|
||||
100,
|
||||
100,
|
||||
'crop',
|
||||
undefined,
|
||||
false,
|
||||
useAuthentication
|
||||
)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={readerId}
|
||||
style={{ padding: `0 ${config.space.S200}` }}
|
||||
radii="400"
|
||||
onClick={() => {
|
||||
requestClose();
|
||||
openProfileViewer(readerId, room.roomId);
|
||||
onClick={(event) => {
|
||||
openProfile(
|
||||
room.roomId,
|
||||
space?.roomId,
|
||||
readerId,
|
||||
event.currentTarget.getBoundingClientRect(),
|
||||
'Bottom'
|
||||
);
|
||||
}}
|
||||
before={
|
||||
<Avatar size="200">
|
||||
|
|
|
|||
|
|
@ -20,12 +20,13 @@ import { getMemberDisplayName } from '../../../utils/room';
|
|||
import { eventWithShortcode, getMxIdLocalPart } from '../../../utils/matrix';
|
||||
import * as css from './ReactionViewer.css';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { openProfileViewer } from '../../../../client/action/navigation';
|
||||
import { useRelations } from '../../../hooks/useRelations';
|
||||
import { Reaction } from '../../../components/message';
|
||||
import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
|
||||
import { UserAvatar } from '../../../components/user-avatar';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
|
||||
import { useSpaceOptionally } from '../../../hooks/useSpace';
|
||||
|
||||
export type ReactionViewerProps = {
|
||||
room: Room;
|
||||
|
|
@ -41,6 +42,8 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
|
|||
relations,
|
||||
useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
|
||||
);
|
||||
const space = useSpaceOptionally();
|
||||
const openProfile = useOpenUserRoomProfile();
|
||||
|
||||
const [selectedKey, setSelectedKey] = useState<string>(() => {
|
||||
if (initialKey) return initialKey;
|
||||
|
|
@ -111,24 +114,31 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
|
|||
const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
|
||||
|
||||
const avatarMxcUrl = member?.getMxcAvatarUrl();
|
||||
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
|
||||
avatarMxcUrl,
|
||||
100,
|
||||
100,
|
||||
'crop',
|
||||
undefined,
|
||||
false,
|
||||
useAuthentication
|
||||
) : undefined;
|
||||
const avatarUrl = avatarMxcUrl
|
||||
? mx.mxcUrlToHttp(
|
||||
avatarMxcUrl,
|
||||
100,
|
||||
100,
|
||||
'crop',
|
||||
undefined,
|
||||
false,
|
||||
useAuthentication
|
||||
)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={senderId}
|
||||
style={{ padding: `0 ${config.space.S200}` }}
|
||||
radii="400"
|
||||
onClick={() => {
|
||||
requestClose();
|
||||
openProfileViewer(senderId, room.roomId);
|
||||
onClick={(event) => {
|
||||
openProfile(
|
||||
room.roomId,
|
||||
space?.roomId,
|
||||
senderId,
|
||||
event.currentTarget.getBoundingClientRect(),
|
||||
'Bottom'
|
||||
);
|
||||
}}
|
||||
before={
|
||||
<Avatar size="200">
|
||||
|
|
|
|||
|
|
@ -3,14 +3,17 @@ import { useNavigate } from 'react-router-dom';
|
|||
import { useRoomNavigate } from './useRoomNavigate';
|
||||
import { useMatrixClient } from './useMatrixClient';
|
||||
import { isRoomId, isUserId } from '../utils/matrix';
|
||||
import { openProfileViewer } from '../../client/action/navigation';
|
||||
import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
|
||||
import { _RoomSearchParams } from '../pages/paths';
|
||||
import { useOpenUserRoomProfile } from '../state/hooks/userRoomProfile';
|
||||
import { useSpaceOptionally } from './useSpace';
|
||||
|
||||
export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
|
||||
const mx = useMatrixClient();
|
||||
const { navigateRoom, navigateSpace } = useRoomNavigate();
|
||||
const navigate = useNavigate();
|
||||
const openProfile = useOpenUserRoomProfile();
|
||||
const space = useSpaceOptionally();
|
||||
|
||||
const handleClick: ReactEventHandler<HTMLElement> = useCallback(
|
||||
(evt) => {
|
||||
|
|
@ -21,7 +24,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
|
|||
if (typeof mentionId !== 'string') return;
|
||||
|
||||
if (isUserId(mentionId)) {
|
||||
openProfileViewer(mentionId, roomId);
|
||||
openProfile(roomId, space?.roomId, mentionId, target.getBoundingClientRect());
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +40,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
|
|||
|
||||
navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
|
||||
},
|
||||
[mx, navigate, navigateRoom, navigateSpace, roomId]
|
||||
[mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile]
|
||||
);
|
||||
|
||||
return handleClick;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue