Merge pull request nexmo-se#98 from nexmo-se/adding-audio-output

Adding audio output

Author: enricop89

package-lock.json

@@ -13,7 +13,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@vonage/video-effects": "^0.1.0",
-    "@vonage/video-express": "^1.1.4",
+    "@vonage/video-express": "^1.2.0",
     "axios": "^0.21.1",
     "body-parser": "^1.19.0",
     "concurrently": "^6.2.0",

package.json

@@ -4,7 +4,7 @@ import {
   BrowserRouter as Router,
   Switch,
   Route,
-  Redirect
+  Redirect,
 } from 'react-router-dom';
 import { UserContext } from './context/UserContext';
 import VideoRoom from './components/VideoRoom';
@@ -27,40 +27,41 @@ const theme = () => {
     palette: {
       type: 'light',
       primary: {
-        main: primary
+        main: primary,
       },
       secondary: {
-        main: secondary
+        main: secondary,
       },
       bodyBackground: {
-        black: '#131415'
+        black: '#131415',
       },
       callBackground: {
-        main: '#20262D'
+        main: '#20262D',
       },
       toolbarBackground: {
-        main: '#41464D'
+        main: '#41464D',
       },
       activeButtons: {
         green: '#1C8731',
-        red: '#D50F2C'
-      }
-    }
+        red: '#D50F2C',
+      },
+    },
   });
 };
 
 function App() {
   const [user, setUser] = useState({
     videoEffects: {
       backgroundBlur: false,
-      virtualBackground: false
+      virtualBackground: false,
     },
     defaultSettings: {
       publishAudio: true,
       publishVideo: true,
       audioSource: undefined,
-      videoSource: undefined
-    }
+      videoSource: undefined,
+      audioOutput: undefined,
+    },
   });
   const userValue = useMemo(() => ({ user, setUser }), [user, setUser]);
   return (
@@ -78,7 +79,7 @@ function App() {
             <Route path="*">
               <Redirect
                 to={{
-                  pathname: '/'
+                  pathname: '/',
                 }}
               />
             </Route>

src/App.js

@@ -22,7 +22,7 @@ export default function MuteAudioButton({
   classes,
   getAudioSource,
   cameraPublishing,
-  changeAudioSource
+  changeAudioSource,
 }) {
   const title = hasAudio ? 'Disable Microphone' : 'Enable Microphone';
   const localClasses = styles();
@@ -52,7 +52,7 @@ export default function MuteAudioButton({
     getAudioSource,
     deviceInfo,
     audioDeviceId,
-    devicesAvailable
+    devicesAvailable,
   ]);
 
   React.useEffect(() => {
@@ -66,7 +66,6 @@ export default function MuteAudioButton({
 
   const handleChangeAudioSource = (event, index) => {
     setSelectedIndex(index);
-    console.log(index);
     setOpen(false);
     const audioDeviceId = devicesAvailable.find(
       (device) => device.label === event.target.textContent
@@ -132,14 +131,13 @@ export default function MuteAudioButton({
         role={undefined}
         transition
         disablePortal
-        style={{ zIndex: 101 }} // todo temporary fix for a bug in MP 0.1.5
       >
         {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}
             style={{
               transformOrigin:
-                placement === 'bottom' ? 'center top' : 'center bottom'
+                placement === 'bottom' ? 'center top' : 'center bottom',
             }}
           >
             <Paper>

src/components/MuteAudioButton/index.js

@@ -0,0 +1,115 @@
+import SpeakerIcon from '@material-ui/icons/Speaker';
+import { IconButton } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import useDevices from '../../hooks/useDevices';
+
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import React from 'react';
+import styles from './styles.js';
+
+export default function SpeakerSelector({
+  classes,
+  cameraPublishing,
+  changeAudioOutput,
+  getCurrentAudioOutput,
+}) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const localClasses = styles();
+  const ITEM_HEIGHT = 48;
+
+  const { deviceInfo } = useDevices();
+  const [devicesAvailable, setDevicesAvailable] = React.useState(null);
+  const [options, setOptions] = React.useState([]);
+
+  const open = Boolean(anchorEl);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [audioOutputId, setAudioOutputId] = React.useState('');
+
+  React.useEffect(() => {
+    setDevicesAvailable(deviceInfo.audioOutputDevices);
+
+    if (cameraPublishing && devicesAvailable) {
+      getCurrentAudioOutput().then((id) => setAudioOutputId(id));
+
+      const indexOfSelectedElement = devicesAvailable.indexOf(
+        devicesAvailable.find((e) => e.deviceId === audioOutputId)
+      );
+
+      setSelectedIndex(indexOfSelectedElement);
+    }
+  }, [
+    cameraPublishing,
+    deviceInfo,
+    audioOutputId,
+    devicesAvailable,
+    getCurrentAudioOutput,
+  ]);
+
+  React.useEffect(() => {
+    if (devicesAvailable) {
+      const audioOutputsAvailable = devicesAvailable.map((e) => {
+        return e.label;
+      });
+      setOptions(audioOutputsAvailable);
+    }
+  }, [devicesAvailable]);
+
+  const handleChangeAudioOutput = (event, index) => {
+    setSelectedIndex(index);
+    const audioOutputId = devicesAvailable.find(
+      (device) => device.label === event.target.textContent
+    ).deviceId;
+    changeAudioOutput(audioOutputId);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <div>
+      <Tooltip title="Change Audio Output">
+        <IconButton
+          aria-label="more"
+          aria-controls="long-menu"
+          aria-haspopup="true"
+          className={classes.toolbarButtons}
+          onClick={handleClick}
+        >
+          <SpeakerIcon />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        id="long-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 4.5,
+            width: '40ch',
+          },
+        }}
+      >
+        {options.map((option, index) => (
+          <MenuItem
+            key={option}
+            selected={index === selectedIndex}
+            onClick={(event) => handleChangeAudioOutput(event, index)}
+            classes={{ selected: localClasses.selected }}
+          >
+            {option}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}

src/components/SpeakerSelector/index.js

@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+// export default makeStyles((theme)=>{
+export default makeStyles({
+  selected: {
+    color: '#b779ff'
+  }
+});