@lls/lls-audio 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -14,7 +14,9 @@
     "conventional-changelog": "^1.1.0",
     "conventional-changelog-cli": "^1.2.0",
     "@kadira/storybook-deployer": "^1.0.0",
-    "release-it": "^2.4.0"
+    "release-it": "^2.4.0",
+    "react": "15.3.1",
+    "react-dom": "15.3.1"
   },
   "dependencies": {
     "aphrodite": "^1.1.0",

package/player/index.js

@@ -12,9 +12,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _Wave = require('../player/Wave');
+var _CustomWave = require('../player/CustomWave');
 
-var _Wave2 = _interopRequireDefault(_Wave);
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
 
 var _audio = require('../utils/audio');
 
@@ -173,7 +173,7 @@ var Player = function (_Component) {
         _react2.default.createElement(
           'div',
           { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },
-          _react2.default.createElement(_Wave2.default, { currentTime: currentTime, width: containerWidth, height: 50, range: { startTime: startTime, endTime: endTime }, isLoading: loading, waveform: waveform }),
+          _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;

package/recorder/DesktopAudioRecorder.js

@@ -10,9 +10,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _Wave = require('../player/Wave');
+var _CustomWave = require('../player/CustomWave');
 
-var _Wave2 = _interopRequireDefault(_Wave);
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
 
 var _audioContext = require('../utils/audioContext');
 
@@ -95,7 +95,7 @@ var DesktopAudioRecorder = function (_Component) {
             } },
           ' record '
         ),
-        waveform ? _react2.default.createElement(_Wave2.default, {
+        waveform ? _react2.default.createElement(_CustomWave2.default, {
           width: 500,
           currentTime: 0,
           totalTime: 200,

package/stories/index.js

@@ -18,10 +18,6 @@ var _player = require('./player');
 
 var _player2 = _interopRequireDefault(_player);
 
-var _customPlayer = require('./customPlayer');
-
-var _customPlayer2 = _interopRequireDefault(_customPlayer);
-
 var _recorder = require('./recorder');
 
 var _recorder2 = _interopRequireDefault(_recorder);
@@ -31,18 +27,12 @@ require('../common/material-ui.css');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 //import PlayerCustom from './playerCustom'
-(0, _storybook.storiesOf)('Player', module).add('Soundclound waveform', function () {
+(0, _storybook.storiesOf)('Player', module).add('Custom waveform', function () {
   return _react2.default.createElement(
     _MuiThemeProvider2.default,
     { muiTheme: (0, _getMuiTheme2.default)() },
     _react2.default.createElement(_player2.default, null)
   );
-}).add('Custom waveform', function () {
-  return _react2.default.createElement(
-    _MuiThemeProvider2.default,
-    { muiTheme: (0, _getMuiTheme2.default)() },
-    _react2.default.createElement(_customPlayer2.default, null)
-  );
 });
 (0, _storybook.storiesOf)('Recorder', module).add('Normal', function () {
   return _react2.default.createElement(

package/common/waveform.js

@@ -1,181 +0,0 @@
-"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/player/CustomPlayer.js

@@ -1,218 +0,0 @@
-'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;

package/player/Wave.js

@@ -1,173 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _waveform = require('../common/waveform');
-
-var _waveform2 = _interopRequireDefault(_waveform);
-
-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; }
-
-// soundcloud waveform
-
-var RESOLUTION = 1;
-var colorScheme = ['#888', '#e51400'];
-
-var interpolateHeight = function interpolateHeight(totalHeight) {
-  var amplitude = 256;
-  return function (size) {
-    return totalHeight - (size + 128) * totalHeight / amplitude;
-  };
-};
-
-var chunks = function chunks(arr, chunkSize) {
-  return arr.map(function (e, i) {
-    return i % chunkSize === 0 ? arr.slice(i, i + chunkSize) : null;
-  }).filter(function (e) {
-    return e;
-  });
-};
-
-var Wave = function (_Component) {
-  _inherits(Wave, _Component);
-
-  function Wave(props) {
-    _classCallCheck(this, Wave);
-
-    //this.loopIsEnabled = false
-    var _this = _possibleConstructorReturn(this, (Wave.__proto__ || Object.getPrototypeOf(Wave)).call(this, props));
-
-    _initialiseProps.call(_this);
-
-    _this.ctx = null;
-    _this.soundWave = null;
-    return _this;
-  }
-
-  /*
-  drawLevels = (props) => {
-    const { height, totalTime, waveform, range, currentTime } = props
-    const { pixels_per_second } = waveform
-    const maxWidth = this.refs.canvas.width
-    const maxHeight = this.refs.canvas.height
-     // Duration and step calculation
-    const maxDuration = totalTime || waveform.duration
-    const levelStep = maxWidth / maxDuration
-     // Range positions
-    //@todo: this range stuff should not be here. Waveform should just be passed an array of colors and ranges
-    const startX = range ? range.startTime / maxDuration * maxWidth : 0
-    const endX = range ? range.endTime / maxDuration * maxWidth : maxDuration
-     // Split data into chunks per level
-    const maxLevelChunks = chunks(waveform.max, Math.floor(pixels_per_second))
-     // Calculate average for each level + highest average
-    const { highestAverage, averages } = maxLevelChunks.reduce((memo, levelData) => {
-      const average = levelData.reduce((memo, data) => memo + data, 0 ) / levelData.length
-      if(average > memo.highestAverage) {
-        memo.highestAverage = average
-      }
-      memo.averages.push(average)
-      return memo
-    }, {highestAverage: 0, averages: []})
-     // Clear canvas and draw one bar for each level
-    this.ctx.clearRect(0, 0, maxWidth, maxHeight)
-    averages.forEach((average, i) => {
-      const x = i * levelStep
-      const h = average * (maxHeight / highestAverage )
-       const color = x >= startX && x <= endX
-        ? colorScheme[1]
-        : colorScheme[0]
-       this.drawLevel({
-        x: x,
-        y: maxHeight - h,
-        w: 1,
-        h: h,
-        color: color
-      })
-    })
-  }
-   drawLevel = (level) => {
-    this.ctx.fillStyle = `${level.color}`
-    this.ctx.fillRect(level.x, level.y, level.w, level.h)
-  }*/
-
-  return Wave;
-}(_react.Component);
-
-var _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
-
-  this.componentDidMount = function () {
-    var waveform = _this2.props.waveform;
-
-    _this2.initialise(_this2.props);
-  };
-
-  this.componentWillReceiveProps = function (nextProps) {
-    _this2.initialise(nextProps);
-  };
-
-  this.initialise = function (props) {
-    var width = props.width,
-        height = props.height,
-        waveform = props.waveform,
-        totalTime = props.totalTime;
-
-    if (!waveform) return;
-    _this2.drawLevels(props);
-  };
-
-  this.drawLevels = function (props) {
-    var waveFormData = props.waveform,
-        range = props.range;
-
-    var startX = 0; //range ? range.startTime / maxDuration * maxWidth : 0
-    var endX = 0; //range ? range.endTime / maxDuration * maxWidth : maxDuration
-
-    var maxValue = waveFormData.max.reduce(function (memo, val) {
-      if (val > memo) memo = val;
-      return memo;
-    }, 0);
-
-    var values = waveFormData.max.map(function (val) {
-      return val === 0 ? 0.01 : val / maxValue;
-    });
-
-    window.setTimeout(function () {
-      if (!_this2.soundWave) {
-        _this2.soundWave = new _waveform2.default({
-          container: document.getElementById('wave'),
-          data: values,
-          innerColor: function innerColor(x, y) {
-            return x >= startX && x <= endX ? colorScheme[1] : colorScheme[0];
-          }
-        });
-      } else {
-        _this2.soundWave.update({
-          data: values
-        });
-      }
-    }, 0); // yeah, sorry
-  };
-
-  this.render = function () {
-    return _react2.default.createElement('div', {
-      id: 'wave',
-      ref: 'wave',
-      className: '' + _this2.props.className,
-      style: { width: _this2.props.width, height: _this2.props.height, position: 'relative', top: 9 } });
-  };
-};
-
-exports.default = Wave;

package/stories/customPlayer.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _CustomPlayer = require('../player/CustomPlayer');
-
-var _CustomPlayer2 = _interopRequireDefault(_CustomPlayer);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var CustomPlayerExample = function CustomPlayerExample() {
-  return _react2.default.createElement(_CustomPlayer2.default, { url: 'cranberries_zombie.mp3' });
-};
-
-exports.default = CustomPlayerExample;