@desynova-digital/player 4.0.1 → 4.0.3

package/{control → components}/PointersBar.js

@@ -1,6 +1,6 @@
 "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); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,29 +10,33 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = require("prop-types");
 var _components = require("@desynova-digital/components");
 var _lodash = _interopRequireDefault(require("lodash"));
+var _reactDom = require("react-dom");
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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 _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';
+/*
+ * import { colors } from '@desynova-digital/tokens';
+ * import colors from '../colors';
  */
 
 var propTypes = {
@@ -44,33 +48,40 @@ var propTypes = {
 var defaultProps = {
   player: {}
 };
-var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: ", ";\n"])), function (props) {
+  return props.width || '100%';
+});
 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 0.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) {
+var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 2;\n  height: 18px;\n  transition: left 0.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    em{\n      font-style: italic; \n    }\n\n    strong{\n      font-weight: bold; \n    }\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: ", ";\n      transform: translateX(-50%);\n    }\n  }\n"])), function (props) {
   return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
+}, function (props) {
+  return props.tooltipPointer ? props.tooltipPointer + 'px' : '50%';
 });
-var PointersBar = /*#__PURE__*/function (_Component) {
+var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
   _inherits(PointersBar, _Component);
-  var _super = _createSuper(PointersBar);
   function PointersBar(props) {
     var _this;
     _classCallCheck(this, PointersBar);
-    _this = _super.call(this, props);
+    _this = _callSuper(this, PointersBar, [props]);
     _this.getPointerStyle = _this.getPointerStyle.bind(_assertThisInitialized(_this));
     _this.state = {
       tooltip: {
         isVisible: false
-      }
+      },
+      tooltipPointer: 0
     };
     _this._tooltipRef = /*#__PURE__*/_react["default"].createRef();
     _this.renderComp = 0;
+    _this.zoom = 0;
     return _this;
   }
   _createClass(PointersBar, [{
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
-      if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
+      if (nextProps.zoom !== this.props.zoom) {
+        return true;
+      } else if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
         return false;
       }
       this.renderComp = 0;
@@ -78,30 +89,32 @@ var PointersBar = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "onMarkerClick",
-    value: function onMarkerClick(e, marker) {
+    value: function onMarkerClick(e, marker, index) {
       var _this$props = this.props,
         onTagClick = _this$props.onTagClick,
-        actionClick = _this$props.actionClick;
+        actions = _this$props.actions,
+        playerType = _this$props.playerType;
       var start_time = parseFloat(e.target.getAttribute('leftpos'));
       var end_time = parseFloat(e.target.getAttribute('rightpos'));
-      // actions.handleMarkerUpdate(start_time, end_time);
-      actionClick({
-        action: 'pause'
-      });
-      // actions.pause();
-      actionClick({
-        action: 'seek',
-        value: start_time
-      });
-      // actions.seek(start_time);
+      actions.handleMarkerUpdate(start_time, end_time);
+      actions.pause();
+      actions.seek(start_time);
+      if (playerType === 'subtitle') {
+        var scrollObject = {
+          tableListScrollTop: index
+        };
+        localStorage.setItem('scrollObject', JSON.stringify(scrollObject));
+      }
       onTagClick(start_time, end_time, marker);
     }
   }, {
     key: "getPointerStyle",
     value: function getPointerStyle(leftMarker, rightMarker, index) {
-      var duration = this.props.duration;
-      var left = leftMarker / duration.seconds * 100;
-      var right = rightMarker / duration.seconds * 100;
+      var _this$props2 = this.props,
+        player = _this$props2.player,
+        zoom = _this$props2.zoom;
+      var left = leftMarker / player.duration * 100;
+      var right = rightMarker / player.duration * 100;
       var width = right - left;
       var style = {
         left: "".concat(left, "%"),
@@ -121,19 +134,36 @@ var PointersBar = /*#__PURE__*/function (_Component) {
     value: function setTooltipData(e, title) {
       var _this2 = this;
       var tooltip = this.state.tooltip;
+      var tooltipPointer = 0;
       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;
+      // tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
+      // tooltip.bottom = title.line1 && title.line2 ? tooltip.bottom + 22 : tooltip.bottom + 10;
+      tooltip.bottom = title.line1 && title.line2 ? 42 : 30;
+      tooltipPointer = tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2 - 100;
       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;
+        var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+        var tooltipRenderedWidth = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
+        var totalWidthOfTooltipIncludingLeft = tooltip.left + tooltipRenderedWidth;
+        if (totalWidthOfTooltipIncludingLeft > viewportWidth) {
+          var extraSpacing = totalWidthOfTooltipIncludingLeft - viewportWidth;
+          tooltip.left = tooltip.left - tooltipRenderedWidth - extraSpacing - 10; //5 for wxtra buffer spacing on right
+          tooltipPointer = tooltipRenderedWidth + extraSpacing + 10;
+        } else {
+          tooltip.left = tooltip.left - tooltipRenderedWidth;
+          if (tooltip.left < 0) {
+            tooltipPointer = tooltipPointer;
+          } else {
+            tooltipPointer = 0;
+          }
+        }
         tooltip.isVisible = true;
-        tooltip.left = tooltip.left - tooltipRefOffset;
         _this2.renderComp = 1;
-        _this2.setState(_objectSpread({}, tooltip));
+        _this2.setState(_objectSpread(_objectSpread({}, tooltip), {}, {
+          tooltipPointer: tooltipPointer
+        }));
       });
     }
   }, {
@@ -148,32 +178,54 @@ var PointersBar = /*#__PURE__*/function (_Component) {
       }
       return data;
     }
+  }, {
+    key: "generateZoomWithOfPointersBar",
+    value: function generateZoomWithOfPointersBar(zoom) {
+      var pointerBlock = (0, _reactDom.findDOMNode)(this.pointerBlock);
+      var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
+      var width = 0;
+      if (zoom > 0) {
+        width = (document.getElementById('seekbar-control-block').clientWidth * zoom * 20).toFixed(0) + 'px';
+      } else {
+        width = document.getElementById('seekbar-control-block').clientWidth.toFixed(0) + 'px';
+      }
+      this.setState({
+        zoom: zoom,
+        width: width
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       var _this3 = this;
-      var markers = this.props.markers;
-      var _this$state$tooltip = this.state.tooltip,
+      var _this$props3 = this.props,
+        markers = _this$props3.markers,
+        zoom = _this$props3.zoom;
+      var _this$state = this.state,
+        _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;
+        bottom = _this$state$tooltip.bottom,
+        tooltipPointer = _this$state.tooltipPointer,
+        width = _this$state.width;
       var self = this;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, markers && markers.length ? markers.map(function (marker_obj) {
         return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
+          id: "pointers-block",
+          ref: function ref(c) {
+            _this3.pointerBlock = c;
+          },
+          width: width,
           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, {
+        }, /*#__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);
+              _this3.onMarkerClick(e, marker, index);
             },
             onMouseOver: function onMouseOver(e) {
               self.setTooltipData(e, _this3.getTitle(marker));
@@ -205,27 +257,36 @@ var PointersBar = /*#__PURE__*/function (_Component) {
           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))));
+        }), /*#__PURE__*/_react["default"].createElement("p", null, "to create ", marker_obj.name, " in the selected range. "))));
       }) : null, text && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
