@desynova-digital/player 3.9.6 → 3.9.8

package/components/AudioMeter.js

@@ -1,75 +1,56 @@
-'use strict';
+"use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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); } }
-
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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; }
-
+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, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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) {
+var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: -12px;\n  height: 100%;\n  overflow: hidden;\n  .range {\n    color: #aaaaaa;\n    font-family: SFUIText-Medium;\n    text-align: right;\n    font-size: 8px;\n    box-sizing: border-box;\n  }\n"])));
+var MeterBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  .track-block {\n    position: relative;\n    width: 15px;\n    height: 100%;\n    overflow: visible;\n    &.left-track,\n    &.right-track {\n      &:after {\n        position: absolute;\n        color: #aaaaaa;\n        bottom: -12px;\n        font-size: 10px;\n        left: 50%;\n        transform: translateX(-50%);\n        font-family: SFUIText-Regular;\n      }\n    }\n    &.left-track:after {\n      content: 'L';\n    }\n    &.right-track:after {\n      content: 'R';\n    }\n  }\n"])));
+var ColorMeter = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to top,\n    #00c8e7,\n    #00e6b9 57%,\n    #ff8d29 83%,\n    #f6462c\n  );\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  .stack-block {\n    height: 2px;\n    margin-bottom: 3px;\n    background: #000000;\n  }\n"])));
+var BlackMeter = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: #000000;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  height: 100%;\n  transition: all 0.25s ease-in-out;\n  -moz-transition: all 0.25s ease-in-out;\n  -webkit-transition: all 0.25s ease-in-out;\n  -ms-transition: all 0.25s ease-in-out;\n  -o-transition: all 0.25s ease-in-out;\n  .stack-block {\n    height: 2px;\n    margin-bottom: 3px;\n    background: #304153;\n  }\n"])));
+var AudioMute = (0, _styledComponents["default"])('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: -20px;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #aaaaaa;\n  cursor: pointer;\n"])));
+var AudioMeter = /*#__PURE__*/function (_Component) {
   _inherits(AudioMeter, _Component);
-
+  var _super = _createSuper(AudioMeter);
   function AudioMeter(props, context) {
+    var _this;
     _classCallCheck(this, AudioMeter);
-
-    var _this = _possibleConstructorReturn(this, (AudioMeter.__proto__ || Object.getPrototypeOf(AudioMeter)).call(this, props, context));
-
+    _this = _super.call(this, props, context);
     _this.state = {
       stacksArr: [],
       rangeArray: [],
@@ -82,30 +63,28 @@ var AudioMeter = function (_Component) {
     _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);
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    _this.getNoOfStacks = _this.getNoOfStacks.bind(_assertThisInitialized(_this));
+    _this.maskSize = _this.maskSize.bind(_assertThisInitialized(_this));
+    _this.updateMeter = _this.updateMeter.bind(_assertThisInitialized(_this));
+    _this.paintMeter = _this.paintMeter.bind(_assertThisInitialized(_this));
     return _this;
   }
-
   _createClass(AudioMeter, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
       var player = this.props.player;
-
       if (player.hasStarted) {
         this.initializeMeter();
       }
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.disconnectMeter();
     }
   }, {
-    key: 'disconnectMeter',
+    key: "disconnectMeter",
     value: function disconnectMeter() {
       if (this.sourceNode && this.meterNode) {
         this.sourceNode.disconnect(this.meterNode);
@@ -113,21 +92,20 @@ var AudioMeter = function (_Component) {
       }
     }
   }, {
-    key: 'getBaseLog',
+    key: "getBaseLog",
     value: function getBaseLog(x, y) {
       return Math.log(y) / Math.log(x);
     }
   }, {
-    key: 'getNoOfStacks',
+    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) {
+          var stackArr = _toConsumableArray(Array(stacksLength)).map(function (x, i) {
             return i;
           });
           var numOfSteps = Math.round(height / 30);
@@ -151,7 +129,7 @@ var AudioMeter = function (_Component) {
       }
     }
   }, {
-    key: 'createMeterNode',
+    key: "createMeterNode",
     value: function createMeterNode() {
       var c = this.sourceNode.channelCount;
       this.meterNode = this.audioCtx.createScriptProcessor(2048, c, c);
@@ -160,13 +138,13 @@ var AudioMeter = function (_Component) {
       return this.meterNode;
     }
   }, {
-    key: 'createMeter',
+    key: "createMeter",
     value: function createMeter(meterNode) {
       meterNode.onaudioprocess = this.updateMeter;
       this.paintMeter();
     }
   }, {
-    key: 'updateMeter',
+    key: "updateMeter",
     value: function updateMeter(audioProcessingEvent) {
       var inputBuffer = audioProcessingEvent.inputBuffer;
       var i = 0;
@@ -189,7 +167,7 @@ var AudioMeter = function (_Component) {
       }
     }
   }, {
-    key: 'maskSize',
+    key: "maskSize",
     value: function maskSize(floatVal) {
       var returnVal = Math.floor(this.dbFromFloat(floatVal) * 100 / this.dbRange);
       if (returnVal > 100) {
@@ -199,19 +177,18 @@ var AudioMeter = function (_Component) {
       }
     }
   }, {
-    key: 'dbFromFloat',
+    key: "dbFromFloat",
     value: function dbFromFloat(floatVal) {
       return this.getBaseLog(10, floatVal) * 20;
     }
   }, {
-    key: 'paintMeter',
+    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);
+        var elem = document.getElementById("channel-".concat(i));
         if (elem) {
           if (i === 0 && !leftPan) {
             elem.style.height = '100%';
@@ -225,10 +202,9 @@ var AudioMeter = function (_Component) {
       window.requestAnimationFrame(this.paintMeter);
     }
   }, {
-    key: 'muteAudio',
+    key: "muteAudio",
     value: function muteAudio(position) {
       var audioPan = this.state.audioPan;
-
       var leftPan = audioPan.left;
       var rightPan = audioPan.right;
       switch (position) {
@@ -263,7 +239,7 @@ var AudioMeter = function (_Component) {
       });
     }
   }, {
-    key: 'initializeMeter',
+    key: "initializeMeter",
     value: function initializeMeter() {
       this.getNoOfStacks();
       var myVideo = document.querySelector('video');
@@ -273,7 +249,6 @@ var AudioMeter = function (_Component) {
       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);
 
@@ -292,12 +267,11 @@ var AudioMeter = function (_Component) {
       this.createMeter(meterNode);
     }
   }, {
-    key: 'UNSAFE_componentWillReceiveProps',
+    key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var _props = this.props,
-          height = _props.height,
-          player = _props.player;
-
+      var _this$props = this.props,
+        height = _this$props.height,
+        player = _this$props.player;
       if (height && height !== newProps.height) {
         this.getNoOfStacks();
       }
@@ -306,109 +280,91 @@ var AudioMeter = function (_Component) {
       }
     }
   }, {
-    key: 'handleClick',
+    key: "handleClick",
     value: function handleClick() {}
   }, {
-    key: 'render',
+    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;
-            }
+      var _this$state = this.state,
+        stacksArr = _this$state.stacksArr,
+        rangeArray = _this$state.rangeArray,
+        unitBlockHeight = _this$state.unitBlockHeight,
+        audioPan = _this$state.audioPan;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, null, rangeArray.map(function (range) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: 'range' + range,
+          style: {
+            height: unitBlockHeight + 'px'
           },
-          _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' })
-            )
-          )
-        )
-      );
+          className: "range"
+        }, range);
+      })), /*#__PURE__*/_react["default"].createElement(MeterBlock, {
+        ref: function ref(meterBlockRef) {
+          _this2._meterBlockRef = meterBlockRef;
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "track-block left-track"
+      }, /*#__PURE__*/_react["default"].createElement(ColorMeter, null, stacksArr.map(function (num) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "stack-block",
+          key: num
+        });
+      })), /*#__PURE__*/_react["default"].createElement(BlackMeter, {
+        id: "channel-0"
+      }, stacksArr.map(function (num) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "stack-block",
+          key: num
+        });
+      })), /*#__PURE__*/_react["default"].createElement(AudioMute, {
+        onClick: function onClick() {
+          _this2.muteAudio('left');
+        }
+      }, audioPan.left ? /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "volume",
+        width: 14,
+        height: 14,
+        color: "#aaaaaa"
+      }) : /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "mute",
+        width: 14,
+        height: 14,
+        color: "#aaaaaa"
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "track-block right-track"
+      }, /*#__PURE__*/_react["default"].createElement(ColorMeter, null, stacksArr.map(function (num) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "stack-block",
+          key: num
+        });
+      })), /*#__PURE__*/_react["default"].createElement(BlackMeter, {
+        id: "channel-1"
+      }, stacksArr.map(function (num) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "stack-block",
+          key: num
+        });
+      })), /*#__PURE__*/_react["default"].createElement(AudioMute, {
+        onClick: function onClick() {
+          _this2.muteAudio('right');
+        }
+      }, audioPan.right ? /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "volume",
+        width: 14,
+        height: 14,
+        color: "#aaaaaa"
+      }) : /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "mute",
+        width: 14,
+        height: 14,
+        color: "#aaaaaa"
+      })))));
     }
   }]);
-
   return AudioMeter;
 }(_react.Component);
-
-exports.default = AudioMeter;
-
-
+exports["default"] = AudioMeter;
 AudioMeter.propTypes = propTypes;
 AudioMeter.defaultProps = defaultProps;
 AudioMeter.displayName = 'AudioMeter';