@desynova-digital/player 3.10.2 → 3.11.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.
Files changed (7) hide show
  1. package/components/MarkerBar.js +13 -5
  2. package/components/PointersBar.js +57 -25
  3. package/components/control-bar/ControlBar.js +10 -6
  4. package/components/progress-bar/ProgressControl.js +39 -18
  5. package/components/progress-bar/SeekBar.js +75 -20
  6. package/components/progress-bar/Timeline.js +30 -8
  7. package/package.json +1 -1
package/components/MarkerBar.js CHANGED
@@ -90,13 +90,21 @@ var MarkerBar = /*#__PURE__*/function (_Component) {
90
90
  var _this$props = this.props,
91
91
  player = _this$props.player,
92
92
  controlType = _this$props.controlType,
93
- playerSelectedMarker = _this$props.playerSelectedMarker;
94
- var leftMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) * 100).toFixed(2), "%");
95
- var rightMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) * 100).toFixed(2), "%");
93
+ playerSelectedMarker = _this$props.playerSelectedMarker,
94
+ zoom = _this$props.zoom;
95
+ var leftMarkerPosition = 0;
96
+ var rightMarkerPosition = 0;
97
+ if (zoom > 0) {
98
+ leftMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.leftMarker) * 100 * zoom * 20).toFixed(2), "%");
99
+ rightMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.rightMarker) * 100 * zoom * 20).toFixed(2), "%");
100
+ } else {
101
+ leftMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.leftMarker) * 100).toFixed(2), "%");
102
+ rightMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.rightMarker) * 100).toFixed(2), "%");
103
+ }
96
104
  return /*#__PURE__*/_react["default"].createElement(MarkerBlock, {
97
105
  controlType: controlType,
98
106
  isFullscreen: player.isFullscreen
99
- }, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
107
+ }, playerSelectedMarker.leftMarker > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
100
108
  className: "marker marker-left",
101
109
  style: {
102
110
  left: leftMarkerPosition
@@ -106,7 +114,7 @@ var MarkerBar = /*#__PURE__*/function (_Component) {
106
114
  width: 8,
107
115
  height: 7,
108
116
  color: "#00cec6"
109
- })) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
117
+ })) : null, playerSelectedMarker.rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
110
118
  className: "marker marker-right",
111
119
  style: {
112
120
  left: rightMarkerPosition
package/components/PointersBar.js CHANGED
@@ -10,6 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _propTypes = require("prop-types");
11
11
  var _components = require("@desynova-digital/components");
12
12
  var _lodash = _interopRequireDefault(require("lodash"));
13
+ var _reactDom = require("react-dom");
13
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
14
15
  /* eslint-disable jsx-a11y/mouse-events-have-key-events */
15
16
  /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -42,13 +43,14 @@ var propTypes = {
42
43
  player: _propTypes.PropTypes.instanceOf(Object),
43
44
  actions: _propTypes.PropTypes.instanceOf(Object),
44
45
  markers: _propTypes.PropTypes.instanceOf(Array),
45
- onTagClick: _propTypes.PropTypes.func,
46
- playerType: _propTypes.PropTypes.string
46
+ onTagClick: _propTypes.PropTypes.func
47
47
  };
48
48
  var defaultProps = {
49
49
  player: {}
50
50
  };
51
- var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n"])));
51
+ var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: ", ";\n"])), function (props) {
52
+ return props.width || '100%';
53
+ });
52
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);
53
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"])));
54
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) {
@@ -72,12 +74,15 @@ var PointersBar = /*#__PURE__*/function (_Component) {
72
74
  };
73
75
  _this._tooltipRef = /*#__PURE__*/_react["default"].createRef();
74
76
  _this.renderComp = 0;
77
+ _this.zoom = 0;
75
78
  return _this;
76
79
  }
