v1.7.6/hideable video, device picker

app/src/Chat.js

@@ -31,6 +31,10 @@ import {
   Chip,
   CircularProgress,
   Paper,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
 } from '@material-ui/core';
 import Thread from './Thread';
 import {
@@ -74,6 +78,7 @@ import { goTo } from 'route-lite';
 import CallManager from './CallManager';
 import VideoListener from './VideoListener';
 import ReactGiphySearchbox from 'react-giphy-searchbox';
+import VoxeetSDK from '@voxeet/voxeet-web-sdk';
 
 let CHROME_OR_BROWSER = chrome || browser;
 
@@ -103,6 +108,12 @@ export default class Chat extends Component {
       replyTo: null,
       sendingMessages: [],
       usingVideo: false,
+      audioInputs: [],
+      selectedAudioInput: '',
+      audioOutputs: [],
+      selectedAudioOutput: '',
+      videoInputs: [],
+      selectedVideoInput: '',
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -245,6 +256,26 @@ export default class Chat extends Component {
   }
   callEventListener(event) {
     this.setState(event);
+    if (event.onCall === true) {
+      VoxeetSDK.mediaDevice.enumerateAudioDevices('input').then((devices) => {
+        this.setState({
+          audioInputs: devices,
+          selectedAudioInput: devices.length > 0 ? devices[0].deviceId : '',
+        });
+      });
+      VoxeetSDK.mediaDevice.enumerateAudioDevices('output').then((devices) => {
+        this.setState({
+          audioOutputs: devices,
+          selectedAudioOutput: devices.length > 0 ? devices[0].deviceId : '',
+        });
+      });
+      VoxeetSDK.mediaDevice.enumerateVideoDevices('output').then((devices) => {
+        this.setState({
+          videoInputs: devices,
+          selectedVideoInput: devices.length > 0 ? devices[0].deviceId : '',
+        });
+      });
+    }
   }
   syncPlayer(video) {
     const { status, showName, time, source, element, showChanged } = video;
@@ -519,6 +550,12 @@ export default class Chat extends Component {
       replyTo,
       sendingMessages,
       usingVideo,
+      audioInputs,
+      selectedAudioInput,
+      audioOutputs,
+      selectedAudioOutput,
+      videoInputs,
+      selectedVideoInput,
     } = this.state;
     const { status } = this.props;
     const { callEnabled } = status;
@@ -706,6 +743,78 @@ export default class Chat extends Component {
                   <Chip className="party-controls-users-chip" clickable size="small" label={user} />
                 ))}
               </div>
+              {onCall && (
+                <Typography className="party-controls-users-title" variant="overline">
+                  DEVICE SELECT
+                </Typography>
+              )}
+              {onCall && (
+                <div className="vxt-device-selector">
+                  <FormControl>
+                    <InputLabel color="secondary" id="mic-select">
+                      Mic
+                    </InputLabel>
+                    <Select
+                      labelId="mic-select"
+                      value={selectedAudioInput}
+                      color="secondary"
+                      variant="outlined"
+                      onChange={(ev) => {
+                        VoxeetSDK.mediaDevice.selectAudioInput(ev.target.value).then(() => {
+                          this.setState({ selectedAudioInput: ev.target.value });
+                        });
+                      }}
+                    >
+                      {audioInputs.map((v) => (
+                        <MenuItem value={v.deviceId}>{v.label}</MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+
+                  <FormControl>
+                    <InputLabel color="secondary" id="speaker-select">
+                      Speaker
+                    </InputLabel>
+                    <Select
+                      labelId="speaker-select"
+                      value={selectedAudioOutput}
+                      color="secondary"
+                      variant="outlined"
+                      onChange={(ev) => {
+                        VoxeetSDK.mediaDevice.selectAudioOutput(ev.target.value).then(() => {
+                          this.setState({ selectedAudioOutput: ev.target.value });
+                        });
+                      }}
+                    >
+                      {audioOutputs.map((v) => (
+                        <MenuItem value={v.deviceId}>{v.label}</MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+
+                  <FormControl>
+                    <InputLabel color="secondary" id="camera-select">
+                      Camera
+                    </InputLabel>
+                    <Select
+                      labelId="camera-select"
+                      value={selectedVideoInput}
+                      color="secondary"
+                      fullWidth
+                      variant="outlined"
+                      onChange={(ev) => {
+                        VoxeetSDK.mediaDevice.selectVideoInput(ev.target.value).then(() => {
+                          this.setState({ selectedVideoInput: ev.target.value });
+                        });
+                      }}
+                    >
+                      {videoInputs.map((v) => (
+                        <MenuItem value={v.deviceId}>{v.label}</MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </div>
+              )}
             </ExpansionPanelDetails>
           </ExpansionPanel>
           {player ? (