@desynova-digital/player 3.9.7 → 4.0.1
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/Player.js +945 -0
- package/control/AudioTracksMenuButton.js +91 -0
- package/control/AudioTracksMenuButton.jsx +80 -0
- package/control/ControlBar.js +303 -0
- package/control/ControlBar.jsx +264 -0
- package/control/CurrentTimeDisplay.js +34 -0
- package/control/CurrentTimeDisplay.jsx +35 -0
- package/control/DurationDisplay.js +38 -0
- package/control/DurationDisplay.jsx +48 -0
- package/control/ForwardBackwardControl.js +76 -0
- package/control/ForwardBackwardControl.jsx +79 -0
- package/control/FullscreenToggle.js +82 -0
- package/control/FullscreenToggle.jsx +83 -0
- package/control/MarkInControl.js +124 -0
- package/control/MarkInControl.jsx +109 -0
- package/control/MarkOutControl.js +137 -0
- package/control/MarkOutControl.jsx +131 -0
- package/control/MarkerBar.js +127 -0
- package/control/MarkerBar.jsx +107 -0
- package/control/MarkingControl.js +82 -0
- package/control/MarkingControl.jsx +143 -0
- package/control/MarkingDuration.js +44 -0
- package/control/MarkingPreview.js +49 -0
- package/control/MarkingPreview.jsx +60 -0
- package/control/PlayBackRateControl.js +106 -0
- package/control/PlayBackRateControl.jsx +106 -0
- package/control/PlayProgressBar.js +61 -0
- package/control/PlayProgressBar.jsx +92 -0
- package/control/PlayToggle.js +56 -0
- package/control/PlayToggle.jsx +57 -0
- package/control/PointersBar.js +231 -0
- package/control/PointersBar.jsx +286 -0
- package/control/ProgressControl.js +127 -0
- package/control/ProgressControl.jsx +155 -0
- package/control/SeekBar.js +204 -0
- package/control/SeekBar.jsx +229 -0
- package/control/SettingsMenuButton.js +63 -0
- package/control/SettingsMenuButton.jsx +69 -0
- package/control/Slider.js +274 -0
- package/control/Slider.jsx +243 -0
- package/control/Timeline.js +118 -0
- package/control/Timeline.jsx +131 -0
- package/control/VolumeBar.js +198 -0
- package/control/VolumeBar.jsx +174 -0
- package/control/VolumeLevel.js +61 -0
- package/control/VolumeLevel.jsx +66 -0
- package/control/VolumneMenuButton.js +112 -0
- package/control/VolumneMenuButton.jsx +111 -0
- package/header/Header.js +309 -0
- package/header/Header.jsx +479 -0
- package/index.js +9 -151
- package/media/AudioMeter.js +381 -0
- package/media/AudioMeter.jsx +411 -0
- package/media/SDOutline.js +82 -0
- package/media/SDOutline.jsx +90 -0
- package/media/Video.js +684 -0
- package/media/Video.jsx +714 -0
- package/package.json +5 -1
- package/playlist/Playlist.js +67 -0
- package/playlist/Playlist.jsx +91 -0
- package/playlist/index.js +13 -0
- package/shortcuts/Shortcut.js +662 -0
- package/utils/Menu.js +50 -0
- package/utils/Menu.jsx +105 -0
- package/{colors.js → utils/colors.js} +13 -13
- package/utils/dom.js +6 -16
- package/utils/index.js +52 -122
- package/Manager.js +0 -124
- package/actions/player.js +0 -375
- package/actions/video.js +0 -230
- package/components/AudioMeter.js +0 -414
- package/components/BigPlayButton.js +0 -110
- package/components/ImageViewer.js +0 -318
- package/components/MarkerBar.js +0 -138
- package/components/Menu.js +0 -77
- package/components/Player.js +0 -821
- package/components/PlayerHeader.js +0 -472
- package/components/Playlist.js +0 -133
- package/components/PointersBar.js +0 -299
- package/components/PosterImage.js +0 -61
- package/components/SDOutline.js +0 -68
- package/components/Shortcut.js +0 -621
- package/components/Slider.js +0 -317
- package/components/TagsBar.js +0 -100
- package/components/Video.js +0 -1431
- package/components/control-bar/AudioTracksMenuButton.js +0 -113
- package/components/control-bar/CameraButton.js +0 -88
- package/components/control-bar/CommentsButton.js +0 -216
- package/components/control-bar/ControlBar.js +0 -260
- package/components/control-bar/EditorControlMenuButton.js +0 -412
- package/components/control-bar/ForwardControl.js +0 -17
- package/components/control-bar/ForwardReplayControl.js +0 -122
- package/components/control-bar/FullscreenToggle.js +0 -101
- package/components/control-bar/PlayToggle.js +0 -98
- package/components/control-bar/ReplayControl.js +0 -17
- package/components/control-bar/SettingsMenuButton.js +0 -43
- package/components/control-bar/SubtitleLanguagesMenuButton.js +0 -174
- package/components/control-bar/VolumeMenuButton.js +0 -134
- package/components/control-bar/ZoomMenuButton.js +0 -116
- package/components/marking-controls/MarkInControl.js +0 -140
- package/components/marking-controls/MarkOutControl.js +0 -155
- package/components/marking-controls/MarkingAddButton.js +0 -94
- package/components/marking-controls/MarkingControl.js +0 -135
- package/components/marking-controls/MarkingDeleteButton.js +0 -84
- package/components/marking-controls/MarkingDuration.js +0 -77
- package/components/marking-controls/MarkingPreview.js +0 -86
- package/components/progress-bar/AudioWaveform.js +0 -144
- package/components/progress-bar/LoadProgressBar.js +0 -90
- package/components/progress-bar/MouseTimeDisplay.js +0 -53
- package/components/progress-bar/PlayProgressBar.js +0 -79
- package/components/progress-bar/ProgressControl.js +0 -222
- package/components/progress-bar/SeekBar.js +0 -261
- package/components/progress-bar/Timeline.js +0 -134
- package/components/settings-menu-control/PlaybackRateControl.js +0 -147
- package/components/settings-menu-control/SafeAreaControl.js +0 -92
- package/components/settings-menu-control/SettingsMenu.js +0 -68
- package/components/settings-menu-control/SubtitleControl.js +0 -1
- package/components/time-controls/CurrentTimeDisplay.js +0 -53
- package/components/time-controls/DurationDisplay.js +0 -51
- package/components/time-controls/TimeDivider.js +0 -41
- package/components/volume-control/VolumeBar.js +0 -216
- package/components/volume-control/VolumeControl.js +0 -35
- package/components/volume-control/VolumeLevel.js +0 -78
- package/components/zoom-control/ZoomBar.js +0 -189
- package/components/zoom-control/ZoomLevel.js +0 -68
- package/reducers/index.js +0 -23
- package/reducers/operation.js +0 -36
- package/reducers/player.js +0 -222
- package/utils/browser.js +0 -29
- package/utils/fullscreen.js +0 -73
package/components/Slider.js
DELETED
|
@@ -1,317 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
8
|
-
|
|
9
|
-
var _propTypes = require('prop-types');
|
|
10
|
-
|
|
11
|
-
var _react = require('react');
|
|
12
|
-
|
|
13
|
-
var _react2 = _interopRequireDefault(_react);
|
|
14
|
-
|
|
15
|
-
var _reactDom = require('react-dom');
|
|
16
|
-
|
|
17
|
-
var _styledComponents = require('styled-components');
|
|
18
|
-
|
|
19
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
20
|
-
|
|
21
|
-
var _colors = require('../colors');
|
|
22
|
-
|
|
23
|
-
var _colors2 = _interopRequireDefault(_colors);
|
|
24
|
-
|
|
25
|
-
var _dom = require('../utils/dom');
|
|
26
|
-
|
|
27
|
-
var Dom = _interopRequireWildcard(_dom);
|
|
28
|
-
|
|
29
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
|
|
30
|
-
|
|
31
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
32
|
-
|
|
33
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
34
|
-
|
|
35
|
-
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
36
|
-
|
|
37
|
-
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; }
|
|
38
|
-
|
|
39
|
-
var propTypes = {
|
|
40
|
-
onMouseDown: _propTypes.PropTypes.func,
|
|
41
|
-
onMouseMove: _propTypes.PropTypes.func,
|
|
42
|
-
stepForward: _propTypes.PropTypes.func,
|
|
43
|
-
stepBack: _propTypes.PropTypes.func,
|
|
44
|
-
sliderActive: _propTypes.PropTypes.func,
|
|
45
|
-
sliderInactive: _propTypes.PropTypes.func,
|
|
46
|
-
onMouseUp: _propTypes.PropTypes.func,
|
|
47
|
-
onFocus: _propTypes.PropTypes.func,
|
|
48
|
-
onBlur: _propTypes.PropTypes.func,
|
|
49
|
-
onClick: _propTypes.PropTypes.func,
|
|
50
|
-
getPercent: _propTypes.PropTypes.func,
|
|
51
|
-
vertical: _propTypes.PropTypes.bool,
|
|
52
|
-
children: _propTypes.PropTypes.node,
|
|
53
|
-
label: _propTypes.PropTypes.string,
|
|
54
|
-
valuenow: _propTypes.PropTypes.string,
|
|
55
|
-
valuetext: _propTypes.PropTypes.string
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
var defaultProps = {
|
|
59
|
-
onMouseDown: null,
|
|
60
|
-
onMouseMove: null,
|
|
61
|
-
stepForward: null,
|
|
62
|
-
stepBack: null,
|
|
63
|
-
sliderActive: null,
|
|
64
|
-
sliderInactive: null,
|
|
65
|
-
onMouseUp: null,
|
|
66
|
-
onFocus: null,
|
|
67
|
-
onBlur: null,
|
|
68
|
-
onClick: null,
|
|
69
|
-
getPercent: null,
|
|
70
|
-
vertical: false,
|
|
71
|
-
children: null,
|
|
72
|
-
label: '',
|
|
73
|
-
valuenow: '',
|
|
74
|
-
valuetext: ''
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
var SliderBlock = _styledComponents2.default.div.withConfig({
|
|
78
|
-
displayName: 'Slider__SliderBlock',
|
|
79
|
-
componentId: 'sc-i91ua7-0'
|
|
80
|
-
})(['position:relative;z-index:2;width:100%;height:100%;background:', ';'], _colors2.default.dark.base);
|
|
81
|
-
|
|
82
|
-
var Slider = function (_Component) {
|
|
83
|
-
_inherits(Slider, _Component);
|
|
84
|
-
|
|
85
|
-
function Slider(props, context) {
|
|
86
|
-
_classCallCheck(this, Slider);
|
|
87
|
-
|
|
88
|
-
var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props, context));
|
|
89
|
-
|
|
90
|
-
_this.handleMouseDown = _this.handleMouseDown.bind(_this);
|
|
91
|
-
_this.handleMouseMove = _this.handleMouseMove.bind(_this);
|
|
92
|
-
_this.handleMouseUp = _this.handleMouseUp.bind(_this);
|
|
93
|
-
_this.handleFocus = _this.handleFocus.bind(_this);
|
|
94
|
-
_this.handleBlur = _this.handleBlur.bind(_this);
|
|
95
|
-
_this.handleClick = _this.handleClick.bind(_this);
|
|
96
|
-
_this.handleKeyPress = _this.handleKeyPress.bind(_this);
|
|
97
|
-
_this.stepForward = _this.stepForward.bind(_this);
|
|
98
|
-
_this.stepBack = _this.stepBack.bind(_this);
|
|
99
|
-
_this.calculateDistance = _this.calculateDistance.bind(_this);
|
|
100
|
-
_this.getProgress = _this.getProgress.bind(_this);
|
|
101
|
-
_this.renderChildren = _this.renderChildren.bind(_this);
|
|
102
|
-
|
|
103
|
-
_this.state = {
|
|
104
|
-
// active: false,
|
|
105
|
-
};
|
|
106
|
-
return _this;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
_createClass(Slider, [{
|
|
110
|
-
key: 'getProgress',
|
|
111
|
-
value: function getProgress() {
|
|
112
|
-
var getPercent = this.props.getPercent;
|
|
113
|
-
|
|
114
|
-
if (!getPercent) {
|
|
115
|
-
return 0;
|
|
116
|
-
}
|
|
117
|
-
var progress = getPercent();
|
|
118
|
-
|
|
119
|
-
// Protect against no duration and other division issues
|
|
120
|
-
if (typeof progress !== 'number' || progress < 0 || progress === Infinity) {
|
|
121
|
-
progress = 0;
|
|
122
|
-
}
|
|
123
|
-
return progress;
|
|
124
|
-
}
|
|
125
|
-
}, {
|
|
126
|
-
key: 'handleMouseDown',
|
|
127
|
-
value: function handleMouseDown(event) {
|
|
128
|
-
var _props = this.props,
|
|
129
|
-
onMouseDown = _props.onMouseDown,
|
|
130
|
-
sliderActive = _props.sliderActive;
|
|
131
|
-
/*
|
|
132
|
-
* event.preventDefault();
|
|
133
|
-
* event.stopPropagation();
|
|
134
|
-
*/
|
|
135
|
-
|
|
136
|
-
document.addEventListener('mousemove', this.handleMouseMove, true);
|
|
137
|
-
document.addEventListener('mouseup', this.handleMouseUp, true);
|
|
138
|
-
document.addEventListener('touchmove', this.handleMouseMove, true);
|
|
139
|
-
document.addEventListener('touchend', this.handleMouseUp, true);
|
|
140
|
-
|
|
141
|
-
this.setState({
|
|
142
|
-
/*
|
|
143
|
-
* active: true,
|
|
144
|
-
* distance: 0
|
|
145
|
-
*/
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
if (sliderActive) {
|
|
149
|
-
sliderActive(event);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
this.handleMouseMove(event);
|
|
153
|
-
|
|
154
|
-
if (onMouseDown) {
|
|
155
|
-
onMouseDown(event);
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
}, {
|
|
159
|
-
key: 'handleMouseMove',
|
|
160
|
-
value: function handleMouseMove(event) {
|
|
161
|
-
var onMouseMove = this.props.onMouseMove;
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
if (onMouseMove) {
|
|
165
|
-
onMouseMove(event);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
}, {
|
|
169
|
-
key: 'handleMouseUp',
|
|
170
|
-
value: function handleMouseUp(event) {
|
|
171
|
-
var _props2 = this.props,
|
|
172
|
-
onMouseUp = _props2.onMouseUp,
|
|
173
|
-
sliderInactive = _props2.sliderInactive;
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
document.removeEventListener('mousemove', this.handleMouseMove, true);
|
|
177
|
-
document.removeEventListener('mouseup', this.handleMouseUp, true);
|
|
178
|
-
document.removeEventListener('touchmove', this.handleMouseMove, true);
|
|
179
|
-
document.removeEventListener('touchend', this.handleMouseUp, true);
|
|
180
|
-
|
|
181
|
-
this.setState({
|
|
182
|
-
// active: false
|
|
183
|
-
});
|
|
184
|
-
|
|
185
|
-
if (sliderInactive) {
|
|
186
|
-
sliderInactive(event);
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
if (onMouseUp) {
|
|
190
|
-
onMouseUp(event);
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}, {
|
|
194
|
-
key: 'handleFocus',
|
|
195
|
-
value: function handleFocus(e) {
|
|
196
|
-
var onFocus = this.props.onFocus;
|
|
197
|
-
|
|
198
|
-
document.addEventListener('keydown', this.handleKeyPress, true);
|
|
199
|
-
if (onFocus) {
|
|
200
|
-
onFocus(e);
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
}, {
|
|
204
|
-
key: 'handleBlur',
|
|
205
|
-
value: function handleBlur(e) {
|
|
206
|
-
var onBlur = this.props.onBlur;
|
|
207
|
-
|
|
208
|
-
document.removeEventListener('keydown', this.handleKeyPress, true);
|
|
209
|
-
if (onBlur) {
|
|
210
|
-
onBlur(e);
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
}, {
|
|
214
|
-
key: 'handleClick',
|
|
215
|
-
value: function handleClick(event) {
|
|
216
|
-
var onClick = this.props.onClick;
|
|
217
|
-
|
|
218
|
-
event.preventDefault();
|
|
219
|
-
// event.stopPropagation();
|
|
220
|
-
if (onClick) {
|
|
221
|
-
onClick(event);
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
}, {
|
|
225
|
-
key: 'handleKeyPress',
|
|
226
|
-
value: function handleKeyPress(event) {
|
|
227
|
-
if (event.which === 37 || event.which === 40) {
|
|
228
|
-
// Left and Down Arrows
|
|
229
|
-
event.preventDefault();
|
|
230
|
-
event.stopPropagation();
|
|
231
|
-
this.stepBack();
|
|
232
|
-
} else if (event.which === 38 || event.which === 39) {
|
|
233
|
-
// Up and Right Arrows
|
|
234
|
-
event.preventDefault();
|
|
235
|
-
event.stopPropagation();
|
|
236
|
-
this.stepForward();
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
}, {
|
|
240
|
-
key: 'stepForward',
|
|
241
|
-
value: function stepForward() {
|
|
242
|
-
var stepForward = this.props.stepForward;
|
|
243
|
-
|
|
244
|
-
if (stepForward) {
|
|
245
|
-
stepForward();
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
}, {
|
|
249
|
-
key: 'stepBack',
|
|
250
|
-
value: function stepBack() {
|
|
251
|
-
var stepBack = this.props.stepBack;
|
|
252
|
-
|
|
253
|
-
if (stepBack) {
|
|
254
|
-
stepBack();
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
}, {
|
|
258
|
-
key: 'calculateDistance',
|
|
259
|
-
value: function calculateDistance(event) {
|
|
260
|
-
var node = (0, _reactDom.findDOMNode)(this);
|
|
261
|
-
var position = Dom.getPointerPosition(node, event);
|
|
262
|
-
var vertical = this.props.vertical;
|
|
263
|
-
|
|
264
|
-
if (vertical) {
|
|
265
|
-
return position.y;
|
|
266
|
-
}
|
|
267
|
-
return position.x;
|
|
268
|
-
}
|
|
269
|
-
}, {
|
|
270
|
-
key: 'renderChildren',
|
|
271
|
-
value: function renderChildren() {
|
|
272
|
-
var progress = this.getProgress();
|
|
273
|
-
var percentage = (progress * 100).toFixed(2) + '%';
|
|
274
|
-
var children = this.props.children;
|
|
275
|
-
|
|
276
|
-
return _react2.default.Children.map(children, function (child) {
|
|
277
|
-
return _react2.default.cloneElement(child, { progress: progress, percentage: percentage });
|
|
278
|
-
});
|
|
279
|
-
}
|
|
280
|
-
}, {
|
|
281
|
-
key: 'render',
|
|
282
|
-
value: function render() {
|
|
283
|
-
var _props3 = this.props,
|
|
284
|
-
label = _props3.label,
|
|
285
|
-
valuenow = _props3.valuenow,
|
|
286
|
-
valuetext = _props3.valuetext;
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
return _react2.default.createElement(
|
|
290
|
-
SliderBlock,
|
|
291
|
-
{
|
|
292
|
-
tabIndex: '0',
|
|
293
|
-
onMouseDown: this.handleMouseDown,
|
|
294
|
-
onTouchStart: this.handleMouseDown,
|
|
295
|
-
onFocus: this.handleFocus,
|
|
296
|
-
onBlur: this.handleBlur,
|
|
297
|
-
onClick: this.handleClick,
|
|
298
|
-
'aria-label': label || '',
|
|
299
|
-
'aria-valuenow': valuenow || '',
|
|
300
|
-
'aria-valuetext': valuetext || '',
|
|
301
|
-
'aria-valuemin': 0,
|
|
302
|
-
'aria-valuemax': 100
|
|
303
|
-
},
|
|
304
|
-
this.renderChildren()
|
|
305
|
-
);
|
|
306
|
-
}
|
|
307
|
-
}]);
|
|
308
|
-
|
|
309
|
-
return Slider;
|
|
310
|
-
}(_react.Component);
|
|
311
|
-
|
|
312
|
-
exports.default = Slider;
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
Slider.propTypes = propTypes;
|
|
316
|
-
Slider.defaultProps = defaultProps;
|
|
317
|
-
Slider.displayName = 'Slider';
|
package/components/TagsBar.js
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
8
|
-
|
|
9
|
-
var _react = require('react');
|
|
10
|
-
|
|
11
|
-
var _react2 = _interopRequireDefault(_react);
|
|
12
|
-
|
|
13
|
-
var _propTypes = require('prop-types');
|
|
14
|
-
|
|
15
|
-
var _styledComponents = require('styled-components');
|
|
16
|
-
|
|
17
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
18
|
-
|
|
19
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
-
|
|
21
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
22
|
-
|
|
23
|
-
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
24
|
-
|
|
25
|
-
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; }
|
|
26
|
-
|
|
27
|
-
var propTypes = {
|
|
28
|
-
tagsMarker: _propTypes.PropTypes.instanceOf(Array),
|
|
29
|
-
player: _propTypes.PropTypes.instanceOf(Object),
|
|
30
|
-
actions: _propTypes.PropTypes.instanceOf(Object)
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
var TagsBlock = _styledComponents2.default.div.withConfig({
|
|
34
|
-
displayName: 'TagsBar__TagsBlock',
|
|
35
|
-
componentId: 'sc-n53sgs-0'
|
|
36
|
-
})(['width:100%;height:10px;position:absolute;bottom:40px;cursor:default;.marker{position:absolute;width:2px;height:100%;background:#00cec6;cursor:pointer;transition:transform 250ms ease-in-out;&:hover{transform:scale(2);}}']);
|
|
37
|
-
|
|
38
|
-
var TagsBar = function (_Component) {
|
|
39
|
-
_inherits(TagsBar, _Component);
|
|
40
|
-
|
|
41
|
-
function TagsBar(props) {
|
|
42
|
-
_classCallCheck(this, TagsBar);
|
|
43
|
-
|
|
44
|
-
var _this = _possibleConstructorReturn(this, (TagsBar.__proto__ || Object.getPrototypeOf(TagsBar)).call(this, props));
|
|
45
|
-
|
|
46
|
-
_this.getMarkerPosition = _this.getMarkerPosition.bind(_this);
|
|
47
|
-
return _this;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
_createClass(TagsBar, [{
|
|
51
|
-
key: 'getMarkerPosition',
|
|
52
|
-
value: function getMarkerPosition(timePos) {
|
|
53
|
-
var player = this.props.player;
|
|
54
|
-
|
|
55
|
-
var time = parseInt(timePos);
|
|
56
|
-
var percent = time / player.duration;
|
|
57
|
-
var left = (percent * 100).toFixed(2) + '%';
|
|
58
|
-
return percent >= 1 ? '100%' : left;
|
|
59
|
-
}
|
|
60
|
-
}, {
|
|
61
|
-
key: 'goToMarker',
|
|
62
|
-
value: function goToMarker(time) {
|
|
63
|
-
var actions = this.props.actions;
|
|
64
|
-
|
|
65
|
-
actions.seek(parseInt(time));
|
|
66
|
-
}
|
|
67
|
-
}, {
|
|
68
|
-
key: 'render',
|
|
69
|
-
value: function render() {
|
|
70
|
-
var _this2 = this;
|
|
71
|
-
|
|
72
|
-
var tagsMarker = this.props.tagsMarker;
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return _react2.default.createElement(
|
|
76
|
-
TagsBlock,
|
|
77
|
-
null,
|
|
78
|
-
tagsMarker.map(function (marker) {
|
|
79
|
-
return _react2.default.createElement('div', {
|
|
80
|
-
className: 'marker',
|
|
81
|
-
role: 'presentation',
|
|
82
|
-
key: marker.leftOffset,
|
|
83
|
-
onClick: function onClick() {
|
|
84
|
-
return _this2.goToMarker(marker.timeOffset);
|
|
85
|
-
},
|
|
86
|
-
style: { left: _this2.getMarkerPosition(marker.timeOffset) }
|
|
87
|
-
});
|
|
88
|
-
})
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
}]);
|
|
92
|
-
|
|
93
|
-
return TagsBar;
|
|
94
|
-
}(_react.Component);
|
|
95
|
-
|
|
96
|
-
exports.default = TagsBar;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
TagsBar.propTypes = propTypes;
|
|
100
|
-
TagsBar.displayName = 'TagsBar';
|