@lls/lls-audio 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",

package/player/CustomWave.js

@@ -97,6 +97,7 @@ var _initialiseProps = function _initialiseProps() {
 
     // Duration and step calculation
     var maxDuration = totalTime || waveform.duration;
+
     var levelStep = Math.ceil(waveform.max.length / maxWidth) * RESOLUTION;
 
     // Range positions
@@ -122,14 +123,13 @@ var _initialiseProps = function _initialiseProps() {
         highestAverage = _maxLevelChunks$reduc.highestAverage,
         averages = _maxLevelChunks$reduc.averages;
 
-    // Clear canvas and draw one bar for each level
-
+    var ratio = maxWidth / maxLevelChunks.length;
 
+    // Clear canvas and draw one bar for each level
     _this2.ctx.clearRect(0, 0, maxWidth, maxHeight);
     averages.forEach(function (average, i) {
-      var x = i * RESOLUTION;
+      var x = i * ratio;
       var h = average * (maxHeight / highestAverage);
-
       var color = x >= startX && x <= endX ? colorScheme[1] : colorScheme[0];
 
       _this2.drawLevel({

package/player/Play.js

@@ -24,7 +24,7 @@ var styles = _noImportant.StyleSheet.create({
   left: {
     'height': '100%',
     'float': 'left',
-    'background-color': 'red',
+    'background-color': '#e51400',
     'width': '36%',
     'transition': 'all 0.25s ease',
     'overflow': 'hidden'
@@ -51,7 +51,7 @@ var styles = _noImportant.StyleSheet.create({
     'height': '100%',
     'float': 'right',
     'width': '36%',
-    'background-color': 'red',
+    'background-color': '#e51400',
     'transition': 'all 0.25s ease'
   }
 

package/stories/player.js

@@ -4,6 +4,8 @@ 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);
@@ -14,8 +16,58 @@ var _player2 = _interopRequireDefault(_player);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var PlayerExample = function PlayerExample() {
-  return _react2.default.createElement(_player2.default, { url: 'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3' });
-};
+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 PlayerExample = function (_Component) {
+  _inherits(PlayerExample, _Component);
+
+  function PlayerExample(props) {
+    _classCallCheck(this, PlayerExample);
+
+    var _this = _possibleConstructorReturn(this, (PlayerExample.__proto__ || Object.getPrototypeOf(PlayerExample)).call(this, props));
+
+    _this.state = {
+      url: 'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3'
+    };
+    return _this;
+  }
+
+  _createClass(PlayerExample, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement('input', { style: { width: 'calc(100% - 20px)', padding: 10 }, onChange: function onChange(_ref) {
+            var value = _ref.target.value;
+            return _this2.setState({ url: value });
+          }, value: this.state.url }),
+        _react2.default.createElement(
+          'ul',
+          null,
+          _react2.default.createElement(
+            'li',
+            null,
+            'http://lls-media-public.s3-eu-west-1.amazonaws.com/anglais-6e/meet-the-campbells/new-friends/start..mp3'
+          ),
+          _react2.default.createElement(
+            'li',
+            null,
+            'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3'
+          )
+        ),
+        _react2.default.createElement(_player2.default, { url: this.state.url })
+      );
+    }
+  }]);
+
+  return PlayerExample;
+}(_react.Component);
 
 exports.default = PlayerExample;