@lls/lls-audio 0.0.3

package/player/styles/sliderDefaultClassNames.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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 _noImportant = require('aphrodite/no-important');
+
+var _utils = require('../utils');
+
+var defaultClassName = {
+  component: 'InputRange',
+  labelContainer: 'InputRange-labelContainer',
+  labelMax: 'InputRange-label InputRange-label--max',
+  labelMin: 'InputRange-label InputRange-label--min',
+  labelValue: 'InputRange-label InputRange-label--value',
+  slider: 'InputRange-slider',
+  sliderContainer: 'InputRange-sliderContainer',
+  trackActive: 'InputRange-track InputRange-track--active',
+  trackContainer: 'InputRange-track InputRange-track--container'
+};
+
+var inputRangeSlider = {
+  appearance: 'none',
+  background: '#3f51b5',
+  border: '1px solid #3f51b5',
+  borderRadius: '100%',
+  cursor: 'pointer',
+  display: 'block',
+  height: '1rem',
+  marginLeft: '-0.5rem',
+  marginTop: '-0.65rem',
+  outline: 'none',
+  position: 'absolute',
+  top: '50%',
+  width: '1rem',
+  ':active': {
+    transform: 'scale(1.3)'
+  },
+  ':focus': {
+    boxShadow: '0 0 0 5px rgba(63, 81, 181, 0.2)'
+  }
+};
+
+var inputRangeSliderContainer = {};
+
+var inputRangeLabel = {
+  color: '#aaaaaa',
+  fontFamily: ['Helvetica Neue', 'sans-serif'],
+  fontSize: '0.8rem',
+  whiteSpace: 'nowrap'
+};
+
+var inputRangeLabelMin = {
+  bottom: '-1.4rem',
+  position: 'absolute',
+  left: 0
+};
+
+var inputRangeLabelMax = {
+  bottom: '-1.4rem',
+  position: 'absolute',
+  right: 0,
+  inputRangeLabelContainer: {
+    left: '50%'
+  }
+};
+
+var inputRangeLabelValue = {
+  position: 'absolute',
+  top: '-1.8rem'
+};
+
+var inputRangeLabelContainer = {
+  left: '-50%',
+  position: 'relative'
+};
+
+var inputRangeTrack = {
+  background: '#eeeeee',
+  borderRadius: '0.3rem',
+  cursor: 'pointer',
+  display: 'block',
+  height: '0.3rem',
+  position: 'relative'
+};
+
+var inputRangeTrackContainer = {
+  left: 0,
+  marginTop: '-0.15rem',
+  position: 'absolute',
+  right: 0,
+  top: '50%'
+};
+
+var inputRangeTrackActive = {
+  background: '#3f51b5'
+};
+
+var inputRange = {
+  height: '1rem',
+  position: 'relative',
+  width: '100%'
+};
+
+var styles = _noImportant.StyleSheet.create({
+  component: inputRange,
+  labelContainer: inputRangeLabelContainer,
+  labelMax: _extends({}, inputRangeLabel, inputRangeLabelMax),
+  labelMin: _extends({}, inputRangeLabel, inputRangeLabelMin),
+  trackContainer: _extends({}, inputRangeTrack, inputRangeTrackContainer),
+  labelValue: _extends({}, inputRangeLabel, inputRangeLabelValue),
+  slider: inputRangeSlider,
+  trackActive: _extends({}, inputRangeTrack, inputRangeTrackActive),
+  sliderContainer: inputRangeSliderContainer
+});
+
+exports.default = (0, _utils.concatStyle)(defaultClassName, styles);

package/player/styles/styles.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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 styleDisplayInlineBlock = {
+  display: 'inline-block',
+  verticalAlign: 'top'
+};
+
+exports.default = {
+  volume: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    width: 200,
+    height: '300%',
+    padding: '32px 30px 0px 30px',
+    boxSizing: 'border-box'
+  },
+  player: {
+    position: 'fixed',
+    boxShadow: '0px 5px 10px 5px rgba(0, 0, 0, 0.2)',
+    backgroundColor: '#fff',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 75,
+    zIndex: 99999,
+    width: '100%'
+  },
+  play_and_stop: _extends({}, styleDisplayInlineBlock, {
+    height: '100%',
+    width: 75,
+    borderRight: '1px solid #e5e5e5',
+    color: '#6d6d6d',
+    paddingTop: 28,
+    textAlign: 'center',
+    boxSizing: 'border-box'
+  }),
+  timeline: {
+    display: 'inline-block',
+    width: 'calc(100% - 438px)',
+    borderRight: '1px solid #e5e5e5',
+    height: '100%',
+    padding: '12px 30px 0px 30px',
+    position: 'relative'
+  },
+  repeat_menu: _extends({}, styleDisplayInlineBlock, {
+    height: '100%',
+    padding: '25px 13px',
+    borderRight: '1px solid #e5e5e5'
+  }),
+  speed_menu: _extends({}, styleDisplayInlineBlock, {
+    height: '100%',
+    width: 50,
+    borderRight: '1px solid #e5e5e5',
+    overflow: 'hidden',
+    ':hover': {
+      overflow: 'visible'
+    }
+  })
+};

