commit 571240f3800beb178358ab7df2e0e04727034030
author simon <tran.simon2@gmail.com> Tue Nov 29 23:59:27 2022 -0500
committer simon <tran.simon2@gmail.com> Wed Nov 30 14:58:11 2022 -0500
tree a0099fb7240a2381ca685cdc5ed6b3168a853550
parent 6bbdacf71ac8f293cdba595f1afca2db26041bda

Remove volume button in call interface in Firefox

Add click event for `CallingVolumeButton` and `CallingScreenShareButton`
in call interface to open their respective menu.

Remove localVideoRef and remoteVideoRef from CallProvider

Change-Id: I87601153cb3e24b38a5f764b11935e32402caa31

client/src/components/Button.tsx

diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index a89726c..4e0d5ac 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -108,6 +108,7 @@
 
 export type ExpandableButtonProps = IconButtonProps & {
   isVertical?: boolean;
+  expandMenuOnClick?: boolean;
   Icon?: ComponentType<SvgIconProps>;
   expandMenuOptions?: (ExpandMenuOption | ExpandMenuRadioOption)[];
   IconButtonComp?: ComponentType<IconButtonProps>;
@@ -116,6 +117,7 @@
 export const ExpandableButton = ({
   isVertical,
   Icon,
+  expandMenuOnClick,
   expandMenuOptions = undefined,
   IconButtonComp = IconButton,
   ...props
@@ -194,7 +196,18 @@
             />
           </IconButton>
         )}
-        <IconButtonComp {...props}>{Icon && <Icon />}</IconButtonComp>
+        <IconButtonComp
+          onClick={
+            expandMenuOnClick
+              ? (event) => {
+                  setAnchorEl(event.currentTarget);
+                }
+              : undefined
+          }
+          {...props}
+        >
+          {Icon && <Icon />}
+        </IconButtonComp>
       </Box>
     </>
   );

client/src/components/CallButtons.tsx

diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index 2ecc4fc..d1beab8 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -152,6 +152,7 @@
   return (
     <CallButton
       aria-label="screen share"
+      expandMenuOnClick
       Icon={ScreenShareArrowIcon}
       expandMenuOptions={[
         {
@@ -206,17 +207,13 @@
 
 export const CallingVolumeButton = (props: ExpandableButtonProps) => {
   const options = useMediaDeviceExpandMenuOptions('audiooutput');
-  const { remoteVideoRef } = useContext(CallContext);
-
-  // Audio out options are only available on chrome and other browsers that support `setSinkId`
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId#browser_compatibility
-  const hasSetSinkId = remoteVideoRef.current?.setSinkId != null;
 
   return (
     <CallButton
       aria-label="volume options"
+      expandMenuOnClick
       Icon={VolumeIcon}
-      expandMenuOptions={hasSetSinkId ? options : undefined}
+      expandMenuOptions={options}
       {...props}
     />
   );