Merge remote-tracking branch 'origin/develop' into jitsi-picture-in-picture

* origin/develop: (100 commits) Add comments to isRegionalIndicator Stop voice messages that are playing when starting a recording Properly set style attribute on shared usercontent iframe Fix in-call context menus when in PiP mode (#6552) Extract tooltipYOffset to a const Increase yOffset by 4px away i18n Post-merge conflict resolution and improve alignment of tooltips Fix image & blurhash info when skipping thumbnail due to thresholds Skip sending a thumbnail if it is not a sufficient saving over the original Null guard space inviter to prevent the app exploding Remove seams from pin icon Appease Jest Fix worklet reference for new webpack pipeline i18n Update copy Fix wrong cursor being used in PiP Fix voice feed cut-off Use flex-start as it has more universal support Wrap cases in {} ...
2021-08-06 13:25:14 +02:00 · 2021-08-06 13:25:14 +02:00 · 3b002c4c1f
commit 3b002c4c1f
parent 806b36856d 7c1d9b4eda
66 changed files with 1762 additions and 537 deletions
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@ -107,6 +107,7 @@ import UIStore, { UI_EVENTS } from "../../stores/UIStore";
 import SoftLogout from './auth/SoftLogout';
 import { makeRoomPermalink } from "../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../utils/strings";
+import { PosthogAnalytics } from '../../PosthogAnalytics';

 /** constants for MatrixChat.state.view */
 export enum Views {
@ -387,6 +388,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
        if (SettingsStore.getValue("analyticsOptIn")) {
            Analytics.enable();
        }
+
+        PosthogAnalytics.instance.updateAnonymityFromSettings();
+        PosthogAnalytics.instance.updatePlatformSuperProperties();
+
        CountlyAnalytics.instance.enable(/* anonymous = */ true);
    }

@ -443,6 +448,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
            const durationMs = this.stopPageChangeTimer();
            Analytics.trackPageChange(durationMs);
            CountlyAnalytics.instance.trackPageChange(durationMs);
+            PosthogAnalytics.instance.trackPageView(durationMs);
        }
        if (this.focusComposer) {
            dis.fire(Action.FocusSendMessageComposer);
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@ -192,11 +192,11 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>

        if (inviteSender) {
            inviterSection = <div className="mx_SpaceRoomView_preview_inviter">
-                <MemberAvatar member={inviter} width={32} height={32} />
+                <MemberAvatar member={inviter} fallbackUserId={inviteSender} width={32} height={32} />
                <div>
                    <div className="mx_SpaceRoomView_preview_inviter_name">
                        { _t("<inviter/> invites you", {}, {
-                            inviter: () => <b>{ inviter.name || inviteSender }</b>,
+                            inviter: () => <b>{ inviter?.name || inviteSender }</b>,
                        }) }
                    </div>
                    { inviter ? <div className="mx_SpaceRoomView_preview_inviter_mxid">
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@ -58,28 +58,39 @@ export default class ToastContainer extends React.Component<{}, IState> {
        let containerClasses;
        if (totalCount !== 0) {
            const topToast = this.state.toasts[0];
-            const { title, icon, key, component, className, props } = topToast;
-            const toastClasses = classNames("mx_Toast_toast", {
+            const { title, icon, key, component, className, bodyClassName, props } = topToast;
+            const bodyClasses = classNames("mx_Toast_body", bodyClassName);
+            const toastClasses = classNames("mx_Toast_toast", className, {
                "mx_Toast_hasIcon": icon,
                [`mx_Toast_icon_${icon}`]: icon,
-            }, className);
-
-            let countIndicator;
-            if (isStacked || this.state.countSeen > 0) {
-                countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
-            }
-
+            });
            const toastProps = Object.assign({}, props, {
                key,
                toastKey: key,
            });
-            toast = (<div className={toastClasses}>
-                <div className="mx_Toast_title">
-                    <h2>{ title }</h2>
-                    <span>{ countIndicator }</span>
+            const content = React.createElement(component, toastProps);
+
+            let countIndicator;
+            if (title && isStacked || this.state.countSeen > 0) {
+                countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
+            }
+
+            let titleElement;
+            if (title) {
+                titleElement = (
+                    <div className="mx_Toast_title">
+                        <h2>{ title }</h2>
+                        <span>{ countIndicator }</span>
+                    </div>
+                );
+            }
+
+            toast = (
+                <div className={toastClasses}>
+                    { titleElement }
+                    <div className={bodyClasses}>{ content }</div>
                </div>
-                <div className="mx_Toast_body">{ React.createElement(component, toastProps) }</div>
-            </div>);
+            );

            containerClasses = classNames("mx_ToastContainer", {
                "mx_ToastContainer_stacked": isStacked,
--- a/src/components/views/audio_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/audio_messages/LiveRecordingWaveform.tsx
@ -17,8 +17,7 @@ limitations under the License.
 import React from "react";
 import { IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording } from "../../../audio/VoiceRecording";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { arrayFastResample } from "../../../utils/arrays";
-import { percentageOf } from "../../../utils/numbers";
+import { arrayFastResample, arraySeed } from "../../../utils/arrays";
 import Waveform from "./Waveform";
 import { MarkedExecution } from "../../../utils/MarkedExecution";

@ -48,18 +47,14 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
    constructor(props) {
        super(props);
        this.state = {
-            waveform: [],
+            waveform: arraySeed(0, RECORDING_PLAYBACK_SAMPLES),
        };
    }

    componentDidMount() {
        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
-            const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
-            // The incoming data is between zero and one, but typically even screaming into a
-            // microphone won't send you over 0.6, so we artificially adjust the gain for the
-            // waveform. This results in a slightly more cinematic/animated waveform for the
-            // user.
-            this.waveform = bars.map(b => percentageOf(b, 0, 0.50));
+            // The incoming data is between zero and one, so we don't need to clamp/rescale it.
+            this.waveform = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
            this.scheduledUpdate.mark();
        });
    }
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@ -490,9 +490,9 @@ class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateEx
                    forceStateEvent={true}
                    onBack={this.onBack}
                    inputs={{
-                    eventType: this.state.event.getType(),
-                    evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
-                    stateKey: this.state.event.getStateKey(),
+                        eventType: this.state.event.getType(),
+                        evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
+                        stateKey: this.state.event.getStateKey(),
                    }}
                />;
            }
--- a/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
+++ b/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
@ -20,10 +20,10 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';

 export default function KeySignatureUploadFailedDialog({
-        failures,
-        source,
-        continuation,
-        onFinished,
+    failures,
+    source,
+    continuation,
+    onFinished,
 }) {
    const RETRIES = 2;
    const BaseDialog = sdk.getComponent('dialogs.BaseDialog');
--- a/src/components/views/dialogs/LogoutDialog.tsx
+++ b/src/components/views/dialogs/LogoutDialog.tsx
@ -16,6 +16,7 @@ limitations under the License.
 */

 import React from 'react';
+import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
@ -24,19 +25,25 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
 import { replaceableComponent } from "../../../utils/replaceableComponent";

+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
+interface IState {
+    shouldLoadBackupStatus: boolean;
+    loading: boolean;
+    backupInfo: IKeyBackupInfo;
+    error?: string;
+}
+
@replaceableComponent("views.dialogs.LogoutDialog")
-export default class LogoutDialog extends React.Component {
-    defaultProps = {
+export default class LogoutDialog extends React.Component<IProps, IState> {
+    static defaultProps = {
        onFinished: function() {},
    };

-    constructor() {
-        super();
-        this._onSettingsLinkClick = this._onSettingsLinkClick.bind(this);
-        this._onExportE2eKeysClicked = this._onExportE2eKeysClicked.bind(this);
-        this._onFinished = this._onFinished.bind(this);
-        this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this);
-        this._onLogoutConfirm = this._onLogoutConfirm.bind(this);
+    constructor(props) {
+        super(props);

        const cli = MatrixClientPeg.get();
        const shouldLoadBackupStatus = cli.isCryptoEnabled() && !cli.getKeyBackupEnabled();
@ -49,11 +56,11 @@ export default class LogoutDialog extends React.Component {
        };

        if (shouldLoadBackupStatus) {
-            this._loadBackupStatus();
+            this.loadBackupStatus();
        }
    }

-    async _loadBackupStatus() {
+    private async loadBackupStatus() {
        try {
            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
            this.setState({
@ -69,29 +76,29 @@ export default class LogoutDialog extends React.Component {
        }
    }

-    _onSettingsLinkClick() {
+    private onSettingsLinkClick = (): void => {
        // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(true);
+    };

-    _onExportE2eKeysClicked() {
+    private onExportE2eKeysClicked = (): void => {
        Modal.createTrackedDialogAsync('Export E2E Keys', '',
            import('../../../async-components/views/dialogs/security/ExportE2eKeysDialog'),
            {
                matrixClient: MatrixClientPeg.get(),
            },
        );
-    }
+    };

-    _onFinished(confirmed) {
+    private onFinished = (confirmed: boolean): void => {
        if (confirmed) {
            dis.dispatch({ action: 'logout' });
        }
        // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(confirmed);
+    };

-    _onSetRecoveryMethodClick() {
+    private onSetRecoveryMethodClick = (): void => {
        if (this.state.backupInfo) {
            // A key backup exists for this account, but the creating device is not
            // verified, so restore the backup which will give us the keys from it and
@ -108,15 +115,15 @@ export default class LogoutDialog extends React.Component {
        }

        // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(true);
+    };

-    _onLogoutConfirm() {
+    private onLogoutConfirm = (): void => {
        dis.dispatch({ action: 'logout' });

        // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(true);
+    };

    render() {
        if (this.state.shouldLoadBackupStatus) {
@ -152,16 +159,16 @@ export default class LogoutDialog extends React.Component {
                    </div>
                    <DialogButtons primaryButton={setupButtonCaption}
                        hasCancel={false}
-                        onPrimaryButtonClick={this._onSetRecoveryMethodClick}
+                        onPrimaryButtonClick={this.onSetRecoveryMethodClick}
                        focus={true}
                    >
-                        <button onClick={this._onLogoutConfirm}>
+                        <button onClick={this.onLogoutConfirm}>
                            { _t("I don't want my encrypted messages") }
                        </button>
                    </DialogButtons>
                    <details>
                        <summary>{ _t("Advanced") }</summary>
-                        <p><button onClick={this._onExportE2eKeysClicked}>
+                        <p><button onClick={this.onExportE2eKeysClicked}>
                            { _t("Manually export keys") }
                        </button></p>
                    </details>
@ -174,7 +181,7 @@ export default class LogoutDialog extends React.Component {
                title={_t("You'll lose access to your encrypted messages")}
                contentId='mx_Dialog_content'
                hasCancel={true}
-                onFinished={this._onFinished}
+                onFinished={this.onFinished}
            >
                { dialogContent }
            </BaseDialog>);
@ -187,7 +194,7 @@ export default class LogoutDialog extends React.Component {
                    "Are you sure you want to sign out?",
                )}
                button={_t("Sign out")}
-                onFinished={this._onFinished}
+                onFinished={this.onFinished}
            />);
        }
    }
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@ -25,7 +25,6 @@ import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call';
 import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 import classNames from 'classnames';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';

 interface IProps {
    mxEvent: MatrixEvent;
@ -117,14 +116,12 @@ export default class CallEvent extends React.Component<IProps, IState> {
        if (state === CallState.Ended) {
            const hangupReason = this.props.callEventGrouper.hangupReason;
            const gotRejected = this.props.callEventGrouper.gotRejected;
-            const rejectParty = this.props.callEventGrouper.rejectParty;

            if (gotRejected) {
-                const weDeclinedCall = MatrixClientPeg.get().getUserId() === rejectParty;
                return (
                    <div className="mx_CallEvent_content">
-                        { weDeclinedCall ? _t("You declined this call") : _t("They declined this call") }
-                        { this.renderCallBackButton(weDeclinedCall ? _t("Call back") : _t("Call again")) }
+                        { _t("Call declined") }
+                        { this.renderCallBackButton(_t("Call back")) }
                    </div>
                );
            } else if (([CallErrorCode.UserHangup, "user hangup"].includes(hangupReason) || !hangupReason)) {
@ -136,14 +133,14 @@ export default class CallEvent extends React.Component<IProps, IState> {
                // Also, if we don't have a reason
                return (
                    <div className="mx_CallEvent_content">
-                        { _t("This call has ended") }
+                        { _t("Call ended") }
                    </div>
                );
            } else if (hangupReason === CallErrorCode.InviteTimeout) {
                return (
                    <div className="mx_CallEvent_content">
-                        { _t("They didn't pick up") }
-                        { this.renderCallBackButton(_t("Call again")) }
+                        { _t("Missed call") }
+                        { this.renderCallBackButton(_t("Call back")) }
                    </div>
                );
            }
@ -176,7 +173,8 @@ export default class CallEvent extends React.Component<IProps, IState> {
                        className="mx_CallEvent_content_tooltip"
                        kind={InfoTooltipKind.Warning}
                    />
-                    { _t("This call has failed") }
+                    { _t("Connection failed") }
+                    { this.renderCallBackButton(_t("Retry")) }
                </div>
            );
        }
@ -190,7 +188,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
        if (state === CustomCallState.Missed) {
            return (
                <div className="mx_CallEvent_content">
-                    { _t("You missed this call") }
+                    { _t("Missed call") }
                    { this.renderCallBackButton(_t("Call back")) }
                </div>
            );
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@ -152,7 +152,7 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
                <h2>{ _t("Nothing pinned, yet") }</h2>
                { _t("If you have permissions, open the menu on any message and select " +
                    "<b>Pin</b> to stick them here.", {}, {
-                        b: sub => <b>{ sub }</b>,
+                    b: sub => <b>{ sub }</b>,
                }) }
            </div>
        </div>;
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@ -1381,8 +1381,8 @@ const BasicUserInfo: React.FC<{
                className="mx_UserInfo_field"
                onClick={() => {
                    dis.dispatch({
-                    action: Action.ViewUserSettings,
-                    initialTabId: UserTab.Security,
+                        action: Action.ViewUserSettings,
+                        initialTabId: UserTab.Security,
                    });
                }}
            >
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@ -55,6 +55,14 @@ const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.sourc

 const IS_MAC = navigator.platform.indexOf("Mac") !== -1;

+const SURROUND_WITH_CHARACTERS = ["\"", "_", "`", "'", "*", "~", "$"];
+const SURROUND_WITH_DOUBLE_CHARACTERS = new Map([
+    ["(", ")"],
+    ["[", "]"],
+    ["{", "}"],
+    ["<", ">"],
+]);
+
 function ctrlShortcutLabel(key: string): string {
    return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
 }
@ -99,6 +107,7 @@ interface IState {
    showVisualBell?: boolean;
    autoComplete?: AutocompleteWrapperModel;
    completionIndex?: number;
+    surroundWith: boolean;
 }

@replaceableComponent("views.rooms.BasicMessageEditor")
@ -117,12 +126,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>

    private readonly emoticonSettingHandle: string;
    private readonly shouldShowPillAvatarSettingHandle: string;
+    private readonly surroundWithHandle: string;
    private readonly historyManager = new HistoryManager();

    constructor(props) {
        super(props);
        this.state = {
            showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
+            surroundWith: SettingsStore.getValue("MessageComposerInput.surroundWith"),
        };

        this.emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
@ -130,6 +141,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
        this.configureEmoticonAutoReplace();
        this.shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
            this.configureShouldShowPillAvatar);
+        this.surroundWithHandle = SettingsStore.watchSetting("MessageComposerInput.surroundWith", null,
+            this.surroundWithSettingChanged);
    }

    public componentDidUpdate(prevProps: IProps) {
@ -422,6 +435,28 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
    private onKeyDown = (event: React.KeyboardEvent): void => {
        const model = this.props.model;
        let handled = false;
+
+        if (this.state.surroundWith && document.getSelection().type != "Caret") {
+            // This surrounds the selected text with a character. This is
+            // intentionally left out of the keybinding manager as the keybinds
+            // here shouldn't be changeable
+
+            const selectionRange = getRangeForSelection(
+                this.editorRef.current,
+                this.props.model,
+                document.getSelection(),
+            );
+            // trim the range as we want it to exclude leading/trailing spaces
+            selectionRange.trim();
+
+            if ([...SURROUND_WITH_DOUBLE_CHARACTERS.keys(), ...SURROUND_WITH_CHARACTERS].includes(event.key)) {
+                this.historyManager.ensureLastChangesPushed(this.props.model);
+                this.modifiedFlag = true;
+                toggleInlineFormat(selectionRange, event.key, SURROUND_WITH_DOUBLE_CHARACTERS.get(event.key));
+                handled = true;
+            }
+        }
+
        const action = getKeyBindingsManager().getMessageComposerAction(event);
        switch (action) {
            case MessageComposerAction.FormatBold:
@ -574,6 +609,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
        this.setState({ showPillAvatar });
    };

+    private surroundWithSettingChanged = () => {
+        const surroundWith = SettingsStore.getValue("MessageComposerInput.surroundWith");
+        this.setState({ surroundWith });
+    };
+
    componentWillUnmount() {
        document.removeEventListener("selectionchange", this.onSelectionChange);
        this.editorRef.current.removeEventListener("input", this.onInput, true);
@ -581,6 +621,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
        this.editorRef.current.removeEventListener("compositionend", this.onCompositionEnd, true);
        SettingsStore.unwatchSetting(this.emoticonSettingHandle);
        SettingsStore.unwatchSetting(this.shouldShowPillAvatarSettingHandle);
+        SettingsStore.unwatchSetting(this.surroundWithHandle);
    }

    componentDidMount() {
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@ -64,9 +64,9 @@ const NewRoomIntro = () => {
                height={AVATAR_SIZE}
                onClick={() => {
                    defaultDispatcher.dispatch<ViewUserPayload>({
-                    action: Action.ViewUser,
-                    // XXX: We should be using a real member object and not assuming what the receiver wants.
-                    member: member || { userId: dmPartner } as User,
+                        action: Action.ViewUser,
+                        // XXX: We should be using a real member object and not assuming what the receiver wants.
+                        member: member || { userId: dmPartner } as User,
                    });
                }}
            />
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@ -145,7 +145,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
        if (oldInfo && oldInfo.left) {
            // start at the old height and in the old h pos
            startStyles.push({ top: startTopOffset+"px",
-                               left: toPx(oldInfo.left) });
+                left: toPx(oldInfo.left) });
        }

        startStyles.push({ top: startTopOffset+'px', left: '0' });
@ -174,14 +174,14 @@ export default class ReadReceiptMarker extends React.PureComponent {
                title = _t(
                    "Seen by %(userName)s at %(dateTime)s",
                    { userName: this.props.fallbackUserId,
-                    dateTime: dateString },
+                        dateTime: dateString },
                );
            } else {
                title = _t(
                    "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
                    { displayName: this.props.member.rawDisplayName,
-                    userName: this.props.fallbackUserId,
-                    dateTime: dateString },
+                        userName: this.props.fallbackUserId,
+                        dateTime: dateString },
                );
            }
        }
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@ -17,10 +17,7 @@ limitations under the License.
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import React, { ReactNode } from "react";
-import {
-    RecordingState,
-    VoiceRecording,
-} from "../../../audio/VoiceRecording";
+import { IUpload, RecordingState, VoiceRecording } from "../../../audio/VoiceRecording";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import classNames from "classnames";
@ -34,6 +31,11 @@ import { MsgType } from "matrix-js-sdk/src/@types/event";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
+import NotificationBadge from "./NotificationBadge";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
+import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import InlineSpinner from "../elements/InlineSpinner";
+import { PlaybackManager } from "../../../audio/PlaybackManager";

 interface IProps {
    room: Room;
@ -42,6 +44,7 @@ interface IProps {
 interface IState {
    recorder?: VoiceRecording;
    recordingPhase?: RecordingState;
+    didUploadFail?: boolean;
 }

 /**
@ -69,9 +72,19 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,

        await this.state.recorder.stop();

+        let upload: IUpload;
        try {
-            const upload = await this.state.recorder.upload(this.props.room.roomId);
+            upload = await this.state.recorder.upload(this.props.room.roomId);
+        } catch (e) {
+            console.error("Error uploading voice message:", e);

+            // Flag error and move on. The recording phase will be reset by the upload function.
+            this.setState({ didUploadFail: true });
+
+            return; // don't dispose the recording: the user has a chance to re-upload
+        }
+
+        try {
            // noinspection ES6MissingAwait - we don't care if it fails, it'll get queued.
            MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
                "body": "Voice message",
@ -104,12 +117,11 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
                "org.matrix.msc3245.voice": {}, // No content, this is a rendering hint
            });
        } catch (e) {
-            console.error("Error sending/uploading voice message:", e);
-            Modal.createTrackedDialog('Upload failed', '', ErrorDialog, {
-                title: _t('Upload Failed'),
-                description: _t("The voice message failed to upload."),
-            });
-            return; // don't dispose the recording so the user can retry, maybe
+            console.error("Error sending voice message:", e);
+
+            // Voice message should be in the timeline at this point, so let other things take care
+            // of error handling. We also shouldn't need the recording anymore, so fall through to
+            // disposal.
        }
        await this.disposeRecording();
    }
@ -118,7 +130,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
        await VoiceRecordingStore.instance.disposeRecording();

        // Reset back to no recording, which means no phase (ie: restart component entirely)
-        this.setState({ recorder: null, recordingPhase: null });
+        this.setState({ recorder: null, recordingPhase: null, didUploadFail: false });
    }

    private onCancel = async () => {
@ -166,6 +178,9 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
        }

        try {
+            // stop any noises which might be happening
+            await PlaybackManager.instance.playOnly(null);
+
            const recorder = VoiceRecordingStore.instance.startRecording();
            await recorder.start();

@ -209,9 +224,9 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
                'mx_VoiceRecordComposerTile_stop': this.state.recorder?.isRecording,
            });

-            let tooltip = _t("Record a voice message");
+            let tooltip = _t("Send voice message");
            if (!!this.state.recorder) {
-                tooltip = _t("Stop the recording");
+                tooltip = _t("Stop recording");
            }

            let stopOrRecordBtn = <AccessibleTooltipButton
@ -229,12 +244,30 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
        if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
            deleteButton = <AccessibleTooltipButton
                className='mx_VoiceRecordComposerTile_delete'
-                title={_t("Delete recording")}
+                title={_t("Delete")}
                onClick={this.onCancel}
            />;
        }

+        let uploadIndicator;
+        if (this.state.recordingPhase === RecordingState.Uploading) {
+            uploadIndicator = <span className='mx_VoiceRecordComposerTile_uploadingState'>
+                <InlineSpinner w={16} h={16} />
+            </span>;
+        } else if (this.state.didUploadFail && this.state.recordingPhase === RecordingState.Ended) {
+            uploadIndicator = <span className='mx_VoiceRecordComposerTile_failedState'>
+                <span className='mx_VoiceRecordComposerTile_uploadState_badge'>
+                    { /* Need to stick the badge in a span to ensure it doesn't create a block component */ }
+                    <NotificationBadge
+                        notification={StaticNotificationState.forSymbol("!", NotificationColor.Red)}
+                    />
+                </span>
+                <span className='text-warning'>{ _t("Failed to send") }</span>
+            </span>;
+        }
+
        return (<>
+            { uploadIndicator }
            { deleteButton }
            { this.renderWaveformArea() }
            { recordingInfo }
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@ -61,6 +61,7 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
        'MessageComposerInput.suggestEmoji',
        'sendTypingNotifications',
        'MessageComposerInput.ctrlEnterToSend',
+        'MessageComposerInput.surroundWith',
        'MessageComposerInput.showStickersButton',
    ];

--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
@ -36,6 +36,7 @@ import { UIFeature } from "../../../../../settings/UIFeature";
 import { isE2eAdvancedPanelPossible } from "../../E2eAdvancedPanel";
 import CountlyAnalytics from "../../../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { PosthogAnalytics } from "../../../../../PosthogAnalytics";

 export class IgnoredUser extends React.Component {
    static propTypes = {
@ -106,6 +107,7 @@ export default class SecurityUserSettingsTab extends React.Component {
    _updateAnalytics = (checked) => {
        checked ? Analytics.enable() : Analytics.disable();
        CountlyAnalytics.instance.enable(/* anonymous = */ !checked);
+        PosthogAnalytics.instance.updateAnonymityFromSettings(MatrixClientPeg.get().getUserId());
    };

    _onExportE2eKeysClicked = () => {
--- a/src/components/views/voip/CallContainer.tsx
+++ b/src/components/views/voip/CallContainer.tsx
@ -1,5 +1,6 @@
 /*
 Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,7 +16,6 @@ limitations under the License.
 */

 import React from 'react';
-import IncomingCallBox from './IncomingCallBox';
 import CallPreview from './CallPreview';
 import { replaceableComponent } from "../../../utils/replaceableComponent";

@ -31,7 +31,6 @@ interface IState {
 export default class CallContainer extends React.PureComponent<IProps, IState> {
    public render() {
        return <div className="mx_CallContainer">
-            <IncomingCallBox />
            <CallPreview />
        </div>;
    }
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@ -23,11 +23,16 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t, _td } from '../../../languageHandler';
 import VideoFeed from './VideoFeed';
 import RoomAvatar from "../avatars/RoomAvatar";
-import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
+import { CallEvent, CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
 import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard';
-import { alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton } from '../../structures/ContextMenu';
+import {
+    alwaysAboveLeftOf,
+    alwaysAboveRightOf,
+    ChevronFace,
+    ContextMenuTooltipButton,
+} from '../../structures/ContextMenu';
 import CallContextMenu from '../context_menus/CallContextMenu';
 import { avatarUrlForMember } from '../../../Avatar';
 import DialpadContextMenu from '../context_menus/DialpadContextMenu';
@ -38,6 +43,8 @@ import Modal from '../../../Modal';
 import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes';
 import CallViewSidebar from './CallViewSidebar';
 import { CallViewHeader } from './CallView/CallViewHeader';
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { Alignment } from "../elements/Tooltip";

 interface IProps {
    // The call for us to display
@ -76,6 +83,8 @@ interface IState {
    sidebarShown: boolean;
 }

+const tooltipYOffset = -24;
+
 function getFullScreenElement() {
    return (
        document.fullscreenElement ||
@ -447,9 +456,12 @@ export default class CallView extends React.Component<IProps, IState> {
        let vidMuteButton;
        if (this.props.call.type === CallType.Video) {
            vidMuteButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                    className={vidClasses}
                    onClick={this.onVidMuteClick}
+                    title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
+                    alignment={Alignment.Top}
+                    yOffset={tooltipYOffset}
                />
            );
        }
@ -464,9 +476,15 @@ export default class CallView extends React.Component<IProps, IState> {
            this.props.call.state === CallState.Connected
        ) {
            screensharingButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                    className={screensharingClasses}
                    onClick={this.onScreenshareClick}
+                    title={this.state.screensharing
+                        ? _t("Stop sharing your screen")
+                        : _t("Start sharing your screen")
+                    }
+                    alignment={Alignment.Top}
+                    yOffset={tooltipYOffset}
                />
            );
        }
@ -486,6 +504,7 @@ export default class CallView extends React.Component<IProps, IState> {
                <AccessibleButton
                    className={sidebarButtonClasses}
                    onClick={this.onToggleSidebar}
+                    aria-label={this.state.sidebarShown ? _t("Hide sidebar") : _t("Show sidebar")}
                />
            );
        }
@ -494,22 +513,28 @@ export default class CallView extends React.Component<IProps, IState> {
        let contextMenuButton;
        if (this.state.callState === CallState.Connected) {
            contextMenuButton = (
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                    className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
                    onClick={this.onMoreClick}
                    inputRef={this.contextMenuButton}
                    isExpanded={this.state.showMoreMenu}
+                    title={_t("More")}
+                    alignment={Alignment.Top}
+                    yOffset={tooltipYOffset}
                />
            );
        }
        let dialpadButton;
        if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) {
            dialpadButton = (
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                    className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
                    inputRef={this.dialpadButton}
                    onClick={this.onDialpadClick}
                    isExpanded={this.state.showDialpad}
+                    title={_t("Dialpad")}
+                    alignment={Alignment.Top}
+                    yOffset={tooltipYOffset}
                />
            );
        }
@ -522,7 +547,11 @@ export default class CallView extends React.Component<IProps, IState> {
                    ChevronFace.None,
                    CONTEXT_MENU_VPADDING,
                )}
-                mountAsChild={true}
+                // We mount the context menus as a as a child typically in order to include the
+                // context menus when fullscreening the call content.
+                // However, this does not work as well when the call is embedded in a
+                // picture-in-picture frame. Thus, only mount as child when we are *not* in PiP.
+                mountAsChild={!this.props.pipMode}
                onFinished={this.closeDialpad}
                call={this.props.call}
            />;
@ -536,7 +565,7 @@ export default class CallView extends React.Component<IProps, IState> {
                    ChevronFace.None,
                    CONTEXT_MENU_VPADDING,
                )}
-                mountAsChild={true}
+                mountAsChild={!this.props.pipMode}
                onFinished={this.closeContextMenu}
                call={this.props.call}
            />;
@ -551,9 +580,12 @@ export default class CallView extends React.Component<IProps, IState> {
                { dialPad }
                { contextMenu }
                { dialpadButton }
-                <AccessibleButton
+                <AccessibleTooltipButton
                    className={micClasses}
                    onClick={this.onMicMuteClick}
+                    title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
+                    alignment={Alignment.Top}
+                    yOffset={tooltipYOffset}
                />
                { vidMuteButton }
                <div className={micCacheClasses} />
@ -561,9 +593,12 @@ export default class CallView extends React.Component<IProps, IState> {
                { screensharingButton }
                { sidebarButton }
                { contextMenuButton }
-                <AccessibleButton
+                <AccessibleTooltipButton
                    className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
                    onClick={this.onHangupClick}
+                    title={_t("Hangup")}
+                    alignment={Alignment.Top}
+                    yOffset={tooltipYOffset}
                />
            </div>
        );
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@ -1,176 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019, 2020 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 { MatrixClientPeg } from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher/dispatcher';
-import { _t } from '../../../languageHandler';
-import { ActionPayload } from '../../../dispatcher/payloads';
-import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
-import RoomAvatar from '../avatars/RoomAvatar';
-import AccessibleButton from '../elements/AccessibleButton';
-import { CallState } from 'matrix-js-sdk/src/webrtc/call';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
-import classNames from 'classnames';
-
-interface IProps {
-}
-
-interface IState {
-    incomingCall: any;
-    silenced: boolean;
-}
-
-@replaceableComponent("views.voip.IncomingCallBox")
-export default class IncomingCallBox extends React.Component<IProps, IState> {
-    private dispatcherRef: string;
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.dispatcherRef = dis.register(this.onAction);
-        this.state = {
-            incomingCall: null,
-            silenced: false,
-        };
-    }
-
-    componentDidMount = () => {
-        CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
-    };
-
-    public componentWillUnmount() {
-        dis.unregister(this.dispatcherRef);
-        CallHandler.sharedInstance().removeListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
-    }
-
-    private onAction = (payload: ActionPayload) => {
-        switch (payload.action) {
-            case 'call_state': {
-                const call = CallHandler.sharedInstance().getCallForRoom(payload.room_id);
-                if (call && call.state === CallState.Ringing) {
-                    this.setState({
-                        incomingCall: call,
-                        silenced: false, // Reset silenced state for new call
-                    });
-                } else {
-                    this.setState({
-                        incomingCall: null,
-                    });
-                }
-            }
-        }
-    };
-
-    private onSilencedCallsChanged = () => {
-        const callId = this.state.incomingCall?.callId;
-        if (!callId) return;
-        this.setState({ silenced: CallHandler.sharedInstance().isCallSilenced(callId) });
-    };
-
-    private onAnswerClick: React.MouseEventHandler = (e) => {
-        e.stopPropagation();
-        dis.dispatch({
-            action: 'answer',
-            room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
-        });
-    };
-
-    private onRejectClick: React.MouseEventHandler = (e) => {
-        e.stopPropagation();
-        dis.dispatch({
-            action: 'reject',
-            room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
-        });
-    };
-
-    private onSilenceClick: React.MouseEventHandler = (e) => {
-        e.stopPropagation();
-        const callId = this.state.incomingCall.callId;
-        this.state.silenced ?
-            CallHandler.sharedInstance().unSilenceCall(callId):
-            CallHandler.sharedInstance().silenceCall(callId);
-    };
-
-    public render() {
-        if (!this.state.incomingCall) {
-            return null;
-        }
-
-        let room = null;
-        if (this.state.incomingCall) {
-            room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall));
-        }
-
-        const caller = room ? room.name : _t("Unknown caller");
-
-        let incomingCallText = null;
-        if (this.state.incomingCall) {
-            if (this.state.incomingCall.type === "voice") {
-                incomingCallText = _t("Incoming voice call");
-            } else if (this.state.incomingCall.type === "video") {
-                incomingCallText = _t("Incoming video call");
-            } else {
-                incomingCallText = _t("Incoming call");
-            }
-        }
-
-        const silenceClass = classNames({
-            "mx_IncomingCallBox_iconButton": true,
-            "mx_IncomingCallBox_unSilence": this.state.silenced,
-            "mx_IncomingCallBox_silence": !this.state.silenced,
-        });
-
-        return <div className="mx_IncomingCallBox">
-            <div className="mx_IncomingCallBox_CallerInfo">
-                <RoomAvatar
-                    room={room}
-                    height={32}
-                    width={32}
-                />
-                <div>
-                    <h1>{ caller }</h1>
-                    <p>{ incomingCallText }</p>
-                </div>
-                <AccessibleTooltipButton
-                    className={silenceClass}
-                    onClick={this.onSilenceClick}
-                    title={this.state.silenced ? _t("Sound on"): _t("Silence call")}
-                />
-            </div>
-            <div className="mx_IncomingCallBox_buttons">
-                <AccessibleButton
-                    className="mx_IncomingCallBox_decline"
-                    onClick={this.onRejectClick}
-                    kind="danger"
-                >
-                    { _t("Decline") }
-                </AccessibleButton>
-                <div className="mx_IncomingCallBox_spacer" />
-                <AccessibleButton
-                    className="mx_IncomingCallBox_accept"
-                    onClick={this.onAnswerClick}
-                    kind="primary"
-                >
-                    { _t("Accept") }
-                </AccessibleButton>
-            </div>
-        </div>;
-    }
-}
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@ -207,6 +207,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
            const videoClasses = classnames("mx_VideoFeed_video", {
                mx_VideoFeed_video_mirror: (
                    this.props.feed.isLocal() &&
+                    this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia &&
                    SettingsStore.getValue('VideoView.flipVideoHorizontally')
                ),
            });