WIP: Render hints (#506)

* renderHints + stage

* set loglevel

* add idleTrackSwitchOff setting

* use rc3

* Add ability to change twilio environments

* use twilio-video.js#2.14.0-rc4

* use [email protected]

* Update app setting files and tests

* Change order of settings

* Install twilio-video 2.14.0

Co-authored-by: Tim Mendoza <[email protected]>

Author: makarandp0

package-lock.json

@@ -39,7 +39,7 @@
     "strip-color": "^0.1.0",
     "ts-node": "^9.1.1",
     "twilio": "^3.57.0",
-    "twilio-video": "^2.13.1",
+    "twilio-video": "^2.14.0",
     "typescript": "^3.8.3"
   },
   "devDependencies": {

package.json

@@ -38,18 +38,18 @@ describe('the ConnectionOptionsDialog component', () => {
       const wrapper = shallow(<ConnectionOptionsDialog open={true} onClose={() => {}} />);
       wrapper
         .find(TextField)
-        .find({ name: 'maxTracks' })
-        .simulate('change', { target: { value: '123456a', name: 'maxTracks' } });
+        .find({ name: 'maxAudioBitrate' })
+        .simulate('change', { target: { value: '123456a', name: 'maxAudioBitrate' } });
       expect(mockDispatchSetting).not.toHaveBeenCalled();
     });
 
     it('should dispatch settings changes from a number field when there are only digits in the value', () => {
       const wrapper = shallow(<ConnectionOptionsDialog open={true} onClose={() => {}} />);
       wrapper
         .find(TextField)
-        .find({ name: 'maxTracks' })
-        .simulate('change', { target: { value: '123456', name: 'maxTracks' } });
-      expect(mockDispatchSetting).toHaveBeenCalledWith({ value: '123456', name: 'maxTracks' });
+        .find({ name: 'maxAudioBitrate' })
+        .simulate('change', { target: { value: '123456', name: 'maxAudioBitrate' } });
+      expect(mockDispatchSetting).toHaveBeenCalledWith({ value: '123456', name: 'maxAudioBitrate' });
     });
   });
 

src/components/ConnectionOptionsDialog/ConnectionOptionsDialog.test.tsx

@@ -17,7 +17,6 @@ import {
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { inputLabels, Settings } from '../../state/settings/settingsReducer';
-import { RenderDimensions } from '../../state/settings/renderDimensions';
 import { useAppState } from '../../state';
 import useRoomState from '../../hooks/useRoomState/useRoomState';
 
@@ -54,12 +53,6 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const withDefault = (val?: string) => (typeof val === 'undefined' ? 'default' : val);
 
-const RenderDimensionItems = RenderDimensions.map(({ label, value }) => (
-  <MenuItem value={value} key={value}>
-    {label}
-  </MenuItem>
-));
-
 export default function ConnectionOptionsDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const classes = useStyles();
   const { settings, dispatchSetting } = useAppState();
@@ -143,80 +136,51 @@ export default function ConnectionOptionsDialog({ open, onClose }: { open: boole
                 <MenuItem value="default">Server Default</MenuItem>
               </Select>
             </FormControl>
-
-            <FormControl className={classes.formControl}>
-              <TextField
-                disabled={isDisabled}
-                fullWidth
-                id={inputLabels.maxTracks}
-                label="Max Tracks"
-                placeholder="Leave blank for no limit"
-                name={inputLabels.maxTracks}
-                value={withDefault(settings.maxTracks)}
-                onChange={handleNumberChange}
-              />
-            </FormControl>
-
-            <FormControl className={classes.formControl}>
-              <TextField
-                disabled={isDisabled}
-                fullWidth
-                id={inputLabels.maxAudioBitrate}
-                label="Max Audio Bitrate"
-                placeholder="Leave blank for no limit"
-                name={inputLabels.maxAudioBitrate}
-                value={withDefault(settings.maxAudioBitrate)}
-                onChange={handleNumberChange}
-              />
-            </FormControl>
           </Grid>
           <Grid item sm={6} xs={12}>
-            <FormControl fullWidth className={classes.formControl}>
-              <InputLabel id={inputLabels.renderDimensionLow} className={classes.label}>
-                Render Dimension (Low Priority):
-              </InputLabel>
+            <FormControl className={classes.formControl}>
+              <InputLabel id={inputLabels.clientTrackSwitchOffControl}>Client Track Switch Off Control:</InputLabel>
               <Select
                 fullWidth
                 disabled={isDisabled}
-                name={inputLabels.renderDimensionLow}
-                label={inputLabels.renderDimensionLow}
-                value={withDefault(settings.renderDimensionLow)}
+                name={inputLabels.clientTrackSwitchOffControl}
+                label={inputLabels.clientTrackSwitchOffControl}
+                value={withDefault(settings.clientTrackSwitchOffControl)}
                 onChange={handleChange}
               >
-                {RenderDimensionItems}
+                <MenuItem value="auto">Auto</MenuItem>
+                <MenuItem value="manual">Manual</MenuItem>
+                <MenuItem value="default">Default</MenuItem>
               </Select>
             </FormControl>
 
-            <FormControl fullWidth className={classes.formControl}>
-              <InputLabel id={inputLabels.renderDimensionStandard} className={classes.label}>
-                Render Dimension (Standard Priority):
-              </InputLabel>
+            <FormControl className={classes.formControl}>
+              <InputLabel id={inputLabels.contentPreferencesMode}>Content Preferences Mode:</InputLabel>
               <Select
                 fullWidth
                 disabled={isDisabled}
-                name={inputLabels.renderDimensionStandard}
-                label={inputLabels.renderDimensionStandard}
-                value={withDefault(settings.renderDimensionStandard)}
+                name={inputLabels.contentPreferencesMode}
+                label={inputLabels.contentPreferencesMode}
+                value={withDefault(settings.contentPreferencesMode)}
                 onChange={handleChange}
               >
-                {RenderDimensionItems}
+                <MenuItem value="auto">Auto</MenuItem>
+                <MenuItem value="manual">Manual</MenuItem>
+                <MenuItem value="default">Default</MenuItem>
               </Select>
             </FormControl>
 
-            <FormControl fullWidth className={classes.formControl}>
-              <InputLabel id={inputLabels.renderDimensionHigh} className={classes.label}>
-                Render Dimension (High Priority):
-              </InputLabel>
-              <Select
-                fullWidth
+            <FormControl className={classes.formControl}>
+              <TextField
                 disabled={isDisabled}
-                name={inputLabels.renderDimensionHigh}
-                label={inputLabels.renderDimensionHigh}
-                value={withDefault(settings.renderDimensionHigh)}
-                onChange={handleChange}
-              >
-                {RenderDimensionItems}
-              </Select>
+                fullWidth
+                id={inputLabels.maxAudioBitrate}
+                label="Max Audio Bitrate"
+                placeholder="Leave blank for no limit"
+                name={inputLabels.maxAudioBitrate}
+                value={withDefault(settings.maxAudioBitrate)}
+                onChange={handleNumberChange}
+              />
             </FormControl>
           </Grid>
         </Grid>