Merge upstream v4.12.3 (Element Call 0.20.1) into lotus

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/call-status/CallControl.tsx

@@ -12,6 +12,9 @@ type MicrophoneButtonProps = {
   disabled?: boolean;
 };
 function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
+  const [micState, toggleMic] = useAsyncCallback(onToggle);
+  const loading = micState.status === AsyncStatus.Loading;
+
   return (
     <TooltipProvider
       position="Top"
@@ -28,9 +31,9 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
           fill="Soft"
           radii="300"
           size="300"
-          onClick={() => onToggle()}
+          onClick={toggleMic}
           outlined
-          disabled={disabled}
+          disabled={disabled || loading}
           aria-label={enabled ? 'Turn off microphone' : 'Turn on microphone'}
           aria-pressed={!enabled}
         >
@@ -85,6 +88,9 @@ type VideoButtonProps = {
   disabled?: boolean;
 };
 function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
+  const [videoState, toggleVideo] = useAsyncCallback(onToggle);
+  const loading = videoState.status === AsyncStatus.Loading;
+
   return (
     <TooltipProvider
       position="Top"
@@ -101,10 +107,10 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           fill="Soft"
           radii="300"
           size="300"
-          onClick={() => onToggle()}
+          onClick={toggleVideo}
           aria-label={enabled ? 'Stop Video' : 'Start Video'}
           outlined
-          disabled={disabled}
+          disabled={disabled || loading}
         >
           <Icon
             size="100"
@@ -162,6 +168,13 @@ export function CallControl({
 }) {
   const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
   const setCallEmbed = useSetAtom(callEmbedAtom);
+
+  const handleMicrophoneToggle = useCallback(
+    () => callEmbed.control.toggleMicrophone(),
+    [callEmbed],
+  );
+  const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
+
   const [hangupState, hangup] = useAsyncCallback(
     useCallback(() => callEmbed.hangup(), [callEmbed]),
   );
@@ -181,7 +194,7 @@ export function CallControl({
       <Box alignItems="Inherit" gap="200">
         <MicrophoneButton
           enabled={microphone}
-          onToggle={() => callEmbed.control.toggleMicrophone()}
+          onToggle={handleMicrophoneToggle}
           disabled={!callJoined}
         />
         <SoundButton
@@ -190,11 +203,7 @@ export function CallControl({
           disabled={!callJoined}
         />
         {!compact && <StatusDivider />}
-        <VideoButton
-          enabled={video}
-          onToggle={() => callEmbed.control.toggleVideo()}
-          disabled={!callJoined}
-        />
+        <VideoButton enabled={video} onToggle={handleVideoToggle} disabled={!callJoined} />
         {!compact && (
           <ScreenShareButton
             enabled={screenshare}