@desynova-digital/player 4.0.85 → 4.0.87

package/components/PlayerHeader.js

@@ -10,24 +10,25 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _components = require("@desynova-digital/components");
 var _colors = _interopRequireDefault(require("../colors"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
-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(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 _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 && {}.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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 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 _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
 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) } })); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 var propTypes = {
   actions: _propTypes.PropTypes.instanceOf(Object),
   onPlayerClose: _propTypes.PropTypes.func,
@@ -60,40 +61,74 @@ var VideoTitle = _styledComponents["default"].button(_templateObject2 || (_templ
   var isShowPageAvailable = _ref.isShowPageAvailable;
   return isShowPageAvailable ? 'pointer' : 'default';
 });
-var PlayerDetails = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  text-align: left;\n  .video-bottom-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    margin-top: 8px;\n    .video-sub-title {\n      color: #afb2ba;\n      font-size: 10px;\n      font-family: SFUIText-Medium;\n      margin-right: 5px;\n    }\n    .version-category {\n      font-size: 10px;\n      letter-spacing: 0.4px;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      text-transform: uppercase;\n    }\n    .versions-dropdown-block {\n      position: relative;\n      &:hover {\n        .active-version {\n          cursor: pointer;\n          border-color: #00cec6 !important;\n        }\n        .versions-dropdown-container {\n          visibility: visible;\n          opacity: 1;\n        }\n      }\n      .active-version {\n        transition: all 350ms ease-in-out;\n        border: 1px solid #fff;\n        border-radius: 10px;\n        margin-left: 5px;\n        padding: 3px 10px;\n        color: #fff;\n        font-size: 10px;\n        font-family: SFUIText-Regular;\n        font-weight: bold;\n        pointer-events: none;\n      }\n      .versions-dropdown-container {\n        padding-top: 15px;\n        position: absolute;\n        top: 13px;\n        left: 50%;\n        transform: translateX(-50%);\n        visibility: hidden;\n        opacity: 0;\n        transition: all 450ms ease-in-out;\n        &:after {\n          content: '';\n          border-bottom: 6px solid #00cec6;\n          border-right: 6px solid transparent;\n          border-left: 6px solid transparent;\n          position: absolute;\n          top: 9px;\n          left: 50%;\n          transform: translateX(-50%);\n        }\n        .versions-container {\n          overflow-y: auto;\n          overflow-x: hidden;\n          max-height: 204px;\n          box-shadow: 0px 12px 24px rgb(0 0 0 / 20%);\n          min-width: 250px;\n          background: #fff;\n          border-radius: 10px;\n          .ingest-versions-container{\n            border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n            padding: 10px 15px;\n            .ingest-version-block {\n              display: flex;\n              justify-content: space-between;\n              align-items: center;\n              .upload-type {\n                width: 6px;\n                height: 6px;\n                border-radius: 100%;\n                overflow: hidden;\n                left: 5px;\n                position: absolute;\n              }\n              .ingest-version-name {\n                color: #182738;\n                font-size: 11px;\n                font-family: SFUIText-Regular;\n                font-weight: bold;\n                margin-right: 10px;\n              }\n              .video-versions-container {\n                display: inline-flex;\n                align-items: center;\n                .more-dropdown-icon{\n                  padding-top: 8px;\n                  cursor:pointer;\n                }\n                path{\n                  fill: #182738;\n                }\n              }\n            }\n          }\n          &::-webkit-scrollbar {\n            width: 5px;\n            background-color: #6d6a6a;\n          }\n        }\n      }\n    }\n    .video-time-block {\n      margin-left: 5px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .tv-time,\n      .ott-time {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin-left: 10px;\n        p {\n          margin-left: 5px;\n          color: rgb(175, 178, 186);\n          font-family: 'SFUIText-Regular';\n          font-size: 10px;\n          align-self: self-end;\n        }\n      }\n    }\n  }\n"])));
-var VersionBlock = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  font-weight: bold;\n  font-size: 10px;\n  line-height: 1.2;\n  border-radius: 100%;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background: ", ";\n  color: ", ";\n  &.active{\n    background: ", ";\n    color: #ffffff;\n    pointer-events: none;\n  }\n  margin-right: 10px;\n\n"])), function (props) {
+var IconButton = (0, _styledComponents["default"])(_components.Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 8px;\n  padding: 4px;\n  border: 1px solid ", ";\n  transition: all 0.2s ease;\n\n  /* Icon color */\n  svg path {\n    fill: ", " !important;\n  }\n\n  &:hover {\n    background: ", ";\n    border-color: ", ";\n\n    svg path {\n      fill: ", " !important;\n    }\n  }\n\n  &:active {\n    background: ", ";\n  }\n"])), function (_ref2) {
+  var isRightMenuVisible = _ref2.isRightMenuVisible;
+  return isRightMenuVisible ? '#ffffff' : '#0bbec5';
+}, function (_ref3) {
+  var isRightMenuVisible = _ref3.isRightMenuVisible;
+  return isRightMenuVisible ? '#e0e0e0' : '#0bbec5';
+}, function (_ref4) {
+  var isRightMenuVisible = _ref4.isRightMenuVisible;
+  return isRightMenuVisible ? '#0bbec5' : '#ffffff';
+}, function (_ref5) {
+  var isRightMenuVisible = _ref5.isRightMenuVisible;
+  return isRightMenuVisible ? '#f5fefe' : '#09aab1';
+}, function (_ref6) {
+  var isRightMenuVisible = _ref6.isRightMenuVisible;
+  return isRightMenuVisible ? '#c9f0f0' : '#09aab1';
+}, function (_ref7) {
+  var isRightMenuVisible = _ref7.isRightMenuVisible;
+  return isRightMenuVisible ? '#089ca2' : '#ffffff';
+}, function (_ref8) {
+  var isRightMenuVisible = _ref8.isRightMenuVisible;
+  return isRightMenuVisible ? '#e7f8f8' : '#088f96';
+});
+var PlayerDetails = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  text-align: left;\n  .video-bottom-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    margin-top: 8px;\n    .video-sub-title {\n      color: #afb2ba;\n      font-size: 10px;\n      font-family: SFUIText-Medium;\n      margin-right: 5px;\n    }\n    .version-category {\n      font-size: 10px;\n      letter-spacing: 0.4px;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      text-transform: uppercase;\n    }\n    .versions-dropdown-block {\n      position: relative;\n      &:hover {\n        .active-version {\n          cursor: pointer;\n          border-color: #00cec6 !important;\n        }\n        .versions-dropdown-container {\n          visibility: visible;\n          opacity: 1;\n        }\n      }\n      .active-version {\n        transition: all 350ms ease-in-out;\n        border: 1px solid #fff;\n        border-radius: 10px;\n        margin-left: 5px;\n        padding: 3px 10px;\n        color: #fff;\n        font-size: 10px;\n        font-family: SFUIText-Regular;\n        font-weight: bold;\n        pointer-events: none;\n      }\n      .versions-dropdown-container {\n        padding-top: 15px;\n        position: absolute;\n        top: 13px;\n        left: 50%;\n        transform: translateX(-50%);\n        visibility: hidden;\n        opacity: 0;\n        transition: all 450ms ease-in-out;\n        &:after {\n          content: '';\n          border-bottom: 6px solid #00cec6;\n          border-right: 6px solid transparent;\n          border-left: 6px solid transparent;\n          position: absolute;\n          top: 9px;\n          left: 50%;\n          transform: translateX(-50%);\n        }\n        .versions-container {\n          overflow-y: auto;\n          overflow-x: hidden;\n          max-height: 204px;\n          box-shadow: 0px 12px 24px rgb(0 0 0 / 20%);\n          min-width: 250px;\n          background: #fff;\n          border-radius: 10px;\n          .ingest-versions-container {\n            border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n            padding: 10px 15px;\n            .ingest-version-block {\n              display: flex;\n              justify-content: space-between;\n              align-items: center;\n              .upload-type {\n                width: 6px;\n                height: 6px;\n                border-radius: 100%;\n                overflow: hidden;\n                left: 5px;\n                position: absolute;\n              }\n              .ingest-version-name {\n                color: #182738;\n                font-size: 11px;\n                font-family: SFUIText-Regular;\n                font-weight: bold;\n                margin-right: 10px;\n              }\n              .video-versions-container {\n                display: inline-flex;\n                align-items: center;\n                .more-dropdown-icon {\n                  padding-top: 8px;\n                  cursor: pointer;\n                }\n                path {\n                  fill: #182738;\n                }\n              }\n            }\n          }\n          &::-webkit-scrollbar {\n            width: 5px;\n            background-color: #6d6a6a;\n          }\n        }\n      }\n    }\n    .video-time-block {\n      margin-left: 5px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .tv-time,\n      .ott-time {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin-left: 10px;\n        p {\n          margin-left: 5px;\n          color: rgb(175, 178, 186);\n          font-family: 'SFUIText-Regular';\n          font-size: 10px;\n          align-self: self-end;\n        }\n      }\n    }\n  }\n"])));
+var VersionBlock = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  font-weight: bold;\n  font-size: 10px;\n  line-height: 1.2;\n  border-radius: 100%;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background: ", ";\n  color: ", ";\n  &.active {\n    background: ", ";\n    color: #ffffff;\n    pointer-events: none;\n  }\n  margin-right: 10px;\n"])), function (props) {
   return props.upload_type === 'fc' ? 'rgba(0, 206, 198, 0.1)' : 'rgba(255, 99, 39, 0.1)';
 }, function (props) {
   return props.upload_type === 'fc' ? '#00CEC6' : '#FF6327';
 }, function (props) {
   return props.upload_type === 'fc' ? '#00cec6' : '#FF6327';
 });
-var PlayerType = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: auto;\n  margin-right: 15px;\n  display: flex;\n  ", " {\n    padding: 7px;\n    background-color: rgba(255, 255, 255, 0.1);\n    border: none;\n  }\n"])), _components.Button.Element);
-var QCReportButton = (0, _styledComponents["default"])(_components.Button)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  pointer-events: all !important;\n  margin-right: 10px;\n"])));
-var BackButton = (0, _styledComponents["default"])(_components.Button)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: none;\n  margin: 10px;\n  margin-right: 0;\n  width: 40px;\n  height: 40px;\n  &:hover,\n  &:focus {\n    background: ", ";\n  }\n  ", " {\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 50%;\n    position: absolute;\n  }\n"])), function (props) {
+var PlayerType = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: auto;\n  margin-right: 15px;\n  display: flex;\n  ", " {\n    padding: 7px;\n    background-color: rgba(255, 255, 255, 0.1);\n    border: none;\n  }\n"])), _components.Button.Element);
+var QCReportButton = (0, _styledComponents["default"])(_components.Button)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  pointer-events: all !important;\n  margin-right: 10px;\n"])));
+var BackButton = (0, _styledComponents["default"])(_components.Button)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: none;\n  margin: 10px;\n  margin-right: 0;\n  width: 40px;\n  height: 40px;\n  &:hover,\n  &:focus {\n    background: ", ";\n  }\n  ", " {\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 50%;\n    position: absolute;\n  }\n"])), function (props) {
   return _colors["default"].common.video[props.assetType].base;
 }, function (props) {
   return _colors["default"].common.video[props.assetType].base;
 }, _components.Icon.Element);
 var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
