@desynova-digital/player 4.0.42 → 4.0.44

package/components/control-bar/SettingsMenuButton.js

@@ -11,8 +11,8 @@ var _SettingsMenu = _interopRequireDefault(require("../settings-menu-control/Set
 var _excluded = ["style", "player", "actions", "disablePlayerActions", "theme", "playerType", "subtitleData"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   actions: _propTypes.PropTypes.instanceOf(Object),

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/components/settings-menu-control/SettingsMenu.js

@@ -26,8 +26,8 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 /*
  * import SubtitleControl from './SubtitleControl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.0.42",
+  "version": "4.0.44",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {
@@ -55,7 +55,7 @@
   "dependencies": {
     "@desynova-digital/components": "^9.1.3",
     "@desynova-digital/tokens": "^9.1.3",
-    "hls.js": "1.4.12",
+    "hls.js": "1.6.2",
     "babel-core": "7.0.0-bridge.0",
     "latest-version": "^4.0.0",
     "prettycli": "^1.4.3",