@desynova-digital/player 3.7.7 → 3.8.0
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/Video.js +16 -7
- package/components/marking-controls/MarkingControl.js +2 -1
- package/components/progress-bar/ProgressControl.js +1 -1
- package/components/progress-bar/SeekBar.js +50 -50
- package/components/progress-bar/Timeline.js +1 -1
- package/components/zoom-control/ZoomLevel.js +3 -2
- package/package.json +1 -1
package/components/Video.js
CHANGED
|
@@ -1160,16 +1160,25 @@ var Video = function (_Component) {
|
|
|
1160
1160
|
});
|
|
1161
1161
|
}
|
|
1162
1162
|
}, {
|
|
1163
|
-
key: '
|
|
1164
|
-
value: function
|
|
1163
|
+
key: 'handleSubtitleClick',
|
|
1164
|
+
value: function handleSubtitleClick() {
|
|
1165
1165
|
var _props29 = this.props,
|
|
1166
1166
|
actions = _props29.actions,
|
|
1167
|
-
|
|
1167
|
+
onScreenSubtitleClick = _props29.onScreenSubtitleClick,
|
|
1168
|
+
controlType = _props29.controlType;
|
|
1169
|
+
var currentSubtitleObj = this.state.currentSubtitleObj;
|
|
1168
1170
|
|
|
1169
|
-
if (
|
|
1170
|
-
|
|
1171
|
-
|
|
1171
|
+
if (controlType === 'advanced') {
|
|
1172
|
+
if (onScreenSubtitleClick) {
|
|
1173
|
+
onScreenSubtitleClick(currentSubtitleObj);
|
|
1174
|
+
}
|
|
1172
1175
|
actions.pause();
|
|
1176
|
+
} else {
|
|
1177
|
+
if (player.paused) {
|
|
1178
|
+
actions.play();
|
|
1179
|
+
} else {
|
|
1180
|
+
actions.pause();
|
|
1181
|
+
}
|
|
1173
1182
|
}
|
|
1174
1183
|
actions.handleVideoRewind(false);
|
|
1175
1184
|
}
|
|
@@ -1318,7 +1327,7 @@ var Video = function (_Component) {
|
|
|
1318
1327
|
SubTitleSection,
|
|
1319
1328
|
{
|
|
1320
1329
|
onClick: function onClick() {
|
|
1321
|
-
return _this5.
|
|
1330
|
+
return _this5.handleSubtitleClick();
|
|
1322
1331
|
}
|
|
1323
1332
|
},
|
|
1324
1333
|
_react2.default.createElement(
|
|
@@ -79,7 +79,8 @@ function MarkingControl(_ref) {
|
|
|
79
79
|
playerType = _ref.playerType,
|
|
80
80
|
allowMarkerOverlap = _ref.allowMarkerOverlap,
|
|
81
81
|
playerReadOnlyMode = _ref.playerReadOnlyMode,
|
|
82
|
-
|
|
82
|
+
_ref$disablePlayerAct = _ref.disablePlayerActions,
|
|
83
|
+
disablePlayerActions = _ref$disablePlayerAct === undefined ? [] : _ref$disablePlayerAct;
|
|
83
84
|
|
|
84
85
|
return _react2.default.createElement(
|
|
85
86
|
_react2.default.Fragment,
|
|
@@ -130,7 +130,7 @@ var ProgressControl = function (_Component) {
|
|
|
130
130
|
// To be Rectified
|
|
131
131
|
if (this.seekBar.timeline) {
|
|
132
132
|
this.seekBar.timeline.generateTimeline();
|
|
133
|
-
this.seekBar.audioWaveform.getWaveform();
|
|
133
|
+
// this.seekBar.audioWaveform.getWaveform();
|
|
134
134
|
this.setState({ stateZoom: zoom });
|
|
135
135
|
}
|
|
136
136
|
}
|
|
@@ -18,10 +18,6 @@ var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
|
18
18
|
|
|
19
19
|
var _propTypes = require('prop-types');
|
|
20
20
|
|
|
21
|
-
var _AudioWaveform = require('./AudioWaveform');
|
|
22
|
-
|
|
23
|
-
var _AudioWaveform2 = _interopRequireDefault(_AudioWaveform);
|
|
24
|
-
|
|
25
21
|
var _Slider = require('../Slider');
|
|
26
22
|
|
|
27
23
|
var _Slider2 = _interopRequireDefault(_Slider);
|
|
@@ -52,6 +48,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|
|
52
48
|
|
|
53
49
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
54
50
|
|
|
51
|
+
// import AudioWaveform from './AudioWaveform';
|
|
52
|
+
|
|
53
|
+
|
|
55
54
|
// import MouseTimeDisplay from './MouseTimeDisplay';
|
|
56
55
|
|
|
57
56
|
var AdvancedControlBlock = _styledComponents2.default.div.withConfig({
|
|
@@ -137,11 +136,13 @@ var SeekBar = function (_Component) {
|
|
|
137
136
|
}, {
|
|
138
137
|
key: 'handleMouseDown',
|
|
139
138
|
value: function handleMouseDown() {
|
|
139
|
+
console.log('handleMouse handleMouseDown');
|
|
140
140
|
this.setState({ sliderActive: true });
|
|
141
141
|
}
|
|
142
142
|
}, {
|
|
143
143
|
key: 'handleMouseUp',
|
|
144
144
|
value: function handleMouseUp(event) {
|
|
145
|
+
console.log('handleMouse handleMouseUp');
|
|
145
146
|
var actions = this.props.actions;
|
|
146
147
|
|
|
147
148
|
var newTime = this.getNewTime(event);
|
|
@@ -199,54 +200,53 @@ var SeekBar = function (_Component) {
|
|
|
199
200
|
_react2.default.createElement(_MarkerBar2.default, this.props),
|
|
200
201
|
tagsMarker && tagsMarker.length ? _react2.default.createElement(_TagsBar2.default, this.props) : null,
|
|
201
202
|
_react2.default.createElement(
|
|
202
|
-
|
|
203
|
-
|
|
203
|
+
'div',
|
|
204
|
+
{
|
|
205
|
+
onMouseDown: this.handleMouseDown,
|
|
206
|
+
onMouseMove: this.handleMouseMove,
|
|
207
|
+
onMouseUp: this.handleMouseUp
|
|
208
|
+
},
|
|
204
209
|
_react2.default.createElement(
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
210
|
+
SliderBlock,
|
|
211
|
+
null,
|
|
212
|
+
_react2.default.createElement(
|
|
213
|
+
_Slider2.default,
|
|
214
|
+
{
|
|
215
|
+
ref: function ref(input) {
|
|
216
|
+
_this2.slider = input;
|
|
217
|
+
},
|
|
218
|
+
label: 'video progress bar',
|
|
219
|
+
valuenow: (this.getPercent() * 100).toFixed(2),
|
|
220
|
+
valuetext: (0, _utils.formatTime)(time, duration)
|
|
221
|
+
// onMouseDown={this.handleMouseDown}
|
|
222
|
+
// onMouseMove={this.handleMouseMove}
|
|
223
|
+
// onMouseUp={this.handleMouseUp}
|
|
224
|
+
, getPercent: this.getPercent,
|
|
225
|
+
stepForward: this.stepForward,
|
|
226
|
+
stepBack: this.stepBack
|
|
209
227
|
},
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
null
|
|
231
|
-
|
|
232
|
-
AdvancedControlBlock,
|
|
233
|
-
{
|
|
234
|
-
onMouseDown: this.handleMouseDown,
|
|
235
|
-
onMouseMove: this.handleMouseMove,
|
|
236
|
-
onMouseUp: this.handleMouseUp
|
|
237
|
-
},
|
|
238
|
-
_react2.default.createElement(_AudioWaveform2.default, _extends({}, this.props, {
|
|
239
|
-
ref: function ref(c) {
|
|
240
|
-
_this2.audioWaveform = c;
|
|
241
|
-
}
|
|
242
|
-
})),
|
|
243
|
-
_react2.default.createElement(_Timeline2.default, _extends({}, this.props, {
|
|
244
|
-
ref: function ref(c) {
|
|
245
|
-
_this2.timeline = c;
|
|
246
|
-
}
|
|
247
|
-
}))
|
|
248
|
-
)
|
|
249
|
-
) : null
|
|
228
|
+
_react2.default.createElement(_PlayProgressBar2.default, _extends({
|
|
229
|
+
currentTime: time,
|
|
230
|
+
duration: duration,
|
|
231
|
+
playerType: playerType,
|
|
232
|
+
assetType: assetType
|
|
233
|
+
}, this.props))
|
|
234
|
+
)
|
|
235
|
+
),
|
|
236
|
+
controlType === 'advanced' && !isFullscreen ? _react2.default.createElement(
|
|
237
|
+
_react2.default.Fragment,
|
|
238
|
+
null,
|
|
239
|
+
_react2.default.createElement(
|
|
240
|
+
AdvancedControlBlock,
|
|
241
|
+
null,
|
|
242
|
+
_react2.default.createElement(_Timeline2.default, _extends({}, this.props, {
|
|
243
|
+
ref: function ref(c) {
|
|
244
|
+
_this2.timeline = c;
|
|
245
|
+
}
|
|
246
|
+
}))
|
|
247
|
+
)
|
|
248
|
+
) : null
|
|
249
|
+
)
|
|
250
250
|
);
|
|
251
251
|
}
|
|
252
252
|
}]);
|
|
@@ -39,7 +39,7 @@ var propTypes = {
|
|
|
39
39
|
var TimelineBlock = _styledComponents2.default.div.withConfig({
|
|
40
40
|
displayName: 'Timeline__TimelineBlock',
|
|
41
41
|
componentId: 'sc-1qvrkuc-0'
|
|
42
|
-
})(['display:flex;justify-content:space-between;align-items:stretch;position:absolute;width:100%;height:100%;top:0px;left:0;.player-time{width:100%;position:relative;height:46px;&:first-child{p{left:0px;}}&:last-child{width:10px;', '{display:none;}p{left:auto;right:0px;}}', '{position:absolute;left:0;bottom:0;}p{color:#aaa;font-size:10px;font-family:SFUIText-Regular;left:-28px;top:10px;letter-spacing:0.5px;position:absolute;}}'], _components.Icon.Element, _components.Icon.Element);
|
|
42
|
+
})(['display:flex;justify-content:space-between;align-items:stretch;position:absolute;width:100%;height:100%;top:0px;left:0;.player-time{width:100%;position:relative;height:46px;user-select:none;&:first-child{p{left:0px;}}&:last-child{width:10px;', '{display:none;}p{left:auto;right:0px;}}', '{position:absolute;left:0;bottom:0;}p{color:#aaa;font-size:10px;font-family:SFUIText-Regular;left:-28px;top:10px;letter-spacing:0.5px;position:absolute;user-select:none;}}'], _components.Icon.Element, _components.Icon.Element);
|
|
43
43
|
|
|
44
44
|
var Timeline = function (_Component) {
|
|
45
45
|
_inherits(Timeline, _Component);
|
|
@@ -49,7 +49,8 @@ var ZoomLevelBar = _styledComponents2.default.div.withConfig({
|
|
|
49
49
|
function ZoomLevel(_ref) {
|
|
50
50
|
var percentage = _ref.percentage,
|
|
51
51
|
vertical = _ref.vertical,
|
|
52
|
-
playerType = _ref.playerType
|
|
52
|
+
playerType = _ref.playerType,
|
|
53
|
+
assetType = _ref.assetType;
|
|
53
54
|
|
|
54
55
|
var style = {};
|
|
55
56
|
if (vertical) {
|
|
@@ -58,7 +59,7 @@ function ZoomLevel(_ref) {
|
|
|
58
59
|
style.width = percentage;
|
|
59
60
|
}
|
|
60
61
|
|
|
61
|
-
return _react2.default.createElement(ZoomLevelBar, { style: style, playerType: playerType, vertical: vertical });
|
|
62
|
+
return _react2.default.createElement(ZoomLevelBar, { style: style, playerType: playerType, vertical: vertical, assetType: assetType });
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
ZoomLevel.propTypes = propTypes;
|