@desynova-digital/player 3.9.7 → 3.9.9
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/Manager.js +26 -50
- package/actions/player.js +58 -89
- package/actions/video.js +70 -69
- package/colors.js +13 -13
- package/components/AudioMeter.js +138 -182
- package/components/BigPlayButton.js +48 -72
- package/components/ImageViewer.js +120 -165
- package/components/MarkerBar.js +64 -75
- package/components/Menu.js +30 -57
- package/components/Player.js +239 -357
- package/components/PlayerHeader.js +213 -348
- package/components/Playlist.js +50 -89
- package/components/PointersBar.js +131 -203
- package/components/PosterImage.js +12 -22
- package/components/SDOutline.js +32 -54
- package/components/Shortcut.js +135 -140
- package/components/Slider.js +85 -128
- package/components/TagsBar.js +45 -62
- package/components/Video.js +479 -655
- package/components/control-bar/AudioTracksMenuButton.js +63 -86
- package/components/control-bar/CameraButton.js +65 -76
- package/components/control-bar/CommentsButton.js +97 -136
- package/components/control-bar/ControlBar.js +171 -164
- package/components/control-bar/EditorControlMenuButton.js +180 -280
- package/components/control-bar/ForwardControl.js +7 -11
- package/components/control-bar/ForwardReplayControl.js +41 -55
- package/components/control-bar/FullscreenToggle.js +48 -67
- package/components/control-bar/PlayToggle.js +39 -54
- package/components/control-bar/ReplayControl.js +7 -11
- package/components/control-bar/SettingsMenuButton.js +19 -29
- package/components/control-bar/SubtitleLanguagesMenuButton.js +90 -119
- package/components/control-bar/SubtitleMovementMenu.js +128 -0
- package/components/control-bar/VolumeMenuButton.js +71 -96
- package/components/control-bar/ZoomMenuButton.js +57 -81
- package/components/marking-controls/MarkInControl.js +49 -65
- package/components/marking-controls/MarkOutControl.js +53 -69
- package/components/marking-controls/MarkingAddButton.js +41 -54
- package/components/marking-controls/MarkingControl.js +58 -107
- package/components/marking-controls/MarkingDeleteButton.js +39 -51
- package/components/marking-controls/MarkingDuration.js +23 -56
- package/components/marking-controls/MarkingPreview.js +39 -51
- package/components/progress-bar/AudioWaveform.js +48 -64
- package/components/progress-bar/LoadProgressBar.js +14 -37
- package/components/progress-bar/MouseTimeDisplay.js +14 -30
- package/components/progress-bar/PlayProgressBar.js +23 -41
- package/components/progress-bar/ProgressControl.js +82 -141
- package/components/progress-bar/SeekBar.js +101 -169
- package/components/progress-bar/Timeline.js +57 -81
- package/components/settings-menu-control/PlaybackRateControl.js +70 -115
- package/components/settings-menu-control/SafeAreaControl.js +49 -65
- package/components/settings-menu-control/SettingsMenu.js +26 -50
- package/components/time-controls/CurrentTimeDisplay.js +15 -34
- package/components/time-controls/DurationDisplay.js +14 -33
- package/components/time-controls/TimeDivider.js +12 -28
- package/components/volume-control/VolumeBar.js +84 -118
- package/components/volume-control/VolumeControl.js +7 -23
- package/components/volume-control/VolumeLevel.js +19 -36
- package/components/zoom-control/ZoomBar.js +79 -111
- package/components/zoom-control/ZoomLevel.js +24 -36
- package/index.js +204 -149
- package/package.json +5 -1
- package/reducers/index.js +12 -14
- package/reducers/operation.js +14 -14
- package/reducers/player.js +40 -42
- package/utils/browser.js +10 -5
- package/utils/dom.js +4 -15
- package/utils/fullscreen.js +24 -24
- package/utils/index.js +35 -46
|
@@ -1,72 +1,64 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
|
+
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); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
16
|
-
|
|
17
|
-
var _propTypes = require('prop-types');
|
|
18
|
-
|
|
19
|
-
var _components = require('@desynova-digital/components');
|
|
20
|
-
|
|
21
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
|
-
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _propTypes = require("prop-types");
|
|
11
|
+
var _components = require("@desynova-digital/components");
|
|
12
|
+
var _templateObject;
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
16
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
24
|
-
|
|
25
|
-
function
|
|
26
|
-
|
|
27
|
-
function
|
|
28
|
-
|
|
17
|
+
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, _toPropertyKey(descriptor.key), descriptor); } }
|
|
18
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
19
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
20
|
+
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); }
|
|
21
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
22
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
23
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
24
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
25
|
+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
26
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
27
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
28
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
29
29
|
var propTypes = {
|
|
30
30
|
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
31
31
|
leftMarker: _propTypes.PropTypes.number
|
|
32
32
|
};
|
|
33
|
-
|
|
34
|
-
var
|
|
35
|
-
displayName: 'MarkingPreview__PreviewButton',
|
|
36
|
-
componentId: 'sc-1gqitva-0'
|
|
37
|
-
})(['background:transparent;border-color:#afb2ba;border-width:1px;margin:0 5px 0 5px;&:hover,&:focus{background:transparent;border-color:#afb2ba;}', '{svg path{fill:#afb2ba;}}'], _components.Icon.Element);
|
|
38
|
-
|
|
39
|
-
var MarkingPreview = function (_Component) {
|
|
33
|
+
var PreviewButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: transparent;\n border-color: #afb2ba;\n border-width: 1px;\n margin: 0 5px 0 5px;\n &:hover,\n &:focus {\n background: transparent;\n border-color: #afb2ba;\n }\n\n ", " {\n svg path {\n fill: #afb2ba;\n }\n }\n"])), _components.Icon.Element);
|
|
34
|
+
var MarkingPreview = /*#__PURE__*/function (_Component) {
|
|
40
35
|
_inherits(MarkingPreview, _Component);
|
|
41
|
-
|
|
36
|
+
var _super = _createSuper(MarkingPreview);
|
|
42
37
|
function MarkingPreview(props) {
|
|
38
|
+
var _this;
|
|
43
39
|
_classCallCheck(this, MarkingPreview);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
_this.handleClick = _this.handleClick.bind(_this);
|
|
40
|
+
_this = _super.call(this, props);
|
|
41
|
+
_this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
|
|
48
42
|
return _this;
|
|
49
43
|
}
|
|
50
|
-
|
|
51
44
|
_createClass(MarkingPreview, [{
|
|
52
|
-
key:
|
|
45
|
+
key: "handleClick",
|
|
53
46
|
value: function handleClick() {
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
47
|
+
var _this$props = this.props,
|
|
48
|
+
leftMarker = _this$props.leftMarker,
|
|
49
|
+
actions = _this$props.actions;
|
|
58
50
|
actions.handleVideoPreview(true);
|
|
59
51
|
actions.seek(parseFloat(leftMarker));
|
|
60
52
|
actions.play();
|
|
61
53
|
actions.handleVideoRewind(false);
|
|
62
54
|
}
|
|
63
55
|
}, {
|
|
64
|
-
key:
|
|
56
|
+
key: "render",
|
|
65
57
|
value: function render() {
|
|
66
|
-
return
|
|
67
|
-
display:
|
|
68
|
-
appearance:
|
|
69
|
-
icon:
|
|
58
|
+
return /*#__PURE__*/_react["default"].createElement(PreviewButton, {
|
|
59
|
+
display: "rounded",
|
|
60
|
+
appearance: "cta",
|
|
61
|
+
icon: "play",
|
|
70
62
|
iconWidth: 6,
|
|
71
63
|
iconHeight: 8,
|
|
72
64
|
width: 20,
|
|
@@ -75,12 +67,8 @@ var MarkingPreview = function (_Component) {
|
|
|
75
67
|
});
|
|
76
68
|
}
|
|
77
69
|
}]);
|
|
78
|
-
|
|
79
70
|
return MarkingPreview;
|
|
80
71
|
}(_react.Component);
|
|
81
|
-
|
|
82
|
-
exports.default = MarkingPreview;
|
|
83
|
-
|
|
84
|
-
|
|
72
|
+
exports["default"] = MarkingPreview;
|
|
85
73
|
MarkingPreview.propTypes = propTypes;
|
|
86
74
|
MarkingPreview.displayName = 'MarkingPreview';
|
|
@@ -1,72 +1,64 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
|
+
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); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var _react2 = _interopRequireDefault(_react);
|
|
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; } /*global webkitAudioContext*/
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
var _templateObject;
|
|
12
|
+
/*global webkitAudioContext*/
|
|
26
13
|
/*eslint no-undef: ["error", { "typeof": true }] */
|
|
27
|
-
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
18
|
+
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, _toPropertyKey(descriptor.key), descriptor); } }
|
|
19
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
20
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
21
|
+
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); }
|
|
22
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
23
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
24
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
25
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
26
|
+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
27
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
28
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
29
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
28
30
|
var propTypes = {
|
|
29
31
|
audioSrc: _propTypes.PropTypes.string,
|
|
30
32
|
currentZoom: _propTypes.PropTypes.number
|
|
31
33
|
};
|
|
32
|
-
|
|
33
34
|
var defaultProps = {
|
|
34
35
|
audioSrc: null,
|
|
35
36
|
currentZoom: 1
|
|
36
37
|
};
|
|
37
|
-
|
|
38
|
-
var
|
|
39
|
-
displayName: 'AudioWaveform__AudioWaveformBlock',
|
|
40
|
-
componentId: 'sc-165e15b-0'
|
|
41
|
-
})(['position:absolute;width:100%;height:100%;left:0;right:0;canvas{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;}']);
|
|
42
|
-
|
|
43
|
-
var AudioWaveform = function (_Component) {
|
|
38
|
+
var AudioWaveformBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n right: 0;\n canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: #000;\n }\n"])));
|
|
39
|
+
var AudioWaveform = /*#__PURE__*/function (_Component) {
|
|
44
40
|
_inherits(AudioWaveform, _Component);
|
|
45
|
-
|
|
41
|
+
var _super = _createSuper(AudioWaveform);
|
|
46
42
|
function AudioWaveform(props, context) {
|
|
43
|
+
var _this;
|
|
47
44
|
_classCallCheck(this, AudioWaveform);
|
|
48
|
-
|
|
49
|
-
var _this = _possibleConstructorReturn(this, (AudioWaveform.__proto__ || Object.getPrototypeOf(AudioWaveform)).call(this, props, context));
|
|
50
|
-
|
|
45
|
+
_this = _super.call(this, props, context);
|
|
51
46
|
_this.state = {
|
|
52
47
|
buffer: null
|
|
53
48
|
};
|
|
54
|
-
_this.getWaveform = _this.getWaveform.bind(_this);
|
|
49
|
+
_this.getWaveform = _this.getWaveform.bind(_assertThisInitialized(_this));
|
|
55
50
|
return _this;
|
|
56
51
|
}
|
|
57
|
-
|
|
58
52
|
_createClass(AudioWaveform, [{
|
|
59
|
-
key:
|
|
53
|
+
key: "getWaveform",
|
|
60
54
|
value: function getWaveform() {
|
|
61
55
|
var _this2 = this;
|
|
62
|
-
|
|
63
56
|
var audioSrc = this.props.audioSrc;
|
|
64
|
-
|
|
65
57
|
var audioBlockWidth = this.canvasBlock.parentElement.offsetWidth;
|
|
66
58
|
var audioBlockHeight = this.canvasBlock.parentElement.offsetHeight;
|
|
67
59
|
this.canvasBlock.width = audioBlockWidth;
|
|
68
60
|
this.canvasBlock.height = audioBlockHeight;
|
|
69
|
-
var context
|
|
61
|
+
var context;
|
|
70
62
|
if (typeof AudioContext !== 'undefined') {
|
|
71
63
|
context = new AudioContext();
|
|
72
64
|
} else if (typeof webkitAudioContext !== 'undefined') {
|
|
@@ -78,18 +70,19 @@ var AudioWaveform = function (_Component) {
|
|
|
78
70
|
request.onload = function () {
|
|
79
71
|
context.decodeAudioData(request.response, function (buffer) {
|
|
80
72
|
var bufferData = buffer.getChannelData(0);
|
|
81
|
-
_this2.setState({
|
|
73
|
+
_this2.setState({
|
|
74
|
+
buffer: bufferData
|
|
75
|
+
});
|
|
82
76
|
_this2.generateWaveform();
|
|
83
77
|
});
|
|
84
78
|
};
|
|
85
79
|
request.send();
|
|
86
80
|
}
|
|
87
81
|
}, {
|
|
88
|
-
key:
|
|
82
|
+
key: "generateWaveform",
|
|
89
83
|
value: function generateWaveform() {
|
|
90
84
|
var currentZoom = this.props.currentZoom;
|
|
91
85
|
var buffer = this.state.buffer;
|
|
92
|
-
|
|
93
86
|
if (buffer.length) {
|
|
94
87
|
var parentWidth = this.canvasBlock.parentElement.offsetWidth;
|
|
95
88
|
this.canvasBlock.width = parentWidth * currentZoom;
|
|
@@ -112,33 +105,24 @@ var AudioWaveform = function (_Component) {
|
|
|
112
105
|
}
|
|
113
106
|
}
|
|
114
107
|
}, {
|
|
115
|
-
key:
|
|
108
|
+
key: "render",
|
|
116
109
|
value: function render() {
|
|
117
110
|
var _this3 = this;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
ref: function ref(c) {
|
|
129
|
-
_this3.canvasBlock = c;
|
|
130
|
-
}
|
|
131
|
-
})
|
|
132
|
-
);
|
|
111
|
+
return /*#__PURE__*/_react["default"].createElement(AudioWaveformBlock, {
|
|
112
|
+
ref: function ref(c) {
|
|
113
|
+
_this3.waveformBlock = c;
|
|
114
|
+
}
|
|
115
|
+
}, /*#__PURE__*/_react["default"].createElement("canvas", {
|
|
116
|
+
id: "visualisation",
|
|
117
|
+
ref: function ref(c) {
|
|
118
|
+
_this3.canvasBlock = c;
|
|
119
|
+
}
|
|
120
|
+
}));
|
|
133
121
|
}
|
|
134
122
|
}]);
|
|
135
|
-
|
|
136
123
|
return AudioWaveform;
|
|
137
124
|
}(_react.Component);
|
|
138
|
-
|
|
139
|
-
exports.default = AudioWaveform;
|
|
140
|
-
|
|
141
|
-
|
|
125
|
+
exports["default"] = AudioWaveform;
|
|
142
126
|
AudioWaveform.propTypes = propTypes;
|
|
143
127
|
AudioWaveform.defaultProps = defaultProps;
|
|
144
128
|
AudioWaveform.displayName = 'AudioWaveform';
|
|
@@ -1,23 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
var _react = require('react');
|
|
11
|
-
|
|
12
|
-
var _react2 = _interopRequireDefault(_react);
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
6
|
+
exports["default"] = LoadProgressBar;
|
|
7
|
+
var _propTypes = require("prop-types");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
16
10
|
var propTypes = {
|
|
17
11
|
duration: _propTypes.PropTypes.number,
|
|
18
12
|
buffered: _propTypes.PropTypes.instanceOf(Object)
|
|
19
13
|
};
|
|
20
|
-
|
|
21
14
|
var defaultProps = {
|
|
22
15
|
duration: 0,
|
|
23
16
|
buffered: {}
|
|
@@ -26,14 +19,12 @@ var defaultProps = {
|
|
|
26
19
|
// Shows load progress
|
|
27
20
|
function LoadProgressBar(_ref) {
|
|
28
21
|
var buffered = _ref.buffered,
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
duration = _ref.duration;
|
|
31
23
|
if (!buffered || !buffered.length) {
|
|
32
24
|
return null;
|
|
33
25
|
}
|
|
34
26
|
var bufferedEnd = buffered.end(buffered.length - 1);
|
|
35
27
|
var style = {};
|
|
36
|
-
|
|
37
28
|
if (bufferedEnd > duration) {
|
|
38
29
|
bufferedEnd = duration;
|
|
39
30
|
}
|
|
@@ -41,12 +32,11 @@ function LoadProgressBar(_ref) {
|
|
|
41
32
|
// get the percent width of a time compared to the total end
|
|
42
33
|
function percentify(time, end) {
|
|
43
34
|
var percent = time / end || 0; // no NaN
|
|
44
|
-
return (percent >= 1 ? 1 : percent) * 100
|
|
35
|
+
return "".concat((percent >= 1 ? 1 : percent) * 100, "%");
|
|
45
36
|
}
|
|
46
37
|
|
|
47
38
|
// the width of the progress bar
|
|
48
39
|
style.width = percentify(bufferedEnd, duration);
|
|
49
|
-
|
|
50
40
|
var parts = [];
|
|
51
41
|
|
|
52
42
|
// add child elements to represent the individual buffered time ranges
|
|
@@ -54,37 +44,24 @@ function LoadProgressBar(_ref) {
|
|
|
54
44
|
var start = buffered.start(i);
|
|
55
45
|
var end = buffered.end(i);
|
|
56
46
|
// set the percent based on the width of the progress bar (bufferedEnd)
|
|
57
|
-
var part =
|
|
47
|
+
var part = /*#__PURE__*/_react["default"].createElement("div", {
|
|
58
48
|
style: {
|
|
59
49
|
left: percentify(start, bufferedEnd),
|
|
60
50
|
width: percentify(end - start, bufferedEnd)
|
|
61
51
|
},
|
|
62
|
-
key:
|
|
52
|
+
key: "part-".concat(i)
|
|
63
53
|
});
|
|
64
54
|
parts.push(part);
|
|
65
55
|
}
|
|
66
|
-
|
|
67
56
|
if (parts.length === 0) {
|
|
68
57
|
parts = null;
|
|
69
58
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
'span',
|
|
76
|
-
{ className: 'video-react-control-text' },
|
|
77
|
-
_react2.default.createElement(
|
|
78
|
-
'span',
|
|
79
|
-
null,
|
|
80
|
-
'Loaded'
|
|
81
|
-
),
|
|
82
|
-
': 0%'
|
|
83
|
-
),
|
|
84
|
-
parts
|
|
85
|
-
);
|
|
59
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
60
|
+
style: style
|
|
61
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
62
|
+
className: "video-react-control-text"
|
|
63
|
+
}, /*#__PURE__*/_react["default"].createElement("span", null, "Loaded"), ": 0%"), parts);
|
|
86
64
|
}
|
|
87
|
-
|
|
88
65
|
LoadProgressBar.propTypes = propTypes;
|
|
89
66
|
LoadProgressBar.defaultProps = defaultProps;
|
|
90
67
|
LoadProgressBar.displayName = 'LoadProgressBar';
|
|
@@ -1,53 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
var _propTypes = require(
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
var _react2 = _interopRequireDefault(_react);
|
|
12
|
-
|
|
13
|
-
var _utils = require('../../utils');
|
|
14
|
-
|
|
15
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _propTypes = require("prop-types");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _utils = require("../../utils");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
11
|
var propTypes = {
|
|
18
12
|
duration: _propTypes.PropTypes.number,
|
|
19
13
|
mouseTime: _propTypes.PropTypes.instanceOf(Object)
|
|
20
14
|
};
|
|
21
|
-
|
|
22
15
|
var defaultProps = {
|
|
23
16
|
duration: 0,
|
|
24
17
|
mouseTime: {}
|
|
25
18
|
};
|
|
26
|
-
|
|
27
19
|
function MouseTimeDisplay(_ref) {
|
|
28
20
|
var duration = _ref.duration,
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
mouseTime = _ref.mouseTime;
|
|
31
22
|
if (!mouseTime.time) {
|
|
32
23
|
return null;
|
|
33
24
|
}
|
|
34
|
-
|
|
35
25
|
var time = (0, _utils.formatTime)(mouseTime.time, duration);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
{
|
|
40
|
-
style: {
|
|
41
|
-
left: mouseTime.position + 'px'
|
|
42
|
-
},
|
|
43
|
-
'data-current-time': time
|
|
26
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
27
|
+
style: {
|
|
28
|
+
left: "".concat(mouseTime.position, "px")
|
|
44
29
|
},
|
|
45
|
-
time
|
|
46
|
-
);
|
|
30
|
+
"data-current-time": time
|
|
31
|
+
}, time);
|
|
47
32
|
}
|
|
48
|
-
|
|
49
33
|
MouseTimeDisplay.propTypes = propTypes;
|
|
50
34
|
MouseTimeDisplay.defaultProps = defaultProps;
|
|
51
35
|
MouseTimeDisplay.displayName = 'MouseTimeDisplay';
|
|
52
|
-
|
|
53
|
-
exports
|
|
36
|
+
var _default = MouseTimeDisplay;
|
|
37
|
+
exports["default"] = _default;
|
|
@@ -1,28 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
17
|
-
|
|
18
|
-
var _utils = require('../../utils');
|
|
19
|
-
|
|
20
|
-
var _colors = require('../../colors');
|
|
21
|
-
|
|
22
|
-
var _colors2 = _interopRequireDefault(_colors);
|
|
23
|
-
|
|
24
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
-
|
|
6
|
+
exports["default"] = PlayProgressBar;
|
|
7
|
+
var _propTypes = require("prop-types");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _utils = require("../../utils");
|
|
11
|
+
var _colors = _interopRequireDefault(require("../../colors"));
|
|
12
|
+
var _templateObject;
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
26
15
|
var propTypes = {
|
|
27
16
|
currentTime: _propTypes.PropTypes.number,
|
|
28
17
|
duration: _propTypes.PropTypes.number,
|
|
@@ -32,38 +21,32 @@ var propTypes = {
|
|
|
32
21
|
assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
|
|
33
22
|
controlType: _propTypes.PropTypes.oneOf(['default', 'advanced'])
|
|
34
23
|
};
|
|
35
|
-
|
|
36
24
|
var defaultProps = {
|
|
37
25
|
playerType: 'default',
|
|
38
26
|
controlType: 'default'
|
|
39
27
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
displayName: 'PlayProgressBar__ProgressBarBlock',
|
|
43
|
-
componentId: 'sc-1e6zmfe-0'
|
|
44
|
-
})(['position:absolute;width:0px;height:100%;left:0;top:0;background:', ';&:after{content:\'\';width:12px;height:12px;position:absolute;background:', ';border-radius:100%;right:-6px;top:-5px;box-shadow:0 0 14px 1px ', ';}&:before{content:\'\';width:2px;height:46px;position:absolute;background:', ';right:-1px;top:4px;display:', ';}'], function (props) {
|
|
45
|
-
return _colors2.default.common.video[props.assetType].base;
|
|
28
|
+
var ProgressBarBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n width: 0px;\n height: 100%;\n left: 0;\n top: 0;\n background: ", ";\n &:after {\n content: '';\n width: 12px;\n height: 12px;\n position: absolute;\n background: ", ";\n border-radius: 100%;\n right: -6px;\n top: -5px;\n box-shadow: 0 0 14px 1px\n ", ";\n }\n &:before {\n content: '';\n width: 2px;\n height: 46px;\n position: absolute;\n background: ", ";\n right: -1px;\n top: 4px;\n display: ", ";\n }\n"])), function (props) {
|
|
29
|
+
return _colors["default"].common.video[props.assetType].base;
|
|
46
30
|
}, function (props) {
|
|
47
|
-
return
|
|
31
|
+
return _colors["default"].common.video[props.assetType].base;
|
|
48
32
|
}, function (props) {
|
|
49
|
-
return
|
|
33
|
+
return _colors["default"].common.video[props.assetType].base;
|
|
50
34
|
}, function (props) {
|
|
51
|
-
return
|
|
35
|
+
return _colors["default"].common.video[props.assetType].base;
|
|
52
36
|
}, function (props) {
|
|
53
37
|
return props.controlType === 'advanced' && !props.isFullscreen ? 'block' : 'none';
|
|
54
38
|
});
|
|
55
39
|
// Shows play progress
|
|
56
40
|
function PlayProgressBar(_ref) {
|
|
57
41
|
var currentTime = _ref.currentTime,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
'data-current-time': (0, _utils.formatTime)(currentTime, duration),
|
|
42
|
+
duration = _ref.duration,
|
|
43
|
+
percentage = _ref.percentage,
|
|
44
|
+
playerType = _ref.playerType,
|
|
45
|
+
assetType = _ref.assetType,
|
|
46
|
+
controlType = _ref.controlType,
|
|
47
|
+
isFullscreen = _ref.player.isFullscreen;
|
|
48
|
+
return /*#__PURE__*/_react["default"].createElement(ProgressBarBlock, {
|
|
49
|
+
"data-current-time": (0, _utils.formatTime)(currentTime, duration),
|
|
67
50
|
style: {
|
|
68
51
|
width: percentage
|
|
69
52
|
},
|
|
@@ -73,7 +56,6 @@ function PlayProgressBar(_ref) {
|
|
|
73
56
|
isFullscreen: isFullscreen
|
|
74
57
|
});
|
|
75
58
|
}
|
|
76
|
-
|
|
77
59
|
PlayProgressBar.propTypes = propTypes;
|
|
78
60
|
PlayProgressBar.defaultProps = defaultProps;
|
|
79
61
|
PlayProgressBar.displayName = 'PlayProgressBar';
|