diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 0b8ef74e..eaa90970 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -36,7 +36,7 @@ import { useSetSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { useSpaceOptionally } from '../../hooks/useSpace';
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
-import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix';
+import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
import { _SearchPathSearchParams } from '../../pages/paths';
import * as css from './RoomViewHeader.css';
import { useRoomUnread } from '../../state/hooks/unread';
@@ -53,6 +53,7 @@ import { stopPropagation } from '../../utils/keyboard';
import { getMatrixToRoom } from '../../plugins/matrix-to';
import { getViaServers } from '../../plugins/via-servers';
import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { useSpecVersions } from '../../hooks/useSpecVersions';
type RoomMenuProps = {
room: Room;
@@ -174,6 +175,8 @@ const RoomMenu = forwardRef
(({ room, requestClose
export function RoomViewHeader() {
const navigate = useNavigate();
const mx = useMatrixClient();
+ const { versions } = useSpecVersions();
+ const useAuthentication = versions.includes('v1.11');
const screenSize = useScreenSizeContext();
const room = useRoom();
const space = useSpaceOptionally();
@@ -185,7 +188,7 @@ export function RoomViewHeader() {
const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
const name = useRoomName(room);
const topic = useRoomTopic(room);
- const avatarUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc, 96, 96, 'crop') ?? undefined : undefined;
+ const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index d8b2b3e5..94a5825c 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -51,7 +51,7 @@ import {
getMemberAvatarMxc,
getMemberDisplayName,
} from '../../../utils/room';
-import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias } from '../../../utils/matrix';
+import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias, mxcUrlToHttp } from '../../../utils/matrix';
import { MessageLayout, MessageSpacing } from '../../../state/settings';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
@@ -67,6 +67,7 @@ import { copyToClipboard } from '../../../utils/dom';
import { stopPropagation } from '../../../utils/keyboard';
import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
import { getViaServers } from '../../../plugins/via-servers';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
@@ -234,9 +235,9 @@ export const MessageSourceCodeItem = as<
const getContent = (evt: MatrixEvent) =>
evt.isEncrypted()
? {
- [`<== DECRYPTED_EVENT ==>`]: evt.getEffectiveEvent(),
- [`<== ORIGINAL_EVENT ==>`]: evt.event,
- }
+ [`<== DECRYPTED_EVENT ==>`]: evt.getEffectiveEvent(),
+ [`<== ORIGINAL_EVENT ==>`]: evt.event,
+ }
: evt.event;
const getText = (): string => {
@@ -650,6 +651,8 @@ export const Message = as<'div', MessageProps>(
ref
) => {
const mx = useMatrixClient();
+ const { versions } = useSpecVersions();
+ const useAuthentication = versions.includes('v1.11');
const senderId = mEvent.getSender() ?? '';
const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });
@@ -709,7 +712,7 @@ export const Message = as<'div', MessageProps>(
userId={senderId}
src={
senderAvatarMxc
- ? mx.mxcUrlToHttp(senderAvatarMxc, 48, 48, 'crop') ?? undefined
+ ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
: undefined
}
alt={senderDisplayName}
@@ -950,26 +953,26 @@ export const Message = as<'div', MessageProps>(
{((!mEvent.isRedacted() && canDelete) ||
mEvent.getSender() !== mx.getUserId()) && (
- <>
-
-
- {!mEvent.isRedacted() && canDelete && (
-
- )}
- {mEvent.getSender() !== mx.getUserId() && (
-
- )}
-
-
- )}
+ <>
+
+
+ {!mEvent.isRedacted() && canDelete && (
+
+ )}
+ {mEvent.getSender() !== mx.getUserId() && (
+
+ )}
+
+
+ )}
}
@@ -1093,26 +1096,26 @@ export const Event = as<'div', EventProps>(
{((!mEvent.isRedacted() && canDelete && !stateEvent) ||
(mEvent.getSender() !== mx.getUserId() && !stateEvent)) && (
- <>
-
-
- {!mEvent.isRedacted() && canDelete && (
-
- )}
- {mEvent.getSender() !== mx.getUserId() && (
-
- )}
-
-
- )}
+ <>
+
+
+ {!mEvent.isRedacted() && canDelete && (
+
+ )}
+ {mEvent.getSender() !== mx.getUserId() && (
+
+ )}
+
+
+ )}
}
diff --git a/src/app/features/room/message/Reactions.tsx b/src/app/features/room/message/Reactions.tsx
index a6d7f553..258ab629 100644
--- a/src/app/features/room/message/Reactions.tsx
+++ b/src/app/features/room/message/Reactions.tsx
@@ -22,6 +22,7 @@ import { useRelations } from '../../../hooks/useRelations';
import * as css from './styles.css';
import { ReactionViewer } from '../reaction-viewer';
import { stopPropagation } from '../../../utils/keyboard';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
export type ReactionsProps = {
room: Room;
@@ -33,6 +34,8 @@ export type ReactionsProps = {
export const Reactions = as<'div', ReactionsProps>(
({ className, room, relations, mEventId, canSendReaction, onReactionToggle, ...props }, ref) => {
const mx = useMatrixClient();
+ const { versions } = useSpecVersions();
+ const useAuthentication = versions.includes('v1.11');
const [viewer, setViewer] = useState(false);
const myUserId = mx.getUserId();
const reactions = useRelations(
@@ -86,6 +89,7 @@ export const Reactions = as<'div', ReactionsProps>(
onClick={canSendReaction ? () => onReactionToggle(mEventId, key) : undefined}
onContextMenu={handleViewReaction}
aria-disabled={!canSendReaction}
+ useAuthentication={useAuthentication}
/>
)}
diff --git a/src/app/features/room/reaction-viewer/ReactionViewer.tsx b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
index 1c1b79a7..9e166a9e 100644
--- a/src/app/features/room/reaction-viewer/ReactionViewer.tsx
+++ b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
@@ -25,6 +25,7 @@ import { useRelations } from '../../../hooks/useRelations';
import { Reaction } from '../../../components/message';
import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
import { UserAvatar } from '../../../components/user-avatar';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
export type ReactionViewerProps = {
room: Room;
@@ -35,6 +36,8 @@ export type ReactionViewerProps = {
export const ReactionViewer = as<'div', ReactionViewerProps>(
({ className, room, initialKey, relations, requestClose, ...props }, ref) => {
const mx = useMatrixClient();
+ const { versions } = useSpecVersions();
+ const useAuthentication = versions.includes('v1.11');
const reactions = useRelations(
relations,
useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
@@ -81,6 +84,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
count={evts.size}
aria-selected={key === selectedKey}
onClick={() => setSelectedKey(key)}
+ useAuthentication={useAuthentication}
/>
);
})}
@@ -107,14 +111,16 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
const member = room.getMember(senderId);
const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
- const avatarUrl = member?.getAvatarUrl(
- mx.baseUrl,
+ const avatarMxcUrl = member?.getMxcAvatarUrl();
+ const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
+ avatarMxcUrl,
100,
100,
'crop',
undefined,
- false
- );
+ false,
+ useAuthentication
+ ) : undefined;
return (