@lls/lls-audio 0.0.3

package/common/waveform.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/* This is a custom (temporary version) of http://waveformjs.org/
+* because these idiots dont do npms packages.
+* I also removed the soundcloud stuff that was useless
+*/
+function Waveform(options) {
+  this.container = options.container;
+  this.canvas = options.canvas;
+  this.data = options.data || [];
+  this.outerColor = options.outerColor || "transparent";
+  this.innerColor = options.innerColor || "#000000";
+  this.interpolate = true;
+  if (options.interpolate === false) {
+    this.interpolate = false;
+  }
+  if (this.canvas == null) {
+    if (this.container) {
+      this.canvas = this.createCanvas(this.container, options.width || this.container.clientWidth, options.height || this.container.clientHeight);
+    } else {
+      throw "Either canvas or container option must be passed";
+    }
+  }
+  this.patchCanvasForIE(this.canvas);
+  this.context = this.canvas.getContext("2d");
+  this.width = parseInt(this.context.canvas.width, 10);
+  this.height = parseInt(this.context.canvas.height, 10);
+  if (options.data) {
+    this.update(options);
+  }
+}
+
+Waveform.prototype.setData = function (data) {
+  return this.data = data;
+};
+
+Waveform.prototype.setDataInterpolated = function (data) {
+  return this.setData(this.interpolateArray(data, this.width));
+};
+
+Waveform.prototype.setDataCropped = function (data) {
+  return this.setData(this.expandArray(data, this.width));
+};
+
+Waveform.prototype.update = function (options) {
+  if (options.interpolate != null) {
+    this.interpolate = options.interpolate;
+  }
+  if (this.interpolate === false) {
+    this.setDataCropped(options.data);
+  } else {
+    this.setDataInterpolated(options.data);
+  }
+  return this.redraw();
+};
+
+Waveform.prototype.redraw = function () {
+  var d, i, middle, t, _i, _len, _ref, _results;
+  this.clear();
+  if (typeof this.innerColor === "function") {
+    this.context.fillStyle = this.innerColor();
+  } else {
+    this.context.fillStyle = this.innerColor;
+  }
+  middle = this.height / 2;
+  i = 0;
+  _ref = this.data;
+  _results = [];
+  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+    d = _ref[_i];
+    t = this.width / this.data.length;
+    if (typeof this.innerColor === "function") {
+      this.context.fillStyle = this.innerColor(i / this.width, d);
+    }
+    this.context.clearRect(t * i, middle - middle * d, t, middle * d * 2);
+    this.context.fillRect(t * i, middle - middle * d, t, middle * d * 2);
+    _results.push(i++);
+  }
+  return _results;
+};
+
+Waveform.prototype.clear = function () {
+  this.context.fillStyle = this.outerColor;
+  this.context.clearRect(0, 0, this.width, this.height);
+  return this.context.fillRect(0, 0, this.width, this.height);
+};
+
+Waveform.prototype.patchCanvasForIE = function (canvas) {
+  var oldGetContext;
+  if (typeof window.G_vmlCanvasManager !== "undefined") {
+    canvas = window.G_vmlCanvasManager.initElement(canvas);
+    oldGetContext = canvas.getContext;
+    return canvas.getContext = function (a) {
+      var ctx;
+      ctx = oldGetContext.apply(canvas, arguments);
+      canvas.getContext = oldGetContext;
+      return ctx;
+    };
+  }
+};
+
+Waveform.prototype.createCanvas = function (container, width, height) {
+  var canvas;
+  canvas = document.createElement("canvas");
+  container.appendChild(canvas);
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+};
+
+Waveform.prototype.expandArray = function (data, limit, defaultValue) {
+  var i, newData, _i, _ref;
+  if (defaultValue == null) {
+    defaultValue = 0.0;
+  }
+  newData = [];
+  if (data.length > limit) {
+    newData = data.slice(data.length - limit, data.length);
+  } else {
+    for (i = _i = 0, _ref = limit - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
+      newData[i] = data[i] || defaultValue;
+    }
+  }
+  return newData;
+};
+
+Waveform.prototype.linearInterpolate = function (before, after, atPoint) {
+  return before + (after - before) * atPoint;
+};
+
+Waveform.prototype.interpolateArray = function (data, fitCount) {
+  var after, atPoint, before, i, newData, springFactor, tmp;
+  newData = new Array();
+  springFactor = new Number((data.length - 1) / (fitCount - 1));
+  newData[0] = data[0];
+  i = 1;
+  while (i < fitCount - 1) {
+    tmp = i * springFactor;
+    before = new Number(Math.floor(tmp)).toFixed();
+    after = new Number(Math.ceil(tmp)).toFixed();
+    atPoint = tmp - before;
+    newData[i] = this.linearInterpolate(data[before], data[after], atPoint);
+    i++;
+  }
+  newData[fitCount - 1] = data[data.length - 1];
+  return newData;
+};
+
+Waveform.prototype.optionsForSyncedStream = function (options) {
+  var innerColorWasSet, that;
+  if (options == null) {
+    options = {};
+  }
+  innerColorWasSet = false;
+  that = this;
+  return {
+    whileplaying: this.redraw,
+    whileloading: function whileloading() {
+      var stream;
+      if (!innerColorWasSet) {
+        stream = this;
+        that.innerColor = function (x, y) {
+          if (x < stream.position / stream.durationEstimate) {
+            return options.playedColor || "rgba(255,  102, 0, 0.8)";
+          } else if (x < stream.bytesLoaded / stream.bytesTotal) {
+            return options.loadedColor || "rgba(0, 0, 0, 0.8)";
+          } else {
+            return options.defaultColor || "rgba(0, 0, 0, 0.4)";
+          }
+        };
+        innerColorWasSet = true;
+      }
+      return this.redraw;
+    }
+  };
+};
+
+exports.default = Waveform;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@lls/lls-audio",
+  "version": "0.0.3",
+  "main": "index.js",
+  "devDependencies": {
+    "@kadira/storybook": "^2.21.0",
+    "css-loader": "^0.26.1",
+    "style-loader": "^0.13.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babel-cli": "^6.9.0",
+    "superheroes": "^1.0.0",
+    "conventional-changelog": "^1.1.0",
+    "conventional-changelog-cli": "^1.2.0",
+    "@kadira/storybook-deployer": "^1.0.0",
+    "release-it": "^2.4.0"
+  },
+  "dependencies": {
+    "aphrodite": "^1.1.0",
+    "is_js": "^0.9.0",
+    "material-ui": "^0.16.5",
+    "merge-audio-buffers": "^1.0.0",
+    "msr": "^1.3.4",
+    "react-input-range": "^0.9.3",
+    "waveform-data": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "15.3.1",
+    "react-dom": "15.3.1"
+  },
+  "engines": {
+    "node": ">=0.12.0"
+  },
+  "repository": {
+    "url": "github.com/lelivrescolaire/lls-ui"
+  },
+  "scripts": {
+    "start": "npm run storybook",
+    "storybook": "start-storybook -p 9009 -s public",
+    "deploy-storybook": "storybook-to-ghpages",
+    "build": "rm -rf dist && mkdir dist && babel -d dist src",
+    "copy:package": "cp -R package.json dist/",
+    "copy:readme": "cp -R README.md dist/",
+    "npm:publish": "npm run build && npm run release && npm run copy:readme && npm run copy:package && cd dist && npm publish && cd .. && npm run deploy-storybook",
+    "release": "npm run changelog && npm run rilize -- --non-interactive",
+    "rilize": "$(npm bin)/release-it --github.releaseName=\"%s (`$(npm bin)/superheroes`)\"",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
+  }
+}

