@desynova-digital/player 4.0.60 → 4.0.62
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.
package/components/MarkerBar.js
CHANGED
|
@@ -40,10 +40,10 @@ var propTypes = {
|
|
|
40
40
|
var defaultProps = {
|
|
41
41
|
player: {}
|
|
42
42
|
};
|
|
43
|
-
var MarkerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 25px;\n z-index:3;\n position: ", ";\n bottom: ", ";\n .marker {\n position: absolute;\n width: 2px;\n height: 20px;\n p {\n font-family: SFUIText-Medium;\n font-size: 10px;\n color: #ffffff;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n }\n ", " {\n position: absolute;\n display: block;\n left: 50%;\n top: 10px;\n transform: translateX(-50%);\n }\n }\n"])), function (props) {
|
|
43
|
+
var MarkerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 25px;\n z-index:3;\n position: ", ";\n cursor: default;\n bottom: ", ";\n .marker {\n position: absolute;\n width: 2px;\n height: 20px;\n p {\n font-family: SFUIText-Medium;\n font-size: 10px;\n color: #ffffff;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n }\n ", " {\n position: absolute;\n display: block;\n left: 50%;\n top: 10px;\n transform: translateX(-50%);\n }\n }\n"])), function (props) {
|
|
44
44
|
return props.controlType === 'advanced' && !props.isFullscreen ? 'relative' : 'absolute';
|
|
45
45
|
}, function (props) {
|
|
46
|
-
return props.controlType === 'advanced' && !props.isFullscreen ? '0px' : '
|
|
46
|
+
return props.controlType === 'advanced' && !props.isFullscreen ? '0px' : '14px';
|
|
47
47
|
}, _components.Icon.Element);
|
|
48
48
|
var MarkerBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
49
49
|
function MarkerBar(props) {
|
|
@@ -14,6 +14,7 @@ var _SeekBar = _interopRequireDefault(require("./SeekBar"));
|
|
|
14
14
|
var _PointersBar = _interopRequireDefault(require("../PointersBar"));
|
|
15
15
|
var _colors = _interopRequireDefault(require("../../colors"));
|
|
16
16
|
var _player = _interopRequireDefault(require("../../reducers/player"));
|
|
17
|
+
var _MarkerBar = _interopRequireDefault(require("../MarkerBar"));
|
|
17
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
18
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
19
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -50,7 +51,9 @@ var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (
|
|
|
50
51
|
var markers = _ref.markers;
|
|
51
52
|
return markers.length > 3 ? '40px' : '23px';
|
|
52
53
|
});
|
|
53
|
-
var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: relative;\n cursor:
|
|
54
|
+
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) {
|
|
55
|
+
return props.isFullscreen ? 'default' : 'pointer';
|
|
56
|
+
}, function (props) {
|
|
54
57
|
return props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1';
|
|
55
58
|
}, function (_ref2) {
|
|
56
59
|
var zoom = _ref2.zoom;
|
|
@@ -152,7 +155,8 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
152
155
|
isFullscreen = _this$props2$player.isFullscreen,
|
|
153
156
|
duration = _this$props2$player.duration,
|
|
154
157
|
markers = _this$props2.markers,
|
|
155
|
-
theme = _this$props2.theme
|
|
158
|
+
theme = _this$props2.theme,
|
|
159
|
+
zoom = _this$props2.zoom;
|
|
156
160
|
var _this$state = this.state,
|
|
157
161
|
mouseTime = _this$state.mouseTime,
|
|
158
162
|
stateZoom = _this$state.stateZoom;
|
|
@@ -166,7 +170,9 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
166
170
|
ref: function ref(c) {
|
|
167
171
|
_this2.progressControlBlock = c;
|
|
168
172
|
}
|
|
169
|
-
},
|
|
173
|
+
}, playerType == 'default' && /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], _extends({}, this.props, {
|
|
174
|
+
zoom: zoom
|
|
175
|
+
})), controlType === 'advanced' && !isFullscreen && duration ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CoverDiv, null), /*#__PURE__*/_react["default"].createElement(ScrollStyledDiv, {
|
|
170
176
|
markers: markers,
|
|
171
177
|
ref: this.parentScrollDivRef,
|
|
172
178
|
className: "hide-scrollbar"
|
|
@@ -184,7 +190,8 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
184
190
|
},
|
|
185
191
|
id: "seekbar-control-block",
|
|
186
192
|
zoom: stateZoom && parseFloat(stateZoom.toFixed(1)),
|
|
187
|
-
onMouseMove: this.handleMouseMoveThrottle
|
|
193
|
+
onMouseMove: this.handleMouseMoveThrottle,
|
|
194
|
+
isFullscreen: isFullscreen
|
|
188
195
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
189
196
|
className: "timeline-content hide-scrollbar"
|
|
190
197
|
}, /*#__PURE__*/_react["default"].createElement(_SeekBar["default"], _extends({
|
|
@@ -35,7 +35,9 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
|
|
|
35
35
|
// import MouseTimeDisplay from './MouseTimeDisplay';
|
|
36
36
|
|
|
37
37
|
var AdvancedControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 46px;\n position: relative;\n cursor: pointer;\n z-index: 1;\n"])));
|
|
38
|
-
var SliderBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 4px;\n position: relative;\n cursor: pointer;\n z-index: 2;\n"])))
|
|
38
|
+
var SliderBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 4px;\n position: relative;\n cursor: pointer;\n z-index: 2;\n top: ", ";\n"])), function (props) {
|
|
39
|
+
return props.isFullscreen && props.playerType != 'default' ? '4px' : '0px';
|
|
40
|
+
});
|
|
39
41
|
var propTypes = {
|
|
40
42
|
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
41
43
|
player: _propTypes.PropTypes.instanceOf(Object),
|
|
@@ -218,14 +220,17 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
218
220
|
var time = seekingTime || currentTime;
|
|
219
221
|
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
220
222
|
id: "seekbarss"
|
|
221
|
-
}, /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], _extends({}, this.props, {
|
|
223
|
+
}, playerType != 'default' && /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], _extends({}, this.props, {
|
|
222
224
|
zoom: zoom
|
|
223
225
|
})), tagsMarker && tagsMarker.length ? /*#__PURE__*/_react["default"].createElement(_TagsBar["default"], this.props) : null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
224
226
|
style: this.returnStyle(playerType),
|
|
225
227
|
onMouseDown: this.handleMouseDown,
|
|
226
228
|
onMouseMove: this.handleMouseMove,
|
|
227
229
|
onMouseUp: this.handleMouseUp
|
|
228
|
-
}, /*#__PURE__*/_react["default"].createElement(SliderBlock,
|
|
230
|
+
}, /*#__PURE__*/_react["default"].createElement(SliderBlock, {
|
|
231
|
+
playerType: playerType,
|
|
232
|
+
isFullscreen: isFullscreen
|
|
233
|
+
}, /*#__PURE__*/_react["default"].createElement(_Slider["default"], _extends({}, this.props, {
|
|
229
234
|
ref: function ref(input) {
|
|
230
235
|
_this2.slider = input;
|
|
231
236
|
},
|