@desynova-digital/player 3.9.7 → 3.9.8

package/components/Playlist.js

@@ -1,58 +1,43 @@
-'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 }; }
-
+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;
+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 _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) } })); }
 /*
  * import { play } from '../actions/player';
  * import { colors } from '@desynova-digital/tokens';
- */
-
-// import colors from '../colors';
-
+ */ // import colors from '../colors';
 var propTypes = {
   playlist: _propTypes.PropTypes.instanceOf(Array),
   videoId: _propTypes.PropTypes.string,
   playlistClick: _propTypes.PropTypes.func
 };
-
-var PlaylistContainer = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'Playlist__PlaylistContainer',
-  componentId: 'sc-pwroms-0'
-})(['', '{display:none;}'], _components.Carousel.Header);
-
-var PlaylistCarousel = (0, _styledComponents2.default)(_components.Carousel).withConfig({
-  displayName: 'Playlist__PlaylistCarousel',
-  componentId: 'sc-pwroms-1'
-})(['width:100%;']);
-
-var PlaylistCard = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'Playlist__PlaylistCard',
-  componentId: 'sc-pwroms-2'
-})(['width:143px;height:80px;opacity:', ';background:url(', ') 50% 50%/100% auto no-repeat;transform:', ';transition:all 550ms cubic-bezier(0.02,0.01,0.47,1);cursor:', ';pointer-events:', ';&:hover{opacity:1;transform:translateY(0px);}.asset-filename{text-shadow:0 2px 4px rgba(0,0,0,0.7);font-family:SFUIText-Medium;font-size:12px;line-height:1;color:#ffffff;text-align:left;height:auto;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;line-height:17px;padding:5px;}'], function (props) {
+var PlaylistContainer = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    display: none;\n  }\n"])), _components.Carousel.Header);
+var PlaylistCarousel = (0, _styledComponents["default"])(_components.Carousel)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+var PlaylistCard = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 143px;\n  height: 80px;\n  opacity: ", ";\n  background: url(", ") 50% 50%/100% auto no-repeat;\n  transform: ", ";\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n  cursor: ", ";\n  pointer-events: ", ";\n  &:hover {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n  .asset-filename {\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    line-height: 1;\n    color: #ffffff;\n    text-align: left;\n    height: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n    line-height: 17px;\n    padding: 5px;\n  }\n"])), function (props) {
   return props.active ? '1' : '0.5';
 }, function (props) {
   return props.thumbnail;
@@ -63,71 +48,47 @@ var PlaylistCard = (0, _styledComponents2.default)('div').withConfig({
 }, function (props) {
   return props.active ? 'none' : 'all';
 });
-
-var Playlist = function (_Component) {
+var Playlist = /*#__PURE__*/function (_Component) {
   _inherits(Playlist, _Component);
-
+  var _super = _createSuper(Playlist);
   function Playlist(props, context) {
     _classCallCheck(this, Playlist);
-
-    return _possibleConstructorReturn(this, (Playlist.__proto__ || Object.getPrototypeOf(Playlist)).call(this, props, context));
+    return _super.call(this, props, context);
   }
-
   _createClass(Playlist, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {}
   }, {
-    key: 'handleCardClick',
+    key: "handleCardClick",
     value: function handleCardClick(ingest_db_id) {
       var playlistClick = this.props.playlistClick;
-
       if (playlistClick) {
         playlistClick(ingest_db_id);
       }
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          playlist = _props.playlist,
-          videoId = _props.videoId;
-
-      return _react2.default.createElement(
-        PlaylistContainer,
-        null,
-        playlist && playlist.length ? _react2.default.createElement(
-          PlaylistCarousel,
-          null,
-          playlist.map(function (asset) {
-            return _react2.default.createElement(
-              PlaylistCard,
-              {
-                key: asset.ingest_db_id,
-                thumbnail: asset.thumbnail,
-                active: videoId === asset.ingest_db_id,
-                onClick: function onClick() {
-                  _this2.handleCardClick(asset.ingest_db_id);
-                }
-              },
-              _react2.default.createElement(
-                'p',
-                { className: 'asset-filename' },
-                asset.filename || asset.asset_name
-              )
-            );
-          })
-        ) : null
-      );
+      var _this = this;
+      var _this$props = this.props,
+        playlist = _this$props.playlist,
+        videoId = _this$props.videoId;
+      return /*#__PURE__*/_react["default"].createElement(PlaylistContainer, null, playlist && playlist.length ? /*#__PURE__*/_react["default"].createElement(PlaylistCarousel, null, playlist.map(function (asset) {
+        return /*#__PURE__*/_react["default"].createElement(PlaylistCard, {
+          key: asset.ingest_db_id,
+          thumbnail: asset.thumbnail,
+          active: videoId === asset.ingest_db_id,
+          onClick: function onClick() {
+            _this.handleCardClick(asset.ingest_db_id);
+          }
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          className: "asset-filename"
+        }, asset.filename || asset.asset_name));
+      })) : null);
     }
   }]);
-
   return Playlist;
 }(_react.Component);
-
-exports.default = Playlist;
-
-
+exports["default"] = Playlist;
 Playlist.propTypes = propTypes;
 Playlist.displayName = 'Playlist';

package/components/PointersBar.js

@@ -1,36 +1,38 @@
-'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 _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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _components = require('@desynova-digital/components');
-
-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; } /* eslint-disable jsx-a11y/mouse-events-have-key-events */
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = require("prop-types");
+var _components = require("@desynova-digital/components");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/no-array-index-key */
-
-
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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, _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) } })); }
 /*
  * import { colors } from '@desynova-digital/tokens';
  * import colors from '../colors';
@@ -42,57 +44,47 @@ var propTypes = {
   markers: _propTypes.PropTypes.instanceOf(Array),
   onTagClick: _propTypes.PropTypes.func
 };
-
 var defaultProps = {
   player: {}
 };
-
-var PointersContainer = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__PointersContainer',
-  componentId: 'sc-b8687a-0'
-})(['display:flex;']);
-
-var PointerBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__PointerBlock',
-  componentId: 'sc-b8687a-1'
-})(['width:100%;height:20px;position:relative;border-top:1px solid #333333;border-bottom:1px solid #333333;.empty-pointers-msg{display:flex;justify-content:center;align-items:center;height:100%;p{font-family:SFUIText-Medium;font-size:11px;color:#aaaaaa;}', '{margin:0 5px;}}'], _components.Icon.Element);
-var MarkerTagsBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__MarkerTagsBlock',
-  componentId: 'sc-b8687a-2'
-})(['min-width:100px;max-width:100px;position:relative;height:100%;.tags-block{height:20px;font-family:SFUIText-Medium;font-size:10px;color:#ffffff;text-transform:uppercase;border-top:1px solid #333333;border-bottom:1px solid #333333;p{line-height:18px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}']);
-
-var ToolTipStyles = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__ToolTipStyles',
-  componentId: 'sc-b8687a-3'
-})(['position:absolute;z-index:2;height:18px;transition:left .1s ease-in-out;.tooltip-container{border-radius:0.25rem;padding:5px;width:fit-content;background:#FFFFFF;;color:#666666;h4{white-space:nowrap;font-size:12px;}&:after{content:\'\';position:absolute;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid white;', ' left:50%;transform:translateX(-50%);}}'], function (props) {
+var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var PointerBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 20px;\n  position: relative;\n  border-top: 1px solid #333333;\n  border-bottom: 1px solid #333333;\n  .empty-pointers-msg {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    p {\n      font-family: SFUIText-Medium;\n      font-size: 11px;\n      color: #aaaaaa;\n    }\n    ", " {\n      margin: 0 5px;\n    }\n  }\n"])), _components.Icon.Element);
+var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100px;\n  max-width: 100px;\n  position: relative;\n  height: 100%;\n  .tags-block {\n    height: 20px;\n    font-family: SFUIText-Medium;\n    font-size: 10px;\n    color: #ffffff;\n    text-transform: uppercase;\n    border-top: 1px solid #333333;\n    border-bottom: 1px solid #333333;\n    p {\n      line-height: 18px;\n      padding: 0 10px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])));
+var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 2;\n  height: 18px;\n  transition: left .1s ease-in-out;\n\n  .tooltip-container{\n    border-radius: 0.25rem;\n    padding: 5px;\n    width: fit-content;\n    background: #FFFFFF;;\n    color: #666666;\n  \n    h4 {\n      white-space: nowrap;\n      font-size: 12px;\n    }\n  \n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid white;\n      ", "\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n"])), function (props) {
   return props.multiline ? "bottom: -21px;" : "bottom: -9px;";
 });
-
-var PointersBar = function (_Component) {
+var PointersBar = /*#__PURE__*/function (_Component) {
   _inherits(PointersBar, _Component);
-
+  var _super = _createSuper(PointersBar);
   function PointersBar(props) {
+    var _this;
     _classCallCheck(this, PointersBar);
-
-    var _this = _possibleConstructorReturn(this, (PointersBar.__proto__ || Object.getPrototypeOf(PointersBar)).call(this, props));
-
-    _this.getPointerStyle = _this.getPointerStyle.bind(_this);
+    _this = _super.call(this, props);
+    _this.getPointerStyle = _this.getPointerStyle.bind(_assertThisInitialized(_this));
     _this.state = {
       tooltip: {
         isVisible: false
       }
     };
-    _this._tooltipRef = _react2.default.createRef();
+    _this._tooltipRef = /*#__PURE__*/_react["default"].createRef();
+    _this.renderComp = 0;
     return _this;
   }
-
   _createClass(PointersBar, [{
-    key: 'onMarkerClick',
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
+        return false;
+      }
+      this.renderComp = 0;
+      return true;
+    }
+  }, {
+    key: "onMarkerClick",
     value: function onMarkerClick(e, marker) {
-      var _props = this.props,
-          onTagClick = _props.onTagClick,
-          actions = _props.actions;
-
+      var _this$props = this.props,
+        onTagClick = _this$props.onTagClick,
+        actions = _this$props.actions;
       var start_time = parseFloat(e.target.getAttribute('leftpos'));
       var end_time = parseFloat(e.target.getAttribute('rightpos'));
       actions.handleMarkerUpdate(start_time, end_time);
@@ -101,19 +93,18 @@ var PointersBar = function (_Component) {
       onTagClick(start_time, end_time, marker);
     }
   }, {
-    key: 'getPointerStyle',
+    key: "getPointerStyle",
     value: function getPointerStyle(leftMarker, rightMarker, index) {
       var player = this.props.player;
-
       var left = leftMarker / player.duration * 100;
       var right = rightMarker / player.duration * 100;
       var width = right - left;
       var style = {
-        left: left + '%',
+        left: "".concat(left, "%"),
         position: 'absolute',
         bottom: 0,
         height: '100%',
-        width: width + '%',
+        width: "".concat(width, "%"),
         cursor: 'pointer',
         backgroundColor: index % 2 === 0 ? '#00cec6' : '#146778',
         opacity: 0.8,
@@ -122,28 +113,27 @@ var PointersBar = function (_Component) {
       return style;
     }
   }, {
-    key: 'setTooltipData',
+    key: "setTooltipData",
     value: function setTooltipData(e, title) {
       var _this2 = this;
-
       var tooltip = this.state.tooltip;
-
       tooltip.isVisible = false;
       tooltip.text = title;
       tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
       tooltip.bottom = title.line1 ? tooltip.bottom + 22 : tooltip.bottom + 10;
       tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
-      this.setState(_extends({}, tooltip), function () {
+      this.renderComp = 1;
+      this.setState(_objectSpread({}, tooltip), function () {
         var tooltip = _this2.state.tooltip;
-
         var tooltipRefOffset = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
         tooltip.isVisible = true;
         tooltip.left = tooltip.left - tooltipRefOffset;
-        _this2.setState(_extends({}, tooltip));
+        _this2.renderComp = 1;
+        _this2.setState(_objectSpread({}, tooltip));
       });
     }
   }, {
-    key: 'getTitle',
+    key: "getTitle",
     value: function getTitle(marker) {
       var data = marker.segment_title || marker.word || '';
       if (!data.length && marker.line1) {
@@ -155,145 +145,83 @@ var PointersBar = function (_Component) {
       return data;
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this3 = this;
-
       var markers = this.props.markers;
-      var _state$tooltip = this.state.tooltip,
-          isVisible = _state$tooltip.isVisible,
-          text = _state$tooltip.text,
-          left = _state$tooltip.left,
-          bottom = _state$tooltip.bottom;
-
+      var _this$state$tooltip = this.state.tooltip,
+        isVisible = _this$state$tooltip.isVisible,
+        text = _this$state$tooltip.text,
+        left = _this$state$tooltip.left,
+        bottom = _this$state$tooltip.bottom;
       var self = this;
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        markers && markers.length ? markers.map(function (marker_obj) {
-          return _react2.default.createElement(
-            PointersContainer,
-            { key: marker_obj.name },
-            _react2.default.createElement(
-              MarkerTagsBlock,
-              null,
-              _react2.default.createElement(
-                'div',
-                { className: 'tags-block' },
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  marker_obj.name
-                )
-              )
-            ),
-            _react2.default.createElement(
-              PointerBlock,
-              null,
-              marker_obj && marker_obj.values && marker_obj.values.length ? marker_obj.values.map(function (marker, index) {
-                var style = self.getPointerStyle(marker.start_time, marker.end_time, index);
-                return _react2.default.createElement('div', {
-                  className: 'marker-blocks',
-                  onClick: function onClick(e) {
-                    _this3.onMarkerClick(e, marker);
-                  },
-                  onMouseOver: function onMouseOver(e) {
-                    self.setTooltipData(e, _this3.getTitle(marker));
-                  },
-                  onMouseOut: function onMouseOut() {
-                    var tooltip = _this3.state.tooltip;
-
-                    tooltip.isVisible = false;
-                    tooltip.text = null;
-                    // tooltip.left = null;
-                    _this3.setState(_extends({}, tooltip));
-                  },
-                  role: 'button',
-                  tabIndex: '-1',
-                  style: style,
-                  leftpos: marker.start_time,
-                  rightpos: marker.end_time,
-                  key: marker.start_time + '-' + marker.end_time + '-' + index
-                });
-              }) : _react2.default.createElement(
-                'div',
-                { className: 'empty-pointers-msg' },
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Mark In'
-                ),
-                _react2.default.createElement(_components.Icon, {
-                  name: 'in-marker',
-                  stroke: '#fff',
-                  width: 7,
-                  height: 11
-                }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'and Mark Out'
-                ),
-                _react2.default.createElement(_components.Icon, {
-                  name: 'out-marker',
-                  stroke: '#fff',
-                  width: 7,
-                  height: 11
-                }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'to create ',
-                  marker_obj.name,
-                  ' in the selected range. '
-                )
-              )
-            ),
-            _react2.default.createElement(
-              MarkerTagsBlock,
-              null,
-              _react2.default.createElement(
-                'div',
-                { className: 'tags-block' },
-                _react2.default.createElement('p', null)
-              )
-            )
-          );
-        }) : null,
-        text && _react2.default.createElement(
-          ToolTipStyles,
-          { multiline: !!text.line1, ref: this._tooltipRef, style: { left: left || 0, bottom: bottom || 0, visibility: isVisible ? "visible" : "hidden" } },
-          _react2.default.createElement(
-            'div',
-            { className: 'tooltip-container' },
-            text.line1 && _react2.default.createElement(
-              'h4',
-              null,
-              text.line1
-            ),
-            text.line2 && _react2.default.createElement(
-              'h4',
-              null,
-              text.line2
-            ),
-            !text.line1 && _react2.default.createElement(
-              'h4',
-              null,
-              text
-            )
-          )
-        ),
-        _react2.default.createElement('div', { id: 'dummy-container' })
-      );
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, markers && markers.length ? markers.map(function (marker_obj) {
+        return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
+          key: marker_obj.name
+        }, /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, {
+          key: "".concat(marker_obj.name, "-tags-block")
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "tags-block"
+        }, /*#__PURE__*/_react["default"].createElement("p", null, marker_obj.name))), /*#__PURE__*/_react["default"].createElement(PointerBlock, {
+          key: "".concat(marker_obj.name, "-key-tags-block")
+        }, marker_obj && marker_obj.values && marker_obj.values.length ? marker_obj.values.map(function (marker, index) {
+          var style = self.getPointerStyle(marker.start_time, marker.end_time, index);
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: "marker-blocks",
+            onClick: function onClick(e) {
+              _this3.onMarkerClick(e, marker);
+            },
+            onMouseOver: function onMouseOver(e) {
+              self.setTooltipData(e, _this3.getTitle(marker));
+            },
+            onMouseOut: function onMouseOut() {
+              var tooltip = _this3.state.tooltip;
+              tooltip.isVisible = false;
+              tooltip.text = null;
+              _this3.renderComp = 1;
+              // tooltip.left = null;
+              _this3.setState(_objectSpread({}, tooltip));
+            },
+            role: "button",
+            tabIndex: "-1",
+            style: style,
+            leftpos: marker.start_time,
+            rightpos: marker.end_time,
+            key: "".concat(marker.start_time, "-").concat(marker.end_time, "-").concat(index)
+          });
+        }) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "empty-pointers-msg"
+        }, /*#__PURE__*/_react["default"].createElement("p", null, "Mark In"), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+          name: "in-marker",
+          stroke: "#fff",
+          width: 7,
+          height: 11
+        }), /*#__PURE__*/_react["default"].createElement("p", null, "and Mark Out"), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+          name: "out-marker",
+          stroke: "#fff",
+          width: 7,
+          height: 11
+        }), /*#__PURE__*/_react["default"].createElement("p", null, "to create ", marker_obj.name, " in the selected range. "))), /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "tags-block"
+        }, /*#__PURE__*/_react["default"].createElement("p", null))));
+      }) : null, text && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
+        multiline: !!text.line1,
+        ref: this._tooltipRef,
+        style: {
+          left: left || 0,
+          bottom: bottom || 0,
+          visibility: isVisible ? "visible" : "hidden"
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "tooltip-container"
+      }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line1), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line2), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text))), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "dummy-container"
+      }));
     }
   }]);
-
   return PointersBar;
 }(_react.Component);
-
-exports.default = PointersBar;
-
-
+exports["default"] = PointersBar;
 PointersBar.propTypes = propTypes;
 PointersBar.defaultProps = defaultProps;
 PointersBar.displayName = 'PointersBar';