@lls/lls-audio 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -19,7 +19,7 @@
     "react-dom": "15.3.1"
   },
   "dependencies": {
-    "@lls/lls-icons": "1.0.37",
+    "@lls/lls-icons": "1.0.39",
     "@lls/lls-ui": "0.1.19",
     "aphrodite": "^1.1.0",
     "is_js": "^0.9.0",

package/player/Caption.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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 _noImportant = require('aphrodite/no-important');
+
+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 _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; }
+
+//Components
+
+
+var styles = _noImportant.StyleSheet.create({
+  captionWrapper: {
+    position: 'absolute',
+    bottom: 5,
+    left: 5
+  },
+  caption: {
+    boxShadow: '0 0 7px rgba(0, 0, 0, 0.32)',
+    padding: 10,
+    backgroundColor: '#FFF',
+    position: 'relative',
+    bottom: 16,
+    right: 16
+  },
+  triangle: {
+    width: 13,
+    height: 10,
+    position: 'absolute',
+    top: 21,
+    overflow: 'hidden',
+    boxShadow: '0 16px 10px -17px rgba(0, 0, 0, 0.5)',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      width: 10,
+      height: 10,
+      background: '#FFF',
+      transform: 'rotate(45deg)',
+      top: -5,
+      left: 1,
+      boxShadow: '0 0 7px rgba(0, 0, 0, 0.32)'
+    }
+  }
+});
+
+var Caption = function (_Component) {
+  _inherits(Caption, _Component);
+
+  function Caption(props) {
+    _classCallCheck(this, Caption);
+
+    var _this = _possibleConstructorReturn(this, (Caption.__proto__ || Object.getPrototypeOf(Caption)).call(this, props));
+
+    _this.state = { displayCaption: false };
+    return _this;
+  }
+
+  _createClass(Caption, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var caption = this.props.caption;
+      var displayCaption = this.state.displayCaption;
+
+
+      return _react2.default.createElement(
+        'figcaption',
+        {
+          className: 'Caption_wrapper ' + (0, _noImportant.css)(styles.captionWrapper),
+          onClick: function onClick() {
+            return _this2.toggleCaption();
+          },
+          onMouseEnter: function onMouseEnter() {
+            return _this2.showCaption();
+          },
+          onMouseLeave: function onMouseLeave() {
+            return _this2.hideCaption();
+          }
+        },
+        displayCaption ? _react2.default.createElement(
+          'div',
+          { className: 'Display_on_hover' },
+          _react2.default.createElement('div', { className: 'Caption ' + (0, _noImportant.css)(styles.caption), dangerouslySetInnerHTML: { __html: caption } }),
+          _react2.default.createElement('div', { className: 'Triangle ' + (0, _noImportant.css)(styles.triangle) })
+        ) : null,
+        _react2.default.createElement(_llsIcons2.default, { name: 'caption', className: 'Caption_icon' })
+      );
+    }
+  }, {
+    key: 'toggleCaption',
+    value: function toggleCaption() {
+      var displayCaption = this.state.displayCaption;
+
+      this.setState({ displayCaption: !displayCaption });
+    }
+  }, {
+    key: 'showCaption',
+    value: function showCaption() {
+      this.setState({ displayCaption: true });
+    }
+  }, {
+    key: 'hideCaption',
+    value: function hideCaption() {
+      this.setState({ displayCaption: false });
+    }
+  }]);
+
+  return Caption;
+}(_react.Component);
+
+exports.default = Caption;

package/player/CustomWave.js

@@ -94,8 +94,8 @@ var _initialiseProps = function _initialiseProps() {
         currentTime = props.currentTime;
     var pixels_per_second = waveform.pixels_per_second;
 
-    var maxWidth = _this2.refs.canvas.width;
-    var maxHeight = _this2.refs.canvas.height;
+    var maxWidth = _this2.refs.canvas.clientWidth;
+    var maxHeight = _this2.refs.canvas.clientHeight;
 
     // Duration and step calculation
     var maxDuration = totalTime || waveform.duration;

package/player/index.js

@@ -76,6 +76,10 @@ var _Range = require('./Range');
 
 var _Range2 = _interopRequireDefault(_Range);
 
+var _Caption = require('./Caption');
+
+var _Caption2 = _interopRequireDefault(_Caption);
+
 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"); } }
@@ -192,7 +196,9 @@ var Player = function (_Component) {
           _props$onClickDeleteR = _props.onClickDeleteRange,
           onClickDeleteRange = _props$onClickDeleteR === undefined ? false : _props$onClickDeleteR,
           _props$preload = _props.preload,
-          preload = _props$preload === undefined ? 'auto' : _props$preload;
+          preload = _props$preload === undefined ? 'auto' : _props$preload,
+          _props$caption = _props.caption,
+          caption = _props$caption === undefined ? '' : _props$caption;
       var _state = this.state,
           loading = _state.loading,
           duration = _state.duration,
@@ -273,7 +279,8 @@ var Player = function (_Component) {
         _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' })
+          }, name: 'fermer' }),
+        caption ? _react2.default.createElement(_Caption2.default, { caption: caption }) : null
       );
     }
   }]);

package/stories/index.js

@@ -26,6 +26,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   return _react2.default.createElement(_playerRange2.default, null);
 }).add('Autoplay', function () {
   return _react2.default.createElement(_player2.default, { autoPlay: true });
+}).add('Caption', function () {
+  return _react2.default.createElement(_player2.default, { caption: 'Je suis une caption :)' });
 });
 //import PlayerCustom from './playerCustom'
 

package/stories/player.js

@@ -43,7 +43,8 @@ var PlayerExample = function (_Component) {
 
       var _props = this.props,
           ranges = _props.ranges,
-          autoPlay = _props.autoPlay;
+          autoPlay = _props.autoPlay,
+          caption = _props.caption;
 
       return _react2.default.createElement(
         'div',
@@ -66,7 +67,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 })
+        _react2.default.createElement(_player2.default, { autoPlay: autoPlay, src: this.state.url, ranges: ranges, visible: true, caption: caption })
       );
     }
   }]);