@desynova-digital/player 3.9.7 → 4.0.0

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.
Files changed (130) hide show
  1. package/Player.js +945 -0
  2. package/control/AudioTracksMenuButton.js +91 -0
  3. package/control/AudioTracksMenuButton.jsx +80 -0
  4. package/control/ControlBar.js +303 -0
  5. package/control/ControlBar.jsx +264 -0
  6. package/control/CurrentTimeDisplay.js +34 -0
  7. package/control/CurrentTimeDisplay.jsx +35 -0
  8. package/control/DurationDisplay.js +38 -0
  9. package/control/DurationDisplay.jsx +48 -0
  10. package/control/ForwardBackwardControl.js +76 -0
  11. package/control/ForwardBackwardControl.jsx +79 -0
  12. package/control/FullscreenToggle.js +82 -0
  13. package/control/FullscreenToggle.jsx +83 -0
  14. package/control/MarkInControl.js +124 -0
  15. package/control/MarkInControl.jsx +109 -0
  16. package/control/MarkOutControl.js +137 -0
  17. package/control/MarkOutControl.jsx +131 -0
  18. package/control/MarkerBar.js +127 -0
  19. package/control/MarkerBar.jsx +107 -0
  20. package/control/MarkingControl.js +82 -0
  21. package/control/MarkingControl.jsx +143 -0
  22. package/control/MarkingDuration.js +44 -0
  23. package/control/MarkingPreview.js +49 -0
  24. package/control/MarkingPreview.jsx +60 -0
  25. package/control/PlayBackRateControl.js +106 -0
  26. package/control/PlayBackRateControl.jsx +106 -0
  27. package/control/PlayProgressBar.js +61 -0
  28. package/control/PlayProgressBar.jsx +92 -0
  29. package/control/PlayToggle.js +56 -0
  30. package/control/PlayToggle.jsx +57 -0
  31. package/control/PointersBar.js +231 -0
  32. package/control/PointersBar.jsx +286 -0
  33. package/control/ProgressControl.js +127 -0
  34. package/control/ProgressControl.jsx +155 -0
  35. package/control/SeekBar.js +204 -0
  36. package/control/SeekBar.jsx +229 -0
  37. package/control/SettingsMenuButton.js +63 -0
  38. package/control/SettingsMenuButton.jsx +69 -0
  39. package/control/Slider.js +274 -0
  40. package/control/Slider.jsx +243 -0
  41. package/control/Timeline.js +118 -0
  42. package/control/Timeline.jsx +131 -0
  43. package/control/VolumeBar.js +198 -0
  44. package/control/VolumeBar.jsx +174 -0
  45. package/control/VolumeLevel.js +61 -0
  46. package/control/VolumeLevel.jsx +66 -0
  47. package/control/VolumneMenuButton.js +112 -0
  48. package/control/VolumneMenuButton.jsx +111 -0
  49. package/header/Header.js +309 -0
  50. package/header/Header.jsx +479 -0
  51. package/index.js +9 -151
  52. package/media/AudioMeter.js +381 -0
  53. package/media/AudioMeter.jsx +411 -0
  54. package/media/SDOutline.js +82 -0
  55. package/media/SDOutline.jsx +90 -0
  56. package/media/Video.js +684 -0
  57. package/media/Video.jsx +714 -0
  58. package/package.json +5 -1
  59. package/playlist/Playlist.js +67 -0
  60. package/playlist/Playlist.jsx +91 -0
  61. package/playlist/index.js +13 -0
  62. package/shortcuts/Shortcut.js +662 -0
  63. package/utils/Menu.js +50 -0
  64. package/utils/Menu.jsx +105 -0
  65. package/{colors.js → utils/colors.js} +13 -13
  66. package/utils/index.js +52 -122
  67. package/Manager.js +0 -124
  68. package/actions/player.js +0 -375
  69. package/actions/video.js +0 -230
  70. package/components/AudioMeter.js +0 -414
  71. package/components/BigPlayButton.js +0 -110
  72. package/components/ImageViewer.js +0 -318
  73. package/components/MarkerBar.js +0 -138
  74. package/components/Menu.js +0 -77
  75. package/components/Player.js +0 -821
  76. package/components/PlayerHeader.js +0 -472
  77. package/components/Playlist.js +0 -133
  78. package/components/PointersBar.js +0 -299
  79. package/components/PosterImage.js +0 -61
  80. package/components/SDOutline.js +0 -68
  81. package/components/Shortcut.js +0 -621
  82. package/components/Slider.js +0 -317
  83. package/components/TagsBar.js +0 -100
  84. package/components/Video.js +0 -1431
  85. package/components/control-bar/AudioTracksMenuButton.js +0 -113
  86. package/components/control-bar/CameraButton.js +0 -88
  87. package/components/control-bar/CommentsButton.js +0 -216
  88. package/components/control-bar/ControlBar.js +0 -260
  89. package/components/control-bar/EditorControlMenuButton.js +0 -412
  90. package/components/control-bar/ForwardControl.js +0 -17
  91. package/components/control-bar/ForwardReplayControl.js +0 -122
  92. package/components/control-bar/FullscreenToggle.js +0 -101
  93. package/components/control-bar/PlayToggle.js +0 -98
  94. package/components/control-bar/ReplayControl.js +0 -17
  95. package/components/control-bar/SettingsMenuButton.js +0 -43
  96. package/components/control-bar/SubtitleLanguagesMenuButton.js +0 -174
  97. package/components/control-bar/VolumeMenuButton.js +0 -134
  98. package/components/control-bar/ZoomMenuButton.js +0 -116
  99. package/components/marking-controls/MarkInControl.js +0 -140
  100. package/components/marking-controls/MarkOutControl.js +0 -155
  101. package/components/marking-controls/MarkingAddButton.js +0 -94
  102. package/components/marking-controls/MarkingControl.js +0 -135
  103. package/components/marking-controls/MarkingDeleteButton.js +0 -84
  104. package/components/marking-controls/MarkingDuration.js +0 -77
  105. package/components/marking-controls/MarkingPreview.js +0 -86
  106. package/components/progress-bar/AudioWaveform.js +0 -144
  107. package/components/progress-bar/LoadProgressBar.js +0 -90
  108. package/components/progress-bar/MouseTimeDisplay.js +0 -53
  109. package/components/progress-bar/PlayProgressBar.js +0 -79
  110. package/components/progress-bar/ProgressControl.js +0 -222
  111. package/components/progress-bar/SeekBar.js +0 -261
  112. package/components/progress-bar/Timeline.js +0 -134
  113. package/components/settings-menu-control/PlaybackRateControl.js +0 -147
  114. package/components/settings-menu-control/SafeAreaControl.js +0 -92
  115. package/components/settings-menu-control/SettingsMenu.js +0 -68
  116. package/components/settings-menu-control/SubtitleControl.js +0 -1
  117. package/components/time-controls/CurrentTimeDisplay.js +0 -53
  118. package/components/time-controls/DurationDisplay.js +0 -51
  119. package/components/time-controls/TimeDivider.js +0 -41
  120. package/components/volume-control/VolumeBar.js +0 -216
  121. package/components/volume-control/VolumeControl.js +0 -35
  122. package/components/volume-control/VolumeLevel.js +0 -78
  123. package/components/zoom-control/ZoomBar.js +0 -189
  124. package/components/zoom-control/ZoomLevel.js +0 -68
  125. package/reducers/index.js +0 -23
  126. package/reducers/operation.js +0 -36
  127. package/reducers/player.js +0 -222
  128. package/utils/browser.js +0 -29
  129. package/utils/dom.js +0 -104
  130. package/utils/fullscreen.js +0 -73
