- { _t("We're getting closer to releasing a public Beta for Threads.") } -
-- { _t("As we prepare for it, we need to make some changes: threads created " - + "before this point will be displayed as regular replies.", - {}, { - "strong": sub => { sub }, - }) } -
-- { _t("This will be a one-off transition, as threads are now part " - + "of the Matrix specification.") } -
- , - button: _t("Got it"), - onFinished: () => { - localStorage.setItem("mx_seen_feature_thread_experimental", "true"); - }, - }); - } - }, 1 * 60 * 1000); // show after 1 minute to not overload user on launch - } - if (!localStorage.getItem("mx_seen_feature_spotlight_toast")) { setTimeout(() => { // Skip the toast if the beta is already enabled or the user has changed the setting from default diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index ff9bc826528..1a403ba5065 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -23,6 +23,8 @@ import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import { Relations } from "matrix-js-sdk/src/models/relations"; import { logger } from 'matrix-js-sdk/src/logger'; import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state"; +import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts"; +import { M_BEACON_INFO } from 'matrix-js-sdk/src/@types/beacon'; import shouldHideEvent from '../../shouldHideEvent'; import { wantsDateSeparator } from '../../DateUtils'; @@ -92,9 +94,13 @@ export function shouldFormContinuation( mxEvent.sender.name !== prevEvent.sender.name || mxEvent.sender.getMxcAvatarUrl() !== prevEvent.sender.getMxcAvatarUrl()) return false; - // Thread summaries in the main timeline should break up a continuation - if (threadsEnabled && prevEvent.isThreadRoot && - timelineRenderingType !== TimelineRenderingType.Thread) return false; + // Thread summaries in the main timeline should break up a continuation on both sides + if (threadsEnabled && + (mxEvent.isThreadRoot || prevEvent.isThreadRoot) && + timelineRenderingType !== TimelineRenderingType.Thread + ) { + return false; + } // if we don't have tile for previous event then it was shown by showHiddenEvents and has no SenderProfile if (!haveRendererForEvent(prevEvent, showHiddenEvents)) return false; @@ -452,14 +458,6 @@ export default class MessagePanel extends React.Component
- { isMac ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" }
+ { IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" }
;
if (this.props.isMinimized) {
diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx
index 94b9905becc..a89f205a88e 100644
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@@ -223,7 +223,7 @@ export default class RoomStatusBar extends React.PureComponent
+
;
+
- { visibilitySection }
- { memberSection }
-
;
-};
-
-interface ISpacePreviewProps {
- space: Room;
- onJoinButtonClicked(): void;
- onRejectButtonClicked(): void;
-}
-
-const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISpacePreviewProps) => {
- const cli = useContext(MatrixClientContext);
- const myMembership = useMyRoomMembership(space);
- useDispatcher(defaultDispatcher, payload => {
- if (payload.action === Action.JoinRoomError && payload.roomId === space.roomId) {
- setBusy(false); // stop the spinner, join failed
- }
- });
-
- const [busy, setBusy] = useState(false);
-
- const joinRule = useRoomState(space, state => state.getJoinRule());
- const cannotJoin = getEffectiveMembership(myMembership) === EffectiveMembership.Leave
- && joinRule !== JoinRule.Public;
-
- let inviterSection;
- let joinButtons;
- if (myMembership === "join") {
- // XXX remove this when spaces leaves Beta
- joinButtons = (
-
-
;
- }
-
- joinButtons = <>
-
-
-
- { _t("
- { inviter ?
- { inviteSender }
-
: null }
-
- { _t("To view %(spaceName)s, you need an invite", {
- spaceName: space.name,
- }) }
-
;
- }
-
- return
- { inviterSection }
-
-
-
- { (topic, ref) =>
-
- { space.getJoinRule() === "public" &&
;
-};
-
const SpaceLandingAddButton = ({ space }) => {
const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
const canCreateRoom = shouldShowComponent(UIComponent.CreateRooms);
@@ -316,8 +111,8 @@ const SpaceLandingAddButton = ({ space }) => {
if (menuDisplayed) {
const rect = handle.current.getBoundingClientRect();
contextMenu =
-
-
- { topic }
-
- }
-
- { joinButtons }
-
- { footer }
-
- {
if (this.state.myMembership === "join") {
return = ({ hasThreads, filterOption, sh
body = <>
= ({
const [filterOption, setFilterOption] = useState(ThreadFilterType.All);
const [room, setRoom] = useState(null);
- const [threadCount, setThreadCount] = useState(0);
const [timelineSet, setTimelineSet] = useState(null);
const [narrow, setNarrow] = useState(false);
useEffect(() => {
const room = mxClient.getRoom(roomId);
room.createThreadsTimelineSets().then(() => {
- setRoom(room);
+ return room.fetchRoomThreads();
+ }).then(() => {
setFilterOption(ThreadFilterType.All);
- room.fetchRoomThreads();
+ setRoom(room);
});
}, [mxClient, roomId]);
useEffect(() => {
- function onNewThread(): void {
- setThreadCount(room.threads.size);
- }
-
function refreshTimeline() {
- if (timelineSet) timelinePanel.current.refreshTimeline();
+ timelinePanel?.current.refreshTimeline();
}
- if (room) {
- setThreadCount(room.threads.size);
-
- room.on(ThreadEvent.New, onNewThread);
- room.on(ThreadEvent.Update, refreshTimeline);
- }
+ room?.on(ThreadEvent.Update, refreshTimeline);
return () => {
- room?.removeListener(ThreadEvent.New, onNewThread);
room?.removeListener(ThreadEvent.Update, refreshTimeline);
};
}, [room, mxClient, timelineSet]);
@@ -257,7 +250,7 @@ const ThreadPanel: React.FC = ({
header={ = ({
sensor={card.current}
onMeasurement={setNarrow}
/>
- { timelineSet && (
- = ({
permalinkCreator={permalinkCreator}
disableGrouping={true}
/>
- ) }
+ : {
}
public componentWillUnmount(): void {
- this.teardownThread();
if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
const roomId = this.props.mxEvent.getRoomId();
const room = MatrixClientPeg.get().getRoom(roomId);
@@ -123,7 +122,6 @@ export default class ThreadView extends React.Component {
public componentDidUpdate(prevProps) {
if (prevProps.mxEvent !== this.props.mxEvent) {
- this.teardownThread();
this.setupThread(this.props.mxEvent);
}
@@ -134,7 +132,6 @@ export default class ThreadView extends React.Component {
private onAction = (payload: ActionPayload): void => {
if (payload.phase == RightPanelPhases.ThreadView && payload.event) {
- this.teardownThread();
this.setupThread(payload.event);
}
switch (payload.action) {
@@ -164,23 +161,15 @@ export default class ThreadView extends React.Component {
};
private setupThread = (mxEv: MatrixEvent) => {
- let thread = this.props.room.threads?.get(mxEv.getId());
+ let thread = this.props.room.getThread(mxEv.getId());
if (!thread) {
- thread = this.props.room.createThread(mxEv, [mxEv], true);
+ thread = this.props.room.createThread(mxEv.getId(), mxEv, [mxEv], true);
}
- thread.on(ThreadEvent.Update, this.updateLastThreadReply);
this.updateThread(thread);
};
- private teardownThread = () => {
- if (this.state.thread) {
- this.state.thread.removeListener(ThreadEvent.Update, this.updateLastThreadReply);
- }
- };
-
private onNewThread = (thread: Thread) => {
if (thread.id === this.props.mxEvent.getId()) {
- this.teardownThread();
this.setupThread(this.props.mxEvent);
}
};
@@ -189,33 +178,15 @@ export default class ThreadView extends React.Component {
if (thread && this.state.thread !== thread) {
this.setState({
thread,
- lastThreadReply: thread.lastReply((ev: MatrixEvent) => {
- return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
- }),
}, async () => {
thread.emit(ThreadEvent.ViewThread);
- if (!thread.initialEventsFetched) {
- const response = await thread.fetchInitialEvents();
- if (response?.nextBatch) {
- this.nextBatch = response.nextBatch;
- }
- }
-
+ await thread.fetchInitialEvents();
+ this.nextBatch = thread.liveTimeline.getPaginationToken(Direction.Backward);
this.timelinePanel.current?.refreshTimeline();
});
}
};
- private updateLastThreadReply = () => {
- if (this.state.thread) {
- this.setState({
- lastThreadReply: this.state.thread.lastReply((ev: MatrixEvent) => {
- return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
- }),
- });
- }
- };
-
private resetJumpToEvent = (event?: string): void => {
if (this.props.initialEvent && this.props.initialEventScrollIntoView &&
event === this.props.initialEvent?.getId()) {
@@ -298,12 +269,16 @@ export default class ThreadView extends React.Component {
};
private get threadRelation(): IEventRelation {
+ const lastThreadReply = this.state.thread?.lastReply((ev: MatrixEvent) => {
+ return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
+ });
+
return {
"rel_type": THREAD_RELATION_TYPE.name,
"event_id": this.state.thread?.id,
"is_falling_back": true,
"m.in_reply_to": {
- "event_id": this.state.lastThreadReply?.getId() ?? this.state.thread?.id,
+ "event_id": lastThreadReply?.getId() ?? this.state.thread?.id,
},
};
}
@@ -324,11 +299,45 @@ export default class ThreadView extends React.Component {
const threadRelation = this.threadRelation;
- const messagePanelClassNames = classNames(
- "mx_RoomView_messagePanel",
- {
- "mx_GroupLayout": this.state.layout === Layout.Group,
- });
+ const messagePanelClassNames = classNames("mx_RoomView_messagePanel", {
+ "mx_GroupLayout": this.state.layout === Layout.Group,
+ });
+
+ let timeline: JSX.Element;
+ if (this.state.thread) {
+ timeline = <>
+ {
sensor={this.card.current}
onMeasurement={this.onMeasurement}
/>
- { this.state.thread && {
+ if (SettingsStore.getValue("debug_timeline_panel")) {
+ logger.log.call(console, "TimelinePanel debuglog:", ...args);
+ }
+};
interface IProps {
// The js-sdk EventTimelineSet object for the timeline sequence we are
@@ -864,14 +863,14 @@ class TimelinePanel extends React.Component {
MatrixClientPeg.get().setRoomReadMarkers(
roomId,
this.state.readMarkerEventId,
- lastReadEvent, // Could be null, in which case no RR is sent
- { hidden: hiddenRR },
+ hiddenRR ? null : lastReadEvent, // Could be null, in which case no RR is sent
+ lastReadEvent, // Could be null, in which case no private RR is sent
).catch((e) => {
// /read_markers API is not implemented on this HS, fallback to just RR
if (e.errcode === 'M_UNRECOGNIZED' && lastReadEvent) {
return MatrixClientPeg.get().sendReadReceipt(
lastReadEvent,
- {},
+ hiddenRR ? ReceiptType.ReadPrivate : ReceiptType.Read,
).catch((e) => {
logger.error(e);
this.lastRRSentEventId = undefined;
@@ -1043,7 +1042,7 @@ class TimelinePanel extends React.Component {
/* return true if the content is fully scrolled down and we are
* at the end of the live timeline.
*/
- public isAtEndOfLiveTimeline = (): boolean => {
+ public isAtEndOfLiveTimeline = (): boolean | undefined => {
return this.messagePanel.current?.isAtBottom()
&& this.timelineWindow
&& !this.timelineWindow.canPaginate(EventTimeline.FORWARDS);
@@ -1188,11 +1187,8 @@ class TimelinePanel extends React.Component {
const onLoaded = () => {
if (this.unmounted) return;
- // clear the timeline min-height when
- // (re)loading the timeline
- if (this.messagePanel.current) {
- this.messagePanel.current.onTimelineReset();
- }
+ // clear the timeline min-height when (re)loading the timeline
+ this.messagePanel.current?.onTimelineReset();
this.reloadEvents();
// If we switched away from the room while there were pending
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 27cc08f0bcc..a9f072b21fa 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -14,13 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { createRef, useContext, useRef, useState } from "react";
+import React, { createRef } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
-import classNames from "classnames";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import defaultDispatcher from "../../dispatcher/dispatcher";
-import dis from "../../dispatcher/dispatcher";
import { ActionPayload } from "../../dispatcher/payloads";
import { Action } from "../../dispatcher/actions";
import { _t } from "../../languageHandler";
@@ -33,9 +31,7 @@ import LogoutDialog from "../views/dialogs/LogoutDialog";
import SettingsStore from "../../settings/SettingsStore";
import { findHighContrastTheme, getCustomTheme, isHighContrastTheme } from "../../theme";
import {
- RovingAccessibleButton,
RovingAccessibleTooltipButton,
- useRovingTabIndex,
} from "../../accessibility/RovingTabIndex";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import SdkConfig from "../../SdkConfig";
@@ -45,7 +41,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
import BaseAvatar from '../views/avatars/BaseAvatar';
import { SettingLevel } from "../../settings/SettingLevel";
import IconizedContextMenu, {
- IconizedContextMenuCheckbox,
IconizedContextMenuOption,
IconizedContextMenuOptionList,
} from "../views/context_menus/IconizedContextMenu";
@@ -53,65 +48,10 @@ import { UIFeature } from "../../settings/UIFeature";
import HostSignupAction from "./HostSignupAction";
import SpaceStore from "../../stores/spaces/SpaceStore";
import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
-import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedPayload";
import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
import PosthogTrackers from "../../PosthogTrackers";
import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
-const CustomStatusSection = () => {
- const cli = useContext(MatrixClientContext);
- const setStatus = cli.getUser(cli.getUserId()).unstable_statusMessage || "";
- const [value, setValue] = useState(setStatus);
-
- const ref = useRef(null);
- const [onFocus, isActive] = useRovingTabIndex(ref);
-
- const classes = classNames({
- 'mx_UserMenu_CustomStatusSection_field': true,
- 'mx_UserMenu_CustomStatusSection_field_hasQuery': value,
- });
-
- let details: JSX.Element;
- if (value !== setStatus) {
- details = <>
- cli._unstable_setStatusMessage(value)}
- kind="primary_outline"
- >
- { value ? _t("Set status") : _t("Clear status") }
-
- ;
- }
-
- return ;
-};
-
interface IProps {
isPanelCollapsed: boolean;
}
@@ -123,7 +63,6 @@ interface IState {
isDarkTheme: boolean;
isHighContrast: boolean;
selectedSpace?: Room;
- dndEnabled: boolean;
}
const toRightOf = (rect: PartialDOMRect) => {
@@ -155,19 +94,11 @@ export default class UserMenu extends React.Component {
contextMenuPosition: null,
isDarkTheme: this.isUserOnDarkTheme(),
isHighContrast: this.isUserOnHighContrastTheme(),
- dndEnabled: this.doNotDisturb,
selectedSpace: SpaceStore.instance.activeSpaceRoom,
};
OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
-
- SettingsStore.monitorSetting("feature_dnd", null);
- SettingsStore.monitorSetting("doNotDisturb", null);
- }
-
- private get doNotDisturb(): boolean {
- return SettingsStore.getValue("doNotDisturb");
}
private get hasHomePage(): boolean {
@@ -240,20 +171,6 @@ export default class UserMenu extends React.Component {
if (this.buttonRef.current) this.buttonRef.current.click();
}
break;
-
- case Action.SettingUpdated: {
- const settingUpdatedPayload = payload as SettingUpdatedPayload;
- switch (settingUpdatedPayload.settingName) {
- case "feature_dnd":
- case "doNotDisturb": {
- const dndEnabled = this.doNotDisturb;
- if (this.state.dndEnabled !== dndEnabled) {
- this.setState({ dndEnabled });
- }
- break;
- }
- }
- }
}
};
@@ -323,7 +240,7 @@ export default class UserMenu extends React.Component {
const cli = MatrixClientPeg.get();
if (!cli || !cli.isCryptoEnabled() || !(await cli.exportRoomKeys())?.length) {
// log out without user prompt if they have no local megolm sessions
- dis.dispatch({ action: 'logout' });
+ defaultDispatcher.dispatch({ action: 'logout' });
} else {
Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
}
@@ -332,12 +249,12 @@ export default class UserMenu extends React.Component {
};
private onSignInClick = () => {
- dis.dispatch({ action: 'start_login' });
+ defaultDispatcher.dispatch({ action: 'start_login' });
this.setState({ contextMenuPosition: null }); // also close the menu
};
private onRegisterClick = () => {
- dis.dispatch({ action: 'start_registration' });
+ defaultDispatcher.dispatch({ action: 'start_registration' });
this.setState({ contextMenuPosition: null }); // also close the menu
};
@@ -349,12 +266,6 @@ export default class UserMenu extends React.Component {
this.setState({ contextMenuPosition: null }); // also close the menu
};
- private onDndToggle = (ev: ButtonEvent) => {
- ev.stopPropagation();
- const current = SettingsStore.getValue("doNotDisturb");
- SettingsStore.setValue("doNotDisturb", null, SettingLevel.DEVICE, !current);
- };
-
private renderContextMenu = (): React.ReactNode => {
if (!this.state.contextMenuPosition) return null;
@@ -401,24 +312,6 @@ export default class UserMenu extends React.Component {
);
}
- let customStatusSection: JSX.Element;
- if (SettingsStore.getValue("feature_custom_status")) {
- customStatusSection = {
let primaryOptionList = (
{ homeButton }
- { dndButton }
{
/>
- { customStatusSection }
{ topSection }
{ primaryOptionList }
-
@@ -847,8 +642,8 @@ export default class SpaceRoomView extends React.PureComponent{ _t("Threads help keep your conversations on-topic and easy to track.") }
- { _t('Tip: Use "Reply in thread" when hovering over a message.', {}, { + { _t('Tip: Use “%(replyInThread)s” when hovering over a message.', { + replyInThread: _t("Reply in thread"), + }, { b: sub => { sub }, }) }
@@ -189,37 +192,27 @@ const ThreadPanel: React.FC
+
+ }
);
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index 12dd84685d9..2eb4af94fcd 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -15,7 +15,7 @@ limitations under the License.
*/
import React, { createRef, KeyboardEvent } from 'react';
-import { Thread, ThreadEvent, THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
+import { Thread, THREAD_RELATION_TYPE, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
import { Room } from 'matrix-js-sdk/src/models/room';
import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
@@ -51,6 +51,7 @@ import Measured from '../views/elements/Measured';
import PosthogTrackers from "../../PosthogTrackers";
import { ButtonEvent } from "../views/elements/AccessibleButton";
import { RoomViewStore } from '../../stores/RoomViewStore';
+import Spinner from "../views/elements/Spinner";
interface IProps {
room: Room;
@@ -66,7 +67,6 @@ interface IProps {
interface IState {
thread?: Thread;
- lastThreadReply?: MatrixEvent;
layout: Layout;
editState?: EditorStateTransfer;
replyToEvent?: MatrixEvent;
@@ -104,7 +104,6 @@ export default class ThreadView extends React.Component
+
;
+ }
return (
-
}
+
+ { timeline }
+
{ ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (
{ _t("Your status will be shown to people you have a DM with.") }
- -
@@ -535,9 +421,6 @@ export default class UserMenu extends React.Component {
label={_t("User menu")}
isExpanded={!!this.state.contextMenuPosition}
onContextMenu={this.onContextMenu}
- className={classNames({
- mx_UserMenu_cutout: badge,
- })}
>
{
resizeMethod="crop"
className="mx_UserMenu_userAvatar_BaseAvatar"
/>
- { badge }
{ name }
diff --git a/src/components/structures/VideoRoomView.tsx b/src/components/structures/VideoRoomView.tsx
new file mode 100644
index 00000000000..e2cd62e08d0
--- /dev/null
+++ b/src/components/structures/VideoRoomView.tsx
@@ -0,0 +1,86 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { FC, useContext, useState, useMemo } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { useEventEmitter } from "../../hooks/useEventEmitter";
+import WidgetUtils from "../../utils/WidgetUtils";
+import { addVideoChannel, getVideoChannel } from "../../utils/VideoChannelUtils";
+import WidgetStore, { IApp } from "../../stores/WidgetStore";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import VideoChannelStore, { VideoChannelEvent } from "../../stores/VideoChannelStore";
+import AppTile from "../views/elements/AppTile";
+import VideoLobby from "../views/voip/VideoLobby";
+
+interface IProps {
+ room: Room;
+ resizing: boolean;
+}
+
+const VideoRoomView: FC = ({ room, resizing }) => {
+ const cli = useContext(MatrixClientContext);
+ const store = VideoChannelStore.instance;
+
+ // In case we mount before the WidgetStore knows about our Jitsi widget
+ const [widgetStoreReady, setWidgetStoreReady] = useState(Boolean(WidgetStore.instance.matrixClient));
+ const [widgetLoaded, setWidgetLoaded] = useState(false);
+ useEventEmitter(WidgetStore.instance, UPDATE_EVENT, (roomId: string) => {
+ if (roomId === null) setWidgetStoreReady(true);
+ if (roomId === null || roomId === room.roomId) {
+ setWidgetLoaded(Boolean(getVideoChannel(room.roomId)));
+ }
+ });
+
+ const app: IApp = useMemo(() => {
+ if (widgetStoreReady) {
+ const app = getVideoChannel(room.roomId);
+ if (!app) {
+ logger.warn(`No video channel for room ${room.roomId}`);
+ // Since widgets in video rooms are mutable, we'll take this opportunity to
+ // reinstate the Jitsi widget in case another client removed it
+ if (WidgetUtils.canUserModifyWidgets(room.roomId)) {
+ addVideoChannel(room.roomId, room.name);
+ }
+ }
+ return app;
+ }
+ }, [room, widgetStoreReady, widgetLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const [connected, setConnected] = useState(store.connected && store.roomId === room.roomId);
+ useEventEmitter(store, VideoChannelEvent.Connect, () => setConnected(store.roomId === room.roomId));
+ useEventEmitter(store, VideoChannelEvent.Disconnect, () => setConnected(false));
+
+ if (!app) return null;
+
+ return {
return (
;
+
+ serverSupportsControlOfDevicesLogout: boolean;
+ logoutDevices: boolean;
}
enum ForgotPasswordField {
@@ -97,11 +102,14 @@ export default class ForgotPassword extends React.Component {
serverIsAlive: true,
serverErrorIsFatal: false,
serverDeadError: "",
+ serverSupportsControlOfDevicesLogout: false,
+ logoutDevices: false,
};
public componentDidMount() {
this.reset = null;
this.checkServerLiveliness(this.props.serverConfig);
+ this.checkServerCapabilities(this.props.serverConfig);
}
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@@ -112,6 +120,9 @@ export default class ForgotPassword extends React.Component {
// Do a liveliness check on the new URLs
this.checkServerLiveliness(newProps.serverConfig);
+
+ // Do capabilities check on new URLs
+ this.checkServerCapabilities(newProps.serverConfig);
}
private async checkServerLiveliness(serverConfig): Promise {
@@ -129,12 +140,25 @@ export default class ForgotPassword extends React.Component {
}
}
- public submitPasswordReset(email: string, password: string): void {
+ private async checkServerCapabilities(serverConfig: ValidatedServerConfig): Promise {
+ const tempClient = createClient({
+ baseUrl: serverConfig.hsUrl,
+ });
+
+ const serverSupportsControlOfDevicesLogout = await tempClient.doesServerSupportLogoutDevices();
+
+ this.setState({
+ logoutDevices: !serverSupportsControlOfDevicesLogout,
+ serverSupportsControlOfDevicesLogout,
+ });
+ }
+
+ public submitPasswordReset(email: string, password: string, logoutDevices = true): void {
this.setState({
phase: Phase.SendingEmail,
});
this.reset = new PasswordReset(this.props.serverConfig.hsUrl, this.props.serverConfig.isUrl);
- this.reset.resetPassword(email, password).then(() => {
+ this.reset.resetPassword(email, password, logoutDevices).then(() => {
this.setState({
phase: Phase.EmailSent,
});
@@ -174,24 +198,35 @@ export default class ForgotPassword extends React.Component {
return;
}
- Modal.createTrackedDialog('Forgot Password Warning', '', QuestionDialog, {
- title: _t('Warning!'),
- description:
- {
}
private onInputChanged = (stateKey: string, ev: React.FormEvent) => {
+ let value = ev.currentTarget.value;
+ if (stateKey === "email") value = value.trim();
this.setState({
- [stateKey]: ev.currentTarget.value,
+ [stateKey]: value,
} as any);
};
@@ -314,6 +351,13 @@ export default class ForgotPassword extends React.Component {
autoComplete="new-password"
/>
+ { this.state.serverSupportsControlOfDevicesLogout ?
+
+ { connected ? null :
;
+};
+
+export default VideoRoomView;
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index e84a26409e2..c8628a7f96f 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -167,8 +167,16 @@ export default class ViewSource extends React.Component
-
diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx
index 58b0073c443..df39f0aa8f2 100644
--- a/src/components/structures/auth/ForgotPassword.tsx
+++ b/src/components/structures/auth/ForgotPassword.tsx
@@ -19,6 +19,7 @@ limitations under the License.
import React from 'react';
import classNames from 'classnames';
import { logger } from "matrix-js-sdk/src/logger";
+import { createClient } from "matrix-js-sdk/src/matrix";
import { _t, _td } from '../../../languageHandler';
import Modal from "../../../Modal";
@@ -37,6 +38,7 @@ import AuthHeader from "../../views/auth/AuthHeader";
import AuthBody from "../../views/auth/AuthBody";
import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField";
import AccessibleButton from '../../views/elements/AccessibleButton';
+import StyledCheckbox from '../../views/elements/StyledCheckbox';
enum Phase {
// Show the forgot password inputs
@@ -72,6 +74,9 @@ interface IState {
serverDeadError: string;
currentHttpRequest?: Promise{ _t("Room ID: %(roomId)s", { roomId }) }
- { _t("Event ID: %(eventId)s", { eventId }) }
+
+ roomId} border={false}>
+ { _t("Room ID: %(roomId)s", { roomId }) }
+
+
+
+ eventId} border={false}>
+ { _t("Event ID: %(eventId)s", { eventId }) }
+
+
{ isEditing ? this.editSourceContent() : this.viewSourceContent() }
- { _t(
- "Changing your password will reset any end-to-end encryption keys " +
- "on all of your sessions, making encrypted chat history unreadable. Set up " +
- "Key Backup or export your room keys from another session before resetting your " +
- "password.",
- ) }
-
,
- button: _t('Continue'),
- onFinished: (confirmed) => {
- if (confirmed) {
- this.submitPasswordReset(this.state.email, this.state.password);
- }
- },
- });
+ if (this.state.logoutDevices) {
+ const { finished } = Modal.createTrackedDialog<[boolean]>('Forgot Password Warning', '', QuestionDialog, {
+ title: _t('Warning!'),
+ description:
+
+
,
+ button: _t('Continue'),
+ });
+ const [confirmed] = await finished;
+
+ if (!confirmed) return;
+ }
+
+ this.submitPasswordReset(this.state.email, this.state.password, this.state.logoutDevices);
};
private async verifyFieldsBeforeSubmit() {
@@ -222,8 +257,10 @@ export default class ForgotPassword extends React.Component{ !this.state.serverSupportsControlOfDevicesLogout ? + _t( + "Resetting your password on this homeserver will cause all of your devices to be " + + "signed out. This will delete the message encryption keys stored on them, " + + "making encrypted chat history unreadable.", + ) : + _t( + "Signing out your devices will delete the message encryption keys stored on them, " + + "making encrypted chat history unreadable.", + ) + }
+{ _t( + "If you want to retain access to your chat history in encrypted rooms, set up Key Backup " + + "or export your message keys from one of your other devices before proceeding.", + ) }
+
+ this.setState({ logoutDevices: !this.state.logoutDevices })} checked={this.state.logoutDevices}>
+ { _t("Sign out all devices") }
+
+
: null
+ }
{ _t(
'A verification email will be sent to your inbox to confirm ' +
'setting your new password.',
@@ -353,11 +397,14 @@ export default class ForgotPassword extends React.Component{ _t("Your password has been reset.") }
-{ _t( - "You have been logged out of all sessions and will no longer receive " + - "push notifications. To re-enable notifications, sign in again on each " + - "device.", - ) }
+ { this.state.logoutDevices ? +{ _t( + "You have been logged out of all devices and will no longer receive " + + "push notifications. To re-enable notifications, sign in again on each " + + "device.", + ) }
+ : null + } 'm.login.password': this.renderPasswordStep, // CAS and SSO are the same thing, modulo the url we link to + // eslint-disable-next-line @typescript-eslint/naming-convention 'm.login.cas': () => this.renderSsoStep("cas"), + // eslint-disable-next-line @typescript-eslint/naming-convention 'm.login.sso': () => this.renderSsoStep("sso"), }; } @@ -220,7 +222,7 @@ export default class LoginComponent extends React.PureComponent
+
+ latestLocationState?.uri}
+ />
+
+ { _t("Updated %(humanizedUpdateTime)s", { humanizedUpdateTime }) }
+
+
{ displayStatus === BeaconDisplayStatus.Loading && { _t('Loading live location...') } }
@@ -68,7 +70,7 @@ const BeaconStatus: React.FC> =
{ displayStatus === BeaconDisplayStatus.Active && beacon && <>
<>
- { label }
+ { label }
{ displayLiveTimeRemaining ?
(getBeaconBounds(liveBeacons));
+ const centerGeoUri = useRef(
+ focusBeacon?.latestLocationState?.uri ||
+ getBoundsCenter(bounds.current),
+ );
+ return { bounds: bounds.current, centerGeoUri: centerGeoUri.current };
};
/**
* Dialog to view live beacons maximised
*/
-const BeaconViewDialog: React.FC = ({ roomId, matrixClient, onFinished }) => {
+const BeaconViewDialog: React.FC = ({
+ focusBeacon,
+ roomId,
+ matrixClient,
+ onFinished,
+}) => {
const liveBeacons = useLiveBeacons(roomId, matrixClient);
- const mapCenterUri = getMapCenterUri(liveBeacons);
- // TODO probably show loader or placeholder when there is no location
- // to center the map on
+ const [isSidebarOpen, setSidebarOpen] = useState(false);
+
+ const { bounds, centerGeoUri } = useInitialMapPosition(liveBeacons, focusBeacon);
return (
= ({ roomId, matrixClient, onFinished }
fixedWidth={false}
>
-
+ :
+ setSidebarOpen(false)} /> :
+ setSidebarOpen(true)}
+ data-test-id='beacon-view-dialog-open-sidebar'
+ className='mx_BeaconViewDialog_viewListButton'
+ >
+
+ }
+
);
diff --git a/src/components/views/beacon/DialogOwnBeaconStatus.tsx b/src/components/views/beacon/DialogOwnBeaconStatus.tsx
new file mode 100644
index 00000000000..6ae1e8f5b8f
--- /dev/null
+++ b/src/components/views/beacon/DialogOwnBeaconStatus.tsx
@@ -0,0 +1,80 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useContext } from 'react';
+import { Room, Beacon } from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
+import { useEventEmitterState } from '../../../hooks/useEventEmitter';
+import { OwnProfileStore } from '../../../stores/OwnProfileStore';
+import OwnBeaconStatus from './OwnBeaconStatus';
+import { BeaconDisplayStatus } from './displayStatus';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import MemberAvatar from '../avatars/MemberAvatar';
+import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
+
+interface Props {
+ roomId: Room['roomId'];
+}
+
+const useOwnBeacon = (roomId: Room['roomId']): Beacon | undefined => {
+ const ownBeacon = useEventEmitterState(
+ OwnProfileStore.instance,
+ OwnBeaconStoreEvent.LivenessChange,
+ () => {
+ const [ownBeaconId] = OwnBeaconStore.instance.getLiveBeaconIds(roomId);
+ return OwnBeaconStore.instance.getBeaconById(ownBeaconId);
+ },
+ );
+
+ return ownBeacon;
+};
+
+const DialogOwnBeaconStatus: React.FC = ({ roomId }) => {
+ const beacon = useOwnBeacon(roomId);
+
+ const matrixClient = useContext(MatrixClientContext);
+ const room = matrixClient.getRoom(roomId);
+
+ if (!beacon?.isLive) {
+ return null;
+ }
+
+ const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self;
+ const beaconMember = isSelfLocation ?
+ room.getMember(beacon.beaconInfoOwner) :
+ undefined;
+
+ return = ({ beacons, requestClose }) => {
+ return ): void => {
+ useEffect(() => {
+ // chromium sets the minimum timer interval to 1000ms
+ // for inactive tabs
+ // refresh beacon monitors when the tab becomes active again
+ const onPageVisibilityChanged = () => {
+ if (document.visibilityState === 'visible') {
+ liveBeaconIds.map(identifier => beacons.get(identifier)?.monitorLiveness());
+ }
+ };
+ if (liveBeaconIds.length) {
+ document.addEventListener("visibilitychange", onPageVisibilityChanged);
+ }
+ () => {
+ document.removeEventListener("visibilitychange", onPageVisibilityChanged);
+ };
+ }, [liveBeaconIds, beacons]);
+};
+
const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => {
const isMonitoringLiveLocation = useEventEmitterState(
OwnBeaconStore.instance,
@@ -53,10 +87,18 @@ const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => {
() => OwnBeaconStore.instance.isMonitoringLiveLocation,
);
- const beaconIdsWithWireError = useEventEmitterState(
+ const beaconIdsWithLocationPublishError = useEventEmitterState(
OwnBeaconStore.instance,
- OwnBeaconStoreEvent.WireError,
- () => OwnBeaconStore.instance.getLiveBeaconIdsWithWireError(),
+ OwnBeaconStoreEvent.LocationPublishError,
+ () => OwnBeaconStore.instance.getLiveBeaconIdsWithLocationPublishError(),
+ );
+
+ const beaconIdsWithStoppingError = useEventEmitterState(
+ OwnBeaconStore.instance,
+ OwnBeaconStoreEvent.BeaconUpdateError,
+ () => OwnBeaconStore.instance.getLiveBeaconIds().filter(
+ beaconId => OwnBeaconStore.instance.beaconUpdateErrors.has(beaconId),
+ ),
);
const liveBeaconIds = useEventEmitterState(
@@ -65,13 +107,18 @@ const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => {
() => OwnBeaconStore.instance.getLiveBeaconIds(),
);
- const hasWireErrors = !!beaconIdsWithWireError.length;
+ const hasLocationPublishErrors = !!beaconIdsWithLocationPublishError.length;
+ const hasStoppingErrors = !!beaconIdsWithStoppingError.length;
+
+ useLivenessMonitor(liveBeaconIds, OwnBeaconStore.instance.beacons);
if (!isMonitoringLiveLocation) {
return null;
}
- const relevantBeaconRoomId = chooseBestBeaconRoomId(liveBeaconIds, beaconIdsWithWireError);
+ const relevantBeaconRoomId = chooseBestBeaconRoomId(
+ liveBeaconIds, beaconIdsWithStoppingError, beaconIdsWithLocationPublishError,
+ );
const onWarningClick = relevantBeaconRoomId ? () => {
dispatcher.dispatch({
@@ -81,14 +128,12 @@ const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => {
});
} : undefined;
- const label = hasWireErrors ?
- _t('An error occured whilst sharing your live location') :
- _t('You are sharing your live location');
+ const label = getLabel(hasStoppingErrors, hasLocationPublishErrors);
return > = ({
- beacon, displayStatus, className, ...rest
+ beacon, displayStatus, ...rest
}) => {
const {
- hasWireError,
+ hasLocationPublishError,
hasStopSharingError,
stoppingInProgress,
onStopSharing,
- onResetWireError,
+ onResetLocationPublishError,
} = useOwnLiveBeacons([beacon?.identifier]);
// combine display status with errors that only occur for user's own beacons
- const ownDisplayStatus = hasWireError || hasStopSharingError ?
+ const ownDisplayStatus = hasLocationPublishError || hasStopSharingError ?
BeaconDisplayStatus.Error :
displayStatus;
return > = ({
{ _t('Stop') }
}
- { hasWireError &&
{ _t('Retry') }
diff --git a/src/components/views/beacon/RoomLiveShareWarning.tsx b/src/components/views/beacon/RoomLiveShareWarning.tsx
index 01c749a26ab..2fe76a10e88 100644
--- a/src/components/views/beacon/RoomLiveShareWarning.tsx
+++ b/src/components/views/beacon/RoomLiveShareWarning.tsx
@@ -15,7 +15,6 @@ limitations under the License.
*/
import React from 'react';
-import classNames from 'classnames';
import { Room } from 'matrix-js-sdk/src/matrix';
import { _t } from '../../../languageHandler';
@@ -28,8 +27,8 @@ import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
import LiveTimeRemaining from './LiveTimeRemaining';
-const getLabel = (hasWireError: boolean, hasStopSharingError: boolean): string => {
- if (hasWireError) {
+const getLabel = (hasLocationPublishError: boolean, hasStopSharingError: boolean): string => {
+ if (hasLocationPublishError) {
return _t('An error occured whilst sharing your live location, please try again');
}
if (hasStopSharingError) {
@@ -45,34 +44,34 @@ interface RoomLiveShareWarningInnerProps {
const RoomLiveShareWarningInner: React.FC = ({ liveBeaconIds, roomId }) => {
const {
onStopSharing,
- onResetWireError,
+ onResetLocationPublishError,
beacon,
stoppingInProgress,
hasStopSharingError,
- hasWireError,
+ hasLocationPublishError,
} = useOwnLiveBeacons(liveBeaconIds);
if (!beacon) {
return null;
}
- const hasError = hasStopSharingError || hasWireError;
+ const hasError = hasStopSharingError || hasLocationPublishError;
const onButtonClick = () => {
- if (hasWireError) {
- onResetWireError();
+ if (hasLocationPublishError) {
+ onResetLocationPublishError();
} else {
onStopSharing();
}
};
return
= ({ l
>
{ hasError ? _t('Retry') : _t('Stop sharing') }
- { hasWireError &&
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useState } from "react";
+
+import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
+import IconizedContextMenu, { IconizedContextMenuOptionList, IconizedContextMenuRadio } from "./IconizedContextMenu";
+import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
+import { _t, _td } from "../../../languageHandler";
+
+const SECTION_NAMES: Record = {
+ [MediaDeviceKindEnum.AudioInput]: _td("Input devices"),
+ [MediaDeviceKindEnum.AudioOutput]: _td("Output devices"),
+ [MediaDeviceKindEnum.VideoInput]: _td("Cameras"),
+};
+
+interface IDeviceContextMenuDeviceProps {
+ label: string;
+ selected: boolean;
+ onClick: () => void;
+}
+
+const DeviceContextMenuDevice: React.FC = ({ label, selected, onClick }) => {
+ return = ({ deviceKind }) => {
+ const [devices, setDevices] = useState([]);
+ const [selectedDevice, setSelectedDevice] = useState(MediaDeviceHandler.getDevice(deviceKind));
+
+ useEffect(() => {
+ const getDevices = async () => {
+ return setDevices((await MediaDeviceHandler.getDevices())[deviceKind]);
+ };
+ getDevices();
+ }, [deviceKind]);
+
+ const onDeviceClick = (deviceId: string): void => {
+ MediaDeviceHandler.instance.setDevice(deviceId, deviceKind);
+ setSelectedDevice(deviceId);
+ };
+
+ return
+ { devices.map(({ label, deviceId }) => {
+ return onDeviceClick(deviceId)}
+ />;
+ }) }
+ ;
+};
+
+interface IProps extends IContextMenuProps {
+ deviceKinds: MediaDeviceKind[];
+}
+
+const DeviceContextMenu: React.FC = ({ deviceKinds, ...props }) => {
+ return
+ { deviceKinds.map((kind) => {
+ return ;
+};
+
+export default DeviceContextMenu;
diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx
index 2c6bdb3776b..9b7896790ef 100644
--- a/src/components/views/context_menus/IconizedContextMenu.tsx
+++ b/src/components/views/context_menus/IconizedContextMenu.tsx
@@ -33,6 +33,7 @@ interface IProps extends IContextMenuProps {
interface IOptionListProps {
first?: boolean;
red?: boolean;
+ label?: string;
className?: string;
}
@@ -126,13 +127,20 @@ export const IconizedContextMenuOption: React.FC = ({
;
};
-export const IconizedContextMenuOptionList: React.FC = ({ first, red, className, children }) => {
+export const IconizedContextMenuOptionList: React.FC = ({
+ first,
+ red,
+ className,
+ label,
+ children,
+}) => {
const classes = classNames("mx_IconizedContextMenu_optionList", className, {
mx_IconizedContextMenu_optionList_notFirst: !first,
mx_IconizedContextMenu_optionList_red: red,
});
return
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,12 +16,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { ReactElement } from 'react';
+import React, { createRef } from 'react';
import { EventStatus, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
import { Relations } from 'matrix-js-sdk/src/models/relations';
import { RoomMemberEvent } from "matrix-js-sdk/src/models/room-member";
-import { M_LOCATION } from 'matrix-js-sdk/src/@types/location';
import { M_POLL_START } from "matrix-events-sdk";
import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -30,77 +30,80 @@ import Modal from '../../../Modal';
import Resend from '../../../Resend';
import SettingsStore from '../../../settings/SettingsStore';
import { isUrlPermitted } from '../../../HtmlUtils';
-import { isContentActionable } from '../../../utils/EventUtils';
+import { canEditContent, canForward, editEvent, isContentActionable, isLocationEvent } from '../../../utils/EventUtils';
import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from './IconizedContextMenu';
import { ReadPinsEventId } from "../right_panel/types";
import { Action } from "../../../dispatcher/actions";
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import { ButtonEvent } from '../elements/AccessibleButton';
+import { copyPlaintext, getSelectedText } from '../../../utils/strings';
+import ContextMenu, { toRightOf, IPosition, ChevronFace } from '../../structures/ContextMenu';
+import ReactionPicker from '../emojipicker/ReactionPicker';
import ViewSource from '../../structures/ViewSource';
import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
import ShareDialog from '../dialogs/ShareDialog';
-import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import { ChevronFace, IPosition } from '../../structures/ContextMenu';
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
import EndPollDialog from '../dialogs/EndPollDialog';
import { isPollEnded } from '../messages/MPollBody';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { GetRelationsForEvent, IEventTileOps } from "../rooms/EventTile";
import { OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwardDialogPayload";
import { OpenReportEventDialogPayload } from "../../../dispatcher/payloads/OpenReportEventDialogPayload";
import { createMapSiteLink } from '../../../utils/location';
-export function canCancel(status: EventStatus): boolean {
- return status === EventStatus.QUEUED || status === EventStatus.NOT_SENT || status === EventStatus.ENCRYPTING;
-}
-
-export interface IEventTileOps {
- isWidgetHidden(): boolean;
- unhideWidget(): void;
-}
-
-export interface IOperableEventTile {
- getEventTileOps(): IEventTileOps;
-}
-
interface IProps extends IPosition {
chevronFace: ChevronFace;
/* the MatrixEvent associated with the context menu */
mxEvent: MatrixEvent;
- /* an optional EventTileOps implementation that can be used to unhide preview widgets */
+ // An optional EventTileOps implementation that can be used to unhide preview widgets
eventTileOps?: IEventTileOps;
+ // Callback called when the menu is dismissed
permalinkCreator?: RoomPermalinkCreator;
/* an optional function to be called when the user clicks collapse thread, if not provided hide button */
collapseReplyChain?(): void;
/* callback called when the menu is dismissed */
onFinished(): void;
- /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
+ // If the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding)
onCloseDialog?(): void;
- getRelationsForEvent?: (
- eventId: string,
- relationType: string,
- eventType: string
- ) => Relations;
+ // True if the menu is being used as a right click menu
+ rightClick?: boolean;
+ // The Relations model from the JS SDK for reactions to `mxEvent`
+ reactions?: Relations;
+ // A permalink to the event
+ showPermalink?: boolean;
+
+ getRelationsForEvent?: GetRelationsForEvent;
}
interface IState {
canRedact: boolean;
canPin: boolean;
+ reactionPickerDisplayed: boolean;
}
export default class MessageContextMenu extends React.Component {
static contextType = RoomContext;
public context!: React.ContextType;
- state = {
- canRedact: false,
- canPin: false,
- };
+ private reactButtonRef = createRef(); // XXX Ref to a functional component
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ canRedact: false,
+ canPin: false,
+ reactionPickerDisplayed: false,
+ };
+ }
- componentDidMount() {
+ public componentDidMount() {
MatrixClientPeg.get().on(RoomMemberEvent.PowerLevel, this.checkPermissions);
this.checkPermissions();
}
- componentWillUnmount() {
+ public componentWillUnmount(): void {
const cli = MatrixClientPeg.get();
if (cli) {
cli.removeListener(RoomMemberEvent.PowerLevel, this.checkPermissions);
@@ -233,11 +236,45 @@ export default class MessageContextMenu extends React.Component
this.closeMenu();
};
+ private onCopyPermalinkClick = (e: ButtonEvent): void => {
+ e.preventDefault(); // So that we don't open the permalink
+ copyPlaintext(this.getPermalink());
+ this.closeMenu();
+ };
+
private onCollapseReplyChainClick = (): void => {
this.props.collapseReplyChain();
this.closeMenu();
};
+ private onCopyClick = (): void => {
+ copyPlaintext(getSelectedText());
+ this.closeMenu();
+ };
+
+ private onEditClick = (): void => {
+ editEvent(this.props.mxEvent, this.context.timelineRenderingType, this.props.getRelationsForEvent);
+ this.closeMenu();
+ };
+
+ private onReplyClick = (): void => {
+ dis.dispatch({
+ action: 'reply_to_event',
+ event: this.props.mxEvent,
+ context: this.context.timelineRenderingType,
+ });
+ this.closeMenu();
+ };
+
+ private onReactClick = (): void => {
+ this.setState({ reactionPickerDisplayed: true });
+ };
+
+ private onCloseReactionPicker = (): void => {
+ this.setState({ reactionPickerDisplayed: false });
+ this.closeMenu();
+ };
+
private onEndPollClick = (): void => {
const matrixClient = MatrixClientPeg.get();
Modal.createTrackedDialog('End Poll', '', EndPollDialog, {
@@ -258,11 +295,16 @@ export default class MessageContextMenu extends React.Component
});
}
+ private getPermalink(): string {
+ if (!this.props.permalinkCreator) return;
+ return this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+ }
+
private getUnsentReactions(): MatrixEvent[] {
return this.getReactions(e => e.status === EventStatus.NOT_SENT);
}
- private viewInRoom = () => {
+ private viewInRoom = (): void => {
dis.dispatch({
action: Action.ViewRoom,
event_id: this.props.mxEvent.getId(),
@@ -273,39 +315,35 @@ export default class MessageContextMenu extends React.Component
this.closeMenu();
};
- render() {
+ public render(): JSX.Element {
const cli = MatrixClientPeg.get();
const me = cli.getUserId();
- const mxEvent = this.props.mxEvent;
+ const { mxEvent, rightClick, showPermalink, eventTileOps, reactions, collapseReplyChain } = this.props;
const eventStatus = mxEvent.status;
const unsentReactionsCount = this.getUnsentReactions().length;
-
- let openInMapSiteButton: JSX.Element;
- let endPollButton: JSX.Element;
- let resendReactionsButton: JSX.Element;
- let redactButton: JSX.Element;
- let forwardButton: JSX.Element;
- let pinButton: JSX.Element;
- let unhidePreviewButton: JSX.Element;
- let externalURLButton: JSX.Element;
- let quoteButton: JSX.Element;
- let collapseReplyChain: JSX.Element;
- let redactItemList: JSX.Element;
-
+ const contentActionable = isContentActionable(mxEvent);
+ const permalink = this.getPermalink();
// status is SENT before remote-echo, null after
const isSent = !eventStatus || eventStatus === EventStatus.SENT;
- if (!mxEvent.isRedacted()) {
- if (unsentReactionsCount !== 0) {
- resendReactionsButton = (
-
);
}
+ let openInMapSiteButton: JSX.Element;
if (this.canOpenInMapSite(mxEvent)) {
const mapSiteLink = createMapSiteLink(mxEvent);
openInMapSiteButton = (
@@ -335,73 +374,73 @@ export default class MessageContextMenu extends React.Component
);
}
- if (isContentActionable(mxEvent)) {
- if (canForward(mxEvent)) {
- forwardButton = (
-
);
}
- if (this.props.eventTileOps) { // this event is rendered using TextualBody
+ let quoteButton: JSX.Element;
+ if (eventTileOps) { // this event is rendered using TextualBody
quoteButton = (
}
// Bridges can provide a 'external_url' to link back to the source.
- if (typeof (mxEvent.getContent().external_url) === "string" &&
+ let externalURLButton: JSX.Element;
+ if (
+ typeof (mxEvent.getContent().external_url) === "string" &&
isUrlPermitted(mxEvent.getContent().external_url)
) {
externalURLButton = (
@@ -444,8 +486,9 @@ export default class MessageContextMenu extends React.Component
);
}
- if (this.props.collapseReplyChain) {
- collapseReplyChain = (
+ let collapseReplyChainButton: JSX.Element;
+ if (collapseReplyChain) {
+ collapseReplyChainButton = (
);
}
- const { timelineRenderingType } = this.context;
- const isThread = (
- timelineRenderingType === TimelineRenderingType.Thread ||
- timelineRenderingType === TimelineRenderingType.ThreadsList
- );
- const isThreadRootEvent = isThread && this.props.mxEvent.isThreadRoot;
+ let copyButton: JSX.Element;
+ if (rightClick && getSelectedText()) {
+ copyButton = (
+
- { isThreadRootEvent &&
+ { copyButton }
+
+ );
+ }
+
+ let quickItemsList: JSX.Element;
+ if (editButton || replyButton || reactButton) {
+ quickItemsList = (
+
+ { reactButton }
+ { replyButton }
+ { editButton }
+
+ );
+ }
+
+ const commonItemsList = (
+
+ { viewInRoomButton }
{ openInMapSiteButton }
{ endPollButton }
{ quoteButton }
@@ -490,10 +599,11 @@ export default class MessageContextMenu extends React.Component
{ unhidePreviewButton }
{ viewSourceButton }
{ resendReactionsButton }
- { collapseReplyChain }
+ { collapseReplyChainButton }
);
+ let redactItemList: JSX.Element;
if (redactButton) {
redactItemList = (
@@ -501,33 +611,40 @@ export default class MessageContextMenu extends React.Component
);
}
+
+ let reactionPicker: JSX.Element;
+ if (this.state.reactionPickerDisplayed) {
+ const buttonRect = (this.reactButtonRef.current as HTMLElement)?.getBoundingClientRect();
+ reactionPicker = (
+
+
+ );
+ }
+
return (
-
- { commonItemsList }
- { redactItemList }
-
+
+
+ { nativeItemsList }
+ { quickItemsList }
+ { commonItemsList }
+ { redactItemList }
+
+ { reactionPicker }
+
);
}
}
-function canForward(event: MatrixEvent): boolean {
- return !(
- isLocationEvent(event) ||
- M_POLL_START.matches(event.getType())
- );
-}
-
-function isLocationEvent(event: MatrixEvent): boolean {
- const eventType = event.getType();
- return (
- M_LOCATION.matches(eventType) ||
- (
- eventType === EventType.RoomMessage &&
- M_LOCATION.matches(event.getContent().msgtype)
- )
- );
-}
diff --git a/src/components/views/context_menus/SpaceContextMenu.tsx b/src/components/views/context_menus/SpaceContextMenu.tsx
index d9286c618b4..5d045900453 100644
--- a/src/components/views/context_menus/SpaceContextMenu.tsx
+++ b/src/components/views/context_menus/SpaceContextMenu.tsx
@@ -16,7 +16,7 @@ limitations under the License.
import React, { useContext } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
@@ -136,6 +136,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
const hasPermissionToAddSpaceChild = space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
const canAddRooms = hasPermissionToAddSpaceChild && shouldShowComponent(UIComponent.CreateRooms);
+ const canAddVideoRooms = canAddRooms && SettingsStore.getValue("feature_video_rooms");
const canAddSubSpaces = hasPermissionToAddSpaceChild && shouldShowComponent(UIComponent.CreateSpaces);
let newRoomSection: JSX.Element;
@@ -149,6 +150,14 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
onFinished();
};
+ const onNewVideoRoomClick = (ev: ButtonEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ showCreateNewRoom(space, RoomType.ElementVideo);
+ onFinished();
+ };
+
const onNewSubspaceClick = (ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
@@ -169,6 +178,14 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
onClick={onNewRoomClick}
/>
}
+ { canAddVideoRooms &&
+ {
// align the context menu's icons with the icon which opened the context menu
- const left = elementRect.left + window.pageXOffset + elementRect.width;
- const top = elementRect.bottom + window.pageYOffset;
+ const left = elementRect.left + window.scrollX + elementRect.width;
+ const top = elementRect.bottom + window.scrollY;
const chevronFace = ChevronFace.None;
return { left, top, chevronFace };
};
diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx
index 1aeeccc724b..b6a46bd2aca 100644
--- a/src/components/views/context_menus/WidgetContextMenu.tsx
+++ b/src/components/views/context_menus/WidgetContextMenu.tsx
@@ -110,7 +110,8 @@ const WidgetContextMenu: React.FC = ({
}
let snapshotButton;
- if (widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
+ const screenshotsEnabled = SettingsStore.getValue("enableWidgetScreenshots");
+ if (screenshotsEnabled && widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
const onSnapshotClick = () => {
widgetMessaging?.takeScreenshot().then(data => {
dis.dispatch({
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.tsx b/src/components/views/dialogs/DeactivateAccountDialog.tsx
index a505d5e647d..dbdc3b3639a 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.tsx
+++ b/src/components/views/dialogs/DeactivateAccountDialog.tsx
@@ -86,7 +86,7 @@ export default class DeactivateAccountDialog extends React.Component
= ({ roomId, onFinished }) => {
;
}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6881c1c52d8..5c1bf48cac2 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -200,7 +200,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => {
}, {
key: "number",
test: ({ value }) => {
- const parsedSize = parseInt(value as string, 10);
+ const parsedSize = parseInt(value, 10);
return validateNumberInRange(1, 2000)(parsedSize);
},
invalid: () => {
@@ -238,7 +238,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => {
}, {
key: "number",
test: ({ value }) => {
- const parsedSize = parseInt(value as string, 10);
+ const parsedSize = parseInt(value, 10);
return validateNumberInRange(1, 10 ** 8)(parsedSize);
},
invalid: () => {
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 0a063df9c7b..100b04bc5ac 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -131,7 +131,7 @@ const Entry: React.FC = ({ room, type, content, matrixClient: cli,
@@ -261,6 +261,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
{ rooms.length > 0 ? (
rooms.slice(start, end).map(room =>
diff --git a/src/components/views/dialogs/MessageEditHistoryDialog.tsx b/src/components/views/dialogs/MessageEditHistoryDialog.tsx
index 2dedfb52937..0f51530a128 100644
--- a/src/components/views/dialogs/MessageEditHistoryDialog.tsx
+++ b/src/components/views/dialogs/MessageEditHistoryDialog.tsx
@@ -138,7 +138,8 @@ export default class MessageEditHistoryDialog extends React.PureComponent = ({ initialText = "", onFinished }) =>
const results: [Result[], Result[], Result[]] = [[], [], []];
+ // Group results in their respective sections
possibleResults.forEach(entry => {
if (isRoomResult(entry)) {
if (!entry.room.normalizedName.includes(normalizedQuery) &&
@@ -295,8 +299,25 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) =>
results[entry.section].push(entry);
});
+ // Sort results by most recent activity
+
+ const myUserId = cli.getUserId();
+ for (const resultArray of results) {
+ resultArray.sort((a: Result, b: Result) => {
+ // This is not a room result, it should appear at the bottom of
+ // the list
+ if (!(a as IRoomResult).room) return 1;
+ if (!(b as IRoomResult).room) return -1;
+
+ const roomA = (a as IRoomResult).room;
+ const roomB = (b as IRoomResult).room;
+
+ return recentAlgorithm.getLastTs(roomB, myUserId) - recentAlgorithm.getLastTs(roomA, myUserId);
+ });
+ }
+
return results;
- }, [possibleResults, trimmedQuery]);
+ }, [possibleResults, trimmedQuery, cli]);
const numResults = trimmedQuery ? people.length + rooms.length + spaces.length : 0;
useWebSearchMetrics(numResults, query.length, true);
@@ -367,16 +388,16 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) =>
);
}
- const otherResult = (result as IResult);
+ // IResult case
return (
);
};
diff --git a/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx b/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx
deleted file mode 100644
index 5a5d6e38229..00000000000
--- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import { Room } from "matrix-js-sdk/src/models/room";
-import classNames from 'classnames';
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
-import { dialogTermsInteractionCallback, TermsNotSignedError } from "../../../Terms";
-import * as ScalarMessaging from "../../../ScalarMessaging";
-import { IntegrationManagerInstance } from "../../../integrations/IntegrationManagerInstance";
-import ScalarAuthClient from "../../../ScalarAuthClient";
-import AccessibleButton from "../elements/AccessibleButton";
-import IntegrationManager from "../settings/IntegrationManager";
-import { IDialogProps } from "./IDialogProps";
-
-interface IProps extends IDialogProps {
- /**
- * Optional room where the integration manager should be open to
- */
- room?: Room;
-
- /**
- * Optional screen to open on the integration manager
- */
- screen?: string;
-
- /**
- * Optional integration ID to open in the integration manager
- */
- integrationId?: string;
-}
-
-interface IState {
- managers: IntegrationManagerInstance[];
- busy: boolean;
- currentIndex: number;
- currentConnected: boolean;
- currentLoading: boolean;
- currentScalarClient: ScalarAuthClient;
-}
-
-export default class TabbedIntegrationManagerDialog extends React.Component {
- constructor(props: IProps) {
- super(props);
-
- this.state = {
- managers: IntegrationManagers.sharedInstance().getOrderedManagers(),
- busy: true,
- currentIndex: 0,
- currentConnected: false,
- currentLoading: true,
- currentScalarClient: null,
- };
- }
-
- public componentDidMount(): void {
- this.openManager(0, true);
- }
-
- private openManager = async (i: number, force = false): Promise => {
- if (i === this.state.currentIndex && !force) return;
-
- const manager = this.state.managers[i];
- const client = manager.getScalarClient();
- this.setState({
- busy: true,
- currentIndex: i,
- currentLoading: true,
- currentConnected: false,
- currentScalarClient: client,
- });
-
- ScalarMessaging.setOpenManagerUrl(manager.uiUrl);
-
- client.setTermsInteractionCallback((policyInfo, agreedUrls) => {
- // To avoid visual glitching of two modals stacking briefly, we customise the
- // terms dialog sizing when it will appear for the integration manager so that
- // it gets the same basic size as the IM's own modal.
- return dialogTermsInteractionCallback(
- policyInfo, agreedUrls, 'mx_TermsDialog_forIntegrationManager',
- );
- });
-
- try {
- await client.connect();
- if (!client.hasCredentials()) {
- this.setState({
- busy: false,
- currentLoading: false,
- currentConnected: false,
- });
- } else {
- this.setState({
- busy: false,
- currentLoading: false,
- currentConnected: true,
- });
- }
- } catch (e) {
- if (e instanceof TermsNotSignedError) {
- return;
- }
-
- logger.error(e);
- this.setState({
- busy: false,
- currentLoading: false,
- currentConnected: false,
- });
- }
- };
-
- private renderTabs(): JSX.Element[] {
- return this.state.managers.map((m, i) => {
- const classes = classNames({
- 'mx_TabbedIntegrationManagerDialog_tab': true,
- 'mx_TabbedIntegrationManagerDialog_currentTab': this.state.currentIndex === i,
- });
- return (
- this.openManager(i)}
- key={`tab_${i}`}
- disabled={this.state.busy}
- >
- { m.name }
-
- );
- });
- }
-
- public renderTab(): JSX.Element {
- let uiUrl = null;
- if (this.state.currentScalarClient) {
- uiUrl = this.state.currentScalarClient.getScalarInterfaceUrlForRoom(
- this.props.room,
- this.props.screen,
- this.props.integrationId,
- );
- }
- return {/* no-op */}}
- />;
- }
-
- public render(): JSX.Element {
- return (
- void): Promise => {
if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
- await makeRequest({
+ makeRequest({
type: 'm.login.password',
identifier: {
type: 'm.id.user',
@@ -106,7 +106,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent) => ({
@@ -85,8 +81,6 @@ const validServer = withValidation({
],
});
-export type Protocols = Record;
-
interface IProps {
protocols: Protocols;
selectedServerName: string;
diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index bc96bfe7084..3db6d0dfb05 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -53,6 +53,7 @@ interface IProps extends React.InputHTMLAttributes {
tabIndex?: number;
disabled?: boolean;
className?: string;
+ triggerOnMouseDown?: boolean;
onClick(e?: ButtonEvent): void | Promise;
}
@@ -78,13 +79,18 @@ export default function AccessibleButton({
className,
onKeyDown,
onKeyUp,
+ triggerOnMouseDown,
...restProps
}: IProps) {
const newProps: IAccessibleButtonProps = restProps;
if (disabled) {
newProps["aria-disabled"] = true;
} else {
- newProps.onClick = onClick;
+ if (triggerOnMouseDown) {
+ newProps.onMouseDown = onClick;
+ } else {
+ newProps.onClick = onClick;
+ }
// We need to consume enter onKeyDown and space onKeyUp
// otherwise we are risking also activating other keyboard focusable elements
// that might receive focus as a result of the AccessibleButtonClick action
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index d7a001460ea..1e0abe1fe9b 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -23,11 +23,12 @@ import Tooltip, { Alignment } from './Tooltip';
interface IProps extends React.ComponentProps {
title: string;
tooltip?: React.ReactNode;
- label?: React.ReactNode;
+ label?: string;
tooltipClassName?: string;
forceHide?: boolean;
yOffset?: number;
alignment?: Alignment;
+ onHover?: (hovering: boolean) => void;
onHideTooltip?(ev: SyntheticEvent): void;
}
@@ -52,6 +53,7 @@ export default class AccessibleTooltipButton extends React.PureComponent {
+ if (this.props.onHover) this.props.onHover(true);
if (this.props.forceHide) return;
this.setState({
hover: true,
@@ -59,6 +61,7 @@ export default class AccessibleTooltipButton extends React.PureComponent {
+ if (this.props.onHover) this.props.onHover(false);
this.setState({
hover: false,
});
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
index e9e8c9474a5..1eba26a3d4e 100644
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -117,30 +117,6 @@ export default class AppTile extends React.Component {
showLayoutButtons: true,
};
- // We track a count of all "live" `AppTile`s for a given widget UID.
- // For this purpose, an `AppTile` is considered live from the time it is
- // constructed until it is unmounted. This is used to aid logic around when
- // to tear down the widget iframe. See `componentWillUnmount` for details.
- private static liveTilesByUid = new Map();
-
- public static addLiveTile(widgetId: string, roomId: string): void {
- const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
- const refs = this.liveTilesByUid.get(uid) ?? 0;
- this.liveTilesByUid.set(uid, refs + 1);
- }
-
- public static removeLiveTile(widgetId: string, roomId: string): void {
- const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
- const refs = this.liveTilesByUid.get(uid);
- if (refs) this.liveTilesByUid.set(uid, refs - 1);
- }
-
- public static isLive(widgetId: string, roomId: string): boolean {
- const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
- const refs = this.liveTilesByUid.get(uid) ?? 0;
- return refs > 0;
- }
-
private contextMenuButton = createRef();
private iframe: HTMLIFrameElement; // ref to the iframe (callback style)
private allowedWidgetsWatchRef: string;
@@ -152,7 +128,10 @@ export default class AppTile extends React.Component {
constructor(props: IProps) {
super(props);
- AppTile.addLiveTile(this.props.app.id, this.props.app.roomId);
+ // Tiles in miniMode are floating, and therefore not docked
+ if (!this.props.miniMode) {
+ ActiveWidgetStore.instance.dockWidget(this.props.app.id, this.props.app.roomId);
+ }
// The key used for PersistedElement
this.persistKey = getPersistKey(WidgetUtils.getWidgetUid(this.props.app));
@@ -284,27 +263,14 @@ export default class AppTile extends React.Component {
public componentWillUnmount(): void {
this.unmounted = true;
- // It might seem simplest to always tear down the widget itself here,
- // and indeed that would be a bit easier to reason about... however, we
- // support moving widgets between containers (e.g. top <-> center).
- // During such a move, this component will unmount from the old
- // container and remount in the new container. By keeping the widget
- // iframe loaded across this transition, the widget doesn't notice that
- // anything happened, which improves overall widget UX. During this kind
- // of movement between containers, the new `AppTile` for the new
- // container is constructed before the old one unmounts. By counting the
- // mounted `AppTile`s for each widget, we know to only tear down the
- // widget iframe when the last the `AppTile` unmounts.
- AppTile.removeLiveTile(this.props.app.id, this.props.app.roomId);
-
- // We also support a separate "persistence" mode where a single widget
- // can request to be "sticky" and follow you across rooms in a PIP
- // container.
- const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(
- this.props.app.id, this.props.app.roomId,
- );
+ if (!this.props.miniMode) {
+ ActiveWidgetStore.instance.undockWidget(this.props.app.id, this.props.app.roomId);
+ }
- if (!AppTile.isLive(this.props.app.id, this.props.app.roomId) && !isActiveWidget) {
+ // Only tear down the widget if no other component is keeping it alive,
+ // because we support moving widgets between containers, in which case
+ // another component will keep it loaded throughout the transition
+ if (!ActiveWidgetStore.instance.isLive(this.props.app.id, this.props.app.roomId)) {
this.endWidgetActions();
}
diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx
index 352c5990680..b3dfae99118 100644
--- a/src/components/views/elements/AppWarning.tsx
+++ b/src/components/views/elements/AppWarning.tsx
@@ -1,3 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
import React from 'react';
interface IProps {
diff --git a/src/components/views/elements/CopyableText.tsx b/src/components/views/elements/CopyableText.tsx
index d1632af3825..f95cbcbd168 100644
--- a/src/components/views/elements/CopyableText.tsx
+++ b/src/components/views/elements/CopyableText.tsx
@@ -16,6 +16,7 @@ limitations under the License.
*/
import React, { useState } from "react";
+import classNames from "classnames";
import { _t } from "../../../languageHandler";
import { copyPlaintext } from "../../../utils/strings";
@@ -23,11 +24,12 @@ import { ButtonEvent } from "./AccessibleButton";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
interface IProps {
- children: React.ReactNode;
+ children?: React.ReactNode;
getTextToCopy: () => string;
+ border?: boolean;
}
-const CopyableText: React.FC = ({ children, getTextToCopy }) => {
+const CopyableText: React.FC = ({ children, getTextToCopy, border=true }) => {
const [tooltip, setTooltip] = useState(undefined);
const onCopyClickInternal = async (e: ButtonEvent) => {
@@ -42,7 +44,11 @@ const CopyableText: React.FC = ({ children, getTextToCopy }) => {
}
};
- return
+
+ { _t('Close') }
+
+
+ }
+ { isSidebarOpen ?
+
+ { isSelfLocation ?
+
;
+};
+
+export default DialogOwnBeaconStatus;
diff --git a/src/components/views/beacon/DialogSidebar.tsx b/src/components/views/beacon/DialogSidebar.tsx
new file mode 100644
index 00000000000..4365b5fa8b6
--- /dev/null
+++ b/src/components/views/beacon/DialogSidebar.tsx
@@ -0,0 +1,50 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
+
+import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
+import Heading from '../typography/Heading';
+import BeaconListItem from './BeaconListItem';
+
+interface Props {
+ beacons: Beacon[];
+ requestClose: () => void;
+}
+
+const DialogSidebar: React.FC
+
;
+};
+
+export default DialogSidebar;
diff --git a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
index 07ba4cd2369..b93d8de1ae7 100644
--- a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
+++ b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
@@ -15,7 +15,8 @@ limitations under the License.
*/
import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { Beacon, BeaconIdentifier, Room } from 'matrix-js-sdk/src/matrix';
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
import { _t } from '../../../languageHandler';
@@ -34,10 +35,14 @@ interface Props {
* Choose the most relevant beacon
* and get its roomId
*/
-const chooseBestBeaconRoomId = (liveBeaconIds, errorBeaconIds): string | undefined => {
+const chooseBestBeaconRoomId = (
+ liveBeaconIds: BeaconIdentifier[],
+ updateErrorBeaconIds: BeaconIdentifier[],
+ locationErrorBeaconIds: BeaconIdentifier[],
+): Room['roomId'] | undefined => {
// both lists are ordered by creation timestamp in store
// so select latest beacon
- const beaconId = errorBeaconIds?.[0] ?? liveBeaconIds?.[0];
+ const beaconId = updateErrorBeaconIds?.[0] ?? locationErrorBeaconIds?.[0] ?? liveBeaconIds?.[0];
if (!beaconId) {
return undefined;
}
@@ -46,6 +51,35 @@ const chooseBestBeaconRoomId = (liveBeaconIds, errorBeaconIds): string | undefin
return beacon?.roomId;
};
+const getLabel = (hasStoppingErrors: boolean, hasLocationErrors: boolean): string => {
+ if (hasStoppingErrors) {
+ return _t('An error occurred while stopping your live location');
+ }
+ if (hasLocationErrors) {
+ return _t('An error occured whilst sharing your live location');
+ }
+ return _t('You are sharing your live location');
+};
+
+const useLivenessMonitor = (liveBeaconIds: BeaconIdentifier[], beacons: Map
+ { _t('View List') }
+
+
+
+ -
+ { beacons.map((beacon) =>
+ { label &&
;
};
diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx
index 75cdebc9535..cf61ee5bfdd 100644
--- a/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/src/components/views/context_menus/MessageContextMenu.tsx
@@ -1,6 +1,7 @@
/*
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 - 2022 Šimon Brandner { label }
}
{ children }
-
-
);
diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx
index 14fb69b1563..fb2f7113dd8 100644
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@@ -101,6 +101,7 @@ const DevtoolsDialog: React.FC{ _t( - "This will make your account permanently unusable. " + - "You will not be able to log in, and no one will be able to re-register the same " + - "user ID. " + - "This will cause your account to leave all rooms it is participating in, and it " + - "will remove your account details from your identity server. " + - "This action is irreversible.", - {}, - { b: (sub) => { sub } }, - ) }
- -{ _t( - "Deactivating your account does not by default cause us to forget messages you " + - "have sent. " + - "If you would like us to forget your messages, please tick the box below.", - {}, - { b: (sub) => { sub } }, - ) }
- -{ _t( - "Message visibility in Matrix is similar to email. " + - "Our forgetting your messages means that messages you have sent will not be shared " + - "with any new or unregistered users, but registered users who already have access " + - "to these messages will still have access to their copy.", - ) }
+{ _t("Confirm that you would like to deactivate your account. If you proceed:") }
+-
+
- { _t("You will not be able to reactivate your account") } +
- { _t("You will no longer be able to log in") } +
- { _t("No one will be able to reuse your username (MXID), including you: this username will remain unavailable") } +
- { _t("You will leave all rooms and DMs that you are in") } +
- { _t("You will be removed from the identity server: your friends will no longer be able to find you with your email or phone number") } +
{ _t("Your old messages will still be visible to people who received them, just like emails you sent in the past. Would you like to hide your sent messages from people who join rooms in the future?") }
@@ -238,20 +222,12 @@ export default class DeactivateAccountDialog extends React.Component
{ _t("Options") }
-
- );
- }
-}
diff --git a/src/components/views/dialogs/devtools/ServerInfo.tsx b/src/components/views/dialogs/devtools/ServerInfo.tsx
index ff18d836e5c..23b6528eacc 100644
--- a/src/components/views/dialogs/devtools/ServerInfo.tsx
+++ b/src/components/views/dialogs/devtools/ServerInfo.tsx
@@ -74,13 +74,13 @@ const ServerInfo = ({ onBack }: IDevtoolsProps) => {
}
- { this.renderTabs() }
-
-
- { this.renderTab() }
-
- { _t("Client Versions") }
- { capabilities !== FAILED_TO_LOAD + { clientVersions !== FAILED_TO_LOAD ?{ _t("Failed to load.") }
}
{ _t("Server Versions") }
- { capabilities !== FAILED_TO_LOAD + { serverVersions !== FAILED_TO_LOAD ?{ _t("Failed to load.") }
}
diff --git a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
index ca5b1db9fbc..4b1928c3a73 100644
--- a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
+++ b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
@@ -93,7 +93,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent
+ const className = classNames("mx_CopyableText", {
+ mx_CopyableText_border: border,
+ });
+
+ return {
? Math.min(parentBox.width, this.props.maxParentWidth)
: parentBox.width
);
- const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
+ const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.scrollY;
const top = baseTop + offset;
- const right = width - parentBox.left - window.pageXOffset;
- const left = parentBox.right + window.pageXOffset;
+ const right = width - parentBox.left - window.scrollX;
+ const left = parentBox.right + window.scrollX;
const horizontalCenter = (
- parentBox.left - window.pageXOffset + (parentWidth / 2)
+ parentBox.left - window.scrollX + (parentWidth / 2)
);
switch (this.props.alignment) {
case Alignment.Natural:
@@ -149,6 +151,16 @@ export default class Tooltip extends React.Component {
style.top = baseTop + parentBox.height - 50;
style.left = horizontalCenter;
style.transform = "translate(-50%)";
+ break;
+ case Alignment.TopRight:
+ style.top = baseTop - 5;
+ style.right = width - parentBox.right - window.scrollX;
+ style.transform = "translate(5px, -100%)";
+ break;
+ case Alignment.TopCenter:
+ style.top = baseTop - 5;
+ style.left = horizontalCenter;
+ style.transform = "translate(-50%, -100%)";
}
return style;
diff --git a/src/components/views/emojipicker/Category.tsx b/src/components/views/emojipicker/Category.tsx
index 7cd5b96bee8..d4ea4e89ffb 100644
--- a/src/components/views/emojipicker/Category.tsx
+++ b/src/components/views/emojipicker/Category.tsx
@@ -52,7 +52,7 @@ class Category extends React.PureComponent {
const { onClick, onMouseEnter, onMouseLeave, selectedEmojis, emojis } = this.props;
const emojisForRow = emojis.slice(rowIndex * 8, (rowIndex + 1) * 8);
return ( {
>
{ this.categories.map(category => {
const emojis = this.memoizedDataByCategory[category.id];
- const categoryElement = ((
+ const categoryElement = (
{
onMouseLeave={this.onHoverEmojiEnd}
selectedEmojis={this.props.selectedEmojis}
/>
- ));
+ );
const height = EmojiPicker.categoryHeightForEmojiCount(emojis.length);
heightBefore += height;
return categoryElement;
diff --git a/src/components/views/emojipicker/QuickReactions.tsx b/src/components/views/emojipicker/QuickReactions.tsx
index c0336a759de..f53b30f565d 100644
--- a/src/components/views/emojipicker/QuickReactions.tsx
+++ b/src/components/views/emojipicker/QuickReactions.tsx
@@ -72,7 +72,7 @@ class QuickReactions extends React.Component {
}
= ({
+ onSubmit,
+}) => {
+ const [isEnabled, setEnabled] = useState(false);
+ return (
+ {
positionOptions: {
enableHighAccuracy: true,
},
- trackUserLocation: true,
+ trackUserLocation: false,
});
this.map.addControl(this.geolocate);
diff --git a/src/components/views/location/LocationShareMenu.tsx b/src/components/views/location/LocationShareMenu.tsx
index 7b102f4b0f0..795a7802375 100644
--- a/src/components/views/location/LocationShareMenu.tsx
+++ b/src/components/views/location/LocationShareMenu.tsx
@@ -21,12 +21,14 @@ import { IEventRelation } from 'matrix-js-sdk/src/models/event';
import MatrixClientContext from '../../../contexts/MatrixClientContext';
import ContextMenu, { AboveLeftOf } from '../../structures/ContextMenu';
import LocationPicker, { ILocationPickerProps } from "./LocationPicker";
-import { shareLiveLocation, shareLocation } from './shareLocation';
+import { shareLiveLocation, shareLocation, LocationShareType } from './shareLocation';
import SettingsStore from '../../../settings/SettingsStore';
import ShareDialogButtons from './ShareDialogButtons';
import ShareType from './ShareType';
-import { LocationShareType } from './shareLocation';
import { OwnProfileStore } from '../../../stores/OwnProfileStore';
+import { EnableLiveShare } from './EnableLiveShare';
+import { useFeatureEnabled } from '../../../hooks/useSettings';
+import { SettingLevel } from '../../../settings/SettingLevel';
type Props = Omit & {
onFinished: (ev?: SyntheticEvent) => void;
@@ -37,11 +39,7 @@ type Props = Omit & {
};
const getEnabledShareTypes = (): LocationShareType[] => {
- const enabledShareTypes = [LocationShareType.Own];
-
- if (SettingsStore.getValue("feature_location_share_live")) {
- enabledShareTypes.push(LocationShareType.Live);
- }
+ const enabledShareTypes = [LocationShareType.Own, LocationShareType.Live];
if (SettingsStore.getValue("feature_location_share_pin_drop")) {
enabledShareTypes.push(LocationShareType.Pin);
@@ -60,6 +58,7 @@ const LocationShareMenu: React.FC = ({
}) => {
const matrixClient = useContext(MatrixClientContext);
const enabledShareTypes = getEnabledShareTypes();
+ const isLiveShareEnabled = useFeatureEnabled("feature_location_share_live");
const multipleShareTypesEnabled = enabledShareTypes.length > 1;
@@ -73,19 +72,32 @@ const LocationShareMenu: React.FC = ({
shareLiveLocation(matrixClient, roomId, displayName, openMenu) :
shareLocation(matrixClient, roomId, shareType, relation, openMenu);
+ const onLiveShareEnableSubmit = () => {
+ SettingsStore.setValue("feature_location_share_live", undefined, SettingLevel.DEVICE, true);
+ };
+
+ const shouldAdvertiseLiveLabsFlag = shareType === LocationShareType.Live && !isLiveShareEnabled;
+
return
{
}
};
- private onImageEnter = (e: React.MouseEvent): void => {
+ protected onImageEnter = (e: React.MouseEvent): void => {
this.setState({ hover: true });
if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {
@@ -148,7 +148,7 @@ export default class MImageBody extends React.Component {
imgElement.src = this.state.contentUrl;
};
- private onImageLeave = (e: React.MouseEvent): void => {
+ protected onImageLeave = (e: React.MouseEvent): void => {
this.setState({ hover: false });
if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {
diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx
index 94abc1c7a88..ff87af1dc3a 100644
--- a/src/components/views/messages/MLocationBody.tsx
+++ b/src/components/views/messages/MLocationBody.tsx
@@ -96,7 +96,7 @@ export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error:
(_t('Shared their location: ') + event.getContent()?.body) :
(_t('Shared a location: ') + event.getContent()?.body);
- return
{ children }
{
- room: Room;
- onlyKnownUsers?: boolean;
- numShown?: number;
+ members: RoomMember[];
+ faceSize: number;
+ overflow: boolean;
+ tooltip?: ReactNode;
+ children?: ReactNode;
}
-const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
-
-const FacePile: FC = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }) => {
- const cli = useContext(MatrixClientContext);
- const isJoined = room.getMyMembership() === "join";
- let members = useRoomMembers(room);
- const count = members.length;
-
- // sort users with an explicit avatar first
- const iteratees = [member => member.getMxcAvatarUrl() ? 0 : 1];
- if (onlyKnownUsers) {
- members = members.filter(isKnownMember);
- } else {
- // sort known users first
- iteratees.unshift(member => isKnownMember(member) ? 0 : 1);
- }
-
- // exclude ourselves from the shown members list
- const shownMembers = sortBy(members.filter(m => m.userId !== cli.getUserId()), iteratees).slice(0, numShown);
- if (shownMembers.length < 1) return null;
-
- // We reverse the order of the shown faces in CSS to simplify their visual overlap,
- // reverse members in tooltip order to make the order between the two match up.
- const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", ");
-
- let tooltip: ReactNode;
- if (props.onClick) {
- let subText: string;
- if (isJoined) {
- subText = _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers });
- } else {
- subText = _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers });
- }
-
- tooltip = = ({ members, faceSize, overflow, tooltip, children, ...props }) => {
+ const faces = members.map(
+ tooltip
+ ? m =>
+ ,
+ );
+
+ const pileContents = <>
+ { overflow ? : null }
+ { faces }
+ ;
return this.updateCSSWidth(this.state.width));
}
diff --git a/src/components/views/elements/InteractiveTooltip.tsx b/src/components/views/elements/InteractiveTooltip.tsx
index 62d0c43d06a..ca8ae4c8fd5 100644
--- a/src/components/views/elements/InteractiveTooltip.tsx
+++ b/src/components/views/elements/InteractiveTooltip.tsx
@@ -352,10 +352,10 @@ export default class InteractiveTooltip extends React.Component
const targetRect = this.target.getBoundingClientRect();
if (this.props.direction === Direction.Left) {
- const targetLeft = targetRect.left + window.pageXOffset;
+ const targetLeft = targetRect.left + window.scrollX;
return !contentRect || (targetLeft - contentRect.width > MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
} else {
- const targetRight = targetRect.right + window.pageXOffset;
+ const targetRight = targetRect.right + window.scrollX;
const spaceOnRight = UIStore.instance.windowWidth - targetRight;
return contentRect && (spaceOnRight - contentRect.width < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
}
@@ -366,10 +366,10 @@ export default class InteractiveTooltip extends React.Component
const targetRect = this.target.getBoundingClientRect();
if (this.props.direction === Direction.Top) {
- const targetTop = targetRect.top + window.pageYOffset;
+ const targetTop = targetRect.top + window.scrollY;
return !contentRect || (targetTop - contentRect.height > MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
} else {
- const targetBottom = targetRect.bottom + window.pageYOffset;
+ const targetBottom = targetRect.bottom + window.scrollY;
const spaceBelow = UIStore.instance.windowHeight - targetBottom;
return contentRect && (spaceBelow - contentRect.height < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
}
@@ -429,10 +429,10 @@ export default class InteractiveTooltip extends React.Component
const targetRect = this.target.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
- const targetLeft = targetRect.left + window.pageXOffset;
- const targetRight = targetRect.right + window.pageXOffset;
- const targetBottom = targetRect.bottom + window.pageYOffset;
- const targetTop = targetRect.top + window.pageYOffset;
+ const targetLeft = targetRect.left + window.scrollX;
+ const targetRight = targetRect.right + window.scrollX;
+ const targetBottom = targetRect.bottom + window.scrollY;
+ const targetTop = targetRect.top + window.scrollY;
// Place the tooltip above the target by default. If we find that the
// tooltip content would extend past the safe area towards the window
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.tsx
similarity index 71%
rename from src/components/views/elements/Pill.js
rename to src/components/views/elements/Pill.tsx
index 7d5a9973c7f..f344f894569 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.tsx
@@ -13,67 +13,82 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
+
import React from 'react';
import classNames from 'classnames';
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 { logger } from "matrix-js-sdk/src/logger";
+import { MatrixClient } from 'matrix-js-sdk/src/client';
import dis from '../../../dispatcher/dispatcher';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { getPrimaryPermalinkEntity, parsePermalink } from "../../../utils/permalinks/Permalinks";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { Action } from "../../../dispatcher/actions";
-import Tooltip from './Tooltip';
-import RoomAvatar from "../avatars/RoomAvatar";
-import MemberAvatar from "../avatars/MemberAvatar";
+import Tooltip, { Alignment } from './Tooltip';
+import RoomAvatar from '../avatars/RoomAvatar';
+import MemberAvatar from '../avatars/MemberAvatar';
+
+export enum PillType {
+ UserMention = 'TYPE_USER_MENTION',
+ RoomMention = 'TYPE_ROOM_MENTION',
+ AtRoomMention = 'TYPE_AT_ROOM_MENTION', // '@room' mention
+}
+
+interface IProps {
+ // The Type of this Pill. If url is given, this is auto-detected.
+ type?: PillType;
+ // The URL to pillify (no validation is done)
+ url?: string;
+ // Whether the pill is in a message
+ inMessage?: boolean;
+ // The room in which this pill is being rendered
+ room?: Room;
+ // Whether to include an avatar in the pill
+ shouldShowPillAvatar?: boolean;
+}
+
+interface IState {
+ // ID/alias of the room/user
+ resourceId: string;
+ // Type of pill
+ pillType: string;
+ // The member related to the user pill
+ member?: RoomMember;
+ // The room related to the room pill
+ room?: Room;
+ // Is the user hovering the pill
+ hover: boolean;
+}
-class Pill extends React.Component {
- static roomNotifPos(text) {
+export default class Pill extends React.Component {
+ private unmounted = true;
+ private matrixClient: MatrixClient;
+
+ public static roomNotifPos(text: string): number {
return text.indexOf("@room");
}
- static roomNotifLen() {
+ public static roomNotifLen(): number {
return "@room".length;
}
- static TYPE_USER_MENTION = 'TYPE_USER_MENTION';
- static TYPE_ROOM_MENTION = 'TYPE_ROOM_MENTION';
- static TYPE_AT_ROOM_MENTION = 'TYPE_AT_ROOM_MENTION'; // '@room' mention
-
- static propTypes = {
- // The Type of this Pill. If url is given, this is auto-detected.
- type: PropTypes.string,
- // The URL to pillify (no validation is done)
- url: PropTypes.string,
- // Whether the pill is in a message
- inMessage: PropTypes.bool,
- // The room in which this pill is being rendered
- room: PropTypes.instanceOf(Room),
- // Whether to include an avatar in the pill
- shouldShowPillAvatar: PropTypes.bool,
- // Whether to render this pill as if it were highlit by a selection
- isSelected: PropTypes.bool,
- };
-
- state = {
- // ID/alias of the room/user
- resourceId: null,
- // Type of pill
- pillType: null,
+ constructor(props: IProps) {
+ super(props);
- // The member related to the user pill
- member: null,
- // The room related to the room pill
- room: null,
- // Is the user hovering the pill
- hover: false,
- };
+ this.state = {
+ resourceId: null,
+ pillType: null,
+ member: null,
+ room: null,
+ hover: false,
+ };
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- // eslint-disable-next-line camelcase
- async UNSAFE_componentWillReceiveProps(nextProps) {
+ // eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
+ public async UNSAFE_componentWillReceiveProps(nextProps: IProps): Promise {
let resourceId;
let prefix;
@@ -89,28 +104,28 @@ class Pill extends React.Component {
}
const pillType = this.props.type || {
- '@': Pill.TYPE_USER_MENTION,
- '#': Pill.TYPE_ROOM_MENTION,
- '!': Pill.TYPE_ROOM_MENTION,
+ '@': PillType.UserMention,
+ '#': PillType.RoomMention,
+ '!': PillType.RoomMention,
}[prefix];
let member;
let room;
switch (pillType) {
- case Pill.TYPE_AT_ROOM_MENTION: {
+ case PillType.AtRoomMention: {
room = nextProps.room;
}
break;
- case Pill.TYPE_USER_MENTION: {
+ case PillType.UserMention: {
const localMember = nextProps.room ? nextProps.room.getMember(resourceId) : undefined;
member = localMember;
if (!localMember) {
member = new RoomMember(null, resourceId);
this.doProfileLookup(resourceId, member);
}
- break;
}
- case Pill.TYPE_ROOM_MENTION: {
+ break;
+ case PillType.RoomMention: {
const localRoom = resourceId[0] === '#' ?
MatrixClientPeg.get().getRooms().find((r) => {
return r.getCanonicalAlias() === resourceId ||
@@ -122,39 +137,39 @@ class Pill extends React.Component {
// a room avatar and name.
// this.doRoomProfileLookup(resourceId, member);
}
- break;
}
+ break;
}
this.setState({ resourceId, pillType, member, room });
}
- componentDidMount() {
- this._unmounted = false;
- this._matrixClient = MatrixClientPeg.get();
+ public componentDidMount(): void {
+ this.unmounted = false;
+ this.matrixClient = MatrixClientPeg.get();
// eslint-disable-next-line new-cap
this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves.
}
- componentWillUnmount() {
- this._unmounted = true;
+ public componentWillUnmount(): void {
+ this.unmounted = true;
}
- onMouseOver = () => {
+ private onMouseOver = (): void => {
this.setState({
hover: true,
});
};
- onMouseLeave = () => {
+ private onMouseLeave = (): void => {
this.setState({
hover: false,
});
};
- doProfileLookup(userId, member) {
+ private doProfileLookup(userId: string, member): void {
MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
- if (this._unmounted) {
+ if (this.unmounted) {
return;
}
member.name = resp.displayname;
@@ -173,7 +188,7 @@ class Pill extends React.Component {
});
}
- onUserPillClicked = (e) => {
+ private onUserPillClicked = (e): void => {
e.preventDefault();
dis.dispatch({
action: Action.ViewUser,
@@ -181,7 +196,7 @@ class Pill extends React.Component {
});
};
- render() {
+ public render(): JSX.Element {
const resource = this.state.resourceId;
let avatar = null;
@@ -191,7 +206,7 @@ class Pill extends React.Component {
let href = this.props.url;
let onClick;
switch (this.state.pillType) {
- case Pill.TYPE_AT_ROOM_MENTION: {
+ case PillType.AtRoomMention: {
const room = this.props.room;
if (room) {
linkText = "@room";
@@ -200,9 +215,9 @@ class Pill extends React.Component {
}
pillClass = 'mx_AtRoomPill';
}
- break;
}
- case Pill.TYPE_USER_MENTION: {
+ break;
+ case PillType.UserMention: {
// If this user is not a member of this room, default to the empty member
const member = this.state.member;
if (member) {
@@ -210,15 +225,15 @@ class Pill extends React.Component {
member.rawDisplayName = member.rawDisplayName || '';
linkText = member.rawDisplayName;
if (this.props.shouldShowPillAvatar) {
- avatar = ;
+ avatar = ;
}
pillClass = 'mx_UserPill';
href = null;
onClick = this.onUserPillClicked;
}
- break;
}
- case Pill.TYPE_ROOM_MENTION: {
+ break;
+ case PillType.RoomMention: {
const room = this.state.room;
if (room) {
linkText = room.name || resource;
@@ -226,31 +241,27 @@ class Pill extends React.Component {
avatar = ;
}
}
- pillClass = 'mx_RoomPill';
- break;
+ pillClass = room?.isSpaceRoom() ? "mx_SpacePill" : "mx_RoomPill";
}
+ break;
}
const classes = classNames("mx_Pill", pillClass, {
"mx_UserPill_me": userId === MatrixClientPeg.get().getUserId(),
- "mx_UserPill_selected": this.props.isSelected,
});
if (this.state.pillType) {
- const { yOffset } = this.props;
-
let tip;
if (this.state.hover && resource) {
- tip =
+ return
{ this.props.inMessage ?
@@ -260,7 +271,6 @@ class Pill extends React.Component {
:
@@ -275,5 +285,3 @@ class Pill extends React.Component {
}
}
}
-
-export default Pill;
diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx
index 11498c5a55d..0272980ef07 100644
--- a/src/components/views/elements/ReplyChain.tsx
+++ b/src/components/views/elements/ReplyChain.tsx
@@ -31,7 +31,7 @@ import { getUserNameColorClass } from "../../../utils/FormattingUtils";
import { Action } from "../../../dispatcher/actions";
import Spinner from './Spinner';
import ReplyTile from "../rooms/ReplyTile";
-import Pill from './Pill';
+import Pill, { PillType } from './Pill';
import { ButtonEvent } from './AccessibleButton';
import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
import RoomContext from "../../../contexts/RoomContext";
@@ -223,7 +223,7 @@ export default class ReplyChain extends React.Component {
),
'pill': (
!!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+
+interface IProps extends HTMLAttributes {
+ room: Room;
+ onlyKnownUsers?: boolean;
+ numShown?: number;
+}
+
+const RoomFacePile: FC = (
+ { room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props },
+) => {
+ const cli = useContext(MatrixClientContext);
+ const isJoined = room.getMyMembership() === "join";
+ let members = useRoomMembers(room);
+ const count = members.length;
+
+ // sort users with an explicit avatar first
+ const iteratees = [member => member.getMxcAvatarUrl() ? 0 : 1];
+ if (onlyKnownUsers) {
+ members = members.filter(isKnownMember);
+ } else {
+ // sort known users first
+ iteratees.unshift(member => isKnownMember(member) ? 0 : 1);
+ }
+
+ // exclude ourselves from the shown members list
+ const shownMembers = sortBy(members.filter(m => m.userId !== cli.getUserId()), iteratees).slice(0, numShown);
+ if (shownMembers.length < 1) return null;
+
+ // We reverse the order of the shown faces in CSS to simplify their visual overlap,
+ // reverse members in tooltip order to make the order between the two match up.
+ const commaSeparatedMembers = shownMembers.map(m => m.name).reverse().join(", ");
+
+ let tooltip: ReactNode;
+ if (props.onClick) {
+ let subText: string;
+ if (isJoined) {
+ subText = _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers });
+ } else {
+ subText = _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers });
+ }
+
+ tooltip = numShown}
+ tooltip={tooltip}
+ {...props}
+ >
+ { onlyKnownUsers &&
+ { _t("%(count)s people you know have already joined", { count: members.length }) }
+ }
+ ;
+};
+
+export default RoomFacePile;
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 4679e269bff..b11e74e1e27 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -18,6 +18,7 @@ import React from "react";
import { chunk } from "lodash";
import classNames from "classnames";
import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Signup } from "matrix-analytics-events/types/typescript/Signup";
import PlatformPeg from "../../../PlatformPeg";
import AccessibleButton from "./AccessibleButton";
@@ -25,6 +26,7 @@ import { _t } from "../../../languageHandler";
import { IdentityProviderBrand, IIdentityProvider, ISSOFlow } from "../../../Login";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
import { mediaFromMxc } from "../../../customisations/Media";
+import { PosthogAnalytics } from "../../../PosthogAnalytics";
interface ISSOButtonProps extends Omit {
idp: IIdentityProvider;
@@ -50,6 +52,26 @@ const getIcon = (brand: IdentityProviderBrand | string) => {
}
};
+const getAuthenticationType = (brand: IdentityProviderBrand | string): Signup["authenticationType"] => {
+ switch (brand) {
+ case IdentityProviderBrand.Apple:
+ return "Apple";
+ case IdentityProviderBrand.Facebook:
+ return "Facebook";
+ case IdentityProviderBrand.Github:
+ return "GitHub";
+ case IdentityProviderBrand.Gitlab:
+ return "GitLab";
+ case IdentityProviderBrand.Google:
+ return "Google";
+ // Not supported on the analytics SDK at the moment.
+ // case IdentityProviderBrand.Twitter:
+ // return "Twitter";
+ default:
+ return "SSO";
+ }
+};
+
const SSOButton: React.FC = ({
matrixClient,
loginType,
@@ -62,6 +84,8 @@ const SSOButton: React.FC = ({
const label = idp ? _t("Continue with %(provider)s", { provider: idp.name }) : _t("Sign in with single sign-on");
const onClick = () => {
+ const authenticationType = getAuthenticationType(idp.brand);
+ PosthogAnalytics.instance.setAuthenticationType(authenticationType);
PlatformPeg.get().startSingleSignOn(matrixClient, loginType, fragmentAfterLogin, idp?.id);
};
diff --git a/src/components/views/elements/Tag.tsx b/src/components/views/elements/Tag.tsx
new file mode 100644
index 00000000000..c6887fd0e0a
--- /dev/null
+++ b/src/components/views/elements/Tag.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import AccessibleButton from "./AccessibleButton";
+import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
+
+interface IProps {
+ icon?: () => JSX.Element;
+ label: string;
+ onDeleteClick?: () => void;
+ disabled?: boolean;
+}
+
+export const Tag = ({
+ icon,
+ label,
+ onDeleteClick,
+ disabled = false,
+}: IProps) => {
+ return {
;
}
diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx
index 189bee393f3..8d817551d0e 100644
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@@ -32,6 +32,8 @@ export enum Alignment {
Top, // Centered
Bottom, // Centered
InnerBottom, // Inside the target, at the bottom
+ TopRight, // On top of the target, right aligned
+ TopCenter, // On top of the target, center aligned
}
export interface ITooltipProps {
@@ -114,12 +116,12 @@ export default class Tooltip extends React.Component
-
;
- } else {
- if (isJoined) {
- tooltip = _t("%(count)s members including you, %(commaSeparatedMembers)s", {
- count: count - 1,
- commaSeparatedMembers,
- });
- } else {
- tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
- count,
- commaSeparatedMembers,
- });
- }
- }
+const FacePile: FC
- { _t("View all %(count)s members", { count }) }
-
-
- { subText }
-
-
-
- { members.length > numShown ? : null }
- { shownMembers.map(m =>
-
- { onlyKnownUsers &&
- { _t("%(count)s people you know have already joined", { count: members.length }) }
- }
+ { tooltip ? (
+
+ { pileContents }
+
+ ) : (
+
;
};
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index c0e37d93d74..61fee35bdd7 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -44,7 +44,7 @@ export default class IRCTimelineProfileResizer extends React.Component
+ { pileContents }
+
+ ) }
+ { children }
+
;
+ } else {
+ if (isJoined) {
+ tooltip = _t("%(count)s members including you, %(commaSeparatedMembers)s", {
+ count: count - 1,
+ commaSeparatedMembers,
+ });
+ } else {
+ tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
+ count,
+ commaSeparatedMembers,
+ });
+ }
+ }
+
+ return
+ { _t("View all %(count)s members", { count }) }
+
+
+ { subText }
+
+
+ { icon?.() }
+ { label }
+ { onDeleteClick && (
+
+
+ ) }
+
;
+};
diff --git a/src/components/views/elements/TagComposer.tsx b/src/components/views/elements/TagComposer.tsx
index 19f3523f067..5d1bff84e8e 100644
--- a/src/components/views/elements/TagComposer.tsx
+++ b/src/components/views/elements/TagComposer.tsx
@@ -19,6 +19,7 @@ import React, { ChangeEvent, FormEvent } from "react";
import Field from "./Field";
import { _t } from "../../../languageHandler";
import AccessibleButton from "./AccessibleButton";
+import { Tag } from "./Tag";
interface IProps {
tags: string[];
@@ -80,10 +81,13 @@ export default class TagComposer extends React.PureComponent
- { this.props.tags.map((t, i) => (
- { t }
-
)) }
+ { this.props.tags.map((t, i) => (
+ {
- emojisForRow.map(emoji => ((
+ emojisForRow.map(emoji => (
{
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
- )))
+ ))
}
);
};
diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index e064df405a4..461ef4f079a 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -249,7 +249,7 @@ class EmojiPicker extends React.Component-
- { QUICK_REACTIONS.map(emoji => ((
+ { QUICK_REACTIONS.map(emoji => (
+ { _t('Live location sharing') }
+
+ { _t('OK') }
+
+
+ );
+};
diff --git a/src/components/views/location/LocationPicker.tsx b/src/components/views/location/LocationPicker.tsx
index 254ec335cbd..c7fb5cd3148 100644
--- a/src/components/views/location/LocationPicker.tsx
+++ b/src/components/views/location/LocationPicker.tsx
@@ -87,7 +87,7 @@ class LocationPicker extends React.Component+ { _t( + 'Please note: this is a labs feature using a temporary implementation. ' + + 'This means you will not be able to delete your location history, ' + + 'and advanced users will be able to see your location history ' + + 'even after you stop sharing your live location with this room.', + ) } +
+
- { shareType ?
+ { shouldAdvertiseLiveLabsFlag &&
+ setShareType(undefined)} onCancel={onFinished} />
diff --git a/src/components/views/location/Map.tsx b/src/components/views/location/Map.tsx
index 8776e8e8264..023ff2d5ccb 100644
--- a/src/components/views/location/Map.tsx
+++ b/src/components/views/location/Map.tsx
@@ -16,6 +16,7 @@ limitations under the License.
import React, { ReactNode, useContext, useEffect } from 'react';
import classNames from 'classnames';
+import maplibregl from 'maplibre-gl';
import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/matrix';
import { logger } from 'matrix-js-sdk/src/logger';
@@ -24,8 +25,9 @@ import { useEventEmitterState } from '../../../hooks/useEventEmitter';
import { parseGeoUri } from '../../../utils/location';
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
import { useMap } from '../../../utils/location/useMap';
+import { Bounds } from '../../../utils/beacon/bounds';
-const useMapWithStyle = ({ id, centerGeoUri, onError, interactive }) => {
+const useMapWithStyle = ({ id, centerGeoUri, onError, interactive, bounds }) => {
const bodyId = `mx_Map_${id}`;
// style config
@@ -49,12 +51,26 @@ const useMapWithStyle = ({ id, centerGeoUri, onError, interactive }) => {
try {
const coords = parseGeoUri(centerGeoUri);
map.setCenter({ lon: coords.longitude, lat: coords.latitude });
- } catch (error) {
- logger.error('Could not set map center', centerGeoUri);
+ } catch (_error) {
+ logger.error('Could not set map center');
}
}
}, [map, centerGeoUri]);
+ useEffect(() => {
+ if (map && bounds) {
+ try {
+ const lngLatBounds = new maplibregl.LngLatBounds(
+ [bounds.west, bounds.south],
+ [bounds.east, bounds.north],
+ );
+ map.fitBounds(lngLatBounds, { padding: 100, maxZoom: 15 });
+ } catch (_error) {
+ logger.error('Invalid map bounds');
+ }
+ }
+ }, [map, bounds]);
+
return {
map,
bodyId,
@@ -65,6 +81,7 @@ interface MapProps {
id: string;
interactive?: boolean;
centerGeoUri?: string;
+ bounds?: Bounds;
className?: string;
onClick?: () => void;
onError?: (error: Error) => void;
@@ -74,9 +91,15 @@ interface MapProps {
}
const Map: React.FC = ({
- centerGeoUri, className, id, onError, onClick, children, interactive,
+ bounds,
+ centerGeoUri,
+ children,
+ className,
+ id,
+ interactive,
+ onError, onClick,
}) => {
- const { map, bodyId } = useMapWithStyle({ centerGeoUri, onError, id, interactive });
+ const { map, bodyId } = useMapWithStyle({ centerGeoUri, onError, id, interactive, bounds });
const onMapClick = (
event: React.MouseEvent,
diff --git a/src/components/views/location/shareLocation.ts b/src/components/views/location/shareLocation.ts
index 6654a389a06..895f2c23c6c 100644
--- a/src/components/views/location/shareLocation.ts
+++ b/src/components/views/location/shareLocation.ts
@@ -25,6 +25,7 @@ import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
import QuestionDialog from "../dialogs/QuestionDialog";
import SdkConfig from "../../../SdkConfig";
+import { OwnBeaconStore } from "../../../stores/OwnBeaconStore";
export enum LocationShareType {
Own = 'Own',
@@ -70,7 +71,7 @@ export const shareLiveLocation = (
): ShareLocationFn => async ({ timeout }) => {
const description = _t(`%(displayName)s's live location`, { displayName });
try {
- await client.unstable_createLiveBeacon(
+ await OwnBeaconStore.instance.createLiveBeacon(
roomId,
makeBeaconInfoContent(
timeout ?? DEFAULT_LIVE_DURATION,
diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx
index f61ec346e4f..fb82cff29e2 100644
--- a/src/components/views/messages/MBeaconBody.tsx
+++ b/src/components/views/messages/MBeaconBody.tsx
@@ -32,8 +32,8 @@ import Spinner from '../elements/Spinner';
import Map from '../location/Map';
import SmartMarker from '../location/SmartMarker';
import OwnBeaconStatus from '../beacon/OwnBeaconStatus';
-import { IBodyProps } from "./IBodyProps";
import BeaconViewDialog from '../beacon/BeaconViewDialog';
+import { IBodyProps } from "./IBodyProps";
const useBeaconState = (beaconInfoEvent: MatrixEvent): {
beacon?: Beacon;
@@ -105,6 +105,7 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) =>
{
roomId: mxEvent.getRoomId(),
matrixClient,
+ focusBeacon: beacon,
},
"mx_BeaconViewDialog_wrapper",
false, // isPriority
@@ -145,12 +146,14 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) =>
className='mx_MBeaconBody_chin'
beacon={beacon}
displayStatus={displayStatus}
+ withIcon
/> :
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 5ed699b2327..73c59472fdd 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -138,7 +138,7 @@ export default class MImageBody extends React.Component
+ return
private lastCaret: DocumentOffset;
private lastSelection: ReturnType;
+ private readonly useMarkdownHandle: string;
private readonly emoticonSettingHandle: string;
private readonly shouldShowPillAvatarSettingHandle: string;
private readonly surroundWithHandle: string;
@@ -133,10 +133,13 @@ export default class BasicMessageEditor extends React.Component
super(props);
this.state = {
showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
+ useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
surroundWith: SettingsStore.getValue("MessageComposerInput.surroundWith"),
showVisualBell: false,
};
+ this.useMarkdownHandle = SettingsStore.watchSetting('MessageComposerInput.useMarkdown', null,
+ this.configureUseMarkdown);
this.emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
this.configureEmoticonAutoReplace);
this.configureEmoticonAutoReplace();
@@ -442,7 +445,7 @@ export default class BasicMessageEditor extends React.Component
}
} else if (!selection.isCollapsed && !isEmpty) {
this.hasTextSelected = true;
- if (this.formatBarRef.current) {
+ if (this.formatBarRef.current && this.state.useMarkdown) {
const selectionRect = selection.getRangeAt(0).getBoundingClientRect();
this.formatBarRef.current.showAt(selectionRect);
}
@@ -630,6 +633,14 @@ export default class BasicMessageEditor extends React.Component
this.setState({ completionIndex });
};
+ private configureUseMarkdown = (): void => {
+ const useMarkdown = SettingsStore.getValue("MessageComposerInput.useMarkdown");
+ this.setState({ useMarkdown });
+ if (!useMarkdown && this.formatBarRef.current) {
+ this.formatBarRef.current.hide();
+ }
+ };
+
private configureEmoticonAutoReplace = (): void => {
this.props.model.setTransformCallback(this.transform);
};
@@ -654,6 +665,7 @@ export default class BasicMessageEditor extends React.Component
this.editorRef.current.removeEventListener("input", this.onInput, true);
this.editorRef.current.removeEventListener("compositionstart", this.onCompositionStart, true);
this.editorRef.current.removeEventListener("compositionend", this.onCompositionEnd, true);
+ SettingsStore.unwatchSetting(this.useMarkdownHandle);
SettingsStore.unwatchSetting(this.emoticonSettingHandle);
SettingsStore.unwatchSetting(this.shouldShowPillAvatarSettingHandle);
SettingsStore.unwatchSetting(this.surroundWithHandle);
@@ -694,6 +706,10 @@ export default class BasicMessageEditor extends React.Component
}
public onFormatAction = (action: Formatting): void => {
+ if (!this.state.useMarkdown) {
+ return;
+ }
+
const range: Range = getRangeForSelection(this.editorRef.current, this.props.model, document.getSelection());
this.historyManager.ensureLastChangesPushed(this.props.model);
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index ce6d1b844e0..de1bdc9c85b 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -95,7 +95,10 @@ function createEditContent(
body: `${plainPrefix} * ${body}`,
};
- const formattedBody = htmlSerializeIfNeeded(model, { forceHTML: isReply });
+ const formattedBody = htmlSerializeIfNeeded(model, {
+ forceHTML: isReply,
+ useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
+ });
if (formattedBody) {
newContent.format = "org.matrix.custom.html";
newContent.formatted_body = formattedBody;
@@ -404,7 +407,9 @@ class EditMessageComposer extends React.Component Relations;
@@ -92,10 +96,19 @@ export type GetRelationsForEvent = (eventId: string, relationType: string, event
export interface IReadReceiptProps {
userId: string;
- roomMember: RoomMember;
+ roomMember: RoomMember | null;
ts: number;
}
+export interface IEventTileOps {
+ isWidgetHidden(): boolean;
+ unhideWidget(): void;
+}
+
+export interface IEventTileType extends React.Component {
+ getEventTileOps?(): IEventTileOps;
+}
+
interface IProps {
// the MatrixEvent to show
mxEvent: MatrixEvent;
@@ -209,9 +222,6 @@ interface IProps {
interface IState {
// Whether the action bar is focused.
actionBarFocused: boolean;
- // Whether all read receipts are being displayed. If not, only display
- // a truncation of them.
- allReadAvatars: boolean;
// Whether the event's sender has been verified.
verified: string;
// Whether onRequestKeysClick has been called since mounting.
@@ -220,6 +230,13 @@ interface IState {
reactions: Relations;
hover: boolean;
+
+ // Position of the context menu
+ contextMenu?: {
+ position: Pick;
+ showPermalink?: boolean;
+ };
+
isQuoteExpanded?: boolean;
thread: Thread;
@@ -230,8 +247,7 @@ interface IState {
export class UnwrappedEventTile extends React.Component {
private suppressReadReceiptAnimation: boolean;
private isListeningForReceipts: boolean;
- // TODO: Types
- private tile = React.createRef();
+ private tile = React.createRef();
private replyChain = React.createRef();
private threadState: ThreadNotificationState;
@@ -255,15 +271,14 @@ export class UnwrappedEventTile extends React.Component {
this.state = {
// Whether the action bar is focused.
actionBarFocused: false,
- // Whether all read receipts are being displayed. If not, only display
- // a truncation of them.
- allReadAvatars: false,
// Whether the event's sender has been verified.
verified: null,
// Whether onRequestKeysClick has been called since mounting.
previouslyRequestedKeys: false,
// The Relations model from the JS SDK for reactions to `mxEvent`
reactions: this.getReactions(),
+ // Context menu position
+ contextMenu: null,
hover: false,
@@ -387,8 +402,7 @@ export class UnwrappedEventTile extends React.Component {
}
private setupNotificationListener = (thread: Thread): void => {
- const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
- const notifications = RoomNotificationStateStore.instance.getThreadsRoomState(room);
+ const notifications = RoomNotificationStateStore.instance.getThreadsRoomState(thread.room);
this.threadState = notifications.getThreadRoomState(thread);
@@ -484,16 +498,18 @@ export class UnwrappedEventTile extends React.Component {
return null;
}
+ let thread = this.props.mxEvent.getThread();
/**
* Accessing the threads value through the room due to a race condition
* that will be solved when there are proper backend support for threads
* We currently have no reliable way to discover than an event is a thread
* when we are at the sync stage
*/
- const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
- const thread = room?.threads?.get(this.props.mxEvent.getId());
-
- return thread || null;
+ if (!thread) {
+ const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+ thread = room?.findThreadForEvent(this.props.mxEvent);
+ }
+ return thread ?? null;
}
private renderThreadPanelSummary(): JSX.Element | null {
@@ -502,7 +518,7 @@ export class UnwrappedEventTile extends React.Component {
}
return
{ message }
diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx
index eb56d8d2e5f..d754f04b08a 100644
--- a/src/components/views/messages/MStickerBody.tsx
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -39,11 +39,19 @@ export default class MStickerBody extends MImageBody {
return ![]({require("../../../../res/img/icons-show-stickers.svg").default})
;
+ return (
+
+ );
}
// Tooltip to show on mouse over
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index f4733df19f3..1ac389a6bc1 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -281,6 +281,9 @@ export default class MVideoBody extends React.PureComponent
src={contentUrl}
title={content.body}
controls
+ // Disable downloading as it doesn't work with e2ee video,
+ // users should use the dedicated Download button in the Message Action Bar
+ controlsList="nodownload"
preload={preload}
muted={autoplay}
autoPlay={autoplay}
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index 7bca48097c7..0effb252888 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -26,11 +26,11 @@ import type { Relations } from 'matrix-js-sdk/src/models/relations';
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher/dispatcher';
import ContextMenu, { aboveLeftOf, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
-import { isContentActionable, canEditContent, editEvent } from '../../../utils/EventUtils';
+import { isContentActionable, canEditContent, editEvent, canCancel } from '../../../utils/EventUtils';
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
-import MessageContextMenu, { canCancel } from "../context_menus/MessageContextMenu";
+import MessageContextMenu from "../context_menus/MessageContextMenu";
import Resend from "../../../Resend";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
@@ -308,6 +308,11 @@ export default class MessageActionBar extends React.PureComponent {
@@ -54,6 +54,10 @@ interface IProps extends Omit implements IMediaBody, IOperableEventTile {
private body: React.RefObject = createRef();
private mediaHelper: MediaEventHelper;
diff --git a/src/components/views/messages/UnknownBody.tsx b/src/components/views/messages/UnknownBody.tsx
index d9e70ff241f..cd1f06a788b 100644
--- a/src/components/views/messages/UnknownBody.tsx
+++ b/src/components/views/messages/UnknownBody.tsx
@@ -23,12 +23,12 @@ interface IProps {
children?: React.ReactNode;
}
-export default forwardRef(({ mxEvent, children }: IProps, ref: React.RefObject) => {
+export default forwardRef(({ mxEvent, children }: IProps, ref: React.RefObject) => {
const text = mxEvent.getContent().body;
return (
-
+ = ({ room }) => {
if (!managers.hasManager()) {
managers.openNoManagerDialog();
} else {
- if (SettingsStore.getValue("feature_many_integration_managers")) {
- managers.openAll(room);
- } else {
- managers.getPrimaryManager().open(room);
- }
+ // noinspection JSIgnoredPromiseFromCall
+ managers.getPrimaryManager().open(room);
}
};
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 934f88b0a74..7b45746c770 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -75,7 +75,6 @@ import { UIComponent } from "../../../settings/UIFeature";
import { TimelineRenderingType } from "../../../contexts/RoomContext";
import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
import { IRightPanelCardState } from '../../../stores/right-panel/RightPanelStoreIPanelState';
-import { useUserStatusMessage } from "../../../hooks/useUserStatusMessage";
import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
import PosthogTrackers from "../../../PosthogTrackers";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
@@ -292,13 +291,17 @@ function DevicesSection({ devices, userId, loading }: { devices: IDevice[], user
let expandButton;
if (expandSectionDevices.length) {
if (isExpanded) {
- expandButton = ( setExpanded(false)}
>
);
} else {
- expandButton = ( setExpanded(true)}
>
@@ -331,6 +334,7 @@ const MessageButton = ({ userId }: { userId: string }) => {
return (
{
if (busy) return;
setBusy(true);
@@ -383,6 +387,7 @@ const UserOptionsSection: React.FC<{
ignoreButton = (
@@ -413,14 +418,22 @@ const UserOptionsSection: React.FC<{
const room = cli.getRoom(member.roomId);
if (room?.getEventReadUpTo(member.userId)) {
readReceiptButton = (
-
+
{ _t('Jump to read receipt') }
);
}
insertPillButton = (
-
+
{ _t('Mention') }
);
@@ -448,7 +461,11 @@ const UserOptionsSection: React.FC<{
};
inviteUserButton = (
-
+
{ _t('Invite') }
);
@@ -456,7 +473,11 @@ const UserOptionsSection: React.FC<{
}
const shareUserButton = (
-
+
{ _t('Share Link to User') }
);
@@ -575,7 +596,9 @@ const RoomKickButton = ({ room, member, startUpdating, stopUpdating }: Omit
+ const kickLabel = room.isSpaceRoom() ?
+ member.membership === "invite" ? _t("Disinvite from space") : _t("Remove from space")
+ : member.membership === "invite" ? _t("Disinvite from room") : _t("Remove from room");
+
+ return
{ kickLabel }
;
};
@@ -637,7 +667,11 @@ const RedactMessagesButton: React.FC = ({ member }) => {
});
};
- return
+ return
{ _t("Remove recent messages") }
;
};
@@ -734,7 +768,11 @@ const BanToggleButton = ({ room, member, startUpdating, stopUpdating }: Omit
+ return
{ label }
;
};
@@ -804,7 +842,11 @@ const MuteToggleButton: React.FC = ({ member, room, powerLevels,
});
const muteLabel = muted ? _t("Unmute") : _t("Mute");
- return
+ return
{ muteLabel }
;
};
@@ -921,14 +963,9 @@ function useRoomPermissions(cli: MatrixClient, room: Room, user: RoomMember): IR
canEdit: false,
canInvite: false,
});
- const updateRoomPermissions = useCallback(() => {
- if (!room) {
- return;
- }
- const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
- if (!powerLevelEvent) return;
- const powerLevels = powerLevelEvent.getContent();
+ const updateRoomPermissions = useCallback(() => {
+ const powerLevels = room?.currentState.getStateEvents(EventType.RoomPowerLevels, "")?.getContent();
if (!powerLevels) return;
const me = room.getMember(cli.getUserId());
@@ -940,17 +977,14 @@ function useRoomPermissions(cli: MatrixClient, room: Room, user: RoomMember): IR
let modifyLevelMax = -1;
if (canAffectUser) {
- const editPowerLevel = (
- (powerLevels.events ? powerLevels.events["m.room.power_levels"] : null) ||
- powerLevels.state_default
- );
- if (me.powerLevel >= editPowerLevel && (isMe || me.powerLevel > them.powerLevel)) {
+ const editPowerLevel = powerLevels.events?.[EventType.RoomPowerLevels] ?? powerLevels.state_default ?? 50;
+ if (me.powerLevel >= editPowerLevel) {
modifyLevelMax = me.powerLevel;
}
}
setRoomPermissions({
- canInvite: me.powerLevel >= powerLevels.invite,
+ canInvite: me.powerLevel >= (powerLevels.invite ?? 0),
canEdit: modifyLevelMax >= 0,
modifyLevelMax,
});
@@ -1215,7 +1249,11 @@ const BasicUserInfo: React.FC<{
// FIXME this should be using cli instead of MatrixClientPeg.matrixClient
if (isSynapseAdmin && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
synapseDeactivateButton = (
-
+
{ _t("Deactivate user") }
);
@@ -1293,8 +1331,9 @@ const BasicUserInfo: React.FC<{
if (canVerify) {
if (hasCrossSigningKeys !== undefined) {
// Note: mx_UserInfo_verifyButton is for the end-to-end tests
- verifyButton = (
+ verifyButton = (
{
if (hasCrossSigningKeys) {
@@ -1306,7 +1345,7 @@ const BasicUserInfo: React.FC<{
>
{ _t("Verify") }
- );
+ );
} else if (!showDeviceListSpinner) {
// HACK: only show a spinner if the device section spinner is not shown,
// to avoid showing a double spinner
@@ -1319,6 +1358,7 @@ const BasicUserInfo: React.FC<{
if (member.userId == cli.getUserId()) {
editDevices = (
{
dis.dispatch({
@@ -1370,7 +1410,6 @@ const UserInfoHeader: React.FC<{
roomId?: string;
}> = ({ member, e2eStatus, roomId }) => {
const cli = useContext(MatrixClientContext);
- const statusMessage = useUserStatusMessage(member);
const onMemberAvatarClick = useCallback(() => {
const avatarUrl = (member as RoomMember).getMxcAvatarUrl
@@ -1431,11 +1470,6 @@ const UserInfoHeader: React.FC<{
);
}
- let statusLabel = null;
- if (statusMessage) {
- statusLabel = { statusMessage };
- }
-
let e2eIcon;
if (e2eStatus) {
e2eIcon =
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index a5dcf038133..068d096624f 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -32,7 +32,7 @@ import { parseEvent, parsePlainTextMessage } from '../../../editor/deserialize';
import { renderModel } from '../../../editor/render';
import TypingStore from "../../../stores/TypingStore";
import SettingsStore from "../../../settings/SettingsStore";
-import { Key } from "../../../Keyboard";
+import { IS_MAC, Key } from "../../../Keyboard";
import { EMOTICON_TO_EMOJI } from "../../../emoji";
import { CommandCategories, CommandMap, parseCommandString } from "../../../SlashCommands";
import Range from "../../../editor/range";
@@ -50,8 +50,6 @@ import { _t } from "../../../languageHandler";
const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$');
export const REGEX_EMOTICON = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')$');
-const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
-
const SURROUND_WITH_CHARACTERS = ["\"", "_", "`", "'", "*", "~", "$"];
const SURROUND_WITH_DOUBLE_CHARACTERS = new Map([
["(", ")"],
@@ -103,6 +101,7 @@ interface IProps {
}
interface IState {
+ useMarkdown: boolean;
showPillAvatar: boolean;
query?: string;
showVisualBell?: boolean;
@@ -124,6 +123,7 @@ export default class BasicMessageEditor extends React.Component { children }
;
}
- // Placeholder to show in place of the sticker image if
- // img onLoad hasn't fired yet.
+ // Placeholder to show in place of the sticker image if img onLoad hasn't fired yet.
protected getPlaceholder(width: number, height: number): JSX.Element {
if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
- return ;
+ return (
+
+ );
}
// Tooltip to show on mouse over
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index f4733df19f3..1ac389a6bc1 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -281,6 +281,9 @@ export default class MVideoBody extends React.PureComponent
{ text }
{ children }
-
+
);
});
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 018d2c6927f..fd69f46ef9c 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -207,11 +207,8 @@ const AppsSection: React.FC{ expandHideCaption }
{ UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, { roomId, withDisplayName: true }) }
{ presenceLabel }
- { statusLabel }
-
+
{ this.state.thread.length }
{
return actions.tweaks.highlight;
}
- private toggleAllReadAvatars = () => {
- this.setState({
- allReadAvatars: !this.state.allReadAvatars,
- });
- };
-
- private getReadAvatars() {
- if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
- return ({
action: Action.ComposerInsert,
@@ -898,10 +812,10 @@ export class UnwrappedEventTile extends React.Component {
private onActionBarFocusChange = (actionBarFocused: boolean) => {
this.setState({ actionBarFocused });
};
- // TODO: Types
- private getTile: () => any | null = () => this.tile.current;
- private getReplyChain = () => this.replyChain.current;
+ private getTile: () => IEventTileType = () => this.tile.current;
+
+ private getReplyChain = (): ReplyChain => this.replyChain.current;
private getReactions = () => {
if (
@@ -923,6 +837,57 @@ export class UnwrappedEventTile extends React.Component {
});
};
+ private onContextMenu = (ev: React.MouseEvent): void => {
+ this.showContextMenu(ev);
+ };
+
+ private onTimestampContextMenu = (ev: React.MouseEvent): void => {
+ this.showContextMenu(ev, true);
+ };
+
+ private showContextMenu(ev: React.MouseEvent, showPermalink?: boolean): void {
+ // Return if message right-click context menu isn't enabled
+ if (!SettingsStore.getValue("feature_message_right_click_context_menu")) return;
+
+ // Return if we're in a browser and click either an a tag or we have
+ // selected text, as in those cases we want to use the native browser
+ // menu
+ const clickTarget = ev.target as HTMLElement;
+ if (
+ !PlatformPeg.get().allowOverridingNativeContextMenus() &&
+ (clickTarget.tagName === "a" || clickTarget.closest("a") || getSelectedText())
+ ) return;
+
+ // There is no way to copy non-PNG images into clipboard, so we can't
+ // have our own handling for copying images, so we leave it to the
+ // Electron layer (webcontents-handler.ts)
+ if (ev.target instanceof HTMLImageElement) return;
+
+ // We don't want to show the menu when editing a message
+ if (this.props.editState) return;
+
+ ev.preventDefault();
+ ev.stopPropagation();
+ this.setState({
+ contextMenu: {
+ position: {
+ left: ev.clientX,
+ top: ev.clientY,
+ bottom: ev.clientY,
+ },
+ showPermalink: showPermalink,
+ },
+ actionBarFocused: true,
+ });
+ }
+
+ private onCloseMenu = (): void => {
+ this.setState({
+ contextMenu: null,
+ actionBarFocused: false,
+ });
+ };
+
private setQuoteExpanded = (expanded: boolean) => {
this.setState({
isQuoteExpanded: expanded,
@@ -941,6 +906,29 @@ export class UnwrappedEventTile extends React.Component {
return false;
}
+ private renderContextMenu(): React.ReactFragment {
+ if (!this.state.contextMenu) return null;
+
+ const tile = this.getTile();
+ const replyChain = this.getReplyChain();
+ const eventTileOps = tile?.getEventTileOps ? tile.getEventTileOps() : undefined;
+ const collapseReplyChain = replyChain?.canCollapse() ? replyChain.collapse : undefined;
+
+ return (
+ {
isLeftAlignedBubbleMessage,
noBubbleEvent,
isSeeingThroughMessageHiddenForModeration,
- } = getEventDisplayInfo(this.props.mxEvent, this.shouldHideEvent());
+ } = getEventDisplayInfo(this.props.mxEvent, this.context.showHiddenEvents, this.shouldHideEvent());
const { isQuoteExpanded } = this.state;
// This shouldn't happen: the caller should check we support this type
@@ -1005,7 +993,7 @@ export class UnwrappedEventTile extends React.Component {
// Note: we keep the `sending` state class for tests, not for our styles
mx_EventTile_sending: !isEditing && isSending,
mx_EventTile_highlight: this.shouldHighlight(),
- mx_EventTile_selected: this.props.isSelectedEvent,
+ mx_EventTile_selected: this.props.isSelectedEvent || this.state.contextMenu,
mx_EventTile_continuation: isContinuation || eventType === EventType.CallInvite,
mx_EventTile_last: this.props.last,
mx_EventTile_lastInSection: this.props.lastInSection,
@@ -1043,8 +1031,10 @@ export class UnwrappedEventTile extends React.Component {
if (this.context.timelineRenderingType === TimelineRenderingType.Notification) {
avatarSize = 24;
needsSenderProfile = true;
- } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
- avatarSize = 36;
+ } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ||
+ (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
+ ) {
+ avatarSize = 32;
needsSenderProfile = true;
} else if (eventType === EventType.RoomCreate || isBubbleMessage) {
avatarSize = 0;
@@ -1126,7 +1116,8 @@ export class UnwrappedEventTile extends React.Component {
&& (this.props.alwaysShowTimestamps
|| this.props.last
|| this.state.hover
- || this.state.actionBarFocused);
+ || this.state.actionBarFocused
+ || Boolean(this.state.contextMenu));
// Thread panel shows the timestamp of the last reply in that thread
const ts = this.context.timelineRenderingType !== TimelineRenderingType.ThreadsList
@@ -1197,6 +1188,7 @@ export class UnwrappedEventTile extends React.Component {
href={permalink}
onClick={this.onPermalinkClicked}
aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+ onContextMenu={this.onTimestampContextMenu}
>
{ timestamp }
;
@@ -1210,8 +1202,17 @@ export class UnwrappedEventTile extends React.Component {
let msgOption;
if (this.props.showReadReceipts) {
- const readAvatars = this.getReadAvatars();
- msgOption = readAvatars;
+ if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+ msgOption = {
,
-
-
- );
- }
-
- const avatars = [];
- const receiptOffset = 15;
- let left = 0;
-
- const receipts = this.props.readReceipts;
-
- for (let i = 0; i < receipts.length; ++i) {
- const receipt = receipts[i];
-
- let hidden = true;
- if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
- hidden = false;
- }
- // TODO: we keep the extra read avatars in the dom to make animation simpler
- // we could optimise this to reduce the dom size.
-
- // If hidden, set offset equal to the offset of the final visible avatar or
- // else set it proportional to index
- left = (hidden ? MAX_READ_AVATARS - 1 : i) * -receiptOffset;
-
- const userId = receipt.userId;
- let readReceiptInfo: IReadReceiptInfo;
-
- if (this.props.readReceiptMap) {
- readReceiptInfo = this.props.readReceiptMap[userId];
- if (!readReceiptInfo) {
- readReceiptInfo = {};
- this.props.readReceiptMap[userId] = readReceiptInfo;
- }
- }
-
- // add to the start so the most recent is on the end (ie. ends up rightmost)
- avatars.unshift(
-
-
- { remText }
- { avatars }
-
-
- );
- }
-
private onSenderProfileClick = () => {
dis.dispatch
{ avatar }
-
+
{ sender }
{ timestamp }
,
-
+
+ { this.renderContextMenu() }
{ renderTile(TimelineRenderingType.Notification, {
...this.props,
@@ -1298,7 +1304,8 @@ export class UnwrappedEventTile extends React.Component {
{ avatar }
{ sender }
,
-
+
+ { this.renderContextMenu() }
{ replyChain }
{ renderTile(TimelineRenderingType.Thread, {
...this.props,
@@ -1385,7 +1392,8 @@ export class UnwrappedEventTile extends React.Component {
"aria-atomic": true,
"data-scroll-tokens": scrollToken,
}, [
-
+
+ { this.renderContextMenu() }
{ renderTile(TimelineRenderingType.File, {
...this.props,
@@ -1406,7 +1414,10 @@ export class UnwrappedEventTile extends React.Component {
href={permalink}
onClick={this.onPermalinkClicked}
>
-
+ {
{ sender }
{ ircPadlock }
{ avatar }
-
{ sender }
{ timestamp }
@@ -1434,7 +1445,8 @@ export class UnwrappedEventTile extends React.Component
+
+ { this.renderContextMenu() }
{ groupTimestamp }
{ groupPadlock }
{ replyChain }
@@ -1565,66 +1577,51 @@ interface ISentReceiptProps {
messageState: string; // TODO: Types for message sending state
}
-interface ISentReceiptState {
- hover: boolean;
-}
-
-class SentReceipt extends React.PureComponent {
- constructor(props) {
- super(props);
-
- this.state = {
- hover: false,
- };
+function SentReceipt({ messageState }: ISentReceiptProps) {
+ const isSent = !messageState || messageState === 'sent';
+ const isFailed = messageState === 'not_sent';
+ const receiptClasses = classNames({
+ 'mx_EventTile_receiptSent': isSent,
+ 'mx_EventTile_receiptSending': !isSent && !isFailed,
+ });
+
+ let nonCssBadge = null;
+ if (isFailed) {
+ nonCssBadge = (
+
-
-
- { nonCssBadge }
- { tooltip }
+ return (
+ {
super(props);
this.state = {
- statusMessage: this.getStatusMessage(),
isRoomEncrypted: false,
e2eStatus: null,
};
@@ -67,13 +63,6 @@ export default class MemberTile extends React.Component {
componentDidMount() {
const cli = MatrixClientPeg.get();
- if (SettingsStore.getValue("feature_custom_status")) {
- const { user } = this.props.member;
- if (user) {
- user.on(UserEvent._UnstableStatusMessage, this.onStatusMessageCommitted);
- }
- }
-
const { roomId } = this.props.member;
if (roomId) {
const isRoomEncrypted = cli.isRoomEncrypted(roomId);
@@ -94,11 +83,6 @@ export default class MemberTile extends React.Component {
componentWillUnmount() {
const cli = MatrixClientPeg.get();
- const { user } = this.props.member;
- if (user) {
- user.removeListener(UserEvent._UnstableStatusMessage, this.onStatusMessageCommitted);
- }
-
if (cli) {
cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
cli.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserTrustStatusChanged);
@@ -158,21 +142,6 @@ export default class MemberTile extends React.Component {
});
}
- private getStatusMessage(): string {
- const { user } = this.props.member;
- if (!user) {
- return "";
- }
- return user.unstable_statusMessage;
- }
-
- private onStatusMessageCommitted = (): void => {
- // The `User` object has observed a status message change.
- this.setState({
- statusMessage: this.getStatusMessage(),
- });
- };
-
shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean {
if (
this.memberLastModifiedTime === undefined ||
@@ -222,11 +191,6 @@ export default class MemberTile extends React.Component {
const name = this.getDisplayName();
const presenceState = member.user ? member.user.presence : null;
- let statusMessage = null;
- if (member.user && SettingsStore.getValue("feature_custom_status")) {
- statusMessage = this.state.statusMessage;
- }
-
const av = (
);
@@ -277,7 +241,6 @@ export default class MemberTile extends React.Component {
nameJSX={nameJSX}
powerStatus={powerStatus}
showPresence={this.props.showPresence}
- subtextLabel={statusMessage}
e2eStatus={e2eStatus}
onClick={this.onClick}
/>
diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
index 363e687c9f9..9c9f190210d 100644
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -28,7 +28,6 @@ import AccessibleButton from "../elements/AccessibleButton";
import MiniAvatarUploader, { AVATAR_SIZE } from "../elements/MiniAvatarUploader";
import RoomAvatar from "../avatars/RoomAvatar";
import defaultDispatcher from "../../../dispatcher/dispatcher";
-import dis from "../../../dispatcher/dispatcher";
import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
import { Action } from "../../../dispatcher/actions";
import SpaceStore from "../../../stores/spaces/SpaceStore";
@@ -87,7 +86,7 @@ const NewRoomIntro = () => {
const canAddTopic = inRoom && room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getUserId());
const onTopicClick = () => {
- dis.dispatch({
+ defaultDispatcher.dispatch({
action: "open_room_settings",
room_id: roomId,
}, true);
@@ -150,7 +149,7 @@ const NewRoomIntro = () => {
className="mx_NewRoomIntro_inviteButton"
kind="primary_outline"
onClick={() => {
- dis.dispatch({ action: "view_invite", roomId });
+ defaultDispatcher.dispatch({ action: "view_invite", roomId });
}}
>
{ _t("Invite to just this room") }
@@ -162,7 +161,7 @@ const NewRoomIntro = () => {
className="mx_NewRoomIntro_inviteButton"
kind="primary"
onClick={() => {
- dis.dispatch({ action: "view_invite", roomId });
+ defaultDispatcher.dispatch({ action: "view_invite", roomId });
}}
>
{ _t("Invite to this room") }
@@ -192,7 +191,7 @@ const NewRoomIntro = () => {
function openRoomSettings(event) {
event.preventDefault();
- dis.dispatch({
+ defaultDispatcher.dispatch({
action: "open_room_settings",
initial_tab_id: ROOM_SECURITY_TAB,
});
diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
new file mode 100644
index 00000000000..e1c0de14286
--- /dev/null
+++ b/src/components/views/rooms/ReadReceiptGroup.tsx
@@ -0,0 +1,311 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { PropsWithChildren, useRef } from "react";
+import { User } from "matrix-js-sdk/src/matrix";
+
+import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
+import { IReadReceiptProps } from "./EventTile";
+import AccessibleButton from "../elements/AccessibleButton";
+import MemberAvatar from "../avatars/MemberAvatar";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import { Alignment } from "../elements/Tooltip";
+import { formatDate } from "../../../DateUtils";
+import { Action } from "../../../dispatcher/actions";
+import dis from "../../../dispatcher/dispatcher";
+import ContextMenu, { aboveLeftOf, MenuItem, useContextMenu } from "../../structures/ContextMenu";
+import { useTooltip } from "../../../utils/useTooltip";
+import { _t } from "../../../languageHandler";
+import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
+
+// #20547 Design specified that we should show the three latest read receipts
+const MAX_READ_AVATARS_PLUS_N = 3;
+// #21935 If we’ve got just 4, don’t show +1, just show all of them
+const MAX_READ_AVATARS = MAX_READ_AVATARS_PLUS_N + 1;
+
+const READ_AVATAR_OFFSET = 10;
+export const READ_AVATAR_SIZE = 16;
+
+interface Props {
+ readReceipts: IReadReceiptProps[];
+ readReceiptMap: { [userId: string]: IReadReceiptInfo };
+ checkUnmounting: () => boolean;
+ suppressAnimation: boolean;
+ isTwelveHour: boolean;
+}
+
+interface IAvatarPosition {
+ hidden: boolean;
+ position: number;
+}
+
+export function determineAvatarPosition(index: number, max: number): IAvatarPosition {
+ if (index < max) {
+ return {
+ hidden: false,
+ position: index,
+ };
+ } else {
+ return {
+ hidden: true,
+ position: 0,
+ };
+ }
+}
+
+export function readReceiptTooltip(members: string[], hasMore: boolean): string | null {
+ if (hasMore) {
+ return _t("%(members)s and more", {
+ members: members.join(", "),
+ });
+ } else if (members.length > 1) {
+ return _t("%(members)s and %(last)s", {
+ last: members.pop(),
+ members: members.join(", "),
+ });
+ } else if (members.length) {
+ return members[0];
+ } else {
+ return null;
+ }
+}
+
+export function ReadReceiptGroup(
+ { readReceipts, readReceiptMap, checkUnmounting, suppressAnimation, isTwelveHour }: Props,
+) {
+ const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+
+ // If we are above MAX_READ_AVATARS, we’ll have to remove a few to have space for the +n count.
+ const hasMore = readReceipts.length > MAX_READ_AVATARS;
+ const maxAvatars = hasMore
+ ? MAX_READ_AVATARS_PLUS_N
+ : MAX_READ_AVATARS;
+
+ const tooltipMembers: string[] = readReceipts.slice(0, maxAvatars)
+ .map(it => it.roomMember?.name ?? it.userId);
+ const tooltipText = readReceiptTooltip(tooltipMembers, hasMore);
+
+ const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
+ label: (
+ <>
+
+
+
+ { _t("Seen by %(count)s people", { count: readReceipts.length }) }
+
+ { readReceipts.map(receipt => (
+
+
+ );
+ }
+
+ return (
+ ) {
+ const ref = useRef();
+ const [onFocus] = useRovingTabIndex(ref);
+
+ return (
+ {
private avatar: React.RefObject = createRef();
- static defaultProps = {
- leftOffset: 0,
- };
-
constructor(props: IProps) {
super(props);
@@ -110,10 +102,7 @@ export default class ReadReceiptMarker extends React.PureComponent
}
+ hideTitle
+ tabIndex={-1}
/>
);
diff --git a/src/components/views/rooms/ReplyPreview.tsx b/src/components/views/rooms/ReplyPreview.tsx
index 72340e99819..611c58f8529 100644
--- a/src/components/views/rooms/ReplyPreview.tsx
+++ b/src/components/views/rooms/ReplyPreview.tsx
@@ -22,6 +22,7 @@ import { _t } from '../../../languageHandler';
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import ReplyTile from './ReplyTile';
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
+import AccessibleButton from "../elements/AccessibleButton";
function cancelQuoting(context: TimelineRenderingType) {
dis.dispatch({
@@ -44,25 +45,17 @@ export default class ReplyPreview extends React.Component {
return
;
}
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 1cdd2e770e8..9983b6f39c3 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -53,6 +53,7 @@ interface IProps {
oobData?: IOOBData;
inRoom: boolean;
onSearchClick: () => void;
+ onInviteClick: () => void;
onForgetClick: () => void;
onCallPlaced: (type: CallType) => void;
onAppsClick: () => void;
@@ -255,6 +256,16 @@ export default class RoomHeader extends React.Component {
buttons.push(searchButton);
}
+ if (this.props.onInviteClick && this.props.inRoom) {
+ const inviteButton =
+
+ );
}
diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx
index b652771a43e..f292ec3b589 100644
--- a/src/components/views/rooms/MemberTile.tsx
+++ b/src/components/views/rooms/MemberTile.tsx
@@ -20,12 +20,10 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
-import { UserEvent } from "matrix-js-sdk/src/models/user";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { UserTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
-import SettingsStore from "../../../settings/SettingsStore";
import dis from "../../../dispatcher/dispatcher";
import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -41,7 +39,6 @@ interface IProps {
}
interface IState {
- statusMessage: string;
isRoomEncrypted: boolean;
e2eStatus: string;
}
@@ -58,7 +55,6 @@ export default class MemberTile extends React.Component
+
- );
- }
+
+
+
+ { nonCssBadge }
+
-
+
+ { tooltip }
+ { _t("Seen by %(count)s people", { count: readReceipts.length }) }
+
+
+ { tooltipText }
+
+
+ ),
+ alignment: Alignment.TopRight,
+ });
+
+ // return early if there are no read receipts
+ if (readReceipts.length === 0) {
+ // We currently must include `mx_ReadReceiptGroup_container` in
+ // the DOM of all events, as it is the positioned parent of the
+ // animated read receipts. We can't let it unmount when a receipt
+ // moves events, so for now we mount it for all events. Without
+ // it, the animation will start from the top of the timeline
+ // (because it lost its container).
+ // See also https://github.com/vector-im/element-web/issues/17561
+ return (
+
+
+ );
+ }
+
+ const avatars = readReceipts.map((receipt, index) => {
+ const { hidden, position } = determineAvatarPosition(index, maxAvatars);
+
+ const userId = receipt.userId;
+ let readReceiptInfo: IReadReceiptInfo;
+
+ if (readReceiptMap) {
+ readReceiptInfo = readReceiptMap[userId];
+ if (!readReceiptInfo) {
+ readReceiptInfo = {};
+ readReceiptMap[userId] = readReceiptInfo;
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+interface ReadReceiptPersonProps extends IReadReceiptProps {
+ isTwelveHour: boolean;
+ onAfterClick?: () => void;
+}
+
+function ReadReceiptPerson({ userId, roomMember, ts, isTwelveHour, onAfterClick }: ReadReceiptPersonProps) {
+ const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
+ alignment: Alignment.TopCenter,
+ tooltipClassName: "mx_ReadReceiptGroup_person--tooltip",
+ label: (
+ <>
+
+
+ { remText }
+
+ { avatars }
+
+
+ { tooltip }
+ { contextMenu }
+
+
+ { roomMember?.rawDisplayName ?? userId }
+
+
+ { userId }
+
+
+ ),
+ });
+
+ return (
+
+ );
+}
+
+interface ISectionHeaderProps {
+ className?: string;
+}
+
+function SectionHeader({ className, children }: PropsWithChildren+ { children } +
+ ); +} diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx index 916d886447f..934fd7af7ab 100644 --- a/src/components/views/rooms/ReadReceiptMarker.tsx +++ b/src/components/views/rooms/ReadReceiptMarker.tsx @@ -19,28 +19,27 @@ import React, { createRef, RefObject } from 'react'; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { logger } from "matrix-js-sdk/src/logger"; -import { _t } from '../../../languageHandler'; -import { formatDate } from '../../../DateUtils'; import NodeAnimator from "../../../NodeAnimator"; import { toPx } from "../../../utils/units"; import MemberAvatar from '../avatars/MemberAvatar'; +import { READ_AVATAR_SIZE } from "./ReadReceiptGroup"; export interface IReadReceiptInfo { top?: number; - left?: number; + right?: number; parent?: Element; } interface IProps { // the RoomMember to show the RR for - member?: RoomMember; + member?: RoomMember | null; // userId to fallback the avatar to // if the member hasn't been loaded yet fallbackUserId: string; // number of pixels to offset the avatar from the right of its parent; // typically a negative value. - leftOffset?: number; + offset: number; // true to hide the avatar (it will still be animated) hidden?: boolean; @@ -56,9 +55,6 @@ interface IProps { // are being unmounted. checkUnmounting?: () => boolean; - // callback for clicks on this RR - onClick?: (e: React.MouseEvent) => void; - // Timestamp when the receipt was read timestamp?: number; @@ -73,16 +69,12 @@ interface IState { interface IReadReceiptMarkerStyle { top: number; - left: number; + right: number; } export default class ReadReceiptMarker extends React.PureComponent
-
- { _t('Replying') }
-
-
- ![]({require("../../../../res/img/cancel.svg").default})
+ { _t('Replying') }
+ cancelQuoting(this.context.timelineRenderingType)}
/>
-
-
+ { _t('Replying') }
+
-
+
{ buttons }
diff --git a/src/components/views/rooms/RoomInfoLine.tsx b/src/components/views/rooms/RoomInfoLine.tsx
new file mode 100644
index 00000000000..09214043d63
--- /dev/null
+++ b/src/components/views/rooms/RoomInfoLine.tsx
@@ -0,0 +1,86 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { FC } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+
+import { _t } from "../../../languageHandler";
+import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
+import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import { useRoomState } from "../../../hooks/useRoomState";
+import { useRoomMemberCount, useMyRoomMembership } from "../../../hooks/useRoomMembers";
+import AccessibleButton from "../elements/AccessibleButton";
+
+interface IProps {
+ room: Room;
+}
+
+const RoomInfoLine: FC = ({ room }) => {
+ // summary will begin as undefined whilst loading and go null if it fails to load or we are not invited.
+ const summary = useAsyncMemo(async () => {
+ if (room.getMyMembership() !== "invite") return null;
+ try {
+ return room.client.getRoomSummary(room.roomId);
+ } catch (e) {
+ return null;
+ }
+ }, [room]);
+ const joinRule = useRoomState(room, state => state.getJoinRule());
+ const membership = useMyRoomMembership(room);
+ const memberCount = useRoomMemberCount(room);
+
+ let iconClass: string;
+ let roomType: string;
+ if (room.isElementVideoRoom()) {
+ iconClass = "mx_RoomInfoLine_video";
+ roomType = _t("Video room");
+ } else if (joinRule === JoinRule.Public) {
+ iconClass = "mx_RoomInfoLine_public";
+ roomType = room.isSpaceRoom() ? _t("Public space") : _t("Public room");
+ } else {
+ iconClass = "mx_RoomInfoLine_private";
+ roomType = room.isSpaceRoom() ? _t("Private space") : _t("Private room");
+ }
+
+ let members: JSX.Element;
+ if (membership === "invite" && summary) {
+ // Don't trust local state and instead use the summary API
+ members =
+ { _t("%(count)s members", { count: summary.num_joined_members }) }
+ ;
+ } else if (memberCount && summary !== undefined) { // summary is not still loading
+ const viewMembers = () => RightPanelStore.instance.setCard({
+ phase: room.isSpaceRoom() ? RightPanelPhases.SpaceMemberList : RightPanelPhases.RoomMemberList,
+ });
+
+ members =
+ { _t("%(count)s members", { count: memberCount }) }
+ ;
+ }
+
+ return dispatcher.dispatch({ action: 'view_create_chat' })}
+ onClick={(e) => {
+ dispatcher.dispatch({ action: 'view_create_chat' });
+ PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", e);
+ }}
className="mx_RoomSublist_auxButton"
tooltipClassName="mx_RoomSublist_addRoomTooltip"
aria-label={_t("Start chat")}
@@ -236,7 +239,7 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
: _t("You do not have permissions to create new rooms in this space")}
/>
{ SettingsStore.getValue("feature_video_rooms") && {
e.preventDefault();
@@ -280,7 +283,7 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
}}
/>
{ SettingsStore.getValue("feature_video_rooms") && {
e.preventDefault();
@@ -300,6 +303,7 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
+ PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuExploreRoomsItem", e);
defaultDispatcher.fire(Action.ViewRoomDirectory);
}}
/>
@@ -496,9 +500,10 @@ export default class RoomList extends React.PureComponent
+ { roomType }
+ { members }
+
;
+};
+
+export default RoomInfoLine;
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index e2550bc2b6e..e534b713f8d 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -16,9 +16,8 @@ limitations under the License.
import React, { ComponentType, createRef, ReactComponentElement, RefObject } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
-import { RoomType } from "matrix-js-sdk/src/@types/event";
+import { RoomType, EventType } from "matrix-js-sdk/src/@types/event";
import * as fbEmitter from "fbemitter";
-import { EventType } from "matrix-js-sdk/src/@types/event";
import { _t, _td } from "../../../languageHandler";
import { IState as IRovingTabIndexState, RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
@@ -142,6 +141,7 @@ const DmAuxButton = ({ tabIndex, dispatcher = defaultDispatcher }: IAuxButtonPro
e.stopPropagation();
closeMenu();
defaultDispatcher.dispatch({ action: "view_create_chat" });
+ PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", e);
}}
/> }
{ showInviteUsers &&