77
80
  _createClass(PointersBar, [{
78
81
  key: "shouldComponentUpdate",
79
82
  value: function shouldComponentUpdate(nextProps, nextState) {
80
- if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
83
+ if (nextProps.zoom !== this.props.zoom) {
84
+ return true;
85
+ } else if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
81
86
  return false;
82
87
  }
83
88
  this.renderComp = 0;
@@ -106,10 +111,17 @@ var PointersBar = /*#__PURE__*/function (_Component) {
106
111
  }, {
107
112
  key: "getPointerStyle",
108
113
  value: function getPointerStyle(leftMarker, rightMarker, index) {
109
- var player = this.props.player;
114
+ var _this$props2 = this.props,
115
+ player = _this$props2.player,
116
+ zoom = _this$props2.zoom;
110
117
  var left = leftMarker / player.duration * 100;
111
118
  var right = rightMarker / player.duration * 100;
112
- var width = right - left;
119
+ var width = 0;
120
+ if (zoom > 0) {
121
+ width = right - left * zoom * 20;
122
+ } else {
123
+ width = right - left;
124
+ }
113
125
  var style = {
114
126
  left: "".concat(left, "%"),
115
127
  position: 'absolute',
@@ -131,9 +143,10 @@ var PointersBar = /*#__PURE__*/function (_Component) {
131
143
  var tooltipPointer = 0;
132
144
  tooltip.isVisible = false;
133
145
  tooltip.text = title;
134
- tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
135
- tooltip.bottom = title.line1 && title.line2 ? tooltip.bottom + 22 : tooltip.bottom + 10;
136
- tooltipPointer = tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
146
+ // tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
147
+ // tooltip.bottom = title.line1 && title.line2 ? tooltip.bottom + 22 : tooltip.bottom + 10;
148
+ tooltip.bottom = title.line1 && title.line2 ? 42 : 30;
149
+ tooltipPointer = tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2 - 100;
137
150
  this.renderComp = 1;
138
151
  this.setState(_objectSpread({}, tooltip), function () {
139
152
  var tooltip = _this2.state.tooltip;
@@ -171,27 +184,48 @@ var PointersBar = /*#__PURE__*/function (_Component) {
171
184
  }
172
185
  return data;
173
186
  }
187
+ }, {
188
+ key: "generateZoomWithOfPointersBar",
189
+ value: function generateZoomWithOfPointersBar(zoom) {
190
+ var pointerBlock = (0, _reactDom.findDOMNode)(this.pointerBlock);
191
+ var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
192
+ var width = 0;
193
+ if (zoom > 0) {
194
+ width = (document.getElementById('seekbar-control-block').clientWidth * zoom * 20).toFixed(0) + 'px';
195
+ } else {
196
+ width = document.getElementById('seekbar-control-block').clientWidth.toFixed(0) + 'px';
197
+ }
198
+ console.log('POINTERBARWID', width);
199
+ this.setState({
200
+ zoom: zoom,
201
+ width: width
202
+ });
203
+ }
174
204
  }, {
175
205
  key: "render",
176
206
  value: function render() {
177
207
  var _this3 = this;
178
- var markers = this.props.markers;
208
+ var _this$props3 = this.props,
209
+ markers = _this$props3.markers,
210
+ zoom = _this$props3.zoom;
179
211
  var _this$state = this.state,
180
212
  _this$state$tooltip = _this$state.tooltip,
181
213
  isVisible = _this$state$tooltip.isVisible,
182
214
  text = _this$state$tooltip.text,
183
215
  left = _this$state$tooltip.left,
184
216
  bottom = _this$state$tooltip.bottom,
185
- tooltipPointer = _this$state.tooltipPointer;
217
+ tooltipPointer = _this$state.tooltipPointer,
218
+ width = _this$state.width;
186
219
  var self = this;
187
220
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, markers && markers.length ? markers.map(function (marker_obj) {
188
221
  return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
222
+ id: "pointers-block",
223
+ ref: function ref(c) {
224
+ _this3.pointerBlock = c;
225
+ },
226
+ width: width,
189
227
  key: marker_obj.name
190
- }, /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, {
191
- key: "".concat(marker_obj.name, "-tags-block")
192
- }, /*#__PURE__*/_react["default"].createElement("div", {
193
- className: "tags-block"
194
- }, /*#__PURE__*/_react["default"].createElement("p", null, marker_obj.name))), /*#__PURE__*/_react["default"].createElement(PointerBlock, {
228
+ }, /*#__PURE__*/_react["default"].createElement(PointerBlock, {
195
229
  key: "".concat(marker_obj.name, "-key-tags-block")
196
230
  }, marker_obj && marker_obj.values && marker_obj.values.length ? marker_obj.values.map(function (marker, index) {
197
231
  var style = self.getPointerStyle(marker.start_time, marker.end_time, index);
@@ -205,12 +239,12 @@ var PointersBar = /*#__PURE__*/function (_Component) {
205
239
  self.setTooltipData(e, _this3.getTitle(marker));
206
240
  },
207
241
  onMouseOut: function onMouseOut() {
208
- var tooltip = _this3.state.tooltip;
209
- tooltip.isVisible = false;
210
- tooltip.text = null;
211
- _this3.renderComp = 1;
212
- // tooltip.left = null;
213
- _this3.setState(_objectSpread({}, tooltip));
242
+ // const { tooltip } = this.state;
243
+ // tooltip.isVisible = false;
244
+ // tooltip.text = null;
245
+ // this.renderComp = 1;
246
+ // // tooltip.left = null;
247
+ // this.setState({ ...tooltip });
214
248
  },
215
249
  role: "button",
216
250
  tabIndex: "-1",
@@ -231,9 +265,7 @@ var PointersBar = /*#__PURE__*/function (_Component) {
231
265
  stroke: "#fff",
232
266
  width: 7,
233
267
  height: 11
234
- }), /*#__PURE__*/_react["default"].createElement("p", null, "to create ", marker_obj.name, " in the selected range. "))), /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
235
- className: "tags-block"
236
- }, /*#__PURE__*/_react["default"].createElement("p", null))));
268
+ }), /*#__PURE__*/_react["default"].createElement("p", null, "to create ", marker_obj.name, " in the selected range. "))));
237
269
  }) : null, text && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
238
270
  multiline: !!text.line1 && text.line1.length && text.line2,
239
271
  ref: this._tooltipRef,
package/components/control-bar/ControlBar.js CHANGED
@@ -24,6 +24,7 @@ var _MarkingControl = _interopRequireDefault(require("../marking-controls/Markin
24
24
  var _SubtitleLanguagesMenuButton = _interopRequireDefault(require("./SubtitleLanguagesMenuButton"));
25
25
  var _CameraButton = _interopRequireDefault(require("./CameraButton"));
26
26
  var _SubtitleMovementMenu = _interopRequireDefault(require("./SubtitleMovementMenu"));
27
+ var _ZoomMenuButton = _interopRequireDefault(require("./ZoomMenuButton"));
27
28
  var _templateObject, _templateObject2; // import CommentsButton from './CommentsButton';
28
29
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
29
30
  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); }
@@ -178,12 +179,15 @@ var ControlBar = /*#__PURE__*/function (_Component) {
178
179
  })),
179
180
  /*#__PURE__*/
180
181
  // {/* <CommentsButton {...this.props} key="comments-button" order={6.01} />, */}
181
- // {/* <ZoomMenuButton
182
- // style={{ marginLeft: '0 10px' }}
183
- // {...this.props}
184
- // key="zoom-menu-button"
185
- // order={7}
186
- // />, */}
182
+ _react["default"].createElement(_ZoomMenuButton["default"], _extends({
183
+ style: {
184
+ margin: 'auto 10px auto auto'
185
+ }
186
+ }, this.props, {
187
+ key: "zoom-menu-button",
188
+ order: 7
189
+ })),
190
+ /*#__PURE__*/
187
191
  // <EditorControlMenuButton
188
192
  // style={{ margin: 'auto 10px auto auto' }}
189
193
  // {...this.props}
package/components/progress-bar/ProgressControl.js CHANGED
@@ -13,6 +13,7 @@ var Dom = _interopRequireWildcard(require("../../utils/dom"));
13
13
  var _SeekBar = _interopRequireDefault(require("./SeekBar"));
14
14
  var _PointersBar = _interopRequireDefault(require("../PointersBar"));
15
15
  var _colors = _interopRequireDefault(require("../../colors"));
16
+ var _player = _interopRequireDefault(require("../../reducers/player"));
16
17
  var _templateObject, _templateObject2, _templateObject3;
17
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
18
19
  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); }
@@ -37,17 +38,17 @@ var propTypes = {
37
38
  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
38
39
  };
39
40
  var defaultProps = {};
40
- var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: ", ";\n position: relative;\n overflow: ", ";\n padding-top: 0px;\n background: #000000;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 250ms ease-in-out;\n bottom: ", ";\n"])), function (props) {
41
- return props.controlType === 'advanced' && !props.isFullscreen ? '80px' : '4px';
41
+ var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: ", ";\n position: relative;\n overflow: ", ";\n padding-top: 0px;\n background: #000000;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 250ms ease-in-out;\n bottom: ", ";\n\n .tags-block {\n position: relative;\n height: 20px;\n width: 100px;\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 top: 40px;\n p {\n line-height: 18px;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), function (props) {
42
+ return props.controlType === 'advanced' && !props.isFullscreen ? '' : '4px';
42
43
  }, function (props) {
43
44
  return props.controlType === 'advanced' && !props.isFullscreen ? 'none' : 'visible';
44
45
  }, _colors["default"].common.base.black, function (props) {
45
46
  return props.player === 'panel' && props.active ? '50px' : 'initial';
46
47
  });
47
- var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n z-index: ", ";\n"])), function (props) {
48
+ var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n overflow: hidden;\n z-index: ", ";\n .timeline-content {\n overflow-x: auto;\n white-space: nowrap;\n }\n"])), function (props) {
48
49
  return props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1';
49
50
  });
