@desynova-digital/player 3.13.28 → 3.13.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/PointersBar.js +14 -2
- package/components/Shortcut.js +5 -1
- package/components/Video.js +16 -7
- package/components/control-bar/SettingsMenuButton.js +7 -3
- package/components/settings-menu-control/PlaybackRateControl.js +11 -3
- package/components/settings-menu-control/SettingsMenu.js +12 -5
- package/package.json +1 -1
|
@@ -53,7 +53,7 @@ var PointersContainer = _styledComponents["default"].div(_templateObject || (_te
|
|
|
53
53
|
});
|
|
54
54
|
var PointerBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 20px;\n position: relative;\n border-top: 1px solid #333333;\n border-bottom: 1px solid #333333;\n .empty-pointers-msg {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n p {\n font-family: SFUIText-Medium;\n font-size: 11px;\n color: #aaaaaa;\n }\n ", " {\n margin: 0 5px;\n }\n }\n"])), _components.Icon.Element);
|
|
55
55
|
var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 100px;\n max-width: 100px;\n position: relative;\n height: 100%;\n .tags-block {\n height: 20px;\n font-family: SFUIText-Medium;\n font-size: 10px;\n color: #ffffff;\n text-transform: uppercase;\n border-top: 1px solid #333333;\n border-bottom: 1px solid #333333;\n p {\n line-height: 18px;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])));
|
|
56
|
-
var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 2;\n height: 18px;\n transition: left 0.1s ease-in-out;\n\n .tooltip-container {\n border-radius: 0.25rem;\n padding: 5px;\n width: fit-content;\n background: #ffffff;\n color: #666666;\n\n h4 {\n white-space: nowrap;\n font-size: 12px;\n }\n\n &:after {\n content: '';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid white;\n ", "\n left: ", ";\n transform: translateX(-50%);\n }\n }\n"])), function (props) {
|
|
56
|
+
var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 2;\n height: 18px;\n transition: left 0.1s ease-in-out;\n\n .tooltip-container {\n border-radius: 0.25rem;\n padding: 5px;\n width: fit-content;\n background: #ffffff;\n color: #666666;\n\n em{\n font-style: italic; \n }\n\n strong{\n font-weight: bold; \n }\n\n h4 {\n white-space: nowrap;\n font-size: 12px;\n }\n\n &:after {\n content: '';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid white;\n ", "\n left: ", ";\n transform: translateX(-50%);\n }\n }\n"])), function (props) {
|
|
57
57
|
return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
|
|
58
58
|
}, function (props) {
|
|
59
59
|
return props.tooltipPointer ? props.tooltipPointer + 'px' : '50%';
|
|
@@ -270,7 +270,19 @@ var PointersBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
270
270
|
}
|
|
271
271
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
272
272
|
className: "tooltip-container"
|
|
273
|
-
}, text.line1 && /*#__PURE__*/_react["default"].createElement("h4",
|
|
273
|
+
}, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", {
|
|
274
|
+
dangerouslySetInnerHTML: {
|
|
275
|
+
__html: text.line1
|
|
276
|
+
}
|
|
277
|
+
}), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", {
|
|
278
|
+
dangerouslySetInnerHTML: {
|
|
279
|
+
__html: text.line2
|
|
280
|
+
}
|
|
281
|
+
}), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", {
|
|
282
|
+
dangerouslySetInnerHTML: {
|
|
283
|
+
__html: text
|
|
284
|
+
}
|
|
285
|
+
}))));
|
|
274
286
|
}
|
|
275
287
|
}]);
|
|
276
288
|
return PointersBar;
|
package/components/Shortcut.js
CHANGED
|
@@ -263,6 +263,10 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
263
263
|
keyCode: 76,
|
|
264
264
|
// l
|
|
265
265
|
handle: function handle(player, actions) {
|
|
266
|
+
var disablePlayerActions = _this.props.disablePlayerActions;
|
|
267
|
+
if (disablePlayerActions.includes('playback_rate')) {
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
266
270
|
if (player.paused && player.playbackRate === 1) {
|
|
267
271
|
actions.play({
|
|
268
272
|
action: 'play',
|
|
@@ -741,7 +745,7 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
741
745
|
if (!player.isActive) {
|
|
742
746
|
return;
|
|
743
747
|
}
|
|
744
|
-
if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')) {
|
|
748
|
+
if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') || document.activeElement.className === 'notranslate public-DraftEditor-content') {
|
|
745
749
|
return;
|
|
746
750
|
}
|
|
747
751
|
var keyCode = e.keyCode || e.which;
|
package/components/Video.js
CHANGED
|
@@ -95,7 +95,7 @@ var defaultProps = {
|
|
|
95
95
|
aspectRatio: 'auto',
|
|
96
96
|
crossOrigin: 'anonymous'
|
|
97
97
|
};
|
|
98
|
-
var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n font-family: SFUIText-Regular;\n font-size: 16px;\n bottom: 20px;\n width: 100%;\n display: flex;\n justify-content: center;\n text-align: center;\n color: #ffffff;\n height: 90%;\n align-items: center;\n\n .subtitleContainer {\n border-radius: 4px;\n width: fit-content;\n background: #000000;\n opacity: 0.9;\n padding: ", ";\n line-height: 20px;\n position: absolute;\n }\n .longSubtitleStyles {\n overflow-y: auto;\n height: fit-content;\n max-height: 70px;\n max-width: 75%;\n width: fit-content;\n }\n"])), function (props) {
|
|
98
|
+
var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n font-family: SFUIText-Regular;\n font-size: 16px;\n bottom: 20px;\n width: 100%;\n display: flex;\n justify-content: center;\n text-align: center;\n color: #ffffff;\n height: 90%;\n align-items: center;\n\n .subtitleContainer {\n border-radius: 4px;\n width: fit-content;\n background: #000000;\n opacity: 0.9;\n padding: ", ";\n line-height: 20px;\n position: absolute;\n\n em {\n font-style: italic; /* Override the font style for <em> tags inside elements with the class .someClass */\n }\n\n strong{\n font-weight: bold; \n }\n \n }\n .longSubtitleStyles {\n overflow-y: auto;\n height: fit-content;\n max-height: 70px;\n max-width: 75%;\n width: fit-content;\n }\n"])), function (props) {
|
|
99
99
|
return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
|
|
100
100
|
});
|
|
101
101
|
var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n &.video-react-player-block {\n position: relative;\n transition: all 0.1s ease-in-out;\n -moz-transition: all 0.1s ease-in-out;\n -webkit-transition: all 0.1s ease-in-out;\n -ms-transition: all 0.1s ease-in-out;\n -o-transition: all 0.1s ease-in-out;\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n right: 0;\n bottom: 0;\n }\n .audio-tracks {\n position: relative;\n display: flex;\n background: rgba(0, 0, 0, 0.5);\n color: #fff;\n z-index: 10;\n position: absolute;\n width: 100%;\n bottom: 0;\n p {\n cursor: pointer;\n padding: 10px;\n }\n }\n .loader-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: 10;\n background: rgba(0, 0, 0, 0.5);\n }\n }\n &.ratio-border {\n border: 1px solid rgba(255, 255, 255, 0.5);\n &:after {\n content: '16:9 Safe Area';\n position: absolute;\n color: #fff;\n font-family: SFUIText-Regular;\n font-size: 12px;\n transform: rotate(-90deg);\n top: 20%;\n left: -50px;\n }\n }\n"])));
|
|
@@ -1252,12 +1252,21 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
1252
1252
|
className: "subtitleContainer longSubtitleStyles",
|
|
1253
1253
|
style: _objectSpread({}, currentSubtitleObj.style)
|
|
1254
1254
|
}, currentSubtitleObj.charactername && /*#__PURE__*/_react["default"].createElement("p", {
|
|
1255
|
-
id: "charactername"
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1255
|
+
id: "charactername",
|
|
1256
|
+
dangerouslySetInnerHTML: {
|
|
1257
|
+
__html: currentSubtitleObj.charactername
|
|
1258
|
+
}
|
|
1259
|
+
}) || null, currentSubtitleObj.line1 && /*#__PURE__*/_react["default"].createElement("p", {
|
|
1260
|
+
id: "subtitleLineOne",
|
|
1261
|
+
dangerouslySetInnerHTML: {
|
|
1262
|
+
__html: currentSubtitleObj.line1
|
|
1263
|
+
}
|
|
1264
|
+
}) || null, currentSubtitleObj.line2 && /*#__PURE__*/_react["default"].createElement("p", {
|
|
1265
|
+
id: "subtitleLineTwo",
|
|
1266
|
+
dangerouslySetInnerHTML: {
|
|
1267
|
+
__html: currentSubtitleObj.line2
|
|
1268
|
+
}
|
|
1269
|
+
}) || null)));
|
|
1261
1270
|
}
|
|
1262
1271
|
}]);
|
|
1263
1272
|
return Video;
|
|
@@ -12,12 +12,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
12
12
|
var propTypes = {
|
|
13
13
|
player: _propTypes.PropTypes.instanceOf(Object),
|
|
14
14
|
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
15
|
-
style: _propTypes.PropTypes.instanceOf(Object)
|
|
15
|
+
style: _propTypes.PropTypes.instanceOf(Object),
|
|
16
|
+
disablePlayerActions: _propTypes.PropTypes.instanceOf(Array)
|
|
16
17
|
};
|
|
17
18
|
function SettingsMenuButton(_ref) {
|
|
18
19
|
var style = _ref.style,
|
|
19
20
|
player = _ref.player,
|
|
20
|
-
actions = _ref.actions
|
|
21
|
+
actions = _ref.actions,
|
|
22
|
+
_ref$disablePlayerAct = _ref.disablePlayerActions,
|
|
23
|
+
disablePlayerActions = _ref$disablePlayerAct === void 0 ? [] : _ref$disablePlayerAct;
|
|
21
24
|
return /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
|
|
22
25
|
icon: "settings",
|
|
23
26
|
position: "left",
|
|
@@ -26,7 +29,8 @@ function SettingsMenuButton(_ref) {
|
|
|
26
29
|
style: style
|
|
27
30
|
}, /*#__PURE__*/_react["default"].createElement(_SettingsMenu["default"], {
|
|
28
31
|
player: player,
|
|
29
|
-
actions: actions
|
|
32
|
+
actions: actions,
|
|
33
|
+
disablePlayerActions: disablePlayerActions
|
|
30
34
|
}));
|
|
31
35
|
}
|
|
32
36
|
SettingsMenuButton.propTypes = propTypes;
|
|
@@ -30,7 +30,9 @@ var propTypes = {
|
|
|
30
30
|
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
31
31
|
player: _propTypes.PropTypes.instanceOf(Object)
|
|
32
32
|
};
|
|
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:
|
|
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: ", ";\n }\n &.active {\n pointer-events: none;\n color: #00cec6;\n }\n }\n }\n"])), function (props) {
|
|
34
|
+
return props.disablePlayerActions.includes('playback_rate') ? '' : 'rgba(0, 206, 198, 0.1)';
|
|
35
|
+
});
|
|
34
36
|
var PlaybackRateControl = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
35
37
|
_inherits(PlaybackRateControl, _Component);
|
|
36
38
|
function PlaybackRateControl(props) {
|
|
@@ -43,6 +45,8 @@ var PlaybackRateControl = exports["default"] = /*#__PURE__*/function (_Component
|
|
|
43
45
|
_createClass(PlaybackRateControl, [{
|
|
44
46
|
key: "changePlaybackRate",
|
|
45
47
|
value: function changePlaybackRate(playbackRate) {
|
|
48
|
+
var disablePlayerActions = this.props.disablePlayerActions;
|
|
49
|
+
if (disablePlayerActions.includes('playback_rate')) return;
|
|
46
50
|
var actions = this.props.actions;
|
|
47
51
|
actions.changeRate(playbackRate, {
|
|
48
52
|
action: 'fast-forward',
|
|
@@ -53,8 +57,12 @@ var PlaybackRateControl = exports["default"] = /*#__PURE__*/function (_Component
|
|
|
53
57
|
key: "render",
|
|
54
58
|
value: function render() {
|
|
55
59
|
var _this2 = this;
|
|
56
|
-
var
|
|
57
|
-
|
|
60
|
+
var _this$props = this.props,
|
|
61
|
+
player = _this$props.player,
|
|
62
|
+
disablePlayerActions = _this$props.disablePlayerActions;
|
|
63
|
+
return /*#__PURE__*/_react["default"].createElement(PlaybackRateBlock, {
|
|
64
|
+
disablePlayerActions: disablePlayerActions
|
|
65
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
58
66
|
className: "playback-block"
|
|
59
67
|
}, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
|
|
60
68
|
name: "playback-rate",
|
|
@@ -19,15 +19,21 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
19
19
|
var propTypes = {
|
|
20
20
|
player: _propTypes.PropTypes.instanceOf(Object),
|
|
21
21
|
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
22
|
-
style: _propTypes.PropTypes.instanceOf(Object)
|
|
22
|
+
style: _propTypes.PropTypes.instanceOf(Object),
|
|
23
|
+
disablePlayerActions: _propTypes.PropTypes.instanceOf(Array)
|
|
23
24
|
};
|
|
24
|
-
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:
|
|
25
|
+
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) {
|
|
26
|
+
return props.disablePlayerActions.includes('playback_rate') ? 'not-allowed' : 'pointer';
|
|
27
|
+
});
|
|
25
28
|
function SettingsMenu(_ref) {
|
|
26
29
|
var player = _ref.player,
|
|
27
30
|
actions = _ref.actions,
|
|
28
|
-
style = _ref.style
|
|
31
|
+
style = _ref.style,
|
|
32
|
+
_ref$disablePlayerAct = _ref.disablePlayerActions,
|
|
33
|
+
disablePlayerActions = _ref$disablePlayerAct === void 0 ? [] : _ref$disablePlayerAct;
|
|
29
34
|
return /*#__PURE__*/_react["default"].createElement(SettingsMenuContainer, {
|
|
30
|
-
style: style
|
|
35
|
+
style: style,
|
|
36
|
+
disablePlayerActions: disablePlayerActions
|
|
31
37
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
32
38
|
className: "settings-menu-tile"
|
|
33
39
|
}, /*#__PURE__*/_react["default"].createElement(_SafeAreaControl["default"], {
|
|
@@ -37,7 +43,8 @@ function SettingsMenu(_ref) {
|
|
|
37
43
|
className: "settings-menu-tile"
|
|
38
44
|
}, /*#__PURE__*/_react["default"].createElement(_PlaybackRateControl["default"], {
|
|
39
45
|
player: player,
|
|
40
|
-
actions: actions
|
|
46
|
+
actions: actions,
|
|
47
|
+
disablePlayerActions: disablePlayerActions
|
|
41
48
|
})));
|
|
42
49
|
}
|
|
43
50
|
SettingsMenu.propTypes = propTypes;
|