@desynova-digital/player 3.9.11 → 3.10.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 (5) hide show
  1. package/components/MarkerBar.js +4 -4
  2. package/components/PointersBar.js +38 -16
  3. package/components/Video.js +14 -14
  4. package/components/marking-controls/MarkingControl.js +10 -10
  5. package/package.json +5 -8
package/components/MarkerBar.js CHANGED
@@ -91,12 +91,12 @@ var MarkerBar = /*#__PURE__*/function (_Component) {
91
91
  player = _this$props.player,
92
92
  controlType = _this$props.controlType,
93
93
  playerSelectedMarker = _this$props.playerSelectedMarker;
94
- var leftMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.leftMarker) * 100).toFixed(2), "%");
95
- var rightMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.rightMarker) * 100).toFixed(2), "%");
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), "%");
96
96
  return /*#__PURE__*/_react["default"].createElement(MarkerBlock, {
97
97
  controlType: controlType,
98
98
  isFullscreen: player.isFullscreen
99
- }, playerSelectedMarker.leftMarker > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
99
+ }, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
100
100
  className: "marker marker-left",
101
101
  style: {
102
102
  left: leftMarkerPosition
@@ -106,7 +106,7 @@ var MarkerBar = /*#__PURE__*/function (_Component) {
106
106
  width: 8,
107
107
  height: 7,
108
108
  color: "#00cec6"
109
- })) : null, playerSelectedMarker.rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
109
+ })) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
110
110
  className: "marker marker-right",
111
111
  style: {
112
112
  left: rightMarkerPosition
package/components/PointersBar.js CHANGED
@@ -50,8 +50,10 @@ var defaultProps = {
50
50
  var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n"])));
51
51
  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);
52
52
  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"])));
53
- var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 2;\n height: 18px;\n transition: left .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: 50%;\n transform: translateX(-50%);\n }\n }\n"])), function (props) {
54
- return props.multiline ? "bottom: -21px;" : "bottom: -9px;";
53
+ 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) {
54
+ return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
55
+ }, function (props) {
56
+ return props.tooltipPointer ? props.tooltipPointer + 'px' : '50%';
55
57
  });
