@lls/lls-audio 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -21,7 +21,6 @@
   "dependencies": {
     "aphrodite": "^1.1.0",
     "is_js": "^0.9.0",
-    "material-ui": "^0.16.5",
     "merge-audio-buffers": "^1.0.0",
     "msr": "^1.3.4",
     "react-input-range": "^0.9.3",

package/player/Loop.js

@@ -0,0 +1,62 @@
+'use strict';
+
+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);
+
+var _noImportant = require('aphrodite/no-important');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var beforeAfter = function beforeAfter(color) {
+  return {
+    position: 'absolute',
+    content: '""',
+    width: 0,
+    height: 0,
+    border: '6px solid transparent',
+    borderBottomColor: color
+  };
+};
+
+var makeStyle = function makeStyle(color) {
+  return _noImportant.StyleSheet.create({
+    loop: {
+      display: 'inline-block',
+      position: 'relative',
+      verticalAlign: 'middle',
+      width: 20,
+      height: 20,
+      border: '2px solid transparent',
+      borderRadius: '50%',
+      borderTopColor: color,
+      borderBottomColor: color,
+      ':after': _extends({}, beforeAfter(color), {
+        top: 1,
+        right: -7,
+        transform: 'rotate(135deg)'
+      }),
+      ':before': _extends({}, beforeAfter(color), {
+        top: 8,
+        left: -7,
+        transform: 'rotate(-45deg)'
+      })
+    }
+  });
+};
+
+var Loop = function Loop(_ref) {
+  var _ref$loop = _ref.loop,
+      loop = _ref$loop === undefined ? false : _ref$loop;
+  return _react2.default.createElement('span', {
+    className: (0, _noImportant.css)(makeStyle(loop ? '#a20025' : '#e5e5e5').loop)
+  });
+};
+
+exports.default = Loop;

package/player/Play.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _noImportant = require('aphrodite/no-important');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = _noImportant.StyleSheet.create({
+  play_button: {
+    'height': 16,
+    'width': 16,
+    'display': 'block',
+    'margin': '5px auto',
+    'overflow': 'hidden',
+    'position': 'relative'
+  },
+  left: {
+    'height': '100%',
+    'float': 'left',
+    'background-color': 'red',
+    '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 #fff',
+    'border-top': '8px solid transparent',
+    'border-bottom': '8px solid transparent',
+    'transition': 'transform 0.25s ease'
+  },
+  'right': {
+    'height': '100%',
+    'float': 'right',
+    'width': '36%',
+    'background-color': 'red',
+    'transition': 'all 0.25s ease'
+  }
+
+});
+
+var Play = function Play(_ref) {
+  var _ref$pause = _ref.pause,
+      pause = _ref$pause === undefined ? true : _ref$pause;
+
+  var pauseTriangle1 = pause ? {
+    transform: 'translate(0, -50%)'
+  } : {};
+  var pauseTriangle2 = pause ? {
+    transform: 'translate(0, 50%)'
+  } : {};
+  var pauseLine = pause ? {
+    'width': '50%'
+  } : {};
+  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) })
+  );
+};
+
+exports.default = Play;

package/player/Speed.js

@@ -31,7 +31,8 @@ var styles = _aphrodite.StyleSheet.create({
     }
   },
   speed_menu_item: {
-    padding: '28px 10px 0px 13px',
+    padding: '28px 0px 11px 0px',
+    textAlign: 'center',
     boxSizing: 'border-box'
   },
   speed_menu_low: {
@@ -39,6 +40,9 @@ var styles = _aphrodite.StyleSheet.create({
   },
   speed_menu_fast: {
     bottom: '1%'
+  },
+  icon: {
+    display: 'inline-block'
   }
 });
 
@@ -65,9 +69,9 @@ var Speed = function Speed(_ref) {
           return onSpeedChange(1.25);
         } },
       _react2.default.createElement(
-        _FontIcon2.default,
-        { style: { color: speed === 1.25 ? '#a20025' : '' }, className: 'material-icons' },
-        'exposure_plus_1'
+        'span',
+        { className: (0, _aphrodite.css)(styles.icon), style: { color: speed === 1.25 ? '#a20025' : '' } },
+        '+1'
       )
     ),
     _react2.default.createElement(
@@ -76,9 +80,9 @@ var Speed = function Speed(_ref) {
           return onSpeedChange(1);
         } },
       _react2.default.createElement(
-        _FontIcon2.default,
-        { style: { color: speed === 1 ? '#a20025' : '' }, className: 'material-icons' },
-        'exposure_zero'
+        'span',
+        { className: (0, _aphrodite.css)(styles.icon), style: { color: speed === 1 ? '#a20025' : '' } },
+        '0'
       )
     ),
     _react2.default.createElement(
@@ -87,9 +91,9 @@ var Speed = function Speed(_ref) {
           return onSpeedChange(0.75);
         } },
       _react2.default.createElement(
-        _FontIcon2.default,
-        { style: { color: speed === 0.75 ? '#a20025' : '' }, className: 'material-icons' },
-        'exposure_neg_1'
+        'span',
+        { className: (0, _aphrodite.css)(styles.icon), style: { color: speed === 0.75 ? '#a20025' : '' } },
+        '-1'
       )
     )
   );

package/player/index.js

@@ -54,6 +54,14 @@ var _Speed = require('./Speed');
 
 var _Speed2 = _interopRequireDefault(_Speed);
 
+var _Play = require('./Play');
+
+var _Play2 = _interopRequireDefault(_Play);
+
+var _Loop = require('./Loop');
+
+var _Loop2 = _interopRequireDefault(_Loop);
+
 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"); } }
@@ -161,11 +169,7 @@ var Player = function (_Component) {
           { className: (0, _noImportant.css)(styles.play_and_stop), onClick: function onClick() {
               return play ? _this4.refs.audio.pause() : _this4.refs.audio.play();
             } },
-          _react2.default.createElement(
-            _FontIcon2.default,
-            { className: 'material-icons' },
-            play ? 'pause' : 'play_arrow'
-          )
+          _react2.default.createElement(_Play2.default, { pause: !play })
         ),
         _react2.default.createElement(_Audio2.default, { onChange: function onChange(state) {
             return _this4.setState(_extends({}, state));
@@ -188,11 +192,7 @@ var Player = function (_Component) {
           { onClick: function onClick() {
               return _this4.refs.audio.setLoop(!_this4.state.loop);
             }, className: 'Repeat_menu ' + (0, _noImportant.css)(styles.repeat_menu) },
-          _react2.default.createElement(
-            _FontIcon2.default,
-            { style: { color: this.state.loop ? '#a20025' : '' }, className: 'material-icons' },
-            'loop'
-          )
+          _react2.default.createElement(_Loop2.default, { loop: this.state.loop })
         ),
         _react2.default.createElement(
           'div',

package/stories/index.js

@@ -28,16 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 //import PlayerCustom from './playerCustom'
 (0, _storybook.storiesOf)('Player', module).add('Custom waveform', function () {
-  return _react2.default.createElement(
-    _MuiThemeProvider2.default,
-    { muiTheme: (0, _getMuiTheme2.default)() },
-    _react2.default.createElement(_player2.default, null)
-  );
+  return _react2.default.createElement(_player2.default, null);
 });
 (0, _storybook.storiesOf)('Recorder', module).add('Normal', function () {
-  return _react2.default.createElement(
-    _MuiThemeProvider2.default,
-    { muiTheme: (0, _getMuiTheme2.default)() },
-    _react2.default.createElement(_recorder2.default, null)
-  );
+  return _react2.default.createElement(_recorder2.default, null);
 });