-        multiline: !!text.line1,
+        multiline: !!text.line1 && text.line1.length && text.line2,
         ref: this._tooltipRef,
+        left: left,
+        tooltipPointer: tooltipPointer,
         style: {
-          left: left || 0,
+          left: left < 1 ? 1 : left,
           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"
-      }));
+      }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", {
+        dangerouslySetInnerHTML: {
+          __html: text.line1
+        }
+      }), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", {
+        dangerouslySetInnerHTML: {
+          __html: text.line2
+        }
+      }), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", {
+        dangerouslySetInnerHTML: {
+          __html: text
+        }
+      }))));
     }
   }]);
   return PointersBar;
 }(_react.Component);
-exports["default"] = PointersBar;
 PointersBar.propTypes = propTypes;
 PointersBar.defaultProps = defaultProps;
 PointersBar.displayName = 'PointersBar';

package/components/PosterImage.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var propTypes = {
+  poster: _propTypes.PropTypes.string,
+  player: _propTypes.PropTypes.instanceOf(Object),
+  actions: _propTypes.PropTypes.instanceOf(Object)
+};
+var defaultProps = {
+  poster: '',
+  player: {},
+  actions: {}
+};
+function PosterImage(_ref) {
+  var poster = _ref.poster,
+    player = _ref.player,
+    actions = _ref.actions;
+  if (!poster || player.hasStarted) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    role: "presentation",
+    style: {
+      backgroundImage: "url(\"".concat(poster, "\")"),
+      backgroundSize: 'auto 100%',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      backgroundPosition: '50% 50%'
+    },
+    onClick: function onClick() {
+      if (player.paused) {
+        actions.play();
+        actions.handleVideoRewind(false);
+      }
+    }
+  });
+}
+PosterImage.propTypes = propTypes;
+PosterImage.defaultProps = defaultProps;
+PosterImage.displayName = 'PosterImage';
+var _default = exports["default"] = PosterImage;