package/player/Audio.js

@@ -0,0 +1,192 @@
+'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 _utils = require('./utils');
+
+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 Player = function (_Component) {
+  _inherits(Player, _Component);
+
+  function Player(props) {
+    _classCallCheck(this, Player);
+
+    var _this = _possibleConstructorReturn(this, (Player.__proto__ || Object.getPrototypeOf(Player)).call(this, props));
+
+    _this.play = function () {
+      return _this.refs.player.play();
+    };
+
+    _this.pause = function () {
+      return _this.refs.player.pause();
+    };
+
+    _this.setLoop = function () {
+      var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      return _this.setStateWithCallback({ loop: loop });
+    };
+
+    _this.setRange = function (currentRange) {
+      return _this.setStateWithCallback({ currentRange: currentRange }, _this.onAudioUpdate);
+    };
+
+    _this.setSpeed = function () {
+      var speed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+      _this.refs.player.playbackRate = speed;
+      _this.setStateWithCallback({ speed: speed });
+    };
+
+    _this.setCurrentTime = function () {
+      var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      return _this.refs.player.currentTime = time;
+    };
+
+    _this.onAudioUpdate = function () {
+      return _this.setStateWithCallback({ currentTime: _this.getCurrentTime() });
+    };
+
+    _this.onPlay = function () {
+      return _this.setStateWithCallback({ play: true });
+    };
+
+    _this.onPause = function () {
+      return _this.setStateWithCallback({ play: false });
+    };
+
+    _this.onEnded = function () {
+      var _this$state = _this.state,
+          loop = _this$state.loop,
+          startTime = _this$state.currentRange.startTime;
+
+      _this.setCurrentTime(startTime);
+      if (loop) _this.play();
+    };
+
+    _this.state = {
+      play: false,
+      currentTime: 0,
+      volume: 100,
+      currentRange: false,
+      loop: false,
+      speed: 1,
+      duration: 0
+    };
+
+    (0, _utils.autoBind)(['onEnded', 'onDurationChange', 'onAudioUpdate', 'onPlay', 'onPause'], _this);
+
+    // Execute callback onChange props
+    _this.setStateWithCallback = function (state) {
+      var cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      return _this.setState(state, function () {
+        _this.props.onChange(state);
+        cb ? cb() : false;
+      });
+    };
+    return _this;
+  }
+
+  _createClass(Player, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          _props$autoPlay = _props.autoPlay,
+          autoPlay = _props$autoPlay === undefined ? false : _props$autoPlay,
+          _props$src = _props.src,
+          src = _props$src === undefined ? '' : _props$src,
+          _props$loop = _props.loop,
+          loop = _props$loop === undefined ? false : _props$loop,
+          _props$preload = _props.preload,
+          preload = _props$preload === undefined ? 'auto' : _props$preload;
+
+      return _react2.default.createElement('audio', { ref: 'player', autoPlay: autoPlay, src: src, loop: loop, preload: preload });
+    }
+
+    // Controls
+
+  }, {
+    key: 'setVolume',
+    value: function setVolume() {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
+
+      var volume = Math.min(value, 100);
+      this.refs.player.volume = volume / 100;
+      this.setStateWithCallback({ volume: volume });
+    }
+
+    // HTML5 events
+
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.props.onChange(this.state);
+
+      var player = this.refs.player;
+
+      player.addEventListener('ended', this.onEnded);
+      player.addEventListener('durationchange', this.onDurationChange);
+      player.addEventListener('timeupdate', this.onAudioUpdate);
+      player.addEventListener('play', this.onPlay);
+      player.addEventListener('pause', this.onPause);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      var player = this.refs.player;
+
+      player.removeEventListener('ended', this.onEnded);
+      player.removeEventListener('durationchange', this.onDurationChange);
+      player.removeEventListener('timeupdate', this.onAudioUpdate);
+      player.removeEventListener('play', this.onPlay);
+      player.removeEventListener('pause', this.onPause);
+    }
+  }, {
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      var currentTime = this.refs.player.currentTime;
+      var _state = this.state,
+          _state$currentRange = _state.currentRange,
+          startTime = _state$currentRange.startTime,
+          endTime = _state$currentRange.endTime,
+          loop = _state.loop;
+      // check if current time is in the middle of current range
+
+      if (currentTime > endTime || currentTime < startTime) {
+        this.setCurrentTime(startTime);
+        if (!loop) this.pause();
+        return startTime;
+      }
+      return currentTime;
+    }
+  }, {
+    key: 'onDurationChange',
+    value: function onDurationChange() {
+      var duration = this.refs.player.duration;
+
+      this.setStateWithCallback({
+        currentTime: 0,
+        duration: duration,
+        currentRange: { startTime: 0, endTime: duration }
+      });
+    }
+  }]);
+
+  return Player;
+}(_react.Component);
+
+exports.default = Player;

