@lls/lls-audio 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -14,12 +14,13 @@
     "conventional-changelog": "^1.1.0",
     "conventional-changelog-cli": "^1.2.0",
     "@kadira/storybook-deployer": "^1.0.0",
-    "release-it": "^2.4.0"
+    "release-it": "^2.4.0",
+    "react": "15.3.1",
+    "react-dom": "15.3.1"
   },
   "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

@@ -12,9 +12,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _Wave = require('../player/Wave');
+var _CustomWave = require('../player/CustomWave');
 
-var _Wave2 = _interopRequireDefault(_Wave);
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
 
 var _audio = require('../utils/audio');
 
@@ -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));
@@ -173,7 +177,7 @@ var Player = function (_Component) {
         _react2.default.createElement(
           'div',
           { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },
-          _react2.default.createElement(_Wave2.default, { currentTime: currentTime, width: containerWidth, height: 50, range: { startTime: startTime, endTime: endTime }, isLoading: loading, waveform: waveform }),
+          _react2.default.createElement(_CustomWave2.default, { currentTime: currentTime, width: containerWidth, height: 50, range: { startTime: startTime, endTime: endTime }, isLoading: loading, waveform: waveform }),
           _react2.default.createElement(_reactInputRange2.default, { classNames: _fallbackTimelineClassNames2.default, formatLabel: _utils.timeConvert, maxValue: duration || 1, minValue: 0, onChange: function onChange(c, _ref) {
               var min = _ref.min,
                   max = _ref.max;
@@ -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/recorder/DesktopAudioRecorder.js

@@ -10,9 +10,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _Wave = require('../player/Wave');
+var _CustomWave = require('../player/CustomWave');
 
-var _Wave2 = _interopRequireDefault(_Wave);
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
 
 var _audioContext = require('../utils/audioContext');
 
@@ -95,7 +95,7 @@ var DesktopAudioRecorder = function (_Component) {
             } },
           ' record '
         ),
-        waveform ? _react2.default.createElement(_Wave2.default, {
+        waveform ? _react2.default.createElement(_CustomWave2.default, {
           width: 500,
           currentTime: 0,
           totalTime: 200,

package/stories/index.js

@@ -18,10 +18,6 @@ var _player = require('./player');
 
 var _player2 = _interopRequireDefault(_player);
 
-var _customPlayer = require('./customPlayer');
-
-var _customPlayer2 = _interopRequireDefault(_customPlayer);
-
 var _recorder = require('./recorder');
 
 var _recorder2 = _interopRequireDefault(_recorder);
@@ -31,23 +27,9 @@ require('../common/material-ui.css');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 //import PlayerCustom from './playerCustom'
-(0, _storybook.storiesOf)('Player', module).add('Soundclound waveform', function () {
-  return _react2.default.createElement(
-    _MuiThemeProvider2.default,
-    { muiTheme: (0, _getMuiTheme2.default)() },
-    _react2.default.createElement(_player2.default, null)
-  );
-}).add('Custom waveform', function () {
-  return _react2.default.createElement(
-    _MuiThemeProvider2.default,
-    { muiTheme: (0, _getMuiTheme2.default)() },
-    _react2.default.createElement(_customPlayer2.default, null)
-  );
+(0, _storybook.storiesOf)('Player', module).add('Custom waveform', function () {
+  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);
 });

package/common/waveform.js

@@ -1,181 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-/* This is a custom (temporary version) of http://waveformjs.org/
-* because these idiots dont do npms packages.
-* I also removed the soundcloud stuff that was useless
-*/
-function Waveform(options) {
-  this.container = options.container;
-  this.canvas = options.canvas;
-  this.data = options.data || [];
-  this.outerColor = options.outerColor || "transparent";
-  this.innerColor = options.innerColor || "#000000";
-  this.interpolate = true;
-  if (options.interpolate === false) {
-    this.interpolate = false;
-  }
-  if (this.canvas == null) {
-    if (this.container) {
-      this.canvas = this.createCanvas(this.container, options.width || this.container.clientWidth, options.height || this.container.clientHeight);
-    } else {
-      throw "Either canvas or container option must be passed";
-    }
-  }
-  this.patchCanvasForIE(this.canvas);
-  this.context = this.canvas.getContext("2d");
-  this.width = parseInt(this.context.canvas.width, 10);
-  this.height = parseInt(this.context.canvas.height, 10);
-  if (options.data) {
-    this.update(options);
-  }
-}
-
-Waveform.prototype.setData = function (data) {
-  return this.data = data;
-};
-
-Waveform.prototype.setDataInterpolated = function (data) {
-  return this.setData(this.interpolateArray(data, this.width));
-};
-
-Waveform.prototype.setDataCropped = function (data) {
-  return this.setData(this.expandArray(data, this.width));
-};
-
-Waveform.prototype.update = function (options) {
-  if (options.interpolate != null) {
-    this.interpolate = options.interpolate;
-  }
-  if (this.interpolate === false) {
-    this.setDataCropped(options.data);
-  } else {
-    this.setDataInterpolated(options.data);
-  }
-  return this.redraw();
-};
-
-Waveform.prototype.redraw = function () {
-  var d, i, middle, t, _i, _len, _ref, _results;
-  this.clear();
-  if (typeof this.innerColor === "function") {
-    this.context.fillStyle = this.innerColor();
-  } else {
-    this.context.fillStyle = this.innerColor;
-  }
-  middle = this.height / 2;
-  i = 0;
-  _ref = this.data;
-  _results = [];
-  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-    d = _ref[_i];
-    t = this.width / this.data.length;
-    if (typeof this.innerColor === "function") {
-      this.context.fillStyle = this.innerColor(i / this.width, d);
-    }
-    this.context.clearRect(t * i, middle - middle * d, t, middle * d * 2);
-    this.context.fillRect(t * i, middle - middle * d, t, middle * d * 2);
-    _results.push(i++);
-  }
-  return _results;
-};
-
-Waveform.prototype.clear = function () {
-  this.context.fillStyle = this.outerColor;
-  this.context.clearRect(0, 0, this.width, this.height);
-  return this.context.fillRect(0, 0, this.width, this.height);
-};
-
-Waveform.prototype.patchCanvasForIE = function (canvas) {
-  var oldGetContext;
-  if (typeof window.G_vmlCanvasManager !== "undefined") {
-    canvas = window.G_vmlCanvasManager.initElement(canvas);
-    oldGetContext = canvas.getContext;
-    return canvas.getContext = function (a) {
-      var ctx;
-      ctx = oldGetContext.apply(canvas, arguments);
-      canvas.getContext = oldGetContext;
-      return ctx;
-    };
-  }
-};
-
-Waveform.prototype.createCanvas = function (container, width, height) {
-  var canvas;
-  canvas = document.createElement("canvas");
-  container.appendChild(canvas);
-  canvas.width = width;
-  canvas.height = height;
-  return canvas;
-};
-
-Waveform.prototype.expandArray = function (data, limit, defaultValue) {
-  var i, newData, _i, _ref;
-  if (defaultValue == null) {
-    defaultValue = 0.0;
-  }
-  newData = [];
-  if (data.length > limit) {
-    newData = data.slice(data.length - limit, data.length);
-  } else {
-    for (i = _i = 0, _ref = limit - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
-      newData[i] = data[i] || defaultValue;
-    }
-  }
-  return newData;
-};
-
-Waveform.prototype.linearInterpolate = function (before, after, atPoint) {
-  return before + (after - before) * atPoint;
-};
-
-Waveform.prototype.interpolateArray = function (data, fitCount) {
-  var after, atPoint, before, i, newData, springFactor, tmp;
-  newData = new Array();
-  springFactor = new Number((data.length - 1) / (fitCount - 1));
-  newData[0] = data[0];
-  i = 1;
-  while (i < fitCount - 1) {
-    tmp = i * springFactor;
-    before = new Number(Math.floor(tmp)).toFixed();
-    after = new Number(Math.ceil(tmp)).toFixed();
-    atPoint = tmp - before;
-    newData[i] = this.linearInterpolate(data[before], data[after], atPoint);
-    i++;
-  }
-  newData[fitCount - 1] = data[data.length - 1];
-  return newData;
-};
-
-Waveform.prototype.optionsForSyncedStream = function (options) {
-  var innerColorWasSet, that;
-  if (options == null) {
-    options = {};
-  }
-  innerColorWasSet = false;
-  that = this;
-  return {
-    whileplaying: this.redraw,
-    whileloading: function whileloading() {
-      var stream;
-      if (!innerColorWasSet) {
-        stream = this;
-        that.innerColor = function (x, y) {
-          if (x < stream.position / stream.durationEstimate) {
-            return options.playedColor || "rgba(255,  102, 0, 0.8)";
-          } else if (x < stream.bytesLoaded / stream.bytesTotal) {
-            return options.loadedColor || "rgba(0, 0, 0, 0.8)";
-          } else {
-            return options.defaultColor || "rgba(0, 0, 0, 0.4)";
-          }
-        };
-        innerColorWasSet = true;
-      }
-      return this.redraw;
-    }
-  };
-};
-
-exports.default = Waveform;