this.onRoomClicked(room, ev)}
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 72e52678b6..9ee16558d3 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -34,6 +34,7 @@ import {EnhancedMap} from "../../utils/maps";
import StyledCheckbox from "../views/elements/StyledCheckbox";
import AutoHideScrollbar from "./AutoHideScrollbar";
import BaseAvatar from "../views/avatars/BaseAvatar";
+import {mediaFromMxc} from "../../customisations/Media";
interface IProps {
space: Room;
@@ -158,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
@@ -265,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 =
diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index b762ad3fca..be9be4db81 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -16,65 +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 {replaceableComponent} from "../../utils/replaceableComponent";
-
+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,
- isEncrypted: PropTypes.bool.isRequired,
- decryptedContent: PropTypes.object,
+ mxEvent: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu
};
- render() {
- const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ constructor(props) {
+ super(props);
- let content;
- if (this.props.isEncrypted) {
- content = <>
-
- { JSON.stringify(this.props.content, null, 2) }
-
- ;
+ 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 (
-
-
-
- { JSON.stringify(this.props.decryptedContent, null, 2) }
-
-
- - {_t("Decrypted event source")} -
-
-
- { 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 (
+ <>
+ - {_t("Original event source")} -
-
+ {JSON.stringify(decryptedEventSource, null, 2)}
+
+ + {_t("Decrypted event source")} +
+
+ {JSON.stringify(originalEventSource, null, 2)}
+
+
+ );
} else {
- content = <>
- + {_t("Original event source")} +
+{_t("Original event source")}
- {_t("Original event source")}
+
-
+
);
}
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/GroupAvatar.tsx b/src/components/views/avatars/GroupAvatar.tsx
index a033257871..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,9 +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;
@@ -25,7 +26,7 @@ export interface IProps {
groupAvatarUrl?: string;
width?: number;
height?: number;
- resizeMethod?: string;
+ resizeMethod?: ResizeMethod;
onClick?: React.MouseEventHandler;
}
@@ -38,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 641046aa55..c79cbc0d32 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -20,16 +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`
@@ -63,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/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index 0a59f6e36a..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';
@@ -24,6 +23,7 @@ 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,
@@ -90,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/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index f97b429abc..daabf224dc 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -126,15 +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,
- isEncrypted: ev.isEncrypted(),
- // FIXME: _clearEvent is private
- decryptedContent: ev._clearEvent,
+ mxEvent: this.props.mxEvent,
}, 'mx_Dialog_viewsource');
this.closeMenu();
};
diff --git a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
index d1080566ac..2635f95bb7 100644
--- a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
+++ b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
@@ -26,12 +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;
@@ -142,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 (
Room ID: { this.props.roomId }
- Event ID: { this.props.eventId }
+
+
+ {!isEditing && canEdit && (
+ Room ID: {roomId}
+ Event ID: {eventId}
- { content }
+ {isEditing ? this.editSourceContent() : this.viewSourceContent()}
+
+
+ )}
@@ -156,7 +159,7 @@ class SendCustomEvent extends GenericEditor {
{ !this.state.message && }
- { !this.state.message && !this.props.forceStateEvent && 
;
}
const groupRoomName = this.state.groupRoom.displayname;
diff --git a/src/components/views/groups/GroupRoomTile.js b/src/components/views/groups/GroupRoomTile.js
index 8b25437f71..7edfc1a376 100644
--- a/src/components/views/groups/GroupRoomTile.js
+++ b/src/components/views/groups/GroupRoomTile.js
@@ -21,6 +21,7 @@ import dis from '../../../dispatcher/dispatcher';
import { GroupRoomType } from '../../../groups';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
@replaceableComponent("views.groups.GroupRoomTile")
class GroupRoomTile extends React.Component {
@@ -42,10 +43,9 @@ class GroupRoomTile extends React.Component {
render() {
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- const avatarUrl = this.context.mxcUrlToHttp(
- this.props.groupRoom.avatarUrl,
- 36, 36, 'crop',
- );
+ const avatarUrl = this.props.groupRoom.avatarUrl
+ ? mediaFromMxc(this.props.groupRoom.avatarUrl).getSquareThumbnailHttp(36)
+ : null;
const av = (
{ profile.shortDescription }
:
;
- const httpUrl = profile.avatarUrl ? this.context.mxcUrlToHttp(
- profile.avatarUrl, avatarHeight, avatarHeight, "crop") : null;
+ const httpUrl = profile.avatarUrl
+ ? mediaFromMxc(profile.avatarUrl).getSquareThumbnailHttp(avatarHeight)
+ : null;
let avatarElement = (
+ { showTglFlip &&
}
diff --git a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
index 504d563bd9..ee3696b427 100644
--- a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
+++ b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
@@ -24,6 +24,7 @@ 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;
@@ -118,7 +119,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent
;
} else {
preview =
diff --git a/src/components/views/dialogs/FeedbackDialog.js b/src/components/views/dialogs/FeedbackDialog.js
index cbe26af6cc..d80a935573 100644
--- a/src/components/views/dialogs/FeedbackDialog.js
+++ b/src/components/views/dialogs/FeedbackDialog.js
@@ -100,6 +100,20 @@ export default (props) => {
);
}
+ let bugReports = null;
+ if (SdkConfig.get().bug_report_endpoint_url) {
+ bugReports = (
+ {
},
})
}
-
{ countlyFeedbackSection }
}
diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js
index d65ec7563f..f18b7a9d0c 100644
--- a/src/components/views/dialogs/IncomingSasDialog.js
+++ b/src/components/views/dialogs/IncomingSasDialog.js
@@ -20,6 +20,7 @@ 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;
@@ -123,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 = {
+ _t("PRO TIP: If you start a bug, please submit
{
- _t("PRO TIP: If you start a bug, please submit
-
;
} else if (this.state.opponentProfileError) {
profile = {this.state.opponentProfile.displayname}
+{oppProfile.displayname}
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index b28cc1bf41..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";
@@ -43,6 +42,7 @@ 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 */
@@ -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} />
:
+ {_t(
+ "This usually only affects how the room is processed on the server. If you're " +
+ "having problems with your %(brand)s, please report a bug.", {brand},
+ )}
+
+ );
+ if (SdkConfig.get().bug_report_endpoint_url) {
+ bugReports = (
+
-
);
+ const httpUrl = mediaFromMxc(avatarUrl).getSquareThumbnailHttp(800);
+ avatarElement = + {_t( + "This usually only affects how the room is processed on the server. If you're " + + "having problems with your %(brand)s, please report a bug.", + { + brand, + }, + { + "a": (sub) => { + return {sub}; + }, + }, + )} +
+ ); + } + return (- {_t( - "This usually only affects how the room is processed on the server. If you're " + - "having problems with your %(brand)s, please report a bug.", - { - brand, - }, - { - "a": (sub) => { - return {sub}; - }, - }, - )} -
+ {bugReports}
{_t(
"You'll upgrade this room from ;
} else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) {
- const src = matrixClient.mxcUrlToHttp(idp.icon, 24, 24, "crop", true);
+ const src = mediaFromMxc(idp.icon).getSquareThumbnailHttp(24);
icon =
;
}
diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js
index 663acd6329..03d853babc 100644
--- a/src/components/views/elements/TagTile.js
+++ b/src/components/views/elements/TagTile.js
@@ -30,6 +30,7 @@ import GroupFilterOrderStore from '../../../stores/GroupFilterOrderStore';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import AccessibleButton from "./AccessibleButton";
import SettingsStore from "../../../settings/SettingsStore";
+import {mediaFromMxc} from "../../../customisations/Media";
import {replaceableComponent} from "../../../utils/replaceableComponent";
// A class for a child of GroupFilterPanel (possibly wrapped in a DNDTagTile) that represents
@@ -130,11 +131,11 @@ export default class TagTile extends React.Component {
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const profile = this.state.profile || {};
const name = profile.name || this.props.tag;
- const avatarHeight = 32;
+ const avatarSize = 32;
- const httpUrl = profile.avatarUrl ? this.context.mxcUrlToHttp(
- profile.avatarUrl, avatarHeight, avatarHeight, "crop",
- ) : null;
+ const httpUrl = profile.avatarUrl
+ ? mediaFromMxc(profile.avatarUrl).getSquareThumbnailHttp(avatarSize)
+ : null;
const isPrototype = SettingsStore.getValue("feature_communities_v2_prototypes");
const className = classNames({
@@ -180,8 +181,8 @@ export default class TagTile extends React.Component {
name={name}
idName={this.props.tag}
url={httpUrl}
- width={avatarHeight}
- height={avatarHeight}
+ width={avatarSize}
+ height={avatarSize}
/>
{contextButton}
{badgeElement}
diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index dc48c01acb..bc0bf966f9 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -27,6 +27,7 @@ import {ContextMenu, ContextMenuButton, toRightOf} from "../../structures/Contex
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
// XXX this class copies a lot from RoomTile.js
@replaceableComponent("views.groups.GroupInviteTile")
@@ -117,8 +118,9 @@ export default class GroupInviteTile extends React.Component {
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const groupName = this.props.group.name || this.props.group.groupId;
- const httpAvatarUrl = this.props.group.avatarUrl ?
- this.context.mxcUrlToHttp(this.props.group.avatarUrl, 24, 24) : null;
+ const httpAvatarUrl = this.props.group.avatarUrl
+ ? mediaFromMxc(this.props.group.avatarUrl).getSquareThumbnailHttp(24)
+ : null;
const av =
-
diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js
index c5002b3308..a298f7eb68 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.js
@@ -76,12 +76,7 @@ export default class EditHistoryMessage extends React.PureComponent {
_onViewSourceClick = () => {
const ViewSource = sdk.getComponent('structures.ViewSource');
Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, {
- roomId: this.props.mxEvent.getRoomId(),
- eventId: this.props.mxEvent.getId(),
- content: this.props.mxEvent.event,
- isEncrypted: this.props.mxEvent.isEncrypted(),
- // FIXME: _clearEvent is private
- decryptedContent: this.props.mxEvent._clearEvent,
+ mxEvent: this.props.mxEvent,
}, 'mx_Dialog_viewsource');
};
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 498e2db12a..0d5e449fc0 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -17,11 +17,11 @@
import React from 'react';
import MFileBody from './MFileBody';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
import { decryptFile } from '../../../utils/DecryptFile';
import { _t } from '../../../languageHandler';
import InlineSpinner from '../elements/InlineSpinner';
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromContent} from "../../../customisations/Media";
@replaceableComponent("views.messages.MAudioBody")
export default class MAudioBody extends React.Component {
@@ -41,11 +41,11 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
+ const media = mediaFromContent(this.props.mxEvent.getContent());
+ if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
- return MatrixClientPeg.get().mxcUrlToHttp(content.url);
+ return media.srcHttp;
}
}
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index e9893f99b6..8f464e08bd 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -1,6 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2015, 2016, 2018, 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.
@@ -18,52 +17,24 @@ limitations under the License.
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import filesize from 'filesize';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import {decryptFile} from '../../../utils/DecryptFile';
-import Tinter from '../../../Tinter';
-import request from 'browser-request';
import Modal from '../../../Modal';
import AccessibleButton from "../elements/AccessibleButton";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromContent} from "../../../customisations/Media";
+import ErrorDialog from "../dialogs/ErrorDialog";
+let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
-// A cached tinted copy of require("../../../../res/img/download.svg")
-let tintedDownloadImageURL;
-// Track a list of mounted MFileBody instances so that we can update
-// the require("../../../../res/img/download.svg") when the tint changes.
-let nextMountId = 0;
-const mounts = {};
-
-/**
- * Updates the tinted copy of require("../../../../res/img/download.svg") when the tint changes.
- */
-function updateTintedDownloadImage() {
- // Download the svg as an XML document.
- // We could cache the XML response here, but since the tint rarely changes
- // it's probably not worth it.
- // Also note that we can't use fetch here because fetch doesn't support
- // file URLs, which the download image will be if we're running from
- // the filesystem (like in an Electron wrapper).
- request({uri: require("../../../../res/img/download.svg")}, (err, response, body) => {
- if (err) return;
-
- const svg = new DOMParser().parseFromString(body, "image/svg+xml");
- // Apply the fixups to the XML.
- const fixups = Tinter.calcSvgFixups([{contentDocument: svg}]);
- Tinter.applySvgFixups(fixups);
- // Encoded the fixed up SVG as a data URL.
- const svgString = new XMLSerializer().serializeToString(svg);
- tintedDownloadImageURL = "data:image/svg+xml;base64," + window.btoa(svgString);
- // Notify each mounted MFileBody that the URL has changed.
- Object.keys(mounts).forEach(function(id) {
- mounts[id].tint();
- });
- });
+async function cacheDownloadIcon() {
+ if (downloadIconUrl) return; // cached already
+ const svg = await fetch(require("../../../../res/img/download.svg")).then(r => r.text());
+ downloadIconUrl = "data:image/svg+xml;base64," + window.btoa(svg);
}
-Tinter.registerTintable(updateTintedDownloadImage);
+// Cache the asset immediately
+cacheDownloadIcon();
// User supplied content can contain scripts, we have to be careful that
// we don't accidentally run those script within the same origin as the
@@ -106,6 +77,7 @@ function computedStyle(element) {
}
const style = window.getComputedStyle(element, null);
let cssText = style.cssText;
+ // noinspection EqualityComparisonWithCoercionJS
if (cssText == "") {
// Firefox doesn't implement ".cssText" for computed styles.
// https://bugzilla.mozilla.org/show_bug.cgi?id=137687
@@ -145,7 +117,6 @@ export default class MFileBody extends React.Component {
this._iframe = createRef();
this._dummyLink = createRef();
- this._downloadImage = createRef();
}
/**
@@ -178,16 +149,8 @@ export default class MFileBody extends React.Component {
}
_getContentUrl() {
- const content = this.props.mxEvent.getContent();
- return MatrixClientPeg.get().mxcUrlToHttp(content.url);
- }
-
- componentDidMount() {
- // Add this to the list of mounted components to receive notifications
- // when the tint changes.
- this.id = nextMountId++;
- mounts[this.id] = this;
- this.tint();
+ const media = mediaFromContent(this.props.mxEvent.getContent());
+ return media.srcHttp;
}
componentDidUpdate(prevProps, prevState) {
@@ -196,34 +159,12 @@ export default class MFileBody extends React.Component {
}
}
- componentWillUnmount() {
- // Remove this from the list of mounted components
- delete mounts[this.id];
- }
-
- tint = () => {
- // Update our tinted copy of require("../../../../res/img/download.svg")
- if (this._downloadImage.current) {
- this._downloadImage.current.src = tintedDownloadImageURL;
- }
- if (this._iframe.current) {
- // If the attachment is encrypted then the download image
- // will be inside the iframe so we wont be able to update
- // it directly.
- this._iframe.current.contentWindow.postMessage({
- imgSrc: tintedDownloadImageURL,
- style: computedStyle(this._dummyLink.current),
- }, "*");
- }
- };
-
render() {
const content = this.props.mxEvent.getContent();
const text = this.presentableTextForFile(content);
const isEncrypted = content.file !== undefined;
const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
const contentUrl = this._getContentUrl();
- const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const fileSize = content.info ? content.info.size : null;
const fileType = content.info ? content.info.mimetype : "application/octet-stream";
@@ -280,7 +221,8 @@ export default class MFileBody extends React.Component {
// When the iframe loads we tell it to render a download link
const onIframeLoad = (ev) => {
ev.target.contentWindow.postMessage({
- imgSrc: tintedDownloadImageURL,
+ imgSrc: downloadIconUrl,
+ imgStyle: null, // it handles this internally for us. Useful if a downstream changes the icon.
style: computedStyle(this._dummyLink.current),
blob: this.state.decryptedBlob,
// Set a download attribute for encrypted files so that the file
@@ -384,7 +326,7 @@ export default class MFileBody extends React.Component {
{placeholder}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 59c5b4e66b..3683818027 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -28,6 +28,7 @@ import SettingsStore from "../../../settings/SettingsStore";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import InlineSpinner from '../elements/InlineSpinner';
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromContent} from "../../../customisations/Media";
@replaceableComponent("views.messages.MImageBody")
export default class MImageBody extends React.Component {
@@ -70,7 +71,7 @@ export default class MImageBody extends React.Component {
this._image = createRef();
}
- // FIXME: factor this out and aplpy it to MVideoBody and MAudioBody too!
+ // FIXME: factor this out and apply it to MVideoBody and MAudioBody too!
onClientSync(syncState, prevState) {
if (this.unmounted) return;
// Consider the client reconnected if there is no error with syncing.
@@ -167,16 +168,16 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
+ const media = mediaFromContent(this.props.mxEvent.getContent());
+ if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
- return this.context.mxcUrlToHttp(content.url);
+ return media.srcHttp;
}
}
_getThumbUrl() {
- // FIXME: the dharma skin lets images grow as wide as you like, rather than capped to 800x600.
+ // FIXME: we let images grow as wide as you like, rather than capped to 800x600.
// So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
// thumbnail resolution will be unnecessarily reduced.
// custom timeline widths seems preferable.
@@ -185,21 +186,19 @@ export default class MImageBody extends React.Component {
const thumbHeight = Math.round(600 * pixelRatio);
const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
+ const media = mediaFromContent(content);
+
+ if (media.isEncrypted) {
// Don't use the thumbnail for clients wishing to autoplay gifs.
if (this.state.decryptedThumbnailUrl) {
return this.state.decryptedThumbnailUrl;
}
return this.state.decryptedUrl;
- } else if (content.info && content.info.mimetype === "image/svg+xml" && content.info.thumbnail_url) {
+ } else if (content.info && content.info.mimetype === "image/svg+xml" && media.hasThumbnail) {
// special case to return clientside sender-generated thumbnails for SVGs, if any,
// given we deliberately don't thumbnail them serverside to prevent
// billion lol attacks and similar
- return this.context.mxcUrlToHttp(
- content.info.thumbnail_url,
- thumbWidth,
- thumbHeight,
- );
+ return media.getThumbnailHttp(thumbWidth, thumbHeight, 'scale');
} else {
// we try to download the correct resolution
// for hi-res images (like retina screenshots).
@@ -218,7 +217,7 @@ export default class MImageBody extends React.Component {
pixelRatio === 1.0 ||
(!info || !info.w || !info.h || !info.size)
) {
- return this.context.mxcUrlToHttp(content.url, thumbWidth, thumbHeight);
+ return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
} else {
// we should only request thumbnails if the image is bigger than 800x600
// (or 1600x1200 on retina) otherwise the image in the timeline will just
@@ -233,24 +232,17 @@ export default class MImageBody extends React.Component {
info.w > thumbWidth ||
info.h > thumbHeight
);
- const isLargeFileSize = info.size > 1*1024*1024;
+ const isLargeFileSize = info.size > 1*1024*1024; // 1mb
if (isLargeFileSize && isLargerThanThumbnail) {
// image is too large physically and bytewise to clutter our timeline so
// we ask for a thumbnail, despite knowing that it will be max 800x600
// despite us being retina (as synapse doesn't do 1600x1200 thumbs yet).
- return this.context.mxcUrlToHttp(
- content.url,
- thumbWidth,
- thumbHeight,
- );
+ return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
} else {
// download the original image otherwise, so we can scale it client side
// to take pixelRatio into account.
- // ( no width/height means we want the original image)
- return this.context.mxcUrlToHttp(
- content.url,
- );
+ return media.srcHttp;
}
}
}
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 89985dee7d..89e661cb2f 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -17,12 +17,12 @@ limitations under the License.
import React from 'react';
import MFileBody from './MFileBody';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
import { decryptFile } from '../../../utils/DecryptFile';
import { _t } from '../../../languageHandler';
import SettingsStore from "../../../settings/SettingsStore";
import InlineSpinner from '../elements/InlineSpinner';
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromContent} from "../../../customisations/Media";
interface IProps {
/* the MatrixEvent to show */
@@ -76,11 +76,11 @@ export default class MVideoBody extends React.PureComponent {
}
private getContentUrl(): string|null {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
+ const media = mediaFromContent(this.props.mxEvent.getContent());
+ if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
- return MatrixClientPeg.get().mxcUrlToHttp(content.url);
+ return media.srcHttp;
}
}
@@ -91,10 +91,11 @@ export default class MVideoBody extends React.PureComponent {
private getThumbUrl(): string|null {
const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
+ const media = mediaFromContent(content);
+ if (media.isEncrypted) {
return this.state.decryptedThumbnailUrl;
- } else if (content.info && content.info.thumbnail_url) {
- return MatrixClientPeg.get().mxcUrlToHttp(content.info.thumbnail_url);
+ } else if (media.hasThumbnail) {
+ return media.thumbnailHttp;
} else {
return null;
}
diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.js
index ba860216f0..00aaf9bfda 100644
--- a/src/components/views/messages/RoomAvatarEvent.js
+++ b/src/components/views/messages/RoomAvatarEvent.js
@@ -24,6 +24,7 @@ import * as sdk from '../../../index';
import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton';
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
@replaceableComponent("views.messages.RoomAvatarEvent")
export default class RoomAvatarEvent extends React.Component {
@@ -35,7 +36,7 @@ export default class RoomAvatarEvent extends React.Component {
onAvatarClick = () => {
const cli = MatrixClientPeg.get();
const ev = this.props.mxEvent;
- const httpUrl = cli.mxcUrlToHttp(ev.getContent().url);
+ const httpUrl = mediaFromMxc(ev.getContent().url).srcHttp;
const room = cli.getRoom(this.props.mxEvent.getRoomId());
const text = _t('%(senderDisplayName)s changed the avatar for %(roomName)s', {
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 5fbfd03bd1..12a6a2a311 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -64,6 +64,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
import RoomAvatar from "../avatars/RoomAvatar";
import RoomName from "../elements/RoomName";
+import {mediaFromMxc} from "../../../customisations/Media";
interface IDevice {
deviceId: string;
@@ -1424,14 +1425,14 @@ const UserInfoHeader: React.FC<{
const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
if (!avatarUrl) return;
- const httpUrl = cli.mxcUrlToHttp(avatarUrl);
+ const httpUrl = mediaFromMxc(avatarUrl).srcHttp;
const params = {
src: httpUrl,
name: member.name,
};
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
- }, [cli, member]);
+ }, [member]);
const avatarElement = (
{
let networkIcon;
if (protocol.avatar_url) {
- const avatarUrl = getHttpUriForMxc(
- MatrixClientPeg.get().getHomeserverUrl(),
- protocol.avatar_url, 64, 64, "crop",
- );
+ const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64);
networkIcon = ;
}
interface IItemState {
@@ -299,7 +300,8 @@ export class SpaceItem extends React.PureComponent {
const isNarrow = this.props.isPanelCollapsed;
const collapsed = this.state.collapsed || forceCollapsed;
- const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId);
+ const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId)
+ .filter(s => !this.props.parents?.has(s.roomId));
const isActive = activeSpaces.includes(space);
const itemClasses = classNames({
"mx_SpaceItem": true,
@@ -312,11 +314,17 @@ export class SpaceItem extends React.PureComponent {
mx_SpaceButton_narrow: isNarrow,
});
const notificationState = SpaceStore.instance.getNotificationState(space.roomId);
- const childItems = childSpaces && !collapsed ?
diff --git a/src/components/views/room_settings/RoomProfileSettings.js b/src/components/views/room_settings/RoomProfileSettings.js
index 563368384b..3dbe2b2b7f 100644
--- a/src/components/views/room_settings/RoomProfileSettings.js
+++ b/src/components/views/room_settings/RoomProfileSettings.js
@@ -21,6 +21,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
import Field from "../elements/Field";
import * as sdk from "../../../index";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
// TODO: Merge with ProfileSettings?
@replaceableComponent("views.room_settings.RoomProfileSettings")
@@ -38,7 +39,7 @@ export default class RoomProfileSettings extends React.Component {
const avatarEvent = room.currentState.getStateEvents("m.room.avatar", "");
let avatarUrl = avatarEvent && avatarEvent.getContent() ? avatarEvent.getContent()["url"] : null;
- if (avatarUrl) avatarUrl = client.mxcUrlToHttp(avatarUrl, 96, 96, 'crop', false);
+ if (avatarUrl) avatarUrl = mediaFromMxc(avatarUrl).getSquareThumbnailHttp(96);
const topicEvent = room.currentState.getStateEvents("m.room.topic", "");
const topic = topicEvent && topicEvent.getContent() ? topicEvent.getContent()['topic'] : '';
@@ -112,7 +113,7 @@ export default class RoomProfileSettings extends React.Component {
if (this.state.avatarFile) {
const uri = await client.uploadContent(this.state.avatarFile);
await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {url: uri}, '');
- newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
+ newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
newState.originalAvatarUrl = newState.avatarUrl;
newState.avatarFile = null;
} else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 39c9f0bcf7..536abf57fc 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -26,6 +26,7 @@ import Modal from "../../../Modal";
import * as ImageUtils from "../../../ImageUtils";
import { _t } from "../../../languageHandler";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
@replaceableComponent("views.rooms.LinkPreviewWidget")
export default class LinkPreviewWidget extends React.Component {
@@ -83,7 +84,7 @@ export default class LinkPreviewWidget extends React.Component {
let src = p["og:image"];
if (src && src.startsWith("mxc://")) {
- src = MatrixClientPeg.get().mxcUrlToHttp(src);
+ src = mediaFromMxc(src).srcHttp;
}
const params = {
@@ -109,9 +110,11 @@ export default class LinkPreviewWidget extends React.Component {
if (!SettingsStore.getValue("showImages")) {
image = null; // Don't render a button to show the image, just hide it outright
}
- const imageMaxWidth = 100; const imageMaxHeight = 100;
+ const imageMaxWidth = 100;
+ const imageMaxHeight = 100;
if (image && image.startsWith("mxc://")) {
- image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
+ // We deliberately don't want a square here, so use the source HTTP thumbnail function
+ image = mediaFromMxc(image).getThumbnailOfSourceHttp(imageMaxWidth, imageMaxHeight, 'scale');
}
let thumbHeight = imageMaxHeight;
diff --git a/src/components/views/rooms/RoomDetailRow.js b/src/components/views/rooms/RoomDetailRow.js
index e7c259cd98..62960930f2 100644
--- a/src/components/views/rooms/RoomDetailRow.js
+++ b/src/components/views/rooms/RoomDetailRow.js
@@ -18,10 +18,9 @@ import * as sdk from '../../../index';
import React, {createRef} from 'react';
import { _t } from '../../../languageHandler';
import { linkifyElement } from '../../../HtmlUtils';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
import PropTypes from 'prop-types';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
export function getDisplayAliasForRoom(room) {
return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
@@ -100,13 +99,14 @@ export default class RoomDetailRow extends React.Component {
{ guestJoin }
) : ;
+ let avatarUrl = null;
+ if (room.avatarUrl) avatarUrl = mediaFromMxc(room.avatarUrl).getSquareThumbnailHttp(24);
+
return { name }
diff --git a/src/components/views/settings/BridgeTile.tsx b/src/components/views/settings/BridgeTile.tsx
index b33219ad4a..3565d1ba2e 100644
--- a/src/components/views/settings/BridgeTile.tsx
+++ b/src/components/views/settings/BridgeTile.tsx
@@ -16,9 +16,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import {_t} from "../../../languageHandler";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
import Pill from "../elements/Pill";
import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
import BaseAvatar from "../avatars/BaseAvatar";
@@ -27,6 +25,7 @@ import {MatrixEvent} from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { isUrlPermitted } from '../../../HtmlUtils';
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
interface IProps {
ev: MatrixEvent;
@@ -114,10 +113,7 @@ export default class BridgeTile extends React.PureComponent
@@ -383,12 +391,14 @@ interface ITreeLevelProps {
spaces: Room[];
activeSpaces: Room[];
isNested?: boolean;
+ parents: Set;
}
const SpaceTreeLevel: React.FC = ({
spaces,
activeSpaces,
isNested,
+ parents,
}) => {
return } Resolves to the server's response for chaining.
+ */
+ public downloadSource(): Promise {
+ return fetch(this.srcHttp);
+ }
+}
+
+/**
+ * Creates a media object from event content.
+ * @param {IMediaEventContent} content The event content.
+ * @returns {Media} The media object.
+ */
+export function mediaFromContent(content: IMediaEventContent): Media {
+ return new Media(prepEventContentAsMedia(content));
+}
+
+/**
+ * Creates a media object from an MXC URI.
+ * @param {string} mxc The MXC URI.
+ * @returns {Media} The media object.
+ */
+export function mediaFromMxc(mxc: string): Media {
+ return mediaFromContent({url: mxc});
+}
diff --git a/src/customisations/models/IMediaEventContent.ts b/src/customisations/models/IMediaEventContent.ts
new file mode 100644
index 0000000000..fb05d76a4d
--- /dev/null
+++ b/src/customisations/models/IMediaEventContent.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright 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.
+ */
+
+// TODO: These types should be elsewhere.
+
+export interface IEncryptedFile {
+ url: string;
+ mimetype?: string;
+ key: {
+ alg: string;
+ key_ops: string[]; // eslint-disable-line camelcase
+ kty: string;
+ k: string;
+ ext: boolean;
+ };
+ iv: string;
+ hashes: {[alg: string]: string};
+ v: string;
+}
+
+export interface IMediaEventContent {
+ url?: string; // required on unencrypted media
+ file?: IEncryptedFile; // required for *encrypted* media
+ info?: {
+ thumbnail_url?: string; // eslint-disable-line camelcase
+ thumbnail_file?: IEncryptedFile; // eslint-disable-line camelcase
+ };
+}
+
+export interface IPreparedMedia extends IMediaObject {
+ thumbnail?: IMediaObject;
+}
+
+export interface IMediaObject {
+ mxc: string;
+ file?: IEncryptedFile;
+}
+
+/**
+ * Parses an event content body into a prepared media object. This prepared media object
+ * can be used with other functions to manipulate the media.
+ * @param {IMediaEventContent} content Unredacted media event content. See interface.
+ * @returns {IPreparedMedia} A prepared media object.
+ * @throws Throws if the given content cannot be packaged into a prepared media object.
+ */
+export function prepEventContentAsMedia(content: IMediaEventContent): IPreparedMedia {
+ let thumbnail: IMediaObject = null;
+ if (content?.info?.thumbnail_url) {
+ thumbnail = {
+ mxc: content.info.thumbnail_url,
+ file: content.info.thumbnail_file,
+ };
+ } else if (content?.info?.thumbnail_file?.url) {
+ thumbnail = {
+ mxc: content.info.thumbnail_file.url,
+ file: content.info.thumbnail_file,
+ };
+ }
+
+ if (content?.url) {
+ return {
+ thumbnail,
+ mxc: content.url,
+ file: content.file,
+ };
+ } else if (content?.file?.url) {
+ return {
+ thumbnail,
+ mxc: content.file.url,
+ file: content.file,
+ };
+ }
+
+ throw new Error("Invalid file provided: cannot determine MXC URI. Has it been redacted?");
+}
diff --git a/src/editor/serialize.ts b/src/editor/serialize.ts
index c1f4da306b..d43cb4f38d 100644
--- a/src/editor/serialize.ts
+++ b/src/editor/serialize.ts
@@ -34,6 +34,10 @@ export function mdSerialize(model: EditorModel) {
case "at-room-pill":
return html + part.text;
case "room-pill":
+ // Here we use the resourceId for compatibility with non-rich text clients
+ // See https://github.com/vector-im/element-web/issues/16660
+ return html +
+ `[${part.resourceId.replace(/[[\\\]]/g, c => "\\" + c)}](${makeGenericPermalink(part.resourceId)})`;
case "user-pill":
return html +
`[${part.text.replace(/[[\\\]]/g, c => "\\" + c)}](${makeGenericPermalink(part.resourceId)})`;
@@ -97,6 +101,9 @@ export function textSerialize(model: EditorModel) {
case "at-room-pill":
return text + part.text;
case "room-pill":
+ // Here we use the resourceId for compatibility with non-rich text clients
+ // See https://github.com/vector-im/element-web/issues/16660
+ return text + `${part.resourceId}`;
case "user-pill":
return text + `${part.text}`;
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 63449eb99f..07d292a0e7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2150,10 +2150,10 @@
"Add comment": "Add comment",
"Comment": "Comment",
"There are two ways you can provide feedback and help us improve %(brand)s.": "There are two ways you can provide feedback and help us improve %(brand)s.",
+ "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.": "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.",
"Feedback": "Feedback",
"Report a bug": "Report a bug",
"Please view existing bugs on Github first. No match? Start a new one .": "Please view existing bugs on Github first. No match? Start a new one .",
- "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.": "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.",
"Send feedback": "Send feedback",
"Confirm abort of host creation": "Confirm abort of host creation",
"Are you sure you wish to abort creation of the host? The process cannot be continued.": "Are you sure you wish to abort creation of the host? The process cannot be continued.",
@@ -2269,8 +2269,9 @@
"Automatically invite users": "Automatically invite users",
"Upgrade private room": "Upgrade private room",
"Upgrade public room": "Upgrade public room",
- "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.",
+ "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.",
"This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.",
+ "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.",
"You'll upgrade this room from {
*/
public getHttpAvatarUrl(size = 0): string {
if (!this.avatarMxc) return null;
- const adjustedSize = size > 1 ? size : undefined; // don't let negatives or zero through
- // XXX: We use MatrixClientPeg here rather than this.matrixClient because otherwise we'll
- // race because our data stores aren't set up consistently enough that this will all be
- // initialised with a store before these getter methods are called.
- return MatrixClientPeg.get().mxcUrlToHttp(this.avatarMxc, adjustedSize, adjustedSize);
+ const media = mediaFromMxc(this.avatarMxc);
+ if (!size || size <= 0) {
+ return media.srcHttp;
+ } else {
+ return media.getSquareThumbnailHttp(size);
+ }
}
protected async onNotReady() {
diff --git a/src/usercontent/index.js b/src/usercontent/index.js
index 6ecd17dcd7..13f38cc31a 100644
--- a/src/usercontent/index.js
+++ b/src/usercontent/index.js
@@ -1,10 +1,8 @@
function remoteRender(event) {
const data = event.data;
- const img = document.createElement("img");
+ const img = document.createElement("span"); // we'll mask it as an image
img.id = "img";
- img.src = data.imgSrc;
- img.style = data.imgStyle;
const a = document.createElement("a");
a.id = "a";
@@ -16,6 +14,23 @@ function remoteRender(event) {
a.appendChild(img);
a.appendChild(document.createTextNode(data.textContent));
+ // Apply image style after so we can steal the anchor's colour.
+ // Style copied from a rendered version of mx_MFileBody_download_icon
+ img.style = (data.imgStyle || "" +
+ "width: 12px; height: 12px;" +
+ "-webkit-mask-size: 12px;" +
+ "mask-size: 12px;" +
+ "-webkit-mask-position: center;" +
+ "mask-position: center;" +
+ "-webkit-mask-repeat: no-repeat;" +
+ "mask-repeat: no-repeat;" +
+ "display: inline-block;") + "" +
+
+ // Always add these styles
+ `-webkit-mask-image: url('${data.imgSrc}');` +
+ `mask-image: url('${data.imgSrc}');` +
+ `background-color: ${a.style.color};`;
+
const body = document.body;
// Don't display scrollbars if the link takes more than one line to display.
body.style = "margin: 0px; overflow: hidden";
@@ -26,20 +41,8 @@ function remoteRender(event) {
}
}
-function remoteSetTint(event) {
- const data = event.data;
-
- const img = document.getElementById("img");
- img.src = data.imgSrc;
- img.style = data.imgStyle;
-
- const a = document.getElementById("a");
- a.style = data.style;
-}
-
window.onmessage = function(e) {
if (e.origin === window.location.origin) {
if (e.data.blob) remoteRender(e);
- else remoteSetTint(e);
}
};
diff --git a/src/utils/DecryptFile.js b/src/utils/DecryptFile.ts
similarity index 74%
rename from src/utils/DecryptFile.js
rename to src/utils/DecryptFile.ts
index d3625d614a..93cedbc707 100644
--- a/src/utils/DecryptFile.js
+++ b/src/utils/DecryptFile.ts
@@ -1,6 +1,5 @@
/*
-Copyright 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2016, 2018, 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.
@@ -17,8 +16,8 @@ limitations under the License.
// Pull in the encryption lib so that we can decrypt attachments.
import encrypt from 'browser-encrypt-attachment';
-// Grab the client so that we can turn mxc:// URLs into https:// URLS.
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import {mediaFromContent} from "../customisations/Media";
+import {IEncryptedFile} from "../customisations/models/IMediaEventContent";
// WARNING: We have to be very careful about what mime-types we allow into blobs,
// as for performance reasons these are now rendered via URL.createObjectURL()
@@ -54,48 +53,46 @@ import {MatrixClientPeg} from '../MatrixClientPeg';
// For the record, mime-types which must NEVER enter this list below include:
// text/html, text/xhtml, image/svg, image/svg+xml, image/pdf, and similar.
-const ALLOWED_BLOB_MIMETYPES = {
- 'image/jpeg': true,
- 'image/gif': true,
- 'image/png': true,
+const ALLOWED_BLOB_MIMETYPES = [
+ 'image/jpeg',
+ 'image/gif',
+ 'image/png',
- 'video/mp4': true,
- 'video/webm': true,
- 'video/ogg': true,
+ 'video/mp4',
+ 'video/webm',
+ 'video/ogg',
- 'audio/mp4': true,
- 'audio/webm': true,
- 'audio/aac': true,
- 'audio/mpeg': true,
- 'audio/ogg': true,
- 'audio/wave': true,
- 'audio/wav': true,
- 'audio/x-wav': true,
- 'audio/x-pn-wav': true,
- 'audio/flac': true,
- 'audio/x-flac': true,
-};
+ 'audio/mp4',
+ 'audio/webm',
+ 'audio/aac',
+ 'audio/mpeg',
+ 'audio/ogg',
+ 'audio/wave',
+ 'audio/wav',
+ 'audio/x-wav',
+ 'audio/x-pn-wav',
+ 'audio/flac',
+ 'audio/x-flac',
+];
/**
* Decrypt a file attached to a matrix event.
- * @param {Object} file The json taken from the matrix event.
+ * @param {IEncryptedFile} file The json taken from the matrix event.
* This passed to [link]{@link https://github.com/matrix-org/browser-encrypt-attachments}
* as the encryption info object, so will also have the those keys in addition to
* the keys below.
- * @param {string} file.url An mxc:// URL for the encrypted file.
- * @param {string} file.mimetype The MIME-type of the plaintext file.
- * @returns {Promise}
+ * @returns {Promise} Resolves to a Blob of the file.
*/
-export function decryptFile(file) {
- const url = MatrixClientPeg.get().mxcUrlToHttp(file.url);
+export function decryptFile(file: IEncryptedFile): Promise {
+ const media = mediaFromContent({file});
// Download the encrypted file as an array buffer.
- return Promise.resolve(fetch(url)).then(function(response) {
+ return media.downloadSource().then((response) => {
return response.arrayBuffer();
- }).then(function(responseData) {
+ }).then((responseData) => {
// Decrypt the array buffer using the information taken from
// the event content.
return encrypt.decryptAttachment(responseData, file);
- }).then(function(dataArray) {
+ }).then((dataArray) => {
// Turn the array into a Blob and give it the correct MIME-type.
// IMPORTANT: we must not allow scriptable mime-types into Blobs otherwise
@@ -103,11 +100,10 @@ export function decryptFile(file) {
// browser (e.g. by copying the URI into a new tab or window.)
// See warning at top of file.
let mimetype = file.mimetype ? file.mimetype.split(";")[0].trim() : '';
- if (!ALLOWED_BLOB_MIMETYPES[mimetype]) {
+ if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
mimetype = 'application/octet-stream';
}
- const blob = new Blob([dataArray], {type: mimetype});
- return blob;
+ return new Blob([dataArray], {type: mimetype});
});
}
diff --git a/test/components/structures/GroupView-test.js b/test/components/structures/GroupView-test.js
index fb942d2f7c..ee5d1b6912 100644
--- a/test/components/structures/GroupView-test.js
+++ b/test/components/structures/GroupView-test.js
@@ -262,7 +262,8 @@ describe('GroupView', function() {
expect(longDescElement.innerHTML).toContain('
-
{spaces.map(s => {
@@ -397,6 +407,7 @@ const SpaceTreeLevel: React.FC
- ');
expect(longDescElement.innerHTML).toContain('
- And lists! '); - const imgSrc = "https://my.home.server/_matrix/media/r0/thumbnail/someimageurl?width=800&height=600"; + const imgSrc = "https://my.home.server/_matrix/media/r0/thumbnail/someimageurl" + + "?width=800&height=600&method=scale"; expect(longDescElement.innerHTML).toContain('