-  _inherits(PlayerHeader, _Component);
   function PlayerHeader(props, context) {
     var _this;
     _classCallCheck(this, PlayerHeader);
     _this = _callSuper(this, PlayerHeader, [props, context]);
+    _defineProperty(_this, "handleRightMenuVisibility", function () {
+      var _this$props = _this.props,
+        isRightMenuVisible = _this$props.isRightMenuVisible,
+        onRightMenuVisible = _this$props.onRightMenuVisible,
+        actions = _this$props.actions,
+        player = _this$props.player;
+      var newVisibility = !isRightMenuVisible;
+      // Ask parent to update its state
+      onRightMenuVisible(newVisibility);
+      // Trigger UI change based on the NEW value
+      actions.toggleRightBar(player, newVisibility);
+    });
     _this.state = {
       versionIndex: -1,
       updatedVersionsList: []
     };
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    _this.handleClick = _this.handleClick.bind(_this);
     return _this;
   }
-  _createClass(PlayerHeader, [{
+  _inherits(PlayerHeader, _Component);
+  return _createClass(PlayerHeader, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props = this.props,
-        versions = _this$props.versions,
-        activeVersion = _this$props.activeVersion;
+      var _this$props2 = this.props,
+        versions = _this$props2.versions,
+        activeVersion = _this$props2.activeVersion;
       if (versions && versions.length) {
         this.updateVersion(versions, activeVersion);
       }
@@ -101,10 +136,10 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleClick",
     value: function handleClick() {
-      var _this$props2 = this.props,
-        onPlayerClose = _this$props2.onPlayerClose,
-        onPlayerChange = _this$props2.onPlayerChange,
-        controlType = _this$props2.controlType;
+      var _this$props3 = this.props,
+        onPlayerClose = _this$props3.onPlayerClose,
+        onPlayerChange = _this$props3.onPlayerChange,
+        controlType = _this$props3.controlType;
       if (controlType !== 'default') {
         onPlayerChange();
       } else {
@@ -116,19 +151,19 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "openQCReport",
     value: function openQCReport() {
-      var _this$props3 = this.props,
-        onReportClick = _this$props3.onReportClick,
-        actions = _this$props3.actions;
+      var _this$props4 = this.props,
+        onReportClick = _this$props4.onReportClick,
+        actions = _this$props4.actions;
       if (onReportClick) {
         actions.pause();
         onReportClick();
       }
     }
 
-    /**
-     * saves the index of version that is expanded.
-     * @param   {Number} index index of the versionList
-    */
+    /**
+     * saves the index of version that is expanded.
+     * @param   {Number} index index of the versionList
+     */
   }, {
     key: "saveIndexOfVersion",
     value: function saveIndexOfVersion(index) {
@@ -139,10 +174,10 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
       });
     }
 
-    /**
-     * returns the object with active version at the first element in object
-     * @param   {Object} version object containing complete version list.
-     * @param   {Object} activeVersion object containing currently active version.
+    /**
+     * returns the object with active version at the first element in object
+     * @param   {Object} version object containing complete version list.
+     * @param   {Object} activeVersion object containing currently active version.
      */
   }, {
     key: "updateVersion",
@@ -151,9 +186,9 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
       updatedVersionsList.map(function (ele, index) {
         ele.versions.map(function (versionsList, innerIndex) {
           if (versionsList.ingest_db_id === activeVersion.ingest_db_id) {
-            var tempData = updatedVersionsList[index]["versions"][innerIndex];
-            updatedVersionsList[index]["versions"].splice(innerIndex, 1);
-            updatedVersionsList[index]["versions"].unshift(tempData);
+            var tempData = updatedVersionsList[index]['versions'][innerIndex];
+            updatedVersionsList[index]['versions'].splice(innerIndex, 1);
+            updatedVersionsList[index]['versions'].unshift(tempData);
           }
         });
       });
@@ -164,9 +199,9 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props4 = this.props,
-        versions = _this$props4.versions,
-        activeVersion = _this$props4.activeVersion;
+      var _this$props5 = this.props,
+        versions = _this$props5.versions,
+        activeVersion = _this$props5.activeVersion;
       if (activeVersion.ingest_db_id !== prevProps.activeVersion.ingest_db_id || !prevState.updatedVersionsList.length) {
         if (versions && versions.length) {
           this.updateVersion(versions, activeVersion);
@@ -177,26 +212,29 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props5 = this.props,
-        videoDetails = _this$props5.videoDetails,
-        versionClick = _this$props5.versionClick,
-        activeVersion = _this$props5.activeVersion,
-        onTitleClick = _this$props5.onTitleClick,
-        _this$props5$player = _this$props5.player,
-        userActivity = _this$props5$player.userActivity,
-        isFullscreen = _this$props5$player.isFullscreen,
-        playerType = _this$props5.playerType,
-        qcReportAvailable = _this$props5.qcReportAvailable,
-        openSharePopup = _this$props5.openSharePopup,
-        isShareAvailable = _this$props5.isShareAvailable,
-        isUserGuest = _this$props5.isUserGuest;
+      var _this$props6 = this.props,
+        videoDetails = _this$props6.videoDetails,
+        versionClick = _this$props6.versionClick,
+        activeVersion = _this$props6.activeVersion,
+        onTitleClick = _this$props6.onTitleClick,
+        _this$props6$player = _this$props6.player,
+        userActivity = _this$props6$player.userActivity,
+        isFullscreen = _this$props6$player.isFullscreen,
+        playerType = _this$props6.playerType,
+        qcReportAvailable = _this$props6.qcReportAvailable,
+        openSharePopup = _this$props6.openSharePopup,
+        isShareAvailable = _this$props6.isShareAvailable,
+        isUserGuest = _this$props6.isUserGuest,
+        isRightMenuVisible = _this$props6.isRightMenuVisible;
       var _this$state = this.state,
         versionIndex = _this$state.versionIndex,
         updatedVersionsList = _this$state.updatedVersionsList;
       return /*#__PURE__*/_react["default"].createElement(PlayerHeaderBlock, {
         className: "player-header-block",
         active: userActivity,
-        player: playerType
+        player: playerType,
+        isFullscreen: isFullscreen,
+        isRightMenuVisible: isRightMenuVisible
       }, !isFullscreen && !isUserGuest && /*#__PURE__*/_react["default"].createElement(BackButton, _extends({
         display: "rounded",
         appearance: "cta",
@@ -291,7 +329,10 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
         width: 16,
         height: 12,
         color: "#afb2ba"
-      }), /*#__PURE__*/_react["default"].createElement("p", null, videoDetails.ottTime)) : null))), /*#__PURE__*/_react["default"].createElement(PlayerType, null, !isFullscreen && !isUserGuest && isShareAvailable && playerType === 'default' && /*#__PURE__*/_react["default"].createElement(_components.Button, _extends({
+      }), /*#__PURE__*/_react["default"].createElement("p", null, videoDetails.ottTime)) : null))), /*#__PURE__*/_react["default"].createElement(PlayerType, {
+        isFullscreen: isFullscreen,
+        isRightMenuVisible: isRightMenuVisible
+      }, !isFullscreen && !isUserGuest && isShareAvailable && playerType === 'default' && /*#__PURE__*/_react["default"].createElement(_components.Button, _extends({
         display: "rounded",
         appearance: "cta",
         icon: "share",
@@ -326,10 +367,22 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
         style: {
           pointerEvents: 'none'
         }
-      }, this.props)) : null));
+      }, this.props)) : null, isFullscreen ? /*#__PURE__*/_react["default"].createElement(IconButton, {
+        isRightMenuVisible: isRightMenuVisible,
+        display: "rounded",
+        appearance: "cta",
+        icon: "toggle-fullscreen",
+        width: 25,
+        height: 25,
+        iconWidth: 24,
+        iconHeight: 24,
+        tabIndex: "1",
+        onClick: function onClick() {
+          return _this2.handleRightMenuVisibility();
+        }
+      }) : null));
     }
   }]);
