From baaf8ad68bc287e928f3c368c3a7026cc1b80e5c Mon Sep 17 00:00:00 2001
From: Murat Ersin <mmuratersin@gmail.com>
Date: Thu, 4 Jan 2024 17:44:37 +0300
Subject: [PATCH] fix: microphone and camera select issue in legacy call
 (#12105)

Signed-off-by: Murat Ersin <muratersin@yahoo.com>
---
 .../LegacyCallView/LegacyCallViewButtons.tsx  | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
index 2f6d9c2ea5..fd8c85874e 100644
--- a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
+++ b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, createRef, useState } from "react";
+import React, { ComponentProps, createRef, useState, forwardRef } from "react";
 import classNames from "classnames";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 
@@ -48,30 +48,26 @@ type ButtonProps = Omit<ComponentProps<typeof AccessibleTooltipButton>, "title"
     offLabel?: string;
 };
 
-const LegacyCallViewToggleButton: React.FC<ButtonProps> = ({
-    children,
-    state: isOn,
-    className,
-    onLabel,
-    offLabel,
-    ...props
-}) => {
-    const classes = classNames("mx_LegacyCallViewButtons_button", className, {
-        mx_LegacyCallViewButtons_button_on: isOn,
-        mx_LegacyCallViewButtons_button_off: !isOn,
-    });
+const LegacyCallViewToggleButton = forwardRef<HTMLElement, ButtonProps>(
+    ({ children, state: isOn, className, onLabel, offLabel, ...props }, ref) => {
+        const classes = classNames("mx_LegacyCallViewButtons_button", className, {
+            mx_LegacyCallViewButtons_button_on: isOn,
+            mx_LegacyCallViewButtons_button_off: !isOn,
+        });
 
-    return (
-        <AccessibleTooltipButton
-            className={classes}
-            title={isOn ? onLabel : offLabel}
-            alignment={Alignment.Top}
-            {...props}
-        >
-            {children}
-        </AccessibleTooltipButton>
-    );
-};
+        return (
+            <AccessibleTooltipButton
+                ref={ref}
+                className={classes}
+                title={isOn ? onLabel : offLabel}
+                alignment={Alignment.Top}
+                {...props}
+            >
+                {children}
+            </AccessibleTooltipButton>
+        );
+    },
+);
 
 interface IDropdownButtonProps extends ButtonProps {
     deviceKinds: MediaDeviceKindEnum[];