@lls/lls-audio 0.0.34 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -36,7 +36,7 @@
     "node": ">=0.12.0"
   },
   "repository": {
-    "url": "github.com/lelivrescolaire/sound-poke"
+    "url": "github.com/lelivrescolaire/lls-audio"
   },
   "scripts": {
     "start": "npm run storybook",

package/player/Audio.js

@@ -121,7 +121,7 @@ var Player = function (_Component) {
     _this.setStateWithCallback = function (state) {
       var cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       return _this.setState(state, function () {
-        _this.props.onChange(state);
+        _this.props.onChange(_this.state);
         cb ? cb() : false;
       });
     };

package/player/index.js

@@ -4,8 +4,6 @@ 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');
@@ -106,6 +104,30 @@ var Player = function (_Component) {
       return _this.refs.audio.setRange(range);
     };
 
+    _this.audioStateChange = function (newState) {
+      var previousPlay = _this.state.play;
+      var newPlay = newState.play;
+      var _this$props = _this.props,
+          src = _this$props.src,
+          _this$props$on = _this$props.on,
+          on = _this$props$on === undefined ? {} : _this$props$on;
+
+      // Trigger onPause & onPlay callbacks if necessary
+
+      if (!previousPlay && newPlay && on.play) {
+        on.play({
+          url: src
+        });
+      }
+      if (previousPlay && !newPlay && on.pause) {
+        on.pause({
+          url: src
+        });
+      }
+
+      _this.setState(newState);
+    };
+
     _this.state = {
       waveform: false,
       loading: true,
@@ -113,6 +135,7 @@ var Player = function (_Component) {
     };
     _this.setContainerWidth = (0, _utils.debounce)(_this.setContainerWidth.bind(_this), 500);
     _this.onKeyPress = _this.onKeyPress.bind(_this);
+    _this.audioStateChange = _this.audioStateChange.bind(_this);
     return _this;
   }
 
@@ -166,27 +189,40 @@ var Player = function (_Component) {
 
       var src = props.src,
           _props$visible = props.visible,
-          visible = _props$visible === undefined ? true : _props$visible;
-
+          visible = _props$visible === undefined ? true : _props$visible,
+          _props$on = props.on,
+          on = _props$on === undefined ? {} : _props$on;
+
+      if (on.loadStart) {
+        on.loadStart({
+          url: src
+        }); // notify start of loading
+      }
       (0, _audio.getWaveform)(src).then(function (waveform) {
         _this3.setState({
           waveform: waveform,
           loading: false
         });
+        // notify end of loading
+        if (on.loadSuccess) {
+          on.loadSuccess({
+            url: src,
+            duration: waveform.duration
+          });
+        }
       });
     }
   }, {
     key: 'render',
     value: function render() {
-      var _this4 = this;
-
       var _props = this.props,
+          title = _props.title,
           _props$autoPlay = _props.autoPlay,
           autoPlay = _props$autoPlay === undefined ? false : _props$autoPlay,
           src = _props.src,
           className = _props.className,
-          _props$onClose = _props.onClose,
-          onClose = _props$onClose === undefined ? function () {} : _props$onClose,
+          _props$on2 = _props.on,
+          on = _props$on2 === undefined ? {} : _props$on2,
           _props$ranges = _props.ranges,
           ranges = _props$ranges === undefined ? [] : _props$ranges,
           _props$displayRange = _props.displayRange,
@@ -220,67 +256,70 @@ var Player = function (_Component) {
       return _react2.default.createElement(
         'div',
         { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) + ' ' + className },
-        _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, 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(Title, { content: title }),
         _react2.default.createElement(
-          'div',
-          { className: (0, _noImportant.css)(styles.waveAndTimes) },
-          _react2.default.createElement(
-            'div',
-            { className: (0, _noImportant.css)(styles.time, styles.currentTime) },
-            (0, _utils.timeConvert)(currentTime)
-          ),
+          Content,
+          null,
+          _react2.default.createElement(PlayWrapper, { play: play, audioRef: this.refs.audio }),
+          _react2.default.createElement(_Audio2.default, { autoPlay: autoPlay, onChange: this.audioStateChange, 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
+          }),
           _react2.default.createElement(
             'div',
-            { 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(Timeline, {
-              fallbackRangelineClassNames: _fallbackRangelineClassNames2.default,
-              timeConvert: _utils.timeConvert,
-              duration: duration,
-              audioRef: this.refs.audio,
-              currentTime: currentTime,
-              startTime: startTime,
-              endTime: endTime,
-              timeLineBottom: _timeLineBottom2.default
-            })
+            { className: (0, _noImportant.css)(styles.waveAndTimes) },
+            _react2.default.createElement(
+              'div',
+              { className: (0, _noImportant.css)(styles.time, styles.currentTime) },
+              (0, _utils.timeConvert)(currentTime)
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },
+              loading ? _react2.default.createElement(Loader, null) : _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(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, styles.totalTime) },
-            (0, _utils.timeConvert)(duration - currentTime)
-          )
-        ),
-        _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' }),
-        caption ? _react2.default.createElement(_Caption2.default, { caption: caption }) : null
+          _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() {
+              if (on.close) on.close({ url: src });
+            }, name: 'fermer' }),
+          caption && _react2.default.createElement(_Caption2.default, { caption: caption })
+        )
       );
     }
   }]);