package/{media → components}/SDOutline.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = SDOutline;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = require("prop-types");
-var _colors = _interopRequireDefault(require("../utils/colors"));
+var _colors = _interopRequireDefault(require("../colors"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -17,66 +17,30 @@ var propTypes = {
 };
 var SDPlayerBorder = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: 0.3;\n  border: solid 1px ", ";\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  position: absolute;\n  padding-left: 75%;\n  height: 100%;\n"])), _colors["default"].common.base.white);
 var SDBorderText = (0, _styledComponents["default"])('p')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: #fff;\n  padding-top: 25%;\n  position: absolute;\n  font-family: SFUIText-Regular;\n  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);\n  font-size: 12px;\n  top: 20%;\n  transform: translate(-50%, -50%) rotate(-90deg);\n"])));
-var SDOutline = function SDOutline(_ref) {
-  var SDBorderActive = _ref.SDBorderActive,
-    actionClick = _ref.actionClick,
-    paused = _ref.paused;
+function SDOutline(_ref) {
+  var player = _ref.player,
+    actions = _ref.actions;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SDPlayerBorder, {
-    className: "sdborders",
-    style: !SDBorderActive ? {
+    style: !player.SDBorderActive ? {
       display: 'none'
     } : {
       display: 'block'
     },
     onClick: function onClick() {
-      if (paused) {
-        actionClick({
-          action: 'play'
-        });
+      if (player.paused) {
+        actions.play();
       } else {
-        actionClick({
-          action: 'pause'
-        });
+        actions.pause();
       }
-      //   actions.handleVideoRewind(false);
+      actions.handleVideoRewind(false);
     }
   }), /*#__PURE__*/_react["default"].createElement(SDBorderText, {
-    style: !SDBorderActive ? {
+    style: !player.SDBorderActive ? {
       display: 'none'
     } : {
       display: 'block'
     }
   }, "4:3 Safe Area"));
-};
-
-// export default function SDOutline({ player, actions }) {
-//   return (
-//     <React.Fragment>
-//       <SDPlayerBorder
-//         style={
-//           !player.SDBorderActive ? { display: 'none' } : { display: 'block' }
-//         }
-//         onClick={() => {
-//           if (player.paused) {
-//             actions.play();
-//           } else {
-//             actions.pause();
-//           }
-//           actions.handleVideoRewind(false);
-//         }}
-//       />
-//       <SDBorderText
-//         style={
-//           !player.SDBorderActive ? { display: 'none' } : { display: 'block' }
-//         }
-//       >
-//         4:3 Safe Area
-//       </SDBorderText>
-//     </React.Fragment>
-//   );
-// }
-
+}
 SDOutline.propTypes = propTypes;
-SDOutline.displayName = 'SDOutline';
-var _default = SDOutline;
-exports["default"] = _default;
+SDOutline.displayName = 'SDOutline';