316 lines
11 KiB
TypeScript
316 lines
11 KiB
TypeScript
/*
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
|
|
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
|
|
|
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, useState } from "react";
|
|
import classNames from "classnames";
|
|
import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
|
|
|
import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
|
|
import CallContextMenu from "../../context_menus/CallContextMenu";
|
|
import DialpadContextMenu from "../../context_menus/DialpadContextMenu";
|
|
import { Alignment } from "../../elements/Tooltip";
|
|
import {
|
|
alwaysAboveLeftOf,
|
|
alwaysAboveRightOf,
|
|
ChevronFace,
|
|
ContextMenuTooltipButton,
|
|
useContextMenu,
|
|
} from '../../../structures/ContextMenu';
|
|
import { _t } from "../../../../languageHandler";
|
|
import DeviceContextMenu from "../../context_menus/DeviceContextMenu";
|
|
import { MediaDeviceKindEnum } from "../../../../MediaDeviceHandler";
|
|
|
|
// 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
|
|
const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
|
|
|
|
const CONTROLS_HIDE_DELAY = 2000;
|
|
|
|
interface IButtonProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButton>, "title"> {
|
|
state: boolean;
|
|
className: string;
|
|
onLabel?: string;
|
|
offLabel?: string;
|
|
onClick: (event: React.MouseEvent) => void;
|
|
}
|
|
|
|
const CallViewToggleButton: React.FC<IButtonProps> = ({
|
|
children,
|
|
state: isOn,
|
|
className,
|
|
onLabel,
|
|
offLabel,
|
|
...props
|
|
}) => {
|
|
const classes = classNames("mx_CallViewButtons_button", className, {
|
|
mx_CallViewButtons_button_on: isOn,
|
|
mx_CallViewButtons_button_off: !isOn,
|
|
});
|
|
|
|
return (
|
|
<AccessibleTooltipButton
|
|
className={classes}
|
|
title={isOn ? onLabel : offLabel}
|
|
alignment={Alignment.Top}
|
|
{...props}
|
|
>
|
|
{ children }
|
|
</AccessibleTooltipButton>
|
|
);
|
|
};
|
|
|
|
interface IDropdownButtonProps extends IButtonProps {
|
|
deviceKinds: MediaDeviceKindEnum[];
|
|
}
|
|
|
|
const CallViewDropdownButton: React.FC<IDropdownButtonProps> = ({ state, deviceKinds, ...props }) => {
|
|
const [menuDisplayed, buttonRef, openMenu, closeMenu] = useContextMenu();
|
|
const [hoveringDropdown, setHoveringDropdown] = useState(false);
|
|
|
|
const classes = classNames("mx_CallViewButtons_button", "mx_CallViewButtons_dropdownButton", {
|
|
mx_CallViewButtons_dropdownButton_collapsed: !menuDisplayed,
|
|
});
|
|
|
|
const onClick = (event: React.MouseEvent): void => {
|
|
event.stopPropagation();
|
|
openMenu();
|
|
};
|
|
|
|
return (
|
|
<CallViewToggleButton inputRef={buttonRef} forceHide={menuDisplayed || hoveringDropdown} state={state} {...props}>
|
|
<CallViewToggleButton
|
|
className={classes}
|
|
onClick={onClick}
|
|
onHover={(hovering) => setHoveringDropdown(hovering)}
|
|
state={state}
|
|
/>
|
|
{ menuDisplayed && <DeviceContextMenu
|
|
{...alwaysAboveRightOf(buttonRef.current?.getBoundingClientRect())}
|
|
|
|
onFinished={closeMenu}
|
|
deviceKinds={deviceKinds}
|
|
/> }
|
|
</CallViewToggleButton>
|
|
);
|
|
};
|
|
|
|
interface IProps {
|
|
call: MatrixCall;
|
|
pipMode: boolean;
|
|
handlers: {
|
|
onHangupClick: () => void;
|
|
onScreenshareClick: () => void;
|
|
onToggleSidebarClick: () => void;
|
|
onMicMuteClick: () => void;
|
|
onVidMuteClick: () => void;
|
|
};
|
|
buttonsState: {
|
|
micMuted: boolean;
|
|
vidMuted: boolean;
|
|
sidebarShown: boolean;
|
|
screensharing: boolean;
|
|
};
|
|
buttonsVisibility: {
|
|
screensharing: boolean;
|
|
vidMute: boolean;
|
|
sidebar: boolean;
|
|
dialpad: boolean;
|
|
contextMenu: boolean;
|
|
};
|
|
}
|
|
|
|
interface IState {
|
|
visible: boolean;
|
|
showDialpad: boolean;
|
|
hoveringControls: boolean;
|
|
showMoreMenu: boolean;
|
|
}
|
|
|
|
export default class CallViewButtons extends React.Component<IProps, IState> {
|
|
private dialpadButton = createRef<HTMLDivElement>();
|
|
private contextMenuButton = createRef<HTMLDivElement>();
|
|
private controlsHideTimer: number = null;
|
|
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
showDialpad: false,
|
|
hoveringControls: false,
|
|
showMoreMenu: false,
|
|
visible: true,
|
|
};
|
|
}
|
|
|
|
public componentDidMount(): void {
|
|
this.showControls();
|
|
}
|
|
|
|
public showControls(): void {
|
|
if (this.state.showMoreMenu || this.state.showDialpad) return;
|
|
|
|
if (!this.state.visible) {
|
|
this.setState({
|
|
visible: true,
|
|
});
|
|
}
|
|
if (this.controlsHideTimer !== null) {
|
|
clearTimeout(this.controlsHideTimer);
|
|
}
|
|
this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
|
|
}
|
|
|
|
private onControlsHideTimer = (): void => {
|
|
if (this.state.hoveringControls || this.state.showDialpad || this.state.showMoreMenu) return;
|
|
this.controlsHideTimer = null;
|
|
this.setState({ visible: false });
|
|
};
|
|
|
|
private onMouseEnter = (): void => {
|
|
this.setState({ hoveringControls: true });
|
|
};
|
|
|
|
private onMouseLeave = (): void => {
|
|
this.setState({ hoveringControls: false });
|
|
};
|
|
|
|
private onDialpadClick = (): void => {
|
|
if (!this.state.showDialpad) {
|
|
this.setState({ showDialpad: true });
|
|
this.showControls();
|
|
} else {
|
|
this.setState({ showDialpad: false });
|
|
}
|
|
};
|
|
|
|
private onMoreClick = (): void => {
|
|
this.setState({ showMoreMenu: true });
|
|
this.showControls();
|
|
};
|
|
|
|
private closeDialpad = (): void => {
|
|
this.setState({ showDialpad: false });
|
|
};
|
|
|
|
private closeContextMenu = (): void => {
|
|
this.setState({ showMoreMenu: false });
|
|
};
|
|
|
|
public render(): JSX.Element {
|
|
const callControlsClasses = classNames("mx_CallViewButtons", {
|
|
mx_CallViewButtons_hidden: !this.state.visible,
|
|
});
|
|
|
|
let dialPad;
|
|
if (this.state.showDialpad) {
|
|
dialPad = <DialpadContextMenu
|
|
{...alwaysAboveLeftOf(
|
|
this.dialpadButton.current.getBoundingClientRect(),
|
|
ChevronFace.None,
|
|
CONTEXT_MENU_VPADDING,
|
|
)}
|
|
// We mount the context menus as a as a child typically in order to include the
|
|
// context menus when fullscreening the call content.
|
|
// However, this does not work as well when the call is embedded in a
|
|
// picture-in-picture frame. Thus, only mount as child when we are *not* in PiP.
|
|
mountAsChild={!this.props.pipMode}
|
|
onFinished={this.closeDialpad}
|
|
call={this.props.call}
|
|
/>;
|
|
}
|
|
|
|
let contextMenu;
|
|
if (this.state.showMoreMenu) {
|
|
contextMenu = <CallContextMenu
|
|
{...alwaysAboveLeftOf(
|
|
this.contextMenuButton.current.getBoundingClientRect(),
|
|
ChevronFace.None,
|
|
CONTEXT_MENU_VPADDING,
|
|
)}
|
|
mountAsChild={!this.props.pipMode}
|
|
onFinished={this.closeContextMenu}
|
|
call={this.props.call}
|
|
/>;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={callControlsClasses}
|
|
onMouseEnter={this.onMouseEnter}
|
|
onMouseLeave={this.onMouseLeave}
|
|
>
|
|
{ dialPad }
|
|
{ contextMenu }
|
|
|
|
{ this.props.buttonsVisibility.dialpad && <ContextMenuTooltipButton
|
|
className="mx_CallViewButtons_button mx_CallViewButtons_dialpad"
|
|
inputRef={this.dialpadButton}
|
|
onClick={this.onDialpadClick}
|
|
isExpanded={this.state.showDialpad}
|
|
title={_t("Dialpad")}
|
|
alignment={Alignment.Top}
|
|
/> }
|
|
<CallViewDropdownButton
|
|
state={!this.props.buttonsState.micMuted}
|
|
className="mx_CallViewButtons_button_mic"
|
|
onLabel={_t("Mute the microphone")}
|
|
offLabel={_t("Unmute the microphone")}
|
|
onClick={this.props.handlers.onMicMuteClick}
|
|
deviceKinds={[MediaDeviceKindEnum.AudioInput, MediaDeviceKindEnum.AudioOutput]}
|
|
/>
|
|
{ this.props.buttonsVisibility.vidMute && <CallViewDropdownButton
|
|
state={!this.props.buttonsState.vidMuted}
|
|
className="mx_CallViewButtons_button_vid"
|
|
onLabel={_t("Stop the camera")}
|
|
offLabel={_t("Start the camera")}
|
|
onClick={this.props.handlers.onVidMuteClick}
|
|
deviceKinds={[MediaDeviceKindEnum.VideoInput]}
|
|
/> }
|
|
{ this.props.buttonsVisibility.screensharing && <CallViewToggleButton
|
|
state={this.props.buttonsState.screensharing}
|
|
className="mx_CallViewButtons_button_screensharing"
|
|
onLabel={_t("Stop sharing your screen")}
|
|
offLabel={_t("Start sharing your screen")}
|
|
onClick={this.props.handlers.onScreenshareClick}
|
|
/> }
|
|
{ this.props.buttonsVisibility.sidebar && <CallViewToggleButton
|
|
state={this.props.buttonsState.sidebarShown}
|
|
className="mx_CallViewButtons_button_sidebar"
|
|
onLabel={_t("Hide sidebar")}
|
|
offLabel={_t("Show sidebar")}
|
|
onClick={this.props.handlers.onToggleSidebarClick}
|
|
/> }
|
|
{ this.props.buttonsVisibility.contextMenu && <ContextMenuTooltipButton
|
|
className="mx_CallViewButtons_button mx_CallViewButtons_button_more"
|
|
onClick={this.onMoreClick}
|
|
inputRef={this.contextMenuButton}
|
|
isExpanded={this.state.showMoreMenu}
|
|
title={_t("More")}
|
|
alignment={Alignment.Top}
|
|
/> }
|
|
<AccessibleTooltipButton
|
|
className="mx_CallViewButtons_button mx_CallViewButtons_button_hangup"
|
|
onClick={this.props.handlers.onHangupClick}
|
|
title={_t("Hangup")}
|
|
alignment={Alignment.Top}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|