v1.7.6/hideable video, device picker

app/public/background.js

@@ -123,6 +123,7 @@ const updateActiveParties = (partyName, doDelete = false) => {
 };
 
 const waitAndLeaveParty = (partyName) => {
+  updateActiveParties(partyName);
   setTimeout(() => updateActiveParties(partyName, true), 90000);
 };
 

app/src/Api.js

@@ -14,7 +14,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 
 let CHROME_OR_BROWSER = chrome || browser;
 
-const API_HOST = 'http://localhost:5001/watch-party-crx/us-central1/widgets';
+const API_HOST = 'https://api.chromewatchparty.com';
 
 export const PLAYER_STATUS = {
   PLAYING: 'PLAYING',

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 ? (

app/src/index.css

@@ -1055,6 +1055,21 @@ button.giphy-list-item {
 }
 
 .vxt-video-container {
+  position: fixed;
+  overflow-x: hidden;
+  overflow-y: auto;
+  top: 10px;
+  right: 10px;
+  max-height: 100%;
+  max-width: 425px;
+  width: 425px;
+  opacity: 0.8;
+  transition: all ease-in-out 0.3s;
+}
+
+body.visible .vxt-video-container {
+  position: relative;
+  opacity: 1;
   display: block;
   overflow-x: hidden;
   overflow-y: auto;
@@ -1140,3 +1155,21 @@ button.giphy-list-item {
   bottom: 34px;
   opacity: 1;
 }
+
+.MuiPopover-root[role='presentation'] {
+  z-index: 9999 !important;
+}
+
+.vxt-device-selector > .MuiFormControl-root {
+  width: 100% !important;
+  margin: 5px 0;
+}
+
+.vxt-device-selector label {
+  font-size: 15px !important;
+  left: 10px;
+  top: -9px;
+  background: #424242;
+  padding: 5px;
+  z-index: 9;
+}