New call UI and controls

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

View file

@ -9,9 +9,6 @@ import type { LocalizerType } from '../types/Util';
import { Button, ButtonVariant } from './Button';
import { Spinner } from './Spinner';
const PADDING_HORIZONTAL = 48;
const PADDING_VERTICAL = 12;
export enum CallingLobbyJoinButtonVariant {
CallIsFull = 'CallIsFull',
Join = 'Join',
@ -47,18 +44,24 @@ export function CallingLobbyJoinButton({
const childrenByVariant: Record<CallingLobbyJoinButtonVariant, ReactChild> = {
[CallingLobbyJoinButtonVariant.CallIsFull]: i18n(
'icu:calling__call-is-full'
'icu:CallingLobbyJoinButton--call-full'
),
[CallingLobbyJoinButtonVariant.Loading]: (
<Spinner size="18px" svgSize="small" />
),
[CallingLobbyJoinButtonVariant.Join]: i18n(
'icu:CallingLobbyJoinButton--join'
),
[CallingLobbyJoinButtonVariant.Start]: i18n(
'icu:CallingLobbyJoinButton--start'
),
[CallingLobbyJoinButtonVariant.Loading]: <Spinner svgSize="small" />,
[CallingLobbyJoinButtonVariant.Join]: i18n('icu:calling__join'),
[CallingLobbyJoinButtonVariant.Start]: i18n('icu:calling__start'),
};
return (
<>
{Boolean(width && height) && (
<Button
className="module-CallingLobbyJoinButton"
className="CallingLobbyJoinButton CallControls__JoinLeaveButton"
disabled={disabled}
onClick={onClick}
style={{ width, height }}
@ -79,7 +82,7 @@ export function CallingLobbyJoinButton({
{Object.values(CallingLobbyJoinButtonVariant).map(candidateVariant => (
<Button
key={candidateVariant}
className="module-CallingLobbyJoinButton"
className="CallingLobbyJoinButton CallControls__JoinLeaveButton"
variant={ButtonVariant.Calling}
onClick={noop}
ref={(button: HTMLButtonElement | null) => {
@ -95,14 +98,10 @@ export function CallingLobbyJoinButton({
// we compute the size, then the font makes the text a bit larger, and
// there's a layout issue.
setWidth((previousWidth = 0) =>
Math.ceil(
Math.max(previousWidth, variantWidth + PADDING_HORIZONTAL)
)
Math.ceil(Math.max(previousWidth, variantWidth))
);
setHeight((previousHeight = 0) =>
Math.ceil(
Math.max(previousHeight, variantHeight + PADDING_VERTICAL)
)
Math.ceil(Math.max(previousHeight, variantHeight))
);
}}
>