97 lines
3 KiB
TypeScript
97 lines
3 KiB
TypeScript
// Copyright 2020-2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import { Tooltip, TooltipPlacement } from './Tooltip';
|
|
import { Theme } from '../util/theme';
|
|
import { LocalizerType } from '../types/Util';
|
|
|
|
export enum CallingButtonType {
|
|
AUDIO_DISABLED = 'AUDIO_DISABLED',
|
|
AUDIO_OFF = 'AUDIO_OFF',
|
|
AUDIO_ON = 'AUDIO_ON',
|
|
HANG_UP = 'HANG_UP',
|
|
PRESENTING_DISABLED = 'PRESENTING_DISABLED',
|
|
PRESENTING_OFF = 'PRESENTING_OFF',
|
|
PRESENTING_ON = 'PRESENTING_ON',
|
|
VIDEO_DISABLED = 'VIDEO_DISABLED',
|
|
VIDEO_OFF = 'VIDEO_OFF',
|
|
VIDEO_ON = 'VIDEO_ON',
|
|
}
|
|
|
|
export type PropsType = {
|
|
buttonType: CallingButtonType;
|
|
i18n: LocalizerType;
|
|
onClick: () => void;
|
|
tooltipDirection?: TooltipPlacement;
|
|
};
|
|
|
|
export const CallingButton = ({
|
|
buttonType,
|
|
i18n,
|
|
onClick,
|
|
tooltipDirection,
|
|
}: PropsType): JSX.Element => {
|
|
let classNameSuffix = '';
|
|
let tooltipContent = '';
|
|
let disabled = false;
|
|
if (buttonType === CallingButtonType.AUDIO_DISABLED) {
|
|
classNameSuffix = 'audio--disabled';
|
|
tooltipContent = i18n('calling__button--audio-disabled');
|
|
disabled = true;
|
|
} else if (buttonType === CallingButtonType.AUDIO_OFF) {
|
|
classNameSuffix = 'audio--off';
|
|
tooltipContent = i18n('calling__button--audio-on');
|
|
} else if (buttonType === CallingButtonType.AUDIO_ON) {
|
|
classNameSuffix = 'audio--on';
|
|
tooltipContent = i18n('calling__button--audio-off');
|
|
} else if (buttonType === CallingButtonType.VIDEO_DISABLED) {
|
|
classNameSuffix = 'video--disabled';
|
|
tooltipContent = i18n('calling__button--video-disabled');
|
|
disabled = true;
|
|
} else if (buttonType === CallingButtonType.VIDEO_OFF) {
|
|
classNameSuffix = 'video--off';
|
|
tooltipContent = i18n('calling__button--video-on');
|
|
} else if (buttonType === CallingButtonType.VIDEO_ON) {
|
|
classNameSuffix = 'video--on';
|
|
tooltipContent = i18n('calling__button--video-off');
|
|
} else if (buttonType === CallingButtonType.HANG_UP) {
|
|
classNameSuffix = 'hangup';
|
|
tooltipContent = i18n('calling__hangup');
|
|
} else if (buttonType === CallingButtonType.PRESENTING_DISABLED) {
|
|
classNameSuffix = 'presenting--disabled';
|
|
tooltipContent = i18n('calling__button--presenting-disabled');
|
|
disabled = true;
|
|
} else if (buttonType === CallingButtonType.PRESENTING_ON) {
|
|
classNameSuffix = 'presenting--on';
|
|
tooltipContent = i18n('calling__button--presenting-off');
|
|
} else if (buttonType === CallingButtonType.PRESENTING_OFF) {
|
|
classNameSuffix = 'presenting--off';
|
|
tooltipContent = i18n('calling__button--presenting-on');
|
|
}
|
|
|
|
const className = classNames(
|
|
'module-calling-button__icon',
|
|
`module-calling-button__icon--${classNameSuffix}`
|
|
);
|
|
|
|
return (
|
|
<Tooltip
|
|
content={tooltipContent}
|
|
direction={tooltipDirection}
|
|
theme={Theme.Dark}
|
|
>
|
|
<button
|
|
aria-label={tooltipContent}
|
|
className={className}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
type="button"
|
|
>
|
|
<div />
|
|
</button>
|
|
</Tooltip>
|
|
);
|
|
};
|