@desynova-digital/player 4.0.85 → 4.0.87

package/components/Player.js

@@ -20,33 +20,34 @@ var _Playlist = _interopRequireDefault(require("./Playlist"));
 var _AudioMeter = _interopRequireDefault(require("./AudioMeter"));
 var _utils = require("../utils");
 var _fullscreen = _interopRequireDefault(require("../utils/fullscreen"));
+var _RenderCommentMarkers = _interopRequireDefault(require("./progress-bar/RenderCommentMarkers"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return 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 _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 _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 = {
   store: _propTypes.PropTypes.instanceOf(Object),
   width: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
@@ -158,6 +159,9 @@ var defaultProps = {
 };
 var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
 var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  background: #000000;\n  .left-video-section {\n    width: ", ";\n    position: relative;\n  }\n  .audio-meter-block {\n    position: relative;\n    width: 0px;\n    display: none;\n    &.qc {\n      width: 70px;\n      display: block;\n    }\n  }\n  .right-video-section {\n    width: ", ";\n    position: relative;\n  }\n"])), function (props) {
+  if (!props.isRightMenuVisible) {
+    return '100%';
+  }
   if (props.hasRightSection) {
     return '63.67%';
   } else {
@@ -191,110 +195,120 @@ var AudioMeterBlock = (0, _styledComponents["default"])('div')(_templateObject3
 });
 var ControlContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
 var Player = exports["default"] = /*#__PURE__*/function (_Component) {
-  _inherits(Player, _Component);
   function Player(props) {
     var _this;
     _classCallCheck(this, Player);
     _this = _callSuper(this, Player, [props]);
+    _defineProperty(_this, "closeSidemenu", function () {
+      var _this$props = _this.props,
+        player = _this$props.player,
+        onRightMenuVisible = _this$props.onRightMenuVisible;
+      _this.actions.toggleRightBar(player, false);
+      onRightMenuVisible(false);
+    });
     _this.controlsHideTimer = null;
     _this.meterHeight = 40;
     _this.video = null; // the Video component
     _this.manager = new _Manager["default"](props.store);
     _this.actions = _this.manager.getActions();
-    _this.manager.subscribeToPlayerStateChange(_this.handleStateChange.bind(_assertThisInitialized(_this)));
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    _this.getChildren = _this.getChildren.bind(_assertThisInitialized(_this));
-    _this.handleFullScreenChange = _this.handleFullScreenChange.bind(_assertThisInitialized(_this));
-    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
-    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.manager.subscribeToPlayerStateChange(_this.handleStateChange.bind(_this));
+    _this.handleResize = _this.handleResize.bind(_this);
+    _this.getChildren = _this.getChildren.bind(_this);
+    _this.handleFullScreenChange = _this.handleFullScreenChange.bind(_this);
+    _this.handleFocus = _this.handleFocus.bind(_this);
+    _this.handleBlur = _this.handleBlur.bind(_this);
     _this.actions.handlePlayerType(props.playerType);
     _this.actions.handleControlType(props.controlType);
+    if (_this.props.fullScreenRef) {
+      _this.props.fullScreenRef.current = _this;
+    }
     return _this;
   }
-  _createClass(Player, [{
+  _inherits(Player, _Component);
+  return _createClass(Player, [{
     key: "handleMarginsAndGrid",
     value: function handleMarginsAndGrid() {
-      var _this$props = this.props,
-        quality = _this$props.quality,
-        playerType = _this$props.playerType;
-      if (["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(playerType)) {
+      var _this$props2 = this.props,
+        quality = _this$props2.quality,
+        playerType = _this$props2.playerType;
+      if (['snp_edit', 'promo_review', 'pgm_edit', 'dubbing_review'].includes(playerType)) {
         this.actions.handleSDBorderChange({
-          key: "fourThreeSafeArea",
+          key: 'fourThreeSafeArea',
           value: false
         });
         this.actions.handleSDBorderChange({
-          key: "SDBorderActive",
+          key: 'SDBorderActive',
           value: false
         });
         this.actions.handleSDBorderChange({
-          key: "HDBorderActive",
+          key: 'HDBorderActive',
           value: false
         });
         this.actions.handleSDBorderChange({
-          key: "sixteenNineSafeArea",
+          key: 'sixteenNineSafeArea',
           value: false
         });
       } else if (playerType === 'qc') {
         if (quality === 'hd' || quality === 'uhd') {
           this.actions.handleSDBorderChange({
-            key: "fourThreeSafeArea",
+            key: 'fourThreeSafeArea',
             value: false
           });
           this.actions.handleSDBorderChange({
-            key: "SDBorderActive",
+            key: 'SDBorderActive',
             value: false
           });
           this.actions.handleSDBorderChange({
-            key: "sixteenNineSafeArea",
+            key: 'sixteenNineSafeArea',
             value: true
           });
           this.actions.handleSDBorderChange({
-            key: "HDBorderActive",
+            key: 'HDBorderActive',
             value: true
           });
         } else if (quality === 'sd') {
           this.actions.handleSDBorderChange({
-            key: "HDBorderActive",
+            key: 'HDBorderActive',
             value: false
           });
           this.actions.handleSDBorderChange({
-            key: "sixteenNineSafeArea",
+            key: 'sixteenNineSafeArea',
             value: false
           });
           this.actions.handleSDBorderChange({
-            key: "fourThreeSafeArea",
+            key: 'fourThreeSafeArea',
             value: true
           });
           this.actions.handleSDBorderChange({
-            key: "SDBorderActive",
+            key: 'SDBorderActive',
             value: true
           });
         }
       } else {
         this.actions.handleSDBorderChange({
-          key: "fourThreeSafeArea",
+          key: 'fourThreeSafeArea',
           value: false
         });
         this.actions.handleSDBorderChange({
-          key: "sixteenNineSafeArea",
+          key: 'sixteenNineSafeArea',
           value: false
         });
         if (quality === 'hd' || quality === 'uhd') {
           this.actions.handleSDBorderChange({
-            key: "SDBorderActive",
+            key: 'SDBorderActive',
             value: false
           });
           this.actions.handleSDBorderChange({
-            key: "HDBorderActive",
+            key: 'HDBorderActive',
             value: true
           });
         } else if (quality === 'sd') {
           this.actions.handleSDBorderChange({
-            key: "HDBorderActive",
+            key: 'HDBorderActive',
             value: false
           });
           this.actions.handleSDBorderChange({
-            key: "SDBorderActive",
+            key: 'SDBorderActive',
             value: true
           });
         }
@@ -307,18 +321,18 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       window.addEventListener('resize', this.handleResize);
       _fullscreen["default"].addEventListener(this.handleFullScreenChange);
       this.handleMarginsAndGrid();
-      /*
-       * const { player } = this.manager.getState();
-       * this.actions.toggleFullscreen(player);
+      /*
+       * const { player } = this.manager.getState();
+       * this.actions.toggleFullscreen(player);
        */
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props2 = this.props,
-        playerType = _this$props2.playerType,
-        activeSDBorder = _this$props2.activeSDBorder,
-        activeVersion = _this$props2.activeVersion;
+      var _this$props3 = this.props,
+        playerType = _this$props3.playerType,
+        activeSDBorder = _this$props3.activeSDBorder,
+        activeVersion = _this$props3.activeVersion;
       this.handleResize();
       if (activeSDBorder !== prevProps.activeSDBorder) {
         this.actions.handleSDBorderChange(activeSDBorder || false);
@@ -358,17 +372,25 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "getDefaultChildren",
     value: function getDefaultChildren(props, fullProps) {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        playerSvgRef = _this$props3.playerSvgRef,
-        parentAnnotations = _this$props3.parentAnnotations,
-        onShapeMouseDown = _this$props3.onShapeMouseDown,
-        handleMouseDown = _this$props3.handleMouseDown,
-        handleMouseMove = _this$props3.handleMouseMove,
-        handleMouseUp = _this$props3.handleMouseUp,
-        isSvgLayer = _this$props3.isSvgLayer,
-        inTime = _this$props3.inTime,
-        outTime = _this$props3.outTime;
+      var _this2 = this,
+        _fullProps$player,
+        _fullProps$player2,
+        _fullProps$player3,
+        _tabMetadata$edit_dat;
+      var _this$props4 = this.props,
+        playerSvgRef = _this$props4.playerSvgRef,
+        parentAnnotations = _this$props4.parentAnnotations,
+        onShapeMouseDown = _this$props4.onShapeMouseDown,
+        handleMouseDown = _this$props4.handleMouseDown,
+        handleMouseMove = _this$props4.handleMouseMove,
+        handleMouseUp = _this$props4.handleMouseUp,
+        isSvgLayer = _this$props4.isSvgLayer,
+        inTime = _this$props4.inTime,
+        outTime = _this$props4.outTime,
+        isRightMenuVisible = _this$props4.isRightMenuVisible,
+        tabMetadata = _this$props4.tabMetadata,
+        player = _this$props4.player,
+        onRightMenuVisible = _this$props4.onRightMenuVisible;
       return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this2._playerHeader = c;
@@ -389,6 +411,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         isSvgLayer: isSvgLayer,
         inTime: inTime,
         outTime: outTime,
+        isRightMenuVisible: isRightMenuVisible,
         key: "video",
         order: 2
       }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ProgressControl["default"], _extends({
@@ -398,13 +421,38 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }, this.props, {
         key: "progress-control",
         order: 3
-      })), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
+      })), /*#__PURE__*/_react["default"].createElement(_RenderCommentMarkers["default"], _extends({
+        duration: fullProps === null || fullProps === void 0 || (_fullProps$player = fullProps.player) === null || _fullProps$player === void 0 ? void 0 : _fullProps$player.duration,
+        playerType: fullProps.playerType,
+        isFullscreen: fullProps === null || fullProps === void 0 || (_fullProps$player2 = fullProps.player) === null || _fullProps$player2 === void 0 ? void 0 : _fullProps$player2.isFullscreen,
+        zoom: fullProps === null || fullProps === void 0 || (_fullProps$player3 = fullProps.player) === null || _fullProps$player3 === void 0 ? void 0 : _fullProps$player3.zoom,
+        onSegmentClick: this.onSegmentClick,
+        player: fullProps === null || fullProps === void 0 ? void 0 : fullProps.player,
+        onRightMenuVisible: onRightMenuVisible,
+        actions: fullProps === null || fullProps === void 0 ? void 0 : fullProps.actions,
+        order: 4,
+        data: tabMetadata === null || tabMetadata === void 0 || (_tabMetadata$edit_dat = tabMetadata.edit_data) === null || _tabMetadata$edit_dat === void 0 || (_tabMetadata$edit_dat = _tabMetadata$edit_dat[0]) === null || _tabMetadata$edit_dat === void 0 || (_tabMetadata$edit_dat = _tabMetadata$edit_dat.value) === null || _tabMetadata$edit_dat === void 0 ? void 0 : _tabMetadata$edit_dat.map(function (item) {
+          var _item$marker_data;
+          var itemObj = _objectSpread(_objectSpread({}, item.marker_data), {}, {
+            comment_type: item === null || item === void 0 ? void 0 : item.comment_type,
+            access: item === null || item === void 0 ? void 0 : item.access,
+            id: item === null || item === void 0 ? void 0 : item.marker_db_id,
+            ingest_db_id: item === null || item === void 0 ? void 0 : item.ingest_db_id,
+            reply_count: item === null || item === void 0 ? void 0 : item.reply_count,
+            value: _objectSpread(_objectSpread({}, item === null || item === void 0 || (_item$marker_data = item.marker_data) === null || _item$marker_data === void 0 ? void 0 : _item$marker_data.value), {}, {
+              created_by: item === null || item === void 0 ? void 0 : item.created_by
+            }),
+            hideComments: true
+          });
+          return itemObj;
+        })
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
         ref: function ref(c) {
           _this2._controlBar = c;
         },
         key: "control-bar",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
-        order: 4,
+        order: 5,
         playerType: fullProps.playerType
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
@@ -412,7 +460,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }, props, {
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         playerType: fullProps.playerType,
-        frameRate: fullProps.frameRate
+        frameRate: fullProps.frameRate,
+        isRightMenuVisible: isRightMenuVisible,
+        onRightMenuVisible: onRightMenuVisible
       }))];
     }
   }, {
@@ -434,15 +484,15 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         order: 0.0
       }, fullProps)),
       /*#__PURE__*/
-      /*
-       * <ControlBar
-       *   ref={(c) => {
-       *     this._controlBar = c;
-       *   }}
-       *   key="control-bar"
-       *   order={2}
-       *   {...this.props}
-       * />,
+      /*
+       * <ControlBar
+       *   ref={(c) => {
+       *     this._controlBar = c;
+       *   }}
+       *   key="control-bar"
+       *   order={2}
+       *   {...this.props}
+       * />,
        */
       _react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
@@ -453,16 +503,20 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "getAdvancedChildren",
     value: function getAdvancedChildren(props, fullProps) {
       var _this4 = this;
-      var _this$props4 = this.props,
-        playerSvgRef = _this$props4.playerSvgRef,
-        parentAnnotations = _this$props4.parentAnnotations,
-        onShapeMouseDown = _this$props4.onShapeMouseDown,
-        handleMouseDown = _this$props4.handleMouseDown,
-        handleMouseMove = _this$props4.handleMouseMove,
-        handleMouseUp = _this$props4.handleMouseUp,
-        isSvgLayer = _this$props4.isSvgLayer,
-        inTime = _this$props4.inTime,
-        outTime = _this$props4.outTime;
+      var _this$props5 = this.props,
+        playerSvgRef = _this$props5.playerSvgRef,
+        parentAnnotations = _this$props5.parentAnnotations,
+        onShapeMouseDown = _this$props5.onShapeMouseDown,
+        handleMouseDown = _this$props5.handleMouseDown,
+        handleMouseMove = _this$props5.handleMouseMove,
+        handleMouseUp = _this$props5.handleMouseUp,
+        isSvgLayer = _this$props5.isSvgLayer,
+        inTime = _this$props5.inTime,
+        outTime = _this$props5.outTime,
+        tabMetadata = _this$props5.tabMetadata,
+        isRightMenuVisible = _this$props5.isRightMenuVisible,
+        isFullscreen = _this$props5.isFullscreen,
+        player = _this$props5.player;
       return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this4._playerHeader = c;
@@ -483,6 +537,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         isSvgLayer: isSvgLayer,
         inTime: inTime,
         outTime: outTime,
+        isRightMenuVisible: isRightMenuVisible,
         key: "video",
         order: 0.0
       }, fullProps)), /*#__PURE__*/_react["default"].createElement(_ControlBar["default"], _extends({
@@ -491,7 +546,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         },
         key: "control-bar",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
-        order: 2,
+        order: 3,
         playerType: fullProps.playerType
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
@@ -527,9 +582,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       var defaultChildren = props.controlType === 'advanced' ? this.getAdvancedChildren(propsWithoutChildren, props) : this.getDefaultChildren(propsWithoutChildren, props);
       return (0, _utils.mergeAndSortChildren)(defaultChildren, children, propsWithoutChildren);
     }
-    /*
-     * get redux state
-     * { player, operation }
+    /*
+     * get redux state
+     * { player, operation }
      */
   }, {
     key: "getState",
@@ -544,9 +599,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       return this.video.playbackRate;
     }
 
-    /*
-     * set playback rate
-     * speed of video
+    /*
+     * set playback rate
+     * speed of video
      */,
     set: function set(rate) {
       this.video.playbackRate = rate;
@@ -654,7 +709,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       return this.manager.subscribeToPlayerStateChange(listener);
     }
 
-    // player resize
+    // player resize changes
   }, {
     key: "handleResize",
     value: function handleResize() {
@@ -669,16 +724,38 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       var controlBar = (0, _reactDom.findDOMNode)(this._controlBar);
       var playlist = (0, _reactDom.findDOMNode)(this._playlist);
       var playerContainer = (0, _reactDom.findDOMNode)(this._playerContainer);
-      var _this$props5 = this.props,
-        controlType = _this$props5.controlType,
-        playerType = _this$props5.playerType,
-        fileType = _this$props5.fileType;
+      var _this$props6 = this.props,
+        controlType = _this$props6.controlType,
+        playerType = _this$props6.playerType,
+        fileType = _this$props6.fileType,
+        isRightMenuVisible = _this$props6.isRightMenuVisible;
+
+      //added for header height
+      var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
+      var totalHeight = window.innerHeight;
+      var totalWidth = window.innerWidth;
+      var newHeight;
       var height = 0;
       _toConsumableArray(leftSectionRef.children).forEach(function (child) {
         return height += child.offsetHeight;
       });
       if (rightSectionRef) {
         rightSectionRef.style.height = height + 'px';
+        //for rightsection top to again 0px
+        rightSectionRef.style.top = '0px';
+      }
+      //toggle functionality fullscreen on player header
+      if (player.isFullscreen) {
+        var containerWidth = playerContainer.offsetWidth;
+        playerHeader.style.width = "".concat(containerWidth, "px");
+      } else {
+        playerHeader.style.width = '100%';
+      }
+      //added for full screen with right section to little down for video player
+      if (rightSectionRef && player.isFullscreen) {
+        newHeight = totalHeight - headerHeight;
+        rightSectionRef.style.top = "".concat(headerHeight, "px");
+        rightSectionRef.style.height = "".concat(newHeight, "px");
       }
       if (audioMeterBlock) {
         audioMeterBlock.style.height = video.offsetHeight + 'px';
@@ -706,6 +783,28 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.style.height = videoHeight + 'px';
         video.style.margin = '0 auto';
         video.classList.add('ratio-border');
+      }
+      // Fullscreen mode with right section consideration
+      else if (player.isFullscreen) {
+        // Calculate available width considering right section
+        var availableWidth = totalWidth;
+        if (isRightMenuVisible) {
+          // Subtract right section width from available width
+          availableWidth = totalWidth - rightSectionRef.offsetWidth;
+        }
+        // Calculate video dimensions based on available space
+        videoHeight = totalHeight - headerHeight - progressControl.offsetHeight - controlBar.offsetHeight;
+        videoWidth = videoHeight * (16 / 9);
+        // If video width exceeds available width, recalculate based on width
+        if (videoWidth > availableWidth) {
+          videoWidth = availableWidth;
+          videoHeight = videoWidth * (9 / 16);
+        }
+        video.style.paddingTop = '0';
+        video.style.width = videoWidth + 'px';
+        video.style.height = videoHeight + 'px';
+        video.style.margin = '0 auto';
+        video.classList.add('ratio-border');
       } else if (window.innerHeight < 1024 && (playerContainer.offsetHeight > window.innerHeight || window.innerHeight > playerContainer.offsetHeight)) {
         var playlistMinHeight = 150;
         if (controlType === 'default') {
@@ -735,13 +834,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }
       if (player.isFullscreen && progressControl) {
         videoHeight = window.innerHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
-        videoWidth = videoHeight * (16 / 9);
         if (videoWidth > window.innerWidth) {
-          videoWidth = window.innerWidth;
           videoHeight = videoWidth * (9 / 16);
         }
         video.style.paddingTop = '0';
-        video.style.width = videoWidth + 'px';
         video.style.height = videoHeight + 'px';
         video.style.margin = '0 auto';
         video.classList.add('ratio-border');
@@ -785,9 +881,12 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video: this.video ? this.video.video : null
       });
       var childrensLeft = this.getChildren(props, 'left');
-      var _this$props6 = this.props,
-        rightSection = _this$props6.rightSection,
-        playerType = _this$props6.playerType;
+      var _this$props7 = this.props,
+        rightSection = _this$props7.rightSection,
+        playerType = _this$props7.playerType,
+        isFullscreen = _this$props7.isFullscreen,
+        tabMetadata = _this$props7.tabMetadata,
+        isRightMenuVisible = _this$props7.isRightMenuVisible;
       return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
         ref: function ref(c) {
           _this5.manager.rootElement = c;
@@ -797,11 +896,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         onBlur: this.handleBlur,
         tabIndex: "-1"
       }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
+        className: "player-container",
         ref: function ref(playerContainer) {
           _this5._playerContainer = playerContainer;
         }
       }, props, {
-        hasRightSection: !!rightSection
+        hasRightSection: !!rightSection,
+        isRightMenuVisible: isRightMenuVisible
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "left-video-section",
         ref: function ref(leftSectionRef) {
@@ -842,7 +943,6 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }, this.props)));
     }
   }]);
-  return Player;
 }(_react.Component);
 Player.contextTypes = {
   store: _propTypes.PropTypes.instanceOf(Object)