package/player/styles/timelineClassNames.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _sliderDefaultClassNames = require('./sliderDefaultClassNames');
+
+var _sliderDefaultClassNames2 = _interopRequireDefault(_sliderDefaultClassNames);
+
+var _noImportant = require('aphrodite/no-important');
+
+var _utils = require('../utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var playerAnimation = {
+  '0%': { height: 0 },
+  '100%': { height: 50 }
+};
+
+var styles = exports.styles = _noImportant.StyleSheet.create({
+  labelContainer: {
+    top: -60,
+    fontSize: 11
+  },
+  labelMin: {
+    display: 'none'
+  },
+  labelMax: {
+    display: 'none'
+  },
+  range: {
+    marginTop: -2,
+    position: 'absolute',
+    width: 'calc(100% - 60px)'
+  },
+  player_anim: {
+    animationName: playerAnimation,
+    animationDuration: '1s'
+  },
+  label: {
+    top: 13
+  },
+  slider: {
+    background: '#e51400',
+    width: 2,
+    borderRadius: 0,
+    height: 53,
+    top: -70,
+    border: 'none',
+    margin: 0,
+    ':active': { transform: 'scale(1.1)' }
+  },
+  trackActive: {
+    backgroundColor: 'transparent'
+  },
+  sliderContainer: {}
+});
+
+exports.default = (0, _utils.concatStyle)(_sliderDefaultClassNames2.default, styles);

package/player/styles/volumeClassNames.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _noImportant = require('aphrodite/no-important');
+
+var _sliderDefaultClassNames = require('./sliderDefaultClassNames');
+
+var _sliderDefaultClassNames2 = _interopRequireDefault(_sliderDefaultClassNames);
+
+var _utils = require('../utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = _noImportant.StyleSheet.create({
+  slider: {
+    marginTop: -9,
+    width: 12,
+    height: 12,
+    transition: 'none',
+    backgroundColor: '#a20025',
+    borderColor: '#a20025',
+    ':active': { transform: 'scale(1.1)' }
+  },
+  trackActive: {
+    height: 3,
+    transition: 'none',
+    backgroundColor: '#a20025'
+  },
+  trackActiveContainer: {
+    height: 3,
+    transition: 'none'
+  },
+  trackContainer: {
+    height: 3
+  },
+  sliderContainer: {
+    transition: 'none'
+  }
+});
+
+exports.default = (0, _utils.concatStyle)(_sliderDefaultClassNames2.default, styles);

package/player/utils.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+		value: true
+});
+exports.autoBind = exports.debounce = exports.timeConvert = exports.concatStyle = 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 _noImportant = require('aphrodite/no-important');
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var concatStyle = exports.concatStyle = function concatStyle(initial) {
+		for (var _len = arguments.length, other = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+				other[_key - 1] = arguments[_key];
+		}
+
+		return Object.keys(initial).reduce(function (memo, key) {
+				return _extends({}, memo, _defineProperty({}, key, initial[key] + ' ' + other.map(function (i) {
+						return (0, _noImportant.css)(i[key]);
+				}).join(' ')));
+		}, {});
+};
+
+var timeConvert = exports.timeConvert = function timeConvert(time) {
+		var totalSec = Math.round(time);
+		var minutes = parseInt(totalSec / 60, 10) % 60;
+		var seconds = totalSec % 60;
+		return (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
+};
+
+var debounce = exports.debounce = function debounce(func, wait, immediate) {
+		var timeout = void 0;
+		return function () {
+				var context = this,
+				    args = arguments;
+				var later = function later() {
+						timeout = null;
+						if (!immediate) func.apply(context, args);
+				};
+				var callNow = immediate && !timeout;
+				clearTimeout(timeout);
+				timeout = setTimeout(later, wait);
+				if (callNow) func.apply(context, args);
+		};
+};
+
+var autoBind = exports.autoBind = function autoBind(methodNames, instance) {
+		methodNames.forEach(function (methodName) {
+				instance[methodName] = instance[methodName].bind(instance);
+		});
+};

package/recorder/AsyncLoader.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+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"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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 loadedScripts = [];
+
+var getCssEl = function getCssEl(_ref) {
+  var href = _ref.href;
+
+  var link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.type = 'text/css';
+  link.href = href;
+  link.media = 'all';
+  return link;
+};
+
+var getScriptEl = function getScriptEl(_ref2) {
+  var src = _ref2.src,
+      onload = _ref2.onload,
+      onError = _ref2.onError;
+
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = src;
+  script.async = false;
+  script.onload = onload;
+  script.onerror = onError;
+  return script;
+};
+
+var AsyncLoader = function (_Component) {
+  _inherits(AsyncLoader, _Component);
+
+  function AsyncLoader() {
+    _classCallCheck(this, AsyncLoader);
+
+    return _possibleConstructorReturn(this, (AsyncLoader.__proto__ || Object.getPrototypeOf(AsyncLoader)).apply(this, arguments));
+  }
+
+  _createClass(AsyncLoader, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _props = this.props,
+          src = _props.src,
+          href = _props.href,
+          _props$onLoad = _props.onLoad,
+          onLoad = _props$onLoad === undefined ? function () {} : _props$onLoad,
+          _props$onError = _props.onError,
+          onError = _props$onError === undefined ? function () {} : _props$onError;
+
+      if (src && !loadedScripts.includes(href || src)) {
+        var el = href ? getCssEl({ href: href }) : getScriptEl({ src: src, onLoad: onLoad, onError: onError });
+        document.body.appendChild(el);
+        loadedScripts.push(href || src);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('noscript', null);
+    }
+  }]);
+
+  return AsyncLoader;
+}(_react.Component);
+
+exports.default = AsyncLoader;

