PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Typescript fixes due to MatrixEvent being TSified

Browse source
This commit is contained in:
Michael Telatynski 2021-06-17 14:06:03 +01:00
parent cce4ccb157
commit f929d2ee5f
7 changed files with 78 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/Avatar.ts
View file

@ -14,18 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import {RoomMember} from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import {User} from "matrix-js-sdk/src/models/user"; import { User } from "matrix-js-sdk/src/models/user";
import {Room} from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import DMRoomMap from './utils/DMRoomMap'; import DMRoomMap from './utils/DMRoomMap';
import {mediaFromMxc} from "./customisations/Media"; import { mediaFromMxc } from "./customisations/Media";
import SettingsStore from "./settings/SettingsStore"; import SettingsStore from "./settings/SettingsStore";
export type ResizeMethod = "crop" | "scale"; export type ResizeMethod = "crop" | "scale";
// Not to be used for BaseAvatar urls as that has similar default avatar fallback already // Not to be used for BaseAvatar urls as that has similar default avatar fallback already
export function avatarUrlForMember(member: RoomMember, width: number, height: number, resizeMethod: ResizeMethod) { export function avatarUrlForMember(
member: RoomMember,
width: number,
height: number,
resizeMethod: ResizeMethod,
): string {
let url: string; let url: string;
if (member?.getMxcAvatarUrl()) { if (member?.getMxcAvatarUrl()) {
url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
@ -39,7 +44,12 @@ export function avatarUrlForMember(member: RoomMember, width: number, height: nu
return url; return url;
} }
export function avatarUrlForUser(user: User, width: number, height: number, resizeMethod?: ResizeMethod) { export function avatarUrlForUser(
user: Pick<User, "avatarUrl">,
width: number,
height: number,
resizeMethod?: ResizeMethod,
): string | null {
if (!user.avatarUrl) return null; if (!user.avatarUrl) return null;
return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod); return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
} }

2
src/autocomplete/UserProvider.tsx
View file

@ -28,7 +28,7 @@ import {MatrixClientPeg} from '../MatrixClientPeg';
import MatrixEvent from "matrix-js-sdk/src/models/event"; import MatrixEvent from "matrix-js-sdk/src/models/event";
import Room from "matrix-js-sdk/src/models/room"; import Room from "matrix-js-sdk/src/models/room";
import RoomMember from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import RoomState from "matrix-js-sdk/src/models/room-state"; import RoomState from "matrix-js-sdk/src/models/room-state";
import EventTimeline from "matrix-js-sdk/src/models/event-timeline"; import EventTimeline from "matrix-js-sdk/src/models/event-timeline";
import {makeUserPermalink} from "../utils/permalinks/Permalinks"; import {makeUserPermalink} from "../utils/permalinks/Permalinks";

16
src/components/views/dialogs/InviteDialog.tsx
View file

@ -153,8 +153,8 @@ class ThreepidMember extends Member {
} }
interface IDMUserTileProps { interface IDMUserTileProps {
member: RoomMember; member: Member;
onRemove(member: RoomMember): void; onRemove(member: Member): void;
} }
class DMUserTile extends React.PureComponent<IDMUserTileProps> { class DMUserTile extends React.PureComponent<IDMUserTileProps> {
@ -168,7 +168,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
render() { render() {
const avatarSize = 20; const avatarSize = 20;
const avatar = this.props.member.isEmail const avatar = (this.props.member as ThreepidMember).isEmail
? <img ? <img
className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar' className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar'
src={require("../../../../res/img/icon-email-pill-avatar.svg")} src={require("../../../../res/img/icon-email-pill-avatar.svg")}
@ -210,9 +210,9 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
} }
interface IDMRoomTileProps { interface IDMRoomTileProps {
member: RoomMember; member: Member;
lastActiveTs: number; lastActiveTs: number;
onToggle(member: RoomMember): void; onToggle(member: Member): void;
highlightWord: string; highlightWord: string;
isSelected: boolean; isSelected: boolean;
} }
@ -270,7 +270,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
} }
const avatarSize = 36; const avatarSize = 36;
const avatar = this.props.member.isEmail const avatar = (this.props.member as ThreepidMember).isEmail
? <img ? <img
src={require("../../../../res/img/icon-email-pill-avatar.svg")} src={require("../../../../res/img/icon-email-pill-avatar.svg")}
width={avatarSize} height={avatarSize} /> width={avatarSize} height={avatarSize} />
@ -298,7 +298,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
</span> </span>
); );
const caption = this.props.member.isEmail const caption = (this.props.member as ThreepidMember).isEmail
? _t("Invite by email") ? _t("Invite by email")
: this.highlightName(this.props.member.userId); : this.highlightName(this.props.member.userId);
@ -334,7 +334,7 @@ interface IInviteDialogProps {
} }
interface IInviteDialogState { interface IInviteDialogState {
targets: RoomMember[]; // array of Member objects (see interface above) targets: Member[]; // array of Member objects (see interface above)
filterText: string; filterText: string;
recents: { user: Member, userId: string }[]; recents: { user: Member, userId: string }[];
numRecentsShown: number; numRecentsShown: number;

9
src/components/views/right_panel/EncryptionInfo.tsx
View file

@ -17,8 +17,9 @@ limitations under the License.
import React from "react"; import React from "react";
import * as sdk from "../../../index"; import * as sdk from "../../../index";
import {_t} from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import {RoomMember} from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { User } from "matrix-js-sdk/src/models/user";
export const PendingActionSpinner = ({text}) => { export const PendingActionSpinner = ({text}) => {
const Spinner = sdk.getComponent('elements.Spinner'); const Spinner = sdk.getComponent('elements.Spinner');
@ -31,7 +32,7 @@ export const PendingActionSpinner = ({text}) => {
interface IProps { interface IProps {
waitingForOtherParty: boolean; waitingForOtherParty: boolean;
waitingForNetwork: boolean; waitingForNetwork: boolean;
member: RoomMember; member: RoomMember | User;
onStartVerification: () => Promise<void>; onStartVerification: () => Promise<void>;
isRoomEncrypted: boolean; isRoomEncrypted: boolean;
inDialog: boolean; inDialog: boolean;
@ -55,7 +56,7 @@ const EncryptionInfo: React.FC<IProps> = ({
text = _t("Accept on your other login…"); text = _t("Accept on your other login…");
} else { } else {
text = _t("Waiting for %(displayName)s to accept…", { text = _t("Waiting for %(displayName)s to accept…", {
displayName: member.displayName || member.name || member.userId, displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
}); });
} }
} else { } else {

73
src/components/views/right_panel/UserInfo.tsx
View file

@ -146,7 +146,7 @@ async function openDMForUser(matrixClient: MatrixClient, userId: string) {
type SetUpdating = (updating: boolean) => void; type SetUpdating = (updating: boolean) => void;
function useHasCrossSigningKeys(cli: MatrixClient, member: RoomMember, canVerify: boolean, setUpdating: SetUpdating) { function useHasCrossSigningKeys(cli: MatrixClient, member: User, canVerify: boolean, setUpdating: SetUpdating) {
return useAsyncMemo(async () => { return useAsyncMemo(async () => {
if (!canVerify) { if (!canVerify) {
return undefined; return undefined;
@ -971,7 +971,7 @@ interface IRoomPermissions {
canInvite: boolean; canInvite: boolean;
} }
function useRoomPermissions(cli: MatrixClient, room: Room, user: User): IRoomPermissions { function useRoomPermissions(cli: MatrixClient, room: Room, user: RoomMember): IRoomPermissions {
const [roomPermissions, setRoomPermissions] = useState<IRoomPermissions>({ const [roomPermissions, setRoomPermissions] = useState<IRoomPermissions>({
// modifyLevelMax is the max PL we can set this user to, typically min(their PL, our PL) && canSetPL // modifyLevelMax is the max PL we can set this user to, typically min(their PL, our PL) && canSetPL
modifyLevelMax: -1, modifyLevelMax: -1,
@ -1028,7 +1028,7 @@ function useRoomPermissions(cli: MatrixClient, room: Room, user: User): IRoomPer
} }
const PowerLevelSection: React.FC<{ const PowerLevelSection: React.FC<{
user: User; user: RoomMember;
room: Room; room: Room;
roomPermissions: IRoomPermissions; roomPermissions: IRoomPermissions;
powerLevels: IPowerLevelsContent; powerLevels: IPowerLevelsContent;
@ -1037,7 +1037,7 @@ const PowerLevelSection: React.FC<{
return (<PowerLevelEditor user={user} room={room} roomPermissions={roomPermissions} />); return (<PowerLevelEditor user={user} room={room} roomPermissions={roomPermissions} />);
} else { } else {
const powerLevelUsersDefault = powerLevels.users_default || 0; const powerLevelUsersDefault = powerLevels.users_default || 0;
const powerLevel = parseInt(user.powerLevel, 10); const powerLevel = user.powerLevel;
const role = textualPowerLevel(powerLevel, powerLevelUsersDefault); const role = textualPowerLevel(powerLevel, powerLevelUsersDefault);
return ( return (
<div className="mx_UserInfo_profileField"> <div className="mx_UserInfo_profileField">
@ -1048,13 +1048,13 @@ const PowerLevelSection: React.FC<{
}; };
const PowerLevelEditor: React.FC<{ const PowerLevelEditor: React.FC<{
user: User; user: RoomMember;
room: Room; room: Room;
roomPermissions: IRoomPermissions; roomPermissions: IRoomPermissions;
}> = ({user, room, roomPermissions}) => { }> = ({user, room, roomPermissions}) => {
const cli = useContext(MatrixClientContext); const cli = useContext(MatrixClientContext);
const [selectedPowerLevel, setSelectedPowerLevel] = useState(parseInt(user.powerLevel, 10)); const [selectedPowerLevel, setSelectedPowerLevel] = useState(user.powerLevel);
const onPowerChange = useCallback(async (powerLevelStr: string) => { const onPowerChange = useCallback(async (powerLevelStr: string) => {
const powerLevel = parseInt(powerLevelStr, 10); const powerLevel = parseInt(powerLevelStr, 10);
setSelectedPowerLevel(powerLevel); setSelectedPowerLevel(powerLevel);
@ -1231,7 +1231,7 @@ const BasicUserInfo: React.FC<{
setPendingUpdateCount(pendingUpdateCount - 1); setPendingUpdateCount(pendingUpdateCount - 1);
}, [pendingUpdateCount]); }, [pendingUpdateCount]);
const roomPermissions = useRoomPermissions(cli, room, member); const roomPermissions = useRoomPermissions(cli, room, member as RoomMember);
const onSynapseDeactivate = useCallback(async () => { const onSynapseDeactivate = useCallback(async () => {
const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, { const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, {
@ -1275,12 +1275,26 @@ const BasicUserInfo: React.FC<{
); );
} }
let memberDetails;
let adminToolsContainer; let adminToolsContainer;
if (room && member.roomId) { if (room && (member as RoomMember).roomId) {
// hide the Roles section for DMs as it doesn't make sense there
if (!DMRoomMap.shared().getUserIdForRoomId((member as RoomMember).roomId)) {
memberDetails = <div className="mx_UserInfo_container">
<h3>{ _t("Role") }</h3>
<PowerLevelSection
powerLevels={powerLevels}
user={member as RoomMember}
room={room}
roomPermissions={roomPermissions}
/>
</div>;
}
adminToolsContainer = ( adminToolsContainer = (
<RoomAdminToolsContainer <RoomAdminToolsContainer
powerLevels={powerLevels} powerLevels={powerLevels}
member={member} member={member as RoomMember}
room={room} room={room}
startUpdating={startUpdating} startUpdating={startUpdating}
stopUpdating={stopUpdating}> stopUpdating={stopUpdating}>
@ -1309,20 +1323,6 @@ const BasicUserInfo: React.FC<{
spinner = <Spinner />; spinner = <Spinner />;
} }
let memberDetails;
// hide the Roles section for DMs as it doesn't make sense there
if (room && member.roomId && !DMRoomMap.shared().getUserIdForRoomId(member.roomId)) {
memberDetails = <div className="mx_UserInfo_container">
<h3>{ _t("Role") }</h3>
<PowerLevelSection
powerLevels={powerLevels}
user={member}
room={room}
roomPermissions={roomPermissions}
/>
</div>;
}
// only display the devices list if our client supports E2E // only display the devices list if our client supports E2E
const cryptoEnabled = cli.isCryptoEnabled(); const cryptoEnabled = cli.isCryptoEnabled();
@ -1349,8 +1349,7 @@ const BasicUserInfo: React.FC<{
const setUpdating = (updating) => { const setUpdating = (updating) => {
setPendingUpdateCount(count => count + (updating ? 1 : -1)); setPendingUpdateCount(count => count + (updating ? 1 : -1));
}; };
const hasCrossSigningKeys = const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member as User, canVerify, setUpdating);
useHasCrossSigningKeys(cli, member, canVerify, setUpdating );
const showDeviceListSpinner = devices === undefined; const showDeviceListSpinner = devices === undefined;
if (canVerify) { if (canVerify) {
@ -1359,9 +1358,9 @@ const BasicUserInfo: React.FC<{
verifyButton = ( verifyButton = (
<AccessibleButton className="mx_UserInfo_field mx_UserInfo_verifyButton" onClick={() => { <AccessibleButton className="mx_UserInfo_field mx_UserInfo_verifyButton" onClick={() => {
if (hasCrossSigningKeys) { if (hasCrossSigningKeys) {
verifyUser(member); verifyUser(member as User);
} else { } else {
legacyVerifyUser(member); legacyVerifyUser(member as User);
} }
}}> }}>
{_t("Verify")} {_t("Verify")}
@ -1409,7 +1408,7 @@ const BasicUserInfo: React.FC<{
<UserOptionsSection <UserOptionsSection
canInvite={roomPermissions.canInvite} canInvite={roomPermissions.canInvite}
isIgnored={isIgnored} isIgnored={isIgnored}
member={member} member={member as RoomMember}
isSpace={SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()} isSpace={SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()}
/> />
@ -1428,13 +1427,15 @@ const UserInfoHeader: React.FC<{
const cli = useContext(MatrixClientContext); const cli = useContext(MatrixClientContext);
const onMemberAvatarClick = useCallback(() => { const onMemberAvatarClick = useCallback(() => {
const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl; const avatarUrl = (member as RoomMember).getMxcAvatarUrl
? (member as RoomMember).getMxcAvatarUrl()
: (member as User).avatarUrl;
if (!avatarUrl) return; if (!avatarUrl) return;
const httpUrl = mediaFromMxc(avatarUrl).srcHttp; const httpUrl = mediaFromMxc(avatarUrl).srcHttp;
const params = { const params = {
src: httpUrl, src: httpUrl,
name: member.name, name: (member as RoomMember).name || (member as User).displayName,
}; };
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
@ -1446,13 +1447,13 @@ const UserInfoHeader: React.FC<{
<div> <div>
<MemberAvatar <MemberAvatar
key={member.userId} // to instantly blank the avatar when UserInfo changes members key={member.userId} // to instantly blank the avatar when UserInfo changes members
member={member} member={member as RoomMember}
width={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh width={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
height={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh height={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
resizeMethod="scale" resizeMethod="scale"
fallbackUserId={member.userId} fallbackUserId={member.userId}
onClick={onMemberAvatarClick} onClick={onMemberAvatarClick}
urls={member.avatarUrl ? [member.avatarUrl] : undefined} /> urls={(member as User).avatarUrl ? [(member as User).avatarUrl] : undefined} />
</div> </div>
</div> </div>
</div> </div>
@ -1469,7 +1470,11 @@ const UserInfoHeader: React.FC<{
presenceCurrentlyActive = member.user.currentlyActive; presenceCurrentlyActive = member.user.currentlyActive;
if (SettingsStore.getValue("feature_custom_status")) { if (SettingsStore.getValue("feature_custom_status")) {
statusMessage = member.user._unstable_statusMessage; if ((member as RoomMember).user) {
statusMessage = member.user.unstable_statusMessage;
} else {
statusMessage = (member as unknown as User).unstable_statusMessage;
}
} }
} }
@ -1500,7 +1505,7 @@ const UserInfoHeader: React.FC<{
e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />; e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
} }
const displayName = member.rawDisplayName || member.displayname; const displayName = (member as RoomMember).rawDisplayName || (member as GroupMember).displayname;
return <React.Fragment> return <React.Fragment>
{ avatarElement } { avatarElement }

13
src/components/views/right_panel/VerificationPanel.tsx
View file

@ -22,6 +22,7 @@ import {verificationMethods} from 'matrix-js-sdk/src/crypto';
import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode"; import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
import {RoomMember} from "matrix-js-sdk/src/models/room-member"; import {RoomMember} from "matrix-js-sdk/src/models/room-member";
import { User } from "matrix-js-sdk/src/models/user";
import {ReciprocateQRCode} from "matrix-js-sdk/src/crypto/verification/QRCode"; import {ReciprocateQRCode} from "matrix-js-sdk/src/crypto/verification/QRCode";
import {SAS} from "matrix-js-sdk/src/crypto/verification/SAS"; import {SAS} from "matrix-js-sdk/src/crypto/verification/SAS";
@ -51,7 +52,7 @@ enum VerificationPhase {
interface IProps { interface IProps {
layout: string; layout: string;
request: VerificationRequest; request: VerificationRequest;
member: RoomMember; member: RoomMember | User;
phase: VerificationPhase; phase: VerificationPhase;
onClose: () => void; onClose: () => void;
isRoomEncrypted: boolean; isRoomEncrypted: boolean;
@ -134,7 +135,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
qrBlock = <div className="mx_UserInfo_container"> qrBlock = <div className="mx_UserInfo_container">
<h3>{_t("Verify by scanning")}</h3> <h3>{_t("Verify by scanning")}</h3>
<p>{_t("Ask %(displayName)s to scan your code:", { <p>{_t("Ask %(displayName)s to scan your code:", {
displayName: member.displayName || member.name || member.userId, displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
})}</p> })}</p>
<div className="mx_VerificationPanel_qrCode"> <div className="mx_VerificationPanel_qrCode">
@ -205,7 +206,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
const description = request.isSelfVerification ? const description = request.isSelfVerification ?
_t("Almost there! Is your other session showing the same shield?") : _t("Almost there! Is your other session showing the same shield?") :
_t("Almost there! Is %(displayName)s showing the same shield?", { _t("Almost there! Is %(displayName)s showing the same shield?", {
displayName: member.displayName || member.name || member.userId, displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
}); });
let body: JSX.Element; let body: JSX.Element;
if (this.state.reciprocateQREvent) { if (this.state.reciprocateQREvent) {
@ -264,7 +265,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
} }
} else { } else {
description = _t("You've successfully verified %(displayName)s!", { description = _t("You've successfully verified %(displayName)s!", {
displayName: member.displayName || member.name || member.userId, displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
}); });
} }
@ -302,7 +303,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
text = _t("You cancelled verification on your other session."); text = _t("You cancelled verification on your other session.");
} else { } else {
text = _t("%(displayName)s cancelled verification.", { text = _t("%(displayName)s cancelled verification.", {
displayName: member.displayName || member.name || member.userId, displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
}); });
} }
text = `${text} ${startAgainInstruction}`; text = `${text} ${startAgainInstruction}`;
@ -325,7 +326,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
public render() { public render() {
const {member, phase, request} = this.props; const {member, phase, request} = this.props;
const displayName = member.displayName || member.name || member.userId; const displayName = (member as User).displayName || (member as RoomMember).name || member.userId;
switch (phase) { switch (phase) {
case PHASE_READY: case PHASE_READY:

3
src/dispatcher/payloads/SetRightPanelPhasePayload.ts
View file

@ -17,6 +17,7 @@ limitations under the License.
import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { User } from "matrix-js-sdk/src/models/user";
import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
import { ActionPayload } from "../payloads"; import { ActionPayload } from "../payloads";
import { Action } from "../actions"; import { Action } from "../actions";
@ -29,7 +30,7 @@ export interface SetRightPanelPhasePayload extends ActionPayload {
} }
export interface SetRightPanelPhaseRefireParams { export interface SetRightPanelPhaseRefireParams {
member?: RoomMember; member?: RoomMember | User;
verificationRequest?: VerificationRequest; verificationRequest?: VerificationRequest;
groupId?: string; groupId?: string;
groupRoomId?: string; groupRoomId?: string;