@lls/lls-audio 0.0.48 → 0.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",

package/player/Play.js

@@ -20,14 +20,17 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 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 generateStyles = function generateStyles(size) {
+var generateStyles = function generateStyles(_ref) {
   var _play_button_wrapper;
 
+  var size = _ref.size,
+      invert = _ref.invert,
+      transitionDuration = _ref.transitionDuration;
   return _noImportant.StyleSheet.create({
     play_button_wrapper: (_play_button_wrapper = {
       height: '100%',
       width: size * 2.5
-    }, _defineProperty(_play_button_wrapper, 'height', size * 2.5), _defineProperty(_play_button_wrapper, 'color', '#6d6d6d'), _defineProperty(_play_button_wrapper, 'textAlign', 'center'), _defineProperty(_play_button_wrapper, 'boxSizing', 'border-box'), _defineProperty(_play_button_wrapper, 'backgroundColor', _colors.BLUE), _defineProperty(_play_button_wrapper, 'borderRadius', '50%'), _defineProperty(_play_button_wrapper, 'display', 'flex'), _defineProperty(_play_button_wrapper, 'alignItems', 'center'), _defineProperty(_play_button_wrapper, 'justifyContent', 'center'), _defineProperty(_play_button_wrapper, 'cursor', 'pointer'), _play_button_wrapper),
+    }, _defineProperty(_play_button_wrapper, 'height', size * 2.5), _defineProperty(_play_button_wrapper, 'color', '#6d6d6d'), _defineProperty(_play_button_wrapper, 'textAlign', 'center'), _defineProperty(_play_button_wrapper, 'boxSizing', 'border-box'), _defineProperty(_play_button_wrapper, 'backgroundColor', invert ? 'white' : _colors.BLUE), _defineProperty(_play_button_wrapper, 'borderRadius', '50%'), _defineProperty(_play_button_wrapper, 'display', 'flex'), _defineProperty(_play_button_wrapper, 'alignItems', 'center'), _defineProperty(_play_button_wrapper, 'justifyContent', 'center'), _defineProperty(_play_button_wrapper, 'cursor', 'pointer'), _play_button_wrapper),
     play_button: {
       'height': size,
       'width': size,
@@ -44,44 +47,47 @@ var generateStyles = function generateStyles(size) {
     triangle: {
       'position': 'absolute',
       'top': 0,
-      'right': 0,
+      'right': -1,
       'background-color': 'transparent',
       'width': 0,
       'height': 0,
-      'border-right': size + 'px solid ' + _colors.BLUE,
+      'border-right': invert ? size + 'px solid white' : size + 'px solid ' + _colors.BLUE,
       'border-top': size / 2 + 'px solid transparent',
       'border-bottom': size / 2 + 'px solid transparent',
-      'transition': 'transform 0.25s ease'
+      'transition': transitionDuration ? 'transform ' + transitionDuration + 's ease' : 'none'
     },
     left: {
       'height': '100%',
       'float': 'left',
-      'background-color': '#fff',
+      'background-color': invert ? '' + _colors.BLUE : '#fff',
       'width': '36%',
-      'transition': 'all 0.25s ease',
+      'transition': transitionDuration ? 'all ' + transitionDuration + 's ease' : 'none',
       'overflow': 'hidden'
     },
-    'right': {
+    right: {
       'height': '100%',
       'float': 'right',
       'width': '36%',
-      'background-color': '#fff',
-      'transition': 'all 0.25s ease'
+      'background-color': invert ? '' + _colors.BLUE : '#fff',
+      'transition': transitionDuration ? 'all ' + transitionDuration + 's ease' : 'none'
     }
-
   });
 };
 
-var Play = function Play(_ref) {
-  var _ref$pause = _ref.pause,
-      pause = _ref$pause === undefined ? true : _ref$pause,
-      _ref$className = _ref.className,
-      className = _ref$className === undefined ? '' : _ref$className,
-      _ref$size = _ref.size,
-      size = _ref$size === undefined ? 16 : _ref$size,
-      props = _objectWithoutProperties(_ref, ['pause', 'className', 'size']);
+var Play = function Play(_ref2) {
+  var _ref2$pause = _ref2.pause,
+      pause = _ref2$pause === undefined ? true : _ref2$pause,
+      _ref2$invert = _ref2.invert,
+      invert = _ref2$invert === undefined ? false : _ref2$invert,
+      _ref2$transitionDurat = _ref2.transitionDuration,
+      transitionDuration = _ref2$transitionDurat === undefined ? 0.25 : _ref2$transitionDurat,
+      _ref2$className = _ref2.className,
+      className = _ref2$className === undefined ? '' : _ref2$className,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === undefined ? 16 : _ref2$size,
+      props = _objectWithoutProperties(_ref2, ['pause', 'invert', 'transitionDuration', 'className', 'size']);
 
-  var styles = generateStyles(size);
+  var styles = generateStyles({ size: size, invert: invert, transitionDuration: transitionDuration });
   var pauseTriangle1 = pause ? {
     transform: 'translate(0, -50%)'
   } : {};
@@ -93,7 +99,7 @@ var Play = function Play(_ref) {
   } : {};
   return _react2.default.createElement(
     'div',
-    _extends({ className: (0, _noImportant.css)(styles.play_button_wrapper) + ' ' + className }, props),
+    _extends({ className: (0, _noImportant.css)(styles.play_button_wrapper) + ' ' + (invert && (0, _noImportant.css)(styles.play_button_wrapper_invert)) + ' ' + className }, props),
     _react2.default.createElement(
       'div',
       { className: (0, _noImportant.css)(styles.play_button) },