@desynova-digital/player 4.0.44 → 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.
|
@@ -125,7 +125,6 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
125
125
|
}
|
|
126
126
|
var rect = seekBar.getBoundingClientRect();
|
|
127
127
|
var clickPosition = event.clientX - rect.left;
|
|
128
|
-
// Optional improvement: getScrollableWidth could be replaced with rect.width if that's what it returns.
|
|
129
128
|
var totalWidth = typeof this.getScrollableWidth === 'function' ? this.getScrollableWidth(seekBar) : rect.width;
|
|
130
129
|
var seekPercentage = clickPosition / totalWidth;
|
|
131
130
|
newTime = duration * seekPercentage;
|
|
@@ -235,11 +234,12 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
235
234
|
assetType: assetType
|
|
236
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, {
|
|
237
236
|
scrollSeekBar: function scrollSeekBar() {
|
|
238
|
-
_this2.scrollToSeekbarMiddle();
|
|
237
|
+
return _this2.scrollToSeekbarMiddle();
|
|
239
238
|
},
|
|
240
239
|
ref: function ref(c) {
|
|
241
240
|
_this2.timeline = c;
|
|
242
|
-
}
|
|
241
|
+
},
|
|
242
|
+
zoomFactor: zoom
|
|
243
243
|
})))) : null));
|
|
244
244
|
}
|
|
245
245
|
}]);
|
|
@@ -33,7 +33,10 @@ 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 flex-direction: row;\n align-items: stretch;\n
|
|
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%';
|
|
39
|
+
}, _components.Icon.Element, _components.Icon.Element);
|
|
37
40
|
var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
38
41
|
function Timeline(props, context) {
|
|
39
42
|
var _this;
|
|
@@ -49,7 +52,8 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
49
52
|
return _createClass(Timeline, [{
|
|
50
53
|
key: "componentDidMount",
|
|
51
54
|
value: function componentDidMount() {
|
|
52
|
-
this.
|
|
55
|
+
var zoom = this.props.zoom;
|
|
56
|
+
this.generateTimeline(zoom);
|
|
53
57
|
}
|
|
54
58
|
}, {
|
|
55
59
|
key: "componentDidUpdate",
|
|
@@ -57,7 +61,10 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
57
61
|
var _this$props = this.props,
|
|
58
62
|
scrollSeekBar = _this$props.scrollSeekBar,
|
|
59
63
|
zoom = _this$props.zoom;
|
|
60
|
-
if (prevProps.zoom !== zoom)
|
|
64
|
+
if (prevProps.zoom !== zoom) {
|
|
65
|
+
scrollSeekBar && scrollSeekBar();
|
|
66
|
+
this.generateTimeline(zoom);
|
|
67
|
+
}
|
|
61
68
|
}
|
|
62
69
|
}, {
|
|
63
70
|
key: "generateTimeline",
|
|
@@ -67,21 +74,21 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
67
74
|
if (!seekbar) return;
|
|
68
75
|
var baseBlockWidth = 100;
|
|
69
76
|
var sliderWidth;
|
|
70
|
-
|
|
71
|
-
// Calculate slider width based on zoom
|
|
72
77
|
var baseWidth = seekbar.clientWidth;
|
|
73
78
|
sliderWidth = zoomFactor > 0 ? Math.round(baseWidth * zoomFactor * 20) : Math.round(baseWidth);
|
|
74
|
-
|
|
75
|
-
// Calculate how many full blocks of 100px fit, and the leftover width
|
|
76
79
|
var noOfBlocks = Math.floor(sliderWidth / baseBlockWidth);
|
|
77
|
-
|
|
78
|
-
// Compute time distance between ticks
|
|
79
|
-
var totalDuration = player.duration; // e.g., 20s
|
|
80
|
+
var totalDuration = player.duration;
|
|
80
81
|
var timeDistance = totalDuration / noOfBlocks;
|
|
81
82
|
|
|
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);
|
|
89
|
+
}
|
|
83
90
|
var timeArray = [];
|
|
84
|
-
for (var i = 0; i <= noOfBlocks; i
|
|
91
|
+
for (var i = 0; i <= noOfBlocks; i += skipFactor) {
|
|
85
92
|
var timePoint = parseFloat((i * timeDistance).toFixed(2));
|
|
86
93
|
timeArray.push(Math.min(timePoint, totalDuration));
|
|
87
94
|
}
|
|
@@ -116,8 +123,7 @@ var Timeline = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
116
123
|
style: {
|
|
117
124
|
position: 'absolute',
|
|
118
125
|
left: "".concat(leftPercent, "%")
|
|
119
|
-
}
|
|
120
|
-
,
|
|
126
|
+
},
|
|
121
127
|
key: time
|
|
122
128
|
}, /*#__PURE__*/_react["default"].createElement("p", null, formattedTime), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
|
|
123
129
|
name: "timeline",
|