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/LegacyCallViewForRoom.tsx

@@ -0,0 +1,119 @@
+/*
+Copyright 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.
+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 { CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import React from 'react';
+import { Resizable } from "re-resizable";
+
+import LegacyCallHandler, { LegacyCallHandlerEvent } from '../../../LegacyCallHandler';
+import LegacyCallView from './LegacyCallView';
+import ResizeNotifier from "../../../utils/ResizeNotifier";
+
+interface IProps {
+    // What room we should display the call for
+    roomId: string;
+
+    resizeNotifier: ResizeNotifier;
+
+    showApps?: boolean;
+}
+
+interface IState {
+    call: MatrixCall | null;
+}
+
+/*
+ * Wrapper for LegacyCallView that always display the call in a given room,
+ * or nothing if there is no call in that room.
+ */
+export default class LegacyCallViewForRoom extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            call: this.getCall(),
+        };
+    }
+
+    public componentDidMount() {
+        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallState, this.updateCall);
+        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
+    }
+
+    public componentWillUnmount() {
+        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.updateCall);
+        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
+    }
+
+    private updateCall = () => {
+        const newCall = this.getCall();
+        if (newCall !== this.state.call) {
+            this.setState({ call: newCall });
+        }
+    };
+
+    private getCall(): MatrixCall | null {
+        const call = LegacyCallHandler.instance.getCallForRoom(this.props.roomId);
+
+        if (call && [CallState.Ended, CallState.Ringing].includes(call.state)) return null;
+        return call;
+    }
+
+    private onResizeStart = () => {
+        this.props.resizeNotifier.startResizing();
+    };
+
+    private onResize = () => {
+        this.props.resizeNotifier.notifyTimelineHeightChanged();
+    };
+
+    private onResizeStop = () => {
+        this.props.resizeNotifier.stopResizing();
+    };
+
+    public render() {
+        if (!this.state.call) return null;
+
+        return (
+            <div className="mx_LegacyCallViewForRoom">
+                <Resizable
+                    minHeight={380}
+                    maxHeight="80vh"
+                    enable={{
+                        top: false,
+                        right: false,
+                        bottom: true,
+                        left: false,
+                        topRight: false,
+                        bottomRight: false,
+                        bottomLeft: false,
+                        topLeft: false,
+                    }}
+                    onResizeStart={this.onResizeStart}
+                    onResize={this.onResize}
+                    onResizeStop={this.onResizeStop}
+                    className="mx_LegacyCallViewForRoom_ResizeWrapper"
+                    handleClasses={{ bottom: "mx_LegacyCallViewForRoom_ResizeHandle" }}
+                >
+                    <LegacyCallView
+                        call={this.state.call}
+                        pipMode={false}
+                        showApps={this.props.showApps}
+                    />
+                </Resizable>
+            </div>
+        );
+    }
+}