-  return PlayerHeader;
 }(_react.Component);
 PlayerHeader.propTypes = propTypes;
 PlayerHeader.displayName = 'PlayerHeader';

package/components/Playlist.js

@@ -10,22 +10,22 @@ 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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 _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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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 && {}.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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
 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 _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) } })); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 /*
  * import { play } from '../actions/player';
  * import { colors } from '@desynova-digital/tokens';
@@ -52,12 +52,12 @@ var PlaylistCard = (0, _styledComponents["default"])('div')(_templateObject3 ||
   return props.active ? 'none' : 'all';
 });
 var Playlist = exports["default"] = /*#__PURE__*/function (_Component) {
-  _inherits(Playlist, _Component);
   function Playlist(props, context) {
     _classCallCheck(this, Playlist);
     return _callSuper(this, Playlist, [props, context]);
   }
-  _createClass(Playlist, [{
+  _inherits(Playlist, _Component);
+  return _createClass(Playlist, [{
     key: "componentDidMount",
     value: function componentDidMount() {}
   }, {
@@ -89,7 +89,6 @@ var Playlist = exports["default"] = /*#__PURE__*/function (_Component) {
       })) : null);
     }
   }]);
-  return Playlist;
 }(_react.Component);
 Playlist.propTypes = propTypes;
 Playlist.displayName = 'Playlist';

