@desynova-digital/player 4.0.99 → 4.0.101

package/actions/player.js

@@ -302,14 +302,12 @@ function toggleFullscreen(player) {
 
 function toggleRightBar(player, showRightMenu) {
   var _right$offsetWidth;
-  var root = document.querySelector('.player-container');
   var right = document.querySelector('.right-video-section');
   var sidebarWidth = (_right$offsetWidth = right === null || right === void 0 ? void 0 : right.offsetWidth) !== null && _right$offsetWidth !== void 0 ? _right$offsetWidth : 0; // actual width of sidebar
   // Already fullscreen → toggle UI only (NO EXIT)
   if (_fullscreen["default"].isFullscreen && right) {
     right.style.transition = 'transform 0.4s ease, opacity 0.3s ease';
     if (showRightMenu) {
-      root.classList.add('rightbar-visible');
       // ✅ Coming from right to left (enter animation)
       right.style.display = 'block';
       right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
@@ -320,14 +318,9 @@ function toggleRightBar(player, showRightMenu) {
         right.style.opacity = '1';
       });
     } else {
-      root.classList.remove('rightbar-visible');
       // ✅ Going left to right (exit animation)
       right.style.right = "-".concat(sidebarWidth, "px"); // start off-screen
       right.style.opacity = '0';
-      // Hide after animation completes
-      setTimeout(function () {
-        right.style.display = 'none';
-      }, 400);
     }
     return {
       type: OPERATE,

package/components/Player.js

@@ -204,6 +204,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, Player);
     _this = _callSuper(this, Player, [props]);
     _defineProperty(_this, "handleFullscreenFix", function () {
+      // Also trigger our fullscreen handler so ESC exits resize everything reliably.
+      _this.handleFullScreenChange();
       // Wait for fullscreen to finish layout
       requestAnimationFrame(function () {
         requestAnimationFrame(function () {
@@ -212,8 +214,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
 
           // Now trigger resize for React / your components
           window.dispatchEvent(new Event('resize'));
+          _this.handleResize();
         });
       });
+      // Final fallback in case layout changes land after the next frame
+      setTimeout(function () {
+        return _this.handleResize();
+      }, 120);
     });
     _defineProperty(_this, "closeSidemenu", function () {
       var _this$manager$getStat = _this.manager.getState(),
@@ -252,6 +259,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
           right.style.removeProperty('transform');
           right.style.removeProperty('opacity');
           right.style.removeProperty('right');
+          right.style.removeProperty('top');
+          right.style.removeProperty('height');
         }
 
         // Reset UI state in parent
@@ -273,6 +282,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     _this.handleBlur = _this.handleBlur.bind(_this);
     _this.actions.handlePlayerType(props.playerType);
     _this.actions.handleControlType(props.controlType);
+    _this.scheduleResize = _this.scheduleResize.bind(_this);
     if (_this.props.fullScreenRef) {
       _this.props.fullScreenRef.current.player = _this;
     }
@@ -372,6 +382,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.handleResize();
+      this.scheduleResize();
       window.addEventListener('resize', this.handleResize);
       document.addEventListener('fullscreenchange', this.handleFullscreenFix);
       _fullscreen["default"].addEventListener(this.handleFullScreenChange);
@@ -389,6 +400,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         activeSDBorder = _this$props2.activeSDBorder,
         activeVersion = _this$props2.activeVersion;
       this.handleResize();
+      this.scheduleResize();
       if (activeSDBorder !== prevProps.activeSDBorder) {
         this.actions.handleSDBorderChange(activeSDBorder || false);
       }
@@ -945,10 +957,19 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       if (player.isFullscreen) return;
       this.actions.activate(false);
     }
+  }, {
+    key: "scheduleResize",
+    value: function scheduleResize() {
+      var _this5 = this;
+      // Some child elements finish layout on the next frame; ensure resize runs after paint.
+      requestAnimationFrame(function () {
+        _this5.handleResize();
+      });
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this,
+      var _this6 = this,
         _props$player;
       var _this$manager$getStat4 = this.manager.getState(),
         player = _this$manager$getStat4.player;
@@ -968,16 +989,18 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         isRightMenuVisible = _this$props7.isRightMenuVisible;
       return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
         ref: function ref(c) {
-          _this5.manager.rootElement = c;
+          _this6.manager.rootElement = c;
         },
         role: "region",
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         tabIndex: "-1"
-      }, /*#__PURE__*/_react["default"].createElement(PlayerContainer, _extends({
-        className: "player-container ".concat(isFullscreen ? 'fullscreen-left-only' : ''),
+      }, /*#__PURE__*/_react["default"].createElement(PlayerContainer
+      // className={`player-container ${isFullscreen ? 'fullscreen-left-only' : ''}`}
+      , _extends({
+        className: "player-container",
         ref: function ref(playerContainer) {
-          _this5._playerContainer = playerContainer;
+          _this6._playerContainer = playerContainer;
         }
       }, props, {
         hasRightSection: !!rightSection,
@@ -986,16 +1009,16 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "left-video-section",
         ref: function ref(leftSectionRef) {
-          _this5._leftSectionRef = leftSectionRef;
+          _this6._leftSectionRef = leftSectionRef;
         }
       }, childrensLeft), /*#__PURE__*/_react["default"].createElement("div", {
         className: "audio-meter-block ".concat(playerType),
         ref: function ref(audioMeterBlock) {
-          _this5._audioMeterBlock = audioMeterBlock;
+          _this6._audioMeterBlock = audioMeterBlock;
         }
       }, /*#__PURE__*/_react["default"].createElement(AudioMeterBlock, {
         onClick: function onClick() {
-          _this5.meterBlockClick();
+          _this6.meterBlockClick();
         },
         role: "presentation",
         active: true
@@ -1005,18 +1028,18 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "right-video-section",
         ref: function ref(rightSectionRef) {
-          _this5._rightSectionRef = rightSectionRef;
+          _this6._rightSectionRef = rightSectionRef;
         }
       }, rightSection) : null), props.controlType === 'advanced' ? /*#__PURE__*/_react["default"].createElement(ControlContainer, {
         ref: function ref(advancedControl) {
-          _this5._advancedControl = advancedControl;
+          _this6._advancedControl = advancedControl;
         }
       }, /*#__PURE__*/_react["default"].createElement(_ProgressControl["default"], _extends({}, props, {
         key: "progress-control",
         order: 1
       }))) : /*#__PURE__*/_react["default"].createElement(_Playlist["default"], _extends({
         ref: function ref(c) {
-          _this5._playlist = c;
+          _this6._playlist = c;
         },
         key: "playlist",
         order: 5

package/components/Shortcut.js

@@ -836,10 +836,14 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
         playbackRate = 4;
       } else if (playbackRate >= 1.5) {
         playbackRate = 2;
-      } else if (playbackRate >= 1) {
+      } else if (playbackRate >= 1.25) {
         playbackRate = 1.5;
-      } else if (playbackRate >= 0.5) {
+      } else if (playbackRate >= 1.) {
+        playbackRate = 1.25;
+      } else if (playbackRate >= 0.75) {
         playbackRate = 1.0;
+      } else if (playbackRate >= 0.5) {
+        playbackRate = 0.75;
       }
       /*
        * else if (playbackRate >= 1.25) {

package/components/Video.js

@@ -107,10 +107,12 @@ var defaultProps = {
 var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  font-family: SFUIText-Regular;\n  font-size: 16px;\n  bottom: 20px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  color: #ffffff;\n  height: 90%;\n  align-items: center;\n\n  .subtitleContainer {\n    border-radius: 4px;\n    width: fit-content;\n    background: #000000;\n    opacity: 0.9;\n    padding: ", ";\n    line-height: 20px;\n    position: absolute;\n\n    i,\n    em {\n      font-style: italic; /* Override the font style for <em> tags inside elements with the class .someClass */\n    }\n\n    strong {\n      font-weight: bold;\n    }\n  }\n  .longSubtitleStyles {\n    overflow-y: auto;\n    height: fit-content;\n    max-height: 70px;\n    max-width: 75%;\n    width: fit-content;\n  }\n"])), function (props) {
   return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
 });
-var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  &.video-react-player-block {\n    position: relative;\n    transition: all 0.1s ease-in-out;\n    -moz-transition: all 0.1s ease-in-out;\n    -webkit-transition: all 0.1s ease-in-out;\n    -ms-transition: all 0.1s ease-in-out;\n    -o-transition: all 0.1s ease-in-out;\n    ", "\n    video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n    }\n    .audio-tracks {\n      position: relative;\n      display: flex;\n      background: rgba(0, 0, 0, 0.5);\n      color: #fff;\n      z-index: 10;\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      p {\n        cursor: pointer;\n        padding: 10px;\n      }\n    }\n    .loader-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      z-index: 10;\n      background: rgba(0, 0, 0, 0.5);\n    }\n  }\n  &.ratio-border {\n    // border: 1px solid rgba(255, 255, 255, 0.5);\n    &:after {\n      content: ", ";\n      position: absolute;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      transform: rotate(-90deg);\n      top: 20%;\n      left: -50px;\n    }\n  }\n"])), function (props) {
+var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  &.video-react-player-block {\n    position: relative;\n    transition: all 0.1s ease-in-out;\n    -moz-transition: all 0.1s ease-in-out;\n    -webkit-transition: all 0.1s ease-in-out;\n    -ms-transition: all 0.1s ease-in-out;\n    -o-transition: all 0.1s ease-in-out;\n    ", "\n    video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n    }\n    .audio-tracks {\n      position: relative;\n      display: flex;\n      background: rgba(0, 0, 0, 0.5);\n      color: #fff;\n      z-index: 10;\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      p {\n        cursor: pointer;\n        padding: 10px;\n      }\n    }\n    .loader-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      z-index: 10;\n      background: rgba(0, 0, 0, 0.5);\n    }\n  }\n  &.ratio-border {\n    // border: 1px solid rgba(255, 255, 255, 0.5);\n    &:after {\n      content: ", ";\n      position: absolute;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      transform: rotate(-90deg);\n      top: 20%;\n      left: ", ";\n    }\n  }\n"])), function (props) {
   return props.svgLayerActive && "\n      pointer-events: none;\n      video {\n        pointer-events: none;\n      }\n    ";
 }, function (props) {
   return props.HDBorder ? '"16:9 Safe Area"' : '';
+}, function (props) {
+  return props.isFullScreen && props.isRightMenuVisible ? '-30px' : '-50px';
 });
 var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   function Video(props) {

package/components/progress-bar/ProgressControl.js

@@ -51,7 +51,7 @@ var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (
   var markers = _ref.markers;
   return markers.length > 3 ? '40px' : '23px';
 });
-var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  cursor:  ", ";\n  overflow: hidden;\n  z-index: ", ";\n  .timeline-content {\n    overflow-x: ", ";\n    white-space: nowrap;\n  }\n  .hide-scrollbar {\n    /* Hide scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */\n    scrollbar-width: none; /* Hides scrollbar in Firefox */\n    -ms-overflow-style: none; /* Hides scrollbar in IE 10+ */\n  }\n\n  .hide-scrollbar::-webkit-scrollbar {\n    width: 0; /* Removes the scrollbar for Webkit browsers */\n  }\n\n  .scrollBarVisibility\n  max-height: 65px;\n  overflow-y: visible;\n  scrollbar-width: none; /* Hides scrollbar in Firefox */\n  -ms-overflow-style: none; /* Hides scrollbar in Internet Explorer 10+ */\n\n  /* Hides scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */\n  &::-webkit-scrollbar {\n    width: 0;\n  }\n"])), function (props) {
+var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  cursor:  ", ";\n  overflow: hidden;\n  z-index: ", ";\n  .timeline-content {\n    overflow-x: ", ";\n    white-space: nowrap;\n  }\n  .hide-scrollbar {\n    /* Hide scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */\n    scrollbar-width: none; /* Hides scrollbar in Firefox */\n    -ms-overflow-style: none; /* Hides scrollbar in IE 10+ */\n  }\n\n  .hide-scrollbar::-webkit-scrollbar {\n    width: 0; /* Removes the scrollbar for Webkit browsers */\n  }\n\n  .scrollBarVisibility {\n    max-height: 65px;\n    overflow-y: visible;\n    scrollbar-width: none; /* Hides scrollbar in Firefox */\n    -ms-overflow-style: none; /* Hides scrollbar in Internet Explorer 10+ */\n\n    /* Hides scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */\n    &::-webkit-scrollbar {\n      width: 0;\n    }\n  }\n"])), function (props) {
   return props.isFullscreen ? 'default' : 'pointer';
 }, function (props) {
   return props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1';
@@ -73,6 +73,7 @@ var ScrollStyledDiv = _styledComponents["default"].div(_templateObject4 || (_tem
 var CoverDiv = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: black;\n  z-index: 2;\n  position: absolute;\n  height: 60px;\n  width: 89px;\n  left: 0px;\n  top: 20px;\n"])));
 var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
   function ProgressControl(props, context) {
+    var _props$player$zoom, _props$player;
     var _this;
     _classCallCheck(this, ProgressControl);
     _this = _callSuper(this, ProgressControl, [props, context]);
@@ -85,16 +86,24 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
       mouseTime: {
         time: null,
         position: 0,
-        stateZoom: null
+        stateZoom: (_props$player$zoom = props === null || props === void 0 || (_props$player = props.player) === null || _props$player === void 0 ? void 0 : _props$player.zoom) !== null && _props$player$zoom !== void 0 ? _props$player$zoom : null
       }
     };
     _this.parentScrollDivRef = /*#__PURE__*/(0, _react.createRef)();
     _this.handleMouseMoveThrottle = _this.handleMouseMove.bind(_this);
     _this.handleSeekbarZoom = _this.handleSeekbarZoom.bind(_this);
+    _this.ensureInitialSizing = _this.ensureInitialSizing.bind(_this);
+    _this.forceLayoutAdjust = _this.forceLayoutAdjust.bind(_this);
     return _this;
   }
   _inherits(ProgressControl, _Component);
   return _createClass(ProgressControl, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.ensureInitialSizing();
+      this.forceLayoutAdjust();
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       var _this$props = this.props,
@@ -102,19 +111,36 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
         zoom = _this$props$player.zoom,
         readyState = _this$props$player.readyState,
         isFullscreen = _this$props$player.isFullscreen,
+        duration = _this$props$player.duration,
         controlType = _this$props.controlType;
+      var prevDuration = this.prevDuration;
+      this.prevDuration = duration;
       var stateZoom = this.state.stateZoom;
       if (zoom !== stateZoom && readyState === 4 && controlType === 'advanced' && !isFullscreen) {
         this.handleSeekbarZoom();
       }
+
+      // If duration became available after mount, ensure layout is sized.
+      if (readyState >= 1 && this.state.stateZoom === null) {
+        this.ensureInitialSizing();
+      }
+      if (duration && duration !== prevDuration) {
+        this.forceLayoutAdjust();
+      }
     }
   }, {
     key: "handleSeekbarZoom",
     value: function handleSeekbarZoom() {
-      var zoom = this.props.player.zoom;
+      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var _this$props$player2 = this.props.player,
+        zoom = _this$props$player2.zoom,
+        readyState = _this$props$player2.readyState;
+      if (!force && readyState !== 4) {
+        return;
+      }
       var progressBlock = (0, _reactDom.findDOMNode)(this.progressControlBlock);
       var seekBarBlock = (0, _reactDom.findDOMNode)(this.seekControlBar);
-      var currentZoom = parseFloat(zoom.toFixed(1));
+      var currentZoom = parseFloat((zoom || 0).toFixed(1));
 
       // To be Rectified
       if (this.seekBar.timeline) {
@@ -126,6 +152,55 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    key: "ensureInitialSizing",
+    value: function ensureInitialSizing() {
+      var _this2 = this;
+      var _this$props$player3 = this.props.player,
+        zoom = _this$props$player3.zoom,
+        duration = _this$props$player3.duration;
+      if (!duration) return;
+      // First attempt on next paint
+      requestAnimationFrame(function () {
+        return _this2.handleSeekbarZoom(true);
+      });
+      // Fallback after layout settles
+      setTimeout(function () {
+        return _this2.handleSeekbarZoom(true);
+      }, 60);
+    }
+  }, {
+    key: "forceLayoutAdjust",
+    value: function forceLayoutAdjust() {
+      var _this$seekBar,
+        _this$pointersBar,
+        _this$seekBar2,
+        _this3 = this;
+      var attempt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var _this$props$player4 = this.props.player,
+        zoom = _this$props$player4.zoom,
+        duration = _this$props$player4.duration;
+      if (!duration) return;
+      var currentZoom = parseFloat((zoom || 0).toFixed(1));
+      if ((_this$seekBar = this.seekBar) !== null && _this$seekBar !== void 0 && _this$seekBar.timeline) {
+        this.seekBar.timeline.generateTimeline(currentZoom);
+      }
+      if ((_this$pointersBar = this.pointersBar) !== null && _this$pointersBar !== void 0 && _this$pointersBar.generateZoomWithOfPointersBar) {
+        this.pointersBar.generateZoomWithOfPointersBar(currentZoom);
+      }
+      if (typeof ((_this$seekBar2 = this.seekBar) === null || _this$seekBar2 === void 0 ? void 0 : _this$seekBar2.scrollToSeekbarMiddle) === 'function') {
+        this.seekBar.scrollToSeekbarMiddle();
+      }
+      // Retry a few times while layout stabilizes to avoid needing a user click.
+      if (attempt < 4) {
+        requestAnimationFrame(function () {
+          return _this3.forceLayoutAdjust(attempt + 1);
+        });
+        setTimeout(function () {
+          return _this3.forceLayoutAdjust(attempt + 1);
+        }, 80);
+      }
+    }
   }, {
     key: "handleMouseMove",
     value: function handleMouseMove(event) {
@@ -146,7 +221,7 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
       var _this$props2 = this.props,
         controlType = _this$props2.controlType,
         playerType = _this$props2.playerType,
@@ -168,7 +243,7 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
         isFullscreen: isFullscreen,
         markers: markers,
         ref: function ref(c) {
-          _this2.progressControlBlock = c;
+          _this4.progressControlBlock = c;
         }
       }, playerType == 'default' && /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], _extends({}, this.props, {
         zoom: zoom
@@ -186,7 +261,7 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
         className: "empty-block"
       })))) : null, /*#__PURE__*/_react["default"].createElement(SeekControlBar, {
         ref: function ref(c) {
-          _this2.seekControlBar = c;
+          _this4.seekControlBar = c;
         },
         id: "seekbar-control-block",
         zoom: stateZoom && parseFloat(stateZoom.toFixed(1)),
@@ -197,7 +272,7 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_SeekBar["default"], _extends({
         mouseTime: mouseTime,
         ref: function ref(c) {
-          _this2.seekBar = c;
+          _this4.seekBar = c;
         },
         zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
       }, this.props)), /*#__PURE__*/_react["default"].createElement("div", {
@@ -206,7 +281,7 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
         onScroll: this.handleChildScroll,
         theme: theme,
         ref: function ref(c) {
-          _this2.pointersBar = c;
+          _this4.pointersBar = c;
         },
         zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
       }, this.props))))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {

package/components/progress-bar/SeekBar.js

@@ -125,19 +125,36 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
     };
     _this.hoverBoxRef = /*#__PURE__*/_react["default"].createRef();
     _this.hoverImageRef = /*#__PURE__*/_react["default"].createRef();
