chore(deps): update dependency element-call from 0.19.1 to v0.20.1 (#2992)

* chore(deps): update dependency @element-hq/element-call-embedded from 0.19.1 to v0.20.1

* fix reaction button click

* fix call settings button query

* fix screenshare and spotlight button state update

* fix incomming call text alignment

* prevent displaying call notification for voice rooms

* disable mic/video icon when toggle in progress

* update matrix-js-sdk

---------

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>

src/app/features/call/CallControls.tsx

@@ -71,6 +71,9 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     setCords(undefined);
   };
 
+  const handleMicrophoneToggle = useCallback(() => callEmbed.control.toggleMicrophone(), [callEmbed]);
+  const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
+
   const [hangupState, hangup] = useAsyncCallback(
     useCallback(() => callEmbed.hangup(), [callEmbed])
   );
@@ -96,13 +99,13 @@ export function CallControls({ callEmbed }: CallControlsProps) {
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
             <MicrophoneButton
               enabled={microphone}
-              onToggle={() => callEmbed.control.toggleMicrophone()}
+              onToggle={handleMicrophoneToggle}
             />
             <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
           </Box>
           {!compact && <ControlDivider />}
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
+            <VideoButton enabled={video} onToggle={handleVideoToggle} />
             <ScreenShareButton
               enabled={screenshare}
               onToggle={() => callEmbed.control.toggleScreenshare()}

src/app/features/call/Controls.tsx

@@ -3,6 +3,7 @@ import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'f
 import { useAtom } from 'jotai';
 import * as css from './styles.css';
 import { callChatAtom } from '../../state/callEmbed';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 
 export function ControlDivider() {
   return (
@@ -12,9 +13,12 @@ export function ControlDivider() {
 
 type MicrophoneButtonProps = {
   enabled: boolean;
-  onToggle: () => void;
+  onToggle: () => Promise<unknown>;
 };
 export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
+  const [micState, toggleMic] = useAsyncCallback(onToggle);
+  const loading = micState.status === AsyncStatus.Loading;
+  
   return (
     <TooltipProvider
       position="Top"
@@ -32,8 +36,9 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
           fill="Soft"
           radii="400"
           size="400"
-          onClick={() => onToggle()}
+          onClick={toggleMic}
           outlined
+          disabled={loading}
         >
           <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
         </IconButton>
@@ -80,9 +85,12 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
 
 type VideoButtonProps = {
   enabled: boolean;
-  onToggle: () => void;
+  onToggle: () => Promise<unknown>;
 };
 export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
+  const [videoState, toggleVideo] = useAsyncCallback(onToggle);
+  const loading = videoState.status === AsyncStatus.Loading;
+
   return (
     <TooltipProvider
       position="Top"
@@ -100,8 +108,9 @@ export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
           fill="Soft"
           radii="400"
           size="400"
-          onClick={() => onToggle()}
+          onClick={toggleVideo}
           outlined
+          disabled={loading}
         >
           <Icon
             size="400"

src/app/features/call/PrescreenControls.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
@@ -26,6 +26,10 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
   const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
     useCallPreferences();
 
+
+  const handleMicrophoneToggle = useCallback(async () => toggleMicrophone(), [toggleMicrophone]);
+  const handleVideoToggle = useCallback(async () => toggleVideo(), [toggleVideo]);
+
   return (
     <SequenceCard
       className={css.ControlCard}
@@ -37,12 +41,12 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
       wrap="Wrap"
     >
       <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
-        <MicrophoneButton enabled={microphone} onToggle={toggleMicrophone} />
+        <MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
         <SoundButton enabled={sound} onToggle={toggleSound} />
       </Box>
       <ControlDivider />
       <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
-        <VideoButton enabled={video} onToggle={toggleVideo} />
+        <VideoButton enabled={video} onToggle={handleVideoToggle} />
         <ChatButton />
       </Box>
       <Box grow="Yes" direction="Column">