Calling: Lobby
This commit is contained in:
parent
358ee4ab72
commit
59a181bd30
21 changed files with 1146 additions and 388 deletions
76
ts/components/CallingButton.tsx
Normal file
76
ts/components/CallingButton.tsx
Normal file
|
@ -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 (
|
||||
<button
|
||||
aria-label={tooltipContent}
|
||||
type="button"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Tooltip
|
||||
arrowSize={6}
|
||||
content={tooltipContent}
|
||||
direction={tooltipDirection}
|
||||
distance={tooltipDistance}
|
||||
hoverDelay={0}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue