@desynova-digital/player 4.0.89 → 4.0.91

package/actions/player.js

@@ -199,13 +199,37 @@ function mute(muted) {
     operation: operation
   };
 }
+function safeAppend(parent, child) {
+  if (!parent || !child) return;
+
+  // Prevent circular nesting
+  if (child.contains(parent)) return; // ❌ cannot append parent inside child
+
+  // Prevent duplicates
+  if (parent.contains(child)) return; // already appended
+
+  parent.appendChild(child); // safe
+}
+
+// keep this outside so original parent is remembered across toggles
+var toastOriginalParent = null;
 function toggleFullscreen(player) {
   if (_fullscreen["default"].enabled) {
-    // var elem = document.getElementsByClassName('left-video-section')[0];
-    var elem = document.getElementsByClassName('player-container')[0];
+    var elem = document.querySelector('.player-container');
     var right = document.querySelector('.right-video-section');
+    var root = document.getElementById('root'); // app root
+    var toastRoot = root.children[0];
+    var fallbackParent = root || document.body;
     if (_fullscreen["default"].isFullscreen) {
+      // exit fullscreen
       _fullscreen["default"].exit();
+
+      // restore toast to its original parent (or fallback)
+      if (toastRoot) {
+        var parentToRestore = toastOriginalParent || fallbackParent;
+        // parentToRestore.appendChild(toastRoot);
+        safeAppend(parentToRestore, toastRoot);
+      }
       setTimeout(function () {
         if (right) {
           right.style.removeProperty('transition');
@@ -215,6 +239,14 @@ function toggleFullscreen(player) {
         }
       }, 300);
     } else {
+      // entering fullscreen
+      if (toastRoot && !toastOriginalParent) {
+        toastOriginalParent = toastRoot.parentNode || fallbackParent;
+      }
+      if (toastRoot && elem) {
+        // elem.appendChild(toastRoot);
+        safeAppend(elem, toastRoot);
+      }
       _fullscreen["default"].request(elem);
     }
     return {
@@ -225,11 +257,48 @@ function toggleFullscreen(player) {
       }
     };
   }
+
+  // <-- this return must be outside the if-block
   return {
     type: FULLSCREEN_CHANGE,
     isFullscreen: !player.isFullscreen
   };
 }
+
+// export function toggleFullscreen(player) {
+//   if (fullscreen.enabled) {
+//     // var elem = document.getElementsByClassName('left-video-section')[0];
+//     var elem = document.getElementsByClassName('player-container')[0];
+//     const right = document.querySelector('.right-video-section');
+
+//     if (fullscreen.isFullscreen) {
+//       fullscreen.exit();
+//       setTimeout(() => {
+//         if (right) {
+//           right.style.removeProperty('transition');
+//           right.style.removeProperty('display');
+//           right.style.removeProperty('transform');
+//           right.style.removeProperty('opacity');
+//         }
+//       }, 300);
+//     } else {
+//       fullscreen.request(elem);
+//     }
+//     return {
+//       type: OPERATE,
+//       operation: {
+//         action: 'toggle-fullscreen',
+//         source: ''
+//       }
+//     };
+//   }
+
+//   return {
+//     type: FULLSCREEN_CHANGE,
+//     isFullscreen: !player.isFullscreen
+//   };
+// }
+
 function toggleRightBar(player, showRightMenu) {
   var right = document.querySelector('.right-video-section');
   var sidebarWidth = right.offsetWidth; // actual width of sidebar

package/components/AudioMeter.js

@@ -39,7 +39,9 @@ var propTypes = {
 var defaultProps = {
   height: 0
 };
-var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: -12px;\n  height: 100%;\n  overflow: hidden;\n  .range {\n    color: #aaaaaa;\n    font-family: SFUIText-Medium;\n    text-align: right;\n    font-size: 8px;\n    box-sizing: border-box;\n  }\n"])));
+var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: -12px;\n  background-color: ", ";\n  height: 100%;\n  overflow: hidden;\n  .range {\n    color: #aaaaaa;\n    font-family: SFUIText-Medium;\n    text-align: right;\n    font-size: 8px;\n    box-sizing: border-box;\n  }\n"])), function (props) {
+  return props.isFullscreen ? '#000' : 'unset';
+});
 var MeterBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  .track-block {\n    position: relative;\n    width: 15px;\n    height: 100%;\n    overflow: visible;\n    &.left-track,\n    &.right-track {\n      &:after {\n        position: absolute;\n        color: #aaaaaa;\n        bottom: -12px;\n        font-size: 10px;\n        left: 50%;\n        transform: translateX(-50%);\n        font-family: SFUIText-Regular;\n      }\n    }\n    &.left-track:after {\n      content: 'L';\n    }\n    &.right-track:after {\n      content: 'R';\n    }\n  }\n"])));
 var ColorMeter = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to top,\n    #00c8e7,\n    #00e6b9 57%,\n    #ff8d29 83%,\n    #f6462c\n  );\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  .stack-block {\n    height: 2px;\n    margin-bottom: 3px;\n    background: #000000;\n  }\n"])));
 var BlackMeter = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: #000000;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  height: 100%;\n  transition: all 0.25s ease-in-out;\n  -moz-transition: all 0.25s ease-in-out;\n  -webkit-transition: all 0.25s ease-in-out;\n  -ms-transition: all 0.25s ease-in-out;\n  -o-transition: all 0.25s ease-in-out;\n  .stack-block {\n    height: 2px;\n    margin-bottom: 3px;\n    background: #304153;\n  }\n"])));
@@ -290,7 +292,10 @@ var AudioMeter = exports["default"] = /*#__PURE__*/function (_Component) {
         rangeArray = _this$state.rangeArray,
         unitBlockHeight = _this$state.unitBlockHeight,
         audioPan = _this$state.audioPan;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, null, rangeArray.map(function (range) {
+      var isFullscreen = this.props.isFullscreen;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, {
+        isFullscreen: isFullscreen
+      }, rangeArray.map(function (range) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: 'range' + range,
           style: {

package/components/Player.js

@@ -158,7 +158,7 @@ var defaultProps = {
   onVolumeChange: null
 };
 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) {
+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"])), function (props) {
   if (!props.isRightMenuVisible) {
     return '100%';
   }
@@ -168,7 +168,9 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
     return '100%';
   }
 }, function (props) {
-  if (props.playerType === 'qc') {
+  if (props.isFullscreen && props.playerType === 'qc') {
+    return 'calc(38.1% - 70px)';
+  } else if (props.playerType === 'qc') {
     return 'calc(36.33% - 70px)';
   } else {
     return '36.33%';
@@ -208,6 +210,42 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         onRightMenuVisible(false);
       }
     });
+    // handleFullScreenChange() {
+    //   this.actions.handleFullscreenChange(fullscreen.isFullscreen);
+    // }
+    _defineProperty(_this, "handleFullScreenChange", function () {
+      var onRightMenuVisible = _this.props.onRightMenuVisible;
+      var rightSectionRef = _this._rightSectionRef;
+      var playerHeader = (0, _reactDom.findDOMNode)(_this._playerHeader);
+      var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
+      var totalHeight = window.innerHeight;
+      var newHeight;
+      var isFS = _fullscreen["default"].isFullscreen;
+      _this.actions.handleFullscreenChange(isFS);
+      if (isFS) {
+        rightSectionRef.style.position = 'relative';
+        newHeight = totalHeight - headerHeight;
+        rightSectionRef.style.top = "".concat(headerHeight, "px");
+        rightSectionRef.style.height = "".concat(newHeight, "px");
+      }
+      // If exited fullscreen
+      if (!isFS) {
+        // Hide right sidebar
+        var right = document.querySelector('.right-video-section');
+        if (right) {
+          right.style.removeProperty('transition');
+          right.style.removeProperty('display');
+          right.style.removeProperty('transform');
+          right.style.removeProperty('opacity');
+          right.style.removeProperty('right');
+        }
+
+        // Reset UI state in parent
+        if (onRightMenuVisible) {
+          onRightMenuVisible(true);
+        }
+      }
+    });
     _this.controlsHideTimer = null;
     _this.meterHeight = 40;
     _this.video = null; // the Video component
@@ -455,7 +493,8 @@ 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",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
@@ -549,7 +588,8 @@ 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",
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
@@ -735,6 +775,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
 
       //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;
@@ -796,7 +838,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) {
@@ -847,11 +889,6 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }
       // this.video.handleResize();
     }
-  }, {
-    key: "handleFullScreenChange",
-    value: function handleFullScreenChange() {
-      this.actions.handleFullscreenChange(_fullscreen["default"].isFullscreen);
-    }
   }, {
     key: "handleStateChange",
     value: function handleStateChange(state, prevState) {
@@ -868,14 +905,19 @@ 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$getStat3 = this.manager.getState(),
-        player = _this$manager$getStat3.player;
+      var _this5 = this,
+        _props$player,
+        _props$player2;
+      var _this$manager$getStat4 = this.manager.getState(),
+        player = _this$manager$getStat4.player;
       var props = _objectSpread(_objectSpread({}, this.props), {}, {
         player: player,
         actions: this.actions,
@@ -905,7 +947,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         }
       }, props, {
         hasRightSection: !!rightSection,
-        isRightMenuVisible: isRightMenuVisible
+        isRightMenuVisible: isRightMenuVisible,
+        isFullscreen: (_props$player = props.player) === null || _props$player === void 0 ? void 0 : _props$player.isFullscreen
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "left-video-section",
         ref: function ref(leftSectionRef) {
@@ -924,7 +967,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         active: true
       }, /*#__PURE__*/_react["default"].createElement(_AudioMeter["default"], {
         player: props.player,
-        height: this.meterHeight
+        height: this.meterHeight,
+        isFullscreen: (_props$player2 = props.player) === null || _props$player2 === void 0 ? void 0 : _props$player2.isFullscreen
       }))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "right-video-section",
         ref: function ref(rightSectionRef) {

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/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: '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 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: 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"])));
+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 < 3) return 3;
-  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,90 +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);
+    }, 1500);
   };
-  var handleLeaveMarker = function handleLeaveMarker() {
-    if (!hoverBoxHold) startHideTimer();
-  };
-  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;
-
-    // --- 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) {
+    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(safeStart, "%"),
-        width: "calc(".concat(safeEnd - safeStart, "% )"),
-        opacity: hovered === time ? 1 : 0
+        left: safeStart,
+        width: "calc(".concat(endPct - startPct, "% )"),
+        opacity: isHovered ? 1 : 0
       }
     }), /*#__PURE__*/_react["default"].createElement(MarkerDot, {
       style: {
-        left: "".concat(safeStart, "%")
+        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(safeEnd, "%"),
-        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(safeStart), "%") // <-- updated for first/last
+      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() {
@@ -183,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.89",
+  "version": "4.0.91",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {