@desynova-digital/player 4.0.43 → 4.0.44

package/components/progress-bar/SeekBar.js

@@ -118,14 +118,18 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
         var distance = this.slider.calculateDistance(event);
         newTime = distance * duration;
       } else {
-        var seekBar = document.getElementById('timeline-block');
-        var clickPosition = event.clientX - seekBar.getBoundingClientRect().left;
-        var data = this.getScrollableWidth(seekBar);
-        var seekPercentage = clickPosition / data;
+        var seekBar = event.currentTarget || event.target.closest('#timeline-block');
+        if (!seekBar) {
+          console.warn('Seekbar element not found.');
+          return 0;
+        }
+        var rect = seekBar.getBoundingClientRect();
+        var clickPosition = event.clientX - rect.left;
+        // Optional improvement: getScrollableWidth could be replaced with rect.width if that's what it returns.
+        var totalWidth = typeof this.getScrollableWidth === 'function' ? this.getScrollableWidth(seekBar) : rect.width;
+        var seekPercentage = clickPosition / totalWidth;
         newTime = duration * seekPercentage;
       }
-
-      // Don't let video end while scrubbing.
       return newTime === duration ? newTime - 0.1 : newTime;
     }
   }, {

package/components/progress-bar/Timeline.js

@@ -33,9 +33,7 @@ var propTypes = {
   initialTime: _propTypes.PropTypes.number,
   frameRate: _propTypes.PropTypes.number
 };
-var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: stretch;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0;\n  width: ", ";\n  .player-time {\n    width: 100%;\n    :not(:last-child) {\n      min-width: 100px;\n    }\n    position: relative;\n    height: 46px;\n    user-select: none;\n    &:first-child {\n      p {\n        left: 0px;\n      }\n    }\n    &:last-child {\n      flex-grow: 1;\n      ", " {\n        display: none;\n      }\n      p {\n        left: auto;\n        right: 0px;\n      }\n    }\n    ", " {\n      position: absolute;\n      left: 0;\n      bottom: 0;\n    }\n    p {\n      color: #aaa;\n      font-size: 10px;\n      font-family: SFUIText-Regular;\n      left: -28px;\n      top: 10px;\n      letter-spacing: 0.5px;\n      position: absolute;\n      user-select: none;\n    }\n  }\n"])), function (props) {
-  return props.maxWidth ? props.maxWidth : '';
-}, _components.Icon.Element, _components.Icon.Element);
+var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  width: 100%;\n  height: 46px;\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  .player-time {\n    flex: 0 0 auto;\n    width: 100px;\n    height: 100%;\n    position: relative;\n    user-select: none;\n\n    &:first-child p {\n      left: 0;\n    }\n\n    &:last-child {\n      flex-grow: 1;\n      ", " {\n        display: none;\n      }\n      p {\n        left: auto;\n        right: 0;\n      }\n    }\n\n    ", " {\n      position: absolute;\n      left: 0;\n      bottom: 0;\n    }\n\n    p {\n      position: absolute;\n      font-size: 10px;\n      font-family: SFUIText-Regular;\n      color: #aaa;\n      top: 10px;\n      left: -28px;\n      letter-spacing: 0.5px;\n    }\n  }\n"])), _components.Icon.Element, _components.Icon.Element);
 var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
   function Timeline(props, context) {
     var _this;
@@ -65,31 +63,32 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "generateTimeline",
     value: function generateTimeline(zoomFactor) {
       var player = this.props.player;
-      var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
-      var perTimeWidth = 100;
-      var sliderWidth = 0;
-      if (zoomFactor > 0) {
-        sliderWidth = (document.getElementById('seekbar-control-block').clientWidth * zoomFactor * 20).toFixed(0);
-      } else {
-        sliderWidth = document.getElementById('seekbar-control-block').clientWidth.toFixed(0);
-      }
-      var timeBlocks = parseInt(sliderWidth / perTimeWidth, 10);
-      var timeDistance = parseInt(player.duration / timeBlocks, 10);
-      var timeArray = [0];
-      for (var i = 0; i < timeBlocks; i++) {
-        var lastValue = timeArray[timeArray.length - 1];
-        var currentTime = lastValue + timeDistance;
-        if (currentTime + timeDistance < player.duration) {
-          timeArray.push(currentTime);
-        } else {
-          timeArray.push(player.duration);
-          break;
-        }
+      var seekbar = document.getElementById('seekbar-control-block');
+      if (!seekbar) return;
+      var baseBlockWidth = 100;
+      var sliderWidth;
+
+      // Calculate slider width based on zoom
+      var baseWidth = seekbar.clientWidth;
+      sliderWidth = zoomFactor > 0 ? Math.round(baseWidth * zoomFactor * 20) : Math.round(baseWidth);
+
+      // Calculate how many full blocks of 100px fit, and the leftover width
+      var noOfBlocks = Math.floor(sliderWidth / baseBlockWidth);
+
+      // Compute time distance between ticks
+      var totalDuration = player.duration; // e.g., 20s
+      var timeDistance = totalDuration / noOfBlocks;
+
+      // Create time array
+      var timeArray = [];
+      for (var i = 0; i <= noOfBlocks; i++) {
+        var timePoint = parseFloat((i * timeDistance).toFixed(2));
+        timeArray.push(Math.min(timePoint, totalDuration));
       }
       this.setState({
         timeArray: timeArray,
         zoom: zoomFactor,
-        maxWidth: sliderWidth + 'px'
+        maxWidth: "".concat(sliderWidth, "px")
       });
     }
   }, {
@@ -98,7 +97,8 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
       var _this2 = this;
       var _this$props2 = this.props,
         initialTime = _this$props2.initialTime,
-        frameRate = _this$props2.frameRate;
+        frameRate = _this$props2.frameRate,
+        player = _this$props2.player;
       var _this$state = this.state,
         timeArray = _this$state.timeArray,
         maxWidth = _this$state.maxWidth;
@@ -110,11 +110,14 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
         }
       }, timeArray.map(function (time) {
         var formattedTime = (0, _utils.secondsToTime)(time, frameRate, initialTime);
+        var leftPercent = time / player.duration * 100;
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: "player-time",
-          ref: function ref(c) {
-            _this2.timelineContainer = c;
-          },
+          style: {
+            position: 'absolute',
+            left: "".concat(leftPercent, "%")
+          } // Fix marker alignment
+          ,
           key: time
         }, /*#__PURE__*/_react["default"].createElement("p", null, formattedTime), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
           name: "timeline",

package/package.json

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