@lls/lls-audio 0.0.49 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/player/Play.js +28 -33
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lls/lls-audio",
3
- "version": "0.0.49",
3
+ "version": "0.0.50",
4
4
  "main": "index.js",
5
5
  "devDependencies": {
6
6
  "@kadira/storybook": "^2.21.0",
package/player/Play.js CHANGED
@@ -20,14 +20,17 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
20
20
 
21
21
  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; }
22
22
 
23
- var generateStyles = function generateStyles(size) {
23
+ var generateStyles = function generateStyles(_ref) {
24
24
  var _play_button_wrapper;
25
25
 
26
+ var size = _ref.size,
27
+ invert = _ref.invert,
28
+ transitionDuration = _ref.transitionDuration;
26
29
  return _noImportant.StyleSheet.create({
27
30
  play_button_wrapper: (_play_button_wrapper = {
28
31
  height: '100%',
29
32
  width: size * 2.5
30
- }, _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),
33
+ }, _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),
31
34
  play_button: {
32
35
  'height': size,
33
36
  'width': size,
@@ -48,51 +51,43 @@ var generateStyles = function generateStyles(size) {
48
51
  'background-color': 'transparent',
49
52
  'width': 0,
50
53
  'height': 0,
51
- 'border-right': size + 'px solid ' + _colors.BLUE,
54
+ 'border-right': invert ? size + 'px solid white' : size + 'px solid ' + _colors.BLUE,
52
55
  'border-top': size / 2 + 'px solid transparent',
53
56
  'border-bottom': size / 2 + 'px solid transparent',
54
- 'transition': 'transform 0.25s ease'
57
+ 'transition': transitionDuration ? 'transform ' + transitionDuration + 's ease' : 'none'
55
58
  },
56
59
  left: {
57
60
  'height': '100%',
58
61
  'float': 'left',
59
- 'background-color': '#fff',
62
+ 'background-color': invert ? '' + _colors.BLUE : '#fff',
60
63
  'width': '36%',
61
- 'transition': 'all 0.25s ease',
64
+ 'transition': transitionDuration ? 'all ' + transitionDuration + 's ease' : 'none',
62
65
  'overflow': 'hidden'
63
66
  },
64
67
  right: {
65
68
  'height': '100%',
66
69
  'float': 'right',
67
70
  'width': '36%',
68
- 'background-color': '#fff',
69
- 'transition': 'all 0.25s ease'
70
- },
71
- /* Color inversion */
72
- invert: {
73
- 'background-color': _colors.BLUE + '!important'
74
- },
75
- triangle_invert: {
76
- 'border-right': size + 'px solid white!important'
77
- },
78
- play_button_wrapper_invert: {
79
- backgroundColor: 'white!important'
71
+ 'background-color': invert ? '' + _colors.BLUE : '#fff',
72
+ 'transition': transitionDuration ? 'all ' + transitionDuration + 's ease' : 'none'
80
73
  }
81
74
  });
82
75
  };
83
76
 
84
- var Play = function Play(_ref) {
85
- var _ref$pause = _ref.pause,
86
- pause = _ref$pause === undefined ? true : _ref$pause,
87
- _ref$invert = _ref.invert,
88
- invert = _ref$invert === undefined ? false : _ref$invert,
89
- _ref$className = _ref.className,
90
- className = _ref$className === undefined ? '' : _ref$className,
91
- _ref$size = _ref.size,
92
- size = _ref$size === undefined ? 16 : _ref$size,
93
- props = _objectWithoutProperties(_ref, ['pause', 'invert', 'className', 'size']);
77
+ var Play = function Play(_ref2) {
78
+ var _ref2$pause = _ref2.pause,
79
+ pause = _ref2$pause === undefined ? true : _ref2$pause,
80
+ _ref2$invert = _ref2.invert,
81
+ invert = _ref2$invert === undefined ? false : _ref2$invert,
82
+ _ref2$transitionDurat = _ref2.transitionDuration,
83
+ transitionDuration = _ref2$transitionDurat === undefined ? 0.25 : _ref2$transitionDurat,
84
+ _ref2$className = _ref2.className,
85
+ className = _ref2$className === undefined ? '' : _ref2$className,
86
+ _ref2$size = _ref2.size,
87
+ size = _ref2$size === undefined ? 16 : _ref2$size,
88
+ props = _objectWithoutProperties(_ref2, ['pause', 'invert', 'transitionDuration', 'className', 'size']);
94
89
 
95
- var styles = generateStyles(size);
90
+ var styles = generateStyles({ size: size, invert: invert, transitionDuration: transitionDuration });
96
91
  var pauseTriangle1 = pause ? {
97
92
  transform: 'translate(0, -50%)'
98
93
  } : {};
@@ -108,10 +103,10 @@ var Play = function Play(_ref) {
108
103
  _react2.default.createElement(
109
104
  'div',
110
105
  { className: (0, _noImportant.css)(styles.play_button) },
111
- _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.left) + ' ' + (invert && (0, _noImportant.css)(styles.invert)) }),
112
- _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.right) + ' ' + (invert && (0, _noImportant.css)(styles.invert)) }),
113
- _react2.default.createElement('div', { style: pauseTriangle1, className: (0, _noImportant.css)(styles.triangle, styles.triangle_1) + ' ' + (invert && (0, _noImportant.css)(styles.triangle_invert)) }),
114
- _react2.default.createElement('div', { style: pauseTriangle2, className: (0, _noImportant.css)(styles.triangle, styles.triangle_2) + ' ' + (invert && (0, _noImportant.css)(styles.triangle_invert)) })
106
+ _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.left) }),
107
+ _react2.default.createElement('div', { style: pauseLine, className: (0, _noImportant.css)(styles.right) }),
108
+ _react2.default.createElement('div', { style: pauseTriangle1, className: (0, _noImportant.css)(styles.triangle, styles.triangle_1) }),
109
+ _react2.default.createElement('div', { style: pauseTriangle2, className: (0, _noImportant.css)(styles.triangle, styles.triangle_2) })
115
110
  )
116
111
  );
117
112
  };