{ joinButtons }
@@ -454,7 +454,7 @@ const SpaceLanding = ({ space }: { space: Room }) => {
-
diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
index 3009bedae3e..3729cfaeaf1 100644
--- a/src/components/structures/ThreadPanel.tsx
+++ b/src/components/structures/ThreadPanel.tsx
@@ -191,37 +191,27 @@ const ThreadPanel: React.FC
+ { connected ? null :
;
+};
+
+export default VideoRoomView;
diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx
index 911ee5d1b9c..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(
- "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() {
@@ -316,6 +351,13 @@ 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.',
@@ -355,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"), }; } diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index ecb4691e1b6..ff7e41b9d58 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -110,7 +110,9 @@ interface IState { } export default class Registration extends React.Component
+
+ 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
*/
@@ -64,8 +78,9 @@ const BeaconViewDialog: React.FC = ({
}) => {
const liveBeacons = useLiveBeacons(roomId, matrixClient);
- const bounds = getBeaconBounds(liveBeacons);
- const centerGeoUri = focusBeacon?.latestLocationState?.uri || getBoundsCenter(bounds);
+ const [isSidebarOpen, setSidebarOpen] = useState(false);
+
+ const { bounds, centerGeoUri } = useInitialMapPosition(liveBeacons, focusBeacon);
return (
= ({
fixedWidth={false}
>
- { !!bounds ?
}
+ { 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..43b00a8fa76 100644
--- a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
+++ b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
@@ -16,6 +16,7 @@ limitations under the License.
import classNames from 'classnames';
import React from 'react';
+import { 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,16 @@ 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 LeftPanelLiveShareWarning: React.FC
+ { _t('View List') }
+
+
+
+ -
+ { beacons.map((beacon) =>
-
-
);
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) => {
}
{ _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("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/directory/NetworkDropdown.tsx b/src/components/views/directory/NetworkDropdown.tsx
index cc7a559db0f..5a9e4100e1d 100644
--- a/src/components/views/directory/NetworkDropdown.tsx
+++ b/src/components/views/directory/NetworkDropdown.tsx
@@ -17,7 +17,6 @@ limitations under the License.
import React, { useEffect, useState } from "react";
import { MatrixError } from "matrix-js-sdk/src/http-api";
-import { IProtocol } from "matrix-js-sdk/src/client";
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { instanceForInstanceId } from '../../../utils/DirectoryUtils';
@@ -42,9 +41,7 @@ import UIStore from "../../../stores/UIStore";
import { compare } from "../../../utils/strings";
import { SnakedObject } from "../../../utils/SnakedObject";
import { IConfigOptions } from "../../../IConfigOptions";
-
-// XXX: We would ideally use a symbol here but we can't since we save this value to localStorage
-export const ALL_ROOMS = "ALL_ROOMS";
+import { ALL_ROOMS, Protocols } from "../../../utils/DirectoryUtils";
const SETTING_NAME = "room_directory_servers";
@@ -85,8 +82,6 @@ const validServer = withValidation
-
;
- } 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 pileContents = <>
+ { overflow ? : null }
+ { faces }
+ ;
return
- { _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/RoomFacePile.tsx b/src/components/views/elements/RoomFacePile.tsx
new file mode 100644
index 00000000000..0b88403fffd
--- /dev/null
+++ b/src/components/views/elements/RoomFacePile.tsx
@@ -0,0 +1,107 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { FC, HTMLAttributes, ReactNode, useContext } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { sortBy } from "lodash";
+
+import { _t } from "../../../languageHandler";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import FacePile from "./FacePile";
+import { useRoomMembers } from "../../../hooks/useRoomMembers";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+const DEFAULT_NUM_FACES = 5;
+
+const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+
+interface IProps extends HTMLAttributes
+ { 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 }
+
+
+ { _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 fc3bfab3eb7..023ff2d5ccb 100644
--- a/src/components/views/location/Map.tsx
+++ b/src/components/views/location/Map.tsx
@@ -51,8 +51,8 @@ const useMapWithStyle = ({ id, centerGeoUri, onError, interactive, bounds }) =>
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]);
@@ -64,9 +64,9 @@ const useMapWithStyle = ({ id, centerGeoUri, onError, interactive, bounds }) =>
[bounds.west, bounds.south],
[bounds.east, bounds.north],
);
- map.fitBounds(lngLatBounds, { padding: 100 });
- } catch (error) {
- logger.error('Invalid map bounds', error);
+ map.fitBounds(lngLatBounds, { padding: 100, maxZoom: 15 });
+ } catch (_error) {
+ logger.error('Invalid map bounds');
}
}
}, [map, bounds]);
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 4beac791019..fb82cff29e2 100644
--- a/src/components/views/messages/MBeaconBody.tsx
+++ b/src/components/views/messages/MBeaconBody.tsx
@@ -146,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 ca6b2b4772f..918623deedd 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
{ message }
diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx
index 03d93f5194f..62e2b2ea69e 100644
--- a/src/components/views/messages/MStickerBody.tsx
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -40,11 +40,19 @@ export default class MStickerBody extends MImageBody {
return [wrapper, this.props.scBubbleTimestamp];
}
- // 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 ![]({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 d2dc829bc82..02ba34a56c5 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -285,6 +285,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 367822993bb..0effb252888 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -308,6 +308,11 @@ export default class MessageActionBar extends React.PureComponent) => {
+export default forwardRef(({ mxEvent, children }: IProps, ref: React.RefObject) => {
const text = mxEvent.getContent().body;
return (
-
+ setExpanded(false)}
>
);
} else {
- expandButton = ( setExpanded(true)}
>
@@ -331,6 +335,7 @@ const MessageButton = ({ userId }: { userId: string }) => {
return (
{
if (busy) return;
setBusy(true);
@@ -383,6 +388,7 @@ const UserOptionsSection: React.FC<{
ignoreButton = (
@@ -413,14 +419,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 +462,11 @@ const UserOptionsSection: React.FC<{
};
inviteUserButton = (
-
+
{ _t('Invite') }
);
@@ -456,7 +474,11 @@ const UserOptionsSection: React.FC<{
}
const shareUserButton = (
-
+
{ _t('Share Link to User') }
);
@@ -624,7 +646,11 @@ const RoomKickButton = ({ room, member, startUpdating, stopUpdating }: Omit
+ return
{ kickLabel }
;
};
@@ -642,7 +668,11 @@ const RedactMessagesButton: React.FC = ({ member }) => {
});
};
- return
+ return
{ _t("Remove recent messages") }
;
};
@@ -739,7 +769,11 @@ const BanToggleButton = ({ room, member, startUpdating, stopUpdating }: Omit
+ return
{ label }
;
};
@@ -809,7 +843,11 @@ const MuteToggleButton: React.FC = ({ member, room, powerLevels,
});
const muteLabel = muted ? _t("Unmute") : _t("Mute");
- return
+ return
{ muteLabel }
;
};
@@ -1212,7 +1250,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") }
);
@@ -1290,8 +1332,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) {
@@ -1303,7 +1346,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
@@ -1316,6 +1359,7 @@ const BasicUserInfo: React.FC<{
if (member.userId == cli.getUserId()) {
editDevices = (
{
dis.dispatch({
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index a5dcf038133..e93119643fb 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -103,6 +103,7 @@ interface IProps {
}
interface IState {
+ useMarkdown: boolean;
showPillAvatar: boolean;
query?: string;
showVisualBell?: boolean;
@@ -124,6 +125,7 @@ export default class BasicMessageEditor extends React.Component
private lastCaret: DocumentOffset;
private lastSelection: ReturnType;
+ private readonly useMarkdownHandle: string;
private readonly emoticonSettingHandle: string;
private readonly shouldShowPillAvatarSettingHandle: string;
private readonly surroundWithHandle: string;
@@ -133,10 +135,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 +447,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 +635,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 +667,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 +708,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;
@@ -96,7 +97,7 @@ export type GetRelationsForEvent = (eventId: string, relationType: string, event
export interface IReadReceiptProps {
userId: string;
- roomMember: RoomMember;
+ roomMember: RoomMember | null;
ts: number;
}
@@ -231,9 +232,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.
@@ -283,9 +281,6 @@ 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.
@@ -514,16 +509,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 {
@@ -532,7 +529,7 @@ export class UnwrappedEventTile extends React.Component {
}
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 d2dc829bc82..02ba34a56c5 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -285,6 +285,9 @@ export default class MVideoBody extends React.PureComponent
{ text }
{ children }
-
+
);
});
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index c9685c24670..9d17c5237d1 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -292,13 +292,17 @@ function DevicesSection({ devices, userId, loading }: { devices: IDevice[], user
let expandButton;
if (expandSectionDevices.length) {
if (isExpanded) {
- expandButton = ({ expandHideCaption }
-
+
{ 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,
@@ -1125,9 +1016,7 @@ export class UnwrappedEventTile extends React.Component {
mx_EventTile_12hr: this.props.isTwelveHour,
// Note: we keep the `sending` state class for tests, not for our styles
mx_EventTile_sending: !isEditing && isSending,
- mx_EventTile_highlight: (this.context.timelineRenderingType === TimelineRenderingType.Notification
- ? false
- : this.shouldHighlight()),
+ mx_EventTile_highlight: this.shouldHighlight(),
mx_EventTile_selected: this.props.isSelectedEvent || this.state.contextMenu,
mx_EventTile_continuation: isContinuation,
mx_EventTile_last: this.props.last,
@@ -1170,8 +1059,10 @@ export class UnwrappedEventTile extends React.Component {
} else 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;
@@ -1344,26 +1235,31 @@ export class UnwrappedEventTile extends React.Component {
const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
- const msgOptionClasses = classNames(
- "mx_EventTile_msgOption",
- {
- "sc_readReceipts_empty": (
- // Don't reserve space below bubbles if there are no read receipts
- (!this.props.readReceipts || this.props.readReceipts.length === 0) &&
- // ToDo: Maybe incorporate sent/sending state into bubble?!?
- !(this.shouldShowSentReceipt || this.shouldShowSendingReceipt)
- ),
- },
- );
+ // const msgOptionClasses = classNames(
+ // "mx_EventTile_msgOption",
+ // {
+ // "sc_readReceipts_empty": (
+ // // Don't reserve space below bubbles if there are no read receipts
+ // (!this.props.readReceipts || this.props.readReceipts.length === 0) &&
+ // // ToDo: Maybe incorporate sent/sending state into bubble?!?
+ // !(this.shouldShowSentReceipt || this.shouldShowSendingReceipt)
+ // ),
+ // },
+ // );
let msgOption;
if (this.props.showReadReceipts) {
- const readAvatars = this.getReadAvatars();
- msgOption = (
- {
{ infoBubble ? avatar : null }
{ renderTile(this.context.timelineRenderingType, {
...this.props,
-
+
// overrides
ref: this.tile,
isSeeingThroughMessageHiddenForModeration,
@@ -1663,7 +1559,7 @@ export class UnwrappedEventTile extends React.Component {
scBubble: true,
scBubbleActionBar: mediaBody ? actionBar : null,
scBubbleTimestamp: <>{ placeholderTimestamp }{ linkedTimestamp },
-
+
// appease TS
highlights: this.props.highlights,
highlightLink: this.props.highlightLink,
@@ -1708,12 +1604,12 @@ export class UnwrappedEventTile extends React.Component {
{ replyChain }
{ renderTile(this.context.timelineRenderingType, {
...this.props,
-
+
// overrides
ref: this.tile,
isSeeingThroughMessageHiddenForModeration,
timestamp: bubbleTimestamp,
-
+
// appease TS
highlights: this.props.highlights,
highlightLink: this.props.highlightLink,
@@ -1834,62 +1730,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 = (
+
+
+
+ { _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/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 =
- { readAvatars }
-
- );
+ if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+ msgOption =
+
+ );
}
diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
new file mode 100644
index 00000000000..c271d9f9ca5
--- /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, count: number, max: number): IAvatarPosition {
+ if (index < max) {
+ return {
+ hidden: false,
+ position: Math.min(count, max) - index - 1,
+ };
+ } 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: (
+ <>
+
+
+
+
+
+ { 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, readReceipts.length, 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
{ buttons }
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index c8d67f2fde8..5beb61144d3 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -151,6 +151,7 @@ const DmAuxButton = ({ tabIndex, dispatcher = defaultDispatcher }: IAuxButtonPro
e.stopPropagation();
closeMenu();
defaultDispatcher.dispatch({ action: "view_create_chat" });
+ PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", e);
}}
/> }
{ showInviteUsers && dispatcher.dispatch({ action: 'view_create_chat' })}
- className="mx_RoomSublist_auxButton mx_RoomSublist_auxDmButton"
+ 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")}
title={_t("Start chat")}
@@ -328,6 +332,7 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
+ PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuExploreRoomsItem", e);
defaultDispatcher.fire(Action.ViewRoomDirectory);
}}
/>
@@ -567,9 +572,10 @@ export default class RoomList extends React.PureComponent {
}
};
- private onStartChat = () => {
+ private onStartChat = (ev: ButtonEvent) => {
const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
defaultDispatcher.dispatch({ action: "view_create_chat", initialText });
+ PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", ev);
};
private onExplore = (ev: ButtonEvent) => {
@@ -583,6 +589,7 @@ export default class RoomList extends React.PureComponent {
} else {
const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
defaultDispatcher.dispatch({ action: Action.ViewRoomDirectory, initialText });
+ PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuExploreRoomsItem", ev);
}
};
@@ -689,11 +696,8 @@ export default class RoomList extends React.PureComponent {
public focus(): void {
// focus the first focusable element in this aria treeview widget
const treeItems = this.treeRef.current?.querySelectorAll('[role="treeitem"]');
- if (treeItems) {
- return;
- }
- [...treeItems]
- .find(e => e.offsetParent !== null)?.focus();
+ if (!treeItems) return;
+ [...treeItems].find(e => e.offsetParent !== null)?.focus();
}
public render() {
diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx
index 362e05e060e..1f3e8fcf9fa 100644
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/src/components/views/rooms/RoomListHeader.tsx
@@ -299,6 +299,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
e.preventDefault();
e.stopPropagation();
defaultDispatcher.dispatch({ action: "view_create_chat" });
+ PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e);
closePlusMenu();
}}
/>
@@ -329,20 +330,21 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
;
}
// SC: Added beneath search all spaces
- // if (canExploreRooms) {
- // joinRoomOpt = (
- // {
- // e.preventDefault();
- // e.stopPropagation();
- // defaultDispatcher.dispatch({ action: Action.ViewRoomDirectory });
- // closePlusMenu();
- // }}
- // />
- // );
- // }
+ if (canExploreRooms) {
+ joinRoomOpt = (
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ defaultDispatcher.dispatch({ action: Action.ViewRoomDirectory });
+ PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuExploreRoomsItem", e);
+ closePlusMenu();
+ }}
+ />
+ );
+ }
contextMenu = ;
// Active video channel members, according to Jitsi
jitsiParticipants: IJitsiParticipant[];
}
@@ -107,7 +108,16 @@ export default class RoomTile extends React.PureComponent {
constructor(props: IProps) {
super(props);
- const videoConnected = VideoChannelStore.instance.roomId === this.props.room.roomId;
+ let videoStatus;
+ if (VideoChannelStore.instance.roomId === this.props.room.roomId) {
+ if (VideoChannelStore.instance.connected) {
+ videoStatus = VideoStatus.Connected;
+ } else {
+ videoStatus = VideoStatus.Connecting;
+ }
+ } else {
+ videoStatus = VideoStatus.Disconnected;
+ }
this.state = {
selected: RoomViewStore.instance.getRoomId() === this.props.room.roomId,
@@ -115,9 +125,9 @@ export default class RoomTile extends React.PureComponent {
generalMenuPosition: null,
// generatePreview() will return nothing if the user has previews disabled
messagePreview: "",
- videoStatus: videoConnected ? VideoStatus.Connected : VideoStatus.Disconnected,
- videoMembers: getConnectedMembers(this.props.room.currentState),
- jitsiParticipants: videoConnected ? VideoChannelStore.instance.participants : [],
+ videoStatus,
+ videoMembers: getConnectedMembers(this.props.room, videoStatus === VideoStatus.Connected),
+ jitsiParticipants: VideoChannelStore.instance.participants,
};
this.generatePreview();
@@ -194,8 +204,9 @@ export default class RoomTile extends React.PureComponent {
this.props.room.on(RoomEvent.Name, this.onRoomNameUpdate);
this.props.room.currentState.on(RoomStateEvent.Events, this.updateVideoMembers);
- VideoChannelStore.instance.on(VideoChannelEvent.Connect, this.updateVideoStatus);
- VideoChannelStore.instance.on(VideoChannelEvent.Disconnect, this.updateVideoStatus);
+ VideoChannelStore.instance.on(VideoChannelEvent.Connect, this.onConnectVideo);
+ VideoChannelStore.instance.on(VideoChannelEvent.StartConnect, this.onStartConnectVideo);
+ VideoChannelStore.instance.on(VideoChannelEvent.Disconnect, this.onDisconnectVideo);
if (VideoChannelStore.instance.roomId === this.props.room.roomId) {
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
}
@@ -213,8 +224,9 @@ export default class RoomTile extends React.PureComponent {
this.notificationState.off(NotificationStateEvents.Update, this.onNotificationUpdate);
this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
- VideoChannelStore.instance.off(VideoChannelEvent.Connect, this.updateVideoStatus);
- VideoChannelStore.instance.off(VideoChannelEvent.Disconnect, this.updateVideoStatus);
+ VideoChannelStore.instance.off(VideoChannelEvent.Connect, this.onConnectVideo);
+ VideoChannelStore.instance.off(VideoChannelEvent.StartConnect, this.onStartConnectVideo);
+ VideoChannelStore.instance.off(VideoChannelEvent.Disconnect, this.onDisconnectVideo);
}
private onAction = (payload: ActionPayload) => {
@@ -646,20 +658,50 @@ export default class RoomTile extends React.PureComponent {
}
private updateVideoMembers = () => {
- this.setState({ videoMembers: getConnectedMembers(this.props.room.currentState) });
+ this.setState(state => ({
+ videoMembers: getConnectedMembers(this.props.room, state.videoStatus === VideoStatus.Connected),
+ }));
};
private updateVideoStatus = () => {
if (VideoChannelStore.instance.roomId === this.props.room?.roomId) {
- this.setState({ videoStatus: VideoStatus.Connected });
- VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
+ if (VideoChannelStore.instance.connected) {
+ this.onConnectVideo(this.props.room?.roomId);
+ } else {
+ this.onStartConnectVideo(this.props.room?.roomId);
+ }
} else {
- this.setState({ videoStatus: VideoStatus.Disconnected });
+ this.onDisconnectVideo(this.props.room?.roomId);
+ }
+ };
+
+ private onConnectVideo = (roomId: string) => {
+ if (roomId === this.props.room?.roomId) {
+ this.setState({
+ videoStatus: VideoStatus.Connected,
+ videoMembers: getConnectedMembers(this.props.room, true),
+ });
+ VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
+ }
+ };
+
+ private onStartConnectVideo = (roomId: string) => {
+ if (roomId === this.props.room?.roomId) {
+ this.setState({ videoStatus: VideoStatus.Connecting });
+ }
+ };
+
+ private onDisconnectVideo = (roomId: string) => {
+ if (roomId === this.props.room?.roomId) {
+ this.setState({
+ videoStatus: VideoStatus.Disconnected,
+ videoMembers: getConnectedMembers(this.props.room, false),
+ });
VideoChannelStore.instance.off(VideoChannelEvent.Participants, this.updateJitsiParticipants);
}
};
- private updateJitsiParticipants = (participants: IJitsiParticipant[]) => {
+ private updateJitsiParticipants = (roomId: string, participants: IJitsiParticipant[]) => {
this.setState({ jitsiParticipants: participants });
};
@@ -699,7 +741,12 @@ export default class RoomTile extends React.PureComponent {
case VideoStatus.Disconnected:
videoText = _t("Video");
videoActive = false;
- participantCount = this.state.videoMembers.length;
+ participantCount = this.state.videoMembers.size;
+ break;
+ case VideoStatus.Connecting:
+ videoText = _t("Connecting...");
+ videoActive = true;
+ participantCount = this.state.videoMembers.size;
break;
case VideoStatus.Connected:
videoText = _t("Connected");
diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx
index c42131bba04..20a9e081a0c 100644
--- a/src/components/views/rooms/SearchBar.tsx
+++ b/src/components/views/rooms/SearchBar.tsx
@@ -78,6 +78,7 @@ export default class SearchBar extends React.Component {
}
private onSearch = (): void => {
+ if (!this.searchTerm.current.value.trim()) return;
this.props.onSearch(this.searchTerm.current.value, this.state.scope);
};
diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index b7967aa5ead..c309e0a16c1 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -91,7 +91,10 @@ export function createMessageContent(
msgtype: isEmote ? "m.emote" : "m.text",
body: body,
};
- const formattedBody = htmlSerializeIfNeeded(model, { forceHTML: !!replyToEvent });
+ const formattedBody = htmlSerializeIfNeeded(model, {
+ forceHTML: !!replyToEvent,
+ useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
+ });
if (formattedBody) {
content.format = "org.matrix.custom.html";
content.formatted_body = formattedBody;
diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx
index 50a74aa20de..3cf3b03f9ac 100644
--- a/src/components/views/rooms/ThreadSummary.tsx
+++ b/src/components/views/rooms/ThreadSummary.tsx
@@ -48,7 +48,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
return (
{
showThread({
rootEvent: mxEvent,
@@ -58,11 +58,11 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
}}
aria-label={_t("Open thread")}
>
-
+
{ countSection }
);
};
@@ -96,13 +96,13 @@ export const ThreadMessagePreview = ({ thread, showDisplayname = false }: IPrevi
fallbackUserId={lastReply.getSender()}
width={24}
height={24}
- className="mx_ThreadInfo_avatar"
+ className="mx_ThreadSummary_avatar"
/>
- { showDisplayname &&
+ { showDisplayname &&
{ lastReply.sender?.name ?? lastReply.getSender() }
}
-
-
+ {
};
}
- private onChangePassword(oldPassword: string, newPassword: string): void {
+ private async onChangePassword(oldPassword: string, newPassword: string): Promise {
const cli = MatrixClientPeg.get();
- if (!this.props.confirm) {
- this.changePassword(cli, oldPassword, newPassword);
- return;
+ // if the server supports it then don't sign user out of all devices
+ const serverSupportsControlOfDevicesLogout = await cli.doesServerSupportLogoutDevices();
+ const userHasOtherDevices = (await cli.getDevices()).devices.length > 1;
+
+ if (userHasOtherDevices && !serverSupportsControlOfDevicesLogout && this.props.confirm) {
+ // warn about logging out all devices
+ const { finished } = Modal.createTrackedDialog<[boolean]>('Change Password', '', QuestionDialog, {
+ title: _t("Warning!"),
+ description:
+ {
phase: Phase.Uploading,
});
- cli.setPassword(authDict, newPassword).then(() => {
+ const logoutDevices = serverSupportsControlOfDevicesLogout ? false : undefined;
+
+ // undefined or true mean all devices signed out
+ const didLogoutOutOtherDevices = !serverSupportsControlOfDevicesLogout && userHasOtherDevices;
+
+ cli.setPassword(authDict, newPassword, logoutDevices).then(() => {
if (this.props.shouldAskForEmail) {
return this.optionallySetEmail().then((confirmed) => {
this.props.onFinished({
didSetEmail: confirmed,
+ didLogoutOutOtherDevices,
});
});
} else {
- this.props.onFinished();
+ this.props.onFinished({ didLogoutOutOtherDevices });
}
}, (err) => {
this.props.onError(err);
@@ -279,7 +299,7 @@ export default class ChangePassword extends React.Component {
if (err) {
this.props.onError(err);
} else {
- this.onChangePassword(oldPassword, newPassword);
+ return this.onChangePassword(oldPassword, newPassword);
}
};
diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx
index 2f05b5e4dc5..f758022fc46 100644
--- a/src/components/views/settings/Notifications.tsx
+++ b/src/components/views/settings/Notifications.tsx
@@ -105,15 +105,36 @@ interface IState {
};
pushers?: IPusher[];
threepids?: IThreepid[];
+
+ desktopNotifications: boolean;
+ desktopShowBody: boolean;
+ audioNotifications: boolean;
}
export default class Notifications extends React.PureComponent {
+ private settingWatchers: string[];
+
public constructor(props: IProps) {
super(props);
this.state = {
phase: Phase.Loading,
+ desktopNotifications: SettingsStore.getValue("notificationsEnabled"),
+ desktopShowBody: SettingsStore.getValue("notificationBodyEnabled"),
+ audioNotifications: SettingsStore.getValue("audioNotificationsEnabled"),
};
+
+ this.settingWatchers = [
+ SettingsStore.watchSetting("notificationsEnabled", null, (...[,,,, value]) =>
+ this.setState({ desktopNotifications: value as boolean }),
+ ),
+ SettingsStore.watchSetting("notificationBodyEnabled", null, (...[,,,, value]) =>
+ this.setState({ desktopShowBody: value as boolean }),
+ ),
+ SettingsStore.watchSetting("audioNotificationsEnabled", null, (...[,,,, value]) =>
+ this.setState({ audioNotifications: value as boolean }),
+ ),
+ ];
}
private get isInhibited(): boolean {
@@ -129,6 +150,10 @@ export default class Notifications extends React.PureComponent {
this.refreshFromServer();
}
+ public componentWillUnmount() {
+ this.settingWatchers.forEach(watcher => SettingsStore.unwatchSetting(watcher));
+ }
+
private async refreshFromServer() {
try {
const newState = (await Promise.all([
@@ -137,7 +162,7 @@ export default class Notifications extends React.PureComponent {
this.refreshThreepids(),
])).reduce((p, c) => Object.assign(c, p), {});
- this.setState({
+ this.setState>({
...newState,
phase: Phase.Ready,
});
@@ -308,17 +333,14 @@ export default class Notifications extends React.PureComponent {
private onDesktopNotificationsChanged = async (checked: boolean) => {
await SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, checked);
- this.forceUpdate(); // the toggle is controlled by SettingsStore#getValue()
};
private onDesktopShowBodyChanged = async (checked: boolean) => {
await SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, checked);
- this.forceUpdate(); // the toggle is controlled by SettingsStore#getValue()
};
private onAudioNotificationsChanged = async (checked: boolean) => {
await SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, checked);
- this.forceUpdate(); // the toggle is controlled by SettingsStore#getValue()
};
private onRadioChecked = async (rule: IVectorPushRule, checkedState: VectorState) => {
@@ -499,7 +521,7 @@ export default class Notifications extends React.PureComponent {
{
{
{
+ private onPasswordChanged = ({ didLogoutOutOtherDevices }: { didLogoutOutOtherDevices: boolean }): void => {
+ let description = _t("Your password was successfully changed.");
+ if (didLogoutOutOtherDevices) {
+ description += " " + _t(
+ "You will not receive push notifications on other devices until you sign back in to them.",
+ );
+ }
// TODO: Figure out a design that doesn't involve replacing the current dialog
Modal.createTrackedDialog('Password changed', '', ErrorDialog, {
title: _t("Success"),
- description: _t(
- "Your password was successfully changed. You will not receive " +
- "push notifications on other sessions until you log back in to them",
- ) + ".",
+ description,
});
};
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 84656bd3e08..4e25fb9ddc9 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -65,6 +65,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
size: Size;
}
diff --git a/src/components/views/voip/PipView.tsx b/src/components/views/voip/PipView.tsx
index ae7dd7a1af6..db3ef0187dc 100644
--- a/src/components/views/voip/PipView.tsx
+++ b/src/components/views/voip/PipView.tsx
@@ -33,7 +33,6 @@ import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
import CallViewHeader from './CallView/CallViewHeader';
import ActiveWidgetStore, { ActiveWidgetStoreEvent } from '../../../stores/ActiveWidgetStore';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import AppTile from '../elements/AppTile';
const SHOW_CALL_IN_STATES = [
CallState.Connected,
@@ -135,7 +134,9 @@ export default class PipView extends React.Component {
if (room) {
WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
}
- ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
+ ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Persistence, this.onWidgetPersistence);
+ ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Dock, this.onWidgetDockChanges);
+ ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Undock, this.onWidgetDockChanges);
document.addEventListener("mouseup", this.onEndMoving.bind(this));
}
@@ -149,7 +150,9 @@ export default class PipView extends React.Component {
if (room) {
WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
}
- ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
+ ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Persistence, this.onWidgetPersistence);
+ ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Dock, this.onWidgetDockChanges);
+ ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Undock, this.onWidgetDockChanges);
document.removeEventListener("mouseup", this.onEndMoving.bind(this));
}
@@ -186,13 +189,17 @@ export default class PipView extends React.Component {
this.updateShowWidgetInPip();
};
- private onActiveWidgetStoreUpdate = (): void => {
+ private onWidgetPersistence = (): void => {
this.updateShowWidgetInPip(
ActiveWidgetStore.instance.getPersistentWidgetId(),
ActiveWidgetStore.instance.getPersistentRoomId(),
);
};
+ private onWidgetDockChanges = (): void => {
+ this.updateShowWidgetInPip();
+ };
+
private updateCalls = (): void => {
if (!this.state.viewedRoomId) return;
const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(this.state.viewedRoomId);
@@ -231,11 +238,11 @@ export default class PipView extends React.Component {
persistentRoomId = this.state.persistentRoomId,
) {
let fromAnotherRoom = false;
- let notVisible = false;
+ let notDocked = false;
// Sanity check the room - the widget may have been destroyed between render cycles, and
// thus no room is associated anymore.
if (persistentWidgetId && MatrixClientPeg.get().getRoom(persistentRoomId)) {
- notVisible = !AppTile.isLive(persistentWidgetId, persistentRoomId);
+ notDocked = !ActiveWidgetStore.instance.isDocked(persistentWidgetId, persistentRoomId);
fromAnotherRoom = this.state.viewedRoomId !== persistentRoomId;
}
@@ -243,7 +250,7 @@ export default class PipView extends React.Component {
// pip container) if it is not visible on screen: either because we are
// viewing a different room OR because it is in none of the possible
// containers of the room view.
- const showWidgetInPip = fromAnotherRoom || notVisible;
+ const showWidgetInPip = fromAnotherRoom || notDocked;
this.setState({ showWidgetInPip, persistentWidgetId, persistentRoomId });
}
diff --git a/src/components/views/voip/VideoLobby.tsx b/src/components/views/voip/VideoLobby.tsx
new file mode 100644
index 00000000000..862e58fe630
--- /dev/null
+++ b/src/components/views/voip/VideoLobby.tsx
@@ -0,0 +1,240 @@
+/*
+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, useState, useMemo, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { logger } from "matrix-js-sdk/src/logger";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from "../../../languageHandler";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import { useConnectedMembers } from "../../../utils/VideoChannelUtils";
+import VideoChannelStore from "../../../stores/VideoChannelStore";
+import IconizedContextMenu, {
+ IconizedContextMenuOption,
+ IconizedContextMenuOptionList,
+} from "../context_menus/IconizedContextMenu";
+import { aboveLeftOf, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
+import { Alignment } from "../elements/Tooltip";
+import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import FacePile from "../elements/FacePile";
+import MemberAvatar from "../avatars/MemberAvatar";
+
+interface IDeviceButtonProps {
+ kind: string;
+ devices: MediaDeviceInfo[];
+ setDevice: (device: MediaDeviceInfo) => void;
+ deviceListLabel: string;
+ active: boolean;
+ disabled: boolean;
+ toggle: () => void;
+ activeTitle: string;
+ inactiveTitle: string;
+}
+
+const DeviceButton: FC = ({
+ kind, devices, setDevice, deviceListLabel, active, disabled, toggle, activeTitle, inactiveTitle,
+}) => {
+ // Depending on permissions, the browser might not let us know device labels,
+ // in which case there's nothing helpful we can display
+ const labelledDevices = useMemo(() => devices.filter(d => d.label.length), [devices]);
+
+ const [menuDisplayed, buttonRef, openMenu, closeMenu] = useContextMenu();
+ let contextMenu;
+ if (menuDisplayed) {
+ const selectDevice = (device: MediaDeviceInfo) => {
+ setDevice(device);
+ closeMenu();
+ };
+
+ const buttonRect = buttonRef.current.getBoundingClientRect();
+ contextMenu =
+
+ { labelledDevices.map(d =>
+ selectDevice(d)}
+ />,
+ ) }
+
+ ;
+ }
+
+ if (!devices.length) return null;
+
+ return ();
+
+ const devices = useAsyncMemo(async () => {
+ try {
+ return await navigator.mediaDevices.enumerateDevices();
+ } catch (e) {
+ logger.warn(`Failed to get media device list: ${e}`);
+ return [];
+ }
+ }, [], []);
+ const audioDevices = useMemo(() => devices.filter(d => d.kind === "audioinput"), [devices]);
+ const videoDevices = useMemo(() => devices.filter(d => d.kind === "videoinput"), [devices]);
+
+ const [selectedAudioDevice, selectAudioDevice] = useState(null);
+ const [selectedVideoDevice, selectVideoDevice] = useState(null);
+
+ const audioDevice = selectedAudioDevice ?? audioDevices[0];
+ const videoDevice = selectedVideoDevice ?? videoDevices[0];
+
+ const [audioActive, setAudioActive] = useState(!store.audioMuted);
+ const [videoActive, setVideoActive] = useState(!store.videoMuted);
+ const toggleAudio = () => {
+ store.audioMuted = audioActive;
+ setAudioActive(!audioActive);
+ };
+ const toggleVideo = () => {
+ store.videoMuted = videoActive;
+ setVideoActive(!videoActive);
+ };
+
+ const videoStream = useAsyncMemo(async () => {
+ if (videoDevice && videoActive) {
+ try {
+ return await navigator.mediaDevices.getUserMedia({
+ video: { deviceId: videoDevice.deviceId },
+ });
+ } catch (e) {
+ logger.error(`Failed to get stream for device ${videoDevice.deviceId}: ${e}`);
+ }
+ }
+ return null;
+ }, [videoDevice, videoActive]);
+
+ useEffect(() => {
+ if (videoStream) {
+ const videoElement = videoRef.current;
+ videoElement.srcObject = videoStream;
+ videoElement.play();
+
+ return () => {
+ videoStream?.getTracks().forEach(track => track.stop());
+ videoElement.srcObject = null;
+ };
+ }
+ }, [videoStream]);
+
+ const connect = async () => {
+ setConnecting(true);
+ try {
+ await store.connect(
+ room.roomId, audioActive ? audioDevice : null, videoActive ? videoDevice : null,
+ );
+ } catch (e) {
+ logger.error(e);
+ setConnecting(false);
+ }
+ };
+
+ let facePile;
+ if (connectedMembers.size) {
+ const shownMembers = [...connectedMembers].slice(0, MAX_FACES);
+ const overflow = connectedMembers.size > shownMembers.length;
+
+ facePile = ({
isPeeking: false,
showRightPanel: true,
joining: false,
- atEndOfLiveTimeline: true,
- atEndOfLiveTimelineInit: false,
showTopUnreadMessagesBar: false,
statusBarVisible: false,
canReact: false,
diff --git a/src/editor/deserialize.ts b/src/editor/deserialize.ts
index 7d4f94cdc3d..c6c9fc35200 100644
--- a/src/editor/deserialize.ts
+++ b/src/editor/deserialize.ts
@@ -16,12 +16,14 @@ limitations under the License.
*/
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { MsgType } from "matrix-js-sdk/src/@types/event";
import { checkBlockNode } from "../HtmlUtils";
import { getPrimaryPermalinkEntity } from "../utils/permalinks/Permalinks";
import { Part, PartCreator, Type } from "./parts";
import SdkConfig from "../SdkConfig";
import { textToHtmlRainbow } from "../utils/colour";
+import { stripPlainReply } from "../utils/Reply";
const LIST_TYPES = ["UL", "OL", "LI"];
@@ -52,12 +54,12 @@ function isListChild(n: Node): boolean {
return LIST_TYPES.includes(n.parentNode?.nodeName);
}
-function parseAtRoomMentions(text: string, pc: PartCreator, shouldEscape = true): Part[] {
+function parseAtRoomMentions(text: string, pc: PartCreator, opts: IParseOptions): Part[] {
const ATROOM = "@room";
const parts: Part[] = [];
text.split(ATROOM).forEach((textPart, i, arr) => {
if (textPart.length) {
- parts.push(...pc.plainWithEmoji(shouldEscape ? escape(textPart) : textPart));
+ parts.push(...pc.plainWithEmoji(opts.shouldEscape ? escape(textPart) : textPart));
}
// it's safe to never append @room after the last textPart
// as split will report an empty string at the end if
@@ -70,7 +72,7 @@ function parseAtRoomMentions(text: string, pc: PartCreator, shouldEscape = true)
return parts;
}
-function parseLink(n: Node, pc: PartCreator): Part[] {
+function parseLink(n: Node, pc: PartCreator, opts: IParseOptions): Part[] {
const { href } = n as HTMLAnchorElement;
const resourceId = getPrimaryPermalinkEntity(href); // The room/user ID
@@ -81,18 +83,18 @@ function parseLink(n: Node, pc: PartCreator): Part[] {
const children = Array.from(n.childNodes);
if (href === n.textContent && children.every(c => c.nodeType === Node.TEXT_NODE)) {
- return parseAtRoomMentions(n.textContent, pc);
+ return parseAtRoomMentions(n.textContent, pc, opts);
} else {
- return [pc.plain("["), ...parseChildren(n, pc), pc.plain(`](${href})`)];
+ return [pc.plain("["), ...parseChildren(n, pc, opts), pc.plain(`](${href})`)];
}
}
-function parseImage(n: Node, pc: PartCreator): Part[] {
+function parseImage(n: Node, pc: PartCreator, opts: IParseOptions): Part[] {
const { alt, src } = n as HTMLImageElement;
return pc.plainWithEmoji(``);
}
-function parseCodeBlock(n: Node, pc: PartCreator): Part[] {
+function parseCodeBlock(n: Node, pc: PartCreator, opts: IParseOptions): Part[] {
let language = "";
if (n.firstChild?.nodeName === "CODE") {
for (const className of (n.firstChild as HTMLElement).classList) {
@@ -117,10 +119,10 @@ function parseCodeBlock(n: Node, pc: PartCreator): Part[] {
return parts;
}
-function parseHeader(n: Node, pc: PartCreator): Part[] {
+function parseHeader(n: Node, pc: PartCreator, opts: IParseOptions): Part[] {
const depth = parseInt(n.nodeName.slice(1), 10);
const prefix = pc.plain("#".repeat(depth) + " ");
- return [prefix, ...parseChildren(n, pc)];
+ return [prefix, ...parseChildren(n, pc, opts)];
}
function checkIgnored(n) {
@@ -144,10 +146,10 @@ function prefixLines(parts: Part[], prefix: string, pc: PartCreator) {
}
}
-function parseChildren(n: Node, pc: PartCreator, mkListItem?: (li: Node) => Part[]): Part[] {
+function parseChildren(n: Node, pc: PartCreator, opts: IParseOptions, mkListItem?: (li: Node) => Part[]): Part[] {
let prev;
return Array.from(n.childNodes).flatMap(c => {
- const parsed = parseNode(c, pc, mkListItem);
+ const parsed = parseNode(c, pc, opts, mkListItem);
if (parsed.length && prev && (checkBlockNode(prev) || checkBlockNode(c))) {
if (isListChild(c)) {
// Use tighter spacing within lists
@@ -161,12 +163,12 @@ function parseChildren(n: Node, pc: PartCreator, mkListItem?: (li: Node) => Part
});
}
-function parseNode(n: Node, pc: PartCreator, mkListItem?: (li: Node) => Part[]): Part[] {
+function parseNode(n: Node, pc: PartCreator, opts: IParseOptions, mkListItem?: (li: Node) => Part[]): Part[] {
if (checkIgnored(n)) return [];
switch (n.nodeType) {
case Node.TEXT_NODE:
- return parseAtRoomMentions(n.nodeValue, pc);
+ return parseAtRoomMentions(n.nodeValue, pc, opts);
case Node.ELEMENT_NODE:
switch (n.nodeName) {
case "H1":
@@ -175,43 +177,43 @@ function parseNode(n: Node, pc: PartCreator, mkListItem?: (li: Node) => Part[]):
case "H4":
case "H5":
case "H6":
- return parseHeader(n, pc);
+ return parseHeader(n, pc, opts);
case "A":
- return parseLink(n, pc);
+ return parseLink(n, pc, opts);
case "IMG":
- return parseImage(n, pc);
+ return parseImage(n, pc, opts);
case "BR":
return [pc.newline()];
case "HR":
return [pc.plain("---")];
case "EM":
- return [pc.plain("_"), ...parseChildren(n, pc), pc.plain("_")];
+ return [pc.plain("_"), ...parseChildren(n, pc, opts), pc.plain("_")];
case "STRONG":
- return [pc.plain("**"), ...parseChildren(n, pc), pc.plain("**")];
+ return [pc.plain("**"), ...parseChildren(n, pc, opts), pc.plain("**")];
case "DEL":
- return [pc.plain(""), ...parseChildren(n, pc), pc.plain("")];
+ return [pc.plain(""), ...parseChildren(n, pc, opts), pc.plain("")];
case "SUB":
- return [pc.plain(""), ...parseChildren(n, pc), pc.plain("")];
+ return [pc.plain(""), ...parseChildren(n, pc, opts), pc.plain("")];
case "SUP":
- return [pc.plain(""), ...parseChildren(n, pc), pc.plain("")];
+ return [pc.plain(""), ...parseChildren(n, pc, opts), pc.plain("")];
case "U":
- return [pc.plain(""), ...parseChildren(n, pc), pc.plain("")];
+ return [pc.plain(""), ...parseChildren(n, pc, opts), pc.plain("")];
case "PRE":
- return parseCodeBlock(n, pc);
+ return parseCodeBlock(n, pc, opts);
case "CODE": {
// Escape backticks by using multiple backticks for the fence if necessary
const fence = "`".repeat(longestBacktickSequence(n.textContent) + 1);
return pc.plainWithEmoji(`${fence}${n.textContent}${fence}`);
}
case "BLOCKQUOTE": {
- const parts = parseChildren(n, pc);
+ const parts = parseChildren(n, pc, opts);
prefixLines(parts, "> ", pc);
return parts;
}
case "LI":
- return mkListItem?.(n) ?? parseChildren(n, pc);
+ return mkListItem?.(n) ?? parseChildren(n, pc, opts);
case "UL": {
- const parts = parseChildren(n, pc, li => [pc.plain("- "), ...parseChildren(li, pc)]);
+ const parts = parseChildren(n, pc, opts, li => [pc.plain("- "), ...parseChildren(li, pc, opts)]);
if (isListChild(n)) {
prefixLines(parts, " ", pc);
}
@@ -219,8 +221,8 @@ function parseNode(n: Node, pc: PartCreator, mkListItem?: (li: Node) => Part[]):
}
case "OL": {
let counter = (n as HTMLOListElement).start ?? 1;
- const parts = parseChildren(n, pc, li => {
- const parts = [pc.plain(`${counter}. `), ...parseChildren(li, pc)];
+ const parts = parseChildren(n, pc, opts, li => {
+ const parts = [pc.plain(`${counter}. `), ...parseChildren(li, pc, opts)];
counter++;
return parts;
});
@@ -247,15 +249,20 @@ function parseNode(n: Node, pc: PartCreator, mkListItem?: (li: Node) => Part[]):
}
}
- return parseChildren(n, pc);
+ return parseChildren(n, pc, opts);
}
-function parseHtmlMessage(html: string, pc: PartCreator, isQuotedMessage: boolean): Part[] {
+interface IParseOptions {
+ isQuotedMessage?: boolean;
+ shouldEscape?: boolean;
+}
+
+function parseHtmlMessage(html: string, pc: PartCreator, opts: IParseOptions): Part[] {
// no nodes from parsing here should be inserted in the document,
// as scripts in event handlers, etc would be executed then.
// we're only taking text, so that is fine
- const parts = parseNode(new DOMParser().parseFromString(html, "text/html").body, pc);
- if (isQuotedMessage) {
+ const parts = parseNode(new DOMParser().parseFromString(html, "text/html").body, pc, opts);
+ if (opts.isQuotedMessage) {
prefixLines(parts, "> ", pc);
}
return parts;
@@ -264,14 +271,14 @@ function parseHtmlMessage(html: string, pc: PartCreator, isQuotedMessage: boolea
export function parsePlainTextMessage(
body: string,
pc: PartCreator,
- opts: { isQuotedMessage?: boolean, shouldEscape?: boolean },
+ opts: IParseOptions,
): Part[] {
const lines = body.split(/\r\n|\r|\n/g); // split on any new-line combination not just \n, collapses \r\n
return lines.reduce((parts, line, i) => {
if (opts.isQuotedMessage) {
parts.push(pc.plain("> "));
}
- parts.push(...parseAtRoomMentions(line, pc, opts.shouldEscape));
+ parts.push(...parseAtRoomMentions(line, pc, opts));
const isLast = i === lines.length - 1;
if (!isLast) {
parts.push(pc.newline());
@@ -280,19 +287,23 @@ export function parsePlainTextMessage(
}, [] as Part[]);
}
-export function parseEvent(event: MatrixEvent, pc: PartCreator, { isQuotedMessage = false } = {}) {
+export function parseEvent(event: MatrixEvent, pc: PartCreator, opts: IParseOptions = { shouldEscape: true }) {
const content = event.getContent();
let parts: Part[];
- const isEmote = content.msgtype === "m.emote";
+ const isEmote = content.msgtype === MsgType.Emote;
let isRainbow = false;
if (content.format === "org.matrix.custom.html") {
- parts = parseHtmlMessage(content.formatted_body || "", pc, isQuotedMessage);
+ parts = parseHtmlMessage(content.formatted_body || "", pc, opts);
if (content.body && content.formatted_body && textToHtmlRainbow(content.body) === content.formatted_body) {
isRainbow = true;
}
} else {
- parts = parsePlainTextMessage(content.body || "", pc, { isQuotedMessage });
+ let body = content.body || "";
+ if (event.replyEventId) {
+ body = stripPlainReply(body);
+ }
+ parts = parsePlainTextMessage(body, pc, opts);
}
if (isEmote && isRainbow) {
diff --git a/src/editor/serialize.ts b/src/editor/serialize.ts
index 4317579c345..024c22790b2 100644
--- a/src/editor/serialize.ts
+++ b/src/editor/serialize.ts
@@ -17,6 +17,7 @@ limitations under the License.
import { AllHtmlEntities } from 'html-entities';
import cheerio from 'cheerio';
+import escapeHtml from "escape-html";
import _ from 'lodash';
import Markdown from '../Markdown';
@@ -53,7 +54,19 @@ export function mdSerialize(model: EditorModel): string {
}, "");
}
-export function htmlSerializeIfNeeded(model: EditorModel, { forceHTML = false } = {}): string {
+interface ISerializeOpts {
+ forceHTML?: boolean;
+ useMarkdown?: boolean;
+}
+
+export function htmlSerializeIfNeeded(
+ model: EditorModel,
+ { forceHTML = false, useMarkdown = true }: ISerializeOpts = {},
+): string {
+ if (!useMarkdown) {
+ return escapeHtml(textSerialize(model)).replace(/\n/g, '
'); + } + let md = mdSerialize(model); // copy of raw input to remove unwanted math later const orig = md; diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index 7c69f575de8..3a417b3749f 100644 --- a/src/events/EventTileFactory.tsx +++ b/src/events/EventTileFactory.tsx @@ -19,7 +19,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { EventType, MsgType, RelationType } from "matrix-js-sdk/src/@types/event"; import { M_POLL_START, Optional } from "matrix-events-sdk"; import { MatrixClient } from "matrix-js-sdk/src/client"; -import { M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon"; import EditorStateTransfer from "../utils/EditorStateTransfer"; import { RoomPermalinkCreator } from "../utils/permalinks/Permalinks"; @@ -42,10 +41,10 @@ import MJitsiWidgetEvent from "../components/views/messages/MJitsiWidgetEvent"; import { hasText } from "../TextForEvent"; import { getMessageModerationState, MessageModerationState } from "../utils/EventUtils"; import HiddenBody from "../components/views/messages/HiddenBody"; -import SettingsStore from "../settings/SettingsStore"; import ViewSourceEvent from "../components/views/messages/ViewSourceEvent"; import { UserNameColorMode } from "../settings/enums/UserNameColorMode"; import { Layout } from "../settings/enums/Layout"; +import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline"; // Subset of EventTile's IProps plus some mixins export interface EventTileTypeProps { @@ -226,10 +225,7 @@ export function pickFactory( // Try and pick a state event factory, if we can. if (mxEvent.isState()) { - if ( - M_BEACON_INFO.matches(evType) && - SettingsStore.getValue("feature_location_share_live") - ) { + if (shouldDisplayAsBeaconTile(mxEvent)) { return MessageEventFactory; } @@ -431,6 +427,8 @@ export function haveRendererForEvent(mxEvent: MatrixEvent, showHiddenEvents: boo return hasText(mxEvent, showHiddenEvents); } else if (handler === STATE_EVENT_TILE_TYPES[EventType.RoomCreate]) { return Boolean(mxEvent.getContent()['predecessor']); + } else if (handler === JSONEventFactory) { + return false; } else { return true; } diff --git a/src/linkify-matrix.ts b/src/linkify-matrix.ts index c42d98d326c..7935f5d0377 100644 --- a/src/linkify-matrix.ts +++ b/src/linkify-matrix.ts @@ -225,6 +225,8 @@ export const options = { rel: 'noreferrer noopener', }, + ignoreTags: ['pre', 'code'], + className: 'linkified', target: function(href: string, type: Type | string): string { diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 704584298be..e386160c9c8 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -136,7 +136,7 @@ export interface IBaseSetting {
};
// Optional description which will be shown as microCopy under SettingsFlags
- description?: string;
+ description?: string | (() => ReactNode);
// The supported levels are required. Preferably, use the preset arrays
// at the top of this file to define this rather than a custom array.
@@ -447,7 +447,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
isFeature: true,
labsGroup: LabGroup.Messaging,
supportedLevels: LEVELS_FEATURE,
- displayName: _td("Location sharing - pin drop (under active development)"),
+ displayName: _td("Location sharing - pin drop"),
default: false,
},
"feature_location_share_live": {
@@ -455,8 +455,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
labsGroup: LabGroup.Messaging,
supportedLevels: LEVELS_FEATURE,
displayName: _td(
- `Live location sharing - share current location ` +
- `(active development, and temporarily, locations persist in room history)`,
+ "Live Location Sharing (temporary implementation: locations persist in room history)",
),
default: false,
},
@@ -631,6 +630,16 @@ export const SETTINGS: {[setting: string]: ISetting} = {
displayName: _td('Automatically replace plain text Emoji'),
default: false,
},
+ "MessageComposerInput.useMarkdown": {
+ supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+ displayName: _td('Enable Markdown'),
+ description: () => _t(
+ "Start messages with ();
+ private static objectCache = new Map();
+ private static storageListenerBound = false;
+
+ private static onStorageEvent = (e: StorageEvent) => {
+ if (e.key === null) {
+ AbstractLocalStorageSettingsHandler.clear();
+ } else {
+ AbstractLocalStorageSettingsHandler.itemCache.delete(e.key);
+ AbstractLocalStorageSettingsHandler.objectCache.delete(e.key);
+ }
+ };
+
+ // Expose the clear event for Lifecycle to call, the storage listener only fires for changes from other tabs
+ public static clear() {
+ AbstractLocalStorageSettingsHandler.itemCache.clear();
+ AbstractLocalStorageSettingsHandler.objectCache.clear();
+ }
+
+ protected constructor() {
+ super();
+
+ if (!AbstractLocalStorageSettingsHandler.storageListenerBound) {
+ AbstractLocalStorageSettingsHandler.storageListenerBound = true;
+ // Listen for storage changes from other tabs to bust the cache
+ window.addEventListener("storage", AbstractLocalStorageSettingsHandler.onStorageEvent);
+ }
+ }
+
+ protected getItem(key: string): string {
+ if (!AbstractLocalStorageSettingsHandler.itemCache.has(key)) {
+ const value = localStorage.getItem(key);
+ AbstractLocalStorageSettingsHandler.itemCache.set(key, value);
+ return value;
+ }
+
+ return AbstractLocalStorageSettingsHandler.itemCache.get(key);
+ }
+
+ protected getBoolean(key: string): boolean | null {
+ const item = this.getItem(key);
+ if (item === "true") return true;
+ if (item === "false") return false;
+ // Fall back to the next config level
+ return null;
+ }
+
+ protected getObject(key: string): T | null {
+ if (!AbstractLocalStorageSettingsHandler.objectCache.has(key)) {
+ try {
+ const value = JSON.parse(localStorage.getItem(key));
+ AbstractLocalStorageSettingsHandler.objectCache.set(key, value);
+ return value;
+ } catch (err) {
+ console.error("Failed to parse localStorage object", err);
+ return null;
+ }
+ }
+
+ return AbstractLocalStorageSettingsHandler.objectCache.get(key) as T;
+ }
+
+ protected setItem(key: string, value: string): void {
+ AbstractLocalStorageSettingsHandler.itemCache.set(key, value);
+ localStorage.setItem(key, value);
+ }
+
+ protected setBoolean(key: string, value: boolean | null): void {
+ this.setItem(key, `${value}`);
+ }
+
+ protected setObject(key: string, value: object): void {
+ AbstractLocalStorageSettingsHandler.objectCache.set(key, value);
+ localStorage.setItem(key, JSON.stringify(value));
+ }
+
+ // handles both items and objects
+ protected removeItem(key: string): void {
+ localStorage.removeItem(key);
+ AbstractLocalStorageSettingsHandler.itemCache.delete(key);
+ AbstractLocalStorageSettingsHandler.objectCache.delete(key);
+ }
+
+ public isSupported(): boolean {
+ return localStorage !== undefined && localStorage !== null;
+ }
+}
diff --git a/src/settings/handlers/DeviceSettingsHandler.ts b/src/settings/handlers/DeviceSettingsHandler.ts
index 7b251dd4276..3d2338a9aa1 100644
--- a/src/settings/handlers/DeviceSettingsHandler.ts
+++ b/src/settings/handlers/DeviceSettingsHandler.ts
@@ -1,7 +1,7 @@
/*
Copyright 2017 Travis Ralston
Copyright 2019 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 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.
@@ -16,18 +16,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import SettingsHandler from "./SettingsHandler";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { SettingLevel } from "../SettingLevel";
import { CallbackFn, WatchManager } from "../WatchManager";
import { Theme } from "../enums/Theme";
+import AbstractLocalStorageSettingsHandler from "./AbstractLocalStorageSettingsHandler";
/**
* Gets and sets settings at the "device" level for the current device.
* This handler does not make use of the roomId parameter. This handler
* will special-case features to support legacy settings.
*/
-export default class DeviceSettingsHandler extends SettingsHandler {
+export default class DeviceSettingsHandler extends AbstractLocalStorageSettingsHandler {
/**
* Creates a new device settings handler
* @param {string[]} featureNames The names of known features.
@@ -44,17 +44,11 @@ export default class DeviceSettingsHandler extends SettingsHandler {
// Special case notifications
if (settingName === "notificationsEnabled") {
- const value = localStorage.getItem("notifications_enabled");
- if (typeof(value) === "string") return value === "true";
- return null; // wrong type or otherwise not set
+ return this.getBoolean("notifications_enabled");
} else if (settingName === "notificationBodyEnabled") {
- const value = localStorage.getItem("notifications_body_enabled");
- if (typeof(value) === "string") return value === "true";
- return null; // wrong type or otherwise not set
+ return this.getBoolean("notifications_body_enabled");
} else if (settingName === "audioNotificationsEnabled") {
- const value = localStorage.getItem("audio_notifications_enabled");
- if (typeof(value) === "string") return value === "true";
- return null; // wrong type or otherwise not set
+ return this.getBoolean("audio_notifications_enabled");
}
// Special case for old use_system_theme and theme setting
@@ -90,15 +84,15 @@ export default class DeviceSettingsHandler extends SettingsHandler {
// Special case notifications
if (settingName === "notificationsEnabled") {
- localStorage.setItem("notifications_enabled", newValue);
+ this.setBoolean("notifications_enabled", newValue);
this.watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue);
return Promise.resolve();
} else if (settingName === "notificationBodyEnabled") {
- localStorage.setItem("notifications_body_enabled", newValue);
+ this.setBoolean("notifications_body_enabled", newValue);
this.watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue);
return Promise.resolve();
} else if (settingName === "audioNotificationsEnabled") {
- localStorage.setItem("audio_notifications_enabled", newValue);
+ this.setBoolean("audio_notifications_enabled", newValue);
this.watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue);
return Promise.resolve();
}
@@ -110,7 +104,7 @@ export default class DeviceSettingsHandler extends SettingsHandler {
delete settings["useBubbleLayout"];
delete settings["useIRCLayout"];
settings["layout"] = newValue;
- localStorage.setItem("mx_local_settings", JSON.stringify(settings));
+ this.setObject("mx_local_settings", settings);
this.watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue);
return Promise.resolve();
@@ -158,7 +152,7 @@ export default class DeviceSettingsHandler extends SettingsHandler {
const settings = this.getSettings() || {};
settings[settingName] = newValue;
- localStorage.setItem("mx_local_settings", JSON.stringify(settings));
+ this.setObject("mx_local_settings", settings);
this.watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue);
return Promise.resolve();
@@ -168,10 +162,6 @@ export default class DeviceSettingsHandler extends SettingsHandler {
return true; // It's their device, so they should be able to
}
- public isSupported(): boolean {
- return localStorage !== undefined && localStorage !== null;
- }
-
public watchSetting(settingName: string, roomId: string, cb: CallbackFn) {
this.watchers.watchSetting(settingName, roomId, cb);
}
@@ -181,9 +171,7 @@ export default class DeviceSettingsHandler extends SettingsHandler {
}
private getSettings(): any { // TODO: [TS] Type return
- const value = localStorage.getItem("mx_local_settings");
- if (!value) return null;
- return JSON.parse(value);
+ return this.getObject("mx_local_settings");
}
// Note: features intentionally don't use the same key as settings to avoid conflicts
@@ -195,15 +183,11 @@ export default class DeviceSettingsHandler extends SettingsHandler {
return false;
}
- const value = localStorage.getItem("mx_labs_feature_" + featureName);
- if (value === "true") return true;
- if (value === "false") return false;
- // Try to read the next config level for the feature.
- return null;
+ return this.getBoolean("mx_labs_feature_" + featureName);
}
private writeFeature(featureName: string, enabled: boolean | null) {
- localStorage.setItem("mx_labs_feature_" + featureName, `${enabled}`);
+ this.setBoolean("mx_labs_feature_" + featureName, enabled);
this.watchers.notifyUpdate(featureName, null, SettingLevel.DEVICE, enabled);
}
}
diff --git a/src/settings/handlers/RoomDeviceSettingsHandler.ts b/src/settings/handlers/RoomDeviceSettingsHandler.ts
index 47fcecdfacd..271802167e6 100644
--- a/src/settings/handlers/RoomDeviceSettingsHandler.ts
+++ b/src/settings/handlers/RoomDeviceSettingsHandler.ts
@@ -1,6 +1,6 @@
/*
Copyright 2017 Travis Ralston
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 - 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.
@@ -15,15 +15,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import SettingsHandler from "./SettingsHandler";
import { SettingLevel } from "../SettingLevel";
import { WatchManager } from "../WatchManager";
+import AbstractLocalStorageSettingsHandler from "./AbstractLocalStorageSettingsHandler";
/**
* Gets and sets settings at the "room-device" level for the current device in a particular
* room.
*/
-export default class RoomDeviceSettingsHandler extends SettingsHandler {
+export default class RoomDeviceSettingsHandler extends AbstractLocalStorageSettingsHandler {
constructor(public readonly watchers: WatchManager) {
super();
}
@@ -32,7 +32,7 @@ export default class RoomDeviceSettingsHandler extends SettingsHandler {
// Special case blacklist setting to use legacy values
if (settingName === "blacklistUnverifiedDevices") {
const value = this.read("mx_local_settings");
- if (value && value['blacklistUnverifiedDevicesPerRoom']) {
+ if (value?.['blacklistUnverifiedDevicesPerRoom']) {
return value['blacklistUnverifiedDevicesPerRoom'][roomId];
}
}
@@ -49,16 +49,15 @@ export default class RoomDeviceSettingsHandler extends SettingsHandler {
if (!value) value = {};
if (!value["blacklistUnverifiedDevicesPerRoom"]) value["blacklistUnverifiedDevicesPerRoom"] = {};
value["blacklistUnverifiedDevicesPerRoom"][roomId] = newValue;
- localStorage.setItem("mx_local_settings", JSON.stringify(value));
+ this.setObject("mx_local_settings", value);
this.watchers.notifyUpdate(settingName, roomId, SettingLevel.ROOM_DEVICE, newValue);
return Promise.resolve();
}
if (newValue === null) {
- localStorage.removeItem(this.getKey(settingName, roomId));
+ this.removeItem(this.getKey(settingName, roomId));
} else {
- newValue = JSON.stringify({ value: newValue });
- localStorage.setItem(this.getKey(settingName, roomId), newValue);
+ this.setObject(this.getKey(settingName, roomId), { value: newValue });
}
this.watchers.notifyUpdate(settingName, roomId, SettingLevel.ROOM_DEVICE, newValue);
@@ -69,14 +68,8 @@ export default class RoomDeviceSettingsHandler extends SettingsHandler {
return true; // It's their device, so they should be able to
}
- public isSupported(): boolean {
- return localStorage !== undefined && localStorage !== null;
- }
-
private read(key: string): any {
- const rawValue = localStorage.getItem(key);
- if (!rawValue) return null;
- return JSON.parse(rawValue);
+ return this.getObject(key);
}
private getKey(settingName: string, roomId: string): string {
diff --git a/src/stores/ActiveWidgetStore.ts b/src/stores/ActiveWidgetStore.ts
index 28dea887df5..410bedcf7ee 100644
--- a/src/stores/ActiveWidgetStore.ts
+++ b/src/stores/ActiveWidgetStore.ts
@@ -23,19 +23,25 @@ import WidgetUtils from "../utils/WidgetUtils";
import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
export enum ActiveWidgetStoreEvent {
- Update = "update",
+ // Indicates a change in the currently persistent widget
+ Persistence = "persistence",
+ // Indicate changes in the currently docked widgets
+ Dock = "dock",
+ Undock = "undock",
}
/**
* Stores information about the widgets active in the app right now:
* * What widget is set to remain always-on-screen, if any
* Only one widget may be 'always on screen' at any one time.
- * * Negotiated capabilities for active apps
+ * * Reference counts to keep track of whether a widget is kept docked or alive
+ * by any components
*/
export default class ActiveWidgetStore extends EventEmitter {
private static internalInstance: ActiveWidgetStore;
private persistentWidgetId: string;
private persistentRoomId: string;
+ private dockedWidgetsByUid = new Map();
public static get instance(): ActiveWidgetStore {
if (!ActiveWidgetStore.internalInstance) {
@@ -79,7 +85,7 @@ export default class ActiveWidgetStore extends EventEmitter {
this.persistentWidgetId = widgetId;
this.persistentRoomId = roomId;
}
- this.emit(ActiveWidgetStoreEvent.Update);
+ this.emit(ActiveWidgetStoreEvent.Persistence);
}
public getWidgetPersistence(widgetId: string, roomId: string): boolean {
@@ -93,6 +99,34 @@ export default class ActiveWidgetStore extends EventEmitter {
public getPersistentRoomId(): string {
return this.persistentRoomId;
}
+
+ // Registers the given widget as being docked somewhere in the UI (not a PiP),
+ // to allow its lifecycle to be tracked.
+ public dockWidget(widgetId: string, roomId: string): void {
+ const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
+ const refs = this.dockedWidgetsByUid.get(uid) ?? 0;
+ this.dockedWidgetsByUid.set(uid, refs + 1);
+ if (refs === 0) this.emit(ActiveWidgetStoreEvent.Dock);
+ }
+
+ public undockWidget(widgetId: string, roomId: string): void {
+ const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
+ const refs = this.dockedWidgetsByUid.get(uid);
+ if (refs) this.dockedWidgetsByUid.set(uid, refs - 1);
+ if (refs === 1) this.emit(ActiveWidgetStoreEvent.Undock);
+ }
+
+ // Determines whether the given widget is docked anywhere in the UI (not a PiP)
+ public isDocked(widgetId: string, roomId: string): boolean {
+ const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
+ const refs = this.dockedWidgetsByUid.get(uid) ?? 0;
+ return refs > 0;
+ }
+
+ // Determines whether the given widget is being kept alive in the UI, including PiPs
+ public isLive(widgetId: string, roomId: string): boolean {
+ return this.isDocked(widgetId, roomId) || this.getWidgetPersistence(widgetId, roomId);
+ }
}
window.mxActiveWidgetStore = ActiveWidgetStore.instance;
diff --git a/src/stores/OwnBeaconStore.ts b/src/stores/OwnBeaconStore.ts
index eabe9ea083b..609b85fae25 100644
--- a/src/stores/OwnBeaconStore.ts
+++ b/src/stores/OwnBeaconStore.ts
@@ -20,7 +20,6 @@ import {
BeaconIdentifier,
BeaconEvent,
MatrixEvent,
- RelationType,
Room,
RoomMember,
RoomState,
@@ -29,7 +28,7 @@ import {
import {
BeaconInfoState, makeBeaconContent, makeBeaconInfoContent,
} from "matrix-js-sdk/src/content-helpers";
-import { M_BEACON } from "matrix-js-sdk/src/@types/beacon";
+import { MBeaconInfoEventContent, M_BEACON } from "matrix-js-sdk/src/@types/beacon";
import { logger } from "matrix-js-sdk/src/logger";
import defaultDispatcher from "../dispatcher/dispatcher";
@@ -51,7 +50,8 @@ const isOwnBeacon = (beacon: Beacon, userId: string): boolean => beacon.beaconIn
export enum OwnBeaconStoreEvent {
LivenessChange = 'OwnBeaconStore.LivenessChange',
MonitoringLivePosition = 'OwnBeaconStore.MonitoringLivePosition',
- WireError = 'WireError',
+ LocationPublishError = 'LocationPublishError',
+ BeaconUpdateError = 'BeaconUpdateError',
}
const MOVING_UPDATE_INTERVAL = 2000;
@@ -61,10 +61,35 @@ const BAIL_AFTER_CONSECUTIVE_ERROR_COUNT = 2;
type OwnBeaconStoreState = {
beacons: Map;
- beaconWireErrors: Map;
+ beaconLocationPublishErrorCounts: Map;
+ beaconUpdateErrors: Map;
beaconsByRoomId: Map>;
liveBeaconIds: BeaconIdentifier[];
};
+
+const CREATED_BEACONS_KEY = 'mx_live_beacon_created_id';
+const removeLocallyCreateBeaconEventId = (eventId: string): void => {
+ const ids = getLocallyCreatedBeaconEventIds();
+ window.localStorage.setItem(CREATED_BEACONS_KEY, JSON.stringify(ids.filter(id => id !== eventId)));
+};
+const storeLocallyCreateBeaconEventId = (eventId: string): void => {
+ const ids = getLocallyCreatedBeaconEventIds();
+ window.localStorage.setItem(CREATED_BEACONS_KEY, JSON.stringify([...ids, eventId]));
+};
+
+const getLocallyCreatedBeaconEventIds = (): string[] => {
+ let ids: string[];
+ try {
+ ids = JSON.parse(window.localStorage.getItem(CREATED_BEACONS_KEY) ?? '[]');
+ if (!Array.isArray(ids)) {
+ throw new Error('Invalid stored value');
+ }
+ } catch (error) {
+ logger.error('Failed to retrieve locally created beacon event ids', error);
+ ids = [];
+ }
+ return ids;
+};
export class OwnBeaconStore extends AsyncStoreWithClient {
private static internalInstance = new OwnBeaconStore();
// users beacons, keyed by event type
@@ -75,7 +100,8 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
* Counts consecutive wire errors per beacon
* Reset on successful publish of location
*/
- public readonly beaconWireErrorCounts = new Map();
+ public readonly beaconLocationPublishErrorCounts = new Map();
+ public readonly beaconUpdateErrors = new Map();
/**
* ids of live beacons
* ordered by creation time descending
@@ -111,6 +137,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
this.matrixClient.removeListener(BeaconEvent.LivenessChange, this.onBeaconLiveness);
this.matrixClient.removeListener(BeaconEvent.New, this.onNewBeacon);
this.matrixClient.removeListener(BeaconEvent.Update, this.onUpdateBeacon);
+ this.matrixClient.removeListener(BeaconEvent.Destroy, this.onDestroyBeacon);
this.matrixClient.removeListener(RoomStateEvent.Members, this.onRoomStateMembers);
this.beacons.forEach(beacon => beacon.destroy());
@@ -119,13 +146,15 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
this.beacons.clear();
this.beaconsByRoomId.clear();
this.liveBeaconIds = [];
- this.beaconWireErrorCounts.clear();
+ this.beaconLocationPublishErrorCounts.clear();
+ this.beaconUpdateErrors.clear();
}
protected async onReady(): Promise {
this.matrixClient.on(BeaconEvent.LivenessChange, this.onBeaconLiveness);
this.matrixClient.on(BeaconEvent.New, this.onNewBeacon);
this.matrixClient.on(BeaconEvent.Update, this.onUpdateBeacon);
+ this.matrixClient.on(BeaconEvent.Destroy, this.onDestroyBeacon);
this.matrixClient.on(RoomStateEvent.Members, this.onRoomStateMembers);
this.initialiseBeaconState();
@@ -143,8 +172,8 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
* Some live beacon has a wire error
* Optionally filter by room
*/
- public hasWireErrors = (roomId?: string): boolean => {
- return this.getLiveBeaconIds(roomId).some(this.beaconHasWireError);
+ public hasLocationPublishErrors = (roomId?: string): boolean => {
+ return this.getLiveBeaconIds(roomId).some(this.beaconHasLocationPublishError);
};
/**
@@ -152,12 +181,12 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
* past the allowed consecutive failure count (BAIL_AFTER_CONSECUTIVE_ERROR_COUNT)
* Then consider it to have an error
*/
- public beaconHasWireError = (beaconId: string): boolean => {
- return this.beaconWireErrorCounts.get(beaconId) >= BAIL_AFTER_CONSECUTIVE_ERROR_COUNT;
+ public beaconHasLocationPublishError = (beaconId: string): boolean => {
+ return this.beaconLocationPublishErrorCounts.get(beaconId) >= BAIL_AFTER_CONSECUTIVE_ERROR_COUNT;
};
- public resetWireError = (beaconId: string): void => {
- this.incrementBeaconWireErrorCount(beaconId, false);
+ public resetLocationPublishError = (beaconId: string): void => {
+ this.incrementBeaconLocationPublishErrorCount(beaconId, false);
// always publish to all live beacons together
// instead of just one that was changed
@@ -173,8 +202,8 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
return this.liveBeaconIds.filter(beaconId => this.beaconsByRoomId.get(roomId)?.has(beaconId));
};
- public getLiveBeaconIdsWithWireError = (roomId?: string): string[] => {
- return this.getLiveBeaconIds(roomId).filter(this.beaconHasWireError);
+ public getLiveBeaconIdsWithLocationPublishError = (roomId?: string): string[] => {
+ return this.getLiveBeaconIds(roomId).filter(this.beaconHasLocationPublishError);
};
public getBeaconById = (beaconId: string): Beacon | undefined => {
@@ -189,7 +218,9 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
return;
}
- return await this.updateBeaconEvent(beacon, { live: false });
+ await this.updateBeaconEvent(beacon, { live: false });
+ // prune from local store
+ removeLocallyCreateBeaconEventId(beacon.beaconInfoId);
};
/**
@@ -216,6 +247,15 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
beacon.monitorLiveness();
};
+ private onDestroyBeacon = (beaconIdentifier: BeaconIdentifier): void => {
+ // check if we care about this beacon
+ if (!this.beacons.has(beaconIdentifier)) {
+ return;
+ }
+
+ this.checkLiveness();
+ };
+
private onBeaconLiveness = (isLive: boolean, beacon: Beacon): void => {
// check if we care about this beacon
if (!this.beacons.has(beacon.identifier)) {
@@ -250,7 +290,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
// stop watching beacons in rooms where user is no longer a member
if (member.membership === 'leave' || member.membership === 'ban') {
- this.beaconsByRoomId.get(roomState.roomId).forEach(this.removeBeacon);
+ this.beaconsByRoomId.get(roomState.roomId)?.forEach(this.removeBeacon);
this.beaconsByRoomId.delete(roomState.roomId);
}
};
@@ -263,7 +303,10 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
* Live beacon ids that do not have wire errors
*/
private get healthyLiveBeaconIds() {
- return this.liveBeaconIds.filter(beaconId => !this.beaconHasWireError(beaconId));
+ return this.liveBeaconIds.filter(beaconId =>
+ !this.beaconHasLocationPublishError(beaconId) &&
+ !this.beaconUpdateErrors.has(beaconId),
+ );
}
private initialiseBeaconState = () => {
@@ -309,9 +352,14 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
};
private checkLiveness = (): void => {
+ const locallyCreatedBeaconEventIds = getLocallyCreatedBeaconEventIds();
const prevLiveBeaconIds = this.getLiveBeaconIds();
this.liveBeaconIds = [...this.beacons.values()]
- .filter(beacon => beacon.isLive)
+ .filter(beacon =>
+ beacon.isLive &&
+ // only beacons created on this device should be shared to
+ locallyCreatedBeaconEventIds.includes(beacon.beaconInfoId),
+ )
.sort(sortBeaconsByLatestCreation)
.map(beacon => beacon.identifier);
@@ -340,6 +388,19 @@ export class OwnBeaconStore extends AsyncStoreWithClient {
}
};
+ public createLiveBeacon = async (
+ roomId: Room['roomId'],
+ beaconInfoContent: MBeaconInfoEventContent,
+ ): Promise => {
+ // eslint-disable-next-line camelcase
+ const { event_id } = await this.matrixClient.unstable_createLiveBeacon(
+ roomId,
+ beaconInfoContent,
+ );
+
+ storeLocallyCreateBeaconEventId(event_id);
+ };
+
/**
* Geolocation
*/
@@ -421,7 +482,6 @@ export class OwnBeaconStore extends AsyncStoreWithClient
+
{ preview }
diff --git a/src/components/views/settings/ChangePassword.tsx b/src/components/views/settings/ChangePassword.tsx
index f736e5f6f51..39e7ff8d1d0 100644
--- a/src/components/views/settings/ChangePassword.tsx
+++ b/src/components/views/settings/ChangePassword.tsx
@@ -41,7 +41,11 @@ enum Phase {
}
interface IProps {
- onFinished?: ({ didSetEmail: boolean }?) => void;
+ onFinished?: (outcome: {
+ didSetEmail?: boolean;
+ /** Was one or more other devices logged out whilst changing the password */
+ didLogoutOutOtherDevices: boolean;
+ }) => void;
onError?: (error: {error: string}) => void;
rowClassName?: string;
buttonClassName?: string;
@@ -82,48 +86,58 @@ export default class ChangePassword extends React.Component
+
,
+ button: _t("Continue"),
+ extraButtons: [
+ ,
+ ],
+ });
+
+ const [confirmed] = await finished;
+ if (!confirmed) return;
}
- Modal.createTrackedDialog('Change Password', '', QuestionDialog, {
- title: _t("Warning!"),
- description:
- { _t( + 'Changing your password on this homeserver will cause all of your other devices to be ' + + 'signed out. This will delete the message encryption keys stored on them, and may make ' + + 'encrypted chat history unreadable.', + ) }
+{ _t( + 'If you want to retain access to your chat history in encrypted rooms you should first ' + + 'export your room keys and re-import them afterwards.', + ) }
+{ _t( + 'You can also ask your homeserver admin to upgrade the server to change this behaviour.', + ) }
+
- { _t(
- 'Changing password will currently reset any end-to-end encryption keys on all sessions, ' +
- 'making encrypted chat history unreadable, unless you first export your room keys ' +
- 'and re-import them afterwards. ' +
- 'In future this will be improved.',
- ) }
- { ' ' }
-
- /~https://github.com/vector-im/element-web/issues/2671
-
-
,
- button: _t("Continue"),
- extraButtons: [
- ,
- ],
- onFinished: (confirmed) => {
- if (confirmed) {
- this.changePassword(cli, oldPassword, newPassword);
- }
- },
- });
+ this.changePassword(cli, oldPassword, newPassword, serverSupportsControlOfDevicesLogout, userHasOtherDevices);
}
- private changePassword(cli: MatrixClient, oldPassword: string, newPassword: string): void {
+ private changePassword(
+ cli: MatrixClient,
+ oldPassword: string,
+ newPassword: string,
+ serverSupportsControlOfDevicesLogout: boolean,
+ userHasOtherDevices: boolean,
+ ): void {
const authDict = {
type: 'm.login.password',
identifier: {
@@ -140,15 +154,21 @@ export default class ChangePassword extends React.Component
+
;
+};
+
+const MAX_FACES = 8;
+
+const VideoLobby: FC<{ room: Room }> = ({ room }) => {
+ const store = VideoChannelStore.instance;
+ const [connecting, setConnecting] = useState(false);
+ const me = useMemo(() => room.getMember(room.myUserId), [room]);
+ const connectedMembers = useConnectedMembers(room, false);
+ const videoRef = useRef
+ { _t("%(count)s people connected", { count: connectedMembers.size }) }
+
;
+ }
+
+ return
+ { facePile }
+
+ { _t("Connect now") }
+
+
;
+};
+
+export default VideoLobby;
diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts
index 077a29da7ac..e4fe89ed0bc 100644
--- a/src/contexts/RoomContext.ts
+++ b/src/contexts/RoomContext.ts
@@ -41,8 +41,6 @@ const RoomContext = createContext
+
+
+
+ '); + } + let md = mdSerialize(model); // copy of raw input to remove unwanted math later const orig = md; diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index 7c69f575de8..3a417b3749f 100644 --- a/src/events/EventTileFactory.tsx +++ b/src/events/EventTileFactory.tsx @@ -19,7 +19,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { EventType, MsgType, RelationType } from "matrix-js-sdk/src/@types/event"; import { M_POLL_START, Optional } from "matrix-events-sdk"; import { MatrixClient } from "matrix-js-sdk/src/client"; -import { M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon"; import EditorStateTransfer from "../utils/EditorStateTransfer"; import { RoomPermalinkCreator } from "../utils/permalinks/Permalinks"; @@ -42,10 +41,10 @@ import MJitsiWidgetEvent from "../components/views/messages/MJitsiWidgetEvent"; import { hasText } from "../TextForEvent"; import { getMessageModerationState, MessageModerationState } from "../utils/EventUtils"; import HiddenBody from "../components/views/messages/HiddenBody"; -import SettingsStore from "../settings/SettingsStore"; import ViewSourceEvent from "../components/views/messages/ViewSourceEvent"; import { UserNameColorMode } from "../settings/enums/UserNameColorMode"; import { Layout } from "../settings/enums/Layout"; +import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline"; // Subset of EventTile's IProps plus some mixins export interface EventTileTypeProps { @@ -226,10 +225,7 @@ export function pickFactory( // Try and pick a state event factory, if we can. if (mxEvent.isState()) { - if ( - M_BEACON_INFO.matches(evType) && - SettingsStore.getValue("feature_location_share_live") - ) { + if (shouldDisplayAsBeaconTile(mxEvent)) { return MessageEventFactory; } @@ -431,6 +427,8 @@ export function haveRendererForEvent(mxEvent: MatrixEvent, showHiddenEvents: boo return hasText(mxEvent, showHiddenEvents); } else if (handler === STATE_EVENT_TILE_TYPES[EventType.RoomCreate]) { return Boolean(mxEvent.getContent()['predecessor']); + } else if (handler === JSONEventFactory) { + return false; } else { return true; } diff --git a/src/linkify-matrix.ts b/src/linkify-matrix.ts index c42d98d326c..7935f5d0377 100644 --- a/src/linkify-matrix.ts +++ b/src/linkify-matrix.ts @@ -225,6 +225,8 @@ export const options = { rel: 'noreferrer noopener', }, + ignoreTags: ['pre', 'code'], + className: 'linkified', target: function(href: string, type: Type | string): string { diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 704584298be..e386160c9c8 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -136,7 +136,7 @@ export interface IBaseSetting
/plain to send without markdown and /md to send with.",
+ {},
+ { code: (sub) => { sub } },
+ ),
+ default: true,
+ },
"VideoView.flipVideoHorizontally": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Mirror local video feed'),
diff --git a/src/settings/SettingsStore.ts b/src/settings/SettingsStore.ts
index 95ea0e6993e..19a419afb7f 100644
--- a/src/settings/SettingsStore.ts
+++ b/src/settings/SettingsStore.ts
@@ -16,6 +16,7 @@ limitations under the License.
*/
import { logger } from "matrix-js-sdk/src/logger";
+import { ReactNode } from "react";
import DeviceSettingsHandler from "./handlers/DeviceSettingsHandler";
import RoomDeviceSettingsHandler from "./handlers/RoomDeviceSettingsHandler";
@@ -257,9 +258,11 @@ export default class SettingsStore {
* @param {string} settingName The setting to look up.
* @return {String} The description for the setting, or null if not found.
*/
- public static getDescription(settingName: string) {
- if (!SETTINGS[settingName]?.description) return null;
- return _t(SETTINGS[settingName].description);
+ public static getDescription(settingName: string): string | ReactNode {
+ const description = SETTINGS[settingName]?.description;
+ if (!description) return null;
+ if (typeof description !== 'string') return description();
+ return _t(description);
}
/**
diff --git a/src/settings/handlers/AbstractLocalStorageSettingsHandler.ts b/src/settings/handlers/AbstractLocalStorageSettingsHandler.ts
new file mode 100644
index 00000000000..07fa907a90e
--- /dev/null
+++ b/src/settings/handlers/AbstractLocalStorageSettingsHandler.ts
@@ -0,0 +1,111 @@
+/*
+Copyright 2019 - 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 SettingsHandler from "./SettingsHandler";
+
+/**
+ * Abstract settings handler wrapping around localStorage making getValue calls cheaper
+ * by caching the values and listening for localStorage updates from other tabs.
+ */
+export default abstract class AbstractLocalStorageSettingsHandler extends SettingsHandler {
+ // Shared cache between all subclass instances
+ private static itemCache = new Map