@lls/lls-audio 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@lls/lls-icons": "1.0.37",
+    "@lls/lls-ui": "0.1.19",
     "aphrodite": "^1.1.0",
     "is_js": "^0.9.0",
     "merge-audio-buffers": "^1.0.0",
@@ -41,7 +42,7 @@
     "start": "npm run storybook",
     "storybook": "start-storybook -p 9009",
     "deploy-storybook": "storybook-to-ghpages",
-    "build": "rm -rf dist && mkdir dist && babel -d dist src",
+    "build": "rm -rf dist && mkdir dist && $(npm bin)/babel -d dist src",
     "copy:package": "cp -R package.json dist/",
     "copy:readme": "cp -R README.md dist/",
     "npm:publish": "npm run build && npm run release && npm run copy:readme && npm run copy:package && cd dist && npm publish && cd .. && npm run deploy-storybook",

package/player/Audio.js

@@ -174,6 +174,7 @@ var Player = function (_Component) {
       player.removeEventListener('play', this.onPlay);
       player.removeEventListener('pause', this.onPause);
       player.removeEventListener('timeupdate', this.onAudioUpdate);
+      cancelAnimationFrame(this.requestAnimationId);
     }
   }, {
     key: 'getCurrentTime',

package/player/Range.js

@@ -18,19 +18,25 @@ var _llsIcons2 = _interopRequireDefault(_llsIcons);
 
 var _utils = require('./utils');
 
+var _mediaQueries = require('./styles/mediaQueries');
+
 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 = _noImportant.StyleSheet.create({
   range: {
     fontSize: 22,
     padding: '6px 10px',
     borderLeft: '2px solid #d8d8d8'
   },
-  range_menu: {
+  range_menu: _defineProperty({
     ':hover .Range_menu_menu': {
       display: 'flex'
     }
-  },
+  }, _mediaQueries.MOBILE, {
+    display: 'none'
+  }),
   current: {
     color: _colors.BLUE,
     padding: 10

package/player/index.js

@@ -190,7 +190,9 @@ var Player = function (_Component) {
           _props$onClickAddRang = _props.onClickAddRange,
           onClickAddRange = _props$onClickAddRang === undefined ? false : _props$onClickAddRang,
           _props$onClickDeleteR = _props.onClickDeleteRange,
-          onClickDeleteRange = _props$onClickDeleteR === undefined ? false : _props$onClickDeleteR;
+          onClickDeleteRange = _props$onClickDeleteR === undefined ? false : _props$onClickDeleteR,
+          _props$preload = _props.preload,
+          preload = _props$preload === undefined ? 'auto' : _props$preload;
       var _state = this.state,
           loading = _state.loading,
           duration = _state.duration,
@@ -200,7 +202,9 @@ var Player = function (_Component) {
           containerWidth = _state.containerWidth,
           speed = _state.speed,
           _state$currentRange = _state.currentRange,
-          currentRange = _state$currentRange === undefined ? {} : _state$currentRange;
+          currentRange = _state$currentRange === undefined ? {} : _state$currentRange,
+          loop = _state.loop,
+          volume = _state.volume;
       var _currentRange$startTi = currentRange.startTime,
           startTime = _currentRange$startTi === undefined ? 0 : _currentRange$startTi,
           _currentRange$endTime = currentRange.endTime,
@@ -210,116 +214,63 @@ var Player = function (_Component) {
       return _react2.default.createElement(
         'div',
         { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) + ' ' + className },
-        _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(_Play2.default, { pause: !play })
-        ),
+        _react2.default.createElement(PlayWrapper, { play: play, audioRef: this.refs.audio }),
         _react2.default.createElement(_Audio2.default, { autoPlay: autoPlay, onChange: function onChange(state) {
             return _this4.setState(_extends({}, state));
-          }, ref: 'audio', src: src }),
-        _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',
-          { onClick: function onClick() {
-              return _this4.refs.audio.setLoop(!_this4.state.loop);
-            }, className: 'Repeat_menu ' + (0, _noImportant.css)(styles.repeat_menu) },
-          _react2.default.createElement(_Loop2.default, { loop: this.state.loop })
-        ),
-        _react2.default.createElement(
-          'div',
-          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
-        ),
+          }, ref: 'audio', src: src, preload: preload }),
+        _react2.default.createElement(SpeedWrapper, { speed: speed, audioRef: this.refs.audio }),
+        _react2.default.createElement(LoopWrapper, { loop: loop, audioRef: this.refs.audio }),
+        displayRange ? _react2.default.createElement(_Range2.default, {
+          setRange: this.setRange,
+          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' },
+          { className: (0, _noImportant.css)(styles.waveAndTimes) },
           _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);
-              }
-            })
+            { className: (0, _noImportant.css)(styles.time, styles.currentTime) },
+            (0, _utils.timeConvert)(currentTime)
           ),
           _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 }
