@desynova-digital/player 4.0.94 → 4.0.96

package/components/Player.js

@@ -158,7 +158,9 @@ 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\n// .rightbar-visible .right-video-section {\n//   display: block !important;\n// }\n\n.fullscreen-left-only .right-video-section {\n  display: none !important;\n}\n\n.fullscreen-left-only .left-video-section {\n  display: block !important;\n}\n  &.fullscreen-left-only {\n  .right-video-section {\n    display: none !important;\n  }\n  .left-video-section {\n    width: 100% !important;\n  }\n}\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  position: relative;\n  width: ", ";\n"])), function (props) {
+var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n// .rightbar-visible .right-video-section {\n//   display: block !important;\n// }\n\n.fullscreen-left-only .right-video-section {\n  display: none !important;\n}\n\n.fullscreen-left-only .left-video-section {\n  display: block !important;\n}\n  &.fullscreen-left-only {\n  .right-video-section {\n    display: none !important;\n  }\n  .left-video-section {\n    width: 100% !important;\n  }\n}\n  display: flex;\n  justify-content: flex-start;\n  background: #000000;\n  height: ", ";\n  .left-video-section {\n    width: ", ";\n    position: relative;\n    height: ", ";\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  position: relative;\n  width: ", ";\n"])), function (props) {
+  return props.noRightComponent && "calc(100% - 1px) !important;";
+}, function (props) {
   if (!props.isRightMenuVisible) {
     return '100%';
   }
@@ -167,6 +169,8 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
   } else {
     return '100%';
   }
