mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

New call UI and controls

Browse source
This commit is contained in:
ayumi-signal 2023-10-25 06:40:22 -07:00 • committed by GitHub
parent 33c5c683c7
commit 8bb355f971
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 741 additions and 360 deletions
Download patch file Download diff file Expand all files Collapse all files

57
ts/components/CallingButton.tsx
View file

@ -13,7 +13,6 @@ 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',
@ -48,88 +47,69 @@ export function CallingButton({
let classNameSuffix = '';
let tooltipContent = '';
let label = '';
let disabled = false;
if (buttonType === CallingButtonType.AUDIO_DISABLED) {
classNameSuffix = 'audio--disabled';
tooltipContent = i18n('icu:calling__button--audio-disabled');
label = i18n('icu:calling__button--audio__label');
disabled = true;
} else if (buttonType === CallingButtonType.AUDIO_OFF) {
classNameSuffix = 'audio--off';
tooltipContent = i18n('icu:calling__button--audio-on');
label = i18n('icu:calling__button--audio__label');
} else if (buttonType === CallingButtonType.AUDIO_ON) {
classNameSuffix = 'audio--on';
tooltipContent = i18n('icu:calling__button--audio-off');
label = i18n('icu:calling__button--audio__label');
} else if (buttonType === CallingButtonType.VIDEO_DISABLED) {
classNameSuffix = 'video--disabled';
tooltipContent = i18n('icu:calling__button--video-disabled');
disabled = true;
label = i18n('icu:calling__button--video__label');
} else if (buttonType === CallingButtonType.VIDEO_OFF) {
classNameSuffix = 'video--off';
tooltipContent = i18n('icu:calling__button--video-on');
label = i18n('icu:calling__button--video__label');
} else if (buttonType === CallingButtonType.VIDEO_ON) {
classNameSuffix = 'video--on';
tooltipContent = i18n('icu:calling__button--video-off');
label = i18n('icu:calling__button--video__label');
} else if (buttonType === CallingButtonType.HANG_UP) {
classNameSuffix = 'hangup';
tooltipContent = i18n('icu:calling__hangup');
label = i18n('icu:calling__hangup');
} else if (buttonType === CallingButtonType.RING_DISABLED) {
classNameSuffix = 'ring--disabled';
disabled = true;
tooltipContent = i18n(
'icu:calling__button--ring__disabled-because-group-is-too-large'
);
label = i18n('icu:calling__button--ring__label');
} else if (buttonType === CallingButtonType.RING_OFF) {
classNameSuffix = 'ring--off';
tooltipContent = i18n('icu:calling__button--ring__on');
label = i18n('icu:calling__button--ring__label');
tooltipContent = i18n('icu:CallingButton--ring-on');
} else if (buttonType === CallingButtonType.RING_ON) {
classNameSuffix = 'ring--on';
tooltipContent = i18n('icu:calling__button--ring__off');
label = i18n('icu:calling__button--ring__label');
tooltipContent = i18n('icu:CallingButton__ring-off');
} else if (buttonType === CallingButtonType.PRESENTING_DISABLED) {
classNameSuffix = 'presenting--disabled';
tooltipContent = i18n('icu:calling__button--presenting-disabled');
disabled = true;
label = i18n('icu:calling__button--presenting__label');
} else if (buttonType === CallingButtonType.PRESENTING_ON) {
classNameSuffix = 'presenting--on';
tooltipContent = i18n('icu:calling__button--presenting-off');
label = i18n('icu:calling__button--presenting__label');
} else if (buttonType === CallingButtonType.PRESENTING_OFF) {
classNameSuffix = 'presenting--off';
tooltipContent = i18n('icu:calling__button--presenting-on');
label = i18n('icu:calling__button--presenting__label');
}
const className = classNames(
'CallingButton__icon',
`CallingButton__icon--${classNameSuffix}`
);
return (
<Tooltip
content={tooltipContent}
direction={tooltipDirection}
theme={Theme.Dark}
>
<div
className={classNames(
'CallingButton__container',
!isVisible && 'CallingButton__container--hidden'
<div className="CallingButton">
<Tooltip
className="CallingButton__tooltip"
wrapperClassName={classNames(
'CallingButton__button-container',
!isVisible && 'CallingButton__button-container--hidden'
)}
content={tooltipContent}
direction={tooltipDirection}
theme={Theme.Dark}
>
<button
aria-label={tooltipContent}
className={className}
className={classNames(
'CallingButton__icon',
`CallingButton__icon--${classNameSuffix}`
)}
disabled={disabled}
id={uniqueButtonId}
onClick={onClick}
@ -139,10 +119,7 @@ export function CallingButton({
>
<div />
</button>
<label className="CallingButton__label" htmlFor={uniqueButtonId}>
{label}
</label>
</div>
</Tooltip>
</Tooltip>
</div>
);
}