phenix-react-gum-configuration - npm Package Compare versions

Comparing version 2017.4.4 to 2017.4.5

package.json

 {
   "name": "phenix-react-gum-configuration",
-  "version": "2017.4.4",
+  "version": "2017.4.5",
   "description": "Get-User-Media selection and configuration component",
@@ -5,0 +5,0 @@ "main": "dist/phenix-react-gum-configuration.min.js",

src/audioVolumeMeter/AudioVolumeVisualization.js

@@ -70,4 +70,4 @@ /**
   };
-  const width = element.getBoundingClientRect().width - margin.left - margin.right;
-  const height = element.getBoundingClientRect().height - margin.top - margin.bottom;
+  let width = element.getBoundingClientRect().width - margin.left - margin.right;
+  let height = element.getBoundingClientRect().height - margin.top - margin.bottom;
   const metrics = options.metrics || ['value'];
@@ -100,2 +100,20 @@ const scale = {
 
+  const shouldResize = function shouldResize() {
+    const newWidth = element.getBoundingClientRect().width - margin.left - margin.right;
+    const newHeight = element.getBoundingClientRect().height - margin.top - margin.bottom;
+
+    return width !== newWidth || height !== newHeight;
+  };
+
+  const resize = function resize() {
+    const newWidth = element.getBoundingClientRect().width - margin.left - margin.right;
+    const newHeight = element.getBoundingClientRect().height - margin.top - margin.bottom;
+
+    width = newWidth;
+    height = newHeight;
+
+    scale.x.range([0, width]);
+    scale.y.range([0, height]);
+  };
+
   const renderStep = function renderStep() {
@@ -106,2 +124,6 @@ if (that.stopped) {
 
+    if (shouldResize()) {
+      resize();
+    }
+
     const textColorClass = options.textColors[getAudioState(lastValue)];
@@ -145,10 +167,2 @@ const barColorClass = options.barColor;
 
-  const resize = function resize() {
-    const width = element.getBoundingClientRect().width - margin.left - margin.right;
-    const height = element.getBoundingClientRect().height - margin.top - margin.bottom;
-
-    scale.x.range([0, width]);
-    scale.y.range([0, height]);
-  };
-
   window.addEventListener("resize", resize);
@@ -169,2 +183,2 @@ }
 
-export default AudioVolumeVisualization;
+export default AudioVolumeVisualization;

src/components/GUMConfigurationView.jsx

@@ -18,4 +18,4 @@ import React from 'react';
   videoMediaStream,
-  defaultAudioSource,
-  defaultVideoSource,
+  selectedAudioSource,
+  selectedVideoSource,
   onVideoSourceSelect,
@@ -45,3 +45,3 @@ onAudioSourceSelect
           typeOfSource="audio"
-          defaultSource={defaultAudioSource}
+          selectedSource={selectedAudioSource}
           onSourceSelect={onAudioSourceSelect} />
@@ -61,3 +61,3 @@ <AudioContainer
           typeOfSource="video"
-          defaultSource={defaultVideoSource}
+          selectedSource={selectedVideoSource}
           includeScreen={includeScreen}
@@ -92,4 +92,4 @@ onSourceSelect={onVideoSourceSelect} />
   videoMediaStream: PropTypes.object.isRequired,
-  defaultAudioSource: PropTypes.string,
-  defaultVideoSource: PropTypes.string,
+  selectedAudioSource: PropTypes.string,
+  selectedVideoSource: PropTypes.string,
   confirmButtonText: PropTypes.string
@@ -96,0 +96,0 @@ };

src/components/MediaSourceSelector.jsx

@@ -11,3 +11,3 @@ import React from 'react';
   includeScreen,
-  defaultSource,
+  selectedSource = '',
   onSourceSelect
@@ -98,10 +98,4 @@ }) => {
 
-  if (defaultSource === 'none') {
-    defaultSource = 'no-source';
-  } else if (!defaultSource) {
-    if (sources.find((source) => source.id.toLowerCase() === 'default')) {
-      defaultSource = 'default';
-    } else {
-      defaultSource = 'disabled';
-    }
+  if (selectedSource === 'none') {
+    selectedSource = 'no-source';
   }
@@ -115,4 +109,4 @@
 
-  if (!options.find((id) => id && id.toLowerCase() === defaultSource.toLowerCase())) {
-    defaultSource = 'disabled';
+  if (selectedSource && !options.find((id) => id && id.toLowerCase() === selectedSource.toLowerCase())) {
+    selectedSource = 'disabled';
   }
@@ -125,3 +119,3 @@
       className={selectClassName}
-      value={defaultSource || 'disabled'}>
+      value={selectedSource || 'disabled'}>
       {renderSourcesOptions()}
@@ -137,3 +131,3 @@ </select>
   typeOfSource: PropTypes.string.isRequired,
-  defaultSource: PropTypes.string.isRequired,
+  selectedSource: PropTypes.string.isRequired,
   includeScreen: PropTypes.bool.isRequired,
@@ -140,0 +134,0 @@ onSourceSelect: PropTypes.func.isRequired

src/containers/VideoContainer.jsx

@@ -37,3 +37,4 @@ import React from 'react';
       <VideoPreview
-        propsStyle={propsStyle} />
+        propsStyle={propsStyle}
+      />
     );
@@ -40,0 +41,0 @@ }

src/index.jsx

@@ -51,2 +51,36 @@ import React from 'react';
     RTC.getSources((sources) => {
+      let hasChanges = false;
+      const defaultAudioSource = sources.find((source) => {
+        return source.label.toLowerCase() === 'default' && source.kind === 'audio';
+      });
+      const defaultVideoSource = sources.find((source) => {
+        return source.label.toLowerCase() === 'default' && source.kind === 'video';
+      });
+      const videoSources = sources.filter((source) => source.kind === 'video');
+      const audioSources = sources.filter((source) => source.kind === 'audio');
+
+      if (defaultAudioSource && !this.defaultAudioSource) {
+        this.deviceOptions.audio.deviceId = defaultAudioSource.id;
+        hasChanges = true;
+      }
+
+      if (defaultVideoSource && !this.defaultVideoSource) {
+        this.deviceOptions.video.deviceId = defaultVideoSource.id;
+        hasChanges = true;
+      }
+
+      if (!defaultAudioSource && !this.defaultAudioSource && audioSources.length === 1) {
+        this.deviceOptions.audio.deviceId = audioSources[0].id;
+        hasChanges = true;
+      }
+
+      if (!defaultVideoSource && !this.defaultVideoSource && videoSources.length === 1) {
+        this.deviceOptions.video.deviceId = videoSources[0].id;
+        hasChanges = true;
+      }
+
+      if (hasChanges) {
+        this.changeSelectedDevices();
+      }
+
       this.setState({
@@ -153,4 +187,4 @@ ...this.state,
         videoMediaStream={this.state.userMedia}
-        defaultAudioSource={this.deviceOptions.audio.deviceId || ''}
-        defaultVideoSource={this.deviceOptions.video.deviceId || ''}
+        selectedAudioSource={this.deviceOptions.audio.deviceId || ''}
+        selectedVideoSource={this.deviceOptions.video.deviceId || ''}
         onAudioSourceSelect={this.onAudioSourceSelect}
@@ -157,0 +191,0 @@ onVideoSourceSelect={this.onVideoSourceSelect} />

No alert changes

Improved metrics

Total package byte prevSize

1405529

increased by0.65%

Lines of code

1089

increased by3.03%

No dependency changes