@desynova-digital/player 4.0.88 → 4.0.89

package/actions/player.js

@@ -232,22 +232,23 @@ function toggleFullscreen(player) {
 }
 function toggleRightBar(player, showRightMenu) {
   var right = document.querySelector('.right-video-section');
+  var sidebarWidth = right.offsetWidth; // actual width of sidebar
   // Already fullscreen → toggle UI only (NO EXIT)
   if (_fullscreen["default"].isFullscreen) {
     right.style.transition = 'transform 0.4s ease, opacity 0.3s ease';
     if (showRightMenu) {
       // ✅ Coming from right to left (enter animation)
       right.style.display = 'block';
-      right.style.transform = 'translateX(100%)'; // start off-screen right
+      right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen 
       right.style.opacity = '0';
       // Small delay to allow the browser to register initial position
       requestAnimationFrame(function () {
-        right.style.transform = 'translateX(0)'; // slide in
+        right.style.right = '0px'; // slide in
         right.style.opacity = '1';
       });
     } else {
       // ✅ Going left to right (exit animation)
-      right.style.transform = 'translateX(100%)'; // slide out to right
+      right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
       right.style.opacity = '0';
       // Hide after animation completes
       setTimeout(function () {

package/components/Player.js

@@ -200,11 +200,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     _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);
+      var _this$manager$getStat = _this.manager.getState(),
+        player = _this$manager$getStat.player;
+      var onRightMenuVisible = _this.props.onRightMenuVisible;
+      if (player !== null && player !== void 0 && player.isFullscreen) {
+        _this.actions.toggleRightBar(player, false);
+        onRightMenuVisible(false);
+      }
     });
     _this.controlsHideTimer = null;
     _this.meterHeight = 40;
@@ -228,9 +230,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   return _createClass(Player, [{
     key: "handleMarginsAndGrid",
     value: function handleMarginsAndGrid() {
-      var _this$props2 = this.props,
-        quality = _this$props2.quality,
-        playerType = _this$props2.playerType;
+      var _this$props = this.props,
+        quality = _this$props.quality,
+        playerType = _this$props.playerType;
       if (['snp_edit', 'promo_review', 'pgm_edit', 'dubbing_review'].includes(playerType)) {
         this.actions.handleSDBorderChange({
           key: 'fourThreeSafeArea',
@@ -329,10 +331,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props3 = this.props,
-        playerType = _this$props3.playerType,
-        activeSDBorder = _this$props3.activeSDBorder,
-        activeVersion = _this$props3.activeVersion;
+      var _this$props2 = this.props,
+        playerType = _this$props2.playerType,
+        activeSDBorder = _this$props2.activeSDBorder,
+        activeVersion = _this$props2.activeVersion;
       this.handleResize();
       if (activeSDBorder !== prevProps.activeSDBorder) {
         this.actions.handleSDBorderChange(activeSDBorder || false);
@@ -377,20 +379,20 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         _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;
+      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,
+        isRightMenuVisible = _this$props3.isRightMenuVisible,
+        tabMetadata = _this$props3.tabMetadata,
+        player = _this$props3.player,
+        onRightMenuVisible = _this$props3.onRightMenuVisible;
       return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this2._playerHeader = c;
@@ -456,14 +458,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         playerType: fullProps.playerType
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
-        order: 99.0
-      }, props, {
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         playerType: fullProps.playerType,
         frameRate: fullProps.frameRate,
         isRightMenuVisible: isRightMenuVisible,
-        onRightMenuVisible: onRightMenuVisible
-      }))];
+        onRightMenuVisible: onRightMenuVisible,
+        order: 99.0
+      }, props))];
     }
   }, {
     key: "getImageChildren",
@@ -503,20 +504,21 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "getAdvancedChildren",
     value: function getAdvancedChildren(props, fullProps) {
       var _this4 = this;
-      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;
+      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,
+        tabMetadata = _this$props4.tabMetadata,
+        isRightMenuVisible = _this$props4.isRightMenuVisible,
+        isFullscreen = _this$props4.isFullscreen,
+        player = _this$props4.player,
+        onRightMenuVisible = _this$props4.onRightMenuVisible;
       return [/*#__PURE__*/_react["default"].createElement(_PlayerHeader["default"], _extends({
         ref: function ref(c) {
           _this4._playerHeader = c;
@@ -550,12 +552,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         playerType: fullProps.playerType
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_Shortcut["default"], _extends({
         key: "shortcut",
-        order: 99.0
-      }, props, {
+        pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         playerType: fullProps.playerType,
         frameRate: fullProps.frameRate,
-        pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect
-      }))];
+        isRightMenuVisible: isRightMenuVisible,
+        onRightMenuVisible: onRightMenuVisible,
+        order: 99.0
+      }, props))];
     }
   }, {
     key: "getChildren",
@@ -713,8 +716,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleResize",
     value: function handleResize() {
-      var _this$manager$getStat = this.manager.getState(),
-        player = _this$manager$getStat.player;
+      var _this$manager$getStat2 = this.manager.getState(),
+        player = _this$manager$getStat2.player;
       var leftSectionRef = this._leftSectionRef;
       var rightSectionRef = this._rightSectionRef;
       var audioMeterBlock = this._audioMeterBlock;
@@ -724,11 +727,11 @@ 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$props6 = this.props,
-        controlType = _this$props6.controlType,
-        playerType = _this$props6.playerType,
-        fileType = _this$props6.fileType,
-        isRightMenuVisible = _this$props6.isRightMenuVisible;
+      var _this$props5 = this.props,
+        controlType = _this$props5.controlType,
+        playerType = _this$props5.playerType,
+        fileType = _this$props5.fileType,
+        isRightMenuVisible = _this$props5.isRightMenuVisible;
 
       //added for header height
       var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
@@ -871,8 +874,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this5 = this;
-      var _this$manager$getStat2 = this.manager.getState(),
-        player = _this$manager$getStat2.player;
+      var _this$manager$getStat3 = this.manager.getState(),
+        player = _this$manager$getStat3.player;
       var props = _objectSpread(_objectSpread({}, this.props), {}, {
         player: player,
         actions: this.actions,
@@ -881,12 +884,12 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video: this.video ? this.video.video : null
       });
       var childrensLeft = this.getChildren(props, 'left');
-      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;
+      var _this$props6 = this.props,
+        rightSection = _this$props6.rightSection,
+        playerType = _this$props6.playerType,
+        isFullscreen = _this$props6.isFullscreen,
+        tabMetadata = _this$props6.tabMetadata,
+        isRightMenuVisible = _this$props6.isRightMenuVisible;
       return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
         ref: function ref(c) {
           _this5.manager.rootElement = c;

package/components/PointersBar.js

@@ -211,7 +211,8 @@ var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
       var _this3 = this;
       var _this$props3 = this.props,
         markers = _this$props3.markers,
-        zoom = _this$props3.zoom;
+        zoom = _this$props3.zoom,
+        isFullscreen = _this$props3.player.isFullscreen;
       var _this$state = this.state,
         _this$state$tooltip = _this$state.tooltip,
         isVisible = _this$state$tooltip.isVisible,
@@ -227,7 +228,7 @@ var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
           var scrollTop = e.target.scrollTop;
           _this3.props.onScroll(scrollTop);
         }
-      }, markers && markers.length ? markers.map(function (marker_obj) {
+      }, !isFullscreen && markers && markers.length ? markers.map(function (marker_obj) {
         return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
           id: "pointers-block",
           ref: function ref(c) {

package/components/progress-bar/RenderCommentMarkers.js

@@ -38,20 +38,20 @@ var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_template
 /* ----------------------------------------------------------
    HOVER BOX
 ---------------------------------------------------------- */
-var HoverBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 30px;\n  left: var(--left);\n  transform: translateX(-50%);\n  // width: auto;\n  min-width: 150px;\n  max-width: 220px;\n  max-height: 400px;\n  background: #303f51;\n  backdrop-filter: blur(12px);\n  border-radius: 10px;\n  padding: ", ";\n  color: white;\n  z-index: 999999;\n  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n  font-family: 'Inter', 'SF Pro Display', 'Segoe UI', sans-serif;\n  overflow-y: auto;\n  animation: fadeInBox 0.18s ease-out;\n"])), function (props) {
+var HoverBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 30px;\n  left: var(--left);\n  transform: translateX(-50%);\n  // width: auto;\n  min-width: 150px;\n  max-width: 220px;\n  max-height: 400px;\n  background: #303f51;\n  backdrop-filter: blur(12px);\n  border-radius: 10px;\n  padding: ", ";\n  color: white;\n  z-index: 999999;\n  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n  font-family: 'SF Pro Text';\n  overflow-y: auto;\n  animation: fadeInBox 0.18s ease-out;\n"])), function (props) {
   return props.commentLength > 1 ? '0px 9px 8px 4px' : '10px 9px 8px 4px';
 });
 var HoverHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: calc(100% + 18px);\n  position: relative;\n  left: -9px;\n  background: #3e6673;\n  color: #46d7ff;\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  padding: 10px 12px;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  margin-bottom: 8px;\n"])));
 var HoverComment = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 10px 0;\n  position: relative;\n  border-radius: 5px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  &:hover {\n    background: rgba(255, 255, 255, 0.08); /* subtle highlight */\n    transform: translateX(2px); /* slight movement */\n  }\n  &:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: -9px;\n    width: calc(100% + 18px);\n    height: 1px;\n    background: rgba(255, 255, 255, 0.12);\n  }\n"])));
 var HoverName = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  font-weight: 700;\n  color: #afb2ba;\n  margin-bottom: 8px;\n"])));
 var HoverTime = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 11px;\n  color: #afb2ba;\n  margin-bottom: 5px;\n"])));
-var HoverText = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  color: #fff;\n  line-height: 1.35;\n  display: -webkit-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n"])));
+var HoverText = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  font-family: 'SF Pro Text';\n  color: #fff;\n  line-height: 1.35;\n  display: -webkit-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  font-weight: 300;\n  line-height: 21px;\n  font-style: normal;\n"])));
 
 /* ----------------------------------------------------------
    SAFE LEFT POSITION
 ---------------------------------------------------------- */
 var getSafeLeft = function getSafeLeft(percent) {
-  if (percent < 5) return 5;
+  if (percent < 3) return 3;
   if (percent > 95) return 95;
   return percent;
 };
@@ -123,6 +123,19 @@ var RenderCommentMarkers = function RenderCommentMarkers(props) {
     var end = comments[0].value.out_time;
     var startPercent = getMarkerPercent(start, duration, zoom);
     var endPercent = end ? getMarkerPercent(end, duration, zoom) : null;
+
+    // --- NEW: detect first & last markers ---
+    var times = Object.keys(grouped).map(Number).sort(function (a, b) {
+      return a - b;
+    });
+    var firstTime = times[0];
+    var lastTime = times[times.length - 1];
+    var isFirst = Number(time) === firstTime;
+    var isLast = Number(time) === lastTime;
+
+    // --- NEW: apply safe-left/right only to first & last ---
+    var safeStart = isFirst ? getSafeLeft(startPercent) : startPercent;
+    var safeEnd = isLast && endPercent !== null ? getSafeLeft(endPercent) : endPercent;
     var initials = ((_comments$ = comments[0]) === null || _comments$ === void 0 || (_comments$ = _comments$.value) === null || _comments$ === void 0 || (_comments$ = _comments$.created_by) === null || _comments$ === void 0 || (_comments$ = _comments$.name) === null || _comments$ === void 0 || (_comments$ = _comments$.split(' ')) === null || _comments$ === void 0 || (_comments$ = _comments$.map(function (n) {
       return n[0];
     })) === null || _comments$ === void 0 || (_comments$ = _comments$.join('')) === null || _comments$ === void 0 || (_comments$ = _comments$.slice(0, 2)) === null || _comments$ === void 0 ? void 0 : _comments$.toUpperCase()) || 'CM';
@@ -131,13 +144,13 @@ var RenderCommentMarkers = function RenderCommentMarkers(props) {
       key: time
     }, endPercent !== null && /*#__PURE__*/_react["default"].createElement(MarkerLine, {
       style: {
-        left: "".concat(startPercent, "%"),
-        width: "calc(".concat(endPercent - startPercent, "% )"),
+        left: "".concat(safeStart, "%"),
+        width: "calc(".concat(safeEnd - safeStart, "% )"),
         opacity: hovered === time ? 1 : 0
       }
     }), /*#__PURE__*/_react["default"].createElement(MarkerDot, {
       style: {
-        left: "".concat(startPercent, "%")
+        left: "".concat(safeStart, "%")
       },
       onMouseEnter: function onMouseEnter() {
         return setHovered(time);
@@ -151,14 +164,14 @@ var RenderCommentMarkers = function RenderCommentMarkers(props) {
       }
     }, displayLabel), endPercent !== null && /*#__PURE__*/_react["default"].createElement(EndMarkerDot, {
       style: {
-        left: "".concat(endPercent, "%"),
+        left: "".concat(safeEnd, "%"),
         opacity: hovered === time ? 1 : 0
       }
     }), hovered === time && /*#__PURE__*/_react["default"].createElement(HoverBox, {
       commentLength: comments.length,
       tabIndex: 0,
       style: {
-        '--left': "".concat(getSafeLeft(startPercent), "%")
+        '--left': "".concat(getSafeLeft(safeStart), "%") // <-- updated for first/last
       },
       onMouseEnter: function onMouseEnter() {
         if (hideTimer.current) clearTimeout(hideTimer.current);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.0.88",
+  "version": "4.0.89",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {