@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/utils/Menu.js
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = Menu;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _propTypes = require("prop-types");
|
|
10
|
+
var _components = require("@desynova-digital/components");
|
|
11
|
+
var _templateObject, _templateObject2;
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
14
|
+
var propTypes = {
|
|
15
|
+
children: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.element),
|
|
16
|
+
icon: _propTypes.PropTypes.string,
|
|
17
|
+
style: _propTypes.PropTypes.instanceOf(Object),
|
|
18
|
+
active: _propTypes.PropTypes.bool,
|
|
19
|
+
position: _propTypes.PropTypes.string
|
|
20
|
+
};
|
|
21
|
+
var defaultProps = {
|
|
22
|
+
position: 'center'
|
|
23
|
+
};
|
|
24
|
+
var MenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 20px;\n position: relative;\n &:hover {\n .menu-popup {\n visibility: visible;\n opacity: 1;\n }\n }\n .menu-popup {\n visibility: hidden;\n opacity: 0;\n position: absolute;\n bottom: 20px;\n padding-bottom: 16px;\n z-index: 10;\n transition: all 350ms ease-in-out;\n &.right {\n left: -10px;\n &:after {\n left: 15px;\n }\n }\n &.center {\n left: 50%;\n transform: translateX(-50%);\n &:after {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n &.left {\n right: -10px;\n &:after {\n right: 15px;\n }\n }\n &.active {\n visibility: visible;\n opacity: 1;\n }\n &:after {\n content: '';\n border-left: 6px solid transparent;\n position: absolute;\n border-right: 6px solid transparent;\n border-top: 6px solid rgb(0, 206, 198);\n bottom: 10px;\n }\n .menu-list {\n border-radius: 10px;\n background: #fff;\n min-width: 175px;\n max-height: 500px;\n transition: all 250ms ease-in-out;\n overflow: auto;\n max-height: 400px;\n }\n }\n"])));
|
|
25
|
+
var MenuIcon = (0, _styledComponents["default"])(_components.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: transparent;\n border: none;\n margin: 0px;\n &:hover,\n &:focus {\n background: transparent;\n svg path {\n fill: #00cec6;\n }\n }\n"])));
|
|
26
|
+
function Menu(_ref) {
|
|
27
|
+
var style = _ref.style,
|
|
28
|
+
children = _ref.children,
|
|
29
|
+
icon = _ref.icon,
|
|
30
|
+
active = _ref.active,
|
|
31
|
+
position = _ref.position;
|
|
32
|
+
return /*#__PURE__*/_react["default"].createElement(MenuContainer, {
|
|
33
|
+
style: style
|
|
34
|
+
}, /*#__PURE__*/_react["default"].createElement(MenuIcon, {
|
|
35
|
+
display: "rounded",
|
|
36
|
+
appearance: "cta",
|
|
37
|
+
icon: icon,
|
|
38
|
+
iconWidth: 16,
|
|
39
|
+
iconHeight: 16,
|
|
40
|
+
width: 20,
|
|
41
|
+
height: 20
|
|
42
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
43
|
+
className: active ? "menu-popup active ".concat(position) : "menu-popup ".concat(position)
|
|
44
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
45
|
+
className: "menu-list"
|
|
46
|
+
}, children)));
|
|
47
|
+
}
|
|
48
|
+
Menu.propTypes = propTypes;
|
|
49
|
+
Menu.defaultProps = defaultProps;
|
|
50
|
+
Menu.displayName = 'Menu';
|
package/utils/Menu.jsx
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { PropTypes } from 'prop-types';
|
|
4
|
+
import { Button } from '@desynova-digital/components';
|
|
5
|
+
|
|
6
|
+
const propTypes = {
|
|
7
|
+
children: PropTypes.arrayOf(PropTypes.element),
|
|
8
|
+
icon: PropTypes.string,
|
|
9
|
+
style: PropTypes.instanceOf(Object),
|
|
10
|
+
active: PropTypes.bool,
|
|
11
|
+
position: PropTypes.string
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const defaultProps = {
|
|
15
|
+
position: 'center'
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const MenuContainer = styled.div`
|
|
19
|
+
width: 20px;
|
|
20
|
+
position: relative;
|
|
21
|
+
&:hover {
|
|
22
|
+
.menu-popup {
|
|
23
|
+
visibility: visible;
|
|
24
|
+
opacity: 1;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
.menu-popup {
|
|
28
|
+
visibility: hidden;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
position: absolute;
|
|
31
|
+
bottom: 20px;
|
|
32
|
+
padding-bottom: 16px;
|
|
33
|
+
z-index: 10;
|
|
34
|
+
transition: all 350ms ease-in-out;
|
|
35
|
+
&.right {
|
|
36
|
+
left: -10px;
|
|
37
|
+
&:after {
|
|
38
|
+
left: 15px;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
&.center {
|
|
42
|
+
left: 50%;
|
|
43
|
+
transform: translateX(-50%);
|
|
44
|
+
&:after {
|
|
45
|
+
left: 50%;
|
|
46
|
+
transform: translateX(-50%);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
&.left {
|
|
50
|
+
right: -10px;
|
|
51
|
+
&:after {
|
|
52
|
+
right: 15px;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
&.active {
|
|
56
|
+
visibility: visible;
|
|
57
|
+
opacity: 1;
|
|
58
|
+
}
|
|
59
|
+
&:after {
|
|
60
|
+
content: '';
|
|
61
|
+
border-left: 6px solid transparent;
|
|
62
|
+
position: absolute;
|
|
63
|
+
border-right: 6px solid transparent;
|
|
64
|
+
border-top: 6px solid rgb(0, 206, 198);
|
|
65
|
+
bottom: 10px;
|
|
66
|
+
}
|
|
67
|
+
.menu-list {
|
|
68
|
+
border-radius: 10px;
|
|
69
|
+
background: #fff;
|
|
70
|
+
min-width: 175px;
|
|
71
|
+
max-height: 500px;
|
|
72
|
+
transition: all 250ms ease-in-out;
|
|
73
|
+
overflow: auto;
|
|
74
|
+
max-height: 400px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
`;
|
|
78
|
+
|
|
79
|
+
const MenuIcon = styled(Button)`
|
|
80
|
+
background: transparent;
|
|
81
|
+
border: none;
|
|
82
|
+
margin: 0px;
|
|
83
|
+
&:hover,
|
|
84
|
+
&:focus {
|
|
85
|
+
background: transparent;
|
|
86
|
+
svg path {
|
|
87
|
+
fill: #00cec6;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
`;
|
|
91
|
+
|
|
92
|
+
export default function Menu({ style, children, icon, active, position }) {
|
|
93
|
+
return (
|
|
94
|
+
<MenuContainer style={style}>
|
|
95
|
+
<MenuIcon display="rounded" appearance="cta" icon={icon} iconWidth={16} iconHeight={16} width={20} height={20} />
|
|
96
|
+
<div className={active ? `menu-popup active ${position}` : `menu-popup ${position}`}>
|
|
97
|
+
<div className="menu-list">{children}</div>
|
|
98
|
+
</div>
|
|
99
|
+
</MenuContainer>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
Menu.propTypes = propTypes;
|
|
104
|
+
Menu.defaultProps = defaultProps;
|
|
105
|
+
Menu.displayName = 'Menu';
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports["default"] = void 0;
|
|
6
7
|
var colors = {
|
|
7
8
|
common: {
|
|
8
9
|
base: {
|
|
@@ -10,22 +11,22 @@ var colors = {
|
|
|
10
11
|
black: '#000000',
|
|
11
12
|
dark: '#303f51',
|
|
12
13
|
light: '#FFF',
|
|
13
|
-
default: '#f5f5f5',
|
|
14
|
+
"default": '#f5f5f5',
|
|
14
15
|
transparent: '#0000004D'
|
|
15
16
|
},
|
|
16
17
|
text: {
|
|
17
|
-
default: '#212121',
|
|
18
|
+
"default": '#212121',
|
|
18
19
|
inputs: '#555',
|
|
19
20
|
secondary: '#757575',
|
|
20
21
|
subtle: '#BDBDBD',
|
|
21
22
|
error: '#FF0000'
|
|
22
23
|
},
|
|
23
|
-
break: {
|
|
24
|
+
"break": {
|
|
24
25
|
border: '#dddddd',
|
|
25
26
|
text: '#666666'
|
|
26
27
|
},
|
|
27
28
|
icon: {
|
|
28
|
-
default: '#FFFFFF'
|
|
29
|
+
"default": '#FFFFFF'
|
|
29
30
|
},
|
|
30
31
|
input: {
|
|
31
32
|
background: '#FFF',
|
|
@@ -56,7 +57,7 @@ var colors = {
|
|
|
56
57
|
shadowDisabled: 'rgba(0,0,0,0.0)'
|
|
57
58
|
},
|
|
58
59
|
video: {
|
|
59
|
-
default: {
|
|
60
|
+
"default": {
|
|
60
61
|
base: '#00cec6',
|
|
61
62
|
buttonGradient: 'linear-gradient(to right, #00c8e799, #00e6b999)'
|
|
62
63
|
},
|
|
@@ -109,7 +110,7 @@ var colors = {
|
|
|
109
110
|
dark: {
|
|
110
111
|
base: '#121d29',
|
|
111
112
|
status: {
|
|
112
|
-
default: {
|
|
113
|
+
"default": {
|
|
113
114
|
background: '#303D55',
|
|
114
115
|
text: '#FFFFFF'
|
|
115
116
|
},
|
|
@@ -174,7 +175,7 @@ var colors = {
|
|
|
174
175
|
}
|
|
175
176
|
},
|
|
176
177
|
button: {
|
|
177
|
-
default: {
|
|
178
|
+
"default": {
|
|
178
179
|
background: '#F1F1F1',
|
|
179
180
|
backgroundHover: '#56BFBA',
|
|
180
181
|
backgroundFocus: '#56BFBA',
|
|
@@ -273,7 +274,7 @@ var colors = {
|
|
|
273
274
|
light: {
|
|
274
275
|
base: '#ffffff',
|
|
275
276
|
status: {
|
|
276
|
-
default: {
|
|
277
|
+
"default": {
|
|
277
278
|
background: '#F5F5F5',
|
|
278
279
|
text: '#FFFFFF'
|
|
279
280
|
},
|
|
@@ -321,7 +322,7 @@ var colors = {
|
|
|
321
322
|
}
|
|
322
323
|
},
|
|
323
324
|
button: {
|
|
324
|
-
default: {
|
|
325
|
+
"default": {
|
|
325
326
|
background: '#ffffff',
|
|
326
327
|
backgroundHover: '#33D7CE',
|
|
327
328
|
text: '#666666',
|
|
@@ -430,7 +431,6 @@ var colors = {
|
|
|
430
431
|
monthChangeIconBackground: '#eeeeee',
|
|
431
432
|
monthChangeIconBackgroundHover: '#31cfc6',
|
|
432
433
|
dayNameColor: '#666666',
|
|
433
|
-
|
|
434
434
|
dayDefaultColor: '#666666',
|
|
435
435
|
dayDisabledColor: '#c1c1c1',
|
|
436
436
|
dayOtherMonthDisabledColor: '#dedede',
|
|
@@ -443,5 +443,5 @@ var colors = {
|
|
|
443
443
|
}
|
|
444
444
|
}
|
|
445
445
|
};
|
|
446
|
-
|
|
447
|
-
exports
|
|
446
|
+
var _default = colors;
|
|
447
|
+
exports["default"] = _default;
|
package/utils/dom.js
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.blurNode = blurNode;
|
|
6
7
|
exports.findElPosition = findElPosition;
|
|
7
8
|
exports.getPointerPosition = getPointerPosition;
|
|
8
|
-
exports.blurNode = blurNode;
|
|
9
9
|
exports.hasClass = hasClass;
|
|
10
|
-
|
|
11
|
-
var _reactDom = require('react-dom');
|
|
12
|
-
|
|
10
|
+
var _reactDom = require("react-dom");
|
|
13
11
|
/**
|
|
14
12
|
* Offset Left
|
|
15
13
|
* getBoundingClientRect technique from
|
|
@@ -20,26 +18,22 @@ var _reactDom = require('react-dom');
|
|
|
20
18
|
* @return {Object}
|
|
21
19
|
*/
|
|
22
20
|
function findElPosition(el) {
|
|
23
|
-
var box
|
|
24
|
-
|
|
21
|
+
var box;
|
|
25
22
|
if (el.getBoundingClientRect && el.parentNode) {
|
|
26
23
|
box = el.getBoundingClientRect();
|
|
27
24
|
}
|
|
28
|
-
|
|
29
25
|
if (!box) {
|
|
30
26
|
return {
|
|
31
27
|
left: 0,
|
|
32
28
|
top: 0
|
|
33
29
|
};
|
|
34
30
|
}
|
|
35
|
-
|
|
36
31
|
var docEl = document.documentElement;
|
|
37
|
-
var
|
|
38
|
-
|
|
32
|
+
var _document = document,
|
|
33
|
+
body = _document.body;
|
|
39
34
|
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
|
40
35
|
var scrollLeft = window.pageXOffset || body.scrollLeft;
|
|
41
36
|
var left = box.left + scrollLeft - clientLeft;
|
|
42
|
-
|
|
43
37
|
var clientTop = docEl.clientTop || body.clientTop || 0;
|
|
44
38
|
var scrollTop = window.pageYOffset || body.scrollTop;
|
|
45
39
|
var top = box.top + scrollTop - clientTop;
|
|
@@ -67,20 +61,16 @@ function getPointerPosition(el, event) {
|
|
|
67
61
|
var box = findElPosition(el);
|
|
68
62
|
var boxW = el.offsetWidth;
|
|
69
63
|
var boxH = el.offsetHeight;
|
|
70
|
-
|
|
71
64
|
var boxY = box.top;
|
|
72
65
|
var boxX = box.left;
|
|
73
66
|
var pageY = event.pageY;
|
|
74
67
|
var pageX = event.pageX;
|
|
75
|
-
|
|
76
68
|
if (event.changedTouches) {
|
|
77
69
|
pageX = event.changedTouches[0].pageX;
|
|
78
70
|
pageY = event.changedTouches[0].pageY;
|
|
79
71
|
}
|
|
80
|
-
|
|
81
72
|
position.y = Math.max(0, Math.min(1, (boxY - pageY + boxH) / boxH));
|
|
82
73
|
position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
|
|
83
|
-
|
|
84
74
|
return position;
|
|
85
75
|
}
|
|
86
76
|
|
package/utils/index.js
CHANGED
|
@@ -1,25 +1,52 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.mediaProperties = undefined;
|
|
7
|
-
|
|
8
|
-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
9
|
-
|
|
10
|
-
exports.secondsToTime = secondsToTime;
|
|
11
|
-
exports.timeToSeconds = timeToSeconds;
|
|
12
6
|
exports.formatTime = formatTime;
|
|
13
|
-
exports.isVideoChild = isVideoChild;
|
|
14
7
|
exports.mergeAndSortChildren = mergeAndSortChildren;
|
|
15
|
-
exports.
|
|
16
|
-
exports.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
function
|
|
8
|
+
exports.secondsToTime = secondsToTime;
|
|
9
|
+
exports.timeToSeconds = timeToSeconds;
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
12
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
14
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
16
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
17
|
+
/*
|
|
18
|
+
* merge default children
|
|
19
|
+
* sort them by `order` property
|
|
20
|
+
* filter them by `disabled` property
|
|
21
|
+
*/
|
|
22
|
+
function mergeAndSortChildren(defaultChildren) {
|
|
23
|
+
var _children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
24
|
+
var _parentProps = arguments.length > 2 ? arguments[2] : undefined;
|
|
25
|
+
var defaultOrder = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
|
|
26
|
+
/*
|
|
27
|
+
* const children = React.Children.toArray(_children);
|
|
28
|
+
* const parentProps = { ..._parentProps };
|
|
29
|
+
*/
|
|
30
|
+
return _children.filter(function (e) {
|
|
31
|
+
return !e.props.disabled;
|
|
32
|
+
}) // filter the disabled components
|
|
33
|
+
.concat(defaultChildren.filter(function (c) {
|
|
34
|
+
return !find(children, function (component) {
|
|
35
|
+
return isTypeEqual(component, c);
|
|
36
|
+
});
|
|
37
|
+
})).map(function (element) {
|
|
38
|
+
var defaultComponent = find(defaultChildren, function (c) {
|
|
39
|
+
return isTypeEqual(c, element);
|
|
40
|
+
});
|
|
41
|
+
delete parentProps.order;
|
|
42
|
+
var defaultProps = defaultComponent ? defaultComponent.props : {};
|
|
43
|
+
var props = _objectSpread(_objectSpread(_objectSpread({}, parentProps), defaultProps), element.props);
|
|
44
|
+
var e = _react.React.cloneElement(element, props, element.props.children);
|
|
45
|
+
return e;
|
|
46
|
+
}).sort(function (a, b) {
|
|
47
|
+
return (a.props.order || defaultOrder) - (b.props.order || defaultOrder);
|
|
48
|
+
});
|
|
49
|
+
}
|
|
23
50
|
|
|
24
51
|
/**
|
|
25
52
|
* @file seconds-to-time.js
|
|
@@ -37,10 +64,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
37
64
|
*/
|
|
38
65
|
function secondsToTime() {
|
|
39
66
|
var _seconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
40
|
-
|
|
41
|
-
var
|
|
42
|
-
var initialTime = arguments[2];
|
|
43
|
-
|
|
67
|
+
var frameRate = arguments.length > 1 ? arguments[1] : undefined;
|
|
68
|
+
var initialTime = arguments.length > 2 ? arguments[2] : undefined;
|
|
44
69
|
var time = '00:00:00:00';
|
|
45
70
|
_seconds = parseFloat(_seconds);
|
|
46
71
|
if (_seconds > -1) {
|
|
@@ -49,25 +74,21 @@ function secondsToTime() {
|
|
|
49
74
|
}
|
|
50
75
|
var date = new Date(null);
|
|
51
76
|
var currentFrame = Math.floor(_seconds * frameRate % frameRate);
|
|
52
|
-
var paddedFrame = currentFrame < 10 ?
|
|
77
|
+
var paddedFrame = currentFrame < 10 ? "0".concat(currentFrame) : currentFrame;
|
|
53
78
|
date.setSeconds(_seconds);
|
|
54
79
|
var timeString = date.toISOString().substr(11, 8);
|
|
55
|
-
var timeWithFrame = timeString
|
|
80
|
+
var timeWithFrame = "".concat(timeString, ":").concat(paddedFrame);
|
|
56
81
|
time = timeWithFrame;
|
|
57
82
|
}
|
|
58
|
-
|
|
59
83
|
return time;
|
|
60
84
|
}
|
|
61
|
-
|
|
62
85
|
function timeToSeconds() {
|
|
63
86
|
var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '00:00:00:00';
|
|
64
|
-
var frameRate = arguments[1];
|
|
65
|
-
|
|
87
|
+
var frameRate = arguments.length > 1 ? arguments[1] : undefined;
|
|
66
88
|
var timeObj = time.split(':'); // split it at the colons
|
|
67
89
|
|
|
68
90
|
// minutes are worth 60 seconds. Hours are worth 60 minutes.
|
|
69
91
|
var seconds = +timeObj[0] * 60 * 60 + +timeObj[1] * 60 + +timeObj[2];
|
|
70
|
-
|
|
71
92
|
if (timeObj.length > 3 && frameRate) {
|
|
72
93
|
var frames = timeObj[3] * (1 / frameRate);
|
|
73
94
|
seconds += frames;
|
|
@@ -91,7 +112,6 @@ function timeToSeconds() {
|
|
|
91
112
|
function formatTime() {
|
|
92
113
|
var seconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
93
114
|
var guide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : seconds;
|
|
94
|
-
|
|
95
115
|
var s = Math.floor(seconds % 60);
|
|
96
116
|
var m = Math.floor(seconds / 60 % 60);
|
|
97
117
|
var h = Math.floor(seconds / 3600);
|
|
@@ -110,105 +130,15 @@ function formatTime() {
|
|
|
110
130
|
}
|
|
111
131
|
|
|
112
132
|
// Check if we need to show hours
|
|
113
|
-
h = h > 0 || gh > 0 ? h
|
|
133
|
+
h = h > 0 || gh > 0 ? "".concat(h, ":") : '';
|
|
114
134
|
|
|
115
135
|
/*
|
|
116
136
|
* If hours are showing, we may need to add a leading zero.
|
|
117
137
|
* Always show at least one digit of minutes.
|
|
118
138
|
*/
|
|
119
|
-
m = ((h || gm >= 10) && m < 10 ?
|
|
139
|
+
m = "".concat((h || gm >= 10) && m < 10 ? "0".concat(m) : m, ":");
|
|
120
140
|
|
|
121
141
|
// Check if leading zero is need for seconds
|
|
122
|
-
s = s < 10 ?
|
|
123
|
-
|
|
142
|
+
s = s < 10 ? "0".concat(s) : s;
|
|
124
143
|
return h + m + s;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
/*
|
|
128
|
-
* Check if the element belongs to a video element
|
|
129
|
-
* only accept <source />, <track />,
|
|
130
|
-
* <MyComponent isVideoChild />
|
|
131
|
-
* elements
|
|
132
|
-
*/
|
|
133
|
-
function isVideoChild(c) {
|
|
134
|
-
if (c.props && c.props.isVideoChild) {
|
|
135
|
-
return true;
|
|
136
|
-
}
|
|
137
|
-
return c.type === 'source' || c.type === 'track';
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
var find = function find(elements, func) {
|
|
141
|
-
return elements.filter(func)[0];
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
// check if two components are the same type
|
|
145
|
-
var isTypeEqual = function isTypeEqual(component1, component2) {
|
|
146
|
-
var type1 = component1.type;
|
|
147
|
-
var type2 = component2.type;
|
|
148
|
-
|
|
149
|
-
if (typeof type1 === 'string' || typeof type2 === 'string') {
|
|
150
|
-
return type1 === type2;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
if (typeof type1 === 'function' && typeof type2 === 'function') {
|
|
154
|
-
return type1.displayName === type2.displayName;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
return false;
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
/*
|
|
161
|
-
* merge default children
|
|
162
|
-
* sort them by `order` property
|
|
163
|
-
* filter them by `disabled` property
|
|
164
|
-
*/
|
|
165
|
-
function mergeAndSortChildren(defaultChildren, _children, _parentProps) {
|
|
166
|
-
var defaultOrder = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
|
|
167
|
-
|
|
168
|
-
var children = _react2.default.Children.toArray(_children);
|
|
169
|
-
var parentProps = _extends({}, _parentProps);
|
|
170
|
-
return children.filter(function (e) {
|
|
171
|
-
return !e.props.disabled;
|
|
172
|
-
}) // filter the disabled components
|
|
173
|
-
.concat(defaultChildren.filter(function (c) {
|
|
174
|
-
return !find(children, function (component) {
|
|
175
|
-
return isTypeEqual(component, c);
|
|
176
|
-
});
|
|
177
|
-
})).map(function (element) {
|
|
178
|
-
var defaultComponent = find(defaultChildren, function (c) {
|
|
179
|
-
return isTypeEqual(c, element);
|
|
180
|
-
});
|
|
181
|
-
delete parentProps.order;
|
|
182
|
-
var defaultProps = defaultComponent ? defaultComponent.props : {};
|
|
183
|
-
var props = _extends({}, parentProps, defaultProps, element.props);
|
|
184
|
-
var e = _react2.default.cloneElement(element, props, element.props.children);
|
|
185
|
-
return e;
|
|
186
|
-
}).sort(function (a, b) {
|
|
187
|
-
return (a.props.order || defaultOrder) - (b.props.order || defaultOrder);
|
|
188
|
-
});
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
/**
|
|
192
|
-
* Temporary utility for generating the warnings
|
|
193
|
-
*/
|
|
194
|
-
function deprecatedWarning(oldMethodCall, newMethodCall) {
|
|
195
|
-
// eslint-disable-next-line no-console
|
|
196
|
-
console.warn('WARNING: ' + oldMethodCall + ' will be deprecated soon!\n Please use ' + newMethodCall + ' instead.');
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
function throttle(callback, limit) {
|
|
200
|
-
var _arguments = arguments;
|
|
201
|
-
|
|
202
|
-
var wait = false;
|
|
203
|
-
return function () {
|
|
204
|
-
if (!wait) {
|
|
205
|
-
callback.apply(undefined, _arguments);
|
|
206
|
-
wait = true;
|
|
207
|
-
setTimeout(function () {
|
|
208
|
-
wait = false;
|
|
209
|
-
}, limit);
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
var mediaProperties = exports.mediaProperties = ['error', 'src', 'srcObject', 'currentSrc', 'crossOrigin', 'networkState', 'preload', 'buffered', 'readyState', 'seeking', 'currentTime', 'duration', 'paused', 'defaultPlaybackRate', 'playbackRate', 'played', 'seekable', 'ended', 'autoplay', 'loop', 'mediaGroup', 'controller', 'controls', 'volume', 'muted', 'defaultMuted', 'audioTracks', 'videoTracks', 'textTracks', 'width', 'height', 'videoWidth', 'videoHeight', 'poster'];
|
|
144
|
+
}
|
package/Manager.js
DELETED
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
8
|
-
|
|
9
|
-
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; }; }();
|
|
10
|
-
|
|
11
|
-
var _redux = require('redux');
|
|
12
|
-
|
|
13
|
-
var _reducers = require('./reducers');
|
|
14
|
-
|
|
15
|
-
var _reducers2 = _interopRequireDefault(_reducers);
|
|
16
|
-
|
|
17
|
-
var _player = require('./actions/player');
|
|
18
|
-
|
|
19
|
-
var playerActions = _interopRequireWildcard(_player);
|
|
20
|
-
|
|
21
|
-
var _video = require('./actions/video');
|
|
22
|
-
|
|
23
|
-
var videoActions = _interopRequireWildcard(_video);
|
|
24
|
-
|
|
25
|
-
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; } }
|
|
26
|
-
|
|
27
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
28
|
-
|
|
29
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
30
|
-
|
|
31
|
-
var Manager = function () {
|
|
32
|
-
function Manager(store) {
|
|
33
|
-
_classCallCheck(this, Manager);
|
|
34
|
-
|
|
35
|
-
this.store = store || (0, _redux.createStore)(_reducers2.default);
|
|
36
|
-
|
|
37
|
-
this.video = null;
|
|
38
|
-
this.rootElement = null;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
_createClass(Manager, [{
|
|
42
|
-
key: 'getActions',
|
|
43
|
-
value: function getActions() {
|
|
44
|
-
var manager = this;
|
|
45
|
-
var dispatch = this.store.dispatch;
|
|
46
|
-
|
|
47
|
-
var actions = _extends({}, playerActions, videoActions);
|
|
48
|
-
|
|
49
|
-
function bindActionCreator(actionCreator) {
|
|
50
|
-
return function bindAction() {
|
|
51
|
-
// eslint-disable-next-line prefer-rest-params
|
|
52
|
-
var action = actionCreator.apply(manager, arguments);
|
|
53
|
-
if (typeof action !== 'undefined') {
|
|
54
|
-
dispatch(action);
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
return Object.keys(actions).filter(function (key) {
|
|
60
|
-
return typeof actions[key] === 'function';
|
|
61
|
-
}).reduce(function (boundActions, key) {
|
|
62
|
-
boundActions[key] = bindActionCreator(actions[key]);
|
|
63
|
-
return boundActions;
|
|
64
|
-
}, {});
|
|
65
|
-
}
|
|
66
|
-
}, {
|
|
67
|
-
key: 'getState',
|
|
68
|
-
value: function getState() {
|
|
69
|
-
return this.store.getState();
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// subscribe state change
|
|
73
|
-
|
|
74
|
-
}, {
|
|
75
|
-
key: 'subscribeToStateChange',
|
|
76
|
-
value: function subscribeToStateChange(listener, getState) {
|
|
77
|
-
if (!getState) {
|
|
78
|
-
getState = this.getState.bind(this);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
var prevState = getState();
|
|
82
|
-
|
|
83
|
-
var handleChange = function handleChange() {
|
|
84
|
-
var state = getState();
|
|
85
|
-
if (state === prevState) {
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
var prevStateCopy = prevState;
|
|
89
|
-
prevState = state;
|
|
90
|
-
listener(state, prevStateCopy);
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
return this.store.subscribe(handleChange);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// subscribe to operation state change
|
|
97
|
-
|
|
98
|
-
}, {
|
|
99
|
-
key: 'subscribeToOperationStateChange',
|
|
100
|
-
value: function subscribeToOperationStateChange(listener) {
|
|
101
|
-
var _this = this;
|
|
102
|
-
|
|
103
|
-
return this.subscribeToStateChange(listener, function () {
|
|
104
|
-
return _this.getState().operation;
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// subscribe to player state change
|
|
109
|
-
|
|
110
|
-
}, {
|
|
111
|
-
key: 'subscribeToPlayerStateChange',
|
|
112
|
-
value: function subscribeToPlayerStateChange(listener) {
|
|
113
|
-
var _this2 = this;
|
|
114
|
-
|
|
115
|
-
return this.subscribeToStateChange(listener, function () {
|
|
116
|
-
return _this2.getState().player;
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
}]);
|
|
120
|
-
|
|
121
|
-
return Manager;
|
|
122
|
-
}();
|
|
123
|
-
|
|
124
|
-
exports.default = Manager;
|