Make sure the correct device id is forwarded to constraints

hamsterbacke23 · hamsterbacke23 · commit 1aa821f31853 · 2017-05-08T23:06:12.000+02:00
diff --git a/app/components/Stopwatch/index.js b/app/components/Stopwatch/index.js
@@ -8,7 +8,7 @@ import React from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import ReactFitText from 'react-fittext';
+import { Textfit } from 'react-textfit';
 
 import messages from './messages';
 
@@ -19,14 +19,16 @@ const formattedSeconds = (sec) => {
   return `${Math.floor(sec / 60)}:${secDisplay.slice(-2)}`;
 };
 
+
 function Stopwatch(props) {
+
   return (
     <CenteredSection>
-      <ReactFitText compressor={0.5}>
-        <div>
-          <TimeDisplay>{formattedSeconds(props.intervalsElapsed)}</TimeDisplay>
-        </div>
-      </ReactFitText>
+      <TimeDisplay>
+        <Textfit mode="single">
+          {formattedSeconds(props.intervalsElapsed)}
+        </Textfit>
+      </TimeDisplay>
 
       <ControlGroup>
         {(props.intervalsElapsed !== 0
diff --git a/app/components/Stopwatch/stopwatchStyles.js b/app/components/Stopwatch/stopwatchStyles.js
@@ -7,7 +7,7 @@ export const CenteredSection = styled.div`
 `;
 
 export const TimeDisplay = styled.h1`
-  padding: 0;
+  padding: 0 20px;
   margin: 0;
   color: #fff;
 `;
diff --git a/app/containers/Timer/index.js b/app/containers/Timer/index.js
@@ -14,7 +14,7 @@ import { resetTimer, startTimer, stopTimer, addLap } from './actions';
 
 import { makeSelectIntervalsElapsed } from './selectors';
 
-class Timer extends React.PureComponent {
+class Timer extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
 
   render() {
     return (
diff --git a/app/containers/WebcamDisplay/index.js b/app/containers/WebcamDisplay/index.js
@@ -40,10 +40,10 @@ export class WebcamDisplay extends React.PureComponent { // eslint-disable-line
   startVideo(deviceId) {
     const constraints = {
       video: { width: 1280, height: 720 },
-      deviceId,
+      deviceId: { exact: deviceId },
     };
 
-    navigator.mediaDevices.getUserMedia(constraints)
+    navigator.mediaDevices.getUserMedia({ video: constraints })
       .then(this.startVideoCb.bind(this))
       .catch(this.setNewError.bind(this));
   }
@@ -57,7 +57,7 @@ export class WebcamDisplay extends React.PureComponent { // eslint-disable-line
   startWebcams() {
     this.state.devices.forEach((device) => {
       if (device.kind === 'videoinput') {
-        this.startVideo(device.id);
+        this.startVideo(device.deviceId);
       }
     });
   }
@@ -86,20 +86,9 @@ export class WebcamDisplay extends React.PureComponent { // eslint-disable-line
       );
     }
 
-    const timerResizeProps = {
-      top: false,
-      right: false,
-      bottom: false,
-      left: false,
-      topRight: true,
-      bottomRight: true,
-      bottomLeft: true,
-      topLeft: true,
-    }
-
     return (
       <div>
-        <DragResize initialWidth="150" initialHeight="150" x={window.innerWidth - 150} y={0} isResizable={timerResizeProps} lockAspectRatio={true}>
+        <DragResize initialWidth="150" initialHeight="150" x={window.innerWidth - 150} y={0} lockAspectRatio>
           <Timer />
         </DragResize>
 
diff --git a/package.json b/package.json
@@ -244,14 +244,14 @@
     "minimist": "1.2.0",
     "react": "15.4.1",
     "react-dom": "15.4.1",
-    "react-fittext": "^0.0.7",
     "react-helmet": "3.2.2",
     "react-intl": "2.1.5",
     "react-redux": "4.4.6",
     "react-rnd": "^4.2.2",
     "react-router": "3.0.0",
     "react-router-redux": "4.0.6",
     "react-router-scroll": "0.4.1",
+    "react-textfit": "^0.1.9",
     "redux": "3.6.0",
     "redux-immutable": "3.0.8",
     "redux-saga": "0.14.0",
diff --git a/yarn.lock b/yarn.lock
@@ -2179,18 +2179,12 @@ debug@2.2.0, debug@^2.1.1, debug@^2.2.0, debug@~2.2.0:
   dependencies:
     ms "0.7.1"
 
-debug@2.6.3:
+debug@2.6.3, debug@^2.1.3, debug@^2.6.0, debug@^2.6.1, debug@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
   dependencies:
     ms "0.7.2"
 
-debug@^2.1.3, debug@^2.6.0, debug@^2.6.1, debug@^2.6.3:
-  version "2.6.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.6.tgz#a9fa6fbe9ca43cf1e79f73b75c0189cbb7d6db5a"
-  dependencies:
-    ms "0.7.3"
-
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -4839,14 +4833,14 @@ js-tokens@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
-js-yaml@3.6.1, js-yaml@^3.5.1:
+js-yaml@3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
   dependencies:
     argparse "^1.0.7"
     esprima "^2.6.0"
 
-js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.8.2:
+js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.7.0, js-yaml@^3.8.2:
   version "3.8.4"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.4.tgz#520b4564f86573ba96662af85a8cafa7b4b5a6f6"
   dependencies:
@@ -5641,10 +5635,6 @@ ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
-ms@0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.3.tgz#708155a5e44e33f5fd0fc53e81d0d40a91be1fff"
-
 multipipe@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
@@ -6655,7 +6645,7 @@ process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
-process@^0.11.0, process@~0.11.0:
+process@^0.11.0, process@^0.11.9, process@~0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
@@ -6809,10 +6799,6 @@ react-dom@15.4.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
 
-react-fittext@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/react-fittext/-/react-fittext-0.0.7.tgz#4866d0930507152a8fc77e32619731453a9e383f"
-
 react-helmet@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-3.2.2.tgz#1fc4646cbc5d26246ab45d5a84b504ed639810e6"
@@ -6888,6 +6874,12 @@ react-side-effect@1.0.2:
   dependencies:
     fbjs "0.1.0-alpha.10"
 
+react-textfit@^0.1.9:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/react-textfit/-/react-textfit-0.1.9.tgz#0837d283bbf77b795ec2453276fddfc8ab49ea92"
+  dependencies:
+    process "^0.11.9"
+
 react-transform-catch-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
