@lls/lls-audio 0.0.39 → 0.0.41

package/package.json

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

package/player/Play.js

@@ -4,6 +4,8 @@ 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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -14,54 +16,70 @@ var _colors = require('./styles/colors');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = _noImportant.StyleSheet.create({
-  play_button: {
-    'height': 16,
-    'width': 16,
-    'display': 'block',
-    'overflow': 'hidden',
-    'position': 'relative'
-  },
-  left: {
-    'height': '100%',
-    'float': 'left',
-    'background-color': '#fff',
-    'width': '36%',
-    'transition': 'all 0.25s ease',
-    'overflow': 'hidden'
-  },
-  triangle_1: {
-    'transform': 'translate(0, -100%)'
-  },
-  triangle_2: {
-    'transform': 'translate(0, 100%)'
-  },
-  triangle: {
-    'position': 'absolute',
-    'top': 0,
-    'right': 0,
-    'background-color': 'transparent',
-    'width': 0,
-    'height': 0,
-    'border-right': '16px solid ' + _colors.BLUE,
-    'border-top': '8px solid transparent',
-    'border-bottom': '8px solid transparent',
-    'transition': 'transform 0.25s ease'
-  },
-  'right': {
-    'height': '100%',
-    'float': 'right',
-    'width': '36%',
-    'background-color': '#fff',
-    'transition': 'all 0.25s ease'
-  }
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-});
+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 _play_button_wrapper;
+
+  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),
+    play_button: {
+      'height': size,
+      'width': size,
+      'display': 'block',
+      'overflow': 'hidden',
+      'position': 'relative'
+    },
+    triangle_1: {
+      'transform': 'translate(0, -100%)'
+    },
+    triangle_2: {
+      'transform': 'translate(0, 100%)'
+    },
+    triangle: {
+      'position': 'absolute',
+      'top': 0,
+      'right': 0,
+      'background-color': 'transparent',
+      'width': 0,
+      'height': 0,
+      'border-right': size + 'px solid ' + _colors.BLUE,
+      'border-top': size / 2 + 'px solid transparent',
+      'border-bottom': size / 2 + 'px solid transparent',
+      'transition': 'transform 0.25s ease'
+    },
+    left: {
+      'height': '100%',
+      'float': 'left',
+      'background-color': '#fff',
+      'width': '36%',
+      'transition': 'all 0.25s ease',
+      'overflow': 'hidden'
+    },
+    'right': {
+      'height': '100%',
+      'float': 'right',
+      'width': '36%',
+      'background-color': '#fff',
+      'transition': 'all 0.25s ease'
+    }
+
+  });
+};
 
 var Play = function Play(_ref) {
   var _ref$pause = _ref.pause,
-      pause = _ref$pause === undefined ? true : _ref$pause;
+      pause = _ref$pause === undefined ? true : _ref$pause,
+      _ref$size = _ref.size,
+      size = _ref$size === undefined ? 16 : _ref$size,
+      props = _objectWithoutProperties(_ref, ['pause', 'size']);
 
+  var styles = generateStyles(size);
   var pauseTriangle1 = pause ? {
     transform: 'translate(0, -50%)'
   } : {};
@@ -73,11 +91,15 @@ var Play = function Play(_ref) {
   } : {};
   return _react2.default.createElement(
     'div',
-    { className: (0, _noImportant.css)(styles.play_button) },
-    _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.left) }),
-    _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.right) }),
-    _react2.default.createElement('div', { style: pauseTriangle1, className: (0, _noImportant.css)(styles.triangle, styles.triangle_1) }),
-    _react2.default.createElement('div', { style: pauseTriangle2, className: (0, _noImportant.css)(styles.triangle, styles.triangle_2) })
+    _extends({ className: (0, _noImportant.css)(styles.play_button_wrapper) }, props),
+    _react2.default.createElement(
+      'div',
+      { className: (0, _noImportant.css)(styles.play_button) },
+      _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.left) }),
+      _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.right) }),
+      _react2.default.createElement('div', { style: pauseTriangle1, className: (0, _noImportant.css)(styles.triangle, styles.triangle_1) }),
+      _react2.default.createElement('div', { style: pauseTriangle2, className: (0, _noImportant.css)(styles.triangle, styles.triangle_2) })
+    )
   );
 };
 

package/player/Speed.js

@@ -38,7 +38,7 @@ var styles = _aphrodite.StyleSheet.create({
     cursor: 'pointer',
     position: 'absolute',
     flexDirection: 'column',
-    top: -84,
+    top: -40,
     boxShadow: '0 0 3px rgba(0, 0, 0, 0.5)',
     backgroundColor: '#ffffff',
     color: _colors.GREY,

package/player/index.js

@@ -374,13 +374,9 @@ var Content = function Content(_ref2) {
 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() {
-        return play ? audioRef.pause() : audioRef.play();
-      } },
-    _react2.default.createElement(_Play2.default, { pause: !play })
-  );
+  return _react2.default.createElement(_Play2.default, { pause: !play, onClick: function onClick() {
+      return play ? audioRef.pause() : audioRef.play();
+    } });
 };
 
 var SpeedWrapper = function SpeedWrapper(_ref4) {

package/player/styles/styles.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _play_and_stop;
-
 var _colors = require('./colors');
 
 var _mediaQueries = require('./mediaQueries');
@@ -76,10 +74,6 @@ exports.default = {
     paddingLeft: '15px',
     borderBottom: '1px solid #e6e6e7'
   },
-  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: _defineProperty({
     marginTop: 5,
     position: 'relative'
@@ -114,12 +108,15 @@ exports.default = {
   }),
   repeat_menu: _defineProperty({
     margin: 10,
-    fontSize: 22,
+    marginTop: 14,
+    fontSize: 23,
     cursor: 'pointer'
   }, _mediaQueries.MOBILE, {
     marginRight: 37
   }),
-  speed_menu: {},
+  speed_menu: {
+    marginLeft: 10
+  },
   close: {
     cursor: 'pointer',
     position: 'absolute',