@desynova-digital/player 3.9.7 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Player.js +945 -0
- package/control/AudioTracksMenuButton.js +91 -0
- package/control/AudioTracksMenuButton.jsx +80 -0
- package/control/ControlBar.js +303 -0
- package/control/ControlBar.jsx +264 -0
- package/control/CurrentTimeDisplay.js +34 -0
- package/control/CurrentTimeDisplay.jsx +35 -0
- package/control/DurationDisplay.js +38 -0
- package/control/DurationDisplay.jsx +48 -0
- package/control/ForwardBackwardControl.js +76 -0
- package/control/ForwardBackwardControl.jsx +79 -0
- package/control/FullscreenToggle.js +82 -0
- package/control/FullscreenToggle.jsx +83 -0
- package/control/MarkInControl.js +124 -0
- package/control/MarkInControl.jsx +109 -0
- package/control/MarkOutControl.js +137 -0
- package/control/MarkOutControl.jsx +131 -0
- package/control/MarkerBar.js +127 -0
- package/control/MarkerBar.jsx +107 -0
- package/control/MarkingControl.js +82 -0
- package/control/MarkingControl.jsx +143 -0
- package/control/MarkingDuration.js +44 -0
- package/control/MarkingPreview.js +49 -0
- package/control/MarkingPreview.jsx +60 -0
- package/control/PlayBackRateControl.js +106 -0
- package/control/PlayBackRateControl.jsx +106 -0
- package/control/PlayProgressBar.js +61 -0
- package/control/PlayProgressBar.jsx +92 -0
- package/control/PlayToggle.js +56 -0
- package/control/PlayToggle.jsx +57 -0
- package/control/PointersBar.js +231 -0
- package/control/PointersBar.jsx +286 -0
- package/control/ProgressControl.js +127 -0
- package/control/ProgressControl.jsx +155 -0
- package/control/SeekBar.js +204 -0
- package/control/SeekBar.jsx +229 -0
- package/control/SettingsMenuButton.js +63 -0
- package/control/SettingsMenuButton.jsx +69 -0
- package/control/Slider.js +274 -0
- package/control/Slider.jsx +243 -0
- package/control/Timeline.js +118 -0
- package/control/Timeline.jsx +131 -0
- package/control/VolumeBar.js +198 -0
- package/control/VolumeBar.jsx +174 -0
- package/control/VolumeLevel.js +61 -0
- package/control/VolumeLevel.jsx +66 -0
- package/control/VolumneMenuButton.js +112 -0
- package/control/VolumneMenuButton.jsx +111 -0
- package/header/Header.js +309 -0
- package/header/Header.jsx +479 -0
- package/index.js +9 -151
- package/media/AudioMeter.js +381 -0
- package/media/AudioMeter.jsx +411 -0
- package/media/SDOutline.js +82 -0
- package/media/SDOutline.jsx +90 -0
- package/media/Video.js +684 -0
- package/media/Video.jsx +714 -0
- package/package.json +5 -1
- package/playlist/Playlist.js +67 -0
- package/playlist/Playlist.jsx +91 -0
- package/playlist/index.js +13 -0
- package/shortcuts/Shortcut.js +662 -0
- package/utils/Menu.js +50 -0
- package/utils/Menu.jsx +105 -0
- package/{colors.js → utils/colors.js} +13 -13
- package/utils/dom.js +6 -16
- package/utils/index.js +52 -122
- package/Manager.js +0 -124
- package/actions/player.js +0 -375
- package/actions/video.js +0 -230
- package/components/AudioMeter.js +0 -414
- package/components/BigPlayButton.js +0 -110
- package/components/ImageViewer.js +0 -318
- package/components/MarkerBar.js +0 -138
- package/components/Menu.js +0 -77
- package/components/Player.js +0 -821
- package/components/PlayerHeader.js +0 -472
- package/components/Playlist.js +0 -133
- package/components/PointersBar.js +0 -299
- package/components/PosterImage.js +0 -61
- package/components/SDOutline.js +0 -68
- package/components/Shortcut.js +0 -621
- package/components/Slider.js +0 -317
- package/components/TagsBar.js +0 -100
- package/components/Video.js +0 -1431
- package/components/control-bar/AudioTracksMenuButton.js +0 -113
- package/components/control-bar/CameraButton.js +0 -88
- package/components/control-bar/CommentsButton.js +0 -216
- package/components/control-bar/ControlBar.js +0 -260
- package/components/control-bar/EditorControlMenuButton.js +0 -412
- package/components/control-bar/ForwardControl.js +0 -17
- package/components/control-bar/ForwardReplayControl.js +0 -122
- package/components/control-bar/FullscreenToggle.js +0 -101
- package/components/control-bar/PlayToggle.js +0 -98
- package/components/control-bar/ReplayControl.js +0 -17
- package/components/control-bar/SettingsMenuButton.js +0 -43
- package/components/control-bar/SubtitleLanguagesMenuButton.js +0 -174
- package/components/control-bar/VolumeMenuButton.js +0 -134
- package/components/control-bar/ZoomMenuButton.js +0 -116
- package/components/marking-controls/MarkInControl.js +0 -140
- package/components/marking-controls/MarkOutControl.js +0 -155
- package/components/marking-controls/MarkingAddButton.js +0 -94
- package/components/marking-controls/MarkingControl.js +0 -135
- package/components/marking-controls/MarkingDeleteButton.js +0 -84
- package/components/marking-controls/MarkingDuration.js +0 -77
- package/components/marking-controls/MarkingPreview.js +0 -86
- package/components/progress-bar/AudioWaveform.js +0 -144
- package/components/progress-bar/LoadProgressBar.js +0 -90
- package/components/progress-bar/MouseTimeDisplay.js +0 -53
- package/components/progress-bar/PlayProgressBar.js +0 -79
- package/components/progress-bar/ProgressControl.js +0 -222
- package/components/progress-bar/SeekBar.js +0 -261
- package/components/progress-bar/Timeline.js +0 -134
- package/components/settings-menu-control/PlaybackRateControl.js +0 -147
- package/components/settings-menu-control/SafeAreaControl.js +0 -92
- package/components/settings-menu-control/SettingsMenu.js +0 -68
- package/components/settings-menu-control/SubtitleControl.js +0 -1
- package/components/time-controls/CurrentTimeDisplay.js +0 -53
- package/components/time-controls/DurationDisplay.js +0 -51
- package/components/time-controls/TimeDivider.js +0 -41
- package/components/volume-control/VolumeBar.js +0 -216
- package/components/volume-control/VolumeControl.js +0 -35
- package/components/volume-control/VolumeLevel.js +0 -78
- package/components/zoom-control/ZoomBar.js +0 -189
- package/components/zoom-control/ZoomLevel.js +0 -68
- package/reducers/index.js +0 -23
- package/reducers/operation.js +0 -36
- package/reducers/player.js +0 -222
- package/utils/browser.js +0 -29
- package/utils/fullscreen.js +0 -73
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = SettingsMenu;
|
|
7
|
-
|
|
8
|
-
var _propTypes = require('prop-types');
|
|
9
|
-
|
|
10
|
-
var _react = require('react');
|
|
11
|
-
|
|
12
|
-
var _react2 = _interopRequireDefault(_react);
|
|
13
|
-
|
|
14
|
-
var _styledComponents = require('styled-components');
|
|
15
|
-
|
|
16
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
17
|
-
|
|
18
|
-
var _SafeAreaControl = require('./SafeAreaControl');
|
|
19
|
-
|
|
20
|
-
var _SafeAreaControl2 = _interopRequireDefault(_SafeAreaControl);
|
|
21
|
-
|
|
22
|
-
var _PlaybackRateControl = require('./PlaybackRateControl');
|
|
23
|
-
|
|
24
|
-
var _PlaybackRateControl2 = _interopRequireDefault(_PlaybackRateControl);
|
|
25
|
-
|
|
26
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
-
|
|
28
|
-
/*
|
|
29
|
-
* import SubtitleControl from './SubtitleControl';
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
var propTypes = {
|
|
33
|
-
player: _propTypes.PropTypes.instanceOf(Object),
|
|
34
|
-
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
35
|
-
style: _propTypes.PropTypes.instanceOf(Object)
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
var SettingsMenuContainer = _styledComponents2.default.div.withConfig({
|
|
39
|
-
displayName: 'SettingsMenu__SettingsMenuContainer',
|
|
40
|
-
componentId: 'sc-1sn8yg8-0'
|
|
41
|
-
})(['width:100%;position:relative;.settings-menu-tile{background:transparent;div{padding:15px;cursor:pointer;}}']);
|
|
42
|
-
|
|
43
|
-
function SettingsMenu(_ref) {
|
|
44
|
-
var player = _ref.player,
|
|
45
|
-
actions = _ref.actions,
|
|
46
|
-
style = _ref.style;
|
|
47
|
-
|
|
48
|
-
return _react2.default.createElement(
|
|
49
|
-
SettingsMenuContainer,
|
|
50
|
-
{ style: style },
|
|
51
|
-
_react2.default.createElement(
|
|
52
|
-
'div',
|
|
53
|
-
{ className: 'settings-menu-tile' },
|
|
54
|
-
_react2.default.createElement(_SafeAreaControl2.default, { player: player, actions: actions })
|
|
55
|
-
),
|
|
56
|
-
_react2.default.createElement(
|
|
57
|
-
'div',
|
|
58
|
-
{ className: 'settings-menu-tile' },
|
|
59
|
-
_react2.default.createElement(_PlaybackRateControl2.default, {
|
|
60
|
-
player: player,
|
|
61
|
-
actions: actions
|
|
62
|
-
})
|
|
63
|
-
)
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
SettingsMenu.propTypes = propTypes;
|
|
68
|
-
SettingsMenu.displayName = 'SettingsMenu';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _propTypes = require('prop-types');
|
|
8
|
-
|
|
9
|
-
var _react = require('react');
|
|
10
|
-
|
|
11
|
-
var _react2 = _interopRequireDefault(_react);
|
|
12
|
-
|
|
13
|
-
var _styledComponents = require('styled-components');
|
|
14
|
-
|
|
15
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
16
|
-
|
|
17
|
-
var _utils = require('../../utils');
|
|
18
|
-
|
|
19
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
-
|
|
21
|
-
var propTypes = {
|
|
22
|
-
player: _propTypes.PropTypes.instanceOf(Object),
|
|
23
|
-
initialTime: _propTypes.PropTypes.number,
|
|
24
|
-
frameRate: _propTypes.PropTypes.number
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
var defaultProps = {
|
|
28
|
-
player: {}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
var VideoCurrentTime = _styledComponents2.default.div.withConfig({
|
|
32
|
-
displayName: 'CurrentTimeDisplay__VideoCurrentTime',
|
|
33
|
-
componentId: 'sc-lqzvv-0'
|
|
34
|
-
})(['font-family:SFUIText-Regular;font-size:12px;letter-spacing:-0.6px;color:#ffffff;min-width:65px;text-align:left;']);
|
|
35
|
-
|
|
36
|
-
function CurrentTimeDisplay(_ref) {
|
|
37
|
-
var player = _ref.player,
|
|
38
|
-
initialTime = _ref.initialTime,
|
|
39
|
-
frameRate = _ref.frameRate;
|
|
40
|
-
|
|
41
|
-
var formattedTime = (0, _utils.secondsToTime)(player.currentTime, frameRate, initialTime);
|
|
42
|
-
return _react2.default.createElement(
|
|
43
|
-
VideoCurrentTime,
|
|
44
|
-
null,
|
|
45
|
-
formattedTime
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
CurrentTimeDisplay.propTypes = propTypes;
|
|
50
|
-
CurrentTimeDisplay.defaultProps = defaultProps;
|
|
51
|
-
CurrentTimeDisplay.displayName = 'CurrentTimeDisplay';
|
|
52
|
-
|
|
53
|
-
exports.default = CurrentTimeDisplay;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _propTypes = require('prop-types');
|
|
8
|
-
|
|
9
|
-
var _react = require('react');
|
|
10
|
-
|
|
11
|
-
var _react2 = _interopRequireDefault(_react);
|
|
12
|
-
|
|
13
|
-
var _styledComponents = require('styled-components');
|
|
14
|
-
|
|
15
|
-
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
16
|
-
|
|
17
|
-
var _utils = require('../../utils');
|
|
18
|
-
|
|
19
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
-
|
|
21
|
-
var propTypes = {
|
|
22
|
-
player: _propTypes.PropTypes.instanceOf(Object),
|
|
23
|
-
frameRate: _propTypes.PropTypes.number
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
var defaultProps = {
|
|
27
|
-
player: {}
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
var VideoTotalDuration = _styledComponents2.default.div.withConfig({
|
|
31
|
-
displayName: 'DurationDisplay__VideoTotalDuration',
|
|
32
|
-
componentId: 'sc-ymjmp3-0'
|
|
33
|
-
})(['font-family:SFUIText-Regular;font-size:12px;letter-spacing:-0.6px;margin:0 2px;color:#888888;']);
|
|
34
|
-
|
|
35
|
-
function DurationDisplay(_ref) {
|
|
36
|
-
var player = _ref.player,
|
|
37
|
-
frameRate = _ref.frameRate;
|
|
38
|
-
|
|
39
|
-
var formattedTime = (0, _utils.secondsToTime)(player.duration, frameRate);
|
|
40
|
-
return _react2.default.createElement(
|
|
41
|
-
VideoTotalDuration,
|
|
42
|
-
null,
|
|
43
|
-
formattedTime
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
DurationDisplay.propTypes = propTypes;
|
|
48
|
-
DurationDisplay.defaultProps = defaultProps;
|
|
49
|
-
DurationDisplay.displayName = 'DurationDisplay';
|
|
50
|
-
|
|
51
|
-
exports.default = DurationDisplay;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = TimeDivider;
|
|
7
|
-
|
|
8
|
-
var _react = require('react');
|
|
9
|
-
|
|
10
|
-
var _react2 = _interopRequireDefault(_react);
|
|
11
|
-
|
|
12
|
-
var _styledComponents = require('styled-components');
|
|
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
|
-
|
|
20
|
-
var propTypes = {
|
|
21
|
-
separator: _propTypes.PropTypes.string
|
|
22
|
-
};
|
|
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
|
-
|
|
29
|
-
function TimeDivider(_ref) {
|
|
30
|
-
var separator = _ref.separator;
|
|
31
|
-
|
|
32
|
-
var separatorText = separator || '/';
|
|
33
|
-
return _react2.default.createElement(
|
|
34
|
-
TimeSeperator,
|
|
35
|
-
{ dir: 'ltr' },
|
|
36
|
-
separatorText
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
TimeDivider.propTypes = propTypes;
|
|
41
|
-
TimeDivider.displayName = 'TimeDivider';
|
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
8
|
-
|
|
9
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
10
|
-
|
|
11
|
-
var _propTypes = require('prop-types');
|
|
12
|
-
|
|
13
|
-
var _react = require('react');
|
|
14
|
-
|
|
15
|
-
var _react2 = _interopRequireDefault(_react);
|
|
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
|
-
|
|
31
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
32
|
-
|
|
33
|
-
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; }
|
|
34
|
-
|
|
35
|
-
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; }
|
|
36
|
-
|
|
37
|
-
var propTypes = {
|
|
38
|
-
actions: _propTypes.PropTypes.instanceOf(Object),
|
|
39
|
-
player: _propTypes.PropTypes.instanceOf(Object),
|
|
40
|
-
vertical: _propTypes.PropTypes.bool,
|
|
41
|
-
onFocus: _propTypes.PropTypes.func,
|
|
42
|
-
onBlur: _propTypes.PropTypes.func
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
var defaultProps = {
|
|
46
|
-
actions: {},
|
|
47
|
-
player: {},
|
|
48
|
-
vertical: false,
|
|
49
|
-
onFocus: null,
|
|
50
|
-
onBlur: null
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
var VolumeControlBar = _styledComponents2.default.div.withConfig({
|
|
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) {
|
|
59
|
-
_inherits(VolumeBar, _Component);
|
|
60
|
-
|
|
61
|
-
function VolumeBar(props, context) {
|
|
62
|
-
_classCallCheck(this, VolumeBar);
|
|
63
|
-
|
|
64
|
-
var _this = _possibleConstructorReturn(this, (VolumeBar.__proto__ || Object.getPrototypeOf(VolumeBar)).call(this, props, context));
|
|
65
|
-
|
|
66
|
-
_this.state = {
|
|
67
|
-
percentage: '0%'
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
_this.handleMouseMove = _this.handleMouseMove.bind(_this);
|
|
71
|
-
_this.handlePercentageChange = _this.handlePercentageChange.bind(_this);
|
|
72
|
-
_this.checkMuted = _this.checkMuted.bind(_this);
|
|
73
|
-
_this.getPercent = _this.getPercent.bind(_this);
|
|
74
|
-
_this.stepForward = _this.stepForward.bind(_this);
|
|
75
|
-
_this.stepBack = _this.stepBack.bind(_this);
|
|
76
|
-
_this.handleFocus = _this.handleFocus.bind(_this);
|
|
77
|
-
_this.handleBlur = _this.handleBlur.bind(_this);
|
|
78
|
-
_this.handleClick = _this.handleClick.bind(_this);
|
|
79
|
-
return _this;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
_createClass(VolumeBar, [{
|
|
83
|
-
key: 'componentDidMount',
|
|
84
|
-
value: function componentDidMount() {}
|
|
85
|
-
}, {
|
|
86
|
-
key: 'getPercent',
|
|
87
|
-
value: function getPercent() {
|
|
88
|
-
var player = this.props.player;
|
|
89
|
-
|
|
90
|
-
if (player.muted) {
|
|
91
|
-
return 0;
|
|
92
|
-
}
|
|
93
|
-
return player.volume;
|
|
94
|
-
}
|
|
95
|
-
}, {
|
|
96
|
-
key: 'checkMuted',
|
|
97
|
-
value: function checkMuted() {
|
|
98
|
-
var _props = this.props,
|
|
99
|
-
player = _props.player,
|
|
100
|
-
actions = _props.actions;
|
|
101
|
-
|
|
102
|
-
if (player.muted) {
|
|
103
|
-
actions.mute(false);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}, {
|
|
107
|
-
key: 'handleMouseMove',
|
|
108
|
-
value: function handleMouseMove(event) {
|
|
109
|
-
var actions = this.props.actions;
|
|
110
|
-
|
|
111
|
-
this.checkMuted();
|
|
112
|
-
var distance = this.slider.calculateDistance(event);
|
|
113
|
-
actions.changeVolume(distance);
|
|
114
|
-
}
|
|
115
|
-
}, {
|
|
116
|
-
key: 'stepForward',
|
|
117
|
-
value: function stepForward() {
|
|
118
|
-
var _props2 = this.props,
|
|
119
|
-
player = _props2.player,
|
|
120
|
-
actions = _props2.actions;
|
|
121
|
-
|
|
122
|
-
this.checkMuted();
|
|
123
|
-
actions.changeVolume(player.volume + 0.1);
|
|
124
|
-
}
|
|
125
|
-
}, {
|
|
126
|
-
key: 'stepBack',
|
|
127
|
-
value: function stepBack() {
|
|
128
|
-
var _props3 = this.props,
|
|
129
|
-
player = _props3.player,
|
|
130
|
-
actions = _props3.actions;
|
|
131
|
-
|
|
132
|
-
this.checkMuted();
|
|
133
|
-
actions.changeVolume(player.volume - 0.1);
|
|
134
|
-
}
|
|
135
|
-
}, {
|
|
136
|
-
key: 'handleFocus',
|
|
137
|
-
value: function handleFocus(e) {
|
|
138
|
-
var onFocus = this.props.onFocus;
|
|
139
|
-
|
|
140
|
-
if (onFocus) {
|
|
141
|
-
onFocus(e);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}, {
|
|
145
|
-
key: 'handleBlur',
|
|
146
|
-
value: function handleBlur(e) {
|
|
147
|
-
var onBlur = this.props.onBlur;
|
|
148
|
-
|
|
149
|
-
if (onBlur) {
|
|
150
|
-
onBlur(e);
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}, {
|
|
154
|
-
key: 'handlePercentageChange',
|
|
155
|
-
value: function handlePercentageChange(percent) {
|
|
156
|
-
var percentage = this.state.percentage;
|
|
157
|
-
|
|
158
|
-
if (percent !== percentage) {
|
|
159
|
-
this.setState({
|
|
160
|
-
percentage: percent
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}, {
|
|
165
|
-
key: 'handleClick',
|
|
166
|
-
value: function handleClick(event) {
|
|
167
|
-
event.stopPropagation();
|
|
168
|
-
}
|
|
169
|
-
}, {
|
|
170
|
-
key: 'render',
|
|
171
|
-
value: function render() {
|
|
172
|
-
var _this2 = this;
|
|
173
|
-
|
|
174
|
-
var _props4 = this.props,
|
|
175
|
-
player = _props4.player,
|
|
176
|
-
vertical = _props4.vertical;
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
var volume = (player.volume * 100).toFixed(2);
|
|
180
|
-
return _react2.default.createElement(
|
|
181
|
-
VolumeControlBar,
|
|
182
|
-
null,
|
|
183
|
-
_react2.default.createElement(
|
|
184
|
-
_Slider2.default,
|
|
185
|
-
_extends({
|
|
186
|
-
ref: function ref(c) {
|
|
187
|
-
_this2.slider = c;
|
|
188
|
-
},
|
|
189
|
-
label: 'volume level',
|
|
190
|
-
valuenow: volume,
|
|
191
|
-
valuetext: volume + '%',
|
|
192
|
-
onMouseMove: this.handleMouseMove,
|
|
193
|
-
onFocus: this.handleFocus,
|
|
194
|
-
onBlur: this.handleBlur,
|
|
195
|
-
onClick: this.handleClick,
|
|
196
|
-
sliderActive: this.handleFocus,
|
|
197
|
-
sliderInactive: this.handleBlur,
|
|
198
|
-
getPercent: this.getPercent,
|
|
199
|
-
onPercentageChange: this.handlePercentageChange,
|
|
200
|
-
stepForward: this.stepForward,
|
|
201
|
-
stepBack: this.stepBack
|
|
202
|
-
}, this.props),
|
|
203
|
-
_react2.default.createElement(_VolumeLevel2.default, _extends({ vertical: vertical }, this.props))
|
|
204
|
-
)
|
|
205
|
-
);
|
|
206
|
-
}
|
|
207
|
-
}]);
|
|
208
|
-
|
|
209
|
-
return VolumeBar;
|
|
210
|
-
}(_react.Component);
|
|
211
|
-
|
|
212
|
-
VolumeBar.propTypes = propTypes;
|
|
213
|
-
VolumeBar.defaultProps = defaultProps;
|
|
214
|
-
VolumeBar.displayName = 'VolumeBar';
|
|
215
|
-
|
|
216
|
-
exports.default = VolumeBar;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = VolumeControl;
|
|
7
|
-
|
|
8
|
-
var _react = require('react');
|
|
9
|
-
|
|
10
|
-
var _react2 = _interopRequireDefault(_react);
|
|
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
|
-
|
|
20
|
-
var propTypes = {
|
|
21
|
-
props: _propTypes.PropTypes.instanceOf(Object)
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
function VolumeControl(_ref) {
|
|
25
|
-
var props = _ref.props;
|
|
26
|
-
|
|
27
|
-
return _react2.default.createElement(
|
|
28
|
-
'div',
|
|
29
|
-
null,
|
|
30
|
-
_react2.default.createElement(_VolumeBar2.default, props)
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
VolumeControl.displayName = 'VolumeControl';
|
|
35
|
-
VolumeControl.propTypes = propTypes;
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _propTypes = require('prop-types');
|
|
8
|
-
|
|
9
|
-
var _react = require('react');
|
|
10
|
-
|
|
11
|
-
var _react2 = _interopRequireDefault(_react);
|
|
12
|
-
|
|
13
|
-
var _styledComponents = require('styled-components');
|
|
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
|
-
|
|
23
|
-
var propTypes = {
|
|
24
|
-
playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
|
|
25
|
-
assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
|
|
26
|
-
percentage: _propTypes.PropTypes.string,
|
|
27
|
-
vertical: _propTypes.PropTypes.bool
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
var defaultProps = {
|
|
31
|
-
percentage: '100%',
|
|
32
|
-
vertical: false
|
|
33
|
-
};
|
|
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) {
|
|
39
|
-
return props.vertical ? '100%' : '0px';
|
|
40
|
-
}, function (props) {
|
|
41
|
-
return props.vertical ? '0' : '100%';
|
|
42
|
-
}, function (props) {
|
|
43
|
-
return props.vertical ? 'initial' : '0px';
|
|
44
|
-
}, function (props) {
|
|
45
|
-
return props.vertical ? '0px' : 'initial';
|
|
46
|
-
}, function (props) {
|
|
47
|
-
return _colors2.default.common.video[props.assetType].base;
|
|
48
|
-
}, function (props) {
|
|
49
|
-
return _colors2.default.common.video[props.assetType].base;
|
|
50
|
-
}, function (props) {
|
|
51
|
-
return _colors2.default.common.video[props.assetType].base;
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
function VolumeLevel(_ref) {
|
|
55
|
-
var percentage = _ref.percentage,
|
|
56
|
-
vertical = _ref.vertical,
|
|
57
|
-
assetType = _ref.assetType,
|
|
58
|
-
playerType = _ref.playerType;
|
|
59
|
-
|
|
60
|
-
var style = {};
|
|
61
|
-
if (vertical) {
|
|
62
|
-
style.height = percentage;
|
|
63
|
-
} else {
|
|
64
|
-
style.width = percentage;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
return _react2.default.createElement(VolumeLevelBar, {
|
|
68
|
-
style: style,
|
|
69
|
-
assetType: assetType,
|
|
70
|
-
playerType: playerType,
|
|
71
|
-
vertical: vertical
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
VolumeLevel.propTypes = propTypes;
|
|
76
|
-
VolumeLevel.defaultProps = defaultProps;
|
|
77
|
-
VolumeLevel.displayName = 'VolumeLevel';
|
|
78
|
-
exports.default = VolumeLevel;
|