@lls/lls-audio 0.0.77 → 0.0.78

package/package.json

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

package/player/Play.js

@@ -37,42 +37,10 @@ var generateStyles = function generateStyles(_ref) {
       cursor: 'pointer'
     },
     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': -1,
-      'background-color': 'transparent',
-      'width': 0,
-      'height': 0,
-      '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': transitionDuration ? 'transform ' + transitionDuration + 's ease' : 'none'
-    },
-    left: {
-      'height': '100%',
-      'float': 'left',
-      'background-color': invert ? '' + _colors.BLUE : '#fff',
-      'width': '36%',
-      'overflow': 'hidden'
-    },
-    right: {
-      'height': '100%',
-      'float': 'right',
-      'width': '36%',
-      'background-color': invert ? '' + _colors.BLUE : '#fff'
+      outline: 'none',
+      border: '0px solid',
+      background: 'transparent',
+      fill: '#fff'
     }
   });
 };
@@ -91,25 +59,15 @@ var Play = function Play(_ref2) {
       props = _objectWithoutProperties(_ref2, ['pause', 'invert', 'transitionDuration', 'className', 'size']);
 
   var styles = generateStyles({ size: size, invert: invert, transitionDuration: transitionDuration });
-  var pauseTriangle1 = pause ? {
-    transform: 'translate(0, -50%)'
-  } : {};
-  var pauseTriangle2 = pause ? {
-    transform: 'translate(0, 50%)'
-  } : {};
-  var pauseLine = pause ? {
-    'width': '50%'
-  } : {};
+
   return _react2.default.createElement(
     'div',
     _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) },
-      _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) })
+      'svg',
+      { className: (0, _noImportant.css)(styles.play_button), width: '100%', height: '100%', viewBox: '0 0 36 36' },
+      pause && _react2.default.createElement('path', { id: 'play-icon', d: 'M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28' }),
+      !pause && _react2.default.createElement('path', { id: 'pause-icon', d: 'M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26' })
     )
   );
 };

package/stories/player.js

@@ -31,7 +31,7 @@ var PlayerExample = function (_Component) {
     var _this = _possibleConstructorReturn(this, (PlayerExample.__proto__ || Object.getPrototypeOf(PlayerExample)).call(this, props));
 
     _this.state = {
-      url: 'https://lls-media-public-dev.s3-eu-west-1.amazonaws.com/audios_texttospeech/Emma_1182114.mp3'
+      url: 'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3'
     };
     return _this;
   }