{
{
}
break;
case 'logout':
+ dis.dispatch({action: "hangup_all"});
Lifecycle.logout();
break;
case 'require_registration':
@@ -606,12 +606,7 @@ export default class MatrixChat extends React.PureComponent {
if (payload.screenAfterLogin) {
this.screenAfterLogin = payload.screenAfterLogin;
}
- this.setStateForNewView({
- view: Views.LOGIN,
- });
- this.notifyNewScreen('login');
- ThemeController.isLogin = true;
- this.themeWatcher.recheck();
+ this.viewLogin();
break;
case 'start_password_recovery':
this.setStateForNewView({
@@ -975,6 +970,9 @@ export default class MatrixChat extends React.PureComponent {
}
private viewWelcome() {
+ if (shouldUseLoginForWelcome(SdkConfig.get())) {
+ return this.viewLogin();
+ }
this.setStateForNewView({
view: Views.WELCOME,
});
@@ -983,6 +981,16 @@ export default class MatrixChat extends React.PureComponent {
this.themeWatcher.recheck();
}
+ private viewLogin(otherState?: any) {
+ this.setStateForNewView({
+ view: Views.LOGIN,
+ ...otherState,
+ });
+ this.notifyNewScreen('login');
+ ThemeController.isLogin = true;
+ this.themeWatcher.recheck();
+ }
+
private viewHome(justRegistered = false) {
// The home page requires the "logged in" view, so we'll set that.
this.setStateForNewView({
@@ -1139,11 +1147,17 @@ export default class MatrixChat extends React.PureComponent {
}
private forgetRoom(roomId: string) {
+ const room = MatrixClientPeg.get().getRoom(roomId);
MatrixClientPeg.get().forget(roomId).then(() => {
// Switch to home page if we're currently viewing the forgotten room
if (this.state.currentRoomId === roomId) {
dis.dispatch({ action: "view_home_page" });
}
+
+ // We have to manually update the room list because the forgotten room will not
+ // be notified to us, therefore the room list will have no other way of knowing
+ // the room is forgotten.
+ RoomListStore.instance.manualRoomUpdate(room, RoomUpdateCause.RoomRemoved);
}).catch((err) => {
const errCode = err.errcode || _td("unknown error code");
Modal.createTrackedDialog("Failed to forget room", '', ErrorDialog, {
@@ -1298,17 +1312,13 @@ export default class MatrixChat extends React.PureComponent {
* Called when the session is logged out
*/
private onLoggedOut() {
- this.notifyNewScreen('login');
- this.setStateForNewView({
- view: Views.LOGIN,
+ this.viewLogin({
ready: false,
collapseLhs: false,
currentRoomId: null,
});
this.subTitleStatus = '';
this.setPageSubtitle();
- ThemeController.isLogin = true;
- this.themeWatcher.recheck();
}
/**
@@ -1648,7 +1658,7 @@ export default class MatrixChat extends React.PureComponent {
let cli = MatrixClientPeg.get();
if (!cli) {
const {hsUrl, isUrl} = this.props.serverConfig;
- cli = Matrix.createClient({
+ cli = createClient({
baseUrl: hsUrl,
idBaseUrl: isUrl,
});
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 439bdbcef5..63f23f22f3 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -23,7 +23,6 @@ import classNames from 'classnames';
import shouldHideEvent from '../../shouldHideEvent';
import {wantsDateSeparator} from '../../DateUtils';
import * as sdk from '../../index';
-import dis from "../../dispatcher/dispatcher";
import {MatrixClientPeg} from '../../MatrixClientPeg';
import SettingsStore from '../../settings/SettingsStore';
@@ -210,13 +209,11 @@ export default class MessagePanel extends React.Component {
componentDidMount() {
this._isMounted = true;
- this.dispatcherRef = dis.register(this.onAction);
}
componentWillUnmount() {
this._isMounted = false;
SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
- dis.unregister(this.dispatcherRef);
}
componentDidUpdate(prevProps, prevState) {
@@ -229,14 +226,6 @@ export default class MessagePanel extends React.Component {
}
}
- onAction = (payload) => {
- switch (payload.action) {
- case "scroll_to_bottom":
- this.scrollToBottom();
- break;
- }
- }
-
onShowTypingNotificationsChange = () => {
this.setState({
showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
@@ -1038,6 +1027,97 @@ class CreationGrouper {
}
}
+class RedactionGrouper {
+ static canStartGroup = function(panel, ev) {
+ return panel._shouldShowEvent(ev) && ev.isRedacted();
+ }
+
+ constructor(panel, ev, prevEvent, lastShownEvent) {
+ this.panel = panel;
+ this.readMarker = panel._readMarkerForEvent(
+ ev.getId(),
+ ev === lastShownEvent,
+ );
+ this.events = [ev];
+ this.prevEvent = prevEvent;
+ this.lastShownEvent = lastShownEvent;
+ }
+
+ shouldGroup(ev) {
+ if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+ return false;
+ }
+ return ev.isRedacted();
+ }
+
+ add(ev) {
+ this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+ ev.getId(),
+ ev === this.lastShownEvent,
+ );
+ this.events.push(ev);
+ }
+
+ getTiles() {
+ if (!this.events || !this.events.length) return [];
+
+ const DateSeparator = sdk.getComponent('messages.DateSeparator');
+ const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
+
+ const panel = this.panel;
+ const ret = [];
+ const lastShownEvent = this.lastShownEvent;
+
+ if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+ const ts = this.events[0].getTs();
+ ret.push(
+
+ { eventTiles }
+ ,
+ );
+
+ if (this.readMarker) {
+ ret.push(this.readMarker);
+ }
+
+ return ret;
+ }
+
+ getNewPrevEvent() {
+ return this.events[0];
+ }
+}
+
// Wrap consecutive member events in a ListSummary, ignore if redacted
class MemberGrouper {
static canStartGroup = function(panel, ev) {
@@ -1148,4 +1228,4 @@ class MemberGrouper {
}
// all the grouper classes that we use
-const groupers = [CreationGrouper, MemberGrouper];
+const groupers = [CreationGrouper, MemberGrouper, RedactionGrouper];
diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index 363c67262b..3613261da6 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -27,7 +27,6 @@ import { _t } from '../../languageHandler';
import SdkConfig from '../../SdkConfig';
import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
import Analytics from '../../Analytics';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import {ALL_ROOMS} from "../views/directory/NetworkDropdown";
import SettingsStore from "../../settings/SettingsStore";
import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
@@ -35,6 +34,7 @@ import GroupStore from "../../stores/GroupStore";
import FlairStore from "../../stores/FlairStore";
import CountlyAnalytics from "../../CountlyAnalytics";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../customisations/Media";
const MAX_NAME_LENGTH = 80;
const MAX_TOPIC_LENGTH = 800;
@@ -521,10 +521,9 @@ export default class RoomDirectory extends React.Component {
topic = `${topic.substring(0, MAX_TOPIC_LENGTH)}...`;
}
topic = linkifyAndSanitizeHtml(topic);
- const avatarUrl = getHttpUriForMxc(
- MatrixClientPeg.get().getHomeserverUrl(),
- room.avatar_url, 32, 32, "crop",
- );
+ let avatarUrl = null;
+ if (room.avatar_url) avatarUrl = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(32);
+
return [
- { leftPanel }
+ { SettingsStore.getValue("feature_spaces") ?
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 0272633e8f..ac1842c7fd 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1,8 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2017-2019 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-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,8 +15,7 @@ limitations under the License.
*/
import React, { createRef } from 'react';
-// @ts-ignore - XXX: no idea why this import fails
-import * as Matrix from "matrix-js-sdk";
+import { createClient } from "matrix-js-sdk/src/matrix";
import { InvalidStoreError } from "matrix-js-sdk/src/errors";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -82,9 +78,12 @@ import {UIFeature} from "../../settings/UIFeature";
import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
import DialPadModal from "../views/voip/DialPadModal";
import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
+import { shouldUseLoginForWelcome } from "../../utils/pages";
import SpaceStore from "../../stores/SpaceStore";
import SpaceRoomDirectory from "./SpaceRoomDirectory";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import RoomListStore from "../../stores/room-list/RoomListStore";
+import {RoomUpdateCause} from "../../stores/room-list/models";
/** constants for MatrixChat.state.view */
export enum Views {
@@ -582,6 +581,7 @@ export default class MatrixChat extends React.PureComponent this.onRoomClicked(room, ev)}
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 8b70998be0..54b6fee233 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -16,7 +16,6 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import Matrix from 'matrix-js-sdk';
import { _t, _td } from '../../languageHandler';
import {MatrixClientPeg} from '../../MatrixClientPeg';
import Resend from '../../Resend';
@@ -24,6 +23,7 @@ import dis from '../../dispatcher/dispatcher';
import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
import {Action} from "../../dispatcher/actions";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import {EventStatus} from "matrix-js-sdk/src/models/event";
const STATUS_BAR_HIDDEN = 0;
const STATUS_BAR_EXPANDED = 1;
@@ -32,7 +32,7 @@ const STATUS_BAR_EXPANDED_LARGE = 2;
function getUnsentMessages(room) {
if (!room) { return []; }
return room.getPendingEvents().filter(function(ev) {
- return ev.status === Matrix.EventStatus.NOT_SENT;
+ return ev.status === EventStatus.NOT_SENT;
});
}
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/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index f32b8ed0a9..12f5d6e890 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -22,8 +22,8 @@ import {LayoutPropType} from "../../settings/Layout";
import React, {createRef} from 'react';
import ReactDOM from "react-dom";
import PropTypes from 'prop-types';
-import {EventTimeline} from "matrix-js-sdk";
-import * as Matrix from "matrix-js-sdk";
+import {EventTimeline} from "matrix-js-sdk/src/models/event-timeline";
+import {TimelineWindow} from "matrix-js-sdk/src/timeline-window";
import { _t } from '../../languageHandler';
import {MatrixClientPeg} from "../../MatrixClientPeg";
import UserActivity from "../../UserActivity";
@@ -463,6 +463,9 @@ class TimelinePanel extends React.Component {
}
});
}
+ if (payload.action === "scroll_to_bottom") {
+ this.jumpToLiveTimeline();
+ }
};
onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
@@ -1007,7 +1010,7 @@ class TimelinePanel extends React.Component {
* returns a promise which will resolve when the load completes.
*/
_loadTimeline(eventId, pixelOffset, offsetBase) {
- this._timelineWindow = new Matrix.TimelineWindow(
+ this._timelineWindow = new TimelineWindow(
MatrixClientPeg.get(), this.props.timelineSet,
{windowLimit: this.props.timelineCap});
diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.js
index dc05193ece..6b472783bb 100644
--- a/src/components/structures/UserView.js
+++ b/src/components/structures/UserView.js
@@ -17,13 +17,14 @@ limitations under the License.
import React from "react";
import PropTypes from "prop-types";
-import Matrix from "matrix-js-sdk";
import {MatrixClientPeg} from "../../MatrixClientPeg";
import * as sdk from "../../index";
import Modal from '../../Modal';
import { _t } from '../../languageHandler';
import HomePage from "./HomePage";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
@replaceableComponent("structures.UserView")
export default class UserView extends React.Component {
@@ -68,8 +69,8 @@ export default class UserView extends React.Component {
this.setState({loading: false});
return;
}
- const fakeEvent = new Matrix.MatrixEvent({type: "m.room.member", content: profileInfo});
- const member = new Matrix.RoomMember(null, this.props.userId);
+ const fakeEvent = new MatrixEvent({type: "m.room.member", content: profileInfo});
+ const member = new RoomMember(null, this.props.userId);
member.setMembershipEvent(fakeEvent);
this.setState({member, loading: false});
}
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index 32bdddb82a..9d004de2ec 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import Matrix from 'matrix-js-sdk';
+import {createClient} from 'matrix-js-sdk/src/matrix';
import React, {ReactNode} from 'react';
import {MatrixClient} from "matrix-js-sdk/src/client";
@@ -181,7 +181,7 @@ export default class Registration extends React.Component {
}
const {hsUrl, isUrl} = serverConfig;
- const cli = Matrix.createClient({
+ const cli = createClient({
baseUrl: hsUrl,
idBaseUrl: isUrl,
});
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/GroupInviteTileContextMenu.js b/src/components/views/context_menus/GroupInviteTileContextMenu.js
index 11a9d90ac2..15078326b3 100644
--- a/src/components/views/context_menus/GroupInviteTileContextMenu.js
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import Modal from '../../../Modal';
-import {Group} from 'matrix-js-sdk';
+import {Group} from 'matrix-js-sdk/src/models/group';
import GroupStore from "../../../stores/GroupStore";
import {MenuItem} from "../../structures/ContextMenu";
import {replaceableComponent} from "../../../utils/replaceableComponent";
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index daabf224dc..56f070ba36 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -19,7 +19,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import dis from '../../../dispatcher/dispatcher';
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 (
;
} 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 = 
;
}
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 = (
{
+ _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..de0b5b237b 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 client = MatrixClientPeg.get();
const userId = client.getUserId();
const profileInfo = await client.getProfileInfo(userId);
- const avatarUrl = Avatar.avatarUrlForUser(
- {avatarUrl: profileInfo.avatar_url},
- AVATAR_SIZE, AVATAR_SIZE, "crop");
+ const avatarUrl = profileInfo.avatar_url;
this.setState({
userId,
@@ -113,8 +111,9 @@ export default class EventTilePreview extends React.Component {
name: displayname,
userId: userId,
getAvatarUrl: (..._) => {
- return avatarUrl;
+ return Avatar.avatarUrlForUser({avatarUrl}, AVATAR_SIZE, AVATAR_SIZE, "crop");
},
+ getMxcAvatarUrl: () => avatarUrl,
};
return event;
diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js
index 75998cb721..73d5b91511 100644
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -20,6 +20,7 @@ import FlairStore from '../../../stores/FlairStore';
import dis from '../../../dispatcher/dispatcher';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
class FlairAvatar extends React.Component {
@@ -39,8 +40,7 @@ class FlairAvatar extends React.Component {
}
render() {
- const httpUrl = this.context.mxcUrlToHttp(
- this.props.groupProfile.avatarUrl, 16, 16, 'scale', false);
+ const httpUrl = mediaFromMxc(this.props.groupProfile.avatarUrl).getSquareThumbnailHttp(16);
const tooltip = this.props.groupProfile.name ?
`${this.props.groupProfile.name} (${this.props.groupProfile.groupId})`:
this.props.groupProfile.groupId;
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index b0d4fc7fa2..a8e16813e6 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -1,7 +1,5 @@
/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2017 - 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.
@@ -19,13 +17,15 @@ import React from 'react';
import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
import classNames from 'classnames';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
import PropTypes from 'prop-types';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import FlairStore from "../../../stores/FlairStore";
import {getPrimaryPermalinkEntity, parseAppLocalLink} from "../../../utils/permalinks/Permalinks";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {Action} from "../../../dispatcher/actions";
+import {mediaFromMxc} from "../../../customisations/Media";
import Tooltip from './Tooltip';
import {replaceableComponent} from "../../../utils/replaceableComponent";
@@ -254,12 +254,12 @@ class Pill extends React.Component {
case Pill.TYPE_GROUP_MENTION: {
if (this.state.group) {
const {avatarUrl, groupId, name} = this.state.group;
- const cli = MatrixClientPeg.get();
linkText = groupId;
if (this.props.shouldShowPillAvatar) {
- avatar = ;
+ avatar = ;
}
pillClass = 'mx_GroupPill';
}
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 41cfcdaf9a..eb29e52496 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -20,7 +20,8 @@ import * as sdk from '../../../index';
import {_t} from '../../../languageHandler';
import PropTypes from 'prop-types';
import dis from '../../../dispatcher/dispatcher';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {wantsDateSeparator} from '../../../DateUtils';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
import SettingsStore from "../../../settings/SettingsStore";
import {LayoutPropType} from "../../../settings/Layout";
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 3a03252ebd..4e41db0ae7 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -24,6 +24,7 @@ import AccessibleButton from "./AccessibleButton";
import {_t} from "../../../languageHandler";
import {IdentityProviderBrand, IIdentityProvider, ISSOFlow} from "../../../Login";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
+import {mediaFromMxc} from "../../../customisations/Media";
interface ISSOButtonProps extends Omit {
idp: IIdentityProvider;
@@ -72,7 +73,7 @@ const SSOButton: React.FC = ({
brandClass = `mx_SSOButton_brand_${brandName}`;
icon = 
;
} 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 =
-
-
);
+ 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
{_t("Identity Server")}
({host})
;
- case Matrix.SERVICE_TYPES.IM:
+ case SERVICE_TYPES.IM:
return ({host})
{_t("Integration Manager")}
({host})
;
}
}
_summaryForServiceType(serviceType) {
switch (serviceType) {
- case Matrix.SERVICE_TYPES.IS:
+ case SERVICE_TYPES.IS:
return ({host})
{_t("Find others by phone or email")}
{_t("Be found by phone or email")}
;
- case Matrix.SERVICE_TYPES.IM:
+ case SERVICE_TYPES.IM:
return {_t("Be found by phone or email")}
{_t("Use bots, bridges, widgets and sticker packs")}
;
diff --git a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
index ca28ca094c..1fafe03d95 100644
--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
@@ -19,7 +19,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import * as sdk from '../../../../index';
import {MatrixClientPeg} from '../../../../MatrixClientPeg';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
import { _t } from '../../../../languageHandler';
import { accessSecretStorage } from '../../../../SecurityManager';
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 4a216dbae4..df66d10a71 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -19,10 +19,10 @@ 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 {
@@ -47,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/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index c539f2be1c..5fd73f974d 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -70,9 +70,7 @@ export default class EventTilePreview extends React.Component
diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js
index a298f7eb68..e2eda1e12a 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.js
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
import * as HtmlUtils from '../../../HtmlUtils';
import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
import {formatTime} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
import {pillifyLinks, unmountPills} from '../../../utils/pillify';
import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
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/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index c33debe3f5..5a6e7d87b7 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -18,7 +18,7 @@ limitations under the License.
import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
-import { EventStatus } from 'matrix-js-sdk';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
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 = (
{
this.setState({generalMenuPosition: null}); // hide the menu
};
+ private onInviteClick = (ev: ButtonEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ dis.dispatch({
+ action: 'view_invite',
+ roomId: this.props.room.roomId,
+ });
+ this.setState({generalMenuPosition: null}); // hide the menu
+ };
+
private async saveNotifState(ev: ButtonEvent, newState: Volume) {
ev.preventDefault();
ev.stopPropagation();
@@ -453,6 +464,8 @@ export default class RoomTile extends React.PureComponent {
const isLowPriority = roomTags.includes(DefaultTagID.LowPriority);
const lowPriorityLabel = _t("Low Priority");
+ const userId = MatrixClientPeg.get().getUserId();
+ const canInvite = this.props.room.canInvite(userId);
contextMenu = {
label={lowPriorityLabel}
iconClassName="mx_RoomTile_iconArrowDown"
/>
-
+ {canInvite ? (
+ {
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/RelatedGroupSettings.js b/src/components/views/room_settings/RelatedGroupSettings.js
index f82e238722..272ecd1228 100644
--- a/src/components/views/room_settings/RelatedGroupSettings.js
+++ b/src/components/views/room_settings/RelatedGroupSettings.js
@@ -16,7 +16,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import Modal from '../../../Modal';
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/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 6ecb2bd549..be04a50798 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -27,7 +27,7 @@ import {parseEvent} from '../../../editor/deserialize';
import {PartCreator} from '../../../editor/parts';
import EditorStateTransfer from '../../../utils/EditorStateTransfer';
import classNames from 'classnames';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
import BasicMessageComposer from "./BasicMessageComposer";
import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index cbe3252c2b..644d64d322 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -28,7 +28,7 @@ import * as sdk from "../../../index";
import dis from '../../../dispatcher/dispatcher';
import SettingsStore from "../../../settings/SettingsStore";
import {Layout, LayoutPropType} from "../../../settings/Layout";
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
import {formatTime} from "../../../DateUtils";
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
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/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 07de70fe45..79db460275 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -333,6 +333,17 @@ export default class RoomTile 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/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 63449eb99f..63b19831bb 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1601,6 +1601,7 @@
"Favourited": "Favourited",
"Favourite": "Favourite",
"Low Priority": "Low Priority",
+ "Invite People": "Invite People",
"Leave Room": "Leave Room",
"Room options": "Room options",
"%(count)s unread messages including mentions.|other": "%(count)s unread messages including mentions.",
@@ -2150,10 +2151,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.",
@@ -2201,6 +2202,7 @@
"Go": "Go",
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Unnamed Space": "Unnamed Space",
+ "Invite to %(roomName)s": "Invite to %(roomName)s",
"Invite someone using their name, email address, username (like {
private static internalInstance = new OwnProfileStore();
private monitoredUser: User;
private constructor() {
- super(defaultDispatcher, {});
+ // seed from localstorage because otherwise we won't get these values until a whole network
+ // round-trip after the client is ready, and we often load widgets in that time, and we'd
+ // and up passing them an incorrect display name
+ super(defaultDispatcher, {
+ displayName: window.localStorage.getItem(KEY_DISPLAY_NAME),
+ avatarUrl: window.localStorage.getItem(KEY_AVATAR_URL),
+ });
}
public static get instance(): OwnProfileStore {
@@ -72,8 +82,12 @@ export class OwnProfileStore extends AsyncStoreWithClient {
*/
public getHttpAvatarUrl(size = 0): string {
if (!this.avatarMxc) return null;
- const adjustedSize = size > 1 ? size : undefined; // don't let negatives or zero through
- return this.matrixClient.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() {
@@ -110,6 +124,16 @@ export class OwnProfileStore extends AsyncStoreWithClient {
// We specifically do not use the User object we stored for profile info as it
// could easily be wrong (such as per-room instead of global profile).
const profileInfo = await this.matrixClient.getProfileInfo(this.matrixClient.getUserId());
+ if (profileInfo.displayname) {
+ window.localStorage.setItem(KEY_DISPLAY_NAME, profileInfo.displayname);
+ } else {
+ window.localStorage.removeItem(KEY_DISPLAY_NAME);
+ }
+ if (profileInfo.avatar_url) {
+ window.localStorage.setItem(KEY_AVATAR_URL, profileInfo.avatar_url);
+ } else {
+ window.localStorage.removeItem(KEY_AVATAR_URL);
+ }
await this.updateState({displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url});
};
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index 3f415f946d..074c2e569d 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -655,6 +655,18 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
if (!algorithmTags) return [DefaultTagID.Untagged];
return algorithmTags;
}
+
+ /**
+ * Manually update a room with a given cause. This should only be used if the
+ * room list store would otherwise be incapable of doing the update itself. Note
+ * that this may race with the room list's regular operation.
+ * @param {Room} room The room to update.
+ * @param {RoomUpdateCause} cause The cause to update for.
+ */
+ public async manualRoomUpdate(room: Room, cause: RoomUpdateCause) {
+ await this.handleRoomUpdate(room, cause);
+ this.updateFn.trigger();
+ }
}
export default class RoomListStore {
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/AutoDiscoveryUtils.js b/src/utils/AutoDiscoveryUtils.js
index 18b6451d3e..614aa4cea8 100644
--- a/src/utils/AutoDiscoveryUtils.js
+++ b/src/utils/AutoDiscoveryUtils.js
@@ -16,7 +16,7 @@ limitations under the License.
*/
import React from 'react';
-import {AutoDiscovery} from "matrix-js-sdk";
+import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
import {_t, _td, newTranslatableError} from "../languageHandler";
import {makeType} from "./TypeUtils";
import SdkConfig from '../SdkConfig';
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/src/utils/EventUtils.js b/src/utils/EventUtils.js
index 6558a11ed4..be21896417 100644
--- a/src/utils/EventUtils.js
+++ b/src/utils/EventUtils.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { EventStatus } from 'matrix-js-sdk';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
import {MatrixClientPeg} from '../MatrixClientPeg';
import shouldHideEvent from "../shouldHideEvent";
/**
diff --git a/src/utils/IdentityServerUtils.js b/src/utils/IdentityServerUtils.js
index 093d4eeabf..5ece308954 100644
--- a/src/utils/IdentityServerUtils.js
+++ b/src/utils/IdentityServerUtils.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { SERVICE_TYPES } from 'matrix-js-sdk';
+import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
import SdkConfig from '../SdkConfig';
import {MatrixClientPeg} from '../MatrixClientPeg';
diff --git a/src/utils/StorageManager.js b/src/utils/StorageManager.js
index c90281bacf..23c27a2d1c 100644
--- a/src/utils/StorageManager.js
+++ b/src/utils/StorageManager.js
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import Matrix from 'matrix-js-sdk';
import {LocalStorageCryptoStore} from 'matrix-js-sdk/src/crypto/store/localStorage-crypto-store';
import Analytics from '../Analytics';
+import {IndexedDBStore} from "matrix-js-sdk/src/store/indexeddb";
+import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
const localStorage = window.localStorage;
@@ -132,7 +133,7 @@ export async function checkConsistency() {
async function checkSyncStore() {
let exists = false;
try {
- exists = await Matrix.IndexedDBStore.exists(
+ exists = await IndexedDBStore.exists(
indexedDB, SYNC_STORE_NAME,
);
log(`Sync store using IndexedDB contains data? ${exists}`);
@@ -148,7 +149,7 @@ async function checkSyncStore() {
async function checkCryptoStore() {
let exists = false;
try {
- exists = await Matrix.IndexedDBCryptoStore.exists(
+ exists = await IndexedDBCryptoStore.exists(
indexedDB, CRYPTO_STORE_NAME,
);
log(`Crypto store using IndexedDB contains data? ${exists}`);
diff --git a/src/utils/createMatrixClient.js b/src/utils/createMatrixClient.js
index c8ff35a584..f5e196d846 100644
--- a/src/utils/createMatrixClient.js
+++ b/src/utils/createMatrixClient.js
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import * as Matrix from 'matrix-js-sdk';
+import {createClient} from "matrix-js-sdk/src/matrix";
+import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
+import {WebStorageSessionStore} from "matrix-js-sdk/src/store/session/webstorage";
+import {IndexedDBStore} from "matrix-js-sdk/src/store/indexeddb";
const localStorage = window.localStorage;
@@ -44,7 +47,7 @@ export default function createMatrixClient(opts) {
};
if (indexedDB && localStorage) {
- storeOpts.store = new Matrix.IndexedDBStore({
+ storeOpts.store = new IndexedDBStore({
indexedDB: indexedDB,
dbName: "riot-web-sync",
localStorage: localStorage,
@@ -53,18 +56,18 @@ export default function createMatrixClient(opts) {
}
if (localStorage) {
- storeOpts.sessionStore = new Matrix.WebStorageSessionStore(localStorage);
+ storeOpts.sessionStore = new WebStorageSessionStore(localStorage);
}
if (indexedDB) {
- storeOpts.cryptoStore = new Matrix.IndexedDBCryptoStore(
+ storeOpts.cryptoStore = new IndexedDBCryptoStore(
indexedDB, "matrix-js-sdk:crypto",
);
}
opts = Object.assign(storeOpts, opts);
- return Matrix.createClient(opts);
+ return createClient(opts);
}
createMatrixClient.indexedDbWorkerScript = null;
diff --git a/src/utils/pages.js b/src/utils/pages.ts
similarity index 68%
rename from src/utils/pages.js
rename to src/utils/pages.ts
index d63ca3f2c7..bae76be29d 100644
--- a/src/utils/pages.js
+++ b/src/utils/pages.ts
@@ -1,5 +1,5 @@
/*
-Copyright 2019 New Vector Ltd
+Copyright 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.
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-export function getHomePageUrl(appConfig) {
+import { ConfigOptions } from "../SdkConfig";
+
+export function getHomePageUrl(appConfig: ConfigOptions): string | null {
const pagesConfig = appConfig.embeddedPages;
- let pageUrl = null;
- if (pagesConfig) {
- pageUrl = pagesConfig.homeUrl;
- }
+ let pageUrl = pagesConfig?.homeUrl;
+
if (!pageUrl) {
// This is a deprecated config option for the home page
// (despite the name, given we also now have a welcome
@@ -29,3 +29,8 @@ export function getHomePageUrl(appConfig) {
return pageUrl;
}
+
+export function shouldUseLoginForWelcome(appConfig: ConfigOptions): boolean {
+ const pagesConfig = appConfig.embeddedPages;
+ return pagesConfig?.loginForWelcome === true;
+}
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('