package/components/PointersBar.js

@@ -15,28 +15,28 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /* 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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 _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 && {}.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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
 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';
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/*
+ * import { colors } from '@desynova-digital/tokens';
+ * import colors from '../colors';
  */
 
 var propTypes = {
@@ -63,12 +63,11 @@ var ToolTipStyles = _styledComponents["default"].div(_templateObject5 || (_templ
   return props.tooltipPointer ? props.tooltipPointer + 'px' : '50%';
 });
 var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
-  _inherits(PointersBar, _Component);
   function PointersBar(props) {
     var _this;
     _classCallCheck(this, PointersBar);
     _this = _callSuper(this, PointersBar, [props]);
-    _this.getPointerStyle = _this.getPointerStyle.bind(_assertThisInitialized(_this));
+    _this.getPointerStyle = _this.getPointerStyle.bind(_this);
     _this.state = {
       tooltip: {
         isVisible: false
@@ -90,7 +89,8 @@ var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
   //   this.renderComp = 0;
   //   return true;
   // }
-  _createClass(PointersBar, [{
+  _inherits(PointersBar, _Component);
+  return _createClass(PointersBar, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.zoom !== this.props.zoom) {
@@ -302,7 +302,6 @@ var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
       }))));
     }
   }]);
-  return PointersBar;
 }(_react.Component);
 PointersBar.propTypes = propTypes;
 PointersBar.defaultProps = defaultProps;

