Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-06-06 11:45:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(mute): add syncing state and disable toggle during async mute

Browse Source
This commit is contained in:
Valere
2026-06-04 18:55:31 +02:00
parent fc3c4bf566
commit 4606373e5b
10 changed files with 191 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/button/Button.tsx
View File

@@ -16,6 +16,7 @@ import {
import {
MicOnSolidIcon,
MicOffSolidIcon,
SpinnerIcon,
VideoCallSolidIcon,
VideoCallOffSolidIcon,
EndCallIcon,
@@ -32,12 +33,13 @@ import { platform } from "../Platform";
interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
enabled: boolean;
busy?: boolean;
size?: "md" | "lg";
}
export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
export const MicButton: FC<MicButtonProps> = ({ enabled, busy, ...props }) => {
const { t } = useTranslation();
const Icon = enabled ? MicOnSolidIcon : MicOffSolidIcon;
const Icon = busy ? SpinnerIcon : enabled ? MicOnSolidIcon : MicOffSolidIcon;
const label = enabled
? t("mute_microphone_button_label")
: t("unmute_microphone_button_label");
@@ -51,6 +53,11 @@ export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
role="switch"
aria-checked={enabled}
{...props}
aria-busy={busy}
className={classNames(props.className, {
[styles.rotate]: !!busy,
})}
disabled={props.disabled || busy}
/>
</Tooltip>
);
@@ -58,12 +65,21 @@ export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
enabled: boolean;
busy?: boolean;
size?: "md" | "lg";
}
export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
export const VideoButton: FC<VideoButtonProps> = ({
enabled,
busy,
...props
}) => {
const { t } = useTranslation();
const Icon = enabled ? VideoCallSolidIcon : VideoCallOffSolidIcon;
const Icon = busy
? SpinnerIcon
: enabled
? VideoCallSolidIcon
: VideoCallOffSolidIcon;
const label = enabled
? t("stop_video_button_label")
: t("start_video_button_label");
@@ -77,6 +93,11 @@ export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
role="switch"
aria-checked={enabled}
{...props}
aria-busy={busy}
className={classNames(props.className, {
[styles.rotate]: !!busy,
})}
disabled={props.disabled || busy}
/>
</Tooltip>
);