Prepare for Element Call integration (#9224)

* Improve accessibility and testability of Tooltip

Adding a role to Tooltip was motivated by React Testing Library's
reliance on accessibility-related attributes to locate elements.

* Make the ReadyWatchingStore constructor safer

The ReadyWatchingStore constructor previously had a chance to
immediately call onReady, which was dangerous because it was potentially
calling the derived class's onReady at a point when the derived class
hadn't even finished construction yet. In normal usage, I guess this
never was a problem, but it was causing some of the tests I was writing
to crash. This is solved by separating out the onReady call into a start
method.

* Rename 1:1 call components to 'LegacyCall'

to reflect the fact that they're slated for removal, and to not clash
with the new Call code.

* Refactor VideoChannelStore into Call and CallStore

Call is an abstract class that currently only has a Jitsi
implementation, but this will make it easy to later add an Element Call
implementation.

* Remove WidgetReady, ClientReady, and ForceHangupCall hacks

These are no longer used by the new Jitsi call implementation, and can
be removed.

* yarn i18n

* Delete call map entries instead of inserting nulls

* Allow multiple active calls and consolidate call listeners

* Fix a race condition when creating a video room

* Un-hardcode the media device fallback labels

* Apply misc code review fixes

* yarn i18n

* Disconnect from calls more politely on logout

* Fix some strict mode errors

* Fix another updateRoom race condition

src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx

@@ -0,0 +1,105 @@
+/*
+Copyright 2021 New Vector Ltd
+
+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 { Room } from 'matrix-js-sdk/src/models/room';
+import React from 'react';
+
+import { _t } from '../../../../languageHandler';
+import RoomAvatar from '../../avatars/RoomAvatar';
+import AccessibleTooltipButton from '../../elements/AccessibleTooltipButton';
+
+interface LegacyCallControlsProps {
+    onExpand?: () => void;
+    onPin?: () => void;
+    onMaximize?: () => void;
+}
+
+const LegacyCallViewHeaderControls: React.FC<LegacyCallControlsProps> = ({ onExpand, onPin, onMaximize }) => {
+    return <div className="mx_LegacyCallViewHeader_controls">
+        { onMaximize && <AccessibleTooltipButton
+            className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_fullscreen"
+            onClick={onMaximize}
+            title={_t("Fill Screen")}
+        /> }
+        { onPin && <AccessibleTooltipButton
+            className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_pin"
+            onClick={onPin}
+            title={_t("Pin")}
+        /> }
+        { onExpand && <AccessibleTooltipButton
+            className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_expand"
+            onClick={onExpand}
+            title={_t("Return to call")}
+        /> }
+    </div>;
+};
+
+interface ISecondaryCallInfoProps {
+    callRoom: Room;
+}
+
+const SecondaryCallInfo: React.FC<ISecondaryCallInfoProps> = ({ callRoom }) => {
+    return <span className="mx_LegacyCallViewHeader_secondaryCallInfo">
+        <RoomAvatar room={callRoom} height={16} width={16} />
+        <span className="mx_LegacyCallView_secondaryCall_roomName">
+            { _t("%(name)s on hold", { name: callRoom.name }) }
+        </span>
+    </span>;
+};
+
+interface LegacyCallViewHeaderProps {
+    pipMode: boolean;
+    callRooms?: Room[];
+    onPipMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    onExpand?: () => void;
+    onPin?: () => void;
+    onMaximize?: () => void;
+}
+
+const LegacyCallViewHeader: React.FC<LegacyCallViewHeaderProps> = ({
+    pipMode = false,
+    callRooms = [],
+    onPipMouseDown,
+    onExpand,
+    onPin,
+    onMaximize,
+}) => {
+    const [callRoom, onHoldCallRoom] = callRooms;
+    const callRoomName = callRoom.name;
+
+    if (!pipMode) {
+        return <div className="mx_LegacyCallViewHeader">
+            <div className="mx_LegacyCallViewHeader_icon" />
+            <span className="mx_LegacyCallViewHeader_text">{ _t("Call") }</span>
+            <LegacyCallViewHeaderControls onMaximize={onMaximize} />
+        </div>;
+    }
+    return (
+        <div
+            className="mx_LegacyCallViewHeader mx_LegacyCallViewHeader_pip"
+            onMouseDown={onPipMouseDown}
+        >
+            <RoomAvatar room={callRoom} height={32} width={32} />
+            <div className="mx_LegacyCallViewHeader_callInfo">
+                <div className="mx_LegacyCallViewHeader_roomName">{ callRoomName }</div>
+                { onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> }
+            </div>
+            <LegacyCallViewHeaderControls onExpand={onExpand} onPin={onPin} onMaximize={onMaximize} />
+        </div>
+    );
+};
+
+export default LegacyCallViewHeader;