package/recorder/DesktopAudioRecorder.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Wave = require('../player/Wave');
+
+var _Wave2 = _interopRequireDefault(_Wave);
+
+var _audioContext = require('../utils/audioContext');
+
+var _audioContext2 = _interopRequireDefault(_audioContext);
+
+var _audio = require('../utils/audio');
+
+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"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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 audioContext = new _audioContext2.default();
+
+var DesktopAudioRecorder = function (_Component) {
+  _inherits(DesktopAudioRecorder, _Component);
+
+  function DesktopAudioRecorder(props) {
+    _classCallCheck(this, DesktopAudioRecorder);
+
+    var _this = _possibleConstructorReturn(this, (DesktopAudioRecorder.__proto__ || Object.getPrototypeOf(DesktopAudioRecorder)).call(this, props));
+
+    _this.state = {
+      isRecording: false,
+      recordedData: null,
+      waveform: null
+    };
+    //this.audioRecorder = null
+    _this.buffers = [];
+    return _this;
+  }
+
+  _createClass(DesktopAudioRecorder, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      window.navigator.getUserMedia({
+        "audio": {
+          "mandatory": {
+            "googEchoCancellation": "false",
+            "googAutoGainControl": "false",
+            "googNoiseSuppression": "false",
+            "googHighpassFilter": "false"
+          },
+          "optional": []
+        }
+      }, function (stream) {
+        return _this2.onMediaSuccess(stream);
+      }, function (stream) {
+        return _this2.onMediaError(stream);
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this3 = this;
+
+      var _state = this.state,
+          isRecording = _state.isRecording,
+          waveform = _state.waveform;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        'Desktop audio recorder',
+        isRecording ? _react2.default.createElement(
+          'button',
+          { onClick: function onClick() {
+              return _this3.stopRecording();
+            } },
+          ' stop recording '
+        ) : _react2.default.createElement(
+          'button',
+          { onClick: function onClick() {
+              return _this3.record();
+            } },
+          ' record '
+        ),
+        waveform ? _react2.default.createElement(_Wave2.default, {
+          width: 500,
+          currentTime: 0,
+          totalTime: 200,
+          height: 40,
+          isLoading: false,
+          waveform: waveform
+        }) : null
+      );
+    }
+  }, {
+    key: 'record',
+    value: function record() {
+      this.setState({
+        isRecording: true
+      });
+    }
+  }, {
+    key: 'onMediaSuccess',
+    value: function onMediaSuccess(stream) {
+      var _this4 = this;
+
+      var bufferSize = 4096;
+      var numberOfInputChannels = 2;
+      var numberOfOutputChannels = 2;
+
+      // creates an audio node from the microphone incoming stream
+      var mediaStream = audioContext.createMediaStreamSource(stream);
+      // https://developer.mozilla.org/en-US/docs/Web/API/AudioaudioContext/createScriptProcessor
+      var recorder = audioContext.createScriptProcessor ? audioContext.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels) : audioContext.createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+
+      recorder.onaudioprocess = function (e) {
+        var _state2 = _this4.state,
+            recordedData = _state2.recordedData,
+            isRecording = _state2.isRecording;
+
+        if (!isRecording) return;
+        var audioBuffer = (0, _audio.appendBuffer)(recordedData, e.inputBuffer);
+        var waveform = (0, _audio.convertAudioBufferToWaveform)(audioBuffer);
+
+        _this4.setState({
+          recordedData: audioBuffer,
+          waveform: waveform
+        });
+      };
+
+      // we connect the recorder with the input stream
+      mediaStream.connect(recorder);
+      recorder.connect(audioContext.destination);
+    }
+  }, {
+    key: 'onMediaError',
+    value: function onMediaError(e) {
+      console.error('media error', e);
+    }
+  }, {
+    key: 'stopRecording',
+    value: function stopRecording() {
+      this.setState({
+        isRecording: false
+      });
+    }
+  }]);
+
+  return DesktopAudioRecorder;
+}(_react.Component);
+
+exports.default = DesktopAudioRecorder;