56
58
  var PointersBar = /*#__PURE__*/function (_Component) {
57
59
  _inherits(PointersBar, _Component);
@@ -64,7 +66,8 @@ var PointersBar = /*#__PURE__*/function (_Component) {
64
66
  _this.state = {
65
67
  tooltip: {
66
68
  isVisible: false
67
- }
69
+ },
70
+ tooltipPointer: 0
68
71
  };
69
72
  _this._tooltipRef = /*#__PURE__*/_react["default"].createRef();
70
73
  _this.renderComp = 0;
@@ -117,19 +120,35 @@ var PointersBar = /*#__PURE__*/function (_Component) {
117
120
  value: function setTooltipData(e, title) {
118
121
  var _this2 = this;
119
122
  var tooltip = this.state.tooltip;
123
+ var tooltipPointer = 0;
120
124
  tooltip.isVisible = false;
121
125
  tooltip.text = title;
122
126
  tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
123
- tooltip.bottom = title.line1 ? tooltip.bottom + 22 : tooltip.bottom + 10;
124
- tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
127
+ tooltip.bottom = title.line1 && title.line2 ? tooltip.bottom + 22 : tooltip.bottom + 10;
128
+ tooltipPointer = tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
125
129
  this.renderComp = 1;
126
130
  this.setState(_objectSpread({}, tooltip), function () {
127
131
  var tooltip = _this2.state.tooltip;
128
- var tooltipRefOffset = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
132
+ var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
133
+ var tooltipRenderedWidth = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
134
+ var totalWidthOfTooltipIncludingLeft = tooltip.left + tooltipRenderedWidth;
135
+ if (totalWidthOfTooltipIncludingLeft > viewportWidth) {
136
+ var extraSpacing = totalWidthOfTooltipIncludingLeft - viewportWidth;
137
+ tooltip.left = tooltip.left - tooltipRenderedWidth - extraSpacing - 10; //5 for wxtra buffer spacing on right
138
+ tooltipPointer = tooltipRenderedWidth + extraSpacing + 10;
139
+ } else {
140
+ tooltip.left = tooltip.left - tooltipRenderedWidth;
141
+ if (tooltip.left < 0) {
142
+ tooltipPointer = tooltipPointer;
143
+ } else {
144
+ tooltipPointer = 0;
145
+ }
146
+ }
129
147
  tooltip.isVisible = true;
130
- tooltip.left = tooltip.left - tooltipRefOffset;
131
148
  _this2.renderComp = 1;
132
- _this2.setState(_objectSpread({}, tooltip));
149
+ _this2.setState(_objectSpread(_objectSpread({}, tooltip), {}, {
150
+ tooltipPointer: tooltipPointer
151
+ }));
133
152
  });
134
153
  }
135
154
  }, {
@@ -149,11 +168,13 @@ var PointersBar = /*#__PURE__*/function (_Component) {
149
168
  value: function render() {
150
169
  var _this3 = this;
151
170
  var markers = this.props.markers;
152
- var _this$state$tooltip = this.state.tooltip,
171
+ var _this$state = this.state,
172
+ _this$state$tooltip = _this$state.tooltip,
153
173
  isVisible = _this$state$tooltip.isVisible,
154
174
  text = _this$state$tooltip.text,
155
175
  left = _this$state$tooltip.left,
156
- bottom = _this$state$tooltip.bottom;
176
+ bottom = _this$state$tooltip.bottom,
177
+ tooltipPointer = _this$state.tooltipPointer;
157
178
  var self = this;
158
179
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, markers && markers.length ? markers.map(function (marker_obj) {
159
180
  return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
@@ -166,6 +187,7 @@ var PointersBar = /*#__PURE__*/function (_Component) {
166
187
  key: "".concat(marker_obj.name, "-key-tags-block")
167
188
  }, marker_obj && marker_obj.values && marker_obj.values.length ? marker_obj.values.map(function (marker, index) {
168
189
  var style = self.getPointerStyle(marker.start_time, marker.end_time, index);
190
+ // console.log('styless', style);
169
191
  return /*#__PURE__*/_react["default"].createElement("div", {
170
192
  className: "marker-blocks",
171
193
  onClick: function onClick(e) {
@@ -205,18 +227,18 @@ var PointersBar = /*#__PURE__*/function (_Component) {
205
227
  className: "tags-block"
206
228
  }, /*#__PURE__*/_react["default"].createElement("p", null))));
207
229
  }) : null, text && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
208
- multiline: !!text.line1,
230
+ multiline: !!text.line1 && text.line1.length && text.line2,
209
231
  ref: this._tooltipRef,
232
+ left: left,
233
+ tooltipPointer: tooltipPointer,
210
234
  style: {
211
- left: left || 0,
235
+ left: left < 1 ? 1 : left,
212
236
  bottom: bottom || 0,
213
- visibility: isVisible ? "visible" : "hidden"
237
+ visibility: isVisible ? 'visible' : 'hidden'
214
238
  }
215
239
  }, /*#__PURE__*/_react["default"].createElement("div", {
216
240
  className: "tooltip-container"
217
- }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line1), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line2), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text))), /*#__PURE__*/_react["default"].createElement("div", {
218
- id: "dummy-container"
219
- }));
241
+ }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line1), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line2), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text))));
220
242
  }
221
243
  }]);
222
244
  return PointersBar;