+            { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },
+            _react2.default.createElement(WaveTimeline, {
+              audioRef: this.refs.audio,
+              currentTime: currentTime,
+              containerWidth: containerWidth,
+              startTime: startTime,
+              endTime: endTime,
+              loading: loading,
+              waveform: waveform,
+              fallbackTimelineClassNames: _fallbackTimelineClassNames2.default,
+              timeConvert: _utils.timeConvert,
+              duration: duration,
+              timelineClassNames: _timelineClassNames2.default
             }),
-            _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(Timeline, {
+              fallbackRangelineClassNames: _fallbackRangelineClassNames2.default,
+              timeConvert: _utils.timeConvert,
+              duration: duration,
+              audioRef: this.refs.audio,
+              currentTime: currentTime,
+              startTime: startTime,
+              endTime: endTime,
+              timeLineBottom: _timeLineBottom2.default
             })
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: (0, _noImportant.css)(styles.time, styles.totalTime) },
+            (0, _utils.timeConvert)(duration - currentTime)
           )
         ),
-        _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',
-          { 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);
-            } })
-        ),
+        _react2.default.createElement(VolumeIcon, { audioRef: this.refs.audio, volume: volume }),
+        _react2.default.createElement(VolumeRange, { audioRef: this.refs.audio, volume: volume, volumeClassNames: _volumeClassNames2.default }),
         _react2.default.createElement(_llsIcons2.default, { className: 'Close ' + (0, _noImportant.css)(styles.close), onClick: function onClick() {
             return onClose();
           }, name: 'fermer' })
@@ -330,4 +281,151 @@ var Player = function (_Component) {
   return Player;
 }(_react.Component);
 
+/**** PLAYER COMPONENTS ****/
+
+var PlayWrapper = function PlayWrapper(_ref) {
+  var play = _ref.play,
+      audioRef = _ref.audioRef;
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _noImportant.css)(styles.play_and_stop), onClick: function onClick() {
+        return play ? audioRef.pause() : audioRef.play();
+      } },
+    _react2.default.createElement(_Play2.default, { pause: !play })
+  );
+};
+
+var SpeedWrapper = function SpeedWrapper(_ref2) {
+  var speed = _ref2.speed,
+      audioRef = _ref2.audioRef;
+  return _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 audioRef.setSpeed(speed);
+      } })
+  );
+};
+
+var LoopWrapper = function LoopWrapper(_ref3) {
+  var loop = _ref3.loop,
+      audioRef = _ref3.audioRef;
+  return _react2.default.createElement(
+    'div',
+    { onClick: function onClick() {
+        return audioRef.setLoop(!loop);
+      }, className: 'Repeat_menu ' + (0, _noImportant.css)(styles.repeat_menu) },
+    _react2.default.createElement(_Loop2.default, { loop: loop })
+  );
+};
+
+var WaveTimeline = function WaveTimeline(_ref4) {
+  var currentTime = _ref4.currentTime,
+      containerWidth = _ref4.containerWidth,
+      startTime = _ref4.startTime,
+      endTime = _ref4.endTime,
+      loading = _ref4.loading,
+      waveform = _ref4.waveform,
+      fallbackTimelineClassNames = _ref4.fallbackTimelineClassNames,
+      timeConvert = _ref4.timeConvert,
+      duration = _ref4.duration,
+      audioRef = _ref4.audioRef,
+      timelineClassNames = _ref4.timelineClassNames;
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _noImportant.css)(styles.wavetimeline) },
+    _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: fallbackTimelineClassNames,
+      formatLabel: timeConvert,
+      maxValue: Math.round(duration) || 1,
+      minValue: 0,
+      onChange: function onChange(c, _ref5) {
+        var min = _ref5.min,
+            max = _ref5.max;
+        return audioRef.setRange({ startTime: min, endTime: max });
+      },
+      value: { min: startTime, max: endTime }
+    }),
+    _react2.default.createElement(_reactInputRange2.default, {
+      classNames: timelineClassNames,
+      formatLabel: timeConvert,
+      maxValue: duration || 1,
+      minValue: 0,
+      value: currentTime,
+      onChange: function onChange(c, v) {
+        return audioRef.setCurrentTime(v);
+      }
+    })
+  );
+};
+
+var Timeline = function Timeline(_ref6) {
+  var fallbackRangelineClassNames = _ref6.fallbackRangelineClassNames,
+      timeConvert = _ref6.timeConvert,
+      duration = _ref6.duration,
+      audioRef = _ref6.audioRef,
+      currentTime = _ref6.currentTime,
+      startTime = _ref6.startTime,
+      endTime = _ref6.endTime,
+      timeLineBottom = _ref6.timeLineBottom;
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _noImportant.css)(styles.fallback) },
+    _react2.default.createElement(_reactInputRange2.default, {
+      classNames: fallbackRangelineClassNames,
+      formatLabel: timeConvert,
+      maxValue: Math.round(duration) || 1,
+      minValue: 0,
+      onChange: function onChange(c, _ref7) {
+        var min = _ref7.min,
+            max = _ref7.max;
+        return audioRef.setRange({ startTime: min, endTime: max });
+      },
+      value: { min: startTime, max: endTime }
+    }),
+    _react2.default.createElement(_reactInputRange2.default, {
+      classNames: timeLineBottom,
+      formatLabel: timeConvert,
+      maxValue: duration || 1,
+      minValue: 0, value: currentTime,
+      onChange: function onChange(c, v) {
+        return audioRef.setCurrentTime(v);
+      }
+    })
+  );
+};
+
+var VolumeIcon = function VolumeIcon(_ref8) {
+  var audioRef = _ref8.audioRef,
+      volume = _ref8.volume;
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _noImportant.css)(styles.iconAudio), onClick: function onClick() {
+        return audioRef.setVolume(0);
+      } },
+    _react2.default.createElement(_llsIcons2.default, { style: { color: volume === 0 ? _colors.GREY : _colors.BLUE }, name: 'icon_audio_playervolume' })
+  );
+};
+
+var VolumeRange = function VolumeRange(_ref9) {
+  var volumeClassNames = _ref9.volumeClassNames,
+      volume = _ref9.volume,
+      audioRef = _ref9.audioRef;
+  return _react2.default.createElement(
+    'div',
+    { className: 'Volume ' + (0, _noImportant.css)(styles.volume) },
+    _react2.default.createElement(_reactInputRange2.default, { classNames: volumeClassNames, maxValue: 100, minValue: 0, value: volume, onChange: function onChange(c, v) {
+        return audioRef.setVolume(v);
+      } })
+  );
+};
+
 exports.default = Player;