package/player/CustomPlayer.js

@@ -0,0 +1,218 @@
+'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 _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 _CustomWave = require('../player/CustomWave');
+
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
+
+var _audio = require('../utils/audio');
+
+var _FontIcon = require('material-ui/FontIcon');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _noImportant = require('aphrodite/no-important');
+
+var _reactInputRange = require('react-input-range');
+
+var _reactInputRange2 = _interopRequireDefault(_reactInputRange);
+
+var _utils = require('./utils');
+
+var _volumeClassNames = require('./styles/volumeClassNames');
+
+var _volumeClassNames2 = _interopRequireDefault(_volumeClassNames);
+
+var _timelineClassNames = require('./styles/timelineClassNames');
+
+var _timelineClassNames2 = _interopRequireDefault(_timelineClassNames);
+
+var _fallbackTimelineClassNames = require('./styles/fallbackTimelineClassNames');
+
+var _fallbackTimelineClassNames2 = _interopRequireDefault(_fallbackTimelineClassNames);
+
+var _styles = require('./styles/styles');
+
+var _styles2 = _interopRequireDefault(_styles);
+
+var _Audio = require('./Audio');
+
+var _Audio2 = _interopRequireDefault(_Audio);
+
+var _Speed = require('./Speed');
+
+var _Speed2 = _interopRequireDefault(_Speed);
+
+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 styles = _noImportant.StyleSheet.create(_styles2.default);
+
+var Player = function (_Component) {
+  _inherits(Player, _Component);
+
+  function Player() {
+    _classCallCheck(this, Player);
+
+    var _this = _possibleConstructorReturn(this, (Player.__proto__ || Object.getPrototypeOf(Player)).call(this));
+
+    _this.state = { waveform: false, loading: true, containerWidth: 0 };
+    _this.setContainerWidth = (0, _utils.debounce)(_this.setContainerWidth.bind(_this), 500);
+    _this.onKeyPress = _this.onKeyPress.bind(_this);
+    return _this;
+  }
+
+  _createClass(Player, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      this.initialize(this.props);
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setTimeout(function () {
+        return _this2.setContainerWidth();
+      }, 0);
+      window.addEventListener('resize', this.setContainerWidth);
+      document.addEventListener('keydown', this.onKeyPress, false);
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(newProps) {
+      if (newProps.url !== this.props.url) {
+        this.initialize(newProps);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.setContainerWidth);
+      document.removeEventListener('keydown', this.onKeyPress, false);
+    }
+  }, {
+    key: 'setContainerWidth',
+    value: function setContainerWidth() {
+      var container = this.refs.container;
+
+      var containerWidth = container.offsetWidth - 60;
+      this.setState({ containerWidth: containerWidth });
+    }
+  }, {
+    key: 'onKeyPress',
+    value: function onKeyPress(e) {
+      var key = e.keyCode || e.which;
+      if (key === 32) this.state.play ? this.refs.audio.pause() : this.refs.audio.play();
+    }
+  }, {
+    key: 'initialize',
+    value: function initialize(props) {
+      var _this3 = this;
+
+      var url = props.url;
+
+      (0, _audio.getWaveform)(url).then(function (waveform) {
+        _this3.setState({ waveform: waveform, loading: false });
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this4 = this;
+
+      var url = this.props.url;
+      var _state = this.state,
+          loading = _state.loading,
+          duration = _state.duration,
+          waveform = _state.waveform,
+          play = _state.play,
+          currentTime = _state.currentTime,
+          containerWidth = _state.containerWidth,
+          speed = _state.speed,
+          _state$currentRange = _state.currentRange,
+          currentRange = _state$currentRange === undefined ? {} : _state$currentRange;
+      var _currentRange$startTi = currentRange.startTime,
+          startTime = _currentRange$startTi === undefined ? 0 : _currentRange$startTi,
+          _currentRange$endTime = currentRange.endTime,
+          endTime = _currentRange$endTime === undefined ? 0 : _currentRange$endTime;
+
+      return _react2.default.createElement(
+        'div',
+        { className: (0, _noImportant.css)(styles.player) },
+        _react2.default.createElement(
+          'div',
+          { className: (0, _noImportant.css)(styles.play_and_stop), onClick: function onClick() {
+              return play ? _this4.refs.audio.pause() : _this4.refs.audio.play();
+            } },
+          _react2.default.createElement(
+            _FontIcon2.default,
+            { className: 'material-icons' },
+            play ? 'pause' : 'play_arrow'
+          )
+        ),
+        _react2.default.createElement(_Audio2.default, { onChange: function onChange(state) {
+            return _this4.setState(_extends({}, state));
+          }, ref: 'audio', src: url }),
+        _react2.default.createElement(
+          'div',
+          { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },
+          _react2.default.createElement(_CustomWave2.default, { currentTime: currentTime, width: containerWidth, height: 50, range: { startTime: startTime, endTime: endTime }, isLoading: loading, waveform: waveform }),
+          _react2.default.createElement(_reactInputRange2.default, { classNames: _fallbackTimelineClassNames2.default, formatLabel: _utils.timeConvert, maxValue: duration || 1, minValue: 0, onChange: function onChange(c, _ref) {
+              var min = _ref.min,
+                  max = _ref.max;
+              return _this4.refs.audio.setRange({ startTime: min, endTime: max });
+            }, value: { min: startTime, max: endTime } }),
+          _react2.default.createElement(_reactInputRange2.default, { classNames: _timelineClassNames2.default, formatLabel: _utils.timeConvert, maxValue: duration || 1, minValue: 0, value: this.state.currentTime, onChange: function onChange(c, v) {
+              return _this4.refs.audio.setCurrentTime(v);
+            } })
+        ),
+        _react2.default.createElement(
+          'div',
+          { onClick: function onClick() {
+              return _this4.refs.audio.setLoop(!_this4.state.loop);
+            }, className: 'Repeat_menu ' + (0, _noImportant.css)(styles.repeat_menu) },
+          _react2.default.createElement(
+            _FontIcon2.default,
+            { style: { color: this.state.loop ? '#a20025' : '' }, className: 'material-icons' },
+            'loop'
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'Speed_menu ' + (0, _noImportant.css)(styles.speed_menu) },
+          _react2.default.createElement(_Speed2.default, { speed: speed, onSpeedChange: function onSpeedChange(speed) {
+              return _this4.refs.audio.setSpeed(speed);
+            } })
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'Volume ' + (0, _noImportant.css)(styles.volume) },
+          _react2.default.createElement(_reactInputRange2.default, { classNames: _volumeClassNames2.default, maxValue: 100, minValue: 0, value: this.state.volume, onChange: function onChange(c, v) {
+              return _this4.refs.audio.setVolume(v);
+            } })
+        )
+      );
+    }
+  }]);
+
+  return Player;
+}(_react.Component);
+
+exports.default = Player;