-
+
{callDetails.title}
{this.renderMessage(callState)}
-
+
-
-
@@ -276,18 +255,24 @@ export class CallScreen extends React.Component
{
)}
>
{
hangUp({ callId: callDetails.callId });
}}
+ tooltipDistance={24}
/>
diff --git a/ts/components/CallingButton.stories.tsx b/ts/components/CallingButton.stories.tsx
new file mode 100644
index 0000000000..e82044d150
--- /dev/null
+++ b/ts/components/CallingButton.stories.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { number, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+import {
+ CallingButton,
+ CallingButtonType,
+ PropsType,
+ TooltipDirection,
+} from './CallingButton';
+import { setup as setupI18n } from '../../js/modules/i18n';
+import enMessages from '../../_locales/en/messages.json';
+
+const i18n = setupI18n('en', enMessages);
+
+const createProps = (overrideProps: Partial
= {}): PropsType => ({
+ buttonType: select(
+ 'buttonType',
+ CallingButtonType,
+ overrideProps.buttonType || CallingButtonType.HANG_UP
+ ),
+ i18n,
+ onClick: action('on-click'),
+ tooltipDirection: select(
+ 'tooltipDirection',
+ TooltipDirection,
+ overrideProps.tooltipDirection || TooltipDirection.DOWN
+ ),
+ tooltipDistance: number(
+ 'tooltipDistance',
+ overrideProps.tooltipDistance || 16
+ ),
+});
+
+const story = storiesOf('Components/CallingButton', module);
+
+story.add('Default', () => {
+ const props = createProps();
+ return ;
+});
+
+story.add('Audio On', () => {
+ const props = createProps({
+ buttonType: CallingButtonType.AUDIO_ON,
+ });
+ return ;
+});
+
+story.add('Audio Off', () => {
+ const props = createProps({
+ buttonType: CallingButtonType.AUDIO_OFF,
+ });
+ return ;
+});
+
+story.add('Video On', () => {
+ const props = createProps({
+ buttonType: CallingButtonType.VIDEO_ON,
+ });
+ return ;
+});
+
+story.add('Video Off', () => {
+ const props = createProps({
+ buttonType: CallingButtonType.VIDEO_OFF,
+ });
+ return ;
+});
+
+story.add('Tooltip right', () => {
+ const props = createProps({
+ tooltipDirection: TooltipDirection.RIGHT,
+ });
+ return ;
+});
diff --git a/ts/components/CallingButton.tsx b/ts/components/CallingButton.tsx
new file mode 100644
index 0000000000..ddeda65619
--- /dev/null
+++ b/ts/components/CallingButton.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import classNames from 'classnames';
+import Tooltip from 'react-tooltip-lite';
+import { LocalizerType } from '../types/Util';
+
+export enum TooltipDirection {
+ UP = 'up',
+ RIGHT = 'right',
+ DOWN = 'down',
+ LEFT = 'left',
+}
+
+export enum CallingButtonType {
+ AUDIO_OFF = 'AUDIO_OFF',
+ AUDIO_ON = 'AUDIO_ON',
+ HANG_UP = 'HANG_UP',
+ VIDEO_OFF = 'VIDEO_OFF',
+ VIDEO_ON = 'VIDEO_ON',
+}
+
+export type PropsType = {
+ buttonType: CallingButtonType;
+ i18n: LocalizerType;
+ onClick: () => void;
+ tooltipDirection?: TooltipDirection;
+ tooltipDistance?: number;
+};
+
+export const CallingButton = ({
+ buttonType,
+ i18n,
+ onClick,
+ tooltipDirection = TooltipDirection.DOWN,
+ tooltipDistance = 16,
+}: PropsType): JSX.Element => {
+ let classNameSuffix = '';
+ let tooltipContent = '';
+ if (buttonType === CallingButtonType.AUDIO_OFF) {
+ classNameSuffix = 'audio--disabled';
+ tooltipContent = i18n('calling__button--audio-on');
+ } else if (buttonType === CallingButtonType.AUDIO_ON) {
+ classNameSuffix = 'audio--enabled';
+ tooltipContent = i18n('calling__button--audio-off');
+ } else if (buttonType === CallingButtonType.VIDEO_OFF) {
+ classNameSuffix = 'video--disabled';
+ tooltipContent = i18n('calling__button--video-on');
+ } else if (buttonType === CallingButtonType.VIDEO_ON) {
+ classNameSuffix = 'video--enabled';
+ tooltipContent = i18n('calling__button--video-off');
+ } else if (buttonType === CallingButtonType.HANG_UP) {
+ classNameSuffix = 'hangup';
+ tooltipContent = i18n('calling__hangup');
+ }
+
+ const className = classNames(
+ 'module-calling-button__icon',
+ `module-calling-button__icon--${classNameSuffix}`
+ );
+
+ return (
+
+ );
+};
diff --git a/ts/components/CallingLobby.stories.tsx b/ts/components/CallingLobby.stories.tsx
new file mode 100644
index 0000000000..0a6faff6da
--- /dev/null
+++ b/ts/components/CallingLobby.stories.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+import { ColorType } from '../types/Colors';
+import { CallingLobby, PropsType } from './CallingLobby';
+import { setup as setupI18n } from '../../js/modules/i18n';
+import enMessages from '../../_locales/en/messages.json';
+
+const i18n = setupI18n('en', enMessages);
+
+const callDetails = {
+ callId: 0,
+ isIncoming: true,
+ isVideoCall: true,
+
+ id: '3051234567',
+ avatarPath: undefined,
+ color: 'ultramarine' as ColorType,
+ title: 'Rick Sanchez',
+ name: 'Rick Sanchez',
+ phoneNumber: '3051234567',
+ profileName: 'Rick Sanchez',
+};
+
+const createProps = (overrideProps: Partial = {}): PropsType => ({
+ callDetails,
+ hasLocalAudio: boolean('hasLocalAudio', overrideProps.hasLocalAudio || false),
+ hasLocalVideo: boolean('hasLocalVideo', overrideProps.hasLocalVideo || false),
+ i18n,
+ isGroupCall: boolean('isGroupCall', overrideProps.isGroupCall || false),
+ onCallCanceled: action('on-call-canceled'),
+ onJoinCall: action('on-join-call'),
+ setLocalAudio: action('set-local-audio'),
+ setLocalPreview: action('set-local-preview'),
+ setLocalVideo: action('set-local-video'),
+ toggleParticipants: action('toggle-participants'),
+ toggleSettings: action('toggle-settings'),
+});
+
+const story = storiesOf('Components/CallingLobby', module);
+
+story.add('Default', () => {
+ const props = createProps();
+ return ;
+});
+
+story.add('Local Video', () => {
+ const props = createProps({
+ hasLocalVideo: true,
+ });
+ return ;
+});
+
+story.add('Group Call', () => {
+ const props = createProps({ isGroupCall: true });
+ return ;
+});
diff --git a/ts/components/CallingLobby.tsx b/ts/components/CallingLobby.tsx
new file mode 100644
index 0000000000..58e6b1afe8
--- /dev/null
+++ b/ts/components/CallingLobby.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import {
+ CallDetailsType,
+ SetLocalAudioType,
+ SetLocalPreviewType,
+ SetLocalVideoType,
+} from '../state/ducks/calling';
+import { CallState } from '../types/Calling';
+import {
+ CallingButton,
+ CallingButtonType,
+ TooltipDirection,
+} from './CallingButton';
+import { CallBackgroundBlur } from './CallBackgroundBlur';
+import { LocalizerType } from '../types/Util';
+
+export type PropsType = {
+ callDetails: CallDetailsType;
+ callState?: CallState;
+ hasLocalAudio: boolean;
+ hasLocalVideo: boolean;
+ i18n: LocalizerType;
+ isGroupCall: boolean;
+ onCallCanceled: () => void;
+ onJoinCall: () => void;
+ setLocalAudio: (_: SetLocalAudioType) => void;
+ setLocalVideo: (_: SetLocalVideoType) => void;
+ setLocalPreview: (_: SetLocalPreviewType) => void;
+ toggleParticipants: () => void;
+ toggleSettings: () => void;
+};
+
+export const CallingLobby = ({
+ callDetails,
+ hasLocalAudio,
+ hasLocalVideo,
+ i18n,
+ isGroupCall = false,
+ onCallCanceled,
+ onJoinCall,
+ setLocalAudio,
+ setLocalPreview,
+ setLocalVideo,
+ toggleParticipants,
+ toggleSettings,
+}: PropsType): JSX.Element => {
+ const localVideoRef = React.useRef(null);
+
+ const toggleAudio = React.useCallback((): void => {
+ if (!callDetails) {
+ return;
+ }
+
+ setLocalAudio({ enabled: !hasLocalAudio });
+ }, [callDetails, hasLocalAudio, setLocalAudio]);
+
+ const toggleVideo = React.useCallback((): void => {
+ if (!callDetails) {
+ return;
+ }
+
+ setLocalVideo({ enabled: !hasLocalVideo });
+ }, [callDetails, hasLocalVideo, setLocalVideo]);
+
+ React.useEffect(() => {
+ setLocalPreview({ element: localVideoRef });
+
+ return () => {
+ setLocalPreview({ element: undefined });
+ };
+ }, [setLocalPreview]);
+
+ React.useEffect(() => {
+ function handleKeyDown(event: KeyboardEvent): void {
+ let eventHandled = false;
+
+ if (event.shiftKey && (event.key === 'V' || event.key === 'v')) {
+ toggleVideo();
+ eventHandled = true;
+ } else if (event.shiftKey && (event.key === 'M' || event.key === 'm')) {
+ toggleAudio();
+ eventHandled = true;
+ }
+
+ if (eventHandled) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ document.addEventListener('keydown', handleKeyDown);
+
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [toggleVideo, toggleAudio]);
+
+ const videoButtonType = hasLocalVideo
+ ? CallingButtonType.VIDEO_ON
+ : CallingButtonType.VIDEO_OFF;
+ const audioButtonType = hasLocalAudio
+ ? CallingButtonType.AUDIO_ON
+ : CallingButtonType.AUDIO_OFF;
+
+ return (
+
+
+
+ {callDetails.title}
+
+
+ {isGroupCall ? (
+
+ ) : null}
+
+
+
+
+ {hasLocalVideo ? (
+
+ ) : (
+
+
+
+ {i18n('calling__your-video-is-off')}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+