@desynova-digital/player 4.0.102 → 4.0.103

package/components/Player.js

@@ -446,6 +446,18 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       this.actions.seek(start_time);
       this.actions.handleVideoPreview(true);
     }
+  }, {
+    key: "exitFullScreenMode",
+    value: function exitFullScreenMode() {
+      var _this$manager$getStat2 = this.manager.getState(),
+        player = _this$manager$getStat2.player;
+      var onRightMenuVisible = this.props.onRightMenuVisible;
+      this.actions.toggleFullscreen(player);
+      // Trigger UI change based for exit
+      var isFull = player === null || player === void 0 ? void 0 : player.isFullscreen;
+      onRightMenuVisible(isFull);
+      this.actions.toggleRightBar(player, isFull);
+    }
   }, {
     key: "getDefaultChildren",
     value: function getDefaultChildren(props, fullProps) {
@@ -798,8 +810,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleResize",
     value: function handleResize() {
-      var _this$manager$getStat2 = this.manager.getState(),
-        player = _this$manager$getStat2.player;
+      var _this$manager$getStat3 = this.manager.getState(),
+        player = _this$manager$getStat3.player;
       var leftSectionRef = this._leftSectionRef;
       var rightSectionRef = this._rightSectionRef;
       var audioMeterBlock = this._audioMeterBlock;
@@ -962,8 +974,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleBlur",
     value: function handleBlur() {
-      var _this$manager$getStat3 = this.manager.getState(),
-        player = _this$manager$getStat3.player;
+      var _this$manager$getStat4 = this.manager.getState(),
+        player = _this$manager$getStat4.player;
       if (player.isFullscreen) return;
       this.actions.activate(false);
     }
@@ -981,8 +993,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this6 = this,
         _props$player;
-      var _this$manager$getStat4 = this.manager.getState(),
-        player = _this$manager$getStat4.player;
+      var _this$manager$getStat5 = this.manager.getState(),
+        player = _this$manager$getStat5.player;
       var props = _objectSpread(_objectSpread({}, this.props), {}, {
         player: player,
         actions: this.actions,

package/components/Video.js

@@ -1463,7 +1463,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           width: '100%',
           height: '100%',
           pointerEvents: this.state.shouldShowAnnotate ? 'auto' : 'none',
-          zIndex: 999
+          zIndex: 1
         }
       }, ((_this$props$parentAnn2 = this.props.parentAnnotations) === null || _this$props$parentAnn2 === void 0 ? void 0 : _this$props$parentAnn2.length) && ((_this$props$parentAnn3 = this.props.parentAnnotations) === null || _this$props$parentAnn3 === void 0 ? void 0 : _this$props$parentAnn3.map(function (ann, idx) {
         var _this6$props$playerSv;

package/components/progress-bar/RenderCommentMarkers.js

@@ -89,7 +89,6 @@ var clampHoverBoxLeft = function clampHoverBoxLeft(rawLeftPx, boxWidth, containe
    MAIN COMPONENT
 ---------------------------------------------------------- */
 var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
-  var _containerRef$current;
   var _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
     _ref$duration = _ref.duration,
@@ -118,6 +117,53 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
   var isLineVisible = function isLineVisible(time) {
     return hovered === time || hoverBoxHold && hovered === time;
   };
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    containerWidth = _useState6[0],
+    setContainerWidth = _useState6[1];
+
+  // Measure eagerly during layout to avoid first-paint misalignment.
+  (0, _react.useLayoutEffect)(function () {
+    var measure = function measure() {
+      var _containerRef$current;
+      return setContainerWidth(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth) || 0);
+    };
+    measure();
+    // double rAF to catch layout after fullscreen/right-panel changes
+    requestAnimationFrame(function () {
+      return requestAnimationFrame(measure);
+    });
+  }, []);
+
+  // Keep width in sync on first render, fullscreen toggle, right-menu visibility, and resize.
+  (0, _react.useEffect)(function () {
+    var updateWidth = function updateWidth() {
+      var _containerRef$current2;
+      return setContainerWidth(((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) || 0);
+    };
+    updateWidth();
+    requestAnimationFrame(updateWidth);
+    var onResize = function onResize() {
+      return updateWidth();
+    };
+    window.addEventListener('resize', onResize);
+    return function () {
+      return window.removeEventListener('resize', onResize);
+    };
+  }, [isRightMenuVisible, player === null || player === void 0 ? void 0 : player.isFullscreen]);
+
+  // Observe container size for layout shifts.
+  (0, _react.useEffect)(function () {
+    if (!containerRef.current || typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(function () {
+      var _containerRef$current3;
+      return setContainerWidth(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetWidth) || 0);
+    });
+    observer.observe(containerRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [containerRef.current]);
   var handleMouseEnter = function handleMouseEnter(time) {
     clearTimeout(hideTimer.current);
     setHovered(time);
@@ -147,7 +193,6 @@ var RenderCommentMarkers = function RenderCommentMarkers(_ref) {
   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
   }, Object.entries(grouped).map(function (_ref2) {

package/package.json

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