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/PrescreenControls.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
@@ -54,6 +54,9 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
     useCallPreferences();
   const [cameraOnJoin] = useSetting(settingsAtom, 'cameraOnJoin');
 
+  const handleMicrophoneToggle = useCallback(async () => toggleMicrophone(), [toggleMicrophone]);
+  const handleVideoToggle = useCallback(async () => toggleVideo(), [toggleVideo]);
+
   return (
     <SequenceCard
       className={css.ControlCard}
@@ -65,12 +68,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} disabled={!cameraOnJoin} />
+        <VideoButton enabled={video} onToggle={handleVideoToggle} disabled={!cameraOnJoin} />
         <ChatButton />
       </Box>
       <Box grow="Yes" direction="Column" gap="200">