Calling: Lobby

This commit is contained in:
Josh Perez 2020-10-07 21:25:33 -04:00 committed by Josh Perez
parent 358ee4ab72
commit 59a181bd30
21 changed files with 1146 additions and 388 deletions

View file

@ -9,30 +9,10 @@ import {
SetRendererCanvasType,
} from '../state/ducks/calling';
import { Avatar } from './Avatar';
import { CallingButton, CallingButtonType } from './CallingButton';
import { CallState } from '../types/Calling';
import { LocalizerType } from '../types/Util';
type CallingButtonProps = {
classNameSuffix: string;
onClick: () => void;
};
const CallingButton = ({
classNameSuffix,
onClick,
}: CallingButtonProps): JSX.Element => {
const className = classNames(
'module-ongoing-call__icon',
`module-ongoing-call__icon${classNameSuffix}`
);
return (
<button type="button" className={className} onClick={onClick}>
<div />
</button>
);
};
export type PropsType = {
callDetails?: CallDetailsType;
callState?: CallState;
@ -137,10 +117,10 @@ export class CallScreen extends React.Component<PropsType, StateType> {
let eventHandled = false;
if (event.key === 'V') {
if (event.shiftKey && (event.key === 'V' || event.key === 'v')) {
this.toggleVideo();
eventHandled = true;
} else if (event.key === 'M') {
} else if (event.shiftKey && (event.key === 'M' || event.key === 'm')) {
this.toggleAudio();
eventHandled = true;
}
@ -225,42 +205,41 @@ export class CallScreen extends React.Component<PropsType, StateType> {
!showControls && !isAudioOnly && callState === CallState.Accepted,
});
const toggleAudioSuffix = hasLocalAudio
? '--audio--enabled'
: '--audio--disabled';
const toggleVideoSuffix = hasLocalVideo
? '--video--enabled'
: '--video--disabled';
const videoButtonType = hasLocalVideo
? CallingButtonType.VIDEO_ON
: CallingButtonType.VIDEO_OFF;
const audioButtonType = hasLocalAudio
? CallingButtonType.AUDIO_ON
: CallingButtonType.AUDIO_OFF;
return (
<div
className="module-ongoing-call"
className="module-calling__container"
onMouseMove={this.showControls}
role="group"
>
<div
className={classNames(
'module-calling__header',
'module-ongoing-call__header',
controlsFadeClass
)}
>
<div className="module-ongoing-call__header-name">
<div className="module-calling__header--header-name">
{callDetails.title}
</div>
{this.renderMessage(callState)}
<div className="module-ongoing-call__settings">
<div className="module-calling-tools">
<button
type="button"
aria-label={i18n('callingDeviceSelection__settings')}
className="module-ongoing-call__settings--button"
className="module-calling-tools__button module-calling-button__settings"
onClick={toggleSettings}
/>
</div>
<div className="module-ongoing-call__pip">
<button
type="button"
aria-label={i18n('calling__pip')}
className="module-ongoing-call__pip--button"
className="module-calling-tools__button module-calling-button__pip"
onClick={togglePip}
/>
</div>
@ -276,18 +255,24 @@ export class CallScreen extends React.Component<PropsType, StateType> {
)}
>
<CallingButton
classNameSuffix={toggleVideoSuffix}
buttonType={videoButtonType}
i18n={i18n}
onClick={this.toggleVideo}
tooltipDistance={24}
/>
<CallingButton
classNameSuffix={toggleAudioSuffix}
buttonType={audioButtonType}
i18n={i18n}
onClick={this.toggleAudio}
tooltipDistance={24}
/>
<CallingButton
classNameSuffix="--hangup"
buttonType={CallingButtonType.HANG_UP}
i18n={i18n}
onClick={() => {
hangUp({ callId: callDetails.callId });
}}
tooltipDistance={24}
/>
</div>
</div>