element-web/src/components/views/voip/CallView.js

/*
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.
*/
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import dis from '../../../dispatcher';
import CallHandler from '../../../CallHandler';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';

module.exports = createReactClass({
    displayName: 'CallView',

    propTypes: {
        // js-sdk room object. If set, we will only show calls for the given
        // room; if not, we will show any active call.
        room: PropTypes.object,

        // A Conference Handler implementation
        // Must have a function signature:
        //  getConferenceCallForRoom(roomId: string): MatrixCall
        ConferenceHandler: PropTypes.object,

        // maxHeight style attribute for the video panel
        maxVideoHeight: 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 content in the callview changes
        // in a way that is likely to cause a resize.
        onResize: PropTypes.func,

        // render ongoing audio call details - useful when in LeftPanel
        showVoice: PropTypes.bool,
    },

    getInitialState: function() {
        return {
            // the call this view is displaying (if any)
            call: null,
        };
    },

    UNSAFE_componentWillMount: function() {
        this._video = createRef();
    },

    componentDidMount: function() {
        this.dispatcherRef = dis.register(this.onAction);
        this.showCall();
    },

    componentWillUnmount: function() {
        dis.unregister(this.dispatcherRef);
    },

    onAction: function(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;
        }
        this.showCall();
    },

    showCall: function() {
        let call;

        if (this.props.room) {
            const roomId = this.props.room.roomId;
            call = CallHandler.getCallForRoom(roomId) ||
                (this.props.ConferenceHandler ?
                 this.props.ConferenceHandler.getConferenceCallForRoom(roomId) :
                 null
                );

            if (this.call) {
                this.setState({ call: call });
            }
        } else {
            call = CallHandler.getAnyActiveCall();
            // Ignore calls if we can't get the room associated with them.
            // I think the underlying problem is that the js-sdk sends events
            // for calls before it has made the rooms available in the store,
            // although this isn't confirmed.
            if (MatrixClientPeg.get().getRoom(call.roomId) === null) {
                call = null;
            }
            this.setState({ call: call });
        }

        if (call) {
            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.call_state !== "ended" && call.call_state !== "ringing") {
            // if this call is a conf call, don't display local video as the
            // conference will have us in it
            this.getVideoView().getLocalVideoElement().style.display = (
                call.confUserId ? "none" : "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();
        }
    },

    getVideoView: function() {
        return this._video.current;
    },

    render: function() {
        const VideoView = sdk.getComponent('voip.VideoView');
        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');

        let voice;
        if (this.state.call && this.state.call.type === "voice" && this.props.showVoice) {
            const callRoom = MatrixClientPeg.get().getRoom(this.state.call.roomId);
            voice = (
                <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
                { _t("Active call (%(roomName)s)", {roomName: callRoom.name}) }
                </AccessibleButton>
            );
        }

        return (
            <div>
                <VideoView
                    ref={this._video}
                    onClick={this.props.onClick}
                    onResize={this.props.onResize}
                    maxHeight={this.props.maxVideoHeight}
                />
                { voice }
            </div>
        );
    },
});