@lls/lls-audio 0.0.3

package/player/CustomWave.js

@@ -0,0 +1,158 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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 RESOLUTION = 1;
+var colorScheme = ['#888', '#e51400'];
+
+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 Waveform = function (_Component) {
+  _inherits(Waveform, _Component);
+
+  function Waveform(props) {
+    _classCallCheck(this, Waveform);
+
+    //this.loopIsEnabled = false
+    var _this = _possibleConstructorReturn(this, (Waveform.__proto__ || Object.getPrototypeOf(Waveform)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    _this.ctx = null;
+    return _this;
+  }
+
+  return Waveform;
+}(_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.fixCanvasScale(width, height);
+    _this2.drawLevels(props);
+  };
+
+  this.fixCanvasScale = function (width, height) {
+    var canvas = _this2.refs.canvas;
+    if (!_this2.ctx) _this2.ctx = canvas.getContext('2d');
+
+    var devicePixelRatio = window.devicePixelRatio || 1;
+    var backingStoreRatio = _this2.ctx.webkitBackingStorePixelRatio || _this2.ctx.backingStorePixelRatio || 1;
+    var canvasRatio = devicePixelRatio / backingStoreRatio;
+    var scaledWidth = width * canvasRatio;
+    var scaledHeight = height * canvasRatio;
+
+    canvas.width = scaledWidth;
+    canvas.height = scaledHeight;
+    _this2.ctx.scale(canvasRatio, canvasRatio);
+  };
+
+  this.drawLevels = function (props) {
+    var height = props.height,
+        totalTime = props.totalTime,
+        waveform = props.waveform,
+        range = props.range,
+        currentTime = props.currentTime;
+    var pixels_per_second = waveform.pixels_per_second;
+
+    var maxWidth = _this2.refs.canvas.width;
+    var maxHeight = _this2.refs.canvas.height;
+
+    // Duration and step calculation
+    var maxDuration = totalTime || waveform.duration;
+    var levelStep = maxWidth / maxDuration;
+
+    // Range positions
+    //@todo: this range stuff should not be here. Waveform should just be passed an array of colors and ranges
+    var startX = range ? range.startTime / maxDuration * maxWidth : 0;
+    var endX = range ? range.endTime / maxDuration * maxWidth : maxDuration;
+
+    // Split data into chunks per level
+    var maxLevelChunks = chunks(waveform.max, Math.floor(pixels_per_second));
+
+    // Calculate average for each level + highest average
+
+    var _maxLevelChunks$reduc = maxLevelChunks.reduce(function (memo, levelData) {
+      var average = levelData.reduce(function (memo, data) {
+        return memo + data;
+      }, 0) / levelData.length;
+      if (average > memo.highestAverage) {
+        memo.highestAverage = average;
+      }
+      memo.averages.push(average);
+      return memo;
+    }, { highestAverage: 0, averages: [] }),
+        highestAverage = _maxLevelChunks$reduc.highestAverage,
+        averages = _maxLevelChunks$reduc.averages;
+
+    // Clear canvas and draw one bar for each level
+
+
+    _this2.ctx.clearRect(0, 0, maxWidth, maxHeight);
+    averages.forEach(function (average, i) {
+      var x = i * levelStep;
+      var h = average * (maxHeight / highestAverage);
+
+      var color = x >= startX && x <= endX ? colorScheme[1] : colorScheme[0];
+
+      _this2.drawLevel({
+        x: x,
+        y: maxHeight - h,
+        w: 1,
+        h: h,
+        color: color
+      });
+    });
+  };
+
+  this.drawLevel = function (level) {
+    _this2.ctx.fillStyle = '' + level.color;
+    _this2.ctx.fillRect(level.x, level.y, level.w, level.h);
+  };
+
+  this.render = function () {
+    return _react2.default.createElement('canvas', {
+      ref: 'canvas',
+      className: '' + _this2.props.className,
+      style: { width: _this2.props.width, height: _this2.props.height, position: 'relative', top: 9 } });
+  };
+};
+
+exports.default = Waveform;

package/player/Speed.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _aphrodite = require('aphrodite');
+
+var _FontIcon = require('material-ui/FontIcon');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = _aphrodite.StyleSheet.create({
+  speed_menu_items: {
+    height: '300%',
+    position: 'relative',
+    bottom: '75%',
+    overflow: 'hidden',
+    backgroundColor: '#FFF',
+    border: '1px solid #E5E5E5',
+    transition: 'all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28)',
+    ':hover': {
+      bottom: '150%',
+      overflow: 'visible'
+    }
+  },
+  speed_menu_item: {
+    padding: '28px 10px 0px 13px',
+    boxSizing: 'border-box'
+  },
+  speed_menu_low: {
+    bottom: '150%'
+  },
+  speed_menu_fast: {
+    bottom: '1%'
+  }
+});
+
+var getMenuPosition = function getMenuPosition(speed) {
+  switch (speed) {
+    case 1.25:
+      return 'speed_menu_fast';
+    case 0.75:
+      return 'speed_menu_low';
+    default:
+      return '';
+  }
+};
+
+var Speed = function Speed(_ref) {
+  var speed = _ref.speed,
+      onSpeedChange = _ref.onSpeedChange;
+  return _react2.default.createElement(
+    'div',
+    { className: 'Speed_menu_items ' + (0, _aphrodite.css)(styles.speed_menu_items) + ' ' + (0, _aphrodite.css)(styles[getMenuPosition(speed)]) },
+    _react2.default.createElement(
+      'div',
+      { className: 'Speed_menu_item ' + (0, _aphrodite.css)(styles.speed_menu_item), onClick: function onClick() {
+          return onSpeedChange(1.25);
+        } },
+      _react2.default.createElement(
+        _FontIcon2.default,
+        { style: { color: speed === 1.25 ? '#a20025' : '' }, className: 'material-icons' },
+        'exposure_plus_1'
+      )
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'Speed_menu_item ' + (0, _aphrodite.css)(styles.speed_menu_item), onClick: function onClick() {
+          return onSpeedChange(1);
+        } },
+      _react2.default.createElement(
+        _FontIcon2.default,
+        { style: { color: speed === 1 ? '#a20025' : '' }, className: 'material-icons' },
+        'exposure_zero'
+      )
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'Speed_menu_item ' + (0, _aphrodite.css)(styles.speed_menu_item), onClick: function onClick() {
+          return onSpeedChange(0.75);
+        } },
+      _react2.default.createElement(
+        _FontIcon2.default,
+        { style: { color: speed === 0.75 ? '#a20025' : '' }, className: 'material-icons' },
+        'exposure_neg_1'
+      )
+    )
+  );
+};
+
+exports.default = Speed;

package/player/Wave.js

@@ -0,0 +1,173 @@
+'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/player/index.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 _Wave = require('../player/Wave');
+
+var _Wave2 = _interopRequireDefault(_Wave);
+
+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(_Wave2.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/styles/fallbackTimelineClassNames.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _noImportant = require('aphrodite/no-important');
+
+var _timelineClassNames = require('./timelineClassNames');
+
+var _timelineClassNames2 = _interopRequireDefault(_timelineClassNames);
+
+var _utils = require('../utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = _noImportant.StyleSheet.create({
+  trackContainer: {
+    backgroundColor: '#e51400',
+    borderRadius: 0,
+    height: 2
+  },
+  labelContainer: {
+    top: -44
+  },
+  range: {
+    marginTop: -2,
+    position: 'absolute',
+    width: 'calc(100% - 60px)'
+  },
+  slider: {
+    background: '#888',
+    width: 2,
+    borderRadius: 0,
+    height: 53,
+    top: -51,
+    border: 'none',
+    margin: 0,
+    ':active': { transform: 'scale(1.1)' }
+  }
+});
+
+exports.default = (0, _utils.concatStyle)(_timelineClassNames2.default, styles);