@@ -290,9 +329,49 @@ var Player = function (_Component) {
 
 /**** PLAYER COMPONENTS ****/
 
-var PlayWrapper = function PlayWrapper(_ref) {
-  var play = _ref.play,
-      audioRef = _ref.audioRef;
+var Loader = function Loader() {
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _noImportant.css)(styles.loader) },
+    _react2.default.createElement(
+      'span',
+      { className: (0, _noImportant.css)(styles.loaderText) },
+      'chargement en cours'
+    ),
+    _react2.default.createElement(
+      'span',
+      { className: (0, _noImportant.css)(styles.loaderOne) },
+      '.'
+    ),
+    _react2.default.createElement(
+      'span',
+      { className: (0, _noImportant.css)(styles.loaderTwo) },
+      '.'
+    ),
+    _react2.default.createElement(
+      'span',
+      { className: (0, _noImportant.css)(styles.loaderThree) },
+      '.'
+    )
+  );
+};
+
+var Title = function Title(_ref) {
+  var content = _ref.content;
+  return _react2.default.createElement('div', { className: (0, _noImportant.css)(styles.title), dangerouslySetInnerHTML: { __html: content } });
+};
+
+var Content = function Content(_ref2) {
+  var children = _ref2.children;
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _noImportant.css)(styles.content) },
+    children
+  );
+};
+var PlayWrapper = function PlayWrapper(_ref3) {
+  var play = _ref3.play,
+      audioRef = _ref3.audioRef;
   return _react2.default.createElement(
     'div',
     { className: (0, _noImportant.css)(styles.play_and_stop), onClick: function onClick() {
@@ -302,9 +381,9 @@ var PlayWrapper = function PlayWrapper(_ref) {
   );
 };
 
-var SpeedWrapper = function SpeedWrapper(_ref2) {
-  var speed = _ref2.speed,
-      audioRef = _ref2.audioRef;
+var SpeedWrapper = function SpeedWrapper(_ref4) {
+  var speed = _ref4.speed,
+      audioRef = _ref4.audioRef;
   return _react2.default.createElement(
     'div',
     { className: 'Speed_menu ' + (0, _noImportant.css)(styles.speed_menu) },
@@ -314,9 +393,9 @@ var SpeedWrapper = function SpeedWrapper(_ref2) {
   );
 };
 
-var LoopWrapper = function LoopWrapper(_ref3) {
-  var loop = _ref3.loop,
-      audioRef = _ref3.audioRef;
+var LoopWrapper = function LoopWrapper(_ref5) {
+  var loop = _ref5.loop,
+      audioRef = _ref5.audioRef;
   return _react2.default.createElement(
     'div',
     { onClick: function onClick() {
@@ -326,18 +405,18 @@ var LoopWrapper = function LoopWrapper(_ref3) {
   );
 };
 
-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;
+var WaveTimeline = function WaveTimeline(_ref6) {
+  var currentTime = _ref6.currentTime,
+      containerWidth = _ref6.containerWidth,
+      startTime = _ref6.startTime,
+      endTime = _ref6.endTime,
+      loading = _ref6.loading,
+      waveform = _ref6.waveform,
+      fallbackTimelineClassNames = _ref6.fallbackTimelineClassNames,
+      timeConvert = _ref6.timeConvert,
+      duration = _ref6.duration,
+      audioRef = _ref6.audioRef,
+      timelineClassNames = _ref6.timelineClassNames;
   return _react2.default.createElement(
     'div',
     { className: (0, _noImportant.css)(styles.wavetimeline) },
@@ -354,9 +433,9 @@ var WaveTimeline = function WaveTimeline(_ref4) {
       formatLabel: timeConvert,
       maxValue: Math.round(duration) || 1,
       minValue: 0,
-      onChange: function onChange(c, _ref5) {
-        var min = _ref5.min,
-            max = _ref5.max;
+      onChange: function onChange(c, _ref7) {
+        var min = _ref7.min,
+            max = _ref7.max;
         return audioRef.setRange({ startTime: min, endTime: max });
       },
       value: { min: startTime, max: endTime }
@@ -374,15 +453,15 @@ var WaveTimeline = function WaveTimeline(_ref4) {
   );
 };
 
-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;
+var Timeline = function Timeline(_ref8) {
+  var fallbackRangelineClassNames = _ref8.fallbackRangelineClassNames,
+      timeConvert = _ref8.timeConvert,
+      duration = _ref8.duration,
+      audioRef = _ref8.audioRef,
+      currentTime = _ref8.currentTime,
+      startTime = _ref8.startTime,
+      endTime = _ref8.endTime,
+      timeLineBottom = _ref8.timeLineBottom;
   return _react2.default.createElement(
     'div',
     { className: (0, _noImportant.css)(styles.fallback) },
@@ -391,9 +470,9 @@ var Timeline = function Timeline(_ref6) {
       formatLabel: timeConvert,
       maxValue: Math.round(duration) || 1,
       minValue: 0,
-      onChange: function onChange(c, _ref7) {
-        var min = _ref7.min,
-            max = _ref7.max;
+      onChange: function onChange(c, _ref9) {
+        var min = _ref9.min,
+            max = _ref9.max;
         return audioRef.setRange({ startTime: min, endTime: max });
       },
       value: { min: startTime, max: endTime }
@@ -410,9 +489,9 @@ var Timeline = function Timeline(_ref6) {
   );
 };
 
-var VolumeIcon = function VolumeIcon(_ref8) {
-  var audioRef = _ref8.audioRef,
-      volume = _ref8.volume;
+var VolumeIcon = function VolumeIcon(_ref10) {
+  var audioRef = _ref10.audioRef,
+      volume = _ref10.volume;
   return _react2.default.createElement(
     'div',
     { className: (0, _noImportant.css)(styles.iconAudio), onClick: function onClick() {
@@ -422,10 +501,10 @@ var VolumeIcon = function VolumeIcon(_ref8) {
   );
 };
 
-var VolumeRange = function VolumeRange(_ref9) {
-  var volumeClassNames = _ref9.volumeClassNames,
-      volume = _ref9.volume,
-      audioRef = _ref9.audioRef;
+var VolumeRange = function VolumeRange(_ref11) {
+  var volumeClassNames = _ref11.volumeClassNames,
+      volume = _ref11.volume,
+      audioRef = _ref11.audioRef;
   return _react2.default.createElement(
     'div',
     { className: 'Volume ' + (0, _noImportant.css)(styles.volume) },

package/player/styles/styles.js

@@ -15,13 +15,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 exports.default = {
   player: _defineProperty({
     position: 'fixed',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
     boxShadow: '0 0 7px rgba(0, 0, 0, 0.32)',
     backgroundColor: '#fff',
     bottom: 0,
-    height: 120,
+    height: 156,
     zIndex: 10000000,
     width: '90%',
     marginLeft: '50%',
@@ -63,6 +60,21 @@ exports.default = {
     order: 2,
     margin: '0px 28px'
   }),
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 20,
+    height: 85
+  },
+  title: {
+    color: '#474f6f',
+    fontSize: '10px',
+    fontWeight: 'bold',
+    lineHeight: '36px',
+    paddingLeft: '15px',
+    borderBottom: '1px solid #e6e6e7'
+  },
   play_and_stop: (_play_and_stop = {
     height: '100%',
     width: 40
@@ -76,10 +88,22 @@ exports.default = {
   wavetimeline: _defineProperty({}, _mediaQueries.MOBILE, {
     display: 'none'
   }),
+  loader: {
+    height: 60,
+    color: '#00b3df',
+    fontSize: 10,
+    fontWeight: 'bold',
+    lineHeight: '60px',
+    textAlign: 'center'
+  },
+  loaderText: {
+    textTransform: 'uppercase'
+  },
+  loaderOne: {},
+  loaderTwo: {},
+  loaderThree: {},
   timeline: _defineProperty({
-    //width: 'calc(100% - 520px)',
     width: '100%',
-    height: 60,
     margin: '0px 20px',
     position: 'relative',
     display: 'flex',

package/stories/player.js

@@ -46,11 +46,30 @@ var PlayerExample = function (_Component) {
           autoPlay = _props.autoPlay,
           caption = _props.caption;
 
+      var cb = {
+        loadStart: function loadStart(_ref) {
+          var url = _ref.url;
+          console.log("load start");
+        },
+        loadSuccess: function loadSuccess(_ref2) {
+          var url = _ref2.url,
+              duration = _ref2.duration;
+          console.log("load success", url, duration);
+        },
+        play: function play(_ref3) {
+          var url = _ref3.url;
+          console.log("play", url);
+        },
+        pause: function pause(_ref4) {
+          var url = _ref4.url;
+          console.log("pause", url);
+        }
+      };
       return _react2.default.createElement(
         'div',
         null,
-        _react2.default.createElement('input', { style: { width: 'calc(100% - 20px)', padding: 10 }, onChange: function onChange(_ref) {
-            var value = _ref.target.value;
+        _react2.default.createElement('input', { style: { width: 'calc(100% - 20px)', padding: 10 }, onChange: function onChange(_ref5) {
+            var value = _ref5.target.value;
             return _this2.setState({ url: value });
           }, value: this.state.url }),
         _react2.default.createElement(
@@ -67,7 +86,7 @@ var PlayerExample = function (_Component) {
             'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3'
           )
         ),
-        _react2.default.createElement(_player2.default, { autoPlay: autoPlay, src: this.state.url, ranges: ranges, visible: true, caption: caption })
+        _react2.default.createElement(_player2.default, { title: 'Audio: un audio de la BBC', on: cb, autoPlay: autoPlay, src: this.state.url, ranges: ranges, visible: true, caption: caption })
       );
     }
   }]);