package/player/styles/mediaQueries.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var MOBILE = exports.MOBILE = '@media only screen and (max-width: 650px), only screen and (max-device-width: 650px)';
+var PHABLET = exports.PHABLET = '@media only screen and (min-width: 651px) and (max-width: 1000px), only screen and (min-device-width: 651px) and (max-device-width:1000px)';
+var TABLET = exports.TABLET = '@media only screen and (min-width: 1001px) and (max-width: 1200px), only screen and (min-device-width: 1001px) and (max-device-width:1200px)';
+var DESKTOP = exports.DESKTOP = '@media only screen and (min-width: 1201px) and (min-device-width:1201px)';

package/player/styles/styles.js

@@ -8,10 +8,12 @@ var _play_and_stop;
 
 var _colors = require('./colors');
 
+var _mediaQueries = require('./mediaQueries');
+
 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 = {
-  player: {
+  player: _defineProperty({
     position: 'fixed',
     display: 'flex',
     alignItems: 'center',
@@ -24,7 +26,10 @@ exports.default = {
     width: '90%',
     marginLeft: '50%',
     transform: 'translate(-50%, 0)'
-  },
+  }, _mediaQueries.MOBILE, {
+    flexFlow: 'row wrap',
+    paddingTop: 10
+  }),
   volume: {
     width: 100,
     cursor: 'pointer'
@@ -34,33 +39,61 @@ exports.default = {
     marginRight: 20,
     fontSize: 21
   },
-  time: {
+  time: _defineProperty({
     color: _colors.GREY,
     fontSize: 12,
     alignSelf: 'flex-end',
     marginBottom: 7
-  },
+  }, _mediaQueries.MOBILE, {
+    flex: '1 auto',
+    position: 'relative',
+    bottom: 22
+  }),
+  currentTime: _defineProperty({}, _mediaQueries.MOBILE, {
+    order: 1
+  }),
+  totalTime: _defineProperty({}, _mediaQueries.MOBILE, {
+    order: 3
+  }),
+  waveAndTimes: _defineProperty({
+    width: 'calc(100% - 430px)',
+    display: 'flex'
+  }, _mediaQueries.MOBILE, {
+    flex: '1 100%',
+    order: 2,
+    margin: '0px 28px'
+  }),
   play_and_stop: (_play_and_stop = {
     height: '100%',
     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: {
+  fallback: _defineProperty({
     marginTop: 5,
     position: 'relative'
-  },
-  timeline: {
-    width: 'calc(100% - 520px)',
+  }, _mediaQueries.MOBILE, {
+    marginTop: 16
+  }),
+  wavetimeline: _defineProperty({}, _mediaQueries.MOBILE, {
+    display: 'none'
+  }),
+  timeline: _defineProperty({
+    //width: 'calc(100% - 520px)',
+    width: '100%',
     height: 60,
     margin: '0px 20px',
     position: 'relative',
     display: 'flex',
     flexDirection: 'column'
-  },
-  repeat_menu: {
+  }, _mediaQueries.MOBILE, {
+    order: 2
+  }),
+  repeat_menu: _defineProperty({
     margin: 10,
     fontSize: 22,
     cursor: 'pointer'
-  },
+  }, _mediaQueries.MOBILE, {
+    marginRight: 37
+  }),
   speed_menu: {},
   close: {
     cursor: 'pointer',