@desynova-digital/player 4.0.43 → 4.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/progress-bar/SeekBar.js +12 -8
  2. package/components/progress-bar/Timeline.js +36 -27
  3. package/package.json +1 -1
package/components/progress-bar/SeekBar.js CHANGED
@@ -118,14 +118,17 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
118
118
  var distance = this.slider.calculateDistance(event);
119
119
  newTime = distance * duration;
120
120
  } else {
121
- var seekBar = document.getElementById('timeline-block');
122
- var clickPosition = event.clientX - seekBar.getBoundingClientRect().left;
123
- var data = this.getScrollableWidth(seekBar);
124
- var seekPercentage = clickPosition / data;
121
+ var seekBar = event.currentTarget || event.target.closest('#timeline-block');
122
+ if (!seekBar) {
123
+ console.warn('Seekbar element not found.');
124
+ return 0;
125
+ }
126
+ var rect = seekBar.getBoundingClientRect();
127
+ var clickPosition = event.clientX - rect.left;
128
+ var totalWidth = typeof this.getScrollableWidth === 'function' ? this.getScrollableWidth(seekBar) : rect.width;
129
+ var seekPercentage = clickPosition / totalWidth;
125
130
  newTime = duration * seekPercentage;
126
131
  }
127
-
128
- // Don't let video end while scrubbing.
129
132
  return newTime === duration ? newTime - 0.1 : newTime;
130
133
  }
131
134
  }, {
@@ -231,11 +234,12 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
231
234
  assetType: assetType
232
235
  }, 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, {
233
236
  scrollSeekBar: function scrollSeekBar() {
234
- _this2.scrollToSeekbarMiddle();
237
+ return _this2.scrollToSeekbarMiddle();
235
238
  },
236
239
  ref: function ref(c) {
237
240
  _this2.timeline = c;
238
- }
241
+ },
242
+ zoomFactor: zoom
239
243
  })))) : null));
240
244
  }
241
245
  }]);
package/components/progress-bar/Timeline.js CHANGED
@@ -33,8 +33,9 @@ var propTypes = {
33
33
  initialTime: _propTypes.PropTypes.number,
34
34
  frameRate: _propTypes.PropTypes.number
35
35
  };
36
- 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) {
37
- return props.maxWidth ? props.maxWidth : '';
36
+ var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: stretch;\n width: ", ";\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"])), function (_ref) {
37
+ var maxWidth = _ref.maxWidth;
38
+ return maxWidth || '100%';
38
39
  }, _components.Icon.Element, _components.Icon.Element);
39
40
  var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
40
41
  function Timeline(props, context) {
@@ -51,7 +52,8 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
51
52
  return _createClass(Timeline, [{
52
53
  key: "componentDidMount",
53
54
  value: function componentDidMount() {
54
- this.generateTimeline();
55
+ var zoom = this.props.zoom;
56
+ this.generateTimeline(zoom);
55
57
  }
56
58
  }, {
57
59
  key: "componentDidUpdate",
@@ -59,37 +61,41 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
59
61
  var _this$props = this.props,
60
62
  scrollSeekBar = _this$props.scrollSeekBar,
61
63
  zoom = _this$props.zoom;
62
- if (prevProps.zoom !== zoom) scrollSeekBar && scrollSeekBar();
64
+ if (prevProps.zoom !== zoom) {
65
+ scrollSeekBar && scrollSeekBar();
66
+ this.generateTimeline(zoom);
67
+ }
63
68
  }
64
69
  }, {
65
70
  key: "generateTimeline",
66
71
  value: function generateTimeline(zoomFactor) {
67
72
  var player = this.props.player;
68
- var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
69
- var perTimeWidth = 100;
70
- var sliderWidth = 0;
71
- if (zoomFactor > 0) {
72
- sliderWidth = (document.getElementById('seekbar-control-block').clientWidth * zoomFactor * 20).toFixed(0);
73
- } else {
74
- sliderWidth = document.getElementById('seekbar-control-block').clientWidth.toFixed(0);
73
+ var seekbar = document.getElementById('seekbar-control-block');
74
+ if (!seekbar) return;
75
+ var baseBlockWidth = 100;
76
+ var sliderWidth;
77
+ var baseWidth = seekbar.clientWidth;
78
+ sliderWidth = zoomFactor > 0 ? Math.round(baseWidth * zoomFactor * 20) : Math.round(baseWidth);
79
+ var noOfBlocks = Math.floor(sliderWidth / baseBlockWidth);
80
+ var totalDuration = player.duration;
81
+ var timeDistance = totalDuration / noOfBlocks;
82
+
83
+ // 👇 Prevent dense tick lines
84
+ var minSpacingPx = 90;
85
+ var actualBlockSpacing = sliderWidth / noOfBlocks;
86
+ var skipFactor = 1.08;
87
+ if (actualBlockSpacing < minSpacingPx) {
88
+ skipFactor = Math.ceil(minSpacingPx / actualBlockSpacing);
75
89
  }
76
- var timeBlocks = parseInt(sliderWidth / perTimeWidth, 10);
77
- var timeDistance = parseInt(player.duration / timeBlocks, 10);
78
- var timeArray = [0];
79
- for (var i = 0; i < timeBlocks; i++) {
80
- var lastValue = timeArray[timeArray.length - 1];
81
- var currentTime = lastValue + timeDistance;
82
- if (currentTime + timeDistance < player.duration) {
83
- timeArray.push(currentTime);
84
- } else {
85
- timeArray.push(player.duration);
86
- break;
87
- }
90
+ var timeArray = [];
91
+ for (var i = 0; i <= noOfBlocks; i += skipFactor) {
92
+ var timePoint = parseFloat((i * timeDistance).toFixed(2));
93
+ timeArray.push(Math.min(timePoint, totalDuration));
88
94
  }
89
95
  this.setState({
90
96
  timeArray: timeArray,
91
97
  zoom: zoomFactor,
92
- maxWidth: sliderWidth + 'px'
98
+ maxWidth: "".concat(sliderWidth, "px")
93
99
  });
94
100
  }
95
101
  }, {
@@ -98,7 +104,8 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
98
104
  var _this2 = this;
99
105
  var _this$props2 = this.props,
100
106
  initialTime = _this$props2.initialTime,
101
- frameRate = _this$props2.frameRate;
107
+ frameRate = _this$props2.frameRate,
108
+ player = _this$props2.player;
102
109
  var _this$state = this.state,
103
110
  timeArray = _this$state.timeArray,
104
111
  maxWidth = _this$state.maxWidth;
@@ -110,10 +117,12 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
110
117
  }
111
118
  }, timeArray.map(function (time) {
112
119
  var formattedTime = (0, _utils.secondsToTime)(time, frameRate, initialTime);
120
+ var leftPercent = time / player.duration * 100;
113
121
  return /*#__PURE__*/_react["default"].createElement("div", {
114
122
  className: "player-time",
115
- ref: function ref(c) {
116
- _this2.timelineContainer = c;
123
+ style: {
124
+ position: 'absolute',
125
+ left: "".concat(leftPercent, "%")
117
126
  },
118
127
  key: time
119
128
  }, /*#__PURE__*/_react["default"].createElement("p", null, formattedTime), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.43",
3
+ "version": "4.0.45",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {