Make double-clicking the PiP take you to the call room (#7142)

Author: SimonBrandner

res/css/views/voip/_CallView.scss

@@ -128,6 +128,8 @@ limitations under the License.
     padding-top: 20px;
     padding-bottom: 15px;
     color: $accent-fg-color;
+    user-select: none;
+
     .mx_AccessibleButton_hasKind {
         padding: 0px;
         font-weight: bold;

src/components/views/voip/CallPreview.tsx

@@ -178,13 +178,21 @@ export default class CallPreview extends React.Component<IProps, IState> {
         });
     };
 
+    private onDoubleClick = (): void => {
+        dis.dispatch({
+            action: "view_room",
+            room_id: this.state.primaryCall.roomId,
+        });
+    };
+
     public render() {
         const pipMode = true;
         if (this.state.primaryCall) {
             return (
                 <PictureInPictureDragger
                     className="mx_CallPreview"
                     draggable={pipMode}
+                    onDoubleClick={this.onDoubleClick}
                 >
                     { ({ onStartMoving, onResize }) => <CallView
                         onMouseDownOnHeader={onStartMoving}

src/components/views/voip/CallView/CallViewHeader.tsx

@@ -19,7 +19,6 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 import React from 'react';
 import { _t, _td } from '../../../../languageHandler';
 import RoomAvatar from '../../avatars/RoomAvatar';
-import AccessibleButton from '../../elements/AccessibleButton';
 import dis from '../../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import AccessibleTooltipButton from '../../elements/AccessibleTooltipButton';
@@ -36,13 +35,6 @@ interface CallViewHeaderProps {
     onPipMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
 }
 
-const onRoomAvatarClick = (roomId: string) => {
-    dis.dispatch({
-        action: 'view_room',
-        room_id: roomId,
-    });
-};
-
 const onFullscreenClick = () => {
     dis.dispatch({
         action: 'video_fullscreen',
@@ -76,12 +68,10 @@ const CallViewHeaderControls: React.FC<CallControlsProps> = ({ pipMode = false,
 };
 const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
     return <span className="mx_CallViewHeader_secondaryCallInfo">
-        <AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}>
-            <RoomAvatar room={callRoom} height={16} width={16} />
-            <span className="mx_CallView_secondaryCall_roomName">
-                { _t("%(name)s on hold", { name: callRoom.name }) }
-            </span>
-        </AccessibleButton>
+        <RoomAvatar room={callRoom} height={16} width={16} />
+        <span className="mx_CallView_secondaryCall_roomName">
+            { _t("%(name)s on hold", { name: callRoom.name }) }
+        </span>
     </span>;
 };
 
@@ -117,9 +107,7 @@ const CallViewHeader: React.FC<CallViewHeaderProps> = ({
             className="mx_CallViewHeader"
             onMouseDown={onPipMouseDown}
         >
-            <AccessibleButton onClick={() => onRoomAvatarClick(roomId)}>
-                <RoomAvatar room={callRoom} height={32} width={32} />
-            </AccessibleButton>
+            <RoomAvatar room={callRoom} height={32} width={32} />
             <div className="mx_CallViewHeader_callInfo">
                 <div className="mx_CallViewHeader_roomName">{ callRoomName }</div>
                 <div className="mx_CallViewHeader_callTypeSmall">

src/components/views/voip/PictureInPictureDragger.tsx

@@ -42,6 +42,7 @@ interface IProps {
     className?: string;
     children: ({ onStartMoving, onResize }: IChildrenOptions) => React.ReactNode;
     draggable: boolean;
+    onDoubleClick?: () => void;
 }
 
 interface IState {
@@ -216,6 +217,7 @@ export default class PictureInPictureDragger extends React.Component<IProps, ISt
                 className={this.props.className}
                 style={this.props.draggable ? style : undefined}
                 ref={this.callViewWrapper}
+                onDoubleClick={this.props.onDoubleClick}
             >
                 <>
                     { this.props.children({