@desynova-digital/player 3.9.6 → 4.0.0

package/components/AudioMeter.js

@@ -1,414 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _components = require('@desynova-digital/components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var propTypes = {
-  height: _propTypes.PropTypes.number,
-  player: _propTypes.PropTypes.instanceOf(Object)
-};
-
-var defaultProps = {
-  height: 0
-};
-
-var RangeBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'AudioMeter__RangeBlock',
-  componentId: 'sc-5gt1e5-0'
-})(['position:absolute;right:-12px;height:100%;overflow:hidden;.range{color:#aaaaaa;font-family:SFUIText-Medium;text-align:right;font-size:8px;box-sizing:border-box;}']);
-
-var MeterBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'AudioMeter__MeterBlock',
-  componentId: 'sc-5gt1e5-1'
-})(['width:100%;height:100%;position:absolute;left:0;top:0;display:flex;justify-content:space-evenly;align-items:center;.track-block{position:relative;width:15px;height:100%;overflow:visible;&.left-track,&.right-track{&:after{position:absolute;color:#aaaaaa;bottom:-12px;font-size:10px;left:50%;transform:translateX(-50%);font-family:SFUIText-Regular;}}&.left-track:after{content:\'L\';}&.right-track:after{content:\'R\';}}']);
-
-var ColorMeter = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'AudioMeter__ColorMeter',
-  componentId: 'sc-5gt1e5-2'
-})(['width:100%;height:100%;background:linear-gradient( to top,#00c8e7,#00e6b9 57%,#ff8d29 83%,#f6462c );position:absolute;left:0;top:0;z-index:1;.stack-block{height:2px;margin-bottom:3px;background:#000000;}']);
-
-var BlackMeter = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'AudioMeter__BlackMeter',
-  componentId: 'sc-5gt1e5-3'
-})(['width:100%;background:#000000;position:absolute;left:0;top:0;z-index:1;height:100%;transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-webkit-transition:all 0.25s ease-in-out;-ms-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;.stack-block{height:2px;margin-bottom:3px;background:#304153;}']);
-
-var AudioMute = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'AudioMeter__AudioMute',
-  componentId: 'sc-5gt1e5-4'
-})(['position:absolute;top:-20px;left:50%;transform:translateX(-50%);color:#aaaaaa;cursor:pointer;']);
-
-var AudioMeter = function (_Component) {
-  _inherits(AudioMeter, _Component);
-
-  function AudioMeter(props, context) {
-    _classCallCheck(this, AudioMeter);
-
-    var _this = _possibleConstructorReturn(this, (AudioMeter.__proto__ || Object.getPrototypeOf(AudioMeter)).call(this, props, context));
-
-    _this.state = {
-      stacksArr: [],
-      rangeArray: [],
-      unitBlockHeight: 30,
-      audioPan: {
-        left: true,
-        right: true
-      }
-    };
-    _this.dbRange = -48;
-    _this.channelCount = 2;
-    _this.maskSizes = ['100%', '100%'];
-    _this.handleClick = _this.handleClick.bind(_this);
-    _this.getNoOfStacks = _this.getNoOfStacks.bind(_this);
-    _this.maskSize = _this.maskSize.bind(_this);
-    _this.updateMeter = _this.updateMeter.bind(_this);
-    _this.paintMeter = _this.paintMeter.bind(_this);
-    return _this;
-  }
-
-  _createClass(AudioMeter, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var player = this.props.player;
-
-      if (player.hasStarted) {
-        this.initializeMeter();
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.disconnectMeter();
-    }
-  }, {
-    key: 'disconnectMeter',
-    value: function disconnectMeter() {
-      if (this.sourceNode && this.meterNode) {
-        this.sourceNode.disconnect(this.meterNode);
-        this.meterNode.disconnect(this.audioCtx.destination);
-      }
-    }
-  }, {
-    key: 'getBaseLog',
-    value: function getBaseLog(x, y) {
-      return Math.log(y) / Math.log(x);
-    }
-  }, {
-    key: 'getNoOfStacks',
-    value: function getNoOfStacks() {
-      if (this._meterBlockRef) {
-        var stacksArr = this.state.stacksArr;
-
-        var stackHeight = 5;
-        var height = this._meterBlockRef.offsetHeight;
-        if (height) {
-          var stacksLength = Math.round(height / stackHeight);
-          var stackArr = [].concat(_toConsumableArray(Array(stacksLength))).map(function (x, i) {
-            return i;
-          });
-          var numOfSteps = Math.round(height / 30);
-          var singleStep = Math.round(this.dbRange / numOfSteps) || 1;
-          if (singleStep > 1) {
-            singleStep = Math.ceil(singleStep / 2) * 2;
-          }
-          var unitArray = [];
-          for (var i = this.dbRange; i < 0 - singleStep / 2; i = i - singleStep) {
-            unitArray.push(i);
-          }
-          var blockHeight = parseFloat(height / unitArray.length);
-          if (stacksArr !== stackArr) {
-            this.setState({
-              stacksArr: stackArr,
-              rangeArray: unitArray.reverse(),
-              unitBlockHeight: blockHeight
-            });
-          }
-        }
-      }
-    }
-  }, {
-    key: 'createMeterNode',
-    value: function createMeterNode() {
-      var c = this.sourceNode.channelCount;
-      this.meterNode = this.audioCtx.createScriptProcessor(2048, c, c);
-      this.sourceNode.connect(this.meterNode);
-      this.meterNode.connect(this.audioCtx.destination);
-      return this.meterNode;
-    }
-  }, {
-    key: 'createMeter',
-    value: function createMeter(meterNode) {
-      meterNode.onaudioprocess = this.updateMeter;
-      this.paintMeter();
-    }
-  }, {
-    key: 'updateMeter',
-    value: function updateMeter(audioProcessingEvent) {
-      var inputBuffer = audioProcessingEvent.inputBuffer;
-      var i = 0;
-      var channelData = [];
-      var channelMaxes = [];
-      for (i = 0; i < this.channelCount; i++) {
-        channelData[i] = inputBuffer.getChannelData(i);
-        channelMaxes[i] = 0.0;
-      }
-      for (var sample = 0; sample < inputBuffer.length; sample++) {
-        for (i = 0; i < this.channelCount; i++) {
-          if (Math.abs(channelData[i][sample]) > channelMaxes[i]) {
-            channelMaxes[i] = Math.abs(channelData[i][sample]);
-          }
-        }
-      }
-      for (i = 0; i < this.channelCount; i++) {
-        var size = this.maskSize(channelMaxes[i]);
-        this.maskSizes[i] = size + '%';
-      }
-    }
-  }, {
-    key: 'maskSize',
-    value: function maskSize(floatVal) {
-      var returnVal = Math.floor(this.dbFromFloat(floatVal) * 100 / this.dbRange);
-      if (returnVal > 100) {
-        return 100;
-      } else {
-        return returnVal;
-      }
-    }
-  }, {
-    key: 'dbFromFloat',
-    value: function dbFromFloat(floatVal) {
-      return this.getBaseLog(10, floatVal) * 20;
-    }
-  }, {
-    key: 'paintMeter',
-    value: function paintMeter() {
-      for (var i = 0; i < this.channelCount; i++) {
-        var audioPan = this.state.audioPan;
-
-        var leftPan = audioPan.left;
-        var rightPan = audioPan.right;
-        var elem = document.getElementById('channel-' + i);
-        if (elem) {
-          if (i === 0 && !leftPan) {
-            elem.style.height = '100%';
-          } else if (i === 1 && !rightPan) {
-            elem.style.height = '100%';
-          } else {
-            elem.style.height = this.maskSizes[i];
-          }
-        }
-      }
-      window.requestAnimationFrame(this.paintMeter);
-    }
-  }, {
-    key: 'muteAudio',
-    value: function muteAudio(position) {
-      var audioPan = this.state.audioPan;
-
-      var leftPan = audioPan.left;
-      var rightPan = audioPan.right;
-      switch (position) {
-        case 'left':
-          leftPan = !leftPan;
-          break;
-        case 'right':
-          rightPan = !rightPan;
-          break;
-      }
-      if (leftPan && rightPan) {
-        this.gainL.connect(this.merger, 0, 0);
-        this.gainR.connect(this.merger, 0, 1);
-      }
-      if (!leftPan && rightPan) {
-        this.gainL.disconnect();
-        this.gainR.connect(this.merger, 0, 1);
-      }
-      if (leftPan && !rightPan) {
-        this.gainL.connect(this.merger, 0, 0);
-        this.gainR.disconnect();
-      }
-      if (!leftPan && !rightPan) {
-        this.gainL.disconnect();
-        this.gainR.disconnect();
-      }
-      this.setState({
-        audioPan: {
-          left: leftPan,
-          right: rightPan
-        }
-      });
-    }
-  }, {
-    key: 'initializeMeter',
-    value: function initializeMeter() {
-      this.getNoOfStacks();
-      var myVideo = document.querySelector('video');
-      this.audioCtx = this.audioCtx || new window.AudioContext();
-      this.audioCtx.createGain = this.audioCtx.createGain || this.audioCtx.createGainNode; //fallback for gain naming
-      this.gainL = this.audioCtx.createGain();
-      this.gainR = this.audioCtx.createGain();
-      this.merger = this.audioCtx.createChannelMerger(2);
-      var splitter = this.audioCtx.createChannelSplitter(2);
-
-      this.sourceNode = this.sourceNode || this.audioCtx.createMediaElementSource(myVideo);
-      this.sourceNode.connect(splitter, 0, 0);
-
-      //Connect splitter' outputs to each Gain Nodes
-      splitter.connect(this.gainL, 0);
-      splitter.connect(this.gainR, 1);
-
-      /*
-       *Connect Left and Right Nodes to the output
-       *Assuming stereo as initial status
-       */
-      this.gainL.connect(this.merger, 0, 0);
-      this.gainR.connect(this.merger, 0, 1);
-      this.merger.connect(this.audioCtx.destination, 0, 0);
-      var meterNode = this.createMeterNode();
-      this.createMeter(meterNode);
-    }
-  }, {
-    key: 'UNSAFE_componentWillReceiveProps',
-    value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var _props = this.props,
-          height = _props.height,
-          player = _props.player;
-
-      if (height && height !== newProps.height) {
-        this.getNoOfStacks();
-      }
-      if (player.hasStarted !== newProps.player.hasStarted && newProps.player.hasStarted) {
-        this.initializeMeter();
-      }
-    }
-  }, {
-    key: 'handleClick',
-    value: function handleClick() {}
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _state = this.state,
-          stacksArr = _state.stacksArr,
-          rangeArray = _state.rangeArray,
-          unitBlockHeight = _state.unitBlockHeight,
-          audioPan = _state.audioPan;
-
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        _react2.default.createElement(
-          RangeBlock,
-          null,
-          rangeArray.map(function (range) {
-            return _react2.default.createElement(
-              'div',
-              {
-                key: 'range' + range,
-                style: { height: unitBlockHeight + 'px' },
-                className: 'range'
-              },
-              range
-            );
-          })
-        ),
-        _react2.default.createElement(
-          MeterBlock,
-          {
-            ref: function ref(meterBlockRef) {
-              _this2._meterBlockRef = meterBlockRef;
-            }
-          },
-          _react2.default.createElement(
-            'div',
-            { className: 'track-block left-track' },
-            _react2.default.createElement(
-              ColorMeter,
-              null,
-              stacksArr.map(function (num) {
-                return _react2.default.createElement('div', { className: 'stack-block', key: num });
-              })
-            ),
-            _react2.default.createElement(
-              BlackMeter,
-              { id: 'channel-0' },
-              stacksArr.map(function (num) {
-                return _react2.default.createElement('div', { className: 'stack-block', key: num });
-              })
-            ),
-            _react2.default.createElement(
-              AudioMute,
-              {
-                onClick: function onClick() {
-                  _this2.muteAudio('left');
-                }
-              },
-              audioPan.left ? _react2.default.createElement(_components.Icon, { name: 'volume', width: 14, height: 14, color: '#aaaaaa' }) : _react2.default.createElement(_components.Icon, { name: 'mute', width: 14, height: 14, color: '#aaaaaa' })
-            )
-          ),
-          _react2.default.createElement(
-            'div',
-            { className: 'track-block right-track' },
-            _react2.default.createElement(
-              ColorMeter,
-              null,
-              stacksArr.map(function (num) {
-                return _react2.default.createElement('div', { className: 'stack-block', key: num });
-              })
-            ),
-            _react2.default.createElement(
-              BlackMeter,
-              { id: 'channel-1' },
-              stacksArr.map(function (num) {
-                return _react2.default.createElement('div', { className: 'stack-block', key: num });
-              })
-            ),
-            _react2.default.createElement(
-              AudioMute,
-              {
-                onClick: function onClick() {
-                  _this2.muteAudio('right');
-                }
-              },
-              audioPan.right ? _react2.default.createElement(_components.Icon, { name: 'volume', width: 14, height: 14, color: '#aaaaaa' }) : _react2.default.createElement(_components.Icon, { name: 'mute', width: 14, height: 14, color: '#aaaaaa' })
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return AudioMeter;
-}(_react.Component);
-
-exports.default = AudioMeter;
-
-
-AudioMeter.propTypes = propTypes;
-AudioMeter.defaultProps = defaultProps;
-AudioMeter.displayName = 'AudioMeter';

package/components/BigPlayButton.js

@@ -1,110 +0,0 @@
-'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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _components = require('@desynova-digital/components');
-
-var _colors = require('../colors');
-
-var _colors2 = _interopRequireDefault(_colors);
-
-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"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-// import { colors } from '@desynova-digital/tokens';
-
-
-var propTypes = {
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  player: _propTypes.PropTypes.instanceOf(Object)
-};
-
-var defaultProps = {
-  actions: {},
-  player: {}
-};
-
-var PlayButton = (0, _styledComponents2.default)(_components.Button).withConfig({
-  displayName: 'BigPlayButton__PlayButton',
-  componentId: 'sc-o6dg96-0'
-})(['background:', ';width:100px;height:100px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:none;z-index:1;&:hover,&:focus{background:', ';}'], function (props) {
-  return _colors2.default.common.video[props.assetType].buttonGradient;
-}, function (props) {
-  return _colors2.default.common.video[props.assetType].buttonGradient;
-});
-
-var BigPlayButton = function (_Component) {
-  _inherits(BigPlayButton, _Component);
-
-  function BigPlayButton(props, context) {
-    _classCallCheck(this, BigPlayButton);
-
-    var _this = _possibleConstructorReturn(this, (BigPlayButton.__proto__ || Object.getPrototypeOf(BigPlayButton)).call(this, props, context));
-
-    _this.handleClick = _this.handleClick.bind(_this);
-    return _this;
-  }
-
-  _createClass(BigPlayButton, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {}
-  }, {
-    key: 'handleClick',
-    value: function handleClick() {
-      var actions = this.props.actions;
-
-      actions.play();
-      actions.handleVideoRewind(false);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var player = this.props.player;
-
-      return _react2.default.createElement(
-        _react.Fragment,
-        null,
-        !player.hasStarted || !player.currentSrc || player.paused && !player.rewindActive ? _react2.default.createElement(PlayButton, _extends({
-          display: 'rounded',
-          appearance: 'cta',
-          icon: 'play',
-          iconWidth: 20,
-          iconHeight: 26,
-          width: 100,
-          height: 100,
-          tabIndex: '0',
-          onClick: this.handleClick
-        }, this.props)) : null
-      );
-    }
-  }]);
-
-  return BigPlayButton;
-}(_react.Component);
-
-exports.default = BigPlayButton;
-
-
-BigPlayButton.propTypes = propTypes;
-BigPlayButton.defaultProps = defaultProps;
-BigPlayButton.displayName = 'BigPlayButton';