@desynova-digital/player 3.9.7 → 3.9.8
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 +267 -327
- 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,41 +1,25 @@
|
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
15
|
-
|
|
16
|
-
var _propTypes = require('prop-types');
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
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) } })); }
|
|
20
13
|
var propTypes = {
|
|
21
14
|
separator: _propTypes.PropTypes.string
|
|
22
15
|
};
|
|
23
|
-
|
|
24
|
-
var TimeSeperator = _styledComponents2.default.div.withConfig({
|
|
25
|
-
displayName: 'TimeDivider__TimeSeperator',
|
|
26
|
-
componentId: 'sc-tgg0s-0'
|
|
27
|
-
})(['color:#888888;margin:0 2px;font-family:SFUIText-Regular;font-size:12px;letter-spacing:-0.6px;']);
|
|
28
|
-
|
|
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"])));
|
|
29
17
|
function TimeDivider(_ref) {
|
|
30
18
|
var separator = _ref.separator;
|
|
31
|
-
|
|
32
19
|
var separatorText = separator || '/';
|
|
33
|
-
return
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
separatorText
|
|
37
|
-
);
|
|
20
|
+
return /*#__PURE__*/_react["default"].createElement(TimeSeperator, {
|
|
21
|
+
dir: "ltr"
|
|
22
|
+
}, separatorText);
|
|
38
23
|
}
|
|
39
|
-
|
|
40
24
|
TimeDivider.propTypes = propTypes;
|
|
41
25
|
TimeDivider.displayName = 'TimeDivider';
|
|
@@ -1,39 +1,33 @@
|
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
var _styledComponents = require('styled-components');
|
|
18
|
-
|
|
19
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
20
|
-
|
|
21
|
-
var _Slider = require('../Slider');
|
|
22
|
-
|
|
23
|
-
var _Slider2 = _interopRequireDefault(_Slider);
|
|
24
|
-
|
|
25
|
-
var _VolumeLevel = require('./VolumeLevel');
|
|
26
|
-
|
|
27
|
-
var _VolumeLevel2 = _interopRequireDefault(_VolumeLevel);
|
|
28
|
-
|
|
29
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
30
|
-
|
|
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 _Slider = _interopRequireDefault(require("../Slider"));
|
|
12
|
+
var _VolumeLevel = _interopRequireDefault(require("./VolumeLevel"));
|
|
13
|
+
var _templateObject;
|
|
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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
31
18
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
32
|
-
|
|
33
|
-
function
|
|
34
|
-
|
|
35
|
-
function
|
|
36
|
-
|
|
19
|
+
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); } }
|
|
20
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
21
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
22
|
+
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); }
|
|
23
|
+
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); }
|
|
24
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
25
|
+
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); }; }
|
|
26
|
+
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); }
|
|
27
|
+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
28
|
+
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; } }
|
|
29
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
30
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
37
31
|
var propTypes = {
|
|
38
32
|
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
39
33
|
player: _propTypes.PropTypes.instanceOf(Object),
|
|
@@ -41,7 +35,6 @@ var propTypes = {
|
|
|
41
35
|
onFocus: _propTypes.PropTypes.func,
|
|
42
36
|
onBlur: _propTypes.PropTypes.func
|
|
43
37
|
};
|
|
44
|
-
|
|
45
38
|
var defaultProps = {
|
|
46
39
|
actions: {},
|
|
47
40
|
player: {},
|
|
@@ -49,112 +42,96 @@ var defaultProps = {
|
|
|
49
42
|
onFocus: null,
|
|
50
43
|
onBlur: null
|
|
51
44
|
};
|
|
52
|
-
|
|
53
|
-
var
|
|
54
|
-
displayName: 'VolumeBar__VolumeControlBar',
|
|
55
|
-
componentId: 'sc-10ehvlf-0'
|
|
56
|
-
})(['height:85%;position:absolute;cursor:pointer;z-index:1;width:2px;margin:0 auto;top:50%;left:50%;transform:translate(-50%,-50%);']);
|
|
57
|
-
|
|
58
|
-
var VolumeBar = function (_Component) {
|
|
45
|
+
var VolumeControlBar = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 85%;\n position: absolute;\n cursor: pointer;\n z-index: 1;\n width: 2px;\n margin: 0 auto;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
46
|
+
var VolumeBar = /*#__PURE__*/function (_Component) {
|
|
59
47
|
_inherits(VolumeBar, _Component);
|
|
60
|
-
|
|
48
|
+
var _super = _createSuper(VolumeBar);
|
|
61
49
|
function VolumeBar(props, context) {
|
|
50
|
+
var _this;
|
|
62
51
|
_classCallCheck(this, VolumeBar);
|
|
63
|
-
|
|
64
|
-
var _this = _possibleConstructorReturn(this, (VolumeBar.__proto__ || Object.getPrototypeOf(VolumeBar)).call(this, props, context));
|
|
65
|
-
|
|
52
|
+
_this = _super.call(this, props, context);
|
|
66
53
|
_this.state = {
|
|
67
54
|
percentage: '0%'
|
|
68
55
|
};
|
|
69
|
-
|
|
70
|
-
_this.
|
|
71
|
-
_this.
|
|
72
|
-
_this.
|
|
73
|
-
_this.
|
|
74
|
-
_this.
|
|
75
|
-
_this.
|
|
76
|
-
_this.
|
|
77
|
-
_this.
|
|
78
|
-
_this.handleClick = _this.handleClick.bind(_this);
|
|
56
|
+
_this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
|
|
57
|
+
_this.handlePercentageChange = _this.handlePercentageChange.bind(_assertThisInitialized(_this));
|
|
58
|
+
_this.checkMuted = _this.checkMuted.bind(_assertThisInitialized(_this));
|
|
59
|
+
_this.getPercent = _this.getPercent.bind(_assertThisInitialized(_this));
|
|
60
|
+
_this.stepForward = _this.stepForward.bind(_assertThisInitialized(_this));
|
|
61
|
+
_this.stepBack = _this.stepBack.bind(_assertThisInitialized(_this));
|
|
62
|
+
_this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
|
|
63
|
+
_this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
|
|
64
|
+
_this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
|
|
79
65
|
return _this;
|
|
80
66
|
}
|
|
81
|
-
|
|
82
67
|
_createClass(VolumeBar, [{
|
|
83
|
-
key:
|
|
68
|
+
key: "componentDidMount",
|
|
84
69
|
value: function componentDidMount() {}
|
|
85
70
|
}, {
|
|
86
|
-
key:
|
|
71
|
+
key: "getPercent",
|
|
87
72
|
value: function getPercent() {
|
|
88
73
|
var player = this.props.player;
|
|
89
|
-
|
|
90
74
|
if (player.muted) {
|
|
91
75
|
return 0;
|
|
92
76
|
}
|
|
93
77
|
return player.volume;
|
|
94
78
|
}
|
|
95
79
|
}, {
|
|
96
|
-
key:
|
|
80
|
+
key: "checkMuted",
|
|
97
81
|
value: function checkMuted() {
|
|
98
|
-
var
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
82
|
+
var _this$props = this.props,
|
|
83
|
+
player = _this$props.player,
|
|
84
|
+
actions = _this$props.actions;
|
|
102
85
|
if (player.muted) {
|
|
103
86
|
actions.mute(false);
|
|
104
87
|
}
|
|
105
88
|
}
|
|
106
89
|
}, {
|
|
107
|
-
key:
|
|
90
|
+
key: "handleMouseMove",
|
|
108
91
|
value: function handleMouseMove(event) {
|
|
109
92
|
var actions = this.props.actions;
|
|
110
|
-
|
|
111
93
|
this.checkMuted();
|
|
112
94
|
var distance = this.slider.calculateDistance(event);
|
|
113
95
|
actions.changeVolume(distance);
|
|
114
96
|
}
|
|
115
97
|
}, {
|
|
116
|
-
key:
|
|
98
|
+
key: "stepForward",
|
|
117
99
|
value: function stepForward() {
|
|
118
|
-
var
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
100
|
+
var _this$props2 = this.props,
|
|
101
|
+
player = _this$props2.player,
|
|
102
|
+
actions = _this$props2.actions;
|
|
122
103
|
this.checkMuted();
|
|
123
104
|
actions.changeVolume(player.volume + 0.1);
|
|
124
105
|
}
|
|
125
106
|
}, {
|
|
126
|
-
key:
|
|
107
|
+
key: "stepBack",
|
|
127
108
|
value: function stepBack() {
|
|
128
|
-
var
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
109
|
+
var _this$props3 = this.props,
|
|
110
|
+
player = _this$props3.player,
|
|
111
|
+
actions = _this$props3.actions;
|
|
132
112
|
this.checkMuted();
|
|
133
113
|
actions.changeVolume(player.volume - 0.1);
|
|
134
114
|
}
|
|
135
115
|
}, {
|
|
136
|
-
key:
|
|
116
|
+
key: "handleFocus",
|
|
137
117
|
value: function handleFocus(e) {
|
|
138
118
|
var onFocus = this.props.onFocus;
|
|
139
|
-
|
|
140
119
|
if (onFocus) {
|
|
141
120
|
onFocus(e);
|
|
142
121
|
}
|
|
143
122
|
}
|
|
144
123
|
}, {
|
|
145
|
-
key:
|
|
124
|
+
key: "handleBlur",
|
|
146
125
|
value: function handleBlur(e) {
|
|
147
126
|
var onBlur = this.props.onBlur;
|
|
148
|
-
|
|
149
127
|
if (onBlur) {
|
|
150
128
|
onBlur(e);
|
|
151
129
|
}
|
|
152
130
|
}
|
|
153
131
|
}, {
|
|
154
|
-
key:
|
|
132
|
+
key: "handlePercentageChange",
|
|
155
133
|
value: function handlePercentageChange(percent) {
|
|
156
134
|
var percentage = this.state.percentage;
|
|
157
|
-
|
|
158
135
|
if (percent !== percentage) {
|
|
159
136
|
this.setState({
|
|
160
137
|
percentage: percent
|
|
@@ -162,55 +139,44 @@ var VolumeBar = function (_Component) {
|
|
|
162
139
|
}
|
|
163
140
|
}
|
|
164
141
|
}, {
|
|
165
|
-
key:
|
|
142
|
+
key: "handleClick",
|
|
166
143
|
value: function handleClick(event) {
|
|
167
144
|
event.stopPropagation();
|
|
168
145
|
}
|
|
169
146
|
}, {
|
|
170
|
-
key:
|
|
147
|
+
key: "render",
|
|
171
148
|
value: function render() {
|
|
172
149
|
var _this2 = this;
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
vertical = _props4.vertical;
|
|
177
|
-
|
|
178
|
-
|
|
150
|
+
var _this$props4 = this.props,
|
|
151
|
+
player = _this$props4.player,
|
|
152
|
+
vertical = _this$props4.vertical;
|
|
179
153
|
var volume = (player.volume * 100).toFixed(2);
|
|
180
|
-
return
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
stepForward: this.stepForward,
|
|
201
|
-
stepBack: this.stepBack
|
|
202
|
-
}, this.props),
|
|
203
|
-
_react2.default.createElement(_VolumeLevel2.default, _extends({ vertical: vertical }, this.props))
|
|
204
|
-
)
|
|
205
|
-
);
|
|
154
|
+
return /*#__PURE__*/_react["default"].createElement(VolumeControlBar, null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], _extends({
|
|
155
|
+
ref: function ref(c) {
|
|
156
|
+
_this2.slider = c;
|
|
157
|
+
},
|
|
158
|
+
label: "volume level",
|
|
159
|
+
valuenow: volume,
|
|
160
|
+
valuetext: "".concat(volume, "%"),
|
|
161
|
+
onMouseMove: this.handleMouseMove,
|
|
162
|
+
onFocus: this.handleFocus,
|
|
163
|
+
onBlur: this.handleBlur,
|
|
164
|
+
onClick: this.handleClick,
|
|
165
|
+
sliderActive: this.handleFocus,
|
|
166
|
+
sliderInactive: this.handleBlur,
|
|
167
|
+
getPercent: this.getPercent,
|
|
168
|
+
onPercentageChange: this.handlePercentageChange,
|
|
169
|
+
stepForward: this.stepForward,
|
|
170
|
+
stepBack: this.stepBack
|
|
171
|
+
}, this.props), /*#__PURE__*/_react["default"].createElement(_VolumeLevel["default"], _extends({
|
|
172
|
+
vertical: vertical
|
|
173
|
+
}, this.props))));
|
|
206
174
|
}
|
|
207
175
|
}]);
|
|
208
|
-
|
|
209
176
|
return VolumeBar;
|
|
210
177
|
}(_react.Component);
|
|
211
|
-
|
|
212
178
|
VolumeBar.propTypes = propTypes;
|
|
213
179
|
VolumeBar.defaultProps = defaultProps;
|
|
214
180
|
VolumeBar.displayName = 'VolumeBar';
|
|
215
|
-
|
|
216
|
-
exports
|
|
181
|
+
var _default = VolumeBar;
|
|
182
|
+
exports["default"] = _default;
|
|
@@ -1,35 +1,19 @@
|
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
var _propTypes = require('prop-types');
|
|
13
|
-
|
|
14
|
-
var _VolumeBar = require('./VolumeBar');
|
|
15
|
-
|
|
16
|
-
var _VolumeBar2 = _interopRequireDefault(_VolumeBar);
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
6
|
+
exports["default"] = VolumeControl;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
var _VolumeBar = _interopRequireDefault(require("./VolumeBar"));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
20
11
|
var propTypes = {
|
|
21
12
|
props: _propTypes.PropTypes.instanceOf(Object)
|
|
22
13
|
};
|
|
23
|
-
|
|
24
14
|
function VolumeControl(_ref) {
|
|
25
15
|
var props = _ref.props;
|
|
26
|
-
|
|
27
|
-
return _react2.default.createElement(
|
|
28
|
-
'div',
|
|
29
|
-
null,
|
|
30
|
-
_react2.default.createElement(_VolumeBar2.default, props)
|
|
31
|
-
);
|
|
16
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_VolumeBar["default"], props));
|
|
32
17
|
}
|
|
33
|
-
|
|
34
18
|
VolumeControl.displayName = 'VolumeControl';
|
|
35
19
|
VolumeControl.propTypes = propTypes;
|
|
@@ -1,41 +1,27 @@
|
|
|
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
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
16
|
-
|
|
17
|
-
var _colors = require('../../colors');
|
|
18
|
-
|
|
19
|
-
var _colors2 = _interopRequireDefault(_colors);
|
|
20
|
-
|
|
21
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
|
-
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _propTypes = require("prop-types");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _colors = _interopRequireDefault(require("../../colors"));
|
|
11
|
+
var _templateObject;
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
23
14
|
var propTypes = {
|
|
24
15
|
playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
|
|
25
16
|
assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
|
|
26
17
|
percentage: _propTypes.PropTypes.string,
|
|
27
18
|
vertical: _propTypes.PropTypes.bool
|
|
28
19
|
};
|
|
29
|
-
|
|
30
20
|
var defaultProps = {
|
|
31
21
|
percentage: '100%',
|
|
32
22
|
vertical: false
|
|
33
23
|
};
|
|
34
|
-
|
|
35
|
-
var VolumeLevelBar = _styledComponents2.default.div.withConfig({
|
|
36
|
-
displayName: 'VolumeLevel__VolumeLevelBar',
|
|
37
|
-
componentId: 'sc-1lvlqge-0'
|
|
38
|
-
})(['position:absolute;width:', ';height:', ';left:0;top:', ';bottom:', ';background:', ';&:after{content:\'\';width:8px;height:8px;position:absolute;background:', ';border-radius:100%;right:-3px;top:-4px;box-shadow:0 0 14px 1px ', ';}'], function (props) {
|
|
24
|
+
var VolumeLevelBar = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n width: ", ";\n height: ", ";\n left: 0;\n top: ", ";\n bottom: ", ";\n background: ", ";\n &:after {\n content: '';\n width: 8px;\n height: 8px;\n position: absolute;\n background: ", ";\n border-radius: 100%;\n right: -3px;\n top: -4px;\n box-shadow: 0 0 14px 1px\n ", ";\n }\n"])), function (props) {
|
|
39
25
|
return props.vertical ? '100%' : '0px';
|
|
40
26
|
}, function (props) {
|
|
41
27
|
return props.vertical ? '0' : '100%';
|
|
@@ -44,35 +30,32 @@ var VolumeLevelBar = _styledComponents2.default.div.withConfig({
|
|
|
44
30
|
}, function (props) {
|
|
45
31
|
return props.vertical ? '0px' : 'initial';
|
|
46
32
|
}, function (props) {
|
|
47
|
-
return
|
|
33
|
+
return _colors["default"].common.video[props.assetType].base;
|
|
48
34
|
}, function (props) {
|
|
49
|
-
return
|
|
35
|
+
return _colors["default"].common.video[props.assetType].base;
|
|
50
36
|
}, function (props) {
|
|
51
|
-
return
|
|
37
|
+
return _colors["default"].common.video[props.assetType].base;
|
|
52
38
|
});
|
|
53
|
-
|
|
54
39
|
function VolumeLevel(_ref) {
|
|
55
40
|
var percentage = _ref.percentage,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
41
|
+
vertical = _ref.vertical,
|
|
42
|
+
assetType = _ref.assetType,
|
|
43
|
+
playerType = _ref.playerType;
|
|
60
44
|
var style = {};
|
|
61
45
|
if (vertical) {
|
|
62
46
|
style.height = percentage;
|
|
63
47
|
} else {
|
|
64
48
|
style.width = percentage;
|
|
65
49
|
}
|
|
66
|
-
|
|
67
|
-
return _react2.default.createElement(VolumeLevelBar, {
|
|
50
|
+
return /*#__PURE__*/_react["default"].createElement(VolumeLevelBar, {
|
|
68
51
|
style: style,
|
|
69
52
|
assetType: assetType,
|
|
70
53
|
playerType: playerType,
|
|
71
54
|
vertical: vertical
|
|
72
55
|
});
|
|
73
56
|
}
|
|
74
|
-
|
|
75
57
|
VolumeLevel.propTypes = propTypes;
|
|
76
58
|
VolumeLevel.defaultProps = defaultProps;
|
|
77
59
|
VolumeLevel.displayName = 'VolumeLevel';
|
|
78
|
-
|
|
60
|
+
var _default = VolumeLevel;
|
|
61
|
+
exports["default"] = _default;
|