@desynova-digital/player 4.0.88 → 4.0.90

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;
@@ -453,17 +455,17 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         key: "control-bar",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         order: 5,
-        playerType: fullProps.playerType
+        playerType: fullProps.playerType,
+        onRightMenuVisible: onRightMenuVisible
       }, 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 +505,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;
@@ -547,15 +550,17 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         key: "control-bar",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         order: 3,
-        playerType: fullProps.playerType
+        playerType: fullProps.playerType,
+        onRightMenuVisible: onRightMenuVisible
       }, 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 +718,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,14 +729,16 @@ 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;
+      var progressControlHeight = controlBar ? controlBar.offsetHeight : 0;
+      var controlBarHeight = progressControl ? progressControl.offsetHeight : 0;
       var totalHeight = window.innerHeight;
       var totalWidth = window.innerWidth;
       var newHeight;
@@ -793,7 +800,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
           availableWidth = totalWidth - rightSectionRef.offsetWidth;
         }
         // Calculate video dimensions based on available space
-        videoHeight = totalHeight - headerHeight - progressControl.offsetHeight - controlBar.offsetHeight;
+        videoHeight = totalHeight - headerHeight - progressControlHeight - controlBarHeight;
         videoWidth = videoHeight * (16 / 9);
         // If video width exceeds available width, recalculate based on width
         if (videoWidth > availableWidth) {
@@ -865,14 +872,17 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleBlur",
     value: function handleBlur() {
+      var _this$manager$getStat3 = this.manager.getState(),
+        player = _this$manager$getStat3.player;
+      if (player.isFullscreen) return;
       this.actions.activate(false);
     }
   }, {
     key: "render",
     value: function render() {
       var _this5 = this;
-      var _this$manager$getStat2 = this.manager.getState(),
-        player = _this$manager$getStat2.player;
+      var _this$manager$getStat4 = this.manager.getState(),
+        player = _this$manager$getStat4.player;
       var props = _objectSpread(_objectSpread({}, this.props), {}, {
         player: player,
         actions: this.actions,
@@ -881,12 +891,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/PlayerHeader.js

@@ -355,7 +355,7 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           return _this2.openQCReport();
         }
-      }, this.props)), playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(_components.Button, _extends({
+      }, this.props)), !isFullscreen && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(_components.Button, _extends({
         display: "rounded",
         appearance: "cta",
         icon: playerType === 'dubbing_review' ? 'access_dubbing_studio' : playerType,

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/marking-controls/MarkInControl.js

@@ -91,7 +91,12 @@ var MarkInControl = exports["default"] = /*#__PURE__*/function (_Component) {
         onAddMarker = _this$props2.onAddMarker,
         frameRate = _this$props2.frameRate,
         playerType = _this$props2.playerType,
-        enablePlayerActions = _this$props2.enablePlayerActions;
+        enablePlayerActions = _this$props2.enablePlayerActions,
+        onRightMenuVisible = _this$props2.onRightMenuVisible;
+      if (player.isFullscreen) {
+        actions.toggleRightBar(player, true);
+        onRightMenuVisible(true);
+      }
       if (["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(playerType) || enablePlayerActions.includes('single_annotation')) {
         var currentAdjustedTime = (0, _utils.handleAdjustingVideoAsPerFrame)(player.currentTime, frameRate);
         var data = {

package/components/marking-controls/MarkOutControl.js

@@ -98,7 +98,8 @@ var MarkOutControl = exports["default"] = /*#__PURE__*/function (_Component) {
         onMarkerSelect = _this$props2.onMarkerSelect,
         onAddMarker = _this$props2.onAddMarker,
         frameRate = _this$props2.frameRate,
-        pauseOnOutMarkerSelect = _this$props2.pauseOnOutMarkerSelect;
+        pauseOnOutMarkerSelect = _this$props2.pauseOnOutMarkerSelect,
+        onRightMenuVisible = _this$props2.onRightMenuVisible;
       if (leftMarker > -1 && player.currentTime > leftMarker) {
         // actions.handleMarkerPointChange('add', 'right', player.currentTime);
         //Commented for CN-632.
@@ -106,6 +107,10 @@ var MarkOutControl = exports["default"] = /*#__PURE__*/function (_Component) {
         //   onMarkerSelect(leftMarker, player.currentTime);
         // }
         // actions.handleMarkerPointChange('create');
+        if (player.isFullscreen) {
+          actions.toggleRightBar(player, true);
+          onRightMenuVisible(true);
+        }
         if (pauseOnOutMarkerSelect && !player.paused) {
           actions.pause({
             action: 'pause',

package/components/marking-controls/MarkingControl.js

@@ -57,7 +57,8 @@ function MarkingControl(_ref) {
     theme = _ref.theme,
     enablePlayerActions = _ref.enablePlayerActions,
     pauseOnOutMarkerSelect = _ref.pauseOnOutMarkerSelect,
-    timeCodeFormat = _ref.timeCodeFormat;
+    timeCodeFormat = _ref.timeCodeFormat,
+    onRightMenuVisible = _ref.onRightMenuVisible;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(MarkingBlock, {
     theme: theme
   }, (!((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1) || !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes('marking_controls') ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
@@ -69,7 +70,8 @@ function MarkingControl(_ref) {
     allowMarkerOverlap: allowMarkerOverlap,
     onAddMarker: onAddMarker,
     enablePlayerActions: enablePlayerActions,
-    playerType: playerType
+    playerType: playerType,
+    onRightMenuVisible: onRightMenuVisible
   }), /*#__PURE__*/_react["default"].createElement(_MarkOutControl["default"], {
     theme: theme,
     leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
@@ -81,7 +83,8 @@ function MarkingControl(_ref) {
     onMarkerSelect: onMarkerSelect,
     allowMarkerOverlap: allowMarkerOverlap,
     onAddMarker: onAddMarker,
-    pauseOnOutMarkerSelect: pauseOnOutMarkerSelect
+    pauseOnOutMarkerSelect: pauseOnOutMarkerSelect,
+    onRightMenuVisible: onRightMenuVisible
   })) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 || (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingDuration["default"], {
     theme: theme,
     leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,

package/components/progress-bar/RenderCommentMarkers.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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); }
@@ -22,67 +23,83 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
    TIMELINE MAIN WRAPPER
 ---------------------------------------------------------- */
 var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 11px;\n"])));
+
 /* ----------------------------------------------------------
-   MARKER DOT (start dot)
+   MARKER DOT
 ---------------------------------------------------------- */
-var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -6px;\n  transform: translateX(-50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #47d2c7;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #0a0f18;\n  font-weight: 600;\n  font-size: 10px;\n  cursor: pointer;\n  z-index: 9000;\n\n  &:hover {\n    background: #3bbfb6;\n  }\n"])));
+var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -6px;\n  transform: translateX(-50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #47d2c7;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #0a0f18;\n  font-weight: 600;\n  font-size: 10px;\n  cursor: pointer;\n  z-index: ", ";\n  pointer-events: auto;\n\n  /* invisible hit-box (prevents overlap hover loss) */\n  &::before {\n    content: \"\";\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    top: -6px;\n    left: -6px;\n  }\n\n  &:hover {\n    background: #3bbfb6;\n  }\n"])), function (p) {
+  return p.isHovered ? 99999 : 9000;
+});
+
 /* ----------------------------------------------------------
-   END MARKER DOT (VISIBLE ONLY ON HOVER)
+   END MARKER DOT
 ---------------------------------------------------------- */
-var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -6px;\n  transform: translateX(-50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #2ee8dd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9000;\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background: white;\n    border-radius: 50%;\n  }\n"])));
+var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -6px;\n  transform: translateX(-50%);\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #2ee8dd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9000;\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n\n  &::after {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background: white;\n    border-radius: 50%;\n  }\n"])));
+
 /* ----------------------------------------------------------
-   HORIZONTAL SEGMENT LINE
+   SEGMENT LINE
 ---------------------------------------------------------- */
-var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 4px;\n  height: 3px;\n  background: #47d2c7;\n  border-radius: 2px;\n  z-index: 8000;\n\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n"])));
+var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 4px;\n  height: 3px;\n  background: #47d2c7;\n  border-radius: 2px;\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n"])));
 
 /* ----------------------------------------------------------
    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) {
-  return props.commentLength > 1 ? '0px 9px 8px 4px' : '10px 9px 8px 4px';
+var HoverBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 30px;\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  overflow-y: auto;\n  animation: fadeInBox 0.18s ease-out;\n  min-width: 150px;\n  max-width: 240px;\n  max-height: 400px;\n"])), function (p) {
+  return p.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 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  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);\n    transform: translateX(2px);\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  color: #fff;\n  line-height: 21px;\n  overflow: hidden;\n"])));
 
 /* ----------------------------------------------------------
-   SAFE LEFT POSITION
+   UTILITIES (FIXED)
 ---------------------------------------------------------- */
-var getSafeLeft = function getSafeLeft(percent) {
-  if (percent < 5) return 5;
-  if (percent > 95) return 95;
-  return percent;
+var clampPx = function clampPx(px, containerWidth) {
+  var SAFE = 10;
+  if (px <= SAFE) return SAFE;
+  if (px >= containerWidth - SAFE) return containerWidth - SAFE;
+  return px;
+};
+var getMarkerPercent = function getMarkerPercent(time, duration, zoom) {
+  if (!duration) return 0;
+  var pct = time / duration;
+  return pct * 100 * (zoom > 0 ? zoom * 20 : 1);
+};
+var getSafeLeftPx = function getSafeLeftPx(percent, containerWidth) {
+  if (!containerWidth) return "".concat(percent, "%");
+  var px = percent / 100 * containerWidth;
+  return "".concat(clampPx(px, containerWidth), "px");
 };
 
 /* ----------------------------------------------------------
-   TIME → PERCENT
+   HOVER BOX CLAMP
 ---------------------------------------------------------- */
-var getMarkerPercent = function getMarkerPercent(time, duration, zoom) {
-  if (!duration || duration <= 0) return 0;
-  var percent = time / duration;
-  percent = percent >= 1 ? 1 : percent;
-  if (zoom > 0) return percent * 100 * zoom * 20;
-  return percent * 100;
+var clampHoverBoxLeft = function clampHoverBoxLeft(rawLeftPx, boxWidth, containerWidth) {
+  var SAFE = 10;
+  var max = containerWidth - boxWidth - SAFE;
+  return Math.max(SAFE, Math.min(rawLeftPx, max));
 };
 
 /* ----------------------------------------------------------
    MAIN COMPONENT
 ---------------------------------------------------------- */
-var RenderCommentMarkers = function RenderCommentMarkers(props) {
-  var _props$data = props.data,
-    data = _props$data === void 0 ? [] : _props$data,
-    _props$duration = props.duration,
-    duration = _props$duration === void 0 ? 100.0 : _props$duration,
-    _props$zoom = props.zoom,
-    zoom = _props$zoom === void 0 ? 0 : _props$zoom,
-    playerType = props.playerType,
-    onSegmentClick = props.onSegmentClick,
-    onRightMenuVisible = props.onRightMenuVisible,
-    actions = props.actions,
-    player = props.player;
-  if (!['snp_edit', 'pgm_edit'].includes(playerType)) return null;
+var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
+  var _containerRef$current;
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 100 : _ref$duration,
+    _ref$zoom = _ref.zoom,
+    zoom = _ref$zoom === void 0 ? 0 : _ref$zoom,
+    playerType = _ref.playerType,
+    onSegmentClick = _ref.onSegmentClick,
+    onRightMenuVisible = _ref.onRightMenuVisible,
+    actions = _ref.actions,
+    player = _ref.player,
+    frameRate = _ref.frameRate;
+  if (!["snp_edit", "pgm_edit"].includes(playerType)) return null;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     hovered = _useState2[0],
@@ -91,77 +108,80 @@ var RenderCommentMarkers = function RenderCommentMarkers(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     hoverBoxHold = _useState4[0],
     setHoverBoxHold = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedComment = _useState6[0],
-    setSelectedComment = _useState6[1];
+  var containerRef = (0, _react.useRef)(null);
   var hideTimer = (0, _react.useRef)(null);
   var startHideTimer = function startHideTimer() {
-    if (hideTimer.current) clearTimeout(hideTimer.current);
+    clearTimeout(hideTimer.current);
     hideTimer.current = setTimeout(function () {
       setHoverBoxHold(false);
       setHovered(null);
-      setSelectedComment(null);
-    }, 2000);
-  };
-  var handleLeaveMarker = function handleLeaveMarker() {
-    if (!hoverBoxHold) startHideTimer();
+    }, 1500);
   };
-  if (!Array.isArray(data) || data.length === 0) return null;
+  if (!data.length) return null;
   var grouped = data.reduce(function (acc, item) {
     var key = item.value.in_time;
-    if (!acc[key]) acc[key] = [];
-    acc[key].push(item);
+    (acc[key] = acc[key] || []).push(item);
     return acc;
   }, {});
-  return /*#__PURE__*/_react["default"].createElement(MarkerTimeline, null, Object.entries(grouped).map(function (_ref) {
+  var containerWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+  return /*#__PURE__*/_react["default"].createElement(MarkerTimeline, {
+    ref: containerRef
+  }, Object.entries(grouped).map(function (_ref2) {
     var _comments$;
-    var _ref2 = _slicedToArray(_ref, 2),
-      time = _ref2[0],
-      comments = _ref2[1];
+    var _ref3 = _slicedToArray(_ref2, 2),
+      time = _ref3[0],
+      comments = _ref3[1];
     var start = comments[0].value.in_time;
     var end = comments[0].value.out_time;
-    var startPercent = getMarkerPercent(start, duration, zoom);
-    var endPercent = end ? getMarkerPercent(end, duration, zoom) : null;
-    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) {
+    var startPct = getMarkerPercent(start, duration, zoom);
+    var endPct = end ? getMarkerPercent(end, duration, zoom) : null;
+    var safeStart = getSafeLeftPx(startPct, containerWidth);
+    var safeEnd = endPct !== null ? getSafeLeftPx(endPct, containerWidth) : null;
+    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';
-    var displayLabel = comments.length > 1 ? comments.length : initials;
+    })) === 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";
+    var label = comments.length > 1 ? comments.length : initials;
+    var isHovered = hovered === time;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: time
-    }, endPercent !== null && /*#__PURE__*/_react["default"].createElement(MarkerLine, {
+    }, endPct !== null && /*#__PURE__*/_react["default"].createElement(MarkerLine, {
       style: {
-        left: "".concat(startPercent, "%"),
-        width: "calc(".concat(endPercent - startPercent, "% )"),
-        opacity: hovered === time ? 1 : 0
+        left: safeStart,
+        width: "calc(".concat(endPct - startPct, "% )"),
+        opacity: isHovered ? 1 : 0
       }
     }), /*#__PURE__*/_react["default"].createElement(MarkerDot, {
       style: {
-        left: "".concat(startPercent, "%")
+        left: safeStart
       },
+      isHovered: isHovered,
       onMouseEnter: function onMouseEnter() {
         return setHovered(time);
       },
-      onMouseLeave: handleLeaveMarker,
+      onMouseLeave: function onMouseLeave() {
+        return !hoverBoxHold && startHideTimer();
+      },
       onClick: function onClick(e) {
         e.stopPropagation();
         setHoverBoxHold(true);
         setHovered(time);
-        setSelectedComment(comments);
       }
-    }, displayLabel), endPercent !== null && /*#__PURE__*/_react["default"].createElement(EndMarkerDot, {
+    }, label), endPct !== null && /*#__PURE__*/_react["default"].createElement(EndMarkerDot, {
       style: {
-        left: "".concat(endPercent, "%"),
-        opacity: hovered === time ? 1 : 0
+        left: safeEnd,
+        opacity: isHovered ? 1 : 0
       }
-    }), hovered === time && /*#__PURE__*/_react["default"].createElement(HoverBox, {
+    }), isHovered && /*#__PURE__*/_react["default"].createElement(HoverBox, {
       commentLength: comments.length,
-      tabIndex: 0,
-      style: {
-        '--left': "".concat(getSafeLeft(startPercent), "%")
+      ref: function ref(el) {
+        if (el && containerWidth) {
+          var rawPx = parseFloat(safeStart);
+          var clamped = clampHoverBoxLeft(rawPx, el.offsetWidth, containerWidth);
+          el.style.left = "".concat(clamped, "px");
+        }
       },
       onMouseEnter: function onMouseEnter() {
-        if (hideTimer.current) clearTimeout(hideTimer.current);
+        clearTimeout(hideTimer.current);
         setHoverBoxHold(true);
       },
       onMouseLeave: function onMouseLeave() {
@@ -170,16 +190,24 @@ var RenderCommentMarkers = function RenderCommentMarkers(props) {
       }
     }, comments.length > 1 && /*#__PURE__*/_react["default"].createElement(HoverHeader, null, comments.length, " COMMENTS"), comments.map(function (c) {
       var _c$value$created_by;
+      var selectedFormat = localStorage.getItem("timeCodeFormat");
       return /*#__PURE__*/_react["default"].createElement(HoverComment, {
         key: c.id,
         onClick: function onClick(e) {
           e.stopPropagation();
-          setSelectedComment(c);
           onSegmentClick(c.value.in_time, c.value.out_time, false);
           onRightMenuVisible(true);
           actions.toggleRightBar(player, true);
         }
-      }, /*#__PURE__*/_react["default"].createElement(HoverName, null, (_c$value$created_by = c.value.created_by) === null || _c$value$created_by === void 0 || (_c$value$created_by = _c$value$created_by.name) === null || _c$value$created_by === void 0 ? void 0 : _c$value$created_by.toUpperCase()), /*#__PURE__*/_react["default"].createElement(HoverTime, null, c.value.in_timecode, c.value.out_timecode ? " - ".concat(c.value.out_timecode) : ''), /*#__PURE__*/_react["default"].createElement(HoverText, null, c.value.remark || c.value.sub_title || c.value.title || '—'));
+      }, /*#__PURE__*/_react["default"].createElement(HoverName, null, (_c$value$created_by = c.value.created_by) === null || _c$value$created_by === void 0 || (_c$value$created_by = _c$value$created_by.name) === null || _c$value$created_by === void 0 ? void 0 : _c$value$created_by.toUpperCase()), /*#__PURE__*/_react["default"].createElement(HoverTime, null, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
+        timecode: c.value.in_timecode,
+        selectedTimecodeFormat: selectedFormat,
+        fps: frameRate
+      }), c.value.out_timecode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, " - ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
+        timecode: c.value.out_timecode,
+        selectedTimecodeFormat: selectedFormat,
+        fps: frameRate
+      }))), /*#__PURE__*/_react["default"].createElement(HoverText, null, c.value.remark || c.value.sub_title || c.value.title || "—"));
     })));
   }));
 };

package/package.json

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