@lls/lls-audio 0.0.16 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -34,11 +34,11 @@
     "node": ">=0.12.0"
   },
   "repository": {
-    "url": "github.com/lelivrescolaire/lls-ui"
+    "url": "github.com/lelivrescolaire/sound-poke"
   },
   "scripts": {
     "start": "npm run storybook",
-    "storybook": "start-storybook -p 9009 -s dist/stories",
+    "storybook": "start-storybook -p 9009",
     "deploy-storybook": "storybook-to-ghpages",
     "build": "rm -rf dist && mkdir dist && babel -d dist src",
     "copy:package": "cp -R package.json dist/",

package/player/Audio.js

@@ -28,6 +28,8 @@ var Player = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, (Player.__proto__ || Object.getPrototypeOf(Player)).call(this, props));
 
+    _this.requestAnimationId = null;
+
     _this.play = function () {
       return _this.refs.player.play();
     };
@@ -65,12 +67,27 @@ var Player = function (_Component) {
       return _this.setStateWithCallback({ currentTime: _this.getCurrentTime() });
     };
 
+    _this.watchAudioUpdate = function () {
+      var step = function step(timestamp) {
+        if (_this.getCurrentTime() !== _this.state.currentTime) {
+          _this.setStateWithCallback({ currentTime: _this.getCurrentTime() });
+        }
+        _this.requestAnimationId = requestAnimationFrame(step);
+      };
+
+      _this.requestAnimationId = requestAnimationFrame(step);
+    };
+
     _this.onPlay = function () {
-      return _this.setStateWithCallback({ play: true });
+      _this.setStateWithCallback({ play: true }, function () {
+        return _this.watchAudioUpdate();
+      });
     };
 
     _this.onPause = function () {
-      return _this.setStateWithCallback({ play: false });
+      _this.setStateWithCallback({ play: false }, function () {
+        return cancelAnimationFrame(_this.requestAnimationId);
+      });
     };
 
     _this.onEnded = function () {
@@ -92,7 +109,7 @@ var Player = function (_Component) {
       duration: 0
     };
 
-    (0, _utils.autoBind)(['onEnded', 'onDurationChange', 'onAudioUpdate', 'onPlay', 'onPause'], _this);
+    (0, _utils.autoBind)(['onEnded', 'onDurationChange', 'onPlay', 'onPause', 'onAudioUpdate'], _this);
 
     // Execute callback onChange props
     _this.setStateWithCallback = function (state) {
@@ -139,14 +156,13 @@ var Player = function (_Component) {
     key: 'componentDidMount',
     value: function componentDidMount() {
       this.props.onChange(this.state);
-
       var player = this.refs.player;
 
       player.addEventListener('ended', this.onEnded);
       player.addEventListener('durationchange', this.onDurationChange);
-      player.addEventListener('timeupdate', this.onAudioUpdate);
       player.addEventListener('play', this.onPlay);
       player.addEventListener('pause', this.onPause);
+      player.addEventListener('timeupdate', this.onAudioUpdate);
     }
   }, {
     key: 'componentWillUnmount',
@@ -155,9 +171,9 @@ var Player = function (_Component) {
 
       player.removeEventListener('ended', this.onEnded);
       player.removeEventListener('durationchange', this.onDurationChange);
-      player.removeEventListener('timeupdate', this.onAudioUpdate);
       player.removeEventListener('play', this.onPlay);
       player.removeEventListener('pause', this.onPause);
+      player.removeEventListener('timeupdate', this.onAudioUpdate);
     }
   }, {
     key: 'getCurrentTime',
@@ -168,6 +184,7 @@ var Player = function (_Component) {
           startTime = _state$currentRange.startTime,
           endTime = _state$currentRange.endTime,
           loop = _state.loop;
+
       // check if current time is in the middle of current range
 
       if (currentTime > endTime || currentTime < startTime) {
@@ -183,6 +200,7 @@ var Player = function (_Component) {
       var duration = this.refs.player.duration;
 
       this.setStateWithCallback({
+        play: false,
         currentTime: 0,
         duration: duration,
         currentRange: { startTime: 0, endTime: duration }

package/player/index.js

@@ -84,7 +84,20 @@ var Player = function (_Component) {
       return _this.refs.audio.setRange(range);
     };
 
-    _this.state = { waveform: false, loading: true, containerWidth: 0 };
+    _this.toggleVisible = function () {
+      var visible = _this.state.visible;
+
+      _this.setState({
+        visible: !visible
+      });
+    };
+
+    _this.state = {
+      waveform: false,
+      loading: true,
+      containerWidth: 0,
+      visible: true
+    };
     _this.setContainerWidth = (0, _utils.debounce)(_this.setContainerWidth.bind(_this), 500);
     _this.onKeyPress = _this.onKeyPress.bind(_this);
     return _this;
@@ -109,7 +122,7 @@ var Player = function (_Component) {
   }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(newProps) {
-      if (newProps.src !== this.props.src) {
+      if (newProps.src !== this.props.src || newProps.visible !== newProps.visible) {
         this.initialize(newProps);
       }
     }
@@ -138,10 +151,16 @@ var Player = function (_Component) {
     value: function initialize(props) {
       var _this3 = this;
 
-      var src = props.src;
+      var src = props.src,
+          _props$visible = props.visible,
+          visible = _props$visible === undefined ? true : _props$visible;
 
       (0, _audio.getWaveform)(src).then(function (waveform) {
-        _this3.setState({ waveform: waveform, loading: false });
+        _this3.setState({
+          waveform: waveform,
+          loading: false,
+          visible: visible
+        });
       });
     }
   }, {
@@ -161,7 +180,8 @@ 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,
+          visible = _state.visible;
       var _currentRange$startTi = currentRange.startTime,
           startTime = _currentRange$startTi === undefined ? 0 : _currentRange$startTi,
           _currentRange$endTime = currentRange.endTime,
@@ -169,7 +189,7 @@ var Player = function (_Component) {
 
       return _react2.default.createElement(
         'div',
-        { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) + ' ' + className },
+        { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) + ' ' + className + ' ' + (visible ? '' : (0, _noImportant.css)(styles.hidden)) },
         _react2.default.createElement(
           'div',
           { className: (0, _noImportant.css)(styles.play_and_stop), onClick: function onClick() {
@@ -213,7 +233,10 @@ var Player = function (_Component) {
           _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('div', { className: 'Close ' + (0, _noImportant.css)(styles.close), onClick: function onClick() {
+            return _this4.toggleVisible();
+          } })
       );
     }
   }]);

package/player/styles/styles.js

@@ -60,5 +60,18 @@ exports.default = {
     ':hover': {
       overflow: 'visible'
     }
-  })
+  }),
+  close: {
+    cursor: 'pointer',
+    position: 'absolute',
+    top: 1,
+    right: 3,
+    ':after': {
+      content: "'✖'",
+      color: '#e5e5e5'
+    }
+  },
+  hidden: {
+    display: 'none'
+  }
 };

package/player/styles/timelineClassNames.js

@@ -55,8 +55,7 @@ var styles = exports.styles = _noImportant.StyleSheet.create({
   },
   trackActive: {
     backgroundColor: 'transparent'
-  },
-  sliderContainer: {}
+  }
 });
 
 exports.default = (0, _utils.concatStyle)(_sliderDefaultClassNames2.default, styles);