+}, function (props) {
+  return props.noRightComponent && '100%';
 }, function (props) {
   if (props.isFullscreen && props.playerType === 'qc') {
     return 'calc(38.1% - 70px)';
@@ -272,7 +276,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     _this.actions.handlePlayerType(props.playerType);
     _this.actions.handleControlType(props.controlType);
     if (_this.props.fullScreenRef) {
-      _this.props.fullScreenRef.current = _this;
+      _this.props.fullScreenRef.current.player = _this;
     }
     return _this;
   }
@@ -455,7 +459,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         ref: function ref(c) {
           _this2.video = c;
           _this2.manager.video = _this2.video;
-        },
+        }
+      }, props, {
         playerSvgRef: playerSvgRef,
         parentAnnotations: parentAnnotations,
         onShapeMouseDown: onShapeMouseDown,
@@ -476,6 +481,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         key: "progress-control",
         order: 3
       })), /*#__PURE__*/_react["default"].createElement(_RenderCommentMarkers["default"], _extends({
+        isRightMenuVisible: isRightMenuVisible,
+        fullScreenRef: this.props.fullScreenRef,
         duration: fullProps === null || fullProps === void 0 || (_fullProps$player = fullProps.player) === null || _fullProps$player === void 0 ? void 0 : _fullProps$player.duration,
         playerType: fullProps.playerType,
         isFullscreen: fullProps === null || fullProps === void 0 || (_fullProps$player2 = fullProps.player) === null || _fullProps$player2 === void 0 ? void 0 : _fullProps$player2.isFullscreen,

package/components/Video.js

@@ -489,14 +489,16 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "getStyle",
     value: function getStyle() {
-      var fluid = this.props.fluid;
+      var _this$props6 = this.props,
+        fluid = _this$props6.fluid,
+        noRightComponent = _this$props6.noRightComponent;
       var _this$manager$getStat2 = this.manager.getState(),
         player = _this$manager$getStat2.player;
       var style = {};
-      var _this$props6 = this.props,
-        aspectRatio = _this$props6.aspectRatio,
-        width = _this$props6.width,
-        height = _this$props6.height;
+      var _this$props7 = this.props,
+        aspectRatio = _this$props7.aspectRatio,
+        width = _this$props7.width,
+        height = _this$props7.height;
       /*
        * The aspect ratio is either used directly
        * or to calculate width and height.
@@ -528,6 +530,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         this.setWidthOrHeight(style, 'width', width);
         this.setWidthOrHeight(style, 'height', height);
       }
+      noRightComponent && (style.height = 'calc(100% - 129px)');
       style.width = '100%';
       return style;
     }
@@ -599,12 +602,12 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var _this$props7 = this.props,
-        src = _this$props7.src,
-        activeAudio = _this$props7.player.activeAudio,
-        currentSubtitleObj = _this$props7.currentSubtitleObj,
-        markers = _this$props7.markers,
-        playerType = _this$props7.playerType;
+      var _this$props8 = this.props,
+        src = _this$props8.src,
+        activeAudio = _this$props8.player.activeAudio,
+        currentSubtitleObj = _this$props8.currentSubtitleObj,
+        markers = _this$props8.markers,
+        playerType = _this$props8.playerType;
       if (markers && markers !== newProps.markers && newProps.markers) {
         this.displaySubtitle(newProps.markers);
       }
@@ -765,9 +768,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "toggleFullscreen",
     value: function toggleFullscreen() {
-      var _this$props8 = this.props,
-        player = _this$props8.player,
-        actions = _this$props8.actions;
+      var _this$props9 = this.props,
+        player = _this$props9.player,
+        actions = _this$props9.actions;
       actions.toggleFullscreen(player);
     }
 
@@ -778,10 +781,10 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleLoadStart",
     value: function handleLoadStart() {
-      var _this$props9 = this.props,
-        actions = _this$props9.actions,
-        onLoadStart = _this$props9.onLoadStart,
-        fileType = _this$props9.fileType;
+      var _this$props10 = this.props,
+        actions = _this$props10.actions,
+        onLoadStart = _this$props10.onLoadStart,
+        fileType = _this$props10.fileType;
       if (fileType === 'audio') {
         this.audioVisualizer();
       }
@@ -798,9 +801,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleCanPlay",
     value: function handleCanPlay() {
-      var _this$props10 = this.props,
-        actions = _this$props10.actions,
-        onCanPlay = _this$props10.onCanPlay;
+      var _this$props11 = this.props,
+        actions = _this$props11.actions,
+        onCanPlay = _this$props11.onCanPlay;
       actions.handleCanPlay(this.getProperties());
       if (onCanPlay) {
         onCanPlay.apply(void 0, arguments);
@@ -814,9 +817,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleCanPlayThrough",
     value: function handleCanPlayThrough() {
-      var _this$props11 = this.props,
-        actions = _this$props11.actions,
-        onCanPlayThrough = _this$props11.onCanPlayThrough;
+      var _this$props12 = this.props,
+        actions = _this$props12.actions,
+        onCanPlayThrough = _this$props12.onCanPlayThrough;
       actions.handleCanPlayThrough(this.getProperties());
       if (onCanPlayThrough) {
         onCanPlayThrough.apply(void 0, arguments);
@@ -830,9 +833,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handlePlaying",
     value: function handlePlaying() {
-      var _this$props12 = this.props,
-        actions = _this$props12.actions,
-        onPlaying = _this$props12.onPlaying;
+      var _this$props13 = this.props,
+        actions = _this$props13.actions,
+        onPlaying = _this$props13.onPlaying;
       actions.handlePlaying(this.getProperties());
       if (onPlaying) {
         onPlaying.apply(void 0, arguments);
@@ -843,9 +846,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handlePlay",
     value: function handlePlay() {
-      var _this$props13 = this.props,
-        actions = _this$props13.actions,
-        onPlay = _this$props13.onPlay;
+      var _this$props14 = this.props,
+        actions = _this$props14.actions,
+        onPlay = _this$props14.onPlay;
       actions.handlePlay(this.getProperties());
       if (onPlay) {
         onPlay.apply(void 0, arguments);
@@ -856,9 +859,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handlePause",
     value: function handlePause() {
-      var _this$props14 = this.props,
-        actions = _this$props14.actions,
-        onPause = _this$props14.onPause;
+      var _this$props15 = this.props,
+        actions = _this$props15.actions,
+        onPause = _this$props15.onPause;
       actions.handlePause(this.getProperties());
       if (onPause) {
         onPause.apply(void 0, arguments);
@@ -872,9 +875,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleDurationChange",
     value: function handleDurationChange() {
-      var _this$props15 = this.props,
-        actions = _this$props15.actions,
-        onDurationChange = _this$props15.onDurationChange;
+      var _this$props16 = this.props,
+        actions = _this$props16.actions,
+        onDurationChange = _this$props16.onDurationChange;
       actions.handleDurationChange(this.getProperties());
       if (onDurationChange) {
         onDurationChange.apply(void 0, arguments);
@@ -888,9 +891,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleProgress",
     value: function handleProgress() {
-      var _this$props16 = this.props,
-        actions = _this$props16.actions,
-        onProgress = _this$props16.onProgress;
+      var _this$props17 = this.props,
+        actions = _this$props17.actions,
+        onProgress = _this$props17.onProgress;
       if (this.video) {
         actions.handleProgressChange(this.getProperties());
       }
@@ -911,11 +914,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "displaySubtitle",
     value: function displaySubtitle(marker) {
-      var _this$props17 = this.props,
-        markers = _this$props17.markers,
-        resetSubtitleData = _this$props17.resetSubtitleData,
-        subtitleReadOnly = _this$props17.subtitleReadOnly,
-        subtitleDataList = _this$props17.subtitleDataList;
+      var _this$props18 = this.props,
+        markers = _this$props18.markers,
+        resetSubtitleData = _this$props18.resetSubtitleData,
+        subtitleReadOnly = _this$props18.subtitleReadOnly,
+        subtitleDataList = _this$props18.subtitleDataList;
       var currentSubtitleObj = this.state.currentSubtitleObj;
       if (resetSubtitleData) {
         resetSubtitleData();
@@ -957,11 +960,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleEnded",
     value: function handleEnded() {
-      var _this$props18 = this.props,
-        loop = _this$props18.loop,
-        player = _this$props18.player,
-        actions = _this$props18.actions,
-        onEnded = _this$props18.onEnded;
+      var _this$props19 = this.props,
+        loop = _this$props19.loop,
+        player = _this$props19.player,
+        actions = _this$props19.actions,
+        onEnded = _this$props19.onEnded;
       if (loop) {
         this.seek(0);
         this.play();
@@ -978,9 +981,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleWaiting",
     value: function handleWaiting() {
-      var _this$props19 = this.props,
-        actions = _this$props19.actions,
-        onWaiting = _this$props19.onWaiting;
+      var _this$props20 = this.props,
+        actions = _this$props20.actions,
+        onWaiting = _this$props20.onWaiting;
       actions.handleWaiting(this.getProperties());
       if (onWaiting) {
         onWaiting.apply(void 0, arguments);
@@ -994,9 +997,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSeeking",
     value: function handleSeeking() {
-      var _this$props20 = this.props,
-        actions = _this$props20.actions,
-        onSeeking = _this$props20.onSeeking;
+      var _this$props21 = this.props,
+        actions = _this$props21.actions,
+        onSeeking = _this$props21.onSeeking;
       actions.handleSeeking(this.getProperties());
       if (onSeeking) {
         onSeeking.apply(void 0, arguments);
@@ -1010,9 +1013,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSeeked",
     value: function handleSeeked() {
-      var _this$props21 = this.props,
-        actions = _this$props21.actions,
-        onSeeked = _this$props21.onSeeked;
+      var _this$props22 = this.props,
+        actions = _this$props22.actions,
+        onSeeked = _this$props22.onSeeked;
       actions.handleSeeked(this.getProperties());
       if (onSeeked) {
         onSeeked.apply(void 0, arguments);
@@ -1031,9 +1034,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSuspend",
     value: function handleSuspend() {
-      var _this$props22 = this.props,
-        actions = _this$props22.actions,
-        onSuspend = _this$props22.onSuspend;
+      var _this$props23 = this.props,
+        actions = _this$props23.actions,
+        onSuspend = _this$props23.onSuspend;
       actions.handleSuspend(this.getProperties());
       if (onSuspend) {
         onSuspend.apply(void 0, arguments);
@@ -1044,9 +1047,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleAbort",
     value: function handleAbort() {
-      var _this$props23 = this.props,
-        actions = _this$props23.actions,
-        onAbort = _this$props23.onAbort;
+      var _this$props24 = this.props,
+        actions = _this$props24.actions,
+        onAbort = _this$props24.onAbort;
       actions.handleAbort(this.getProperties());
       if (onAbort) {
         onAbort.apply(void 0, arguments);
@@ -1057,9 +1060,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleEmptied",
     value: function handleEmptied() {
-      var _this$props24 = this.props,
-        actions = _this$props24.actions,
-        onEmptied = _this$props24.onEmptied;
+      var _this$props25 = this.props,
+        actions = _this$props25.actions,
+        onEmptied = _this$props25.onEmptied;
       actions.handleEmptied(this.getProperties());
       if (onEmptied) {
         onEmptied.apply(void 0, arguments);
@@ -1073,9 +1076,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleStalled",
     value: function handleStalled() {
-      var _this$props25 = this.props,
-        actions = _this$props25.actions,
-        onStalled = _this$props25.onStalled;
+      var _this$props26 = this.props,
+        actions = _this$props26.actions,
+        onStalled = _this$props26.onStalled;
       actions.handleStalled(this.getProperties());
       if (onStalled) {
         onStalled.apply(void 0, arguments);
@@ -1089,10 +1092,10 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleLoadedMetaData",
     value: function handleLoadedMetaData() {
-      var _this$props26 = this.props,
-        actions = _this$props26.actions,
-        onLoadedMetadata = _this$props26.onLoadedMetadata,
-        startTime = _this$props26.startTime;
+      var _this$props27 = this.props,
+        actions = _this$props27.actions,
+        onLoadedMetadata = _this$props27.onLoadedMetadata,
+        startTime = _this$props27.startTime;
       if (startTime && startTime > 0) {
         this.video.currentTime = startTime;
       }
@@ -1109,9 +1112,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleLoadedData",
     value: function handleLoadedData() {
-      var _this$props27 = this.props,
-        actions = _this$props27.actions,
-        onLoadedData = _this$props27.onLoadedData;
+      var _this$props28 = this.props,
+        actions = _this$props28.actions,
+        onLoadedData = _this$props28.onLoadedData;
       actions.handleLoadedData(this.getProperties());
       if (onLoadedData) {
         onLoadedData.apply(void 0, arguments);
@@ -1125,11 +1128,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleTimeUpdate",
     value: function handleTimeUpdate() {
-      var _this$props28 = this.props,
-        previewActive = _this$props28.player.previewActive,
-        actions = _this$props28.actions,
-        onTimeUpdate = _this$props28.onTimeUpdate,
-        rightMarker = _this$props28.playerSelectedMarker.rightMarker;
+      var _this$props29 = this.props,
+        previewActive = _this$props29.player.previewActive,
+        actions = _this$props29.actions,
+        onTimeUpdate = _this$props29.onTimeUpdate,
+        rightMarker = _this$props29.playerSelectedMarker.rightMarker;
 
       //for annotation time updataton for svg
       var _this$getTimeData3 = this.getTimeData(this.video.currentTime),
@@ -1157,9 +1160,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleRateChange",
     value: function handleRateChange() {
-      var _this$props29 = this.props,
-        actions = _this$props29.actions,
-        onRateChange = _this$props29.onRateChange;
+      var _this$props30 = this.props,
+        actions = _this$props30.actions,
+        onRateChange = _this$props30.onRateChange;
       actions.handleRateChange(this.getProperties());
       if (onRateChange) {
         onRateChange.apply(void 0, arguments);
@@ -1170,9 +1173,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleVolumeChange",
     value: function handleVolumeChange() {
-      var _this$props30 = this.props,
-        actions = _this$props30.actions,
-        onVolumeChange = _this$props30.onVolumeChange;
+      var _this$props31 = this.props,
+        actions = _this$props31.actions,
+        onVolumeChange = _this$props31.onVolumeChange;
       actions.handleVolumeChange(this.getProperties());
       if (onVolumeChange) {
         onVolumeChange.apply(void 0, arguments);
@@ -1186,9 +1189,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleError",
     value: function handleError() {
-      var _this$props31 = this.props,
-        actions = _this$props31.actions,
-        onError = _this$props31.onError;
+      var _this$props32 = this.props,
+        actions = _this$props32.actions,
+        onError = _this$props32.onError;
       actions.handleError(this.getProperties());
       if (onError) {
         onError.apply(void 0, arguments);
@@ -1282,9 +1285,9 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSubtitleContainerClick",
     value: function handleSubtitleContainerClick() {
-      var _this$props32 = this.props,
-        actions = _this$props32.actions,
-        player = _this$props32.player;
+      var _this$props33 = this.props,
+        actions = _this$props33.actions,
+        player = _this$props33.player;
       if (player.paused) {
         actions.play();
       } else {
@@ -1294,11 +1297,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleSubtitleClick",
     value: function handleSubtitleClick(e) {
-      var _this$props33 = this.props,
-        actions = _this$props33.actions,
-        player = _this$props33.player,
-        onScreenSubtitleClick = _this$props33.onScreenSubtitleClick,
-        controlType = _this$props33.controlType;
+      var _this$props34 = this.props,
+        actions = _this$props34.actions,
+        player = _this$props34.player,
+        onScreenSubtitleClick = _this$props34.onScreenSubtitleClick,
+        controlType = _this$props34.controlType;
       var currentSubtitleObj = this.state.currentSubtitleObj;
       if (controlType === 'advanced') {
         if (onScreenSubtitleClick) {
@@ -1323,22 +1326,22 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         _this$props$parentAnn2,
         _this$props$parentAnn3,
         _this$props$parentAnn4;
-      var _this$props34 = this.props,
-        loop = _this$props34.loop,
-        poster = _this$props34.poster,
-        preload = _this$props34.preload,
-        autoPlay = _this$props34.autoPlay,
-        playsInline = _this$props34.playsInline,
-        muted = _this$props34.muted,
-        crossOrigin = _this$props34.crossOrigin,
-        videoId = _this$props34.videoId,
-        fileType = _this$props34.fileType,
-        userEmail = _this$props34.userEmail,
-        theme = _this$props34.theme,
-        player = _this$props34.player,
-        playerType = _this$props34.playerType,
-        markers = _this$props34.markers,
-        isRightMenuVisible = _this$props34.isRightMenuVisible;
+      var _this$props35 = this.props,
+        loop = _this$props35.loop,
+        poster = _this$props35.poster,
+        preload = _this$props35.preload,
+        autoPlay = _this$props35.autoPlay,
+        playsInline = _this$props35.playsInline,
+        muted = _this$props35.muted,
+        crossOrigin = _this$props35.crossOrigin,
+        videoId = _this$props35.videoId,
+        fileType = _this$props35.fileType,
+        userEmail = _this$props35.userEmail,
+        theme = _this$props35.theme,
+        player = _this$props35.player,
+        playerType = _this$props35.playerType,
+        markers = _this$props35.markers,
+        isRightMenuVisible = _this$props35.isRightMenuVisible;
       var _this$state2 = this.state,
         isBuffering = _this$state2.isBuffering,
         watermark = _this$state2.watermark,

package/components/control-bar/CameraButton.js

@@ -47,12 +47,17 @@ var CameraButton = /*#__PURE__*/function (_Component) {
     value: function handleClick() {
       var _this$props = this.props,
         onTakeSnapshot = _this$props.onTakeSnapshot,
-        video = _this$props.video;
+        video = _this$props.video,
+        onRightMenuVisible = _this$props.onRightMenuVisible,
+        actions = _this$props.actions,
+        player = _this$props.player;
       var timeObj = {
-        "thumbnail": (0, _utils.secondsToTime)(this.props.video.currentTime, this.props.frameRate, this.props.initialTime),
-        "thumbnail_seconds": this.props.video.currentTime
+        thumbnail: (0, _utils.secondsToTime)(this.props.video.currentTime, this.props.frameRate, this.props.initialTime),
+        thumbnail_seconds: this.props.video.currentTime
       };
       onTakeSnapshot(timeObj);
+      actions.toggleRightBar(player, true);
+      onRightMenuVisible(true);
     }
   }, {
     key: "render",

package/components/progress-bar/RenderCommentMarkers.js

@@ -48,13 +48,13 @@ var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_template
    HOVER BOX
 ---------------------------------------------------------- */
 
-var HoverScroll = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  max-height: 360px; /* 400 total - header height */\n  \n  /* Hide scrollbar everywhere */\n  scrollbar-width: none;         \n  -ms-overflow-style: none;      \n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var HoverScroll = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  max-height: 360px; /* 400 total - header height */\n\n  /* Hide scrollbar everywhere */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
 var HoverBox = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  right: auto !important;\n  width: max-content;\n\n  background: #303f51;\n  border: 2px solid rgba(255, 255, 255, 0.15);\n  backdrop-filter: blur(12px);\n  border-radius: 12px;\n  padding: 0;\n  color: white;\n  z-index: 999999;\n  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n  animation: fadeInBox 0.18s ease-out;\n\n  display: flex;\n  flex-direction: column;\n\n  min-width: 180px;\n  max-width: 220px;\n  max-height: 400px;\n  overflow: hidden; /* prevent scroll at root */\n"])));
 var HoverHeader = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background: #3e6673;\n  color: #00cec6;\n  font-size: 12px;\n  font-weight: 700;\n  padding: 10px 12px;\n  border-top-left-radius: 12px;\n  border-top-right-radius: 12px;\n  font-family: SFUIText-Regular;\n\n  position: sticky;\n  top: 0;\n  z-index: 2; /* must be above scroll content */\n\n  width: 100%;\n  box-sizing: border-box;\n"])));
 var HoverComment = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 12px 14px;\n  background: transparent;\n  transition: background 0.15s ease, transform 0.15s ease;\n  border-radius: 6px;\n  position: relative;\n\n  /* FIX */\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n\n  &:hover {\n    background: rgba(255, 255, 255, 0.07);\n  }\n\n  &:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 1.3px;\n    background: rgba(255, 255, 255, 0.12);\n  }\n"])));
 var HoverName = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: #afb2ba;\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 6px;\n  text-transform: capitalize;\n"])));
 var HoverTime = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  font-size: 11px;\n  color: #9fa4ad;\n  margin-bottom: 6px;\n"])));
-var HoverText = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Light;\n  font-size: 14px;\n  font-weight: 300;\n  color: #ffffff;\n  line-height: 18px;\n  display: block;\n  white-space: normal;\n  overflow: visible;\n  text-overflow: unset;\n\n   /* FIX */\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n"])));
+var HoverText = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Light;\n  font-size: 14px;\n  font-weight: 300;\n  color: #ffffff;\n  line-height: 18px;\n  display: block;\n  white-space: normal;\n  overflow: visible;\n  text-overflow: unset;\n\n  /* FIX */\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n"])));
 
 /* ----------------------------------------------------------
    UTILITIES (FIXED)
@@ -101,7 +101,9 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
     onRightMenuVisible = _ref.onRightMenuVisible,
     actions = _ref.actions,
     player = _ref.player,
-    frameRate = _ref.frameRate;
+    frameRate = _ref.frameRate,
+    fullScreenRef = _ref.fullScreenRef,
+    isRightMenuVisible = _ref.isRightMenuVisible;
   if (!['snp_edit', 'pgm_edit'].includes(playerType)) return null;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -141,6 +143,10 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
     (acc[key] = acc[key] || []).push(item);
     return acc;
   }, {});
+  var originalIndexMap = new Map();
+  data.forEach(function (item, i) {
+    originalIndexMap.set(item.id, i);
+  });
   var containerWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
   return /*#__PURE__*/_react["default"].createElement(MarkerTimeline, {
     ref: containerRef
@@ -210,8 +216,10 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
       return /*#__PURE__*/_react["default"].createElement(HoverComment, {
         key: c.id,
         onClick: function onClick(e) {
+          var _fullScreenRef$curren, _fullScreenRef$curren2;
           e.stopPropagation();
           onSegmentClick(c.value.in_time, c.value.out_time, false);
+          (_fullScreenRef$curren = fullScreenRef.current.timeline) === null || _fullScreenRef$curren === void 0 || (_fullScreenRef$curren2 = _fullScreenRef$curren.handleTimelineIndex) === null || _fullScreenRef$curren2 === void 0 || _fullScreenRef$curren2.call(_fullScreenRef$curren, originalIndexMap.get(c.id));
           onRightMenuVisible(true);
           actions.toggleRightBar(player, true);
         }

package/package.json

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