From f828c6d49467bcb9f9efc5104637a94b1ef13a6a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 29 Oct 2020 17:56:24 +0000
Subject: [PATCH] Implement call hold

Currently just by adding /holdcall and /unholdcall slash commands

The only place the hold status of the call is currently represented
is when the call is a voice call and you're viewing a different room:
it's not wired up when you're viewing the room because that currently
uses the room status bar which it won't do with the new UI.

Also convert VideoFeed to typescript, and remove videoview because
it essentially just managed the fullscreen functionality, but we'll
want and 'on hold' representation (and probably chrome for hagnup etc)
in the fullscreen UI too, so let's just make CallView the thing that
gets fullscreened.
---
 res/css/_components.scss                  |   4 +-
 res/css/views/voip/_CallContainer.scss    |   4 +-
 res/css/views/voip/_CallView.scss         |   7 +
 res/css/views/voip/_VideoView.scss        |  49 ------
 src/@types/global.d.ts                    |  14 ++
 src/CallHandler.tsx                       |  25 ++-
 src/SlashCommands.tsx                     |  27 +++
 src/components/structures/RoomView.tsx    |   2 +-
 src/components/views/elements/AppTile.js  |   2 +-
 src/components/views/voip/CallPreview.tsx |   2 +-
 src/components/views/voip/CallView.tsx    | 196 ++++++++++++++--------
 src/components/views/voip/VideoFeed.js    |  58 -------
 src/components/views/voip/VideoFeed.tsx   |  82 +++++++++
 src/components/views/voip/VideoView.js    | 142 ----------------
 src/i18n/strings/en_EN.json               |   3 +
 15 files changed, 287 insertions(+), 330 deletions(-)
 delete mode 100644 res/css/views/voip/_VideoView.scss
 delete mode 100644 src/components/views/voip/VideoFeed.js
 create mode 100644 src/components/views/voip/VideoFeed.tsx
 delete mode 100644 src/components/views/voip/VideoView.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index ad3cfbdcea..4a9301d085 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -9,6 +9,7 @@
 @import "./structures/_CustomRoomTagPanel.scss";
 @import "./structures/_FilePanel.scss";
 @import "./structures/_GenericErrorPage.scss";
+@import "./structures/_GroupFilterPanel.scss";
 @import "./structures/_GroupView.scss";
 @import "./structures/_HeaderButtons.scss";
 @import "./structures/_HomePage.scss";
@@ -27,7 +28,6 @@
 @import "./structures/_ScrollPanel.scss";
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TabbedView.scss";
-@import "./structures/_GroupFilterPanel.scss";
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserMenu.scss";
@@ -227,4 +227,4 @@
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
-@import "./views/voip/_VideoView.scss";
+@import "./views/voip/_VideoFeed.scss";
diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss
index 759797ae7b..eec8a1f188 100644
--- a/res/css/views/voip/_CallContainer.scss
+++ b/res/css/views/voip/_CallContainer.scss
@@ -33,11 +33,11 @@ limitations under the License.
         pointer-events: initial; // restore pointer events so the user can leave/interact
         cursor: pointer;
 
-        .mx_VideoView {
+        .mx_CallView_video {
             width: 350px;
         }
 
-        .mx_VideoView_localVideoFeed {
+        .mx_VideoFeed_local {
             border-radius: 8px;
             overflow: hidden;
         }
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index f6f3d40308..2aeaaa87dc 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -92,3 +92,10 @@ limitations under the License.
         background-color: $primary-fg-color;
     }
 }
