Update call lobby UI to match new designs
This commit is contained in:
parent
50c4fa06cc
commit
763c35e546
26 changed files with 857 additions and 435 deletions
|
@ -1,8 +1,9 @@
|
|||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { Tooltip, TooltipPlacement } from './Tooltip';
|
||||
import { Theme } from '../util/theme';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
|
@ -33,42 +34,55 @@ export const CallingButton = ({
|
|||
onClick,
|
||||
tooltipDirection,
|
||||
}: PropsType): JSX.Element => {
|
||||
const uniqueButtonId = useMemo(() => uuid(), []);
|
||||
|
||||
let classNameSuffix = '';
|
||||
let tooltipContent = '';
|
||||
let label = '';
|
||||
let disabled = false;
|
||||
if (buttonType === CallingButtonType.AUDIO_DISABLED) {
|
||||
classNameSuffix = 'audio--disabled';
|
||||
tooltipContent = i18n('calling__button--audio-disabled');
|
||||
label = i18n('calling__button--audio__label');
|
||||
disabled = true;
|
||||
} else if (buttonType === CallingButtonType.AUDIO_OFF) {
|
||||
classNameSuffix = 'audio--off';
|
||||
tooltipContent = i18n('calling__button--audio-on');
|
||||
label = i18n('calling__button--audio__label');
|
||||
} else if (buttonType === CallingButtonType.AUDIO_ON) {
|
||||
classNameSuffix = 'audio--on';
|
||||
tooltipContent = i18n('calling__button--audio-off');
|
||||
label = i18n('calling__button--audio__label');
|
||||
} else if (buttonType === CallingButtonType.VIDEO_DISABLED) {
|
||||
classNameSuffix = 'video--disabled';
|
||||
tooltipContent = i18n('calling__button--video-disabled');
|
||||
disabled = true;
|
||||
label = i18n('calling__button--video__label');
|
||||
} else if (buttonType === CallingButtonType.VIDEO_OFF) {
|
||||
classNameSuffix = 'video--off';
|
||||
tooltipContent = i18n('calling__button--video-on');
|
||||
label = i18n('calling__button--video__label');
|
||||
} else if (buttonType === CallingButtonType.VIDEO_ON) {
|
||||
classNameSuffix = 'video--on';
|
||||
tooltipContent = i18n('calling__button--video-off');
|
||||
label = i18n('calling__button--video__label');
|
||||
} else if (buttonType === CallingButtonType.HANG_UP) {
|
||||
classNameSuffix = 'hangup';
|
||||
tooltipContent = i18n('calling__hangup');
|
||||
label = i18n('calling__hangup');
|
||||
} else if (buttonType === CallingButtonType.PRESENTING_DISABLED) {
|
||||
classNameSuffix = 'presenting--disabled';
|
||||
tooltipContent = i18n('calling__button--presenting-disabled');
|
||||
disabled = true;
|
||||
label = i18n('calling__button--presenting__label');
|
||||
} else if (buttonType === CallingButtonType.PRESENTING_ON) {
|
||||
classNameSuffix = 'presenting--on';
|
||||
tooltipContent = i18n('calling__button--presenting-off');
|
||||
label = i18n('calling__button--presenting__label');
|
||||
} else if (buttonType === CallingButtonType.PRESENTING_OFF) {
|
||||
classNameSuffix = 'presenting--off';
|
||||
tooltipContent = i18n('calling__button--presenting-on');
|
||||
label = i18n('calling__button--presenting__label');
|
||||
}
|
||||
|
||||
const className = classNames(
|
||||
|
@ -82,15 +96,24 @@ export const CallingButton = ({
|
|||
direction={tooltipDirection}
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<button
|
||||
aria-label={tooltipContent}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
>
|
||||
<div />
|
||||
</button>
|
||||
<div className="module-calling-button__container">
|
||||
<button
|
||||
aria-label={tooltipContent}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
id={uniqueButtonId}
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
>
|
||||
<div />
|
||||
</button>
|
||||
<label
|
||||
className="module-calling-button__label"
|
||||
htmlFor={uniqueButtonId}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue