You've already forked matrix-react-sdk
							
							
				mirror of
				https://github.com/matrix-org/matrix-react-sdk.git
				synced 2025-11-04 11:51:45 +03:00 
			
		
		
		
	Remove call bar
Also hide video mute button on voice calls (awaiting clarification from design) and fix mute keyboard shortcuts by moving them out of roomview & into callview.
This commit is contained in:
		@@ -18,13 +18,11 @@ import React from 'react';
 | 
			
		||||
import PropTypes from 'prop-types';
 | 
			
		||||
import Matrix from 'matrix-js-sdk';
 | 
			
		||||
import { _t, _td } from '../../languageHandler';
 | 
			
		||||
import * as sdk from '../../index';
 | 
			
		||||
import {MatrixClientPeg} from '../../MatrixClientPeg';
 | 
			
		||||
import Resend from '../../Resend';
 | 
			
		||||
import dis from '../../dispatcher/dispatcher';
 | 
			
		||||
import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
 | 
			
		||||
import {Action} from "../../dispatcher/actions";
 | 
			
		||||
import { CallState, CallType } from 'matrix-js-sdk/lib/webrtc/call';
 | 
			
		||||
 | 
			
		||||
const STATUS_BAR_HIDDEN = 0;
 | 
			
		||||
const STATUS_BAR_EXPANDED = 1;
 | 
			
		||||
@@ -42,13 +40,6 @@ export default class RoomStatusBar extends React.Component {
 | 
			
		||||
        // the room this statusbar is representing.
 | 
			
		||||
        room: PropTypes.object.isRequired,
 | 
			
		||||
 | 
			
		||||
        // The active call in the room, if any (means we show the call bar
 | 
			
		||||
        // along with the status of the call)
 | 
			
		||||
        callState: PropTypes.string,
 | 
			
		||||
 | 
			
		||||
        // The type of the call in progress, or null if no call is in progress
 | 
			
		||||
        callType: PropTypes.string,
 | 
			
		||||
 | 
			
		||||
        // true if the room is being peeked at. This affects components that shouldn't
 | 
			
		||||
        // logically be shown when peeking, such as a prompt to invite people to a room.
 | 
			
		||||
        isPeeking: PropTypes.bool,
 | 
			
		||||
@@ -115,12 +106,6 @@ export default class RoomStatusBar extends React.Component {
 | 
			
		||||
        });
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    _showCallBar() {
 | 
			
		||||
        return (this.props.callState &&
 | 
			
		||||
            (this.props.callState !== CallState.Ended && this.props.callState !== CallState.Ringing)
 | 
			
		||||
        );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    _onResendAllClick = () => {
 | 
			
		||||
        Resend.resendUnsentEvents(this.props.room);
 | 
			
		||||
        dis.fire(Action.FocusComposer);
 | 
			
		||||
@@ -152,7 +137,7 @@ export default class RoomStatusBar extends React.Component {
 | 
			
		||||
    // changed - so we use '0' to indicate normal size, and other values to
 | 
			
		||||
    // indicate other sizes.
 | 
			
		||||
    _getSize() {
 | 
			
		||||
        if (this._shouldShowConnectionError() || this._showCallBar()) {
 | 
			
		||||
        if (this._shouldShowConnectionError()) {
 | 
			
		||||
            return STATUS_BAR_EXPANDED;
 | 
			
		||||
        } else if (this.state.unsentMessages.length > 0) {
 | 
			
		||||
            return STATUS_BAR_EXPANDED_LARGE;
 | 
			
		||||
@@ -160,22 +145,6 @@ export default class RoomStatusBar extends React.Component {
 | 
			
		||||
        return STATUS_BAR_HIDDEN;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // return suitable content for the image on the left of the status bar.
 | 
			
		||||
    _getIndicator() {
 | 
			
		||||
        if (this._showCallBar()) {
 | 
			
		||||
            const TintableSvg = sdk.getComponent("elements.TintableSvg");
 | 
			
		||||
            return (
 | 
			
		||||
                <TintableSvg src={require("../../../res/img/element-icons/room/in-call.svg")} width="23" height="20" />
 | 
			
		||||
            );
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (this._shouldShowConnectionError()) {
 | 
			
		||||
            return null;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return null;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    _shouldShowConnectionError() {
 | 
			
		||||
        // no conn bar trumps the "some not sent" msg since you can't resend without
 | 
			
		||||
        // a connection!
 | 
			
		||||
@@ -266,25 +235,6 @@ export default class RoomStatusBar extends React.Component {
 | 
			
		||||
        </div>;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    _getCallStatusText() {
 | 
			
		||||
        switch (this.props.callState) {
 | 
			
		||||
            case CallState.CreateOffer:
 | 
			
		||||
            case CallState.InviteSent:
 | 
			
		||||
                return _t('Calling...');
 | 
			
		||||
            case CallState.Connecting:
 | 
			
		||||
            case CallState.CreateAnswer:
 | 
			
		||||
                return _t('Call connecting...');
 | 
			
		||||
            case CallState.Connected:
 | 
			
		||||
                return _t('Active call');
 | 
			
		||||
            case CallState.WaitLocalMedia:
 | 
			
		||||
                if (this.props.callType === CallType.Video) {
 | 
			
		||||
                    return _t('Starting camera...');
 | 
			
		||||
                } else {
 | 
			
		||||
                    return _t('Starting microphone...');
 | 
			
		||||
                }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // return suitable content for the main (text) part of the status bar.
 | 
			
		||||
    _getContent() {
 | 
			
		||||
        if (this._shouldShowConnectionError()) {
 | 
			
		||||
@@ -307,26 +257,14 @@ export default class RoomStatusBar extends React.Component {
 | 
			
		||||
            return this._getUnsentMessageContent();
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (this._showCallBar()) {
 | 
			
		||||
            return (
 | 
			
		||||
                <div className="mx_RoomStatusBar_callBar">
 | 
			
		||||
                    <b>{ this._getCallStatusText() }</b>
 | 
			
		||||
                </div>
 | 
			
		||||
            );
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return null;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    render() {
 | 
			
		||||
        const content = this._getContent();
 | 
			
		||||
        const indicator = this._getIndicator();
 | 
			
		||||
 | 
			
		||||
        return (
 | 
			
		||||
            <div className="mx_RoomStatusBar">
 | 
			
		||||
                <div className="mx_RoomStatusBar_indicator">
 | 
			
		||||
                    { indicator }
 | 
			
		||||
                </div>
 | 
			
		||||
                <div role="alert">
 | 
			
		||||
                    { content }
 | 
			
		||||
                </div>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user