package/components/Video.js CHANGED
@@ -259,22 +259,22 @@ var Video = /*#__PURE__*/function (_Component) {
259
259
  this.hls.on(_hls["default"].Events.ERROR, function (event, data) {
260
260
  // eslint-disable-next-line no-console
261
261
  console.log('HLS.Events.ERROR: ', event, data);
262
- if (data.fatal) {
263
- switch (data.type) {
264
- case _hls["default"].ErrorTypes.NETWORK_ERROR:
265
- // try to recover network error
262
+ switch (data.type) {
263
+ case _hls["default"].ErrorTypes.NETWORK_ERROR:
264
+ // try to recover network error
265
+ _this2.hls.startLoad();
266
+ break;
267
+ case _hls["default"].ErrorTypes.MEDIA_ERROR:
268
+ _this2.hls.recoverMediaError();
269
+ break;
270
+ default:
271
+ // cannot recover
272
+ if (data.details === 'internalException' && data.type === 'otherError') {
266
273
  _this2.hls.startLoad();
267
- break;
268
- case _hls["default"].ErrorTypes.MEDIA_ERROR:
269
- _this2.hls.recoverMediaError();
270
- break;
271
- default:
272
- // cannot recover
274
+ } else {
273
275
  _this2.hls.destroy();
274
- break;
275
- }
276
- } else if (data.details === 'internalException' && data.type === 'otherError') {
277
- _this2.hls.startLoad();
276
+ }
277
+ break;
278
278
  }
279
279
  });
280
280
  }
package/components/marking-controls/MarkingControl.js CHANGED
@@ -51,16 +51,16 @@ function MarkingControl(_ref) {
51
51
  _ref$disablePlayerAct = _ref.disablePlayerActions,
52
52
  disablePlayerActions = _ref$disablePlayerAct === void 0 ? [] : _ref$disablePlayerAct,
53
53
  playerSelectedMarker = _ref.playerSelectedMarker;
54
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(MarkingBlock, null, (!(playerSelectedMarker.leftMarker > -1) || !(playerSelectedMarker.rightMarker > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
55
- leftMarker: playerSelectedMarker.leftMarker,
54
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(MarkingBlock, null, (!((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1) || !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
55
+ leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
56
56
  actions: actions,
57
57
  player: player,
58
58
  markers: markers,
59
59
  allowMarkerOverlap: allowMarkerOverlap,
60
60
  onAddMarker: onAddMarker
61
61
  }), /*#__PURE__*/_react["default"].createElement(_MarkOutControl["default"], {
62
- leftMarker: playerSelectedMarker.leftMarker,
63
- rightMarker: playerSelectedMarker.rightMarker,
62
+ leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
63
+ rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
64
64
  actions: actions,
65
65
  player: player,
66
66
  markers: markers,
@@ -68,15 +68,15 @@ function MarkingControl(_ref) {
68
68
  onMarkerSelect: onMarkerSelect,
69
69
  allowMarkerOverlap: allowMarkerOverlap,
70
70
  onAddMarker: onAddMarker
71
- })) : null, playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingDuration["default"], {
72
- leftMarker: playerSelectedMarker.leftMarker,
73
- rightMarker: playerSelectedMarker.rightMarker,
71
+ })) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 || (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingDuration["default"], {
72
+ leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
73
+ rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
74
74
  frameRate: frameRate,
75
75
  initialTime: initialTime
76
- }) : null, playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingPreview["default"], {
76
+ }) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 && (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingPreview["default"], {
77
77
  actions: actions,
78
- leftMarker: playerSelectedMarker.leftMarker
79
- }) : null, (playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1) && playerSelectedMarker.markerType === 'create' && playerSelectedMarker.markerCreate && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? /*#__PURE__*/_react["default"].createElement(_MarkingDeleteButton["default"], {
78
+ leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker
79
+ }) : null, ((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 || (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1) && (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.markerType) === 'create' && playerSelectedMarker !== null && playerSelectedMarker !== void 0 && playerSelectedMarker.markerCreate && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? /*#__PURE__*/_react["default"].createElement(_MarkingDeleteButton["default"], {
80
80
  actions: actions,
81
81
  onDeleteMarker: onDeleteMarker
82
82
  }) : null) : null);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "3.9.11",
3
+ "version": "3.10.0",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -27,14 +27,10 @@
27
27
  "@babel/core": "^7.21.3",
28
28
  "@babel/preset-env": "^7.20.2",
29
29
  "@babel/preset-react": "^7.18.6",
30
- "babel-cli": "^6.26.0",
31
- "babel-core": "^6.26.3",
32
30
  "babel-eslint": "^10.1.0",
33
31
  "babel-loader": "7.1.5",
34
32
  "babel-plugin-transform-object-rest-spread": "^6.26.0",
35
- "babel-preset-env": "^1.7.0",
36
33
  "babel-preset-es2015": "^6.24.1",
37
- "babel-preset-react": "^6.24.1",
38
34
  "babel-runtime": "^6.26.0",
39
35
  "eslint": "^5.16.0",
40
36
  "eslint-config-airbnb": "^17.1.1",
@@ -57,9 +53,10 @@
57
53
  "webpack-dev-server": "^3.11.0"
58
54
  },
59
55
  "dependencies": {
60
- "@desynova-digital/components": "^8.16.0",
61
- "@desynova-digital/tokens": "^8.16.0",
62
- "hls.js": "^0.11.0",
56
+ "@desynova-digital/components": "^8.19.3",
57
+ "@desynova-digital/tokens": "^8.19.3",
58
+ "hls.js": "^1.4.3",
59
+ "babel-core": "7.0.0-bridge.0",
63
60
  "latest-version": "^4.0.0",
64
61
  "prettycli": "^1.4.3",
65
62
  "prop-types": "^15.7.2",