50
- var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 100px;\n max-width: 100px;\n position: relative;\n height: 100%;\n .empty-block {\n height: calc(100% - 20px);\n }\n .tags-block {\n height: 20px;\n font-family: SFUIText-Medium;\n font-size: 12px;\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-left: 10px;\n }\n }\n"])));
51
+ var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 100px;\n max-width: 100px;\n position: relative;\n height: 60px;\n .empty-block {\n height: calc(100% - 20px);\n }\n .tags-block {\n height: 20px;\n font-family: SFUIText-Medium;\n font-size: 12px;\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-left: 10px;\n }\n }\n"])));
51
52
  var ProgressControl = /*#__PURE__*/function (_Component) {
52
53
  _inherits(ProgressControl, _Component);
53
54
  var _super = _createSuper(ProgressControl);
@@ -86,16 +87,12 @@ var ProgressControl = /*#__PURE__*/function (_Component) {
86
87
  var zoom = this.props.player.zoom;
87
88
  var progressBlock = (0, _reactDom.findDOMNode)(this.progressControlBlock);
88
89
  var seekBarBlock = (0, _reactDom.findDOMNode)(this.seekControlBar);
89
- var progressBlockWidth = progressBlock.offsetWidth;
90
90
  var currentZoom = parseFloat(zoom.toFixed(1));
91
- if (currentZoom > 0) {
92
- seekBarBlock.style.width = "".concat(progressBlockWidth * (currentZoom * 20), "px");
93
- } else {
94
- seekBarBlock.style.width = '100%';
95
- }
91
+
96
92
  // To be Rectified
97
93
  if (this.seekBar.timeline) {
98
- this.seekBar.timeline.generateTimeline();
94
+ this.seekBar.timeline.generateTimeline(currentZoom);
95
+ this.pointersBar.generateZoomWithOfPointersBar(currentZoom);
99
96
  // this.seekBar.audioWaveform.getWaveform();
100
97
  this.setState({
101
98
  stateZoom: zoom
@@ -129,31 +126,55 @@ var ProgressControl = /*#__PURE__*/function (_Component) {
129
126
  _this$props2$player = _this$props2.player,
130
127
  userActivity = _this$props2$player.userActivity,
131
128
  isFullscreen = _this$props2$player.isFullscreen,
132
- duration = _this$props2$player.duration;
133
- var mouseTime = this.state.mouseTime;
129
+ duration = _this$props2$player.duration,
130
+ markers = _this$props2.markers;
131
+ var _this$state = this.state,
132
+ mouseTime = _this$state.mouseTime,
133
+ stateZoom = _this$state.stateZoom;
134
134
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ProgressControlBlock, {
135
135
  controlType: controlType,
136
+ id: "progress-control-block",
136
137
  player: playerType,
137
138
  active: userActivity,
138
139
  isFullscreen: isFullscreen,
139
140
  ref: function ref(c) {
140
141
  _this2.progressControlBlock = c;
141
142
  }
142
- }, controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
143
+ }, controlType === 'advanced' && !isFullscreen && duration ? /*#__PURE__*/_react["default"].createElement("div", {
144
+ style: {
145
+ display: 'flex',
146
+ flexDirection: 'column'
147
+ }
148
+ }, markers && markers.length ? markers.map(function (marker_obj) {
149
+ return /*#__PURE__*/_react["default"].createElement("div", {
150
+ className: "tags-block"
151
+ }, /*#__PURE__*/_react["default"].createElement("p", {
152
+ className: "pointer-wrapper"
153
+ }, marker_obj.name));
154
+ }) : /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
143
155
  className: "empty-block"
144
- })) : null, /*#__PURE__*/_react["default"].createElement(SeekControlBar, {
156
+ }))) : null, /*#__PURE__*/_react["default"].createElement(SeekControlBar, {
145
157
  ref: function ref(c) {
146
158
  _this2.seekControlBar = c;
147
159
  },
160
+ id: "seekbar-control-block",
148
161
  onMouseMove: this.handleMouseMoveThrottle
162
+ }, /*#__PURE__*/_react["default"].createElement("div", {
163
+ className: "timeline-content"
149
164
  }, /*#__PURE__*/_react["default"].createElement(_SeekBar["default"], _extends({
150
165
  mouseTime: mouseTime,
151
166
  ref: function ref(c) {
152
167
  _this2.seekBar = c;
153
- }
154
- }, this.props))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
168
+ },
169
+ zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
170
+ }, this.props)), /*#__PURE__*/_react["default"].createElement(_PointersBar["default"], _extends({
171
+ ref: function ref(c) {
172
+ _this2.pointersBar = c;
173
+ },
174
+ zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
175
+ }, this.props)))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
155
176
  className: "empty-block"
156
- })) : null), controlType === 'advanced' && !isFullscreen && duration ? /*#__PURE__*/_react["default"].createElement(_PointersBar["default"], this.props) : null);
177
+ })) : null));
157
178
  }
158
179
  }]);
159
180
  return ProgressControl;