+    _this.ensureInitialScroll = _this.ensureInitialScroll.bind(_this);
+    _this.observeSeekbar = _this.observeSeekbar.bind(_this);
+    _this.disconnectObserver = _this.disconnectObserver.bind(_this);
+    _this.lastObservedWidth = 0;
     return _this;
   }
   _inherits(SeekBar, _Component);
   return _createClass(SeekBar, [{
     key: "componentDidMount",
-    value: function componentDidMount() {}
+    value: function componentDidMount() {
+      this.ensureInitialScroll();
+      this.observeSeekbar();
+    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _prevProps$player, _this$props$player;
-      if (((_prevProps$player = prevProps.player) === null || _prevProps$player === void 0 ? void 0 : _prevProps$player.currentTime) !== ((_this$props$player = this.props.player) === null || _this$props$player === void 0 ? void 0 : _this$props$player.currentTime)) {
+      var _prevProps$player, _this$props$player, _prevProps$player2, _this$props$player2;
+      var durationChanged = ((_prevProps$player = prevProps.player) === null || _prevProps$player === void 0 ? void 0 : _prevProps$player.duration) !== ((_this$props$player = this.props.player) === null || _this$props$player === void 0 ? void 0 : _this$props$player.duration);
+      var zoomChanged = prevProps.zoom !== this.props.zoom;
+      if (((_prevProps$player2 = prevProps.player) === null || _prevProps$player2 === void 0 ? void 0 : _prevProps$player2.currentTime) !== ((_this$props$player2 = this.props.player) === null || _this$props$player2 === void 0 ? void 0 : _this$props$player2.currentTime) || durationChanged || zoomChanged) {
         this.scrollToSeekbarMiddle();
       }
+      if (durationChanged || zoomChanged) {
+        this.ensureInitialScroll();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.disconnectObserver();
     }
 
     /**
@@ -146,14 +163,52 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
      * @return {Number} Percentage played
      * @method getPercent
      */
+  }, {
+    key: "ensureInitialScroll",
+    value: function ensureInitialScroll() {
+      var _this2 = this;
+      // Align viewport after layout; helps first render where timeline width is 0 until paint.
+      requestAnimationFrame(function () {
+        return _this2.scrollToSeekbarMiddle();
+      });
+      setTimeout(function () {
+        return _this2.scrollToSeekbarMiddle();
+      }, 60);
+    }
+  }, {
+    key: "observeSeekbar",
+    value: function observeSeekbar() {
+      var _this3 = this;
+      var seekbar = document.getElementById('seekbar-control-block');
+      if (!seekbar || typeof ResizeObserver === 'undefined') return;
+      this.disconnectObserver();
+      this.seekbarObserver = new ResizeObserver(function (entries) {
+        var _entry$contentRect;
+        var entry = entries[0];
+        var width = (entry === null || entry === void 0 || (_entry$contentRect = entry.contentRect) === null || _entry$contentRect === void 0 ? void 0 : _entry$contentRect.width) || 0;
+        if (width > 0 && width !== _this3.lastObservedWidth) {
+          _this3.lastObservedWidth = width;
+          _this3.scrollToSeekbarMiddle();
+        }
+      });
+      this.seekbarObserver.observe(seekbar);
+    }
+  }, {
+    key: "disconnectObserver",
+    value: function disconnectObserver() {
+      if (this.seekbarObserver) {
+        this.seekbarObserver.disconnect();
+        this.seekbarObserver = null;
+      }
+    }
   }, {
     key: "getPercent",
     value: function getPercent() {
       var _this$props = this.props,
-        _this$props$player2 = _this$props.player,
-        currentTime = _this$props$player2.currentTime,
-        seekingTime = _this$props$player2.seekingTime,
-        duration = _this$props$player2.duration,
+        _this$props$player3 = _this$props.player,
+        currentTime = _this$props$player3.currentTime,
+        seekingTime = _this$props$player3.seekingTime,
+        duration = _this$props$player3.duration,
         zoom = _this$props.zoom;
       var time = seekingTime || currentTime;
       var percent = time / duration;
@@ -198,13 +253,18 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "scrollToSeekbarMiddle",
     value: function scrollToSeekbarMiddle() {
-      var viewportWidth = document.getElementById('seekbar-control-block').clientWidth;
+      var seekbarEl = document.getElementById('seekbar-control-block');
+      var timelineEl = document.getElementsByClassName('timeline-content')[0];
+      if (!seekbarEl || !timelineEl) return;
+      var viewportWidth = seekbarEl.clientWidth || seekbarEl.getBoundingClientRect().width;
+      if (!viewportWidth) return;
       var percentScroll = (this.getPercent() * 100).toFixed(2) / 100;
       var scrollWidth = viewportWidth * percentScroll;
-      if (scrollWidth < document.getElementsByClassName('timeline-content')[0].scrollLeft || scrollWidth > document.getElementsByClassName('timeline-content')[0].scrollLeft + viewportWidth) {
+      if (timelineEl.scrollLeft === undefined) return;
+      if (scrollWidth < timelineEl.scrollLeft || scrollWidth > timelineEl.scrollLeft + viewportWidth) {
         viewportWidth = viewportWidth / 2;
         scrollWidth = scrollWidth - viewportWidth;
-        document.getElementsByClassName('timeline-content')[0].scrollTo({
+        timelineEl.scrollTo({
           left: scrollWidth,
           behavior: 'instant'
         });
@@ -265,7 +325,7 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
       var _this$props3 = this.props,
         _this$props3$player = _this$props3.player,
         currentTime = _this$props3$player.currentTime,
@@ -286,8 +346,8 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
         style: this.returnStyle(playerType),
         onMouseDown: this.handleMouseDown,
         onMouseMove: function onMouseMove(e) {
-          _this2.handleMouseMove(e); // existing seeking
-          _this2.handleHoverScrub(e); // NEW preview scrub
+          _this4.handleMouseMove(e); // existing seeking
+          _this4.handleHoverScrub(e); // NEW preview scrub
         },
         onMouseUp: this.handleMouseUp,
         onMouseEnter: this.showHoverPreview,
@@ -303,7 +363,7 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
         isFullscreen: isFullscreen
       }, /*#__PURE__*/_react["default"].createElement(_Slider["default"], _extends({}, this.props, {
         ref: function ref(input) {
-          _this2.slider = input;
+          _this4.slider = input;
         },
         label: "video progress bar",
         valuenow: (this.getPercent() * 100).toFixed(2),
@@ -322,10 +382,10 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
         assetType: assetType
       }, this.props)))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AdvancedControlBlock, null, /*#__PURE__*/_react["default"].createElement(_Timeline["default"], _extends({}, this.props, {
         scrollSeekBar: function scrollSeekBar() {
-          return _this2.scrollToSeekbarMiddle();
+          return _this4.scrollToSeekbarMiddle();
         },
         ref: function ref(c) {
-          _this2.timeline = c;
+          _this4.timeline = c;
         },
         zoomFactor: zoom
       })))) : null));

package/package.json

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