77 lines
2 KiB
TypeScript
77 lines
2 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
};
|