+
+.mx_CallView_video {
+    width: 100%;
+    position: relative;
+    z-index: 30;
+}
+
diff --git a/res/css/views/voip/_VideoView.scss b/res/css/views/voip/_VideoView.scss
deleted file mode 100644
index feb60f4763..0000000000
--- a/res/css/views/voip/_VideoView.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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.
-*/
-
-.mx_VideoView {
-    width: 100%;
-    position: relative;
-    z-index: 30;
-}
-
-.mx_VideoView video {
-    width: 100%;
-}
-
-.mx_VideoView_remoteVideoFeed {
-    width: 100%;
-    background-color: #000;
-    z-index: 50;
-}
-
-.mx_VideoView_localVideoFeed {
-    width: 25%;
-    height: 25%;
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    z-index: 100;
-}
-
-.mx_VideoView_localVideoFeed video {
-    width: auto;
-    height: 100%;
-}
-
-.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video {
-    transform: scale(-1, 1);
-}
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index ed28a5c479..acb2c40031 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -65,6 +65,13 @@ declare global {
     interface Document {
         // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess
         hasStorageAccess?: () => Promise<boolean>;
+
+        // Safari & IE11 only have this prefixed: we used prefixed versions
+        // previously so let's continue to support them for now
+        webkitExitFullscreen(): Promise<void>;
+        msExitFullscreen(): Promise<void>;
+        readonly webkitFullscreenElement: Element | null;
+        readonly msFullscreenElement: Element | null;
     }
 
     interface Navigator {
@@ -94,4 +101,11 @@ declare global {
     interface HTMLAudioElement {
         type?: string;
     }
+
+    interface Element {
+        // Safari & IE11 only have this prefixed: we used prefixed versions
+        // previously so let's continue to support them for now
+        webkitRequestFullScreen(options?: FullscreenOptions): Promise<void>;
+        msRequestFullscreen(options?: FullscreenOptions): Promise<void>;
+    }
 }
diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index e303dd3819..17867536ed 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -59,8 +59,7 @@ import {MatrixClientPeg} from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import { _t } from './languageHandler';
-// @ts-ignore - XXX: tsc doesn't like this: our js-sdk imports are complex so this isn't surprising
-import Matrix from 'matrix-js-sdk';
+import Matrix from 'matrix-js-sdk/src/browser-index';
 import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
 import WidgetEchoStore from './stores/WidgetEchoStore';
@@ -77,7 +76,7 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import WidgetStore from "./stores/WidgetStore";
 import { WidgetMessagingStore } from "./stores/widgets/WidgetMessagingStore";
 import { ElementWidgetActions } from "./stores/widgets/ElementWidgetActions";
-import { MatrixCall, CallErrorCode, CallState, CallEvent, CallParty } from "matrix-js-sdk/lib/webrtc/call";
+import { MatrixCall, CallErrorCode, CallState, CallEvent, CallParty } from "matrix-js-sdk/src/webrtc/call";
 import Analytics from './Analytics';
 
 enum AudioID {
@@ -97,6 +96,18 @@ export enum PlaceCallType {
     ScreenSharing = 'screensharing',
 }
 
+function getRemoteAudioElement(): HTMLAudioElement {
+    // this needs to be somewhere at the top of the DOM which
+    // always exists to avoid audio interruptions.
+    // Might as well just use DOM.
+    const remoteAudioElement = document.getElementById("remoteAudio") as HTMLAudioElement;
+    if (!remoteAudioElement) {
+        console.error("Failed to find remoteAudio element - cannot play audio!"
+            + "You need to add an <audio/> to the DOM.");
+    }
+    return remoteAudioElement;
+}
+
 export default class CallHandler {
     private calls = new Map<string, MatrixCall>();
     private audioPromises = new Map<AudioID, Promise<void>>();
@@ -290,6 +301,11 @@ export default class CallHandler {
         });
     }
 
+    private setCallAudioElement(call: MatrixCall) {
+        const audioElement = getRemoteAudioElement();
+        if (audioElement) call.setRemoteAudioElement(audioElement);
+    }
+
     private setCallState(call: MatrixCall, status: CallState) {
         console.log(
             `Call state in ${call.roomId} changed to ${status}`,
@@ -344,6 +360,8 @@ export default class CallHandler {
         const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), roomId);
         this.calls.set(roomId, call);
         this.setCallListeners(call);
+        this.setCallAudioElement(call);
+
         if (type === PlaceCallType.Voice) {
             call.placeVoiceCall();
         } else if (type === 'video') {
@@ -448,6 +466,7 @@ export default class CallHandler {
                     Analytics.trackEvent('voip', 'receiveCall', 'type', call.type);
                     this.calls.set(call.roomId, call)
                     this.setCallListeners(call);
+                    this.setCallAudioElement(call);
                 }
                 break;
             case 'hangup':
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index a6481d5b95..85e0776453 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -46,6 +46,7 @@ import { EffectiveMembership, getEffectiveMembership, leaveRoomBehaviour } from
 import SdkConfig from "./SdkConfig";
 import SettingsStore from "./settings/SettingsStore";
 import {UIFeature} from "./settings/UIFeature";
+import CallHandler from "./CallHandler";
 
 // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
 interface HTMLInputEvent extends Event {
@@ -1039,6 +1040,32 @@ export const Commands = [
         },
         category: CommandCategories.actions,
     }),
+    new Command({
+        command: "holdcall",
+        description: _td('Places the call in the current room on hold'),
+        category: CommandCategories.other,
+        runFn: function(roomId, args) {
+            const call = CallHandler.sharedInstance().getCallForRoom(roomId);
+            if (!call) {
+                return reject("No active call in this room");
+            }
+            call.setRemoteOnHold(true);
+            return success();
+        },
+    }),
+    new Command({
+        command: "unholdcall",
+        description: _td('Takes the call in the current room off hold'),
+        category: CommandCategories.other,
+        runFn: function(roomId, args) {
+            const call = CallHandler.sharedInstance().getCallForRoom(roomId);
+            if (!call) {
+                return reject("No active call in this room");
+            }
+            call.setRemoteOnHold(false);
+            return success();
+        },
+    }),
 
     // Command definitions for autocompletion ONLY:
     // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 4b2fa67c1c..372186ff38 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -71,7 +71,7 @@ import RoomHeader from "../views/rooms/RoomHeader";
 import TintableSvg from "../views/elements/TintableSvg";
 import {XOR} from "../../@types/common";
 import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
-import { CallState, CallType, MatrixCall } from "matrix-js-sdk/lib/webrtc/call";
+import { CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import WidgetStore from "../../stores/WidgetStore";
 import {UPDATE_EVENT} from "../../stores/AsyncStore";
 
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index f3ebe24c15..595f1fcee7 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -163,7 +163,7 @@ export default class AppTile extends React.Component {
         if (ref) {
             this._sgWidget.start(ref);
         } else {
-            this._resetWidget(this.props);
+            //this._resetWidget(this.props);
         }
     };
 
diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index ca2b510f20..3d9235792b 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -24,7 +24,7 @@ import dis from '../../../dispatcher/dispatcher';
 import { ActionPayload } from '../../../dispatcher/payloads';
 import PersistentApp from "../elements/PersistentApp";
 import SettingsStore from "../../../settings/SettingsStore";
-import { CallState, MatrixCall } from 'matrix-js-sdk/lib/webrtc/call';
+import { CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 
 interface IProps {
 }
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 3e1833a903..653a72cca0 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -15,17 +15,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import Room from 'matrix-js-sdk/src/models/room';
 import dis from '../../../dispatcher/dispatcher';
 import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
-import VideoView from "./VideoView";
+import VideoFeed, { VideoFeedType } from "./VideoFeed";
 import RoomAvatar from "../avatars/RoomAvatar";
 import PulsedAvatar from '../avatars/PulsedAvatar';
-import { CallState, MatrixCall } from 'matrix-js-sdk/lib/webrtc/call';
+import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import { CallEvent } from 'matrix-js-sdk/src/webrtc/call';
 
 interface IProps {
         // js-sdk room object. If set, we will only show calls for the given
@@ -50,53 +51,104 @@ interface IProps {
 }
 
 interface IState {
-    call: any;
+    call: MatrixCall;
+    isLocalOnHold: boolean,
+}
+
+function getFullScreenElement() {
+    return (
+        document.fullscreenElement ||
+        // moz omitted because firefox supports this unprefixed now (webkit here for safari)
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement
+    );
+}
+
+function requestFullscreen(element: Element) {
+    const method = (
+        element.requestFullscreen ||
+        // moz omitted since firefox supports unprefixed now
+        element.webkitRequestFullScreen ||
+        element.msRequestFullscreen
+    );
+    if (method) method.call(element);
+}
+
+function exitFullscreen() {
+    const exitMethod = (
+        document.exitFullscreen ||
+        document.webkitExitFullscreen ||
+        document.msExitFullscreen
+    );
+    if (exitMethod) exitMethod.call(document);
 }
 
 export default class CallView extends React.Component<IProps, IState> {
-    private videoref: React.RefObject<any>;
     private dispatcherRef: string;
-    public call: any;
+    private container = createRef<HTMLDivElement>();
 
     constructor(props: IProps) {
         super(props);
 
+        const call = this.getCall();
         this.state = {
-            // the call this view is displaying (if any)
-            call: null,
-        };
+            call,
+            isLocalOnHold: call ? call.isLocalOnHold() : null,
+        }
 
-        this.videoref = createRef();
+        this.updateCallListeners(null, call);
     }
 
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
-        this.showCall();
     }
 
     public componentWillUnmount() {
+        this.updateCallListeners(this.state.call, null);
         dis.unregister(this.dispatcherRef);
     }
 
     private onAction = (payload) => {
-        // don't filter out payloads for room IDs other than props.room because
-        // we may be interested in the conf 1:1 room
-        if (payload.action !== 'call_state') {
-            return;
+        switch (payload.action) {
+            case 'video_fullscreen': {
+                if (!this.container.current) {
+                    return;
+                }
+                if (payload.fullscreen) {
+                    requestFullscreen(this.container.current);
+                } else if (getFullScreenElement()) {
+                    exitFullscreen();
+                }
+                break;
+            }
+            case 'call_state': {
+                const newCall = this.getCall();
+                if (newCall !== this.state.call) {
+                    this.updateCallListeners(this.state.call, newCall);
+                    this.setState({
+                        call: newCall,
+                        isLocalOnHold: newCall ? newCall.isLocalOnHold() : null,
+                    });
+                }
+                if (!newCall && getFullScreenElement()) {
+                    exitFullscreen();
+                }
+                break;
+            }
         }
-        this.showCall();
     };
 
-    private showCall() {
+    private getCall(): MatrixCall {
         let call: MatrixCall;
 
         if (this.props.room) {
             const roomId = this.props.room.roomId;
             call = CallHandler.sharedInstance().getCallForRoom(roomId);
 
-            if (this.call) {
-                this.setState({ call: call });
-            }
+            // We don't currently show voice calls in this view when in the room:
+            // they're represented in the room status bar at the bottom instead
+            // (but this will all change with the new designs)
+            if (call && call.type == CallType.Voice) call = null;
         } else {
             call = CallHandler.sharedInstance().getAnyActiveCall();
             // Ignore calls if we can't get the room associated with them.
@@ -106,65 +158,68 @@ export default class CallView extends React.Component<IProps, IState> {
             if (MatrixClientPeg.get().getRoom(call.roomId) === null) {
                 call = null;
             }
-            this.setState({ call: call });
         }
 
-        if (call) {
-            if (this.getVideoView()) {
-                call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
-                call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
-
-                // always use a separate element for audio stream playback.
-                // this is to let us move CallView around the DOM without interrupting remote audio
-                // during playback, by having the audio rendered by a top-level <audio/> element.
-                // rather than being rendered by the main remoteVideo <video/> element.
-                call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
-            }
-        }
-        if (call && call.type === "video" && call.state !== CallState.Ended && call.state !== CallState.Ringing) {
-            this.getVideoView().getLocalVideoElement().style.display = "block";
-            this.getVideoView().getRemoteVideoElement().style.display = "block";
-        } else {
-            this.getVideoView().getLocalVideoElement().style.display = "none";
-            this.getVideoView().getRemoteVideoElement().style.display = "none";
-            dis.dispatch({action: 'video_fullscreen', fullscreen: false});
-        }
-
-        if (this.props.onResize) {
-            this.props.onResize();
-        }
+        if (call && call.state == CallState.Ended) return null;
+        return call;
     }
 
-    private getVideoView() {
-        return this.videoref.current;
+    private updateCallListeners(oldCall: MatrixCall, newCall: MatrixCall) {
+        if (oldCall === newCall) return;
+
+        if (oldCall) oldCall.removeListener(CallEvent.HoldUnhold, this.onCallHoldUnhold);
+        if (newCall) newCall.on(CallEvent.HoldUnhold, this.onCallHoldUnhold);
     }
 
+    private onCallHoldUnhold = () => {
+        this.setState({
+            isLocalOnHold: this.state.call ? this.state.call.isLocalOnHold() : null,
+        });
+    };
+
     public render() {
         let view: React.ReactNode;
-        if (this.state.call && this.state.call.type === "voice") {
-            const client = MatrixClientPeg.get();
-            const callRoom = client.getRoom(this.state.call.roomId);
 
-            view = <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
-                <PulsedAvatar>
-                    <RoomAvatar
-                        room={callRoom}
-                        height={35}
-                        width={35}
+        if (this.state.call) {
+            if (this.state.call.type === "voice") {
+                const client = MatrixClientPeg.get();
+                const callRoom = client.getRoom(this.state.call.roomId);
+
+                let caption = _t("Active call");
+                if (this.state.isLocalOnHold) {
+                    // we currently have no UI for holding / unholding a call (apart from slash
+                    // commands) so we don't disintguish between when we've put the call on hold
+                    // (ie. we'd show an unhold button) and when the other side has put us on hold
+                    // (where obviously we would not show such a button).
+                    caption = _t("Call Paused");
+                }
+
+                view = <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
+                    <PulsedAvatar>
+                        <RoomAvatar
+                            room={callRoom}
+                            height={35}
+                            width={35}
+                        />
+                    </PulsedAvatar>
+                    <div>
+                        <h1>{callRoom.name}</h1>
+                        <p>{ caption }</p>
+                    </div>
+                </AccessibleButton>;
+            } else {
+                // For video calls, we currently ignore the call hold state altogether
+                // (the video will just go black)
+
+                // if we're fullscreen, we don't want to set a maxHeight on the video element.
+                const maxVideoHeight = getFullScreenElement() ? null : this.props.maxVideoHeight;
+                view = <div className="mx_CallView_video" onClick={this.props.onClick}>
+                    <VideoFeed type={VideoFeedType.Remote} call={this.state.call} onResize={this.props.onResize}
+                        maxHeight={maxVideoHeight}
                     />
-                </PulsedAvatar>
-                <div>
-                    <h1>{callRoom.name}</h1>
-                    <p>{ _t("Active call") }</p>
-                </div>
-            </AccessibleButton>;
-        } else {
-            view = <VideoView
-                ref={this.videoref}
-                onClick={this.props.onClick}
-                onResize={this.props.onResize}
-                maxHeight={this.props.maxVideoHeight}
-            />;
+                    <VideoFeed type={VideoFeedType.Local} call={this.state.call} />
+                </div>;
+            }
         }
 
         let hangup: React.ReactNode;
@@ -180,10 +235,9 @@ export default class CallView extends React.Component<IProps, IState> {
             />;
         }
 
-        return <div className={this.props.className}>
+        return <div className={this.props.className} ref={this.container}>
             {view}
             {hangup}
         </div>;
     }
 }
-
diff --git a/src/components/views/voip/VideoFeed.js b/src/components/views/voip/VideoFeed.js
deleted file mode 100644
index a0330f8cb1..0000000000
--- a/src/components/views/voip/VideoFeed.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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, {createRef} from 'react';
-import PropTypes from 'prop-types';
-
-export default class VideoFeed extends React.Component {
-    static propTypes = {
-        // maxHeight style attribute for the video element
-        maxHeight: PropTypes.number,
-
-        // a callback which is called when the video element is resized
-        // due to a change in video metadata
-        onResize: PropTypes.func,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._vid = createRef();
-    }
-
-    componentDidMount() {
-        this._vid.current.addEventListener('resize', this.onResize);
-    }
-
-    componentWillUnmount() {
-        this._vid.current.removeEventListener('resize', this.onResize);
-    }
-
-    onResize = (e) => {
-        if (this.props.onResize) {
-            this.props.onResize(e);
-        }
-    };
-
-    render() {
-        return (
-            <video ref={this._vid} style={{maxHeight: this.props.maxHeight}}>
-            </video>
-        );
-    }
-}
-
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
new file mode 100644
index 0000000000..ee6305c79c
--- /dev/null
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -0,0 +1,82 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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 classnames from 'classnames';
+import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import React, {createRef} from 'react';
+import SettingsStore from "../../../settings/SettingsStore";
+
+export enum VideoFeedType {
+    Local,
+    Remote,
+}
+
+interface IProps {
+    call: MatrixCall,
+
+    type: VideoFeedType,
+
+    // maxHeight style attribute for the video element
+    maxHeight?: number,
+
+    // a callback which is called when the video element is resized
+    // due to a change in video metadata
+    onResize?: (e: Event) => void,
+}
+
+export default class VideoFeed extends React.Component<IProps> {
+    private vid = createRef<HTMLVideoElement>();
+
+    componentDidMount() {
+        this.vid.current.addEventListener('resize', this.onResize);
+        if (this.props.type === VideoFeedType.Local) {
+            this.props.call.setLocalVideoElement(this.vid.current);
+        } else {
+            this.props.call.setRemoteVideoElement(this.vid.current);
+        }
+    }
+
+    componentWillUnmount() {
+        this.vid.current.removeEventListener('resize', this.onResize);
+    }
+
+    onResize = (e) => {
+        if (this.props.onResize) {
+            this.props.onResize(e);
+        }
+    };
+
+    render() {
+        const videoClasses = {
+            mx_VideoFeed: true,
+            mx_VideoFeed_local: this.props.type === VideoFeedType.Local,
+            mx_VideoFeed_remote: this.props.type === VideoFeedType.Remote,
+            mx_VideoFeed_mirror: (
+                this.props.type === VideoFeedType.Local &&
+                SettingsStore.getValue('VideoView.flipVideoHorizontally')
+            ),
+        };
+
+        let videoStyle = {};
+        if (this.props.maxHeight) videoStyle = { maxHeight: this.props.maxHeight };
+
+        return <div className={classnames(videoClasses)}>
+            <video ref={this.vid} style={videoStyle}></video>
+        </div>;
+    }
+}
+
diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
deleted file mode 100644
index 374a12e82d..0000000000
--- a/src/components/views/voip/VideoView.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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, {createRef} from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import * as sdk from '../../../index';
-import dis from '../../../dispatcher/dispatcher';
-
-import SettingsStore from "../../../settings/SettingsStore";
-
-function getFullScreenElement() {
-    return (
-        document.fullscreenElement ||
-        document.mozFullScreenElement ||
-        document.webkitFullscreenElement ||
-        document.msFullscreenElement
-    );
-}
-
-export default class VideoView extends React.Component {
-    static propTypes = {
-        // maxHeight style attribute for the video element
-        maxHeight: PropTypes.number,
-
-        // a callback which is called when the user clicks on the video div
-        onClick: PropTypes.func,
-
-        // a callback which is called when the video element is resized due to
-        // a change in video metadata
-        onResize: PropTypes.func,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._local = createRef();
-        this._remote = createRef();
-    }
-
-    componentDidMount() {
-        this.dispatcherRef = dis.register(this.onAction);
-    }
-
-    componentWillUnmount() {
-        dis.unregister(this.dispatcherRef);
-    }
-
-    getRemoteVideoElement = () => {
-        return ReactDOM.findDOMNode(this._remote.current);
-    };
-
-    getRemoteAudioElement = () => {
-        // this needs to be somewhere at the top of the DOM which
-        // always exists to avoid audio interruptions.
-        // Might as well just use DOM.
-        const remoteAudioElement = document.getElementById("remoteAudio");
-        if (!remoteAudioElement) {
-            console.error("Failed to find remoteAudio element - cannot play audio!"
-                + "You need to add an <audio/> to the DOM.");
-        }
-        return remoteAudioElement;
-    };
-
-    getLocalVideoElement = () => {
-        return ReactDOM.findDOMNode(this._local.current);
-    };
-
-    setContainer = (c) => {
-        this.container = c;
-    };
-
-    onAction = (payload) => {
-        switch (payload.action) {
-            case 'video_fullscreen': {
-                if (!this.container) {
-                    return;
-                }
-                const element = this.container;
-                if (payload.fullscreen) {
-                    const requestMethod = (
-                        element.requestFullScreen ||
-                        element.webkitRequestFullScreen ||
-                        element.mozRequestFullScreen ||
-                        element.msRequestFullscreen
-                    );
-                    requestMethod.call(element);
-                } else if (getFullScreenElement()) {
-                    const exitMethod = (
-                        document.exitFullscreen ||
-                        document.mozCancelFullScreen ||
-                        document.webkitExitFullscreen ||
-                        document.msExitFullscreen
-                    );
-                    if (exitMethod) {
-                        exitMethod.call(document);
-                    }
-                }
-                break;
-            }
-        }
-    };
-
-    render() {
-        const VideoFeed = sdk.getComponent('voip.VideoFeed');
-
-        // if we're fullscreen, we don't want to set a maxHeight on the video element.
-        const maxVideoHeight = getFullScreenElement() ? null : this.props.maxHeight;
-        const localVideoFeedClasses = classNames("mx_VideoView_localVideoFeed",
-            { "mx_VideoView_localVideoFeed_flipped":
-                SettingsStore.getValue('VideoView.flipVideoHorizontally'),
-            },
-        );
-        return (
-            <div className="mx_VideoView" ref={this.setContainer} onClick={this.props.onClick}>
-                <div className="mx_VideoView_remoteVideoFeed">
-                    <VideoFeed ref={this._remote} onResize={this.props.onResize}
-                        maxHeight={maxVideoHeight} />
-                </div>
-                <div className={localVideoFeedClasses}>
-                    <VideoFeed ref={this._local} />
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 400fa24713..79b777c1fb 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -213,6 +213,8 @@
     "Send a bug report with logs": "Send a bug report with logs",
     "Opens chat with the given user": "Opens chat with the given user",
     "Sends a message to the given user": "Sends a message to the given user",
+    "Places the call in the current room on hold": "Places the call in the current room on hold",
+    "Takes the call in the current room off hold": "Takes the call in the current room off hold",
     "Displays action": "Displays action",
     "Reason": "Reason",
     "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.",
@@ -529,6 +531,7 @@
     "My Ban List": "My Ban List",
     "This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!",
     "Active call": "Active call",
+    "Call Paused": "Call Paused",
     "Unknown caller": "Unknown caller",
     "Incoming voice call": "Incoming voice call",
     "Incoming video call": "Incoming video call",