-
- { indicator }
-
{ content }
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index de7ae347dd..f730b0056a 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -41,7 +41,7 @@ import rateLimitedFunc from '../../ratelimitedfunc';
import * as ObjectUtils from '../../ObjectUtils';
import * as Rooms from '../../Rooms';
import eventSearch, {searchPagination} from '../../Searching';
-import {isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isOnlyCtrlOrCmdKeyEvent, Key} from '../../Keyboard';
+import {isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key} from '../../Keyboard';
import MainSplit from './MainSplit';
import RightPanel from './RightPanel';
import RoomViewStore from '../../stores/RoomViewStore';
@@ -68,10 +68,9 @@ import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
import AuxPanel from "../views/rooms/AuxPanel";
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/src/webrtc/call";
+import { CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import WidgetStore from "../../stores/WidgetStore";
import {UPDATE_EVENT} from "../../stores/AsyncStore";
import Notifier from "../../Notifier";
@@ -508,8 +507,6 @@ export default class RoomView extends React.Component
{
this.props.resizeNotifier.on("middlePanelResized", this.onResize);
}
this.onResize();
-
- document.addEventListener("keydown", this.onNativeKeyDown);
}
shouldComponentUpdate(nextProps, nextState) {
@@ -592,8 +589,6 @@ export default class RoomView extends React.Component {
this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
}
- document.removeEventListener("keydown", this.onNativeKeyDown);
-
// Remove RoomStore listener
if (this.roomStoreToken) {
this.roomStoreToken.remove();
@@ -642,33 +637,6 @@ export default class RoomView extends React.Component {
}
};
- // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
- private onNativeKeyDown = ev => {
- let handled = false;
- const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
-
- switch (ev.key) {
- case Key.D:
- if (ctrlCmdOnly) {
- this.onMuteAudioClick();
- handled = true;
- }
- break;
-
- case Key.E:
- if (ctrlCmdOnly) {
- this.onMuteVideoClick();
- handled = true;
- }
- break;
- }
-
- if (handled) {
- ev.stopPropagation();
- ev.preventDefault();
- }
- };
-
private onReactKeyDown = ev => {
let handled = false;
@@ -1758,8 +1726,6 @@ export default class RoomView extends React.Component {
isStatusAreaExpanded = this.state.statusBarVisible;
statusBar = {
};
}
- if (activeCall) {
- let zoomButton; let videoMuteButton;
-
- if (activeCall.type === CallType.Video) {
- zoomButton = (
-
-
-
- );
-
- videoMuteButton =
-
-
-
;
- }
- const voiceMuteButton =
-
-
-
;
-
- // wrap the existing status bar into a 'callStatusBar' which adds more knobs.
- statusBar =
-
- { voiceMuteButton }
- { videoMuteButton }
- { zoomButton }
- { statusBar }
-
;
- }
-
// if we have search results, we keep the messagepanel (so that it preserves its
// scroll state), but hide it.
let searchResultsPanel;
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index fb6a33d2a8..9eacf0415d 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -27,6 +27,7 @@ import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import { CallEvent } from 'matrix-js-sdk/src/webrtc/call';
import classNames from 'classnames';
import AccessibleButton from '../elements/AccessibleButton';
+import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
interface IProps {
// js-sdk room object. If set, we will only show calls for the given
@@ -108,9 +109,11 @@ export default class CallView extends React.Component {
public componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
+ document.addEventListener('keydown', this.onNativeKeyDown);
}
public componentWillUnmount() {
+ document.removeEventListener("keydown", this.onNativeKeyDown);
this.updateCallListeners(this.state.call, null);
dis.unregister(this.dispatcherRef);
}
@@ -198,14 +201,18 @@ export default class CallView extends React.Component {
});
};
- onControlsHideTimer = () => {
+ private onControlsHideTimer = () => {
this.controlsHideTimer = null;
this.setState({
controlsVisible: false,
});
}
- onMouseMove = () => {
+ private onMouseMove = () => {
+ this.showControls();
+ }
+
+ private showControls() {
if (!this.state.controlsVisible) {
this.setState({
controlsVisible: true,
@@ -217,21 +224,58 @@ export default class CallView extends React.Component {
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
}
- onMicMuteClick = () => {
+ private onMicMuteClick = () => {
+ if (!this.state.call) return;
+
const newVal = !this.state.micMuted;
this.state.call.setMicrophoneMuted(newVal);
this.setState({micMuted: newVal});
}
- onVidMuteClick = () => {
+ private onVidMuteClick = () => {
+ if (!this.state.call) return;
+
const newVal = !this.state.vidMuted;
this.state.call.setLocalVideoMuted(newVal);
this.setState({vidMuted: newVal});
}
- onRoomAvatarClick = () => {
+ // 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 = () => {
dis.dispatch({
action: 'view_room',
room_id: this.state.call.roomId,
@@ -279,6 +323,11 @@ export default class CallView extends React.Component {
mx_CallView_callControls_hidden: !this.state.controlsVisible,
});
+ const vidMuteButton = this.state.call.type === CallType.Video ? : null;
+
callControls =
{
});
}}
/>
-
-
-
+ {vidMuteButton}
+
+
;
}