@desynova-digital/player 4.0.0 → 4.0.2
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 +99 -0
- package/actions/player.js +331 -0
- package/actions/video.js +206 -0
- package/{utils/colors.js → colors.js} +1 -2
- package/{media → components}/AudioMeter.js +96 -109
- package/components/BigPlayButton.js +84 -0
- package/components/ImageViewer.js +272 -0
- package/{control → components}/MarkerBar.js +33 -24
- package/{utils → components}/Menu.js +13 -4
- package/components/Player.js +706 -0
- package/{header/Header.js → components/PlayerHeader.js} +104 -78
- package/components/Playlist.js +95 -0
- package/{control → components}/PointersBar.js +122 -61
- package/components/PosterImage.js +50 -0
- package/{media → components}/SDOutline.js +13 -49
- package/components/Shortcut.js +821 -0
- package/{control → components}/Slider.js +27 -23
- package/components/TagsBar.js +81 -0
- package/components/Video.js +1280 -0
- package/{control → components/control-bar}/AudioTracksMenuButton.js +32 -28
- package/components/control-bar/CameraButton.js +75 -0
- package/components/control-bar/CommentsButton.js +186 -0
- package/components/control-bar/ControlBar.js +266 -0
- package/components/control-bar/EditorControlMenuButton.js +317 -0
- package/components/control-bar/ForwardControl.js +12 -0
- package/components/control-bar/ForwardReplayControl.js +106 -0
- package/{control → components/control-bar}/FullscreenToggle.js +26 -21
- package/components/control-bar/PlayToggle.js +85 -0
- package/components/control-bar/ReplayControl.js +12 -0
- package/components/control-bar/SettingsMenuButton.js +41 -0
- package/components/control-bar/SubtitleLanguagesMenuButton.js +149 -0
- package/components/control-bar/SubtitleMovementMenu.js +140 -0
- package/{control/VolumneMenuButton.js → components/control-bar/VolumeMenuButton.js} +26 -27
- package/components/control-bar/ZoomMenuButton.js +90 -0
- package/{control → components/marking-controls}/MarkInControl.js +32 -25
- package/{control → components/marking-controls}/MarkOutControl.js +35 -26
- package/components/marking-controls/MarkingAddButton.js +79 -0
- package/components/marking-controls/MarkingControl.js +95 -0
- package/components/marking-controls/MarkingDeleteButton.js +70 -0
- package/{control → components/marking-controls}/MarkingDuration.js +12 -5
- package/components/marking-controls/MarkingPreview.js +72 -0
- package/components/progress-bar/AudioWaveform.js +126 -0
- package/components/progress-bar/LoadProgressBar.js +67 -0
- package/components/progress-bar/MouseTimeDisplay.js +36 -0
- package/{control → components/progress-bar}/PlayProgressBar.js +4 -4
- package/components/progress-bar/ProgressControl.js +186 -0
- package/{control → components/progress-bar}/SeekBar.js +113 -72
- package/{control → components/progress-bar}/Timeline.js +43 -32
- package/{control/PlayBackRateControl.js → components/settings-menu-control/PlaybackRateControl.js} +44 -30
- package/components/settings-menu-control/SafeAreaControl.js +81 -0
- package/components/settings-menu-control/SettingsMenu.js +56 -0
- package/components/settings-menu-control/SubtitleControl.js +1 -0
- package/components/time-controls/CurrentTimeDisplay.js +83 -0
- package/{control → components/time-controls}/DurationDisplay.js +8 -15
- package/components/time-controls/TimeDivider.js +25 -0
- package/{control → components/volume-control}/VolumeBar.js +62 -80
- package/components/volume-control/VolumeControl.js +19 -0
- package/{control → components/volume-control}/VolumeLevel.js +2 -3
- package/components/zoom-control/ZoomBar.js +155 -0
- package/components/zoom-control/ZoomLevel.js +55 -0
- package/index.js +198 -1
- package/package.json +5 -8
- package/reducers/index.js +19 -0
- package/reducers/operation.js +35 -0
- package/reducers/player.js +222 -0
- package/utils/browser.js +30 -0
- package/utils/dom.js +93 -0
- package/utils/fullscreen.js +72 -0
- package/utils/index.js +156 -57
- package/Player.js +0 -945
- package/control/AudioTracksMenuButton.jsx +0 -80
- package/control/ControlBar.js +0 -303
- package/control/ControlBar.jsx +0 -264
- package/control/CurrentTimeDisplay.js +0 -34
- package/control/CurrentTimeDisplay.jsx +0 -35
- package/control/DurationDisplay.jsx +0 -48
- package/control/ForwardBackwardControl.js +0 -76
- package/control/ForwardBackwardControl.jsx +0 -79
- package/control/FullscreenToggle.jsx +0 -83
- package/control/MarkInControl.jsx +0 -109
- package/control/MarkOutControl.jsx +0 -131
- package/control/MarkerBar.jsx +0 -107
- package/control/MarkingControl.js +0 -82
- package/control/MarkingControl.jsx +0 -143
- package/control/MarkingPreview.js +0 -49
- package/control/MarkingPreview.jsx +0 -60
- package/control/PlayBackRateControl.jsx +0 -106
- package/control/PlayProgressBar.jsx +0 -92
- package/control/PlayToggle.js +0 -56
- package/control/PlayToggle.jsx +0 -57
- package/control/PointersBar.jsx +0 -286
- package/control/ProgressControl.js +0 -127
- package/control/ProgressControl.jsx +0 -155
- package/control/SeekBar.jsx +0 -229
- package/control/SettingsMenuButton.js +0 -63
- package/control/SettingsMenuButton.jsx +0 -69
- package/control/Slider.jsx +0 -243
- package/control/Timeline.jsx +0 -131
- package/control/VolumeBar.jsx +0 -174
- package/control/VolumeLevel.jsx +0 -66
- package/control/VolumneMenuButton.jsx +0 -111
- package/header/Header.jsx +0 -479
- package/media/AudioMeter.jsx +0 -411
- package/media/SDOutline.jsx +0 -90
- package/media/Video.js +0 -684
- package/media/Video.jsx +0 -714
- package/playlist/Playlist.js +0 -67
- package/playlist/Playlist.jsx +0 -91
- package/playlist/index.js +0 -13
- package/shortcuts/Shortcut.js +0 -662
- package/utils/Menu.jsx +0 -105
package/{control/PlayBackRateControl.js → components/settings-menu-control/PlaybackRateControl.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
@@ -9,57 +9,66 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _propTypes = require("prop-types");
|
|
11
11
|
var _components = require("@desynova-digital/components");
|
|
12
|
+
var _tokens = require("@desynova-digital/tokens");
|
|
12
13
|
var _templateObject;
|
|
13
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
|
-
function _getRequireWildcardCache(
|
|
15
|
-
function _interopRequireWildcard(
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
16
17
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
17
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); } }
|
|
18
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; }
|
|
19
|
-
function _toPropertyKey(
|
|
20
|
-
function _toPrimitive(
|
|
21
|
-
function
|
|
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); }; }
|
|
20
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
21
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
22
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
24
23
|
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
|
|
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; } }
|
|
24
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
27
25
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
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 _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); }
|
|
28
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
28
29
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
29
30
|
var propTypes = {
|
|
30
31
|
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
31
|
-
player: _propTypes.PropTypes.instanceOf(Object)
|
|
32
|
+
player: _propTypes.PropTypes.instanceOf(Object),
|
|
33
|
+
theme: _propTypes.PropTypes.string
|
|
32
34
|
};
|
|
33
|
-
var PlaybackRateBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n background: transparent;\n font-family: SFUIText-Medium;\n font-size: 12px;\n text-transform: uppercase;\n align-items: center;\n padding: 0 !important;\n .playback-block {\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid #eeeeee;\n p {\n margin-left: 10px;\n white-space: nowrap;\n }\n }\n .playback-rate-body {\n padding: 0 !important;\n display: flex;\n justify-content: space-between;\n .playback-rate {\n border-right: 1px solid #eeeeee;\n &:last-child {\n border: none;\n }\n &:hover {\n background:
|
|
34
|
-
|
|
35
|
+
var PlaybackRateBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n background: transparent;\n font-family: SFUIText-Medium;\n font-size: 12px;\n text-transform: uppercase;\n align-items: center;\n padding: 0 !important;\n .playback-block {\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid #eeeeee;\n p {\n margin-left: 10px;\n white-space: nowrap;\n }\n }\n .playback-rate-body {\n padding: 0 !important;\n display: flex;\n justify-content: space-between;\n .playback-rate {\n border-right: 1px solid #eeeeee;\n &:last-child {\n border: none;\n }\n &:hover {\n background: ", ";\n }\n &.active {\n pointer-events: none;\n color:", ";\n }\n }\n }\n"])), function (props) {
|
|
36
|
+
return props.disablePlayerActions.includes('playback_rate') ? '' : props.theme ? "".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
|
|
37
|
+
}, function (props) {
|
|
38
|
+
return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.themeColor) : '#00cec6';
|
|
39
|
+
});
|
|
40
|
+
var PlaybackRateControl = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
35
41
|
_inherits(PlaybackRateControl, _Component);
|
|
36
|
-
var _super = _createSuper(PlaybackRateControl);
|
|
37
42
|
function PlaybackRateControl(props) {
|
|
38
43
|
var _this;
|
|
39
44
|
_classCallCheck(this, PlaybackRateControl);
|
|
40
|
-
_this =
|
|
45
|
+
_this = _callSuper(this, PlaybackRateControl, [props]);
|
|
41
46
|
_this.changePlaybackRate = _this.changePlaybackRate.bind(_assertThisInitialized(_this));
|
|
42
47
|
return _this;
|
|
43
48
|
}
|
|
44
49
|
_createClass(PlaybackRateControl, [{
|
|
45
50
|
key: "changePlaybackRate",
|
|
46
51
|
value: function changePlaybackRate(playbackRate) {
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
var disablePlayerActions = this.props.disablePlayerActions;
|
|
53
|
+
if (disablePlayerActions.includes('playback_rate')) return;
|
|
54
|
+
var actions = this.props.actions;
|
|
55
|
+
actions.changeRate(playbackRate, {
|
|
56
|
+
action: 'fast-forward',
|
|
57
|
+
source: 'shortcut'
|
|
51
58
|
});
|
|
52
|
-
// actions.changeRate(playbackRate, {
|
|
53
|
-
// action: 'fast-forward',
|
|
54
|
-
// source: 'shortcut'
|
|
55
|
-
// });
|
|
56
59
|
}
|
|
57
60
|
}, {
|
|
58
61
|
key: "render",
|
|
59
62
|
value: function render() {
|
|
60
63
|
var _this2 = this;
|
|
61
|
-
var
|
|
62
|
-
|
|
64
|
+
var _this$props = this.props,
|
|
65
|
+
player = _this$props.player,
|
|
66
|
+
disablePlayerActions = _this$props.disablePlayerActions,
|
|
67
|
+
theme = _this$props.theme;
|
|
68
|
+
return /*#__PURE__*/_react["default"].createElement(PlaybackRateBlock, {
|
|
69
|
+
theme: theme,
|
|
70
|
+
disablePlayerActions: disablePlayerActions
|
|
71
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
63
72
|
className: "playback-block"
|
|
64
73
|
}, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
|
|
65
74
|
name: "playback-rate",
|
|
@@ -73,25 +82,31 @@ var PlaybackRateControl = /*#__PURE__*/function (_Component) {
|
|
|
73
82
|
}, "Playback Speed")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
74
83
|
className: "playback-rate-body"
|
|
75
84
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
76
|
-
className: playbackRate ===
|
|
85
|
+
className: player.playbackRate === 0.5 ? 'playback-rate active' : 'playback-rate',
|
|
86
|
+
onClick: function onClick() {
|
|
87
|
+
return _this2.changePlaybackRate(0.5);
|
|
88
|
+
},
|
|
89
|
+
role: "presentation"
|
|
90
|
+
}, "0.5x"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
91
|
+
className: player.playbackRate === 1 ? 'playback-rate active' : 'playback-rate',
|
|
77
92
|
onClick: function onClick() {
|
|
78
93
|
return _this2.changePlaybackRate(1);
|
|
79
94
|
},
|
|
80
95
|
role: "presentation"
|
|
81
96
|
}, "1x"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
82
|
-
className: playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate',
|
|
97
|
+
className: player.playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate',
|
|
83
98
|
onClick: function onClick() {
|
|
84
99
|
return _this2.changePlaybackRate(1.5);
|
|
85
100
|
},
|
|
86
101
|
role: "presentation"
|
|
87
102
|
}, "1.5x"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
88
|
-
className: playbackRate === 2 ? 'playback-rate active' : 'playback-rate',
|
|
103
|
+
className: player.playbackRate === 2 ? 'playback-rate active' : 'playback-rate',
|
|
89
104
|
onClick: function onClick() {
|
|
90
105
|
return _this2.changePlaybackRate(2);
|
|
91
106
|
},
|
|
92
107
|
role: "presentation"
|
|
93
108
|
}, "2x"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
94
|
-
className: playbackRate === 4 ? 'playback-rate active' : 'playback-rate',
|
|
109
|
+
className: player.playbackRate === 4 ? 'playback-rate active' : 'playback-rate',
|
|
95
110
|
onClick: function onClick() {
|
|
96
111
|
return _this2.changePlaybackRate(4);
|
|
97
112
|
},
|
|
@@ -101,6 +116,5 @@ var PlaybackRateControl = /*#__PURE__*/function (_Component) {
|
|
|
101
116
|
}]);
|
|
102
117
|
return PlaybackRateControl;
|
|
103
118
|
}(_react.Component);
|
|
104
|
-
exports["default"] = PlaybackRateControl;
|
|
105
119
|
PlaybackRateControl.propTypes = propTypes;
|
|
106
120
|
PlaybackRateControl.displayName = 'PlaybackRateControl';
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
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 _tokens = require("@desynova-digital/tokens");
|
|
13
|
+
var _templateObject;
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
21
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
22
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
23
|
+
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); }
|
|
24
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
25
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
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 _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); }
|
|
28
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
29
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
30
|
+
var propTypes = {
|
|
31
|
+
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
32
|
+
player: _propTypes.PropTypes.instanceOf(Object),
|
|
33
|
+
theme: _propTypes.PropTypes.string
|
|
34
|
+
};
|
|
35
|
+
var SafeAreaBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n background: transparent;\n font-family: SFUIText-Medium;\n font-size: 12px;\n text-transform: uppercase;\n justify-content: flex-start;\n align-items: center;\n &:hover {\n background: ", ";\n }\n p {\n margin-left: 10px;\n white-space: nowrap;\n }\n"])), function (props) {
|
|
36
|
+
return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
|
|
37
|
+
});
|
|
38
|
+
var SafeAreaControl = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
39
|
+
_inherits(SafeAreaControl, _Component);
|
|
40
|
+
function SafeAreaControl(props) {
|
|
41
|
+
var _this;
|
|
42
|
+
_classCallCheck(this, SafeAreaControl);
|
|
43
|
+
_this = _callSuper(this, SafeAreaControl, [props]);
|
|
44
|
+
_this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
|
|
45
|
+
return _this;
|
|
46
|
+
}
|
|
47
|
+
_createClass(SafeAreaControl, [{
|
|
48
|
+
key: "handleClick",
|
|
49
|
+
value: function handleClick() {
|
|
50
|
+
var _this$props = this.props,
|
|
51
|
+
player = _this$props.player,
|
|
52
|
+
actions = _this$props.actions;
|
|
53
|
+
actions.handleSDBorderChange(!player.SDBorderActive);
|
|
54
|
+
}
|
|
55
|
+
}, {
|
|
56
|
+
key: "render",
|
|
57
|
+
value: function render() {
|
|
58
|
+
var _this$props2 = this.props,
|
|
59
|
+
player = _this$props2.player,
|
|
60
|
+
theme = _this$props2.theme;
|
|
61
|
+
return /*#__PURE__*/_react["default"].createElement(SafeAreaBlock, {
|
|
62
|
+
onClick: this.handleClick,
|
|
63
|
+
theme: theme
|
|
64
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
|
|
65
|
+
name: "safe-area",
|
|
66
|
+
width: 20,
|
|
67
|
+
height: 20,
|
|
68
|
+
color: player.SDBorderActive ? theme ? "".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6' : '#333333'
|
|
69
|
+
}), /*#__PURE__*/_react["default"].createElement("p", {
|
|
70
|
+
style: player.SDBorderActive ? {
|
|
71
|
+
color: theme ? " ".concat(_tokens.colors[theme].videoPlayer.themeColor) : '#00cec6'
|
|
72
|
+
} : {
|
|
73
|
+
color: '#333333'
|
|
74
|
+
}
|
|
75
|
+
}, "4:3 Safe Area"));
|
|
76
|
+
}
|
|
77
|
+
}]);
|
|
78
|
+
return SafeAreaControl;
|
|
79
|
+
}(_react.Component);
|
|
80
|
+
SafeAreaControl.propTypes = propTypes;
|
|
81
|
+
SafeAreaControl.displayName = 'SafeAreaControl';
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = SettingsMenu;
|
|
7
|
+
var _propTypes = require("prop-types");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _SafeAreaControl = _interopRequireDefault(require("./SafeAreaControl"));
|
|
11
|
+
var _PlaybackRateControl = _interopRequireDefault(require("./PlaybackRateControl"));
|
|
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) } })); }
|
|
15
|
+
/*
|
|
16
|
+
* import SubtitleControl from './SubtitleControl';
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
var propTypes = {
|
|
20
|
+
player: _propTypes.PropTypes.instanceOf(Object),
|
|
21
|
+
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
22
|
+
style: _propTypes.PropTypes.instanceOf(Object),
|
|
23
|
+
disablePlayerActions: _propTypes.PropTypes.instanceOf(Array),
|
|
24
|
+
theme: _propTypes.PropTypes.string
|
|
25
|
+
};
|
|
26
|
+
var SettingsMenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n .settings-menu-tile {\n background: transparent;\n div {\n padding: 15px;\n cursor: ", ";\n }\n }\n"])), function (props) {
|
|
27
|
+
return props.disablePlayerActions.includes('playback_rate') ? 'not-allowed' : 'pointer';
|
|
28
|
+
});
|
|
29
|
+
function SettingsMenu(_ref) {
|
|
30
|
+
var player = _ref.player,
|
|
31
|
+
actions = _ref.actions,
|
|
32
|
+
style = _ref.style,
|
|
33
|
+
_ref$disablePlayerAct = _ref.disablePlayerActions,
|
|
34
|
+
disablePlayerActions = _ref$disablePlayerAct === void 0 ? [] : _ref$disablePlayerAct,
|
|
35
|
+
theme = _ref.theme;
|
|
36
|
+
return /*#__PURE__*/_react["default"].createElement(SettingsMenuContainer, {
|
|
37
|
+
theme: theme,
|
|
38
|
+
style: style,
|
|
39
|
+
disablePlayerActions: disablePlayerActions
|
|
40
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
41
|
+
className: "settings-menu-tile"
|
|
42
|
+
}, /*#__PURE__*/_react["default"].createElement(_SafeAreaControl["default"], {
|
|
43
|
+
theme: theme,
|
|
44
|
+
player: player,
|
|
45
|
+
actions: actions
|
|
46
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
47
|
+
className: "settings-menu-tile"
|
|
48
|
+
}, /*#__PURE__*/_react["default"].createElement(_PlaybackRateControl["default"], {
|
|
49
|
+
theme: theme,
|
|
50
|
+
player: player,
|
|
51
|
+
actions: actions,
|
|
52
|
+
disablePlayerActions: disablePlayerActions
|
|
53
|
+
})));
|
|
54
|
+
}
|
|
55
|
+
SettingsMenu.propTypes = propTypes;
|
|
56
|
+
SettingsMenu.displayName = 'SettingsMenu';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
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 _components = require("@desynova-digital/components");
|
|
12
|
+
var _utils = require("../../utils");
|
|
13
|
+
var _templateObject;
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
17
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
18
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
20
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
21
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
22
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
24
|
+
var propTypes = {
|
|
25
|
+
player: _propTypes.PropTypes.instanceOf(Object),
|
|
26
|
+
initialTime: _propTypes.PropTypes.number,
|
|
27
|
+
frameRate: _propTypes.PropTypes.number,
|
|
28
|
+
theme: _propTypes.PropTypes.string
|
|
29
|
+
};
|
|
30
|
+
var defaultProps = {
|
|
31
|
+
player: {}
|
|
32
|
+
};
|
|
33
|
+
var VideoCurrentTime = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n color: #ffffff;\n min-width: 65px;\n text-align: left;\n"])));
|
|
34
|
+
function CurrentTimeDisplay(_ref) {
|
|
35
|
+
var player = _ref.player,
|
|
36
|
+
initialTime = _ref.initialTime,
|
|
37
|
+
frameRate = _ref.frameRate,
|
|
38
|
+
actions = _ref.actions,
|
|
39
|
+
theme = _ref.theme;
|
|
40
|
+
var formattedTime = (0, _utils.secondsToTime)(player.currentTime, frameRate, initialTime);
|
|
41
|
+
var _useState = (0, _react.useState)(formattedTime),
|
|
42
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
43
|
+
inputValue = _useState2[0],
|
|
44
|
+
setInputValue = _useState2[1];
|
|
45
|
+
var elementRef = (0, _react.useRef)(null);
|
|
46
|
+
var handleKeyPress = function handleKeyPress(event) {
|
|
47
|
+
if (event.key === 'Enter') {
|
|
48
|
+
if (elementRef.current && elementRef.current.checkValidity()) {
|
|
49
|
+
if (isNaN(initialTime)) {
|
|
50
|
+
initialTime = 0;
|
|
51
|
+
}
|
|
52
|
+
var seekSecondsTime = (0, _utils.timeToSeconds)(event.target.value, frameRate) - initialTime;
|
|
53
|
+
actions.seek(seekSecondsTime);
|
|
54
|
+
document.activeElement.blur();
|
|
55
|
+
actions.activate(true);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
var onInputFocus = function onInputFocus() {
|
|
60
|
+
actions.pause();
|
|
61
|
+
actions.handleVideoRewind(false);
|
|
62
|
+
};
|
|
63
|
+
(0, _react.useEffect)(function () {
|
|
64
|
+
setInputValue(formattedTime);
|
|
65
|
+
}, [player.currentTime]);
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _components.TimeCodeInput ? /*#__PURE__*/_react["default"].createElement(_components.TimeCodeInput, {
|
|
67
|
+
theme: theme,
|
|
68
|
+
width: "72px",
|
|
69
|
+
elementRef: elementRef,
|
|
70
|
+
inputValue: inputValue,
|
|
71
|
+
onKeyDown: function onKeyDown(e) {
|
|
72
|
+
return handleKeyPress(e);
|
|
73
|
+
},
|
|
74
|
+
onFocus: onInputFocus,
|
|
75
|
+
frameRate: frameRate,
|
|
76
|
+
initialTime: initialTime || 0,
|
|
77
|
+
playerDuration: player.duration || 0
|
|
78
|
+
}) : /*#__PURE__*/_react["default"].createElement(VideoCurrentTime, null, formattedTime));
|
|
79
|
+
}
|
|
80
|
+
CurrentTimeDisplay.propTypes = propTypes;
|
|
81
|
+
CurrentTimeDisplay.defaultProps = defaultProps;
|
|
82
|
+
CurrentTimeDisplay.displayName = 'CurrentTimeDisplay';
|
|
83
|
+
var _default = exports["default"] = CurrentTimeDisplay;
|
|
@@ -7,32 +7,25 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _propTypes = require("prop-types");
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
-
var _utils = require("
|
|
11
|
-
var _templateObject
|
|
10
|
+
var _utils = require("../../utils");
|
|
11
|
+
var _templateObject;
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
13
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
14
14
|
var propTypes = {
|
|
15
15
|
player: _propTypes.PropTypes.instanceOf(Object),
|
|
16
|
-
frameRate: _propTypes.PropTypes.number
|
|
17
|
-
separator: _propTypes.PropTypes.string
|
|
16
|
+
frameRate: _propTypes.PropTypes.number
|
|
18
17
|
};
|
|
19
18
|
var defaultProps = {
|
|
20
19
|
player: {}
|
|
21
20
|
};
|
|
22
21
|
var VideoTotalDuration = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n margin: 0 2px;\n color: #888888;\n"])));
|
|
23
|
-
var TimeSeperator = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: #888888;\n margin: 0 2px;\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n"])));
|
|
24
22
|
function DurationDisplay(_ref) {
|
|
25
|
-
var
|
|
26
|
-
frameRate = _ref.frameRate
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var separatorText = separator || '/';
|
|
30
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TimeSeperator, {
|
|
31
|
-
dir: "ltr"
|
|
32
|
-
}, separatorText), /*#__PURE__*/_react["default"].createElement(VideoTotalDuration, null, formattedTime));
|
|
23
|
+
var player = _ref.player,
|
|
24
|
+
frameRate = _ref.frameRate;
|
|
25
|
+
var formattedTime = (0, _utils.secondsToTime)(player.duration, frameRate);
|
|
26
|
+
return /*#__PURE__*/_react["default"].createElement(VideoTotalDuration, null, formattedTime);
|
|
33
27
|
}
|
|
34
28
|
DurationDisplay.propTypes = propTypes;
|
|
35
29
|
DurationDisplay.defaultProps = defaultProps;
|
|
36
30
|
DurationDisplay.displayName = 'DurationDisplay';
|
|
37
|
-
var _default = DurationDisplay;
|
|
38
|
-
exports["default"] = _default;
|
|
31
|
+
var _default = exports["default"] = DurationDisplay;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = TimeDivider;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _propTypes = require("prop-types");
|
|
10
|
+
var _templateObject;
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
13
|
+
var propTypes = {
|
|
14
|
+
separator: _propTypes.PropTypes.string
|
|
15
|
+
};
|
|
16
|
+
var TimeSeperator = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: #888888;\n margin: 0 2px;\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n"])));
|
|
17
|
+
function TimeDivider(_ref) {
|
|
18
|
+
var separator = _ref.separator;
|
|
19
|
+
var separatorText = separator || '/';
|
|
20
|
+
return /*#__PURE__*/_react["default"].createElement(TimeSeperator, {
|
|
21
|
+
dir: "ltr"
|
|
22
|
+
}, separatorText);
|
|
23
|
+
}
|
|
24
|
+
TimeDivider.propTypes = propTypes;
|
|
25
|
+
TimeDivider.displayName = 'TimeDivider';
|