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 {}
  ...

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>
         );