@@ -1,86 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
-
7
- 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; }; }();
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 _propTypes = require('prop-types');
18
-
19
- var _components = require('@desynova-digital/components');
20
-
21
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
22
-
23
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
24
-
25
- 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; }
26
-
27
- 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; }
28
-
29
- var propTypes = {
30
- actions: _propTypes.PropTypes.instanceOf(Object),
31
- leftMarker: _propTypes.PropTypes.number
32
- };
33
-
34
- var PreviewButton = (0, _styledComponents2.default)(_components.Button).withConfig({
35
- displayName: 'MarkingPreview__PreviewButton',
36
- componentId: 'sc-1gqitva-0'
37
- })(['background:transparent;border-color:#afb2ba;border-width:1px;margin:0 5px 0 5px;&:hover,&:focus{background:transparent;border-color:#afb2ba;}', '{svg path{fill:#afb2ba;}}'], _components.Icon.Element);
38
-
39
- var MarkingPreview = function (_Component) {
40
- _inherits(MarkingPreview, _Component);
41
-
42
- function MarkingPreview(props) {
43
- _classCallCheck(this, MarkingPreview);
44
-
45
- var _this = _possibleConstructorReturn(this, (MarkingPreview.__proto__ || Object.getPrototypeOf(MarkingPreview)).call(this, props));
46
-
47
- _this.handleClick = _this.handleClick.bind(_this);
48
- return _this;
49
- }
50
-
51
- _createClass(MarkingPreview, [{
52
- key: 'handleClick',
53
- value: function handleClick() {
54
- var _props = this.props,
55
- leftMarker = _props.leftMarker,
56
- actions = _props.actions;
57
-
58
- actions.handleVideoPreview(true);
59
- actions.seek(parseFloat(leftMarker));
60
- actions.play();
61
- actions.handleVideoRewind(false);
62
- }
63
- }, {
64
- key: 'render',
65
- value: function render() {
66
- return _react2.default.createElement(PreviewButton, {
67
- display: 'rounded',
68
- appearance: 'cta',
69
- icon: 'play',
70
- iconWidth: 6,
71
- iconHeight: 8,
72
- width: 20,
73
- height: 20,
74
- onClick: this.handleClick
75
- });
76
- }
77
- }]);
78
-
79
- return MarkingPreview;
80
- }(_react.Component);
81
-
82
- exports.default = MarkingPreview;
83
-
84
-
85
- MarkingPreview.propTypes = propTypes;
86
- MarkingPreview.displayName = 'MarkingPreview';
@@ -1,144 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
-
7
- 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; }; }();
8
-
9
- var _propTypes = require('prop-types');
10
-
11
- var _react = require('react');
12
-
13
- var _react2 = _interopRequireDefault(_react);
14
-
15
- var _styledComponents = require('styled-components');
16
-
17
- var _styledComponents2 = _interopRequireDefault(_styledComponents);
18
-
19
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
-
21
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
22
-
23
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
24
-
25
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /*global webkitAudioContext*/
26
- /*eslint no-undef: ["error", { "typeof": true }] */
27
-
28
- var propTypes = {
29
- audioSrc: _propTypes.PropTypes.string,
30
- currentZoom: _propTypes.PropTypes.number
31
- };
32
-
33
- var defaultProps = {
34
- audioSrc: null,
35
- currentZoom: 1
36
- };
37
-
38
- var AudioWaveformBlock = _styledComponents2.default.div.withConfig({
39
- displayName: 'AudioWaveform__AudioWaveformBlock',
40
- componentId: 'sc-165e15b-0'
41
- })(['position:absolute;width:100%;height:100%;left:0;right:0;canvas{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;}']);
42
-
43
- var AudioWaveform = function (_Component) {
44
- _inherits(AudioWaveform, _Component);
45
-
46
- function AudioWaveform(props, context) {
47
- _classCallCheck(this, AudioWaveform);
48
-
49
- var _this = _possibleConstructorReturn(this, (AudioWaveform.__proto__ || Object.getPrototypeOf(AudioWaveform)).call(this, props, context));
50
-
51
- _this.state = {
52
- buffer: null
53
- };
54
- _this.getWaveform = _this.getWaveform.bind(_this);
55
- return _this;
56
- }
57
-
58
- _createClass(AudioWaveform, [{
59
- key: 'getWaveform',
60
- value: function getWaveform() {
61
- var _this2 = this;
62
-
63
- var audioSrc = this.props.audioSrc;
64
-
65
- var audioBlockWidth = this.canvasBlock.parentElement.offsetWidth;
66
- var audioBlockHeight = this.canvasBlock.parentElement.offsetHeight;
67
- this.canvasBlock.width = audioBlockWidth;
68
- this.canvasBlock.height = audioBlockHeight;
69
- var context = void 0;
70
- if (typeof AudioContext !== 'undefined') {
71
- context = new AudioContext();
72
- } else if (typeof webkitAudioContext !== 'undefined') {
73
- context = new webkitAudioContext();
74
- }
75
- var request = new XMLHttpRequest();
76
- request.open('GET', audioSrc, true);
77
- request.responseType = 'arraybuffer';
78
- request.onload = function () {
79
- context.decodeAudioData(request.response, function (buffer) {
80
- var bufferData = buffer.getChannelData(0);
81
- _this2.setState({ buffer: bufferData });
82
- _this2.generateWaveform();
83
- });
84
- };
85
- request.send();
86
- }
87
- }, {
88
- key: 'generateWaveform',
89
- value: function generateWaveform() {
90
- var currentZoom = this.props.currentZoom;
91
- var buffer = this.state.buffer;
92
-
93
- if (buffer.length) {
94
- var parentWidth = this.canvasBlock.parentElement.offsetWidth;
95
- this.canvasBlock.width = parentWidth * currentZoom;
96
- var width = this.canvasBlock.width;
97
- var height = this.canvasBlock.height;
98
- var ctx = this.canvasBlock.getContext('2d');
99
- var step = Math.ceil(buffer.length / width);
100
- var amp = 100;
101
- ctx.lineWidth = 1;
102
- ctx.beginPath();
103
- ctx.moveTo(0, height / 2 + buffer[0]);
104
- for (var i = 0; i < width; i++) {
105
- ctx.lineTo(i, height / 2 + buffer[step * i] * amp);
106
- }
107
- ctx.closePath();
108
- ctx.strokeStyle = '#ffffff12';
109
- ctx.stroke();
110
- ctx.fillStyle = '#ffffff12';
111
- ctx.fill();
112
- }
113
- }
114
- }, {
115
- key: 'render',
116
- value: function render() {
117
- var _this3 = this;
118
-
119
- return _react2.default.createElement(
120
- AudioWaveformBlock,
121
- {
122
- ref: function ref(c) {
123
- _this3.waveformBlock = c;
124
- }
125
- },
126
- _react2.default.createElement('canvas', {
127
- id: 'visualisation',
128
- ref: function ref(c) {
129
- _this3.canvasBlock = c;
130
- }
131
- })
132
- );
133
- }
134
- }]);
135
-
136
- return AudioWaveform;
137
- }(_react.Component);
138
-
139
- exports.default = AudioWaveform;
140
-
141
-
142
- AudioWaveform.propTypes = propTypes;
143
- AudioWaveform.defaultProps = defaultProps;
144
- AudioWaveform.displayName = 'AudioWaveform';
@@ -1,90 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = LoadProgressBar;
7
-
8
- var _propTypes = require('prop-types');
9
-
10
- var _react = require('react');
11
-
12
- var _react2 = _interopRequireDefault(_react);
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
- var propTypes = {
17
- duration: _propTypes.PropTypes.number,
18
- buffered: _propTypes.PropTypes.instanceOf(Object)
19
- };
20
-
21
- var defaultProps = {
22
- duration: 0,
23
- buffered: {}
24
- };
25
-
26
- // Shows load progress
27
- function LoadProgressBar(_ref) {
28
- var buffered = _ref.buffered,
29
- duration = _ref.duration;
30
-
31
- if (!buffered || !buffered.length) {
32
- return null;
33
- }
34
- var bufferedEnd = buffered.end(buffered.length - 1);
35
- var style = {};
36
-
37
- if (bufferedEnd > duration) {
38
- bufferedEnd = duration;
39
- }
40
-
41
- // get the percent width of a time compared to the total end
42
- function percentify(time, end) {
43
- var percent = time / end || 0; // no NaN
44
- return (percent >= 1 ? 1 : percent) * 100 + '%';
45
- }
46
-
47
- // the width of the progress bar
48
- style.width = percentify(bufferedEnd, duration);
49
-
50
- var parts = [];
51
-
52
- // add child elements to represent the individual buffered time ranges
53
- for (var i = 0; i < buffered.length; i++) {
54
- var start = buffered.start(i);
55
- var end = buffered.end(i);
56
- // set the percent based on the width of the progress bar (bufferedEnd)
57
- var part = _react2.default.createElement('div', {
58
- style: {
59
- left: percentify(start, bufferedEnd),
60
- width: percentify(end - start, bufferedEnd)
61
- },
62
- key: 'part-' + i
63
- });
64
- parts.push(part);
65
- }
66
-
67
- if (parts.length === 0) {
68
- parts = null;
69
- }
70
-
71
- return _react2.default.createElement(
72
- 'div',
73
- { style: style },
74
- _react2.default.createElement(
75
- 'span',
76
- { className: 'video-react-control-text' },
77
- _react2.default.createElement(
78
- 'span',
79
- null,
80
- 'Loaded'
81
- ),
82
- ': 0%'
83
- ),
84
- parts
85
- );
86
- }
87
-
88
- LoadProgressBar.propTypes = propTypes;
89
- LoadProgressBar.defaultProps = defaultProps;
90
- LoadProgressBar.displayName = 'LoadProgressBar';
@@ -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 _utils = require('../../utils');
14
-
15
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
-
17
- var propTypes = {
18
- duration: _propTypes.PropTypes.number,
19
- mouseTime: _propTypes.PropTypes.instanceOf(Object)
20
- };
21
-
22
- var defaultProps = {
23
- duration: 0,
24
- mouseTime: {}
25
- };
26
-
27
- function MouseTimeDisplay(_ref) {
28
- var duration = _ref.duration,
29
- mouseTime = _ref.mouseTime;
30
-
31
- if (!mouseTime.time) {
32
- return null;
33
- }
34
-
35
- var time = (0, _utils.formatTime)(mouseTime.time, duration);
36
-
37
- return _react2.default.createElement(
38
- 'div',
39
- {
40
- style: {
41
- left: mouseTime.position + 'px'
42
- },
43
- 'data-current-time': time
44
- },
45
- time
46
- );
47
- }
48
-
49
- MouseTimeDisplay.propTypes = propTypes;
50
- MouseTimeDisplay.defaultProps = defaultProps;
51
- MouseTimeDisplay.displayName = 'MouseTimeDisplay';
52
-
53
- exports.default = MouseTimeDisplay;
@@ -1,79 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = PlayProgressBar;
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 _utils = require('../../utils');
19
-
20
- var _colors = require('../../colors');
21
-
22
- var _colors2 = _interopRequireDefault(_colors);
23
-
24
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
- var propTypes = {
27
- currentTime: _propTypes.PropTypes.number,
28
- duration: _propTypes.PropTypes.number,
29
- percentage: _propTypes.PropTypes.string,
30
- player: _propTypes.PropTypes.instanceOf(Object),
31
- playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
32
- assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
33
- controlType: _propTypes.PropTypes.oneOf(['default', 'advanced'])
34
- };
35
-
36
- var defaultProps = {
37
- playerType: 'default',
38
- controlType: 'default'
39
- };
40
-
41
- var ProgressBarBlock = _styledComponents2.default.div.withConfig({
42
- displayName: 'PlayProgressBar__ProgressBarBlock',
43
- componentId: 'sc-1e6zmfe-0'
44
- })(['position:absolute;width:0px;height:100%;left:0;top:0;background:', ';&:after{content:\'\';width:12px;height:12px;position:absolute;background:', ';border-radius:100%;right:-6px;top:-5px;box-shadow:0 0 14px 1px ', ';}&:before{content:\'\';width:2px;height:46px;position:absolute;background:', ';right:-1px;top:4px;display:', ';}'], function (props) {
45
- return _colors2.default.common.video[props.assetType].base;
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
- }, function (props) {
53
- return props.controlType === 'advanced' && !props.isFullscreen ? 'block' : 'none';
54
- });
55
- // Shows play progress
56
- function PlayProgressBar(_ref) {
57
- var currentTime = _ref.currentTime,
58
- duration = _ref.duration,
59
- percentage = _ref.percentage,
60
- playerType = _ref.playerType,
61
- assetType = _ref.assetType,
62
- controlType = _ref.controlType,
63
- isFullscreen = _ref.player.isFullscreen;
64
-
65
- return _react2.default.createElement(ProgressBarBlock, {
66
- 'data-current-time': (0, _utils.formatTime)(currentTime, duration),
67
- style: {
68
- width: percentage
69
- },
70
- playerType: playerType,
71
- assetType: assetType,
72
- controlType: controlType,
73
- isFullscreen: isFullscreen
74
- });
75
- }
76
-
77
- PlayProgressBar.propTypes = propTypes;
78
- PlayProgressBar.defaultProps = defaultProps;
79
- PlayProgressBar.displayName = 'PlayProgressBar';
@@ -1,222 +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 _reactDom = require('react-dom');
18
-
19
- var _styledComponents = require('styled-components');
20
-
21
- var _styledComponents2 = _interopRequireDefault(_styledComponents);
22
-
23
- var _dom = require('../../utils/dom');
24
-
25
- var Dom = _interopRequireWildcard(_dom);
26
-
27
- var _SeekBar = require('./SeekBar');
28
-
29
- var _SeekBar2 = _interopRequireDefault(_SeekBar);
30
-
31
- var _PointersBar = require('../PointersBar');
32
-
33
- var _PointersBar2 = _interopRequireDefault(_PointersBar);
34
-
35
- var _colors = require('../../colors');
36
-
37
- var _colors2 = _interopRequireDefault(_colors);
38
-
39
- function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
40
-
41
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
42
-
43
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
44
-
45
- 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; }
46
-
47
- 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; }
48
-
49
- var propTypes = {
50
- player: _propTypes.PropTypes.instanceOf(Object),
51
- controlType: _propTypes.PropTypes.string,
52
- playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
53
- };
54
-
55
- var defaultProps = {};
56
-
57
- var ProgressControlBlock = _styledComponents2.default.div.withConfig({
58
- displayName: 'ProgressControl__ProgressControlBlock',
59
- componentId: 'sc-1qe84kw-0'
60
- })(['width:100%;height:', ';position:relative;overflow:', ';padding-top:0px;background:#000000;background:', ';display:flex;justify-content:center;align-items:center;transition:all 250ms ease-in-out;bottom:', ';'], function (props) {
61
- return props.controlType === 'advanced' && !props.isFullscreen ? '80px' : '4px';
62
- }, function (props) {
63
- return props.controlType === 'advanced' && !props.isFullscreen ? 'none' : 'visible';
64
- }, _colors2.default.common.base.black, function (props) {
65
- return props.player === 'panel' && props.active ? '50px' : 'initial';
66
- });
67
-
68
- var SeekControlBar = _styledComponents2.default.div.withConfig({
69
- displayName: 'ProgressControl__SeekControlBar',
70
- componentId: 'sc-1qe84kw-1'
71
- })(['width:100%;height:100%;position:relative;cursor:pointer;z-index:', ';'], function (props) {
72
- return props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1';
73
- });
74
-
75
- var MarkerTagsBlock = _styledComponents2.default.div.withConfig({
76
- displayName: 'ProgressControl__MarkerTagsBlock',
77
- componentId: 'sc-1qe84kw-2'
78
- })(['min-width:100px;max-width:100px;position:relative;height:100%;.empty-block{height:calc(100% - 20px);}.tags-block{height:20px;font-family:SFUIText-Medium;font-size:12px;color:#ffffff;text-transform:uppercase;border-top:1px solid #333333;border-bottom:1px solid #333333;p{line-height:18px;padding-left:10px;}}']);
79
-
80
- var ProgressControl = function (_Component) {
81
- _inherits(ProgressControl, _Component);
82
-
83
- function ProgressControl(props, context) {
84
- _classCallCheck(this, ProgressControl);
85
-
86
- var _this = _possibleConstructorReturn(this, (ProgressControl.__proto__ || Object.getPrototypeOf(ProgressControl)).call(this, props, context));
87
-
88
- _this.state = {
89
- mouseTime: {
90
- time: null,
91
- position: 0,
92
- stateZoom: null
93
- }
94
- };
95
-
96
- _this.handleMouseMoveThrottle = _this.handleMouseMove.bind(_this);
97
- _this.handleSeekbarZoom = _this.handleSeekbarZoom.bind(_this);
98
- return _this;
99
- }
100
-
101
- _createClass(ProgressControl, [{
102
- key: 'componentDidUpdate',
103
- value: function componentDidUpdate() {
104
- var _props = this.props,
105
- _props$player = _props.player,
106
- zoom = _props$player.zoom,
107
- readyState = _props$player.readyState,
108
- isFullscreen = _props$player.isFullscreen,
109
- controlType = _props.controlType;
110
- var stateZoom = this.state.stateZoom;
111
-
112
- if (zoom !== stateZoom && readyState === 4 && controlType === 'advanced' && !isFullscreen) {
113
- this.handleSeekbarZoom();
114
- }
115
- }
116
- }, {
117
- key: 'handleSeekbarZoom',
118
- value: function handleSeekbarZoom() {
119
- var zoom = this.props.player.zoom;
120
-
121
- var progressBlock = (0, _reactDom.findDOMNode)(this.progressControlBlock);
122
- var seekBarBlock = (0, _reactDom.findDOMNode)(this.seekControlBar);
123
- var progressBlockWidth = progressBlock.offsetWidth;
124
- var currentZoom = parseFloat(zoom.toFixed(1));
125
- if (currentZoom > 0) {
126
- seekBarBlock.style.width = progressBlockWidth * (currentZoom * 20) + 'px';
127
- } else {
128
- seekBarBlock.style.width = '100%';
129
- }
130
- // To be Rectified
131
- if (this.seekBar.timeline) {
132
- this.seekBar.timeline.generateTimeline();
133
- // this.seekBar.audioWaveform.getWaveform();
134
- this.setState({ stateZoom: zoom });
135
- }
136
- }
137
- }, {
138
- key: 'handleMouseMove',
139
- value: function handleMouseMove(event) {
140
- if (!event.pageX) {
141
- return;
142
- }
143
- var duration = this.props.player.duration;
144
-
145
- var node = (0, _reactDom.findDOMNode)(this.seekBar);
146
- var newTime = Dom.getPointerPosition(node, event).x * duration;
147
- var position = event.pageX - Dom.findElPosition(node).left;
148
-
149
- this.setState({
150
- mouseTime: {
151
- time: newTime,
152
- position: position
153
- }
154
- });
155
- }
156
- }, {
157
- key: 'render',
158
- value: function render() {
159
- var _this2 = this;
160
-
161
- var _props2 = this.props,
162
- controlType = _props2.controlType,
163
- playerType = _props2.playerType,
164
- _props2$player = _props2.player,
165
- userActivity = _props2$player.userActivity,
166
- isFullscreen = _props2$player.isFullscreen;
167
- var mouseTime = this.state.mouseTime;
168
-
169
- return _react2.default.createElement(
170
- _react2.default.Fragment,
171
- null,
172
- _react2.default.createElement(
173
- ProgressControlBlock,
174
- {
175
- controlType: controlType,
176
- player: playerType,
177
- active: userActivity,
178
- isFullscreen: isFullscreen,
179
- ref: function ref(c) {
180
- _this2.progressControlBlock = c;
181
- }
182
- },
183
- controlType === 'advanced' && !isFullscreen ? _react2.default.createElement(
184
- MarkerTagsBlock,
185
- null,
186
- _react2.default.createElement('div', { className: 'empty-block' })
187
- ) : null,
188
- _react2.default.createElement(
189
- SeekControlBar,
190
- {
191
- ref: function ref(c) {
192
- _this2.seekControlBar = c;
193
- },
194
- onMouseMove: this.handleMouseMoveThrottle
195
- },
196
- _react2.default.createElement(_SeekBar2.default, _extends({
197
- mouseTime: mouseTime,
198
- ref: function ref(c) {
199
- _this2.seekBar = c;
200
- }
201
- }, this.props))
202
- ),
203
- controlType === 'advanced' && !isFullscreen ? _react2.default.createElement(
204
- MarkerTagsBlock,
205
- null,
206
- _react2.default.createElement('div', { className: 'empty-block' })
207
- ) : null
208
- ),
209
- controlType === 'advanced' && !isFullscreen ? _react2.default.createElement(_PointersBar2.default, this.props) : null
210
- );
211
- }
212
- }]);
213
-
214
- return ProgressControl;
215
- }(_react.Component);
216
-
217
- exports.default = ProgressControl;
218
-
219
-
220
- ProgressControl.propTypes = propTypes;
221
- ProgressControl.defaultProps = defaultProps;
222
- ProgressControl.displayName = 'ProgressControl';