package/components/PosterImage.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _propTypes = require("prop-types");
 var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var propTypes = {
   poster: _propTypes.PropTypes.string,
   player: _propTypes.PropTypes.instanceOf(Object),

package/components/SDOutline.js

@@ -9,14 +9,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = require("prop-types");
 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) } })); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   actions: _propTypes.PropTypes.instanceOf(Object)
 };
 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  height: ", ";\n  padding-left: ", "\n"])), _colors["default"].common.base.white, function (props) {
-  return props.heightRatio ? "calc(100% * ".concat(props.heightRatio, ")") : '100%';
+  if (props.isFullscreen && props.isRightMenuVisible) {
+    return props.heightRatio ? "calc(75% * ".concat(props.heightRatio, ")") : '75%';
+  } else {
+    return props.heightRatio ? "calc(100% * ".concat(props.heightRatio, ")") : '100%';
+  }
 }, function (props) {
   return props.paddingLeftPercent ? "calc(".concat(props.paddingLeftPercent, " * ").concat(props.paddingLeftRatio, ")") : '75%';
 });
@@ -28,7 +32,8 @@ function SDOutline(_ref) {
     paddingLeftPercent = _ref.paddingLeftPercent,
     paddingLeftRatio = _ref.paddingLeftRatio,
     text = _ref.text,
-    keyData = _ref.keyData;
+    keyData = _ref.keyData,
+    isRightMenuVisible = _ref.isRightMenuVisible;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SDPlayerBorder, {
     style: !player[keyData] ? {
       display: 'none'
@@ -38,6 +43,8 @@ function SDOutline(_ref) {
     heightRatio: heightRatio,
     paddingLeftPercent: paddingLeftPercent,
     paddingLeftRatio: paddingLeftRatio,
+    isFullscreen: player.isFullscreen,
+    isRightMenuVisible: isRightMenuVisible,
     onClick: function onClick() {
       if (player.paused) {
         actions.play();