2020-07-07 00:42:46 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
Copyright 2019, 2020 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.
|
|
|
|
*/
|
2020-07-07 17:11:08 +03:00
|
|
|
|
2021-01-20 16:49:15 +03:00
|
|
|
import React, { createRef, CSSProperties } from 'react';
|
2020-07-07 00:42:46 +03:00
|
|
|
import dis from '../../../dispatcher/dispatcher';
|
|
|
|
import CallHandler from '../../../CallHandler';
|
|
|
|
import {MatrixClientPeg} from '../../../MatrixClientPeg';
|
2020-12-18 22:35:41 +03:00
|
|
|
import { _t, _td } from '../../../languageHandler';
|
2021-03-07 10:13:35 +03:00
|
|
|
import VideoFeed from './VideoFeed';
|
2020-07-07 00:42:46 +03:00
|
|
|
import RoomAvatar from "../avatars/RoomAvatar";
|
2021-03-06 11:02:15 +03:00
|
|
|
import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
|
2020-11-18 17:22:38 +03:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2020-11-19 18:15:31 +03:00
|
|
|
import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
|
2021-01-04 23:01:43 +03:00
|
|
|
import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} from '../../structures/ContextMenu';
|
2020-11-26 17:35:09 +03:00
|
|
|
import CallContextMenu from '../context_menus/CallContextMenu';
|
|
|
|
import { avatarUrlForMember } from '../../../Avatar';
|
2021-01-04 23:01:43 +03:00
|
|
|
import DialpadContextMenu from '../context_menus/DialpadContextMenu';
|
2021-03-07 10:13:35 +03:00
|
|
|
import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed';
|
2021-03-09 06:20:07 +03:00
|
|
|
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
2020-07-07 00:42:46 +03:00
|
|
|
|
|
|
|
interface IProps {
|
2020-12-03 20:45:49 +03:00
|
|
|
// The call for us to display
|
|
|
|
call: MatrixCall,
|
|
|
|
|
|
|
|
// Another ongoing call to display information about
|
|
|
|
secondaryCall?: MatrixCall,
|
2020-07-07 00:42:46 +03:00
|
|
|
|
|
|
|
// a callback which is called when the content in the callview changes
|
|
|
|
// in a way that is likely to cause a resize.
|
2020-07-07 17:40:05 +03:00
|
|
|
onResize?: any;
|
2020-07-07 00:42:46 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
// Whether this call view is for picture-in-pictue mode
|
|
|
|
// otherwise, it's the larger call view when viewing the room the call is in.
|
|
|
|
// This is sort of a proxy for a number of things but we currently have no
|
|
|
|
// need to control those things separately, so this is simpler.
|
|
|
|
pipMode?: boolean;
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
interface IState {
|
2020-10-29 20:56:24 +03:00
|
|
|
isLocalOnHold: boolean,
|
2020-11-26 17:35:09 +03:00
|
|
|
isRemoteOnHold: boolean,
|
2020-11-18 17:22:38 +03:00
|
|
|
micMuted: boolean,
|
|
|
|
vidMuted: boolean,
|
|
|
|
callState: CallState,
|
|
|
|
controlsVisible: boolean,
|
2020-11-26 17:35:09 +03:00
|
|
|
showMoreMenu: boolean,
|
2021-01-04 23:01:43 +03:00
|
|
|
showDialpad: boolean,
|
2021-03-07 10:13:35 +03:00
|
|
|
feeds: CallFeed[],
|
2020-10-29 20:56:24 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
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);
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
|
|
|
|
2020-11-18 17:22:38 +03:00
|
|
|
const CONTROLS_HIDE_DELAY = 1000;
|
2020-11-19 20:33:43 +03:00
|
|
|
// Height of the header duplicated from CSS because we need to subtract it from our max
|
|
|
|
// height to get the max height of the video
|
2020-11-26 17:35:09 +03:00
|
|
|
const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
|
2020-11-18 17:22:38 +03:00
|
|
|
|
2021-03-09 06:20:07 +03:00
|
|
|
@replaceableComponent("views.voip.CallView")
|
2020-07-07 00:42:46 +03:00
|
|
|
export default class CallView extends React.Component<IProps, IState> {
|
|
|
|
private dispatcherRef: string;
|
2020-11-12 21:09:56 +03:00
|
|
|
private contentRef = createRef<HTMLDivElement>();
|
2020-11-18 17:22:38 +03:00
|
|
|
private controlsHideTimer: number = null;
|
2021-01-04 23:01:43 +03:00
|
|
|
private dialpadButton = createRef<HTMLDivElement>();
|
2020-11-26 17:35:09 +03:00
|
|
|
private contextMenuButton = createRef<HTMLDivElement>();
|
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
2020-12-03 20:45:49 +03:00
|
|
|
isLocalOnHold: this.props.call.isLocalOnHold(),
|
|
|
|
isRemoteOnHold: this.props.call.isRemoteOnHold(),
|
|
|
|
micMuted: this.props.call.isMicrophoneMuted(),
|
|
|
|
vidMuted: this.props.call.isLocalVideoMuted(),
|
|
|
|
callState: this.props.call.state,
|
2020-11-18 17:22:38 +03:00
|
|
|
controlsVisible: true,
|
2020-11-26 17:35:09 +03:00
|
|
|
showMoreMenu: false,
|
2021-01-04 23:01:43 +03:00
|
|
|
showDialpad: false,
|
2021-03-07 10:13:35 +03:00
|
|
|
feeds: this.props.call.getFeeds(),
|
2020-10-29 20:56:24 +03:00
|
|
|
}
|
2020-07-07 00:42:46 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
this.updateCallListeners(null, this.props.call);
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
public componentDidMount() {
|
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2020-11-19 18:15:31 +03:00
|
|
|
document.addEventListener('keydown', this.onNativeKeyDown);
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
public componentWillUnmount() {
|
2020-12-03 20:45:49 +03:00
|
|
|
if (getFullScreenElement()) {
|
|
|
|
exitFullscreen();
|
|
|
|
}
|
|
|
|
|
2020-11-19 18:15:31 +03:00
|
|
|
document.removeEventListener("keydown", this.onNativeKeyDown);
|
2020-12-03 20:45:49 +03:00
|
|
|
this.updateCallListeners(this.props.call, null);
|
2020-07-07 00:42:46 +03:00
|
|
|
dis.unregister(this.dispatcherRef);
|
|
|
|
}
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
public componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.call === prevProps.call) return;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
isLocalOnHold: this.props.call.isLocalOnHold(),
|
|
|
|
isRemoteOnHold: this.props.call.isRemoteOnHold(),
|
|
|
|
micMuted: this.props.call.isMicrophoneMuted(),
|
|
|
|
vidMuted: this.props.call.isLocalVideoMuted(),
|
|
|
|
callState: this.props.call.state,
|
|
|
|
});
|
|
|
|
|
|
|
|
this.updateCallListeners(null, this.props.call);
|
|
|
|
}
|
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
private onAction = (payload) => {
|
2020-10-29 20:56:24 +03:00
|
|
|
switch (payload.action) {
|
|
|
|
case 'video_fullscreen': {
|
2020-11-12 21:09:56 +03:00
|
|
|
if (!this.contentRef.current) {
|
2020-10-29 20:56:24 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (payload.fullscreen) {
|
2020-11-12 21:09:56 +03:00
|
|
|
requestFullscreen(this.contentRef.current);
|
2020-10-29 20:56:24 +03:00
|
|
|
} else if (getFullScreenElement()) {
|
|
|
|
exitFullscreen();
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
2020-07-07 17:40:05 +03:00
|
|
|
};
|
2020-07-07 00:42:46 +03:00
|
|
|
|
2020-10-29 20:56:24 +03:00
|
|
|
private updateCallListeners(oldCall: MatrixCall, newCall: MatrixCall) {
|
|
|
|
if (oldCall === newCall) return;
|
2020-07-07 00:42:46 +03:00
|
|
|
|
2020-11-26 17:35:09 +03:00
|
|
|
if (oldCall) {
|
2020-12-03 20:45:49 +03:00
|
|
|
oldCall.removeListener(CallEvent.State, this.onCallState);
|
2020-11-26 17:35:09 +03:00
|
|
|
oldCall.removeListener(CallEvent.LocalHoldUnhold, this.onCallLocalHoldUnhold);
|
|
|
|
oldCall.removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHoldUnhold);
|
2021-03-07 10:13:35 +03:00
|
|
|
oldCall.removeListener(CallEvent.FeedsChanged, this.onFeedsChanged);
|
2020-11-26 17:35:09 +03:00
|
|
|
}
|
|
|
|
if (newCall) {
|
2020-12-03 20:45:49 +03:00
|
|
|
newCall.on(CallEvent.State, this.onCallState);
|
2020-11-26 17:35:09 +03:00
|
|
|
newCall.on(CallEvent.LocalHoldUnhold, this.onCallLocalHoldUnhold);
|
|
|
|
newCall.on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHoldUnhold);
|
2021-03-07 10:13:35 +03:00
|
|
|
newCall.on(CallEvent.FeedsChanged, this.onFeedsChanged);
|
2020-11-26 17:35:09 +03:00
|
|
|
}
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
private onCallState = (state) => {
|
|
|
|
this.setState({
|
|
|
|
callState: state,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-03-07 10:13:35 +03:00
|
|
|
private onFeedsChanged = (newFeeds: Array<CallFeed>) => {
|
|
|
|
this.setState({feeds: newFeeds});
|
|
|
|
}
|
|
|
|
|
2020-11-26 17:35:09 +03:00
|
|
|
private onCallLocalHoldUnhold = () => {
|
|
|
|
this.setState({
|
2020-12-03 20:45:49 +03:00
|
|
|
isLocalOnHold: this.props.call.isLocalOnHold(),
|
2020-11-26 17:35:09 +03:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
private onCallRemoteHoldUnhold = () => {
|
2020-10-29 20:56:24 +03:00
|
|
|
this.setState({
|
2020-12-03 20:45:49 +03:00
|
|
|
isRemoteOnHold: this.props.call.isRemoteOnHold(),
|
2020-11-26 17:35:09 +03:00
|
|
|
// update both here because isLocalOnHold changes when we hold the call too
|
2020-12-03 20:45:49 +03:00
|
|
|
isLocalOnHold: this.props.call.isLocalOnHold(),
|
2020-10-29 20:56:24 +03:00
|
|
|
});
|
|
|
|
};
|
2020-07-07 00:42:46 +03:00
|
|
|
|
2020-11-12 21:09:56 +03:00
|
|
|
private onFullscreenClick = () => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'video_fullscreen',
|
|
|
|
fullscreen: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-11-19 19:36:23 +03:00
|
|
|
private onExpandClick = () => {
|
2021-01-21 22:20:35 +03:00
|
|
|
const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
|
2020-11-19 19:36:23 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
2021-01-21 22:20:35 +03:00
|
|
|
room_id: userFacingRoomId,
|
2020-11-19 19:36:23 +03:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-11-19 18:15:31 +03:00
|
|
|
private onControlsHideTimer = () => {
|
2020-11-18 17:22:38 +03:00
|
|
|
this.controlsHideTimer = null;
|
|
|
|
this.setState({
|
|
|
|
controlsVisible: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-11-19 18:15:31 +03:00
|
|
|
private onMouseMove = () => {
|
|
|
|
this.showControls();
|
|
|
|
}
|
|
|
|
|
|
|
|
private showControls() {
|
2021-01-04 23:01:43 +03:00
|
|
|
if (this.state.showMoreMenu || this.state.showDialpad) return;
|
2020-11-26 17:35:09 +03:00
|
|
|
|
2020-11-18 17:22:38 +03:00
|
|
|
if (!this.state.controlsVisible) {
|
|
|
|
this.setState({
|
|
|
|
controlsVisible: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (this.controlsHideTimer !== null) {
|
|
|
|
clearTimeout(this.controlsHideTimer);
|
|
|
|
}
|
|
|
|
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
|
|
|
|
}
|
|
|
|
|
2021-01-04 23:01:43 +03:00
|
|
|
private onDialpadClick = () => {
|
|
|
|
if (!this.state.showDialpad) {
|
|
|
|
if (this.controlsHideTimer) {
|
|
|
|
clearTimeout(this.controlsHideTimer);
|
|
|
|
this.controlsHideTimer = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
showDialpad: true,
|
|
|
|
controlsVisible: true,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
if (this.controlsHideTimer !== null) {
|
|
|
|
clearTimeout(this.controlsHideTimer);
|
|
|
|
}
|
|
|
|
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
showDialpad: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-19 18:15:31 +03:00
|
|
|
private onMicMuteClick = () => {
|
2020-11-18 17:22:38 +03:00
|
|
|
const newVal = !this.state.micMuted;
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
this.props.call.setMicrophoneMuted(newVal);
|
2020-11-18 17:22:38 +03:00
|
|
|
this.setState({micMuted: newVal});
|
|
|
|
}
|
|
|
|
|
2020-11-19 18:15:31 +03:00
|
|
|
private onVidMuteClick = () => {
|
2020-11-18 17:22:38 +03:00
|
|
|
const newVal = !this.state.vidMuted;
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
this.props.call.setLocalVideoMuted(newVal);
|
2020-11-18 17:22:38 +03:00
|
|
|
this.setState({vidMuted: newVal});
|
|
|
|
}
|
|
|
|
|
2020-11-26 17:35:09 +03:00
|
|
|
private onMoreClick = () => {
|
|
|
|
if (this.controlsHideTimer) {
|
|
|
|
clearTimeout(this.controlsHideTimer);
|
|
|
|
this.controlsHideTimer = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
showMoreMenu: true,
|
|
|
|
controlsVisible: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-01-04 23:01:43 +03:00
|
|
|
private closeDialpad = () => {
|
|
|
|
this.setState({
|
|
|
|
showDialpad: false,
|
|
|
|
});
|
|
|
|
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
|
|
|
|
}
|
|
|
|
|
2020-11-26 17:35:09 +03:00
|
|
|
private closeContextMenu = () => {
|
|
|
|
this.setState({
|
|
|
|
showMoreMenu: false,
|
|
|
|
});
|
|
|
|
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
|
|
|
|
}
|
|
|
|
|
2020-11-19 18:15:31 +03:00
|
|
|
// we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
|
|
|
|
// Note that this assumes we always have a callview on screen at any given time
|
|
|
|
// CallHandler would probably be a better place for this
|
|
|
|
private onNativeKeyDown = ev => {
|
|
|
|
let handled = false;
|
|
|
|
const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
|
|
|
|
|
|
|
|
switch (ev.key) {
|
|
|
|
case Key.D:
|
|
|
|
if (ctrlCmdOnly) {
|
|
|
|
this.onMicMuteClick();
|
|
|
|
// show the controls to give feedback
|
|
|
|
this.showControls();
|
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case Key.E:
|
|
|
|
if (ctrlCmdOnly) {
|
|
|
|
this.onVidMuteClick();
|
|
|
|
// show the controls to give feedback
|
|
|
|
this.showControls();
|
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (handled) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
private onRoomAvatarClick = () => {
|
2021-01-21 22:20:35 +03:00
|
|
|
const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
|
2020-11-18 17:22:38 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
2021-01-21 22:20:35 +03:00
|
|
|
room_id: userFacingRoomId,
|
2020-12-03 20:45:49 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
private onSecondaryRoomAvatarClick = () => {
|
2021-01-21 22:20:35 +03:00
|
|
|
const userFacingRoomId = CallHandler.roomIdForCall(this.props.secondaryCall);
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
2021-01-21 22:20:35 +03:00
|
|
|
room_id: userFacingRoomId,
|
2020-11-18 17:22:38 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-11-26 17:35:09 +03:00
|
|
|
private onCallResumeClick = () => {
|
2021-01-21 22:20:35 +03:00
|
|
|
const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
|
|
|
|
CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
|
2020-11-26 17:35:09 +03:00
|
|
|
}
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
public render() {
|
2020-11-12 21:09:56 +03:00
|
|
|
const client = MatrixClientPeg.get();
|
2021-01-21 22:20:35 +03:00
|
|
|
const callRoomId = CallHandler.roomIdForCall(this.props.call);
|
|
|
|
const secondaryCallRoomId = CallHandler.roomIdForCall(this.props.secondaryCall);
|
|
|
|
const callRoom = client.getRoom(callRoomId);
|
|
|
|
const secCallRoom = this.props.secondaryCall ? client.getRoom(secondaryCallRoomId) : null;
|
2020-11-12 21:09:56 +03:00
|
|
|
|
2021-01-04 23:01:43 +03:00
|
|
|
let dialPad;
|
2020-11-26 17:35:09 +03:00
|
|
|
let contextMenu;
|
|
|
|
|
2021-01-04 23:01:43 +03:00
|
|
|
if (this.state.showDialpad) {
|
|
|
|
dialPad = <DialpadContextMenu
|
|
|
|
{...alwaysAboveRightOf(
|
|
|
|
this.dialpadButton.current.getBoundingClientRect(),
|
|
|
|
ChevronFace.None,
|
|
|
|
CONTEXT_MENU_VPADDING,
|
|
|
|
)}
|
|
|
|
onFinished={this.closeDialpad}
|
|
|
|
call={this.props.call}
|
|
|
|
/>;
|
|
|
|
}
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
if (this.state.showMoreMenu) {
|
|
|
|
contextMenu = <CallContextMenu
|
2021-01-04 23:01:43 +03:00
|
|
|
{...alwaysAboveLeftOf(
|
2020-12-03 20:45:49 +03:00
|
|
|
this.contextMenuButton.current.getBoundingClientRect(),
|
|
|
|
ChevronFace.None,
|
|
|
|
CONTEXT_MENU_VPADDING,
|
|
|
|
)}
|
|
|
|
onFinished={this.closeContextMenu}
|
|
|
|
call={this.props.call}
|
|
|
|
/>;
|
|
|
|
}
|
2020-11-26 17:35:09 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
const micClasses = classNames({
|
|
|
|
mx_CallView_callControls_button: true,
|
|
|
|
mx_CallView_callControls_button_micOn: !this.state.micMuted,
|
|
|
|
mx_CallView_callControls_button_micOff: this.state.micMuted,
|
|
|
|
});
|
2020-11-18 17:22:38 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
const vidClasses = classNames({
|
|
|
|
mx_CallView_callControls_button: true,
|
|
|
|
mx_CallView_callControls_button_vidOn: !this.state.vidMuted,
|
|
|
|
mx_CallView_callControls_button_vidOff: this.state.vidMuted,
|
|
|
|
});
|
2020-11-18 17:22:38 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
// Put the other states of the mic/video icons in the document to make sure they're cached
|
|
|
|
// (otherwise the icon disappears briefly when toggled)
|
|
|
|
const micCacheClasses = classNames({
|
|
|
|
mx_CallView_callControls_button: true,
|
|
|
|
mx_CallView_callControls_button_micOn: this.state.micMuted,
|
|
|
|
mx_CallView_callControls_button_micOff: !this.state.micMuted,
|
|
|
|
mx_CallView_callControls_button_invisible: true,
|
|
|
|
});
|
2020-11-18 17:22:38 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
const vidCacheClasses = classNames({
|
|
|
|
mx_CallView_callControls_button: true,
|
|
|
|
mx_CallView_callControls_button_vidOn: this.state.micMuted,
|
|
|
|
mx_CallView_callControls_button_vidOff: !this.state.micMuted,
|
|
|
|
mx_CallView_callControls_button_invisible: true,
|
|
|
|
});
|
2020-11-18 17:22:38 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
const callControlsClasses = classNames({
|
|
|
|
mx_CallView_callControls: true,
|
|
|
|
mx_CallView_callControls_hidden: !this.state.controlsVisible,
|
|
|
|
});
|
2020-11-18 17:22:38 +03:00
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleButton
|
|
|
|
className={vidClasses}
|
|
|
|
onClick={this.onVidMuteClick}
|
|
|
|
/> : null;
|
|
|
|
|
2021-01-04 23:01:43 +03:00
|
|
|
// The dial pad & 'more' button actions are only relevant in a connected call
|
2020-12-03 20:45:49 +03:00
|
|
|
// When not connected, we have to put something there to make the flexbox alignment correct
|
2021-01-04 23:01:43 +03:00
|
|
|
const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuButton
|
|
|
|
className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
|
|
|
|
inputRef={this.dialpadButton}
|
|
|
|
onClick={this.onDialpadClick}
|
|
|
|
isExpanded={this.state.showDialpad}
|
|
|
|
/> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />;
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton
|
|
|
|
className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
|
|
|
|
onClick={this.onMoreClick}
|
|
|
|
inputRef={this.contextMenuButton}
|
|
|
|
isExpanded={this.state.showMoreMenu}
|
|
|
|
/> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_more_hidden" />;
|
|
|
|
|
|
|
|
// in the near future, the dial pad button will go on the left. For now, it's the nothing button
|
|
|
|
// because something needs to have margin-right: auto to make the alignment correct.
|
|
|
|
const callControls = <div className={callControlsClasses}>
|
2021-01-04 23:01:43 +03:00
|
|
|
{dialpadButton}
|
2020-12-03 20:45:49 +03:00
|
|
|
<AccessibleButton
|
|
|
|
className={micClasses}
|
|
|
|
onClick={this.onMicMuteClick}
|
|
|
|
/>
|
|
|
|
<AccessibleButton
|
|
|
|
className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
|
|
|
|
onClick={() => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'hangup',
|
2021-01-21 22:20:35 +03:00
|
|
|
room_id: callRoomId,
|
2020-12-03 20:45:49 +03:00
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
{vidMuteButton}
|
|
|
|
<div className={micCacheClasses} />
|
|
|
|
<div className={vidCacheClasses} />
|
|
|
|
{contextMenuButton}
|
|
|
|
</div>;
|
2020-11-12 21:09:56 +03:00
|
|
|
|
|
|
|
// The 'content' for the call, ie. the videos for a video call and profile picture
|
|
|
|
// for voice calls (fills the bg)
|
|
|
|
let contentView: React.ReactNode;
|
|
|
|
|
2020-11-26 17:35:09 +03:00
|
|
|
const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
|
|
|
|
let onHoldText = null;
|
|
|
|
if (this.state.isRemoteOnHold) {
|
2020-12-18 22:35:41 +03:00
|
|
|
const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ?
|
|
|
|
_td("You held the call <a>Switch</a>") : _td("You held the call <a>Resume</a>");
|
|
|
|
onHoldText = _t(holdString, {}, {
|
2020-11-26 17:35:09 +03:00
|
|
|
a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
|
|
|
|
{sub}
|
|
|
|
</AccessibleButton>,
|
|
|
|
});
|
|
|
|
} else if (this.state.isLocalOnHold) {
|
|
|
|
onHoldText = _t("%(peerName)s held the call", {
|
2020-12-03 20:45:49 +03:00
|
|
|
peerName: this.props.call.getOpponentMember().name,
|
2020-11-26 17:35:09 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-03-07 10:13:35 +03:00
|
|
|
const avatarSize = this.props.pipMode ? 76 : 160;
|
|
|
|
if (isOnHold) {
|
|
|
|
if (this.props.call.type === CallType.Video) {
|
|
|
|
const containerClasses = classNames({
|
|
|
|
mx_CallView_video: true,
|
|
|
|
mx_CallView_video_hold: isOnHold,
|
|
|
|
});
|
|
|
|
let onHoldContent = null;
|
|
|
|
let onHoldBackground = null;
|
|
|
|
const backgroundStyle: CSSProperties = {};
|
|
|
|
onHoldContent = (
|
|
|
|
<div className="mx_CallView_video_holdContent">
|
|
|
|
{onHoldText}
|
|
|
|
</div>
|
|
|
|
);
|
2020-11-26 17:35:09 +03:00
|
|
|
const backgroundAvatarUrl = avatarUrlForMember(
|
2021-03-07 10:13:35 +03:00
|
|
|
// is it worth getting the size of the div to pass here?
|
2020-12-03 20:45:49 +03:00
|
|
|
this.props.call.getOpponentMember(), 1024, 1024, 'crop',
|
2020-11-26 17:35:09 +03:00
|
|
|
);
|
|
|
|
backgroundStyle.backgroundImage = 'url(' + backgroundAvatarUrl + ')';
|
|
|
|
onHoldBackground = <div className="mx_CallView_video_holdBackground" style={backgroundStyle} />;
|
|
|
|
|
2021-03-07 10:13:35 +03:00
|
|
|
contentView = (
|
|
|
|
<div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
|
|
|
|
{onHoldBackground}
|
|
|
|
{onHoldContent}
|
|
|
|
{callControls}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
const classes = classNames({
|
|
|
|
mx_CallView_voice: true,
|
|
|
|
mx_CallView_voice_hold: isOnHold,
|
|
|
|
});
|
|
|
|
|
|
|
|
contentView =(
|
|
|
|
<div className={classes} onMouseMove={this.onMouseMove}>
|
|
|
|
<div className="mx_CallView_voice_avatarsContainer">
|
|
|
|
<div
|
|
|
|
className="mx_CallView_voice_avatarContainer"
|
|
|
|
style={{width: avatarSize, height: avatarSize}}
|
|
|
|
>
|
|
|
|
<RoomAvatar
|
|
|
|
room={callRoom}
|
|
|
|
height={avatarSize}
|
|
|
|
width={avatarSize}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="mx_CallView_voice_holdText">{onHoldText}</div>
|
|
|
|
{callControls}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
} else if (this.props.call.noIncomingFeeds()) {
|
|
|
|
// Here we're reusing the css classes from voice on hold, because
|
|
|
|
// I am lazy. If this gets merged, the CallView might be subject
|
|
|
|
// to change anyway - I might take an axe to this file in order to
|
|
|
|
// try to get other things working
|
2020-11-26 17:35:09 +03:00
|
|
|
const classes = classNames({
|
|
|
|
mx_CallView_voice: true,
|
|
|
|
});
|
2020-12-07 21:28:43 +03:00
|
|
|
|
2021-03-07 10:13:35 +03:00
|
|
|
// Saying "Connecting" here isn't really true, but the best thing
|
|
|
|
// I can come up with, but this might be subject to change as well
|
2020-12-07 21:28:43 +03:00
|
|
|
contentView = <div className={classes} onMouseMove={this.onMouseMove}>
|
|
|
|
<div className="mx_CallView_voice_avatarsContainer">
|
|
|
|
<div className="mx_CallView_voice_avatarContainer" style={{width: avatarSize, height: avatarSize}}>
|
|
|
|
<RoomAvatar
|
|
|
|
room={callRoom}
|
|
|
|
height={avatarSize}
|
|
|
|
width={avatarSize}
|
|
|
|
/>
|
|
|
|
</div>
|
2020-11-26 17:35:09 +03:00
|
|
|
</div>
|
2021-03-07 10:13:35 +03:00
|
|
|
<div className="mx_CallView_voice_holdText">{_t("Connecting")}</div>
|
|
|
|
{callControls}
|
|
|
|
</div>;
|
|
|
|
} else {
|
|
|
|
const containerClasses = classNames({
|
|
|
|
mx_CallView_video: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
// TODO: Later the CallView should probably be reworked to support any
|
|
|
|
// number of feeds but now we can always expect there to be two feeds
|
|
|
|
const feeds = this.state.feeds.map((feed, i) => {
|
|
|
|
// Here we check to hide local audio feeds to achieve the same UI/UX
|
|
|
|
// as before. But once again this might be subject to change
|
|
|
|
if (feed.isAudioOnly() && feed.isLocal()) return;
|
|
|
|
return (
|
|
|
|
<VideoFeed
|
|
|
|
key={i}
|
|
|
|
feed={feed}
|
|
|
|
call={this.props.call}
|
|
|
|
pipMode={this.props.pipMode}
|
|
|
|
onResize={this.props.onResize}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
|
|
|
|
{feeds}
|
2020-11-18 17:22:38 +03:00
|
|
|
{callControls}
|
2020-11-12 21:09:56 +03:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2020-12-03 20:45:49 +03:00
|
|
|
const callTypeText = this.props.call.type === CallType.Video ? _t("Video Call") : _t("Voice Call");
|
2020-11-12 21:09:56 +03:00
|
|
|
let myClassName;
|
|
|
|
|
|
|
|
let fullScreenButton;
|
2020-12-03 20:45:49 +03:00
|
|
|
if (this.props.call.type === CallType.Video && !this.props.pipMode) {
|
2020-11-19 19:36:23 +03:00
|
|
|
fullScreenButton = <div className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
|
2020-11-23 18:28:54 +03:00
|
|
|
onClick={this.onFullscreenClick} title={_t("Fill Screen")}
|
2020-11-12 21:09:56 +03:00
|
|
|
/>;
|
|
|
|
}
|
|
|
|
|
2020-11-19 19:36:23 +03:00
|
|
|
let expandButton;
|
2020-12-03 20:45:49 +03:00
|
|
|
if (this.props.pipMode) {
|
2020-11-19 19:36:23 +03:00
|
|
|
expandButton = <div className="mx_CallView_header_button mx_CallView_header_button_expand"
|
|
|
|
onClick={this.onExpandClick} title={_t("Return to call")}
|
|
|
|
/>;
|
|
|
|
}
|
|
|
|
|
2020-11-12 21:09:56 +03:00
|
|
|
const headerControls = <div className="mx_CallView_header_controls">
|
|
|
|
{fullScreenButton}
|
2020-11-19 19:36:23 +03:00
|
|
|
{expandButton}
|
2020-11-12 21:09:56 +03:00
|
|
|
</div>;
|
|
|
|
|
|
|
|
let header: React.ReactNode;
|
2020-12-03 20:45:49 +03:00
|
|
|
if (!this.props.pipMode) {
|
2020-11-12 21:09:56 +03:00
|
|
|
header = <div className="mx_CallView_header">
|
|
|
|
<div className="mx_CallView_header_phoneIcon"></div>
|
|
|
|
<span className="mx_CallView_header_callType">{callTypeText}</span>
|
|
|
|
{headerControls}
|
|
|
|
</div>;
|
|
|
|
myClassName = 'mx_CallView_large';
|
|
|
|
} else {
|
2020-12-03 20:45:49 +03:00
|
|
|
let secondaryCallInfo;
|
|
|
|
if (this.props.secondaryCall) {
|
2020-12-07 20:56:36 +03:00
|
|
|
secondaryCallInfo = <span className="mx_CallView_header_secondaryCallInfo">
|
|
|
|
<AccessibleButton element='span' onClick={this.onSecondaryRoomAvatarClick}>
|
|
|
|
<RoomAvatar room={secCallRoom} height={16} width={16} />
|
|
|
|
<span className="mx_CallView_secondaryCall_roomName">
|
2020-12-18 22:40:57 +03:00
|
|
|
{_t("%(name)s on hold", { name: secCallRoom.name })}
|
2020-12-07 20:56:36 +03:00
|
|
|
</span>
|
|
|
|
</AccessibleButton>
|
|
|
|
</span>;
|
2020-12-03 20:45:49 +03:00
|
|
|
}
|
|
|
|
|
2020-11-12 21:09:56 +03:00
|
|
|
header = <div className="mx_CallView_header">
|
2020-11-18 17:22:38 +03:00
|
|
|
<AccessibleButton onClick={this.onRoomAvatarClick}>
|
|
|
|
<RoomAvatar room={callRoom} height={32} width={32} />
|
|
|
|
</AccessibleButton>
|
2020-12-04 23:36:08 +03:00
|
|
|
<div className="mx_CallView_header_callInfo">
|
2020-11-12 21:09:56 +03:00
|
|
|
<div className="mx_CallView_header_roomName">{callRoom.name}</div>
|
2020-12-07 20:56:36 +03:00
|
|
|
<div className="mx_CallView_header_callTypeSmall">
|
|
|
|
{callTypeText}
|
|
|
|
{secondaryCallInfo}
|
|
|
|
</div>
|
2020-11-12 21:09:56 +03:00
|
|
|
</div>
|
|
|
|
{headerControls}
|
|
|
|
</div>;
|
|
|
|
myClassName = 'mx_CallView_pip';
|
|
|
|
}
|
2020-07-07 00:42:46 +03:00
|
|
|
|
2020-11-12 21:09:56 +03:00
|
|
|
return <div className={"mx_CallView " + myClassName}>
|
|
|
|
{header}
|
|
|
|
{contentView}
|
2021-01-04 23:01:43 +03:00
|
|
|
{dialPad}
|
2020-11-26 17:35:09 +03:00
|
|
|
{contextMenu}
|
2020-07-07 00:42:46 +03:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
}
|