HTML for your community's page
@@ -367,8 +369,7 @@ class FeaturedUser extends React.Component { const permalink = makeUserPermalink(this.props.summaryInfo.user_id); const userNameNode = { name }; - const httpUrl = MatrixClientPeg.get() - .mxcUrlToHttp(this.props.summaryInfo.avatar_url, 64, 64); + const httpUrl = mediaFromMxc(this.props.summaryInfo.avatar_url).getSquareThumbnailHttp(64); const deleteButton = this.props.editing ? this.onRoomClicked(room, ev)}
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index a64e40bc65..fda09f9774 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -25,6 +25,7 @@ import AccessibleButton from "../views/elements/AccessibleButton";
import { Action } from "../../dispatcher/actions";
import RoomListStore from "../../stores/room-list/RoomListStore";
import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
+import {replaceableComponent} from "../../utils/replaceableComponent";
interface IProps {
isMinimized: boolean;
@@ -37,6 +38,7 @@ interface IState {
focused: boolean;
}
+@replaceableComponent("structures.RoomSearch")
export default class RoomSearch extends React.PureComponent {
private dispatcherRef: string;
private inputRef: React.RefObject = createRef();
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index aa4bceba74..8b70998be0 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -23,6 +23,7 @@ import Resend from '../../Resend';
import dis from '../../dispatcher/dispatcher';
import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
import {Action} from "../../dispatcher/actions";
+import {replaceableComponent} from "../../utils/replaceableComponent";
const STATUS_BAR_HIDDEN = 0;
const STATUS_BAR_EXPANDED = 1;
@@ -35,6 +36,7 @@ function getUnsentMessages(room) {
});
}
+@replaceableComponent("structures.RoomStatusBar")
export default class RoomStatusBar extends React.Component {
static propTypes = {
// the room this statusbar is representing.
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 96808e651e..706cd5ded8 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -82,6 +82,7 @@ import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutS
import { objectHasDiff } from "../../utils/objects";
import SpaceRoomView from "./SpaceRoomView";
import { IOpts } from "../../createRoom";
+import {replaceableComponent} from "../../utils/replaceableComponent";
const DEBUG = false;
let debuglog = function(msg: string) {};
@@ -195,6 +196,7 @@ export interface IState {
dragCounter: number;
}
+@replaceableComponent("structures.RoomView")
export default class RoomView extends React.Component {
private readonly dispatcherRef: string;
private readonly roomStoreToken: EventSubscription;
@@ -711,9 +713,9 @@ export default class RoomView extends React.Component {
[payload.file], this.state.room.roomId, this.context);
break;
case 'notifier_enabled':
- case 'upload_started':
- case 'upload_finished':
- case 'upload_canceled':
+ case Action.UploadStarted:
+ case Action.UploadFinished:
+ case Action.UploadCanceled:
this.forceUpdate();
break;
case 'call_state': {
@@ -1911,7 +1913,7 @@ export default class RoomView extends React.Component {
);
}
- if (this.state.room?.isSpaceRoom()) {
+ if (SettingsStore.getValue("feature_spaces") && this.state.room?.isSpaceRoom()) {
return = ({
const name = space.name || space.canonical_alias || space.aliases?.[0] || _t("Unnamed Space");
const evContent = event?.getContent();
- const [autoJoin, _setAutoJoin] = useState(evContent?.auto_join);
+ const [suggested, _setSuggested] = useState(evContent?.suggested);
const [removed, _setRemoved] = useState(!evContent?.via);
const cli = MatrixClientPeg.get();
@@ -102,12 +104,12 @@ const SubSpace: React.FC = ({
let actions;
if (editing && queueAction) {
if (event && cli.getRoom(event.getRoomId())?.currentState.maySendStateEvent(event.getType(), cli.getUserId())) {
- const setAutoJoin = () => {
- _setAutoJoin(v => {
+ const setSuggested = () => {
+ _setSuggested(v => {
queueAction({
event,
removed,
- autoJoin: !v,
+ suggested: !v,
});
return !v;
});
@@ -118,7 +120,7 @@ const SubSpace: React.FC = ({
queueAction({
event,
removed: !v,
- autoJoin,
+ suggested,
});
return !v;
});
@@ -131,7 +133,7 @@ const SubSpace: React.FC = ({
} else {
actions =
;
}
} else {
@@ -157,12 +159,7 @@ const SubSpace: React.FC = ({
let url: string;
if (space.avatar_url) {
- url = MatrixClientPeg.get().mxcUrlToHttp(
- space.avatar_url,
- Math.floor(24 * window.devicePixelRatio),
- Math.floor(24 * window.devicePixelRatio),
- "crop",
- );
+ url = mediaFromMxc(space.avatar_url).getSquareThumbnailHttp(Math.floor(24 * window.devicePixelRatio));
}
return
@@ -182,8 +179,8 @@ const SubSpace: React.FC = ({
interface IAction {
event: MatrixEvent;
+ suggested: boolean;
removed: boolean;
- autoJoin: boolean;
}
interface IRoomTileProps {
@@ -199,7 +196,7 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
const name = room.name || room.canonical_alias || room.aliases?.[0] || _t("Unnamed Room");
const evContent = event?.getContent();
- const [autoJoin, _setAutoJoin] = useState(evContent?.auto_join);
+ const [suggested, _setSuggested] = useState(evContent?.suggested);
const [removed, _setRemoved] = useState(!evContent?.via);
const cli = MatrixClientPeg.get();
@@ -209,12 +206,12 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
let actions;
if (editing && queueAction) {
if (event && cli.getRoom(event.getRoomId())?.currentState.maySendStateEvent(event.getType(), cli.getUserId())) {
- const setAutoJoin = () => {
- _setAutoJoin(v => {
+ const setSuggested = () => {
+ _setSuggested(v => {
queueAction({
event,
removed,
- autoJoin: !v,
+ suggested: !v,
});
return !v;
});
@@ -225,7 +222,7 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
queueAction({
event,
removed: !v,
- autoJoin,
+ suggested,
});
return !v;
});
@@ -238,7 +235,7 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
} else {
actions =
;
}
} else {
@@ -264,12 +261,7 @@ const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinCli
let url: string;
if (room.avatar_url) {
- url = cli.mxcUrlToHttp(
- room.avatar_url,
- Math.floor(32 * window.devicePixelRatio),
- Math.floor(32 * window.devicePixelRatio),
- "crop",
- );
+ url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(Math.floor(32 * window.devicePixelRatio));
}
const content =
@@ -445,10 +437,10 @@ const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinis
const onSaveButtonClicked = () => {
// TODO setBusy
- pendingActions.current.forEach(({event, autoJoin, removed}) => {
+ pendingActions.current.forEach(({event, suggested, removed}) => {
const content = {
...event.getContent(),
- auto_join: autoJoin,
+ suggested,
};
if (removed) {
@@ -463,7 +455,7 @@ const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinis
if (isEditing) {
adminButton =
;
} else {
adminButton =
};
- if (myMembership === "invite") {
- const inviteSender = space.getMember(userId)?.events.member?.getSender();
- const inviter = inviteSender && space.getMember(inviteSender);
-
- if (inviteSender) {
- return _t("
-
- {_t("Decline")}
-
-
;
- } else if (myMembership !== "join" && joinRule === "public") {
- joinButtons =
-
;
+ const inviteSender = space.getMember(cli.getUserId())?.events.member?.getSender();
+ const inviter = inviteSender && space.getMember(inviteSender);
+
+ if (inviteSender) {
+ inviterSection =
+
;
+ }
+
+ joinButtons = <>
+
+
+
+ { _t("
+ { inviter ?
+ { inviteSender }
+
: null }
+
+ { inviterSection }
+
+
+
+ {(topic, ref) =>
+
+
;
+};
+
+const SpaceLanding = ({ space }) => {
+ const cli = useContext(MatrixClientContext);
+ const myMembership = useMyRoomMembership(space);
+ const userId = cli.getUserId();
+
let inviteButton;
if (myMembership === "join" && space.canInvite(userId)) {
inviteButton = (
@@ -227,26 +296,7 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
) : null}
+
+
+ { visibilitySection }
+
+ {(count) => count > 0 ? (
+ {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.RoomMemberList,
+ refireParams: { space },
+ });
+ }}
+ >
+ { _t("%(count)s members", { count }) }
+
+ ) : null}
+
+
+
+ { topic }
+
+ }
+
+ { joinButtons }
+
+
{ inviteButton }
{ addRoomButtons }
@@ -548,16 +597,19 @@ export default class SpaceRoomView extends React.PureComponent {
private renderBody() {
switch (this.state.phase) {
case Phase.Landing:
- return this.setState({ phase: Phase.PublicShare })}
/>;
diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx
index 21f9f3f5d6..0097d55cf5 100644
--- a/src/components/structures/TabbedView.tsx
+++ b/src/components/structures/TabbedView.tsx
@@ -20,6 +20,7 @@ import * as React from "react";
import {_t} from '../../languageHandler';
import * as sdk from "../../index";
import AutoHideScrollbar from './AutoHideScrollbar';
+import {replaceableComponent} from "../../utils/replaceableComponent";
/**
* Represents a tab for the TabbedView.
@@ -45,6 +46,7 @@ interface IState {
activeTabIndex: number;
}
+@replaceableComponent("structures.TabbedView")
export default class TabbedView extends React.Component {
constructor(props: IProps) {
super(props);
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 6bc1f70ba1..f32b8ed0a9 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -37,6 +37,7 @@ import EditorStateTransfer from '../../utils/EditorStateTransfer';
import {haveTileForEvent} from "../views/rooms/EventTile";
import {UIFeature} from "../../settings/UIFeature";
import {objectHasDiff} from "../../utils/objects";
+import {replaceableComponent} from "../../utils/replaceableComponent";
const PAGINATE_SIZE = 20;
const INITIAL_SIZE = 20;
@@ -55,6 +56,7 @@ if (DEBUG) {
*
* Also responsible for handling and sending read receipts.
*/
+@replaceableComponent("structures.TimelinePanel")
class TimelinePanel extends React.Component {
static propTypes = {
// The js-sdk EventTimelineSet object for the timeline sequence we are
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index 513cca82c3..1fd3e3419f 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -17,12 +17,14 @@ limitations under the License.
import * as React from "react";
import ToastStore, {IToast} from "../../stores/ToastStore";
import classNames from "classnames";
+import {replaceableComponent} from "../../utils/replaceableComponent";
interface IState {
toasts: IToast[];
countSeen: number;
}
+@replaceableComponent("structures.ToastContainer")
export default class ToastContainer extends React.Component<{}, IState> {
constructor(props, context) {
super(props, context);
diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js
deleted file mode 100644
index 16cc4cb987..0000000000
--- a/src/components/structures/UploadBar.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import ContentMessages from '../../ContentMessages';
-import dis from "../../dispatcher/dispatcher";
-import filesize from "filesize";
-import { _t } from '../../languageHandler';
-
-export default class UploadBar extends React.Component {
- static propTypes = {
- room: PropTypes.object,
- };
-
- componentDidMount() {
- this.dispatcherRef = dis.register(this.onAction);
- this.mounted = true;
- }
-
- componentWillUnmount() {
- this.mounted = false;
- dis.unregister(this.dispatcherRef);
- }
-
- onAction = payload => {
- switch (payload.action) {
- case 'upload_progress':
- case 'upload_finished':
- case 'upload_canceled':
- case 'upload_failed':
- if (this.mounted) this.forceUpdate();
- break;
- }
- };
-
- render() {
- const uploads = ContentMessages.sharedInstance().getCurrentUploads();
-
- // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length
- // check in RoomView
- //
- // uploads = [{
- // roomId: this.props.room.roomId,
- // loaded: 123493,
- // total: 347534,
- // fileName: "testing_fooble.jpg",
- // }];
-
- if (uploads.length == 0) {
- return ;
- }
-
- let upload;
- for (let i = 0; i < uploads.length; ++i) {
- if (uploads[i].roomId == this.props.room.roomId) {
- upload = uploads[i];
- break;
- }
- }
- if (!upload) {
- return ;
- }
-
- const innerProgressStyle = {
- width: ((upload.loaded / (upload.total || 1)) * 100) + '%',
- };
- let uploadedSize = filesize(upload.loaded);
- const totalSize = filesize(upload.total);
- if (uploadedSize.replace(/^.* /, '') === totalSize.replace(/^.* /, '')) {
- uploadedSize = uploadedSize.replace(/ .*/, '');
- }
-
- // MUST use var name 'count' for pluralization to kick in
- const uploadText = _t(
- "Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)},
- );
-
- return (
- {
+ private dispatcherRef: string;
+ private mounted: boolean;
+
+ constructor(props) {
+ super(props);
+ this.state = {uploadsHere: []};
+ }
+
+ componentDidMount() {
+ this.dispatcherRef = dis.register(this.onAction);
+ this.mounted = true;
+ }
+
+ componentWillUnmount() {
+ this.mounted = false;
+ dis.unregister(this.dispatcherRef);
+ }
+
+ private onAction = (payload: ActionPayload) => {
+ switch (payload.action) {
+ case Action.UploadStarted:
+ case Action.UploadProgress:
+ case Action.UploadFinished:
+ case Action.UploadCanceled:
+ case Action.UploadFailed: {
+ if (!this.mounted) return;
+ const uploads = ContentMessages.sharedInstance().getCurrentUploads();
+ const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
+ this.setState({currentUpload: uploadsHere[0], uploadsHere});
+ break;
+ }
+ }
+ };
+
+ private onCancelClick = (ev) => {
+ ev.preventDefault();
+ ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise);
+ };
+
+ render() {
+ if (!this.state.currentUpload) {
+ return null;
+ }
+
+ // MUST use var name 'count' for pluralization to kick in
+ const uploadText = _t(
+ "Uploading %(filename)s and %(count)s others", {
+ filename: this.state.currentUpload.fileName,
+ count: this.state.uploadsHere.length - 1,
+ },
+ );
+
+ const uploadSize = filesize(this.state.currentUpload.total);
+ return (
+ {
private dispatcherRef: string;
private themeWatcherRef: string;
diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.js
index 8e21771bb9..dc05193ece 100644
--- a/src/components/structures/UserView.js
+++ b/src/components/structures/UserView.js
@@ -23,7 +23,9 @@ import * as sdk from "../../index";
import Modal from '../../Modal';
import { _t } from '../../languageHandler';
import HomePage from "./HomePage";
+import {replaceableComponent} from "../../utils/replaceableComponent";
+@replaceableComponent("structures.UserView")
export default class UserView extends React.Component {
static get propTypes() {
return {
diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index 0b969784e5..be9be4db81 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -16,34 +16,176 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
-import PropTypes from 'prop-types';
-import SyntaxHighlight from '../views/elements/SyntaxHighlight';
-import {_t} from "../../languageHandler";
+import React from "react";
+import PropTypes from "prop-types";
+import SyntaxHighlight from "../views/elements/SyntaxHighlight";
+import { _t } from "../../languageHandler";
import * as sdk from "../../index";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { SendCustomEvent } from "../views/dialogs/DevtoolsDialog";
+import { canEditContent } from "../../utils/EventUtils";
+import { MatrixClientPeg } from '../../MatrixClientPeg';
+import { replaceableComponent } from "../../utils/replaceableComponent";
-
+@replaceableComponent("structures.ViewSource")
export default class ViewSource extends React.Component {
static propTypes = {
- content: PropTypes.object.isRequired,
onFinished: PropTypes.func.isRequired,
- roomId: PropTypes.string.isRequired,
- eventId: PropTypes.string.isRequired,
+ mxEvent: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu
};
- render() {
- const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
- return (
-
-
- ![]({require("../../../res/img/fileicon.png")})
- ![]({require("../../../res/img/cancel.svg")})
-
- );
- }
-}
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
new file mode 100644
index 0000000000..4a1fd4313d
--- /dev/null
+++ b/src/components/structures/UploadBar.tsx
@@ -0,0 +1,102 @@
+/*
+Copyright 2015, 2016, 2019, 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { Room } from "matrix-js-sdk/src/models/room";
+import ContentMessages from '../../ContentMessages';
+import dis from "../../dispatcher/dispatcher";
+import filesize from "filesize";
+import { _t } from '../../languageHandler';
+import { ActionPayload } from "../../dispatcher/payloads";
+import { Action } from "../../dispatcher/actions";
+import ProgressBar from "../views/elements/ProgressBar";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import { IUpload } from "../../models/IUpload";
+import {replaceableComponent} from "../../utils/replaceableComponent";
+
+interface IProps {
+ room: Room;
+}
+
+interface IState {
+ currentUpload?: IUpload;
+ uploadsHere: IUpload[];
+}
+
+@replaceableComponent("structures.UploadBar")
+export default class UploadBar extends React.Component
-
-
-
-
-
- { uploadedSize } / { totalSize }
-
- { uploadText }
-
+
+ );
+ }
+}
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index b31a5f4b8e..0543cc4d07 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -56,6 +56,7 @@ import HostSignupAction from "./HostSignupAction";
import { IHostSignupConfig } from "../views/dialogs/HostSignupDialogTypes";
import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
import RoomName from "../views/elements/RoomName";
+import {replaceableComponent} from "../../utils/replaceableComponent";
interface IProps {
isMinimized: boolean;
@@ -69,6 +70,7 @@ interface IState {
selectedSpace?: Room;
}
+@replaceableComponent("structures.UserMenu")
export default class UserMenu extends React.Component{uploadText} ({uploadSize})
+ Room ID: { this.props.roomId }
- Event ID: { this.props.eventId }
-
+ constructor(props) {
+ super(props);
-
-
- { JSON.stringify(this.props.content, null, 2) }
-
+ this.state = {
+ isEditing: false,
+ };
+ }
+
+ onBack() {
+ // TODO: refresh the "Event ID:" modal header
+ this.setState({ isEditing: false });
+ }
+
+ onEdit() {
+ this.setState({ isEditing: true });
+ }
+
+ // returns the dialog body for viewing the event source
+ viewSourceContent() {
+ const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+ const isEncrypted = mxEvent.isEncrypted();
+ const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private
+ const originalEventSource = mxEvent.event;
+
+ if (isEncrypted) {
+ return (
+ <>
+ {JSON.stringify(originalEventSource, null, 2)}
+
+ );
+ }
+ }
+
+ // returns the id of the initial message, not the id of the previous edit
+ getBaseEventId() {
+ const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+ const isEncrypted = mxEvent.isEncrypted();
+ const baseMxEvent = this.props.mxEvent;
+
+ if (isEncrypted) {
+ // `relates_to` field is inside the encrypted event
+ return mxEvent.event.content["m.relates_to"]?.event_id ?? baseMxEvent.getId();
+ } else {
+ return mxEvent.getContent()["m.relates_to"]?.event_id ?? baseMxEvent.getId();
+ }
+ }
+
+ // returns the SendCustomEvent component prefilled with the correct details
+ editSourceContent() {
+ const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+
+ const isStateEvent = mxEvent.isState();
+ const roomId = mxEvent.getRoomId();
+ const originalContent = mxEvent.getContent();
+
+ if (isStateEvent) {
+ return (
+
+ {(cli) => (
+ this.onBack()}
+ inputs={{
+ eventType: mxEvent.getType(),
+ evContent: JSON.stringify(originalContent, null, "\t"),
+ stateKey: mxEvent.getStateKey(),
+ }}
+ />
+ )}
+
+ );
+ } else {
+ // prefill an edit-message event
+ // keep only the `body` and `msgtype` fields of originalContent
+ const bodyToStartFrom = originalContent["m.new_content"]?.body ?? originalContent.body; // prefill the last edit body, to start editing from there
+ const newContent = {
+ "body": ` * ${bodyToStartFrom}`,
+ "msgtype": originalContent.msgtype,
+ "m.new_content": {
+ body: bodyToStartFrom,
+ msgtype: originalContent.msgtype,
+ },
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: this.getBaseEventId(),
+ },
+ };
+ return (
+
+ {(cli) => (
+ this.onBack()}
+ inputs={{
+ eventType: mxEvent.getType(),
+ evContent: JSON.stringify(newContent, null, "\t"),
+ }}
+ />
+ )}
+
+ );
+ }
+ }
+
+ canSendStateEvent(mxEvent) {
+ const cli = MatrixClientPeg.get();
+ const room = cli.getRoom(mxEvent.getRoomId());
+ return room.currentState.mayClientSendStateEvent(mxEvent.getType(), cli);
+ }
+
+ render() {
+ const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+ const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
+
+ const isEditing = this.state.isEditing;
+ const roomId = mxEvent.getRoomId();
+ const eventId = mxEvent.getId();
+ const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent);
+ return (
+
+
);
}
diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js
index c73691611d..49fcf20415 100644
--- a/src/components/structures/auth/CompleteSecurity.js
+++ b/src/components/structures/auth/CompleteSecurity.js
@@ -20,13 +20,16 @@ import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
import {
SetupEncryptionStore,
+ PHASE_LOADING,
PHASE_INTRO,
PHASE_BUSY,
PHASE_DONE,
PHASE_CONFIRM_SKIP,
} from '../../../stores/SetupEncryptionStore';
import SetupEncryptionBody from "./SetupEncryptionBody";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("structures.auth.CompleteSecurity")
export default class CompleteSecurity extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
@@ -58,7 +61,9 @@ export default class CompleteSecurity extends React.Component {
let icon;
let title;
- if (phase === PHASE_INTRO) {
+ if (phase === PHASE_LOADING) {
+ return null;
+ } else if (phase === PHASE_INTRO) {
icon = ;
title = _t("Verify this login");
} else if (phase === PHASE_DONE) {
diff --git a/src/components/structures/auth/E2eSetup.js b/src/components/structures/auth/E2eSetup.js
index d97a972718..4e51ae828c 100644
--- a/src/components/structures/auth/E2eSetup.js
+++ b/src/components/structures/auth/E2eSetup.js
@@ -19,7 +19,9 @@ import PropTypes from 'prop-types';
import AuthPage from '../../views/auth/AuthPage';
import CompleteSecurityBody from '../../views/auth/CompleteSecurityBody';
import CreateCrossSigningDialog from '../../views/dialogs/security/CreateCrossSigningDialog';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("structures.auth.E2eSetup")
export default class E2eSetup extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
index 5a39fe9fd9..31a5de0222 100644
--- a/src/components/structures/auth/ForgotPassword.js
+++ b/src/components/structures/auth/ForgotPassword.js
@@ -27,6 +27,7 @@ import classNames from 'classnames';
import AuthPage from "../../views/auth/AuthPage";
import CountlyAnalytics from "../../../CountlyAnalytics";
import ServerPicker from "../../views/elements/ServerPicker";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
// Phases
// Show the forgot password inputs
@@ -38,6 +39,7 @@ const PHASE_EMAIL_SENT = 3;
// User has clicked the link in email and completed reset
const PHASE_DONE = 4;
+@replaceableComponent("structures.auth.ForgotPassword")
export default class ForgotPassword extends React.Component {
static propTypes = {
serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx
index 96fc39a437..3ab73fb9ac 100644
--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@@ -35,6 +35,7 @@ import InlineSpinner from "../../views/elements/InlineSpinner";
import Spinner from "../../views/elements/Spinner";
import SSOButtons from "../../views/elements/SSOButtons";
import ServerPicker from "../../views/elements/ServerPicker";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
// These are used in several places, and come from the js-sdk's autodiscovery
// stuff. We define them here so that they'll be picked up by i18n.
@@ -99,6 +100,7 @@ interface IState {
/*
* A wire component which glues together login UI components and Login logic
*/
+@replaceableComponent("structures.auth.LoginComponent")
export default class LoginComponent extends React.PureComponent {
private unmounted = false;
private loginLogic: Login;
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index f9d338902c..32bdddb82a 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -30,6 +30,7 @@ import Login, {ISSOFlow} from "../../../Login";
import dis from "../../../dispatcher/dispatcher";
import SSOButtons from "../../views/elements/SSOButtons";
import ServerPicker from '../../views/elements/ServerPicker';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps {
serverConfig: ValidatedServerConfig;
@@ -109,6 +110,7 @@ interface IState {
ssoFlow?: ISSOFlow;
}
+@replaceableComponent("structures.auth.Registration")
export default class Registration extends React.Component {
loginLogic: Login;
diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.js
index 3e7264dfec..e246b9cbd0 100644
--- a/src/components/structures/auth/SetupEncryptionBody.js
+++ b/src/components/structures/auth/SetupEncryptionBody.js
@@ -17,17 +17,20 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
-import SdkConfig from '../../../SdkConfig';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
+import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDialog';
import * as sdk from '../../../index';
import {
SetupEncryptionStore,
+ PHASE_LOADING,
PHASE_INTRO,
PHASE_BUSY,
PHASE_DONE,
PHASE_CONFIRM_SKIP,
PHASE_FINISHED,
} from '../../../stores/SetupEncryptionStore';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
function keyHasPassphrase(keyInfo) {
return (
@@ -37,6 +40,7 @@ function keyHasPassphrase(keyInfo) {
);
}
+@replaceableComponent("structures.auth.SetupEncryptionBody")
export default class SetupEncryptionBody extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
@@ -81,6 +85,22 @@ export default class SetupEncryptionBody extends React.Component {
store.usePassPhrase();
}
+ _onVerifyClick = () => {
+ const cli = MatrixClientPeg.get();
+ const userId = cli.getUserId();
+ const requestPromise = cli.requestVerification(userId);
+
+ this.props.onFinished(true);
+ Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
+ verificationRequestPromise: requestPromise,
+ member: cli.getUser(userId),
+ onFinished: async () => {
+ const request = await requestPromise;
+ request.cancel();
+ },
+ });
+ }
+
onSkipClick = () => {
const store = SetupEncryptionStore.sharedInstance();
store.skip();
@@ -132,32 +152,22 @@ export default class SetupEncryptionBody extends React.Component {
;
}
- const brand = SdkConfig.get().brand;
+ let verifyButton;
+ if (store.hasDevicesToVerifyAgainst) {
+ verifyButton =
+ { _t("Verify with another session") }
+ ;
+ }
return (
);
- } else if (phase === PHASE_BUSY) {
+ } else if (phase === PHASE_BUSY || phase === PHASE_LOADING) {
const Spinner = sdk.getComponent('views.elements.Spinner');
return
+ {JSON.stringify(decryptedEventSource, null, 2)}
+
+ + {_t("Decrypted event source")} +
+
+ {JSON.stringify(originalEventSource, null, 2)}
+
+
+ );
+ } else {
+ return (
+ <>
+ + {_t("Original event source")} +
+{_t("Original event source")}
+
+
+ {!isEditing && canEdit && (
+ Room ID: {roomId}
+ Event ID: {eventId}
+
+ {isEditing ? this.editSourceContent() : this.viewSourceContent()}
+
+
+ )}
{_t( - "Confirm your identity by verifying this login from one of your other sessions, " + - "granting it access to encrypted messages.", + "Verify this login to access your encrypted messages and " + + "prove to others that this login is really you.", )}
-{_t( - "This requires the latest %(brand)s on your other devices:", - { brand }, - )}
- -
-
-
- {_t("%(brand)s Web", { brand })}
- {_t("%(brand)s Desktop", { brand })}
-
-
- {_t("%(brand)s iOS", { brand })}
- {_t("%(brand)s Android", { brand })}
- {_t("or another cross-signing capable Matrix client")}
-
+ {verifyButton}
{useRecoveryKeyButton}
{_t("Skip")}
@@ -215,7 +225,7 @@ export default class SetupEncryptionBody extends React.Component {
diff --git a/src/components/views/auth/AuthFooter.js b/src/components/views/auth/AuthFooter.js
index 3de5a19350..f167e16283 100644
--- a/src/components/views/auth/AuthFooter.js
+++ b/src/components/views/auth/AuthFooter.js
@@ -18,7 +18,9 @@ limitations under the License.
import { _t } from '../../../languageHandler';
import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.auth.AuthFooter")
export default class AuthFooter extends React.Component {
render() {
return (
diff --git a/src/components/views/auth/AuthHeader.js b/src/components/views/auth/AuthHeader.js
index 57499e397c..323299b3a8 100644
--- a/src/components/views/auth/AuthHeader.js
+++ b/src/components/views/auth/AuthHeader.js
@@ -18,7 +18,9 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import * as sdk from '../../../index';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.auth.AuthHeader")
export default class AuthHeader extends React.Component {
static propTypes = {
disableLanguageSelector: PropTypes.bool,
diff --git a/src/components/views/auth/AuthHeaderLogo.js b/src/components/views/auth/AuthHeaderLogo.js
index 9edf149a83..b4e04799bb 100644
--- a/src/components/views/auth/AuthHeaderLogo.js
+++ b/src/components/views/auth/AuthHeaderLogo.js
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-'use strict';
-
import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.auth.AuthHeaderLogo")
export default class AuthHeaderLogo extends React.PureComponent {
render() {
return
diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.js
index e2d7d594fa..50de24d403 100644
--- a/src/components/views/auth/CaptchaForm.js
+++ b/src/components/views/auth/CaptchaForm.js
@@ -18,12 +18,14 @@ import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
import CountlyAnalytics from "../../../CountlyAnalytics";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
const DIV_ID = 'mx_recaptcha';
/**
* A pure UI component which displays a captcha form.
*/
+@replaceableComponent("views.auth.CaptchaForm")
export default class CaptchaForm extends React.Component {
static propTypes = {
sitePublicKey: PropTypes.string,
diff --git a/src/components/views/auth/CompleteSecurityBody.js b/src/components/views/auth/CompleteSecurityBody.js
index d757de9fe0..6647bb1200 100644
--- a/src/components/views/auth/CompleteSecurityBody.js
+++ b/src/components/views/auth/CompleteSecurityBody.js
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-'use strict';
-
import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.auth.CompleteSecurityBody")
export default class CompleteSecurityBody extends React.PureComponent {
render() {
return
diff --git a/src/components/views/auth/CountryDropdown.js b/src/components/views/auth/CountryDropdown.js
index 3296b574a4..e21f112865 100644
--- a/src/components/views/auth/CountryDropdown.js
+++ b/src/components/views/auth/CountryDropdown.js
@@ -22,6 +22,7 @@ import * as sdk from '../../../index';
import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
import SdkConfig from "../../../SdkConfig";
import { _t } from "../../../languageHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
const COUNTRIES_BY_ISO2 = {};
for (const c of COUNTRIES) {
@@ -40,6 +41,7 @@ function countryMatchesSearchQuery(query, country) {
return false;
}
+@replaceableComponent("views.auth.CountryDropdown")
export default class CountryDropdown extends React.Component {
constructor(props) {
super(props);
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index 7dc1976641..6cbecd22ee 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -26,6 +26,7 @@ import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from "../elements/AccessibleButton";
import Spinner from "../elements/Spinner";
import CountlyAnalytics from "../../../CountlyAnalytics";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
/* This file contains a collection of components which are used by the
* InteractiveAuth to prompt the user to enter the information needed
@@ -75,6 +76,7 @@ import CountlyAnalytics from "../../../CountlyAnalytics";
export const DEFAULT_PHASE = 0;
+@replaceableComponent("views.auth.PasswordAuthEntry")
export class PasswordAuthEntry extends React.Component {
static LOGIN_TYPE = "m.login.password";
@@ -173,6 +175,7 @@ export class PasswordAuthEntry extends React.Component {
}
}
+@replaceableComponent("views.auth.RecaptchaAuthEntry")
export class RecaptchaAuthEntry extends React.Component {
static LOGIN_TYPE = "m.login.recaptcha";
@@ -235,6 +238,7 @@ export class RecaptchaAuthEntry extends React.Component {
}
}
+@replaceableComponent("views.auth.TermsAuthEntry")
export class TermsAuthEntry extends React.Component {
static LOGIN_TYPE = "m.login.terms";
@@ -385,6 +389,7 @@ export class TermsAuthEntry extends React.Component {
}
}
+@replaceableComponent("views.auth.EmailIdentityAuthEntry")
export class EmailIdentityAuthEntry extends React.Component {
static LOGIN_TYPE = "m.login.email.identity";
@@ -432,6 +437,7 @@ export class EmailIdentityAuthEntry extends React.Component {
}
}
+@replaceableComponent("views.auth.MsisdnAuthEntry")
export class MsisdnAuthEntry extends React.Component {
static LOGIN_TYPE = "m.login.msisdn";
@@ -578,6 +584,7 @@ export class MsisdnAuthEntry extends React.Component {
}
}
+@replaceableComponent("views.auth.SSOAuthEntry")
export class SSOAuthEntry extends React.Component {
static propTypes = {
matrixClient: PropTypes.object.isRequired,
@@ -708,6 +715,7 @@ export class SSOAuthEntry extends React.Component {
}
}
+@replaceableComponent("views.auth.FallbackAuthEntry")
export class FallbackAuthEntry extends React.Component {
static propTypes = {
matrixClient: PropTypes.object.isRequired,
diff --git a/src/components/views/auth/PassphraseField.tsx b/src/components/views/auth/PassphraseField.tsx
index e240ad61ca..274c244b2a 100644
--- a/src/components/views/auth/PassphraseField.tsx
+++ b/src/components/views/auth/PassphraseField.tsx
@@ -22,6 +22,7 @@ import SdkConfig from "../../../SdkConfig";
import withValidation, {IFieldState, IValidationResult} from "../elements/Validation";
import {_t, _td} from "../../../languageHandler";
import Field, {IInputProps} from "../elements/Field";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps extends Omit {
autoFocus?: boolean;
@@ -40,6 +41,7 @@ interface IProps extends Omit {
onValidate(result: IValidationResult);
}
+@replaceableComponent("views.auth.PassphraseField")
class PassphraseField extends PureComponent {
static defaultProps = {
label: _td("Password"),
diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx
index b2a3d62f55..2a42804a61 100644
--- a/src/components/views/auth/PasswordLogin.tsx
+++ b/src/components/views/auth/PasswordLogin.tsx
@@ -26,6 +26,7 @@ import withValidation from "../elements/Validation";
import * as Email from "../../../email";
import Field from "../elements/Field";
import CountryDropdown from "./CountryDropdown";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
// For validating phone numbers without country codes
const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -66,6 +67,7 @@ enum LoginField {
* A pure UI component which displays a username/password form.
* The email/username/phone fields are fully-controlled, the password field is not.
*/
+@replaceableComponent("views.auth.PasswordLogin")
export default class PasswordLogin extends React.PureComponent {
static defaultProps = {
onUsernameChanged: function() {},
diff --git a/src/components/views/auth/RegistrationForm.tsx b/src/components/views/auth/RegistrationForm.tsx
index e42ed88f99..85e0933be9 100644
--- a/src/components/views/auth/RegistrationForm.tsx
+++ b/src/components/views/auth/RegistrationForm.tsx
@@ -30,6 +30,7 @@ import PassphraseField from "./PassphraseField";
import CountlyAnalytics from "../../../CountlyAnalytics";
import Field from '../elements/Field';
import RegistrationEmailPromptDialog from '../dialogs/RegistrationEmailPromptDialog';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
enum RegistrationField {
Email = "field_email",
@@ -80,6 +81,7 @@ interface IState {
/*
* A pure UI component which displays a registration form.
*/
+@replaceableComponent("views.auth.RegistrationForm")
export default class RegistrationForm extends React.PureComponent {
static defaultProps = {
onValidationChange: console.error,
diff --git a/src/components/views/auth/Welcome.js b/src/components/views/auth/Welcome.js
index 0205f4e0b9..fca66fcf9b 100644
--- a/src/components/views/auth/Welcome.js
+++ b/src/components/views/auth/Welcome.js
@@ -24,10 +24,12 @@ import {_td} from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
import {UIFeature} from "../../../settings/UIFeature";
import CountlyAnalytics from "../../../CountlyAnalytics";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
// translatable strings for Welcome pages
_td("Sign in with SSO");
+@replaceableComponent("views.auth.Welcome")
export default class Welcome extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index 799a559263..e623439174 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -25,6 +25,7 @@ import AccessibleButton from '../elements/AccessibleButton';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
import {toPx} from "../../../utils/units";
+import {ResizeMethod} from "../../../Avatar";
interface IProps {
name: string; // The name (first initial used as default)
@@ -35,7 +36,7 @@ interface IProps {
width?: number;
height?: number;
// XXX: resizeMethod not actually used.
- resizeMethod?: string;
+ resizeMethod?: ResizeMethod;
defaultToInitialLetter?: boolean; // true to add default url
onClick?: React.MouseEventHandler;
inputRef?: React.RefObject;
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index d7e012467b..e95022687a 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -30,6 +30,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
import {_t} from "../../../languageHandler";
import TextWithTooltip from "../elements/TextWithTooltip";
import DMRoomMap from "../../../utils/DMRoomMap";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps {
room: Room;
@@ -68,6 +69,7 @@ function tooltipText(variant: Icon) {
}
}
+@replaceableComponent("views.avatars.DecoratedRoomAvatar")
export default class DecoratedRoomAvatar extends React.PureComponent {
private _dmUser: User;
private isUnmounted = false;
diff --git a/src/components/views/avatars/GroupAvatar.tsx b/src/components/views/avatars/GroupAvatar.tsx
index 51327605c0..3734ba9504 100644
--- a/src/components/views/avatars/GroupAvatar.tsx
+++ b/src/components/views/avatars/GroupAvatar.tsx
@@ -1,5 +1,5 @@
/*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017, 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,8 +15,10 @@ limitations under the License.
*/
import React from 'react';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
import BaseAvatar from './BaseAvatar';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
+import {ResizeMethod} from "../../../Avatar";
export interface IProps {
groupId?: string;
@@ -24,10 +26,11 @@ export interface IProps {
groupAvatarUrl?: string;
width?: number;
height?: number;
- resizeMethod?: string;
+ resizeMethod?: ResizeMethod;
onClick?: React.MouseEventHandler;
}
+@replaceableComponent("views.avatars.GroupAvatar")
export default class GroupAvatar extends React.Component {
public static defaultProps = {
width: 36,
@@ -36,8 +39,8 @@ export default class GroupAvatar extends React.Component {
};
getGroupAvatarUrl() {
- return MatrixClientPeg.get().mxcUrlToHttp(
- this.props.groupAvatarUrl,
+ if (!this.props.groupAvatarUrl) return null;
+ return mediaFromMxc(this.props.groupAvatarUrl).getThumbnailOfSourceHttp(
this.props.width,
this.props.height,
this.props.resizeMethod,
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 60b043016b..c79cbc0d32 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -20,15 +20,17 @@ import {RoomMember} from "matrix-js-sdk/src/models/room-member";
import dis from "../../../dispatcher/dispatcher";
import {Action} from "../../../dispatcher/actions";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
import BaseAvatar from "./BaseAvatar";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
+import {ResizeMethod} from "../../../Avatar";
interface IProps extends Omit, "name" | "idName" | "url"> {
member: RoomMember;
fallbackUserId?: string;
width: number;
height: number;
- resizeMethod?: string;
+ resizeMethod?: ResizeMethod;
// The onClick to give the avatar
onClick?: React.MouseEventHandler;
// Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
@@ -42,6 +44,7 @@ interface IState {
imageUrl?: string;
}
+@replaceableComponent("views.avatars.MemberAvatar")
export default class MemberAvatar extends React.Component {
public static defaultProps = {
width: 40,
@@ -61,18 +64,19 @@ export default class MemberAvatar extends React.Component {
}
private static getState(props: IProps): IState {
- if (props.member && props.member.name) {
- return {
- name: props.member.name,
- title: props.title || props.member.userId,
- imageUrl: props.member.getAvatarUrl(
- MatrixClientPeg.get().getHomeserverUrl(),
+ if (props.member?.name) {
+ let imageUrl = null;
+ if (props.member.getMxcAvatarUrl()) {
+ imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
Math.floor(props.width * window.devicePixelRatio),
Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod,
- false,
- false,
- ),
+ );
+ }
+ return {
+ name: props.member.name,
+ title: props.title || props.member.userId,
+ imageUrl: imageUrl,
};
} else if (props.fallbackUserId) {
return {
diff --git a/src/components/views/avatars/MemberStatusMessageAvatar.js b/src/components/views/avatars/MemberStatusMessageAvatar.js
index d5d927106c..acf190f17f 100644
--- a/src/components/views/avatars/MemberStatusMessageAvatar.js
+++ b/src/components/views/avatars/MemberStatusMessageAvatar.js
@@ -23,7 +23,9 @@ import classNames from 'classnames';
import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
import SettingsStore from "../../../settings/SettingsStore";
import {ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.avatars.MemberStatusMessageAvatar")
export default class MemberStatusMessageAvatar extends React.Component {
static propTypes = {
member: PropTypes.object.isRequired,
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index 952b9d4cb6..31245b44b7 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -15,7 +15,6 @@ limitations under the License.
*/
import React, {ComponentProps} from 'react';
import Room from 'matrix-js-sdk/src/models/room';
-import {getHttpUriForMxc} from 'matrix-js-sdk/src/content-repo';
import BaseAvatar from './BaseAvatar';
import ImageView from '../elements/ImageView';
@@ -23,6 +22,8 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import * as Avatar from '../../../Avatar';
import {ResizeMethod} from "../../../Avatar";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
interface IProps extends Omit, "name" | "idName" | "url" | "onClick"> {
// Room may be left unset here, but if it is,
@@ -42,6 +43,7 @@ interface IState {
urls: string[];
}
+@replaceableComponent("views.avatars.RoomAvatar")
export default class RoomAvatar extends React.Component {
public static defaultProps = {
width: 36,
@@ -88,16 +90,16 @@ export default class RoomAvatar extends React.Component {
};
private static getImageUrls(props: IProps): string[] {
- return [
- getHttpUriForMxc(
- MatrixClientPeg.get().getHomeserverUrl(),
- // Default props don't play nicely with getDerivedStateFromProps
- //props.oobData !== undefined ? props.oobData.avatarUrl : {},
- props.oobData.avatarUrl,
+ let oobAvatar = null;
+ if (props.oobData.avatarUrl) {
+ oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
Math.floor(props.width * window.devicePixelRatio),
Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod,
- ), // highest priority
+ );
+ }
+ return [
+ oobAvatar, // highest priority
RoomAvatar.getRoomAvatarUrl(props),
].filter(function(url) {
return (url !== null && url !== "");
diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx
index 04cfce7670..cca158269e 100644
--- a/src/components/views/avatars/WidgetAvatar.tsx
+++ b/src/components/views/avatars/WidgetAvatar.tsx
@@ -14,21 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, {ComponentProps, useContext} from 'react';
+import React, {ComponentProps} from 'react';
import classNames from 'classnames';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {IApp} from "../../../stores/WidgetStore";
import BaseAvatar, {BaseAvatarType} from "./BaseAvatar";
+import {mediaFromMxc} from "../../../customisations/Media";
interface IProps extends Omit, "name" | "url" | "urls"> {
app: IApp;
}
const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 20, ...props }) => {
- const cli = useContext(MatrixClientContext);
-
let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
// heuristics for some better icons until Widgets support their own icons
if (app.type.includes("jitsi")) {
@@ -47,7 +44,7 @@ const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 2
name={app.id}
className={classNames("mx_WidgetAvatar", className)}
// MSC2765
- url={app.avatar_url ? getHttpUriForMxc(cli.getHomeserverUrl(), app.avatar_url, 20, 20, "crop") : undefined}
+ url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : undefined}
urls={iconUrls}
width={width}
height={height}
diff --git a/src/components/views/context_menus/CallContextMenu.tsx b/src/components/views/context_menus/CallContextMenu.tsx
index 3557976326..97473059a6 100644
--- a/src/components/views/context_menus/CallContextMenu.tsx
+++ b/src/components/views/context_menus/CallContextMenu.tsx
@@ -22,11 +22,13 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import CallHandler from '../../../CallHandler';
import InviteDialog, { KIND_CALL_TRANSFER } from '../dialogs/InviteDialog';
import Modal from '../../../Modal';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps extends IContextMenuProps {
call: MatrixCall;
}
+@replaceableComponent("views.context_menus.CallContextMenu")
export default class CallContextMenu extends React.Component {
static propTypes = {
// js-sdk User object. Not required because it might not exist.
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
index e3aed0179b..17abce0c61 100644
--- a/src/components/views/context_menus/DialpadContextMenu.tsx
+++ b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -19,6 +19,7 @@ import { _t } from '../../../languageHandler';
import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import Dialpad from '../voip/DialPad';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps extends IContextMenuProps {
call: MatrixCall;
@@ -28,6 +29,7 @@ interface IState {
value: string;
}
+@replaceableComponent("views.context_menus.DialpadContextMenu")
export default class DialpadContextMenu extends React.Component {
constructor(props) {
super(props);
diff --git a/src/components/views/context_menus/GenericElementContextMenu.js b/src/components/views/context_menus/GenericElementContextMenu.js
index cea684b663..e04e3f7695 100644
--- a/src/components/views/context_menus/GenericElementContextMenu.js
+++ b/src/components/views/context_menus/GenericElementContextMenu.js
@@ -16,6 +16,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
/*
* This component can be used to display generic HTML content in a contextual
@@ -23,6 +24,7 @@ import PropTypes from 'prop-types';
*/
+@replaceableComponent("views.context_menus.GenericElementContextMenu")
export default class GenericElementContextMenu extends React.Component {
static propTypes = {
element: PropTypes.element.isRequired,
diff --git a/src/components/views/context_menus/GenericTextContextMenu.js b/src/components/views/context_menus/GenericTextContextMenu.js
index 068f83be5f..3d3add006f 100644
--- a/src/components/views/context_menus/GenericTextContextMenu.js
+++ b/src/components/views/context_menus/GenericTextContextMenu.js
@@ -16,7 +16,9 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.context_menus.GenericTextContextMenu")
export default class GenericTextContextMenu extends React.Component {
static propTypes = {
message: PropTypes.string.isRequired,
diff --git a/src/components/views/context_menus/GroupInviteTileContextMenu.js b/src/components/views/context_menus/GroupInviteTileContextMenu.js
index 27ef76452f..11a9d90ac2 100644
--- a/src/components/views/context_menus/GroupInviteTileContextMenu.js
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@@ -23,7 +23,9 @@ import Modal from '../../../Modal';
import {Group} from 'matrix-js-sdk';
import GroupStore from "../../../stores/GroupStore";
import {MenuItem} from "../../structures/ContextMenu";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.context_menus.GroupInviteTileContextMenu")
export default class GroupInviteTileContextMenu extends React.Component {
static propTypes = {
group: PropTypes.instanceOf(Group).isRequired,
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 6b871e4f24..daabf224dc 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -32,11 +32,13 @@ import { isUrlPermitted } from '../../../HtmlUtils';
import { isContentActionable } from '../../../utils/EventUtils';
import {MenuItem} from "../../structures/ContextMenu";
import {EventType} from "matrix-js-sdk/src/@types/event";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
function canCancel(eventStatus) {
return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
}
+@replaceableComponent("views.context_menus.MessageContextMenu")
export default class MessageContextMenu extends React.Component {
static propTypes = {
/* the MatrixEvent associated with the context menu */
@@ -124,24 +126,9 @@ export default class MessageContextMenu extends React.Component {
};
onViewSourceClick = () => {
- const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
const ViewSource = sdk.getComponent('structures.ViewSource');
Modal.createTrackedDialog('View Event Source', '', ViewSource, {
- roomId: ev.getRoomId(),
- eventId: ev.getId(),
- content: ev.event,
- }, 'mx_Dialog_viewsource');
- this.closeMenu();
- };
-
- onViewClearSourceClick = () => {
- const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
- const ViewSource = sdk.getComponent('structures.ViewSource');
- Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
- roomId: ev.getRoomId(),
- eventId: ev.getId(),
- // FIXME: _clearEvent is private
- content: ev._clearEvent,
+ mxEvent: this.props.mxEvent,
}, 'mx_Dialog_viewsource');
this.closeMenu();
};
@@ -309,7 +296,6 @@ export default class MessageContextMenu extends React.Component {
let cancelButton;
let forwardButton;
let pinButton;
- let viewClearSourceButton;
let unhidePreviewButton;
let externalURLButton;
let quoteButton;
@@ -389,14 +375,6 @@ export default class MessageContextMenu extends React.Component {
);
- if (mxEvent.getType() !== mxEvent.getWireType()) {
- viewClearSourceButton = (
-
- );
- }
-
if (this.props.eventTileOps) {
if (this.props.eventTileOps.isWidgetHidden()) {
unhidePreviewButton = (
@@ -481,7 +459,6 @@ export default class MessageContextMenu extends React.Component {
{ forwardButton }
{ pinButton }
{ viewSourceButton }
- { viewClearSourceButton }
{ unhidePreviewButton }
{ permalinkButton }
{ quoteButton }
diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.js
index 5e6f06dd5d..41f0e0ba61 100644
--- a/src/components/views/context_menus/StatusMessageContextMenu.js
+++ b/src/components/views/context_menus/StatusMessageContextMenu.js
@@ -20,7 +20,9 @@ import { _t } from '../../../languageHandler';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import * as sdk from '../../../index';
import AccessibleButton from '../elements/AccessibleButton';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.context_menus.StatusMessageContextMenu")
export default class StatusMessageContextMenu extends React.Component {
static propTypes = {
// js-sdk User object. Not required because it might not exist.
diff --git a/src/components/views/context_menus/TagTileContextMenu.js b/src/components/views/context_menus/TagTileContextMenu.js
index 8d690483a8..8dea62690c 100644
--- a/src/components/views/context_menus/TagTileContextMenu.js
+++ b/src/components/views/context_menus/TagTileContextMenu.js
@@ -22,7 +22,9 @@ import dis from '../../../dispatcher/dispatcher';
import TagOrderActions from '../../../actions/TagOrderActions';
import {MenuItem} from "../../structures/ContextMenu";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.context_menus.TagTileContextMenu")
export default class TagTileContextMenu extends React.Component {
static propTypes = {
tag: PropTypes.string.isRequired,
diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx
index c1af86eae6..623fe04f2f 100644
--- a/src/components/views/context_menus/WidgetContextMenu.tsx
+++ b/src/components/views/context_menus/WidgetContextMenu.tsx
@@ -28,9 +28,11 @@ import dis from "../../../dispatcher/dispatcher";
import SettingsStore from "../../../settings/SettingsStore";
import Modal from "../../../Modal";
import QuestionDialog from "../dialogs/QuestionDialog";
+import ErrorDialog from "../dialogs/ErrorDialog";
import {WidgetType} from "../../../widgets/WidgetType";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
interface IProps extends React.ComponentProps {
app: IApp;
@@ -54,6 +56,27 @@ const WidgetContextMenu: React.FC = ({
const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
const canModify = userWidget || WidgetUtils.canUserModifyWidgets(roomId);
+ let streamAudioStreamButton;
+ if (getConfigLivestreamUrl() && WidgetType.JITSI.matches(app.type)) {
+ const onStreamAudioClick = async () => {
+ try {
+ await startJitsiAudioLivestream(widgetMessaging, roomId);
+ } catch (err) {
+ console.error("Failed to start livestream", err);
+ // XXX: won't i18n well, but looks like widget api only support 'message'?
+ const message = err.message || _t("Unable to start audio streaming.");
+ Modal.createTrackedDialog('WidgetContext Menu', 'Livestream failed', ErrorDialog, {
+ title: _t('Failed to start livestream'),
+ description: message,
+ });
+ }
+ onFinished();
+ };
+ streamAudioStreamButton = = ({
return
+ { streamAudioStreamButton }
{ editButton }
{ revokeButton }
{ deleteButton }
@@ -175,4 +199,3 @@ const WidgetContextMenu: React.FC = ({
};
export default WidgetContextMenu;
-
diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index 2cd09874b2..929d688e47 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -33,6 +33,7 @@ import { abbreviateUrl } from '../../../utils/UrlUtils';
import {sleep} from "../../../utils/promise";
import {Key} from "../../../Keyboard";
import {Action} from "../../../dispatcher/actions";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
const TRUNCATE_QUERY_LIST = 40;
const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -43,7 +44,7 @@ const addressTypeName = {
'email': _td("email address"),
};
-
+@replaceableComponent("views.dialogs.AddressPickerDialog")
export default class AddressPickerDialog extends React.Component {
static propTypes = {
title: PropTypes.string.isRequired,
diff --git a/src/components/views/dialogs/AskInviteAnywayDialog.js b/src/components/views/dialogs/AskInviteAnywayDialog.js
index c69400977a..e6cd45ba6b 100644
--- a/src/components/views/dialogs/AskInviteAnywayDialog.js
+++ b/src/components/views/dialogs/AskInviteAnywayDialog.js
@@ -20,7 +20,9 @@ import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import SettingsStore from "../../../settings/SettingsStore";
import {SettingLevel} from "../../../settings/SettingLevel";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.AskInviteAnywayDialog")
export default class AskInviteAnywayDialog extends React.Component {
static propTypes = {
unknownProfileUsers: PropTypes.array.isRequired, // [ {userId, errorText}... ]
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index 9ba5368ee5..0858e53e50 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -26,6 +26,7 @@ import AccessibleButton from '../elements/AccessibleButton';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
/*
* Basic container for modal dialogs.
@@ -33,6 +34,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
* Includes a div for the title, and a keypress handler which cancels the
* dialog on escape.
*/
+@replaceableComponent("views.dialogs.BaseDialog")
export default class BaseDialog extends React.Component {
static propTypes = {
// onFinished callback to call when Escape is pressed
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index c4dd0a1430..8948c14c7c 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -25,7 +25,9 @@ import Modal from '../../../Modal';
import { _t } from '../../../languageHandler';
import sendBugReport, {downloadBugReport} from '../../../rageshake/submit-rageshake';
import AccessibleButton from "../elements/AccessibleButton";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.BugReportDialog")
export default class BugReportDialog extends React.Component {
constructor(props) {
super(props);
diff --git a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
index 1c8a4ad6f6..2635f95bb7 100644
--- a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
+++ b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
@@ -26,11 +26,12 @@ import SdkConfig from "../../../SdkConfig";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import InviteDialog from "./InviteDialog";
import BaseAvatar from "../avatars/BaseAvatar";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import {inviteMultipleToRoom, showAnyInviteErrors} from "../../../RoomInvite";
import StyledCheckbox from "../elements/StyledCheckbox";
import Modal from "../../../Modal";
import ErrorDialog from "./ErrorDialog";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
interface IProps extends IDialogProps {
roomId: string;
@@ -52,6 +53,7 @@ interface IState {
busy: boolean;
}
+@replaceableComponent("views.dialogs.CommunityPrototypeInviteDialog")
export default class CommunityPrototypeInviteDialog extends React.PureComponent {
constructor(props: IProps) {
super(props);
@@ -140,12 +142,14 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
private renderPerson(person: IPerson, key: any) {
const avatarSize = 36;
+ let avatarUrl = null;
+ if (person.user.getMxcAvatarUrl()) {
+ avatarUrl = mediaFromMxc(person.user.getMxcAvatarUrl()).getSquareThumbnailHttp(avatarSize);
+ }
return (
{
private avatarUploadRef: React.RefObject = React.createRef();
diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js
index 6636153c98..e6c7a67aca 100644
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -20,7 +20,9 @@ import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
import { _t } from '../../../languageHandler';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.CreateGroupDialog")
export default class CreateGroupDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 0771b0ec45..e9dc6e2be0 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -27,7 +27,9 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {Key} from "../../../Keyboard";
import {privateShouldBeEncrypted} from "../../../createRoom";
import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.CreateRoomDialog")
export default class CreateRoomDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index fca8c42546..4e52549d51 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -26,7 +26,9 @@ import { _t } from '../../../languageHandler';
import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
import StyledCheckbox from "../elements/StyledCheckbox";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.DeactivateAccountDialog")
export default class DeactivateAccountDialog extends React.Component {
constructor(props) {
super(props);
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 814378bb51..dfcc5d6dfb 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -38,6 +38,7 @@ import {SETTINGS} from "../../../settings/Settings";
import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
import Modal from "../../../Modal";
import ErrorDialog from "./ErrorDialog";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
class GenericEditor extends React.PureComponent {
// static propTypes = {onBack: PropTypes.func.isRequired};
@@ -73,13 +74,14 @@ class GenericEditor extends React.PureComponent {
}
}
-class SendCustomEvent extends GenericEditor {
+export class SendCustomEvent extends GenericEditor {
static getLabel() { return _t('Send Custom Event'); }
static propTypes = {
onBack: PropTypes.func.isRequired,
room: PropTypes.instanceOf(Room).isRequired,
forceStateEvent: PropTypes.bool,
+ forceGeneralEvent: PropTypes.bool,
inputs: PropTypes.object,
};
@@ -140,6 +142,8 @@ class SendCustomEvent extends GenericEditor {
;
}
+ const showTglFlip = !this.state.message && !this.props.forceStateEvent && !this.props.forceGeneralEvent;
+
return
@@ -155,7 +159,7 @@ class SendCustomEvent extends GenericEditor {
{ !this.state.message && }
- { !this.state.message && !this.props.forceStateEvent &&
+ { showTglFlip &&
}
@@ -1089,6 +1093,7 @@ const Entries = [
SettingsExplorer,
];
+@replaceableComponent("views.dialogs.DevtoolsDialog")
export default class DevtoolsDialog extends React.PureComponent {
static propTypes = {
roomId: PropTypes.string.isRequired,
diff --git a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
index 3071854b3e..ee3696b427 100644
--- a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
+++ b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
@@ -23,6 +23,8 @@ import AccessibleButton from "../elements/AccessibleButton";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
import FlairStore from "../../../stores/FlairStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
interface IProps extends IDialogProps {
communityId: string;
@@ -38,6 +40,7 @@ interface IState {
}
// XXX: This is a lot of duplication from the create dialog, just in a different shape
+@replaceableComponent("views.dialogs.EditCommunityPrototypeDialog")
export default class EditCommunityPrototypeDialog extends React.PureComponent {
private avatarUploadRef: React.RefObject = React.createRef();
@@ -116,7 +119,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent
;
} else {
preview =
diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js
index 3bfa635adf..5197c68b5a 100644
--- a/src/components/views/dialogs/ErrorDialog.js
+++ b/src/components/views/dialogs/ErrorDialog.js
@@ -29,7 +29,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.ErrorDialog")
export default class ErrorDialog extends React.Component {
static propTypes = {
title: PropTypes.string,
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
index 45a03b7cf0..c8bc907136 100644
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ b/src/components/views/dialogs/HostSignupDialog.tsx
@@ -31,6 +31,7 @@ import {
IPostmessageResponseData,
PostmessageAction,
} from "./HostSignupDialogTypes";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
const HOST_SIGNUP_KEY = "host_signup";
@@ -42,6 +43,7 @@ interface IState {
minimized: boolean;
}
+@replaceableComponent("views.dialogs.HostSignupDialog")
export default class HostSignupDialog extends React.PureComponent {
private iframeRef: React.RefObject = React.createRef();
private readonly config: IHostSignupConfig;
diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js
index 2a4ff9cec3..f18b7a9d0c 100644
--- a/src/components/views/dialogs/IncomingSasDialog.js
+++ b/src/components/views/dialogs/IncomingSasDialog.js
@@ -19,6 +19,8 @@ import PropTypes from 'prop-types';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
const PHASE_START = 0;
const PHASE_SHOW_SAS = 1;
@@ -26,6 +28,7 @@ const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
const PHASE_VERIFIED = 3;
const PHASE_CANCELLED = 4;
+@replaceableComponent("views.dialogs.IncomingSasDialog")
export default class IncomingSasDialog extends React.Component {
static propTypes = {
verifier: PropTypes.object.isRequired,
@@ -121,22 +124,21 @@ export default class IncomingSasDialog extends React.Component {
const Spinner = sdk.getComponent("views.elements.Spinner");
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
- const isSelf = this.props.verifier.userId == MatrixClientPeg.get().getUserId();
+ const isSelf = this.props.verifier.userId === MatrixClientPeg.get().getUserId();
let profile;
- if (this.state.opponentProfile) {
+ const oppProfile = this.state.opponentProfile;
+ if (oppProfile) {
+ const url = oppProfile.avatar_url
+ ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(Math.floor(48 * window.devicePixelRatio))
+ : null;
profile =
-
;
} else if (this.state.opponentProfileError) {
profile = {this.state.opponentProfile.displayname}
+{oppProfile.displayname}
diff --git a/src/components/views/dialogs/InfoDialog.js b/src/components/views/dialogs/InfoDialog.js
index 6dc9fc01b0..8207d334d3 100644
--- a/src/components/views/dialogs/InfoDialog.js
+++ b/src/components/views/dialogs/InfoDialog.js
@@ -27,7 +27,7 @@ export default class InfoDialog extends React.Component {
className: PropTypes.string,
title: PropTypes.string,
description: PropTypes.node,
- button: PropTypes.oneOfType(PropTypes.string, PropTypes.bool),
+ button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
onFinished: PropTypes.func,
hasCloseButton: PropTypes.bool,
onKeyDown: PropTypes.func,
diff --git a/src/components/views/dialogs/IntegrationsDisabledDialog.js b/src/components/views/dialogs/IntegrationsDisabledDialog.js
index 7c996fbeab..0e9878f4bc 100644
--- a/src/components/views/dialogs/IntegrationsDisabledDialog.js
+++ b/src/components/views/dialogs/IntegrationsDisabledDialog.js
@@ -20,7 +20,9 @@ import {_t} from "../../../languageHandler";
import * as sdk from "../../../index";
import dis from '../../../dispatcher/dispatcher';
import {Action} from "../../../dispatcher/actions";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.IntegrationsDisabledDialog")
export default class IntegrationsDisabledDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/IntegrationsImpossibleDialog.js b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
index 68bedc711d..9bc9d02ba6 100644
--- a/src/components/views/dialogs/IntegrationsImpossibleDialog.js
+++ b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
@@ -19,7 +19,9 @@ import PropTypes from 'prop-types';
import {_t} from "../../../languageHandler";
import SdkConfig from "../../../SdkConfig";
import * as sdk from "../../../index";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.IntegrationsImpossibleDialog")
export default class IntegrationsImpossibleDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js
index 22291225ad..28a9bf673a 100644
--- a/src/components/views/dialogs/InteractiveAuthDialog.js
+++ b/src/components/views/dialogs/InteractiveAuthDialog.js
@@ -25,7 +25,9 @@ import { _t } from '../../../languageHandler';
import AccessibleButton from '../elements/AccessibleButton';
import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.InteractiveAuthDialog")
export default class InteractiveAuthDialog extends React.Component {
static propTypes = {
// matrix client to use for UI auth requests
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 9bc5b6476f..9aef421d5a 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -22,7 +22,6 @@ import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Pe
import DMRoomMap from "../../../utils/DMRoomMap";
import {RoomMember} from "matrix-js-sdk/src/models/room-member";
import SdkConfig from "../../../SdkConfig";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import * as Email from "../../../email";
import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
import {abbreviateUrl} from "../../../utils/UrlUtils";
@@ -42,13 +41,14 @@ import {UIFeature} from "../../../settings/UIFeature";
import CountlyAnalytics from "../../../CountlyAnalytics";
import {Room} from "matrix-js-sdk/src/models/room";
import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
/* eslint-disable camelcase */
export const KIND_DM = "dm";
export const KIND_INVITE = "invite";
-export const KIND_SPACE_INVITE = "space_invite";
export const KIND_CALL_TRANSFER = "call_transfer";
const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
@@ -160,9 +160,9 @@ class DMUserTile extends React.PureComponent {
width={avatarSize} height={avatarSize} />
: {
src={require("../../../../res/img/icon-email-pill-avatar.svg")}
width={avatarSize} height={avatarSize} />
: {
static defaultProps = {
kind: KIND_DM,
@@ -349,8 +350,8 @@ export default class InviteDialog extends React.PureComponent {
private readonly widget: Widget;
private readonly possibleButtons: ModalButtonID[];
diff --git a/src/components/views/dialogs/NewSessionReviewDialog.js b/src/components/views/dialogs/NewSessionReviewDialog.js
index e17501da40..5172f29405 100644
--- a/src/components/views/dialogs/NewSessionReviewDialog.js
+++ b/src/components/views/dialogs/NewSessionReviewDialog.js
@@ -66,6 +66,10 @@ export default class NewSessionReviewDialog extends React.PureComponent {
Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
verificationRequestPromise: requestPromise,
member: cli.getUser(userId),
+ onFinished: async () => {
+ const request = await requestPromise;
+ request.cancel();
+ },
});
}
diff --git a/src/components/views/dialogs/ReportEventDialog.js b/src/components/views/dialogs/ReportEventDialog.js
index f5509dec4d..67ed0f8f53 100644
--- a/src/components/views/dialogs/ReportEventDialog.js
+++ b/src/components/views/dialogs/ReportEventDialog.js
@@ -22,10 +22,12 @@ import {MatrixEvent} from "matrix-js-sdk";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import SdkConfig from '../../../SdkConfig';
import Markdown from '../../../Markdown';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
/*
* A dialog for reporting an event.
*/
+@replaceableComponent("views.dialogs.ReportEventDialog")
export default class ReportEventDialog extends PureComponent {
static propTypes = {
mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js
index 9d9313f08f..9c2f23ef22 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.js
+++ b/src/components/views/dialogs/RoomSettingsDialog.js
@@ -30,6 +30,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
import dis from "../../../dispatcher/dispatcher";
import SettingsStore from "../../../settings/SettingsStore";
import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
@@ -38,6 +39,7 @@ export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
+@replaceableComponent("views.dialogs.RoomSettingsDialog")
export default class RoomSettingsDialog extends React.Component {
static propTypes = {
roomId: PropTypes.string.isRequired,
@@ -116,7 +118,7 @@ export default class RoomSettingsDialog extends React.Component {
return (
-
+
{
public componentDidMount() {
EchoStore.instance.on(UPDATE_EVENT, this.onEchosUpdated);
diff --git a/src/components/views/dialogs/ServerPickerDialog.tsx b/src/components/views/dialogs/ServerPickerDialog.tsx
index 7ca115760e..4abc0a88b1 100644
--- a/src/components/views/dialogs/ServerPickerDialog.tsx
+++ b/src/components/views/dialogs/ServerPickerDialog.tsx
@@ -26,6 +26,7 @@ import Field from "../elements/Field";
import StyledRadioButton from "../elements/StyledRadioButton";
import TextWithTooltip from "../elements/TextWithTooltip";
import withValidation, {IFieldState} from "../elements/Validation";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps {
title?: string;
@@ -38,6 +39,7 @@ interface IState {
otherHomeserver: string;
}
+@replaceableComponent("views.dialogs.ServerPickerDialog")
export default class ServerPickerDialog extends React.PureComponent {
private readonly defaultServer: ValidatedServerConfig;
private readonly fieldRef = createRef();
diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js
index bae6b19fbe..50d7fbea09 100644
--- a/src/components/views/dialogs/SessionRestoreErrorDialog.js
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js
@@ -22,8 +22,9 @@ import * as sdk from '../../../index';
import SdkConfig from '../../../SdkConfig';
import Modal from '../../../Modal';
import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
-
+@replaceableComponent("views.dialogs.SessionRestoreErrorDialog")
export default class SessionRestoreErrorDialog extends React.Component {
static propTypes = {
error: PropTypes.string.isRequired,
diff --git a/src/components/views/dialogs/SetEmailDialog.js b/src/components/views/dialogs/SetEmailDialog.js
index 6514d94dc9..0f8f410a6a 100644
--- a/src/components/views/dialogs/SetEmailDialog.js
+++ b/src/components/views/dialogs/SetEmailDialog.js
@@ -22,6 +22,7 @@ import * as Email from '../../../email';
import AddThreepid from '../../../AddThreepid';
import { _t } from '../../../languageHandler';
import Modal from '../../../Modal';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
/*
@@ -29,6 +30,7 @@ import Modal from '../../../Modal';
*
* On success, `onFinished(true)` is called.
*/
+@replaceableComponent("views.dialogs.SetEmailDialog")
export default class SetEmailDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index 5264031cc6..df1206a4f0 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -34,6 +34,7 @@ import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
import { IDialogProps } from "./IDialogProps";
import SettingsStore from "../../../settings/SettingsStore";
import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
const socials = [
{
@@ -73,6 +74,7 @@ interface IState {
permalinkCreator: RoomPermalinkCreator;
}
+@replaceableComponent("views.dialogs.ShareDialog")
export default class ShareDialog extends React.PureComponent {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/StorageEvictedDialog.js b/src/components/views/dialogs/StorageEvictedDialog.js
index a22f302807..15c5347644 100644
--- a/src/components/views/dialogs/StorageEvictedDialog.js
+++ b/src/components/views/dialogs/StorageEvictedDialog.js
@@ -20,7 +20,9 @@ import * as sdk from '../../../index';
import SdkConfig from '../../../SdkConfig';
import Modal from '../../../Modal';
import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.StorageEvictedDialog")
export default class StorageEvictedDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
index 9f5c9f6a11..07e29adcff 100644
--- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
+++ b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
@@ -22,7 +22,9 @@ import * as sdk from '../../../index';
import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
import classNames from 'classnames';
import * as ScalarMessaging from "../../../ScalarMessaging";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.TabbedIntegrationManagerDialog")
export default class TabbedIntegrationManagerDialog extends React.Component {
static propTypes = {
/**
diff --git a/src/components/views/dialogs/TermsDialog.js b/src/components/views/dialogs/TermsDialog.js
index 402605c545..72e6c3f3a0 100644
--- a/src/components/views/dialogs/TermsDialog.js
+++ b/src/components/views/dialogs/TermsDialog.js
@@ -21,6 +21,7 @@ import * as sdk from '../../../index';
import { _t, pickBestLanguage } from '../../../languageHandler';
import Matrix from 'matrix-js-sdk';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
class TermsCheckbox extends React.PureComponent {
static propTypes = {
@@ -41,6 +42,7 @@ class TermsCheckbox extends React.PureComponent {
}
}
+@replaceableComponent("views.dialogs.TermsDialog")
export default class TermsDialog extends React.PureComponent {
static propTypes = {
/**
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index 69cc4390be..97abd209c0 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -19,7 +19,9 @@ import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import Field from "../elements/Field";
import { _t, _td } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.TextInputDialog")
export default class TextInputDialog extends React.Component {
static propTypes = {
title: PropTypes.string,
diff --git a/src/components/views/dialogs/UploadConfirmDialog.js b/src/components/views/dialogs/UploadConfirmDialog.js
index e3521eb282..2ff16b9440 100644
--- a/src/components/views/dialogs/UploadConfirmDialog.js
+++ b/src/components/views/dialogs/UploadConfirmDialog.js
@@ -20,7 +20,9 @@ import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import filesize from "filesize";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.UploadConfirmDialog")
export default class UploadConfirmDialog extends React.Component {
static propTypes = {
file: PropTypes.object.isRequired,
diff --git a/src/components/views/dialogs/UploadFailureDialog.js b/src/components/views/dialogs/UploadFailureDialog.js
index 4be1656f66..d220d6c684 100644
--- a/src/components/views/dialogs/UploadFailureDialog.js
+++ b/src/components/views/dialogs/UploadFailureDialog.js
@@ -21,12 +21,14 @@ import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import ContentMessages from '../../../ContentMessages';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
/*
* Tells the user about files we know cannot be uploaded before we even try uploading
* them. This is named fairly generically but the only thing we check right now is
* the size of the file.
*/
+@replaceableComponent("views.dialogs.UploadFailureDialog")
export default class UploadFailureDialog extends React.Component {
static propTypes = {
badFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index 7164540aea..eb9eaeb5dd 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -33,6 +33,7 @@ import * as sdk from "../../../index";
import SdkConfig from "../../../SdkConfig";
import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
export const USER_GENERAL_TAB = "USER_GENERAL_TAB";
export const USER_APPEARANCE_TAB = "USER_APPEARANCE_TAB";
@@ -45,6 +46,7 @@ export const USER_LABS_TAB = "USER_LABS_TAB";
export const USER_MJOLNIR_TAB = "USER_MJOLNIR_TAB";
export const USER_HELP_TAB = "USER_HELP_TAB";
+@replaceableComponent("views.dialogs.UserSettingsDialog")
export default class UserSettingsDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
@@ -155,7 +157,7 @@ export default class UserSettingsDialog extends React.Component {
return (
-
+
{
private eventPermissionsMap = new Map();
diff --git a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
index c01d3d39b8..f45adf9738 100644
--- a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
+++ b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
@@ -21,7 +21,9 @@ import * as sdk from "../../../index";
import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
import {Widget} from "matrix-widget-api";
import {OIDCState, WidgetPermissionStore} from "../../../stores/widgets/WidgetPermissionStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.WidgetOpenIDPermissionsDialog")
export default class WidgetOpenIDPermissionsDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
index abc1586205..43fb25f152 100644
--- a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
+++ b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
@@ -18,7 +18,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import {_t} from "../../../../languageHandler";
import * as sdk from "../../../../index";
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
+@replaceableComponent("views.dialogs.security.ConfirmDestroyCrossSigningDialog")
export default class ConfirmDestroyCrossSigningDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/security/CreateCrossSigningDialog.js b/src/components/views/dialogs/security/CreateCrossSigningDialog.js
index be546d2616..fedcc02f89 100644
--- a/src/components/views/dialogs/security/CreateCrossSigningDialog.js
+++ b/src/components/views/dialogs/security/CreateCrossSigningDialog.js
@@ -25,12 +25,14 @@ import DialogButtons from '../../elements/DialogButtons';
import BaseDialog from '../BaseDialog';
import Spinner from '../../elements/Spinner';
import InteractiveAuthDialog from '../InteractiveAuthDialog';
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
/*
* Walks the user through the process of creating a cross-signing keys. In most
* cases, only a spinner is shown, but for more complex auth like SSO, the user
* may need to complete some steps to proceed.
*/
+@replaceableComponent("views.dialogs.security.CreateCrossSigningDialog")
export default class CreateCrossSigningDialog extends React.PureComponent {
static propTypes = {
accountPassword: PropTypes.string,
diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.js b/src/components/views/dialogs/security/SetupEncryptionDialog.js
index 9ce3144534..3c15ea9f1d 100644
--- a/src/components/views/dialogs/security/SetupEncryptionDialog.js
+++ b/src/components/views/dialogs/security/SetupEncryptionDialog.js
@@ -20,6 +20,7 @@ import SetupEncryptionBody from '../../../structures/auth/SetupEncryptionBody';
import BaseDialog from '../BaseDialog';
import { _t } from '../../../../languageHandler';
import { SetupEncryptionStore, PHASE_DONE } from '../../../../stores/SetupEncryptionStore';
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
function iconFromPhase(phase) {
if (phase === PHASE_DONE) {
@@ -29,6 +30,7 @@ function iconFromPhase(phase) {
}
}
+@replaceableComponent("views.dialogs.security.SetupEncryptionDialog")
export default class SetupEncryptionDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index b7c7b78e63..3bb264fb3e 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -20,6 +20,7 @@ import classNames from 'classnames';
import AccessibleButton from "./AccessibleButton";
import Tooltip from './Tooltip';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
interface ITooltipProps extends React.ComponentProps {
title: string;
@@ -33,6 +34,7 @@ interface IState {
hover: boolean;
}
+@replaceableComponent("views.elements.AccessibleTooltipButton")
export default class AccessibleTooltipButton extends React.PureComponent {
constructor(props: ITooltipProps) {
super(props);
diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index bec016bce0..1714891cb5 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@@ -20,7 +20,9 @@ import AccessibleButton from './AccessibleButton';
import dis from '../../../dispatcher/dispatcher';
import * as sdk from '../../../index';
import Analytics from '../../../Analytics';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.elements.ActionButton")
export default class ActionButton extends React.Component {
static propTypes = {
size: PropTypes.string,
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 2a71622bb8..33b2906870 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -20,7 +20,9 @@ import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import classNames from 'classnames';
import { UserAddressType } from '../../../UserAddress';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.elements.AddressSelector")
export default class AddressSelector extends React.Component {
static propTypes = {
onSelected: PropTypes.func.isRequired,
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index dc6c6b2914..df66d10a71 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -19,11 +19,12 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import * as sdk from "../../../index";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
import { _t } from '../../../languageHandler';
import { UserAddressType } from '../../../UserAddress.js';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
-
+@replaceableComponent("views.elements.AddressTile")
export default class AddressTile extends React.Component {
static propTypes = {
address: UserAddressType.isRequired,
@@ -46,9 +47,7 @@ export default class AddressTile extends React.Component {
const isMatrixAddress = ['mx-user-id', 'mx-room-id'].includes(address.addressType);
if (isMatrixAddress && address.avatarMxc) {
- imgUrls.push(MatrixClientPeg.get().mxcUrlToHttp(
- address.avatarMxc, 25, 25, 'crop',
- ));
+ imgUrls.push(mediaFromMxc(address.avatarMxc).getSquareThumbnailHttp(25));
} else if (address.addressType === 'email') {
imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
}
diff --git a/src/components/views/elements/AppPermission.js b/src/components/views/elements/AppPermission.js
index ec8bffc32f..65e40ef19a 100644
--- a/src/components/views/elements/AppPermission.js
+++ b/src/components/views/elements/AppPermission.js
@@ -24,7 +24,9 @@ import { _t } from '../../../languageHandler';
import SdkConfig from '../../../SdkConfig';
import WidgetUtils from "../../../utils/WidgetUtils";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.elements.AppPermission")
export default class AppPermission extends React.Component {
static propTypes = {
url: PropTypes.string.isRequired,
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 213351889f..e206fda797 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -38,7 +38,9 @@ import {ElementWidgetActions} from "../../../stores/widgets/ElementWidgetActions
import {MatrixCapabilities} from "matrix-widget-api";
import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
import WidgetAvatar from "../avatars/WidgetAvatar";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+@replaceableComponent("views.elements.AppTile")
export default class AppTile extends React.Component {
constructor(props) {
super(props);
@@ -325,9 +327,13 @@ export default class AppTile extends React.Component {
// Additional iframe feature pemissions
// (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
- const iframeFeatures = "microphone; camera; encrypted-media; autoplay; display-capture;";
+ const iframeFeatures = "microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write;";
const appTileBodyClass = 'mx_AppTileBody' + (this.props.miniMode ? '_mini ' : ' ');
+ const appTileBodyStyles = {};
+ if (this.props.pointerEvents) {
+ appTileBodyStyles['pointer-events'] = this.props.pointerEvents;
+ }
const loadingElement = (
@@ -338,7 +344,7 @@ export default class AppTile extends React.Component {
// only possible for room widgets, can assert this.props.room here
const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
appTileBody = (
-
+
+
{ loadingElement }
);
} else {
if (this.isMixedContent()) {
appTileBody = (
-
+
+
{ this.state.loading && loadingElement }