package/components/progress-bar/SeekBar.js CHANGED
@@ -69,7 +69,12 @@ var SeekBar = /*#__PURE__*/function (_Component) {
69
69
  value: function componentDidMount() {}
70
70
  }, {
71
71
  key: "componentDidUpdate",
72
- value: function componentDidUpdate() {}
72
+ value: function componentDidUpdate(prevProps) {
73
+ var _prevProps$player, _this$props$player;
74
+ if (((_prevProps$player = prevProps.player) === null || _prevProps$player === void 0 ? void 0 : _prevProps$player.currentTime) !== ((_this$props$player = this.props.player) === null || _this$props$player === void 0 ? void 0 : _this$props$player.currentTime)) {
75
+ this.scrollToSeekbarMiddle();
76
+ }
77
+ }
73
78
 
74
79
  /**
75
80
  * Get percentage of video played
@@ -80,24 +85,64 @@ var SeekBar = /*#__PURE__*/function (_Component) {
80
85
  }, {
81
86
  key: "getPercent",
82
87
  value: function getPercent() {
83
- var _this$props$player = this.props.player,
84
- currentTime = _this$props$player.currentTime,
85
- seekingTime = _this$props$player.seekingTime,
86
- duration = _this$props$player.duration;
88
+ var _this$props = this.props,
89
+ _this$props$player2 = _this$props.player,
90
+ currentTime = _this$props$player2.currentTime,
91
+ seekingTime = _this$props$player2.seekingTime,
92
+ duration = _this$props$player2.duration,
93
+ zoom = _this$props.zoom;
87
94
  var time = seekingTime || currentTime;
88
95
  var percent = time / duration;
89
- return percent >= 1 ? 1 : percent;
96
+ percent = percent >= 1 ? 1 : percent;
97
+ if (zoom > 0) {
98
+ percent = percent * zoom * 20;
99
+ }
100
+ return percent;
101
+ }
102
+ }, {
103
+ key: "getScrollableWidth",
104
+ value: function getScrollableWidth(element) {
105
+ var style = getComputedStyle(element);
106
+ var padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
107
+ var scrollbarWidth = element.offsetWidth - element.clientWidth;
108
+ return element.scrollWidth - padding - scrollbarWidth;
90
109
  }
91
110
  }, {
92
111
  key: "getNewTime",
93
112
  value: function getNewTime(event) {
94
- var duration = this.props.player.duration;
95
- var distance = this.slider.calculateDistance(event);
96
- var newTime = distance * duration;
113
+ var _this$props2 = this.props,
114
+ duration = _this$props2.player.duration,
115
+ playerType = _this$props2.playerType;
116
+ var newTime;
117
+ if (playerType === 'default') {
118
+ var distance = this.slider.calculateDistance(event);
119
+ newTime = distance * duration;
120
+ } else {
121
+ var seekBar = document.getElementById('timeline-block');
122
+ var clickPosition = event.clientX - seekBar.getBoundingClientRect().left;
123
+ var data = this.getScrollableWidth(seekBar);
124
+ var seekPercentage = clickPosition / data;
125
+ newTime = duration * seekPercentage;
126
+ }
97
127
 
98
128
  // Don't let video end while scrubbing.
99
129
  return newTime === duration ? newTime - 0.1 : newTime;
100
130
  }
131
+ }, {
132
+ key: "scrollToSeekbarMiddle",
133
+ value: function scrollToSeekbarMiddle() {
134
+ var viewportWidth = document.getElementById('seekbar-control-block').clientWidth;
135
+ var percentScroll = (this.getPercent() * 100).toFixed(2) / 100;
136
+ var scrollWidth = viewportWidth * percentScroll;
137
+ if (scrollWidth < document.getElementsByClassName('timeline-content')[0].scrollLeft || scrollWidth > document.getElementsByClassName('timeline-content')[0].scrollLeft + viewportWidth) {
138
+ viewportWidth = viewportWidth / 2;
139
+ scrollWidth = scrollWidth - viewportWidth;
140
+ document.getElementsByClassName('timeline-content')[0].scrollTo({
141
+ left: scrollWidth,
142
+ behavior: 'instant'
143
+ });
144
+ }
145
+ }
101
146
  }, {
102
147
  key: "handleMouseDown",
103
148
  value: function handleMouseDown() {
@@ -113,6 +158,7 @@ var SeekBar = /*#__PURE__*/function (_Component) {
113
158
  var actions = this.props.actions;
114
159
  var newTime = this.getNewTime(event);
115
160
  // Set new time (tell video to seek to new time)
161
+ console.log('ppp', event, newTime);
116
162
  actions.seek(newTime);
117
163
  actions.handleEndSeeking(newTime);
118
164
  this.setState({
@@ -145,18 +191,24 @@ var SeekBar = /*#__PURE__*/function (_Component) {
145
191
  key: "render",
146
192
  value: function render() {
147
193
  var _this2 = this;
148
- var _this$props = this.props,
149
- _this$props$player2 = _this$props.player,
150
- currentTime = _this$props$player2.currentTime,
151
- seekingTime = _this$props$player2.seekingTime,
152
- duration = _this$props$player2.duration,
153
- isFullscreen = _this$props$player2.isFullscreen,
154
- controlType = _this$props.controlType,
155
- playerType = _this$props.playerType,
156
- tagsMarker = _this$props.tagsMarker,
157
- assetType = _this$props.assetType;
194
+ var _this$props3 = this.props,
195
+ _this$props3$player = _this$props3.player,
196
+ currentTime = _this$props3$player.currentTime,
197
+ seekingTime = _this$props3$player.seekingTime,
198
+ duration = _this$props3$player.duration,
199
+ isFullscreen = _this$props3$player.isFullscreen,
200
+ controlType = _this$props3.controlType,
201
+ playerType = _this$props3.playerType,
202
+ tagsMarker = _this$props3.tagsMarker,
203
+ assetType = _this$props3.assetType,
204
+ zoom = _this$props3.zoom;
158
205
  var time = seekingTime || currentTime;
159
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], this.props), tagsMarker && tagsMarker.length ? /*#__PURE__*/_react["default"].createElement(_TagsBar["default"], this.props) : null, /*#__PURE__*/_react["default"].createElement("div", {
206
+ console.log('ages', (this.getPercent() * 100).toFixed(2));
207
+ return /*#__PURE__*/_react["default"].createElement("span", {
208
+ id: "seekbarss"
209
+ }, /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], _extends({}, this.props, {
210
+ zoom: zoom
211
+ })), tagsMarker && tagsMarker.length ? /*#__PURE__*/_react["default"].createElement(_TagsBar["default"], this.props) : null, /*#__PURE__*/_react["default"].createElement("div", {
160
212
  onMouseDown: this.handleMouseDown,
161
213
  onMouseMove: this.handleMouseMove,
162
214
  onMouseUp: this.handleMouseUp
@@ -180,6 +232,9 @@ var SeekBar = /*#__PURE__*/function (_Component) {
180
232
  playerType: playerType,
181
233
  assetType: assetType
182
234
  }, this.props)))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AdvancedControlBlock, null, /*#__PURE__*/_react["default"].createElement(_Timeline["default"], _extends({}, this.props, {
235
+ scrollSeekBar: function scrollSeekBar() {
236
+ _this2.scrollToSeekbarMiddle();
237
+ },
183
238
  ref: function ref(c) {
184
239
  _this2.timeline = c;
185
240
  }
package/components/progress-bar/Timeline.js CHANGED
@@ -33,7 +33,9 @@ var propTypes = {
33
33
  initialTime: _propTypes.PropTypes.number,
34
34
  frameRate: _propTypes.PropTypes.number
35
35
  };
36
- var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0;\n .player-time {\n width: 100%;\n position: relative;\n height: 46px;\n user-select: none;\n &:first-child {\n p {\n left: 0px;\n }\n }\n &:last-child {\n width: 10px;\n ", " {\n display: none;\n }\n p {\n left: auto;\n right: 0px;\n }\n }\n ", " {\n position: absolute;\n left: 0;\n bottom: 0;\n }\n p {\n color: #aaa;\n font-size: 10px;\n font-family: SFUIText-Regular;\n left: -28px;\n top: 10px;\n letter-spacing: 0.5px;\n position: absolute;\n user-select: none;\n }\n }\n"])), _components.Icon.Element, _components.Icon.Element);
36
+ var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0;\n width: ", ";\n .player-time {\n width: 100%;\n :not(:last-child) {\n min-width: 100px;\n }\n position: relative;\n height: 46px;\n user-select: none;\n &:first-child {\n p {\n left: 0px;\n }\n }\n &:last-child {\n flex-grow: 1;\n ", " {\n display: none;\n }\n p {\n left: auto;\n right: 0px;\n }\n }\n ", " {\n position: absolute;\n left: 0;\n bottom: 0;\n }\n p {\n color: #aaa;\n font-size: 10px;\n font-family: SFUIText-Regular;\n left: -28px;\n top: 10px;\n letter-spacing: 0.5px;\n position: absolute;\n user-select: none;\n }\n }\n"])), function (props) {
37
+ return props.maxWidth ? props.maxWidth : '';
38
+ }, _components.Icon.Element, _components.Icon.Element);
37
39
  var Timeline = /*#__PURE__*/function (_Component) {
38
40
  _inherits(Timeline, _Component);
39
41
  var _super = _createSuper(Timeline);
@@ -52,13 +54,27 @@ var Timeline = /*#__PURE__*/function (_Component) {
52
54
  value: function componentDidMount() {
53
55
  this.generateTimeline();
54
56
  }
57
+ }, {
58
+ key: "componentDidUpdate",
59
+ value: function componentDidUpdate(prevProps) {
60
+ var _this$props = this.props,
61
+ scrollSeekBar = _this$props.scrollSeekBar,
62
+ zoom = _this$props.zoom;
63
+ if (prevProps.zoom !== zoom) scrollSeekBar && scrollSeekBar();
64
+ }
55
65
  }, {
56
66
  key: "generateTimeline",
57
- value: function generateTimeline() {
67
+ value: function generateTimeline(zoomFactor) {
58
68
  var player = this.props.player;
59
69
  var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
60
70
  var perTimeWidth = 100;
61
- var sliderWidth = timelineBlock.offsetWidth;
71
+ var sliderWidth = 0;
72
+ if (zoomFactor > 0) {
73
+ sliderWidth = (document.getElementById('seekbar-control-block').clientWidth * zoomFactor * 20).toFixed(0);
74
+ } else {
75
+ sliderWidth = document.getElementById('seekbar-control-block').clientWidth.toFixed(0);
76
+ }
77
+ console.log('sliderwidth generatetimeline', sliderWidth, zoomFactor); //1200
62
78
  var timeBlocks = parseInt(sliderWidth / perTimeWidth, 10);
63
79
  var timeDistance = parseInt(player.duration / timeBlocks, 10);
64
80
  var timeArray = [0];
@@ -73,18 +89,24 @@ var Timeline = /*#__PURE__*/function (_Component) {
73
89
  }
74
90
  }
75
91
  this.setState({
76
- timeArray: timeArray
92
+ timeArray: timeArray,
93
+ zoom: zoomFactor,
94
+ maxWidth: sliderWidth + 'px'
77
95
  });
78
96
  }
79
97
  }, {
80
98
  key: "render",
81
99
  value: function render() {
82
100
  var _this2 = this;
83
- var _this$props = this.props,
84
- initialTime = _this$props.initialTime,
85
- frameRate = _this$props.frameRate;
86
- var timeArray = this.state.timeArray;
101
+ var _this$props2 = this.props,
102
+ initialTime = _this$props2.initialTime,
103
+ frameRate = _this$props2.frameRate;
104
+ var _this$state = this.state,
105
+ timeArray = _this$state.timeArray,
106
+ maxWidth = _this$state.maxWidth;
87
107
  return /*#__PURE__*/_react["default"].createElement(TimelineBlock, {
108
+ id: "timeline-block",
109
+ maxWidth: maxWidth,
88
110
  ref: function ref(c) {
89
111
  _this2.timelineBlock = c;
90
112
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "3.10.2",
3
+ "version": "3.11.1",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {