@desynova-digital/player 4.0.74 → 4.0.76

package/components/Video.js

@@ -121,9 +121,12 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       if (!_this.video) return;
       var _this$props = _this.props,
         initialTime = _this$props.initialTime,
-        frameRate = _this$props.frameRate;
+        frameRate = _this$props.frameRate,
+        onAutoScroll = _this$props.onAutoScroll;
       var currentFormattedTime = (0, _utils.secondsToTime)(_this.video.currentTime, frameRate, initialTime);
-      if (currentFormattedTime) _this.props.onAutoScroll(currentFormattedTime);
+      if (currentFormattedTime && typeof onAutoScroll === 'function') {
+        onAutoScroll(currentFormattedTime);
+      }
       var _this$getTimeData = _this.getTimeData(_this.video.currentTime),
         shouldShow = _this$getTimeData.shouldShow;
       if (_this.state.shouldShowAnnotate !== shouldShow) {
@@ -209,7 +212,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       watermarkInterval: -1,
       isBuffering: false,
       currentSubtitleObj: {},
-      shouldShowAnnotate: false
+      shouldShowAnnotate: false,
+      annotationsVersion: 0
     };
     _this.video = null; // the html5 video
     _this.manager = new _Manager["default"](props.store);
@@ -280,9 +284,21 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
       var _this$props3 = this.props,
+        parentAnnotations = _this$props3.parentAnnotations,
         inTime = _this$props3.inTime,
         outTime = _this$props3.outTime;
+      var hasNewAnnotations = JSON.stringify(parentAnnotations) !== JSON.stringify(prevProps.parentAnnotations);
+      if (hasNewAnnotations) {
+        Promise.resolve().then(function () {
+          _this2.setState(function (prevState) {
+            return {
+              annotationsVersion: (prevState.annotationsVersion || 0) + 1
+            };
+          });
+        });
+      }
       if (this.props.isSvgLayer && this.props.isSvgLayer !== prevProps.isSvgLayer) {
         this.toggleViaAnnotatePlay();
       }
@@ -348,7 +364,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "setupHLS",
     value: function setupHLS(src) {
-      var _this2 = this;
+      var _this3 = this;
       var _this$props5 = this.props,
         actions = _this$props5.actions,
         activeTrackIndex = _this$props5.activeTrackIndex;
@@ -372,18 +388,18 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           switch (data.type) {
             case _hls["default"].ErrorTypes.NETWORK_ERROR:
               // try to recover network error
-              _this2.hls.startLoad();
+              _this3.hls.startLoad();
               break;
             case _hls["default"].ErrorTypes.MEDIA_ERROR:
-              _this2.hls.recoverMediaError();
+              _this3.hls.recoverMediaError();
               break;
             default:
               // cannot recover
-              _this2.hls.destroy();
+              _this3.hls.destroy();
               break;
           }
         } else if (data.details === 'internalException' && data.type === 'otherError' || data.details === 'bufferStalledError' && data.type === 'mediaError') {
-          _this2.hls.startLoad();
+          _this3.hls.startLoad();
         }
       });
     }
@@ -520,12 +536,12 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "getProperties",
     value: function getProperties() {
-      var _this3 = this;
+      var _this4 = this;
       if (!this.video) {
         return null;
       }
       return _utils.mediaProperties.reduce(function (properties, key) {
-        properties[key] = _this3.video[key];
+        properties[key] = _this4.video[key];
         return properties;
       }, {});
     }
@@ -1232,7 +1248,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderChildren",
     value: function renderChildren() {
-      var _this4 = this;
+      var _this5 = this;
       var props = _objectSpread(_objectSpread({}, this.props), {}, {
         video: this.video
       });
@@ -1254,7 +1270,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
               if (preOnError) {
                 preOnError.apply(void 0, arguments);
               }
-              _this4.handleError.apply(_this4, arguments);
+              _this5.handleError.apply(_this5, arguments);
             };
           }
         } else {
@@ -1302,7 +1318,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this,
+      var _this6 = this,
         _this$props$parentAnn,
         _this$props$parentAnn2,
         _this$props$parentAnn3,
@@ -1331,7 +1347,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement(VideoBlock, {
         className: "video-react-player-block",
         ref: function ref(c) {
-          _this5.playerBlock = c;
+          _this6.playerBlock = c;
         },
         style: this.getStyle(),
         HDBorder: player.HDBorderActive,
@@ -1339,7 +1355,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       }, isBuffering && /*#__PURE__*/_react["default"].createElement("div", {
         className: "loader-container",
         onClick: function onClick() {
-          return _this5.togglePlay();
+          return _this6.togglePlay();
         }
       }, /*#__PURE__*/_react["default"].createElement(_components.Loader, {
         theme: theme,
@@ -1347,7 +1363,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
       })) || null, fileType === 'audio' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("canvas", {
         id: "canvas",
         ref: function ref(c) {
-          _this5.canvas = c;
+          _this6.canvas = c;
         },
         style: {
           top: 0,
@@ -1358,7 +1374,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         id: videoId,
         crossOrigin: "anonymous",
         ref: function ref(c) {
-          _this5.video = c;
+          _this6.video = c;
         },
         muted: muted,
         preload: preload,
@@ -1394,7 +1410,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         id: videoId,
         crossOrigin: crossOrigin,
         ref: function ref(c) {
-          _this5.video = c;
+          _this6.video = c;
         },
         muted: muted,
         preload: preload,
@@ -1426,7 +1442,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         onVolumeChange: this.handleVolumeChange
       }, /*#__PURE__*/_react["default"].createElement("track", {
         kind: "captions"
-      }), this.renderChildren()), this.state.shouldShowAnnotate && (((_this$props$parentAnn = this.props.parentAnnotations) === null || _this$props$parentAnn === void 0 ? void 0 : _this$props$parentAnn.length) > 0 || this.props.isSvgLayer) && /*#__PURE__*/_react["default"].createElement("svg", {
+      }), this.renderChildren()), this.state.shouldShowAnnotate && (((_this$props$parentAnn = this.props.parentAnnotations) === null || _this$props$parentAnn === void 0 ? void 0 : _this$props$parentAnn.length) > 0 || this.props.isSvgLayer) ? /*#__PURE__*/_react["default"].createElement("svg", {
+        key: "".concat(this.state.annotationsVersion),
         ref: this.props.playerSvgRef,
         onMouseDown: this.props.handleMouseDown,
         onMouseMove: this.props.handleMouseMove,
@@ -1441,8 +1458,8 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           zIndex: 999
         }
       }, ((_this$props$parentAnn2 = this.props.parentAnnotations) === null || _this$props$parentAnn2 === void 0 ? void 0 : _this$props$parentAnn2.length) && ((_this$props$parentAnn3 = this.props.parentAnnotations) === null || _this$props$parentAnn3 === void 0 ? void 0 : _this$props$parentAnn3.map(function (ann, idx) {
-        var _this5$props$playerSv;
-        var svg = (_this5$props$playerSv = _this5.props.playerSvgRef) === null || _this5$props$playerSv === void 0 ? void 0 : _this5$props$playerSv.current;
+        var _this6$props$playerSv;
+        var svg = (_this6$props$playerSv = _this6.props.playerSvgRef) === null || _this6$props$playerSv === void 0 ? void 0 : _this6$props$playerSv.current;
         if (!svg) return null;
         var svgData = svg.getBoundingClientRect();
         var width = svgData.width;
@@ -1462,10 +1479,10 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
             strokeWidth: "4",
             fill: "none",
             onMouseDown: function onMouseDown(e) {
-              return _this5.props.onShapeMouseDown(e, idx, ann);
+              return _this6.props.onShapeMouseDown(e, idx, ann);
             },
             style: {
-              cursor: _this5.props.isSvgLayer ? 'move' : 'default'
+              cursor: _this6.props.isSvgLayer ? 'move' : 'default'
             }
           });
         } else if (ann.type === 'line' || ann.type === 'arrow') {
@@ -1483,25 +1500,25 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
             strokeWidth: "4",
             markerEnd: ann.type === 'arrow' ? "url(#open-arrowhead-".concat(ann.color.replace('#', ''), "-").concat(idx, ")") : undefined,
             onMouseDown: function onMouseDown(e) {
-              return _this5.props.onShapeMouseDown(e, idx, ann);
+              return _this6.props.onShapeMouseDown(e, idx, ann);
             },
             style: {
               color: ann.color,
-              cursor: _this5.props.isSvgLayer ? 'move' : 'default'
+              cursor: _this6.props.isSvgLayer ? 'move' : 'default'
             }
           });
         } else if (ann.type === 'pencil') {
           return /*#__PURE__*/_react["default"].createElement("path", {
             key: idx,
-            d: _this5.buildSmoothPath(ann.points, width, height),
+            d: _this6.buildSmoothPath(ann.points, width, height),
             stroke: ann.color,
             strokeWidth: "4",
             fill: "none",
             onMouseDown: function onMouseDown(e) {
-              return _this5.props.onShapeMouseDown(e, idx, ann);
+              return _this6.props.onShapeMouseDown(e, idx, ann);
             },
             style: {
-              cursor: _this5.props.isSvgLayer ? 'move' : 'default'
+              cursor: _this6.props.isSvgLayer ? 'move' : 'default'
             }
           });
         }
@@ -1525,7 +1542,7 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
           }));
         }
         return null;
-      })))), children, /*#__PURE__*/_react["default"].createElement("p", {
+      }))) : null), children, /*#__PURE__*/_react["default"].createElement("p", {
         className: "user-name-wrapper",
         id: "watermark-text",
         style: _objectSpread({}, watermark)
@@ -1533,11 +1550,11 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
         id: "outer",
         currentSubtitleObj: currentSubtitleObj,
         onClick: function onClick() {
-          return _this5.handleSubtitleContainerClick();
+          return _this6.handleSubtitleContainerClick();
         }
       }, /*#__PURE__*/_react["default"].createElement("span", {
         onClick: function onClick(e) {
-          return _this5.handleSubtitleClick(e);
+          return _this6.handleSubtitleClick(e);
         },
         className: "subtitleContainer longSubtitleStyles",
         style: _objectSpread({}, currentSubtitleObj.style)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.0.74",
+  "version": "4.0.76",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {