@lls/lls-audio 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -19,6 +19,7 @@
     "react-dom": "15.3.1"
   },
   "dependencies": {
+    "@lls/lls-icons": "1.0.37",
     "aphrodite": "^1.1.0",
     "is_js": "^0.9.0",
     "merge-audio-buffers": "^1.0.0",

package/player/CustomWave.js

@@ -8,6 +8,8 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _colors = require('./styles/colors');
+
 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"); } }
@@ -17,7 +19,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 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 = 2;
-var colorScheme = ['#888', '#e51400'];
+var colorScheme = ['#d8d8d8', _colors.BLUE];
 
 var chunks = function chunks(arr, chunkSize) {
   return arr.map(function (e, i) {
@@ -124,6 +126,7 @@ var _initialiseProps = function _initialiseProps() {
         averages = _maxLevelChunks$reduc.averages;
 
     var ratio = maxWidth / maxLevelChunks.length;
+    var middle = maxHeight / 2;
 
     // Clear canvas and draw one bar for each level
     _this2.ctx.clearRect(0, 0, maxWidth, maxHeight);
@@ -131,10 +134,9 @@ var _initialiseProps = function _initialiseProps() {
       var x = i * ratio;
       var h = average * (maxHeight / highestAverage);
       var color = x >= startX && x <= endX ? colorScheme[1] : colorScheme[0];
-
       _this2.drawLevel({
         x: x,
-        y: maxHeight - h,
+        y: middle - h / 2,
         w: 1,
         h: h,
         color: color
@@ -151,7 +153,7 @@ var _initialiseProps = function _initialiseProps() {
     return _react2.default.createElement('canvas', {
       ref: 'canvas',
       className: '' + _this2.props.className,
-      style: { width: _this2.props.width, height: _this2.props.height, position: 'relative', top: 9 } });
+      style: { width: _this2.props.width, height: _this2.props.height, position: 'relative' } });
   };
 };
 

package/player/Loop.js

@@ -4,49 +4,24 @@ 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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
 var _noImportant = require('aphrodite/no-important');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _colors = require('./styles/colors');
 
-var beforeAfter = function beforeAfter(color) {
-  return {
-    position: 'absolute',
-    content: '""',
-    width: 0,
-    height: 0,
-    border: '6px solid transparent',
-    borderBottomColor: color
-  };
-};
+var _llsIcons = require('@lls/lls-icons');
+
+var _llsIcons2 = _interopRequireDefault(_llsIcons);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var makeStyle = function makeStyle(color) {
   return _noImportant.StyleSheet.create({
     loop: {
-      display: 'inline-block',
-      position: 'relative',
-      verticalAlign: 'middle',
-      width: 20,
-      height: 20,
-      border: '2px solid transparent',
-      borderRadius: '50%',
-      borderTopColor: color,
-      borderBottomColor: color,
-      ':after': _extends({}, beforeAfter(color), {
-        top: 1,
-        right: -7,
-        transform: 'rotate(135deg)'
-      }),
-      ':before': _extends({}, beforeAfter(color), {
-        top: 8,
-        left: -7,
-        transform: 'rotate(-45deg)'
-      })
+      color: color
     }
   });
 };
@@ -54,9 +29,7 @@ var makeStyle = function makeStyle(color) {
 var Loop = function Loop(_ref) {
   var _ref$loop = _ref.loop,
       loop = _ref$loop === undefined ? false : _ref$loop;
-  return _react2.default.createElement('span', {
-    className: (0, _noImportant.css)(makeStyle(loop ? '#a20025' : '#e5e5e5').loop)
-  });
+  return _react2.default.createElement(_llsIcons2.default, { name: 'btn_audio_player_repeat', className: (0, _noImportant.css)(makeStyle(loop ? _colors.BLUE : _colors.GREY).loop) });
 };
 
 exports.default = Loop;

package/player/Play.js

@@ -10,6 +10,8 @@ var _react2 = _interopRequireDefault(_react);
 
 var _noImportant = require('aphrodite/no-important');
 
+var _colors = require('./styles/colors');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = _noImportant.StyleSheet.create({
@@ -24,7 +26,7 @@ var styles = _noImportant.StyleSheet.create({
   left: {
     'height': '100%',
     'float': 'left',
-    'background-color': '#e51400',
+    'background-color': '#fff',
     'width': '36%',
     'transition': 'all 0.25s ease',
     'overflow': 'hidden'
@@ -42,7 +44,7 @@ var styles = _noImportant.StyleSheet.create({
     'background-color': 'transparent',
     'width': 0,
     'height': 0,
-    'border-right': '16px solid #fff',
+    'border-right': '16px solid ' + _colors.BLUE,
     'border-top': '8px solid transparent',
     'border-bottom': '8px solid transparent',
     'transition': 'transform 0.25s ease'
@@ -51,7 +53,7 @@ var styles = _noImportant.StyleSheet.create({
     'height': '100%',
     'float': 'right',
     'width': '36%',
-    'background-color': '#e51400',
+    'background-color': '#fff',
     'transition': 'all 0.25s ease'
   }
 

package/player/Range.js

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _noImportant = require('aphrodite/no-important');
+
+var _colors = require('./styles/colors');
+
+var _llsIcons = require('@lls/lls-icons');
+
+var _llsIcons2 = _interopRequireDefault(_llsIcons);
+
+var _utils = require('./utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = _noImportant.StyleSheet.create({
+  range: {
+    fontSize: 22,
+    padding: '6px 10px',
+    borderLeft: '2px solid #d8d8d8'
+  },
+  range_menu: {
+    ':hover .Range_menu_menu': {
+      display: 'flex'
+    }
+  },
+  current: {
+    color: _colors.BLUE,
+    padding: 10
+  },
+  menu: {
+    position: 'absolute',
+    display: 'none',
+    flexDirection: 'column-reverse',
+    width: 200,
+    bottom: 82,
+    left: 120,
+    boxShadow: '0 0 3px rgba(0, 0, 0, 0.5)',
+    backgroundColor: '#ffffff',
+    color: _colors.GREY,
+    ':after': {
+      position: 'absolute',
+      bottom: -10,
+      height: 10,
+      width: 10,
+      marginRight: -5,
+      right: '50%',
+      border: '5px solid transparent',
+      borderTopColor: _colors.GREY,
+      boxSizing: 'border-box',
+      content: '""'
+    }
+  },
+  create: {
+    color: '#00b3df',
+    fontSize: 12,
+    fontWeight: 700,
+    display: 'inline-block',
+    margin: 'auto'
+  },
+  button: {
+    textAlign: 'center',
+    padding: 10,
+    borderTop: '1px solid #d8d8d8',
+    cursor: 'pointer'
+  },
+  item: {
+    padding: 10,
+    borderTop: '1px solid #d8d8d8',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  time: {
+    color: '#707070',
+    fontSize: 12,
+    margin: 0,
+    cursor: 'pointer'
+  },
+  delete: {
+    fontSize: 10,
+    cursor: 'pointer'
+  }
+});
+
+var Range = function Range(_ref) {
+  var _ref$ranges = _ref.ranges,
+      ranges = _ref$ranges === undefined ? [] : _ref$ranges,
+      setRange = _ref.setRange,
+      _ref$startTime = _ref.startTime,
+      startTime = _ref$startTime === undefined ? 0 : _ref$startTime,
+      _ref$endTime = _ref.endTime,
+      endTime = _ref$endTime === undefined ? 0 : _ref$endTime,
+      onClickAddRange = _ref.onClickAddRange,
+      onClickDeleteRange = _ref.onClickDeleteRange;
+
+  var isCurrentSection = ranges.filter(function (range) {
+    return range.startTime === startTime && range.endTime === endTime;
+  }).length;
+  return _react2.default.createElement(
+    'div',
+    { className: 'Range_menu ' + (0, _noImportant.css)(styles.range_menu) },
+    _react2.default.createElement(
+      'div',
+      { className: 'Range_menu_menu ' + (0, _noImportant.css)(styles.menu) },
+      _react2.default.createElement(
+        'div',
+        { onClick: function onClick() {
+            return onClickAddRange ? onClickAddRange({ startTime: startTime, endTime: endTime }) : false;
+          }, className: (0, _noImportant.css)(styles.button) },
+        _react2.default.createElement(
+          'p',
+          { className: (0, _noImportant.css)(styles.create) },
+          'Ajouter une section'
+        ),
+        _react2.default.createElement(
+          'p',
+          { className: (0, _noImportant.css)(styles.time) },
+          (0, _utils.timeConvert)(startTime) + ' - ' + (0, _utils.timeConvert)(endTime)
+        )
+      ),
+      ranges.map(function (range) {
+        return _react2.default.createElement(
+          'div',
+          { key: range.id, className: (0, _noImportant.css)(styles.item) },
+          _react2.default.createElement(
+            'p',
+            { onClick: function onClick() {
+                return setRange({ startTime: range.startTime, endTime: range.endTime });
+              }, className: (0, _noImportant.css)(styles.time) },
+            (0, _utils.timeConvert)(range.startTime) + ' - ' + (0, _utils.timeConvert)(range.endTime)
+          ),
+          _react2.default.createElement(_llsIcons2.default, { className: (0, _noImportant.css)(styles.delete), onClick: function onClick() {
+              return onClickDeleteRange ? onClickDeleteRange(range.id) : false;
+            }, name: 'fermer' })
+        );
+      })
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'Range_menu_current ' + (0, _noImportant.css)(styles.current) },
+      _react2.default.createElement(_llsIcons2.default, { style: { color: isCurrentSection ? _colors.BLUE : _colors.GREY }, name: 'btn_audio_player_section', className: (0, _noImportant.css)(styles.range) })
+    )
+  );
+};
+
+exports.default = Range;

package/player/Speed.js

@@ -4,93 +4,92 @@ 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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
 var _aphrodite = require('aphrodite');
 
+var _colors = require('./styles/colors');
+
+var _llsIcons = require('@lls/lls-icons');
+
+var _llsIcons2 = _interopRequireDefault(_llsIcons);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 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: {
+    ':hover .Speed_menu_menu': {
+      display: 'flex'
     }
   },
-  speed_menu_item: {
-    padding: '28px 0px 11px 0px',
-    textAlign: 'center',
-    boxSizing: 'border-box'
-  },
-  speed_menu_low: {
-    bottom: '150%'
+  current: {
+    color: _colors.BLUE
   },
-  speed_menu_fast: {
-    bottom: '1%'
+  menu: {
+    cursor: 'pointer',
+    position: 'absolute',
+    display: 'none',
+    flexDirection: 'column',
+    top: -84,
+    boxShadow: '0 0 3px rgba(0, 0, 0, 0.5)',
+    backgroundColor: '#ffffff',
+    color: _colors.GREY,
+    ':after': {
+      position: 'absolute',
+      bottom: -10,
+      height: 10,
+      width: 10,
+      right: 24,
+      border: '5px solid transparent',
+      borderTopColor: _colors.GREY,
+      boxSizing: 'border-box',
+      content: '""'
+    }
   },
   icon: {
-    display: 'inline-block'
+    fontSize: 28,
+    padding: 15
+
   }
 });
 
-var getMenuPosition = function getMenuPosition(speed) {
-  switch (speed) {
-    case 1.25:
-      return 'speed_menu_fast';
-    case 0.75:
-      return 'speed_menu_low';
-    default:
-      return '';
-  }
+var getIcons = function getIcons(onSpeedChange) {
+  return {
+    1: _react2.default.createElement(_llsIcons2.default, { key: '1', onClick: function onClick() {
+        return onSpeedChange(1);
+      }, className: (0, _aphrodite.css)(styles.icon), name: 'btn_audio_player_vitesse_normal' }),
+    1.25: _react2.default.createElement(_llsIcons2.default, { key: '1.25', onClick: function onClick() {
+        return onSpeedChange(1.25);
+      }, className: (0, _aphrodite.css)(styles.icon), name: 'btn_audio_player_vitesse_speed' }),
+    0.75: _react2.default.createElement(_llsIcons2.default, { key: '0.75', onClick: function onClick() {
+        return onSpeedChange(0.75);
+      }, className: (0, _aphrodite.css)(styles.icon), name: 'btn_audio_player_vitesse_lent' })
+  };
 };
 
 var Speed = function Speed(_ref) {
   var speed = _ref.speed,
       onSpeedChange = _ref.onSpeedChange;
+
+  var icons = getIcons(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(
-        'span',
-        { className: (0, _aphrodite.css)(styles.icon), style: { color: speed === 1.25 ? '#a20025' : '' } },
-        '+1'
-      )
-    ),
+    { className: 'Speed_menu ' + (0, _aphrodite.css)(styles.speed_menu) },
     _react2.default.createElement(
       'div',
-      { className: 'Speed_menu_item ' + (0, _aphrodite.css)(styles.speed_menu_item), onClick: function onClick() {
-          return onSpeedChange(1);
-        } },
-      _react2.default.createElement(
-        'span',
-        { className: (0, _aphrodite.css)(styles.icon), style: { color: speed === 1 ? '#a20025' : '' } },
-        '0'
-      )
+      { className: 'Speed_menu_menu ' + (0, _aphrodite.css)(styles.menu) },
+      Object.values(_extends({}, icons, _defineProperty({}, speed, null)))
     ),
     _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(
-        'span',
-        { className: (0, _aphrodite.css)(styles.icon), style: { color: speed === 0.75 ? '#a20025' : '' } },
-        '-1'
-      )
+      { className: 'Speed_menu_current ' + (0, _aphrodite.css)(styles.current) },
+      icons[speed]
     )
   );
 };

package/player/index.js

@@ -26,6 +26,10 @@ var _reactInputRange2 = _interopRequireDefault(_reactInputRange);
 
 var _utils = require('./utils');
 
+var _llsIcons = require('@lls/lls-icons');
+
+var _llsIcons2 = _interopRequireDefault(_llsIcons);
+
 var _volumeClassNames = require('./styles/volumeClassNames');
 
 var _volumeClassNames2 = _interopRequireDefault(_volumeClassNames);
@@ -38,10 +42,20 @@ var _fallbackTimelineClassNames = require('./styles/fallbackTimelineClassNames')
 
 var _fallbackTimelineClassNames2 = _interopRequireDefault(_fallbackTimelineClassNames);
 
+var _fallbackRangelineClassNames = require('./styles/fallbackRangelineClassNames');
+
+var _fallbackRangelineClassNames2 = _interopRequireDefault(_fallbackRangelineClassNames);
+
+var _timeLineBottom = require('./styles/timeLineBottom');
+
+var _timeLineBottom2 = _interopRequireDefault(_timeLineBottom);
+
 var _styles = require('./styles/styles');
 
 var _styles2 = _interopRequireDefault(_styles);
 
+var _colors = require('./styles/colors');
+
 var _Audio = require('./Audio');
 
 var _Audio2 = _interopRequireDefault(_Audio);
@@ -58,6 +72,10 @@ var _Loop = require('./Loop');
 
 var _Loop2 = _interopRequireDefault(_Loop);
 
+var _Range = require('./Range');
+
+var _Range2 = _interopRequireDefault(_Range);
+
 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"); } }
@@ -84,19 +102,10 @@ var Player = function (_Component) {
       return _this.refs.audio.setRange(range);
     };
 
-    _this.toggleVisible = function () {
-      var visible = _this.state.visible;
-
-      _this.setState({
-        visible: !visible
-      });
-    };
-
     _this.state = {
       waveform: false,
       loading: true,
-      containerWidth: 0,
-      visible: true
+      containerWidth: 0
     };
     _this.setContainerWidth = (0, _utils.debounce)(_this.setContainerWidth.bind(_this), 500);
     _this.onKeyPress = _this.onKeyPress.bind(_this);
@@ -122,7 +131,7 @@ var Player = function (_Component) {
   }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(newProps) {
-      if (newProps.src !== this.props.src || newProps.visible !== this.props.visible) {
+      if (newProps.src !== this.props.src) {
         this.initialize(newProps);
       }
     }
@@ -137,7 +146,7 @@ var Player = function (_Component) {
     value: function setContainerWidth() {
       var container = this.refs.container;
 
-      var containerWidth = container.offsetWidth - 60;
+      var containerWidth = container.offsetWidth;
       this.setState({ containerWidth: containerWidth });
     }
   }, {
@@ -158,8 +167,7 @@ var Player = function (_Component) {
       (0, _audio.getWaveform)(src).then(function (waveform) {
         _this3.setState({
           waveform: waveform,
-          loading: false,
-          visible: visible
+          loading: false
         });
       });
     }
@@ -170,7 +178,18 @@ var Player = function (_Component) {
 
       var _props = this.props,
           src = _props.src,
-          className = _props.className;
+          visible = _props.visible,
+          className = _props.className,
+          _props$onClose = _props.onClose,
+          onClose = _props$onClose === undefined ? function () {} : _props$onClose,
+          _props$ranges = _props.ranges,
+          ranges = _props$ranges === undefined ? [] : _props$ranges,
+          _props$displayRange = _props.displayRange,
+          displayRange = _props$displayRange === undefined ? false : _props$displayRange,
+          _props$onClickAddRang = _props.onClickAddRange,
+          onClickAddRange = _props$onClickAddRang === undefined ? false : _props$onClickAddRang,
+          _props$onClickDeleteR = _props.onClickDeleteRange,
+          onClickDeleteRange = _props$onClickDeleteR === undefined ? false : _props$onClickDeleteR;
       var _state = this.state,
           loading = _state.loading,
           duration = _state.duration,
@@ -180,13 +199,13 @@ var Player = function (_Component) {
           containerWidth = _state.containerWidth,
           speed = _state.speed,
           _state$currentRange = _state.currentRange,
-          currentRange = _state$currentRange === undefined ? {} : _state$currentRange,
-          visible = _state.visible;
+          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;
 
+      console.log(endTime);
       return _react2.default.createElement(
         'div',
         { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) + ' ' + className + ' ' + (visible ? '' : (0, _noImportant.css)(styles.hidden)) },
@@ -202,15 +221,9 @@ var Player = function (_Component) {
           }, ref: 'audio', src: src }),
         _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);
+          { 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(
@@ -222,10 +235,82 @@ var Player = function (_Component) {
         ),
         _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);
-            } })
+          null,
+          displayRange ? _react2.default.createElement(_Range2.default, { setRange: function setRange(range) {
+              return _this4.setRange(range);
+            }, onClickAddRange: onClickAddRange, onClickDeleteRange: onClickDeleteRange, ranges: ranges, startTime: startTime, endTime: endTime }) : null
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: (0, _noImportant.css)(styles.time) },
+          (0, _utils.timeConvert)(currentTime)
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },
+          _react2.default.createElement(
+            'div',
+            null,
+            _react2.default.createElement(_CustomWave2.default, { currentTime: currentTime, width: containerWidth, height: 60, range: { startTime: startTime, endTime: endTime }, isLoading: loading, waveform: waveform }),
+            _react2.default.createElement(_reactInputRange2.default, {
+              classNames: _fallbackTimelineClassNames2.default,
+              formatLabel: _utils.timeConvert,
+              maxValue: Math.round(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',
+            { className: (0, _noImportant.css)(styles.fallback) },
+            _react2.default.createElement(_reactInputRange2.default, {
+              classNames: _fallbackRangelineClassNames2.default,
+              formatLabel: _utils.timeConvert,
+              maxValue: Math.round(duration) || 1,
+              minValue: 0,
+              onChange: function onChange(c, _ref2) {
+                var min = _ref2.min,
+                    max = _ref2.max;
+                return _this4.refs.audio.setRange({ startTime: min, endTime: max });
+              },
+              value: { min: startTime, max: endTime }
+            }),
+            _react2.default.createElement(_reactInputRange2.default, {
+              classNames: _timeLineBottom2.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',
+          { className: (0, _noImportant.css)(styles.time) },
+          (0, _utils.timeConvert)(duration - currentTime)
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: (0, _noImportant.css)(styles.iconAudio), onClick: function onClick() {
+              return _this4.refs.audio.setVolume(0);
+            } },
+          _react2.default.createElement(_llsIcons2.default, { style: { color: this.state.volume === 0 ? _colors.GREY : _colors.BLUE }, name: 'icon_audio_playervolume' })
         ),
         _react2.default.createElement(
           'div',
@@ -234,9 +319,9 @@ var Player = function (_Component) {
               return _this4.refs.audio.setVolume(v);
             } })
         ),
-        _react2.default.createElement('div', { className: 'Close ' + (0, _noImportant.css)(styles.close), onClick: function onClick() {
-            return _this4.toggleVisible();
-          } })
+        _react2.default.createElement(_llsIcons2.default, { className: 'Close ' + (0, _noImportant.css)(styles.close), onClick: function onClick() {
+            return onClose();
+          }, name: 'fermer' })
       );
     }
   }]);

package/player/styles/colors.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var BLUE = exports.BLUE = '#00b3df';
+
+var GREY = exports.GREY = '#999999';

package/player/styles/fallbackRangelineClassNames.js

@@ -0,0 +1,72 @@
+'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');
+
+var _colors = require('./colors');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = _noImportant.StyleSheet.create({
+  component: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  },
+  trackContainer: {
+    height: '100%'
+  },
+  labelContainer: {
+    display: 'none'
+  },
+  range: {
+    position: 'absolute',
+    width: 'calc(100% - 60px)'
+  },
+
+  slider: {
+    background: 'transparent',
+    borderLeft: '3px solid ' + _colors.GREY,
+    zIndex: 10,
+    width: 10,
+    borderRadius: 0,
+    height: 12,
+    margin: 0,
+    ':active': { transform: 'scale(1.1)' },
+    ':after': {
+      position: 'absolute',
+      bottom: 1,
+      height: 10,
+      width: 10,
+      marginRight: -5,
+      right: '50%',
+      border: '5px solid transparent',
+      borderLeftColor: _colors.GREY,
+      boxSizing: 'border-box',
+      content: '""'
+    },
+    ':before': {
+      position: 'absolute',
+      bottom: 1,
+      height: 10,
+      width: 10,
+      marginRight: 8,
+      right: '50%',
+      border: '5px solid transparent',
+      borderRightColor: _colors.GREY,
+      boxSizing: 'border-box',
+      content: '""'
+    }
+  }
+});
+
+exports.default = (0, _utils.concatStyle)(_timelineClassNames2.default, styles);

package/player/styles/fallbackTimelineClassNames.js

@@ -12,16 +12,24 @@ var _timelineClassNames2 = _interopRequireDefault(_timelineClassNames);
 
 var _utils = require('../utils');
 
+var _colors = require('./colors');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = _noImportant.StyleSheet.create({
+  component: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0
+  },
   trackContainer: {
-    backgroundColor: '#e51400',
-    borderRadius: 0,
-    height: 2
+    background: 'transparent',
+    height: '100%',
+    top: 0
   },
   labelContainer: {
-    top: -44
+    display: 'none'
   },
   range: {
     marginTop: -2,
@@ -29,12 +37,12 @@ var styles = _noImportant.StyleSheet.create({
     width: 'calc(100% - 60px)'
   },
   slider: {
-    background: '#888',
-    width: 2,
+    background: 'transparent',
+    borderLeft: '3px solid ' + _colors.GREY,
+    zIndex: 10,
+    width: 10,
     borderRadius: 0,
-    height: 53,
-    top: -51,
-    border: 'none',
+    height: 57,
     margin: 0,
     ':active': { transform: 'scale(1.1)' }
   }

package/player/styles/styles.js

@@ -4,72 +4,71 @@ 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 _play_and_stop;
 
-var styleDisplayInlineBlock = {
-  display: 'inline-block',
-  verticalAlign: 'top'
-};
+var _colors = require('./colors');
+
+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; }
 
 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)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 0 7px rgba(0, 0, 0, 0.32)',
     backgroundColor: '#fff',
     bottom: 0,
-    left: 0,
-    right: 0,
-    height: 75,
+    height: 120,
     zIndex: 999999,
-    width: '100%'
+    width: '90%',
+    marginLeft: '50%',
+    transform: 'translate(-50%, 0)'
+  },
+  volume: {
+    width: 100,
+    cursor: 'pointer'
+  },
+  iconAudio: {
+    color: _colors.BLUE,
+    marginRight: 20,
+    fontSize: 21
   },
-  play_and_stop: _extends({}, styleDisplayInlineBlock, {
+  time: {
+    color: _colors.GREY,
+    fontSize: 12,
+    alignSelf: 'flex-end',
+    marginBottom: 7
+  },
+  play_and_stop: (_play_and_stop = {
     height: '100%',
-    width: 75,
-    borderRight: '1px solid #e5e5e5',
-    color: '#6d6d6d',
-    paddingTop: 28,
-    textAlign: 'center',
-    boxSizing: 'border-box'
-  }),
+    width: 40
+  }, _defineProperty(_play_and_stop, 'height', 40), _defineProperty(_play_and_stop, 'color', '#6d6d6d'), _defineProperty(_play_and_stop, 'textAlign', 'center'), _defineProperty(_play_and_stop, 'boxSizing', 'border-box'), _defineProperty(_play_and_stop, 'backgroundColor', _colors.BLUE), _defineProperty(_play_and_stop, 'borderRadius', '50%'), _defineProperty(_play_and_stop, 'display', 'flex'), _defineProperty(_play_and_stop, 'alignItems', 'center'), _defineProperty(_play_and_stop, 'justifyContent', 'center'), _defineProperty(_play_and_stop, 'marginRight', 10), _defineProperty(_play_and_stop, 'cursor', 'pointer'), _play_and_stop),
+  fallback: {
+    marginTop: 5,
+    position: 'relative'
+  },
   timeline: {
-    display: 'inline-block',
-    width: 'calc(100% - 438px)',
-    borderRight: '1px solid #e5e5e5',
+    width: 'calc(100% - 520px)',
     height: 60,
-    padding: '12px 30px 0px 30px',
-    position: 'relative'
+    margin: '0px 20px',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column'
   },
-  repeat_menu: _extends({}, styleDisplayInlineBlock, {
-    padding: '25px 13px',
-    borderRight: '1px solid #e5e5e5'
-  }),
-  speed_menu: _extends({}, styleDisplayInlineBlock, {
-    height: '100%',
-    width: 50,
-    borderRight: '1px solid #e5e5e5',
-    overflow: 'hidden',
-    ':hover': {
-      overflow: 'visible'
-    }
-  }),
+  repeat_menu: {
+    margin: 10,
+    fontSize: 22,
+    cursor: 'pointer'
+  },
+  speed_menu: {},
   close: {
     cursor: 'pointer',
     position: 'absolute',
-    top: 1,
-    right: 3,
-    ':after': {
-      content: "'✖'",
-      color: '#e5e5e5'
-    }
+    top: 10,
+    right: 10,
+    color: _colors.GREY,
+    fontSize: 16
   },
   hidden: {
     display: 'none'

package/player/styles/timeLineBottom.js

@@ -0,0 +1,50 @@
+'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');
+
+var _colors = require('./colors');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = _noImportant.StyleSheet.create({
+  slider: {
+    marginTop: -9,
+    width: 12,
+    height: 12,
+    transition: 'none',
+    boxShadow: '0 0 3px rgba(0, 0, 0, 0.57)',
+    backgroundColor: '#ffffff',
+    borderColor: 'transparent',
+    ':active': { transform: 'scale(1.1)' }
+  },
+  trackActive: {
+    height: 6,
+    transition: 'none',
+    backgroundColor: _colors.BLUE
+  },
+  trackActiveContainer: {
+    height: 6,
+    transition: 'none'
+  },
+  trackContainer: {
+    height: 6
+  },
+  sliderContainer: {
+    transition: 'none'
+  },
+  labelContainer: {
+    display: 'none'
+  }
+});
+
+exports.default = (0, _utils.concatStyle)(_sliderDefaultClassNames2.default, styles);

package/player/styles/timelineClassNames.js

@@ -13,6 +13,8 @@ var _noImportant = require('aphrodite/no-important');
 
 var _utils = require('../utils');
 
+var _colors = require('./colors');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var playerAnimation = {
@@ -21,9 +23,14 @@ var playerAnimation = {
 };
 
 var styles = exports.styles = _noImportant.StyleSheet.create({
+  component: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0
+  },
   labelContainer: {
-    top: -60,
-    fontSize: 11
+    display: 'none'
   },
   labelMin: {
     display: 'none'
@@ -40,15 +47,16 @@ var styles = exports.styles = _noImportant.StyleSheet.create({
     animationName: playerAnimation,
     animationDuration: '1s'
   },
-  label: {
-    top: 13
+  trackContainer: {
+    background: 'transparent',
+    height: '100%',
+    top: 0
   },
   slider: {
-    background: '#e51400',
+    background: _colors.BLUE,
     width: 2,
     borderRadius: 0,
-    height: 53,
-    top: -70,
+    height: 58,
     border: 'none',
     margin: 0,
     ':active': { transform: 'scale(1.1)' }

package/player/styles/volumeClassNames.js

@@ -12,6 +12,8 @@ var _sliderDefaultClassNames2 = _interopRequireDefault(_sliderDefaultClassNames)
 
 var _utils = require('../utils');
 
+var _colors = require('./colors');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = _noImportant.StyleSheet.create({
@@ -20,24 +22,25 @@ var styles = _noImportant.StyleSheet.create({
     width: 12,
     height: 12,
     transition: 'none',
-    backgroundColor: '#a20025',
-    borderColor: '#a20025',
+    boxShadow: '0 0 3px rgba(0, 0, 0, 0.57)',
+    backgroundColor: '#ffffff',
+    borderColor: 'transparent',
     ':active': { transform: 'scale(1.1)' }
   },
   trackActive: {
-    height: 3,
+    height: 6,
     transition: 'none',
-    backgroundColor: '#a20025'
+    backgroundColor: _colors.BLUE
   },
   trackActiveContainer: {
-    height: 3,
+    height: 6,
     transition: 'none'
   },
   trackContainer: {
-    height: 3
+    height: 6
   },
-  sliderContainer: {
-    transition: 'none'
+  labelContainer: {
+    display: 'none'
   }
 });
 

package/stories/index.js

@@ -10,6 +10,10 @@ var _player = require('./player');
 
 var _player2 = _interopRequireDefault(_player);
 
+var _playerRange = require('./playerRange');
+
+var _playerRange2 = _interopRequireDefault(_playerRange);
+
 var _recorder = require('./recorder');
 
 var _recorder2 = _interopRequireDefault(_recorder);
@@ -18,6 +22,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 (0, _storybook.storiesOf)('Player', module).add('Custom waveform', function () {
   return _react2.default.createElement(_player2.default, null);
+}).add('Ranges', function () {
+  return _react2.default.createElement(_playerRange2.default, null);
 });
 //import PlayerCustom from './playerCustom'
 

package/stories/player.js

@@ -41,6 +41,8 @@ var PlayerExample = function (_Component) {
     value: function render() {
       var _this2 = this;
 
+      var ranges = this.props.ranges;
+
       return _react2.default.createElement(
         'div',
         null,
@@ -62,7 +64,7 @@ var PlayerExample = function (_Component) {
             'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3'
           )
         ),
-        _react2.default.createElement(_player2.default, { src: this.state.url, visible: false })
+        _react2.default.createElement(_player2.default, { src: this.state.url, ranges: ranges, visible: true })
       );
     }
   }]);

package/stories/playerRange.js

@@ -0,0 +1,77 @@
+'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 _player = require('../player');
+
+var _player2 = _interopRequireDefault(_player);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+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',
+      ranges: [{ id: 0, startTime: 0, endTime: 30 }, { id: 1, startTime: 20, endTime: 50 }]
+    };
+    return _this;
+  }
+
+  _createClass(PlayerExample, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _state = this.state,
+          ranges = _state.ranges,
+          url = _state.url;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(_player2.default, {
+          src: url,
+          displayRange: true,
+          onClickAddRange: function onClickAddRange(r) {
+            return _this2.setState({ ranges: [].concat(_toConsumableArray(ranges), [_extends({ id: ranges.length }, r)]) });
+          },
+          onClickDeleteRange: function onClickDeleteRange(id) {
+            return _this2.setState({ ranges: ranges.filter(function (r) {
+                return r.id != id;
+              }) });
+          },
+          ranges: ranges,
+          visible: true
+        })
+      );
+    }
+  }]);
+
+  return PlayerExample;
+}(_react.Component);
+
+exports.default = PlayerExample;