@lls/lls-audio 0.0.64 → 0.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "2.21.0",
@@ -15,7 +15,7 @@
     "conventional-changelog": "1.1.0",
     "conventional-changelog-cli": "1.2.0",
     "css-loader": "0.26.1",
-    "file-saver": "^1.3.3",
+    "file-saver": "1.3.3",
     "react": "15.3.1",
     "react-dom": "15.3.1",
     "release-it": "2.4.0",
@@ -28,6 +28,7 @@
     "inline-worker": "1.1.0",
     "is_js": "0.9.0",
     "react-input-range": "0.9.3",
+    "react-speech-recognizer": "0.0.9",
     "waveform-data": "2.0.0"
   },
   "peerDependencies": {

package/stories/wordDetector.js

@@ -16,12 +16,6 @@ var _player2 = _interopRequireDefault(_player);
 
 var _wordDetector = require('../wordDetector');
 
-var _wordDetector2 = _interopRequireDefault(_wordDetector);
-
-var _Visualizer = require('../recorder/Visualizer');
-
-var _Visualizer2 = _interopRequireDefault(_Visualizer);
-
 var _recorder = require('../recorder');
 
 var _recorder2 = _interopRequireDefault(_recorder);
@@ -44,6 +38,12 @@ var onFailure = function onFailure(res, attempts) {
   return console.log({ res: res, attempts: attempts });
 };
 
+var CONFIG = {
+  API_URL: 'http://localhost:3004/speechtotext'
+
+  // Instanciate component with config
+};var WordDetectorComponent = (0, _wordDetector.createWordDetector)(CONFIG);
+
 var WordDetectorExample = function (_Component) {
   _inherits(WordDetectorExample, _Component);
 
@@ -55,18 +55,10 @@ var WordDetectorExample = function (_Component) {
     _this.state = {
       volume: 0
     };
-    _this.setVolume = _this.setVolume.bind(_this);
     return _this;
   }
 
   _createClass(WordDetectorExample, [{
-    key: 'setVolume',
-    value: function setVolume(volume) {
-      this.setState({
-        volume: volume
-      });
-    }
-  }, {
     key: 'render',
     value: function render() {
       var volume = this.state.volume;
@@ -79,14 +71,13 @@ var WordDetectorExample = function (_Component) {
           null,
           'Say "Hello"'
         ),
-        _react2.default.createElement(_wordDetector2.default, {
+        _react2.default.createElement(WordDetectorComponent, {
           word: 'hello',
           onVolumeChange: this.setVolume,
           onError: onError,
           onSuccess: onSuccess,
           onFailure: onFailure
-        }),
-        _react2.default.createElement(_Visualizer2.default, { volume: volume })
+        })
       );
     }
   }]);

package/wordDetector/index.js

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createWordDetector = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -22,6 +25,8 @@ var _fileSaver = require('file-saver');
 
 var _fileSaver2 = _interopRequireDefault(_fileSaver);
 
+var _reactSpeechRecognizer = require('react-speech-recognizer');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,21 +35,19 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var API_URL = 'http://localhost:3004/speechtotext';
 var SIMILARITY_THRESHOLD = 0.8;
 
 var debug = function debug(wav) {
   _fileSaver2.default.saveAs(wav, 'test.wav');
 };
 
-var sendFileToSpeechToTextApi = function sendFileToSpeechToTextApi(wav) {
+var sendFileToSpeechToTextApi = function sendFileToSpeechToTextApi(API_URL, wav) {
   return new Promise(function (resolve, reject) {
     var xhr = new XMLHttpRequest();
     xhr.open('POST', API_URL, true);
 
     xhr.onreadystatechange = function () {
       if (xhr.readyState == 4 && xhr.status == 200) {
-        console.log('Speech to text: ', xhr.responseText);
         resolve(xhr.responseText);
       }
     };
@@ -71,26 +74,46 @@ var WordDetector = function (_Component) {
     var _this = _possibleConstructorReturn(this, (WordDetector.__proto__ || Object.getPrototypeOf(WordDetector)).call(this, props));
 
     _this.state = {
-      attempts: 0
+      attempts: 0,
+      browserApiAvailable: true
     };
     _this.onError = _this.onError.bind(_this);
-    _this.onResult = _this.onResult.bind(_this);
+    _this.onNotAvailable = _this.onNotAvailable.bind(_this);
+    _this.onSuccess = _this.onSuccess.bind(_this);
+    _this.onFailure = _this.onFailure.bind(_this);
+    _this.onApiResult = _this.onApiResult.bind(_this);
     _this.onRecordComplete = _this.onRecordComplete.bind(_this);
     return _this;
   }
 
   _createClass(WordDetector, [{
-    key: 'onRecordComplete',
-    value: function onRecordComplete(wav) {
-      var _this2 = this;
+    key: 'onNotAvailable',
+    value: function onNotAvailable() {
+      this.setState({
+        browserApiAvailable: false
+      });
+    }
+  }, {
+    key: 'onSuccess',
+    value: function onSuccess(res, attempts) {
+      var _props$onSuccess = this.props.onSuccess,
+          onSuccess = _props$onSuccess === undefined ? function () {} : _props$onSuccess;
 
-      //debug(wav)
+      this.setState({
+        attempts: attempts
+      });
+      onSuccess(res, attempts);
+    }
+  }, {
+    key: 'onFailure',
+    value: function onFailure(res, attempts) {
+      var _props$onFailure = this.props.onFailure,
+          onFailure = _props$onFailure === undefined ? function () {} : _props$onFailure;
 
-      sendFileToSpeechToTextApi(wav).then(function (res) {
-        _this2.onResult(res);
-      }).catch(function (e) {
-        _this2.onError(e);
+      this.setState({
+        attempts: attempts
       });
+      onFailure(res, attempts);
     }
   }, {
     key: 'onError',
@@ -101,39 +124,64 @@ var WordDetector = function (_Component) {
       onError(e);
     }
   }, {
-    key: 'onResult',
-    value: function onResult() {
-      var res = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    key: 'onApiResult',
+    value: function onApiResult(_ref) {
+      var _ref$transcript = _ref.transcript,
+          transcript = _ref$transcript === undefined ? '' : _ref$transcript;
       var attempts = this.state.attempts;
       var _props = this.props,
           word = _props.word,
-          _props$onSuccess = _props.onSuccess,
-          onSuccess = _props$onSuccess === undefined ? function () {} : _props$onSuccess,
-          _props$onFailure = _props.onFailure,
-          onFailure = _props$onFailure === undefined ? function () {} : _props$onFailure,
           _props$compare = _props.compare,
           compare = _props$compare === undefined ? defaultCompare : _props$compare;
 
       var incrementedAttempts = attempts + 1;
-      var success = compare(word, res);
-      this.setState({
-        attempts: success ? 0 : incrementedAttempts
-      }, function () {
-        var cb = success ? onSuccess : onFailure;
-        cb(res, incrementedAttempts);
+      var success = compare(word, transcript);
+      var cb = success ? this.onSuccess : this.onFailure;
+      cb(transcript, incrementedAttempts);
+    }
+  }, {
+    key: 'onRecordComplete',
+    value: function onRecordComplete(wav) {
+      var _this2 = this;
+
+      //debug(wav)
+      var _props$config = this.props.config,
+          config = _props$config === undefined ? {} : _props$config;
+      var API_URL = config.API_URL;
+
+
+      if (!API_URL) {
+        return this.onError(new Error('Missing API_URL in CONF'));
+      }
+
+      sendFileToSpeechToTextApi(API_URL, wav).then(function (res) {
+        _this2.onApiResult(res);
+      }).catch(function (e) {
+        _this2.onError(e);
       });
     }
   }, {
     key: 'render',
     value: function render() {
-      var _props$onVolumeChange = this.props.onVolumeChange,
-          onVolumeChange = _props$onVolumeChange === undefined ? function () {} : _props$onVolumeChange;
-
-      return _react2.default.createElement(_recorder2.default, { onError: this.onError, onVolumeChange: onVolumeChange, onRecordComplete: this.onRecordComplete });
+      var _props2 = this.props,
+          _props2$config = _props2.config,
+          config = _props2$config === undefined ? {} : _props2$config,
+          word = _props2.word,
+          _props2$compare = _props2.compare,
+          compare = _props2$compare === undefined ? defaultCompare : _props2$compare;
+      var API_URL = config.API_URL;
+      var browserApiAvailable = this.state.browserApiAvailable;
+
+      return browserApiAvailable ? _react2.default.createElement(_reactSpeechRecognizer.WordDetector, { word: word, compare: compare, onNotAvailable: this.onNotAvailable, onFailure: this.onFailure, onSuccess: this.onSuccess }) : API_URL ? _react2.default.createElement(_recorder2.default, { onError: this.onError, onRecordComplete: this.onRecordComplete }) : null;
     }
   }]);
 
   return WordDetector;
 }(_react.Component);
 
-exports.default = WordDetector;
+exports.default = WordDetector;
+var createWordDetector = exports.createWordDetector = function createWordDetector(config) {
+  return function (props) {
+    return _react2.default.createElement(WordDetector, _extends({}, props, { config: config }));
+  };
+};