@desynova-digital/player 4.0.34 → 4.0.36

package/components/Player.js

@@ -214,7 +214,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   return _createClass(Player, [{
     key: "handleMarginsAndGrid",
     value: function handleMarginsAndGrid() {
-      if (["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(this.props.playerType)) {
+      var _this$props = this.props,
+        quality = _this$props.quality,
+        playerType = _this$props.playerType;
+      if (["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(playerType)) {
         this.actions.handleSDBorderChange({
           key: "fourThreeSafeArea",
           value: false
@@ -231,8 +234,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
           key: "sixteenNineSafeArea",
           value: false
         });
-      } else if (this.props.playerType === 'qc') {
-        if (this.props.quality === 'hd') {
+      } else if (playerType === 'qc') {
+        if (quality === 'hd' || quality === 'uhd') {
           this.actions.handleSDBorderChange({
             key: "fourThreeSafeArea",
             value: false
@@ -249,7 +252,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
             key: "HDBorderActive",
             value: true
           });
-        } else if (this.props.quality === 'sd') {
+        } else if (quality === 'sd') {
           this.actions.handleSDBorderChange({
             key: "HDBorderActive",
             value: false
@@ -276,12 +279,12 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
           key: "sixteenNineSafeArea",
           value: false
         });
-        if (this.props.quality === 'hd') {
+        if (quality === 'hd' || quality === 'uhd') {
           this.actions.handleSDBorderChange({
             key: "SDBorderActive",
             value: false
           });
-        } else if (this.props.quality === 'sd') {
+        } else if (quality === 'sd') {
           this.actions.handleSDBorderChange({
             key: "HDBorderActive",
             value: false
@@ -304,9 +307,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props = this.props,
-        playerType = _this$props.playerType,
-        activeSDBorder = _this$props.activeSDBorder;
+      var _this$props2 = this.props,
+        playerType = _this$props2.playerType,
+        activeSDBorder = _this$props2.activeSDBorder;
       this.handleResize();
       if (activeSDBorder !== prevProps.activeSDBorder) {
         this.actions.handleSDBorderChange(activeSDBorder || false);
@@ -617,10 +620,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       var controlBar = (0, _reactDom.findDOMNode)(this._controlBar);
       var playlist = (0, _reactDom.findDOMNode)(this._playlist);
       var playerContainer = (0, _reactDom.findDOMNode)(this._playerContainer);
-      var _this$props2 = this.props,
-        controlType = _this$props2.controlType,
-        playerType = _this$props2.playerType,
-        fileType = _this$props2.fileType;
+      var _this$props3 = this.props,
+        controlType = _this$props3.controlType,
+        playerType = _this$props3.playerType,
+        fileType = _this$props3.fileType;
       var height = 0;
       _toConsumableArray(leftSectionRef.children).forEach(function (child) {
         return height += child.offsetHeight;
@@ -733,9 +736,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video: this.video ? this.video.video : null
       });
       var childrensLeft = this.getChildren(props, 'left');
-      var _this$props3 = this.props,
-        rightSection = _this$props3.rightSection,
-        playerType = _this$props3.playerType;
+      var _this$props4 = this.props,
+        rightSection = _this$props4.rightSection,
+        playerType = _this$props4.playerType;
       return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
         ref: function ref(c) {
           _this5.manager.rootElement = c;

package/components/Shortcut.js

@@ -288,7 +288,7 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
     }, {
       keyCode: 73,
       // I Key
-      handle: ["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(_this.props.playerType) ? function (player, actions) {
+      handle: function handle(player, actions) {
         var _this$props4 = _this.props,
           markers = _this$props4.markers,
           playerType = _this$props4.playerType,
@@ -296,88 +296,86 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
           playerReadOnlyMode = _this$props4.playerReadOnlyMode,
           disablePlayerActions = _this$props4.disablePlayerActions,
           playerSelectedMarker = _this$props4.playerSelectedMarker,
-          frameRate = _this$props4.frameRate;
-        if (playerReadOnlyMode || disablePlayerActions.includes('marking_controls')) {
-          return;
-        }
-        var currentAdjustedTime = (0, _utils.handleAdjustingVideoAsPerFrame)(player.currentTime, frameRate);
-        for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-          args[_key - 2] = arguments[_key];
-        }
-        var isOverLapTime = args[0].timeAfterOverlap;
-        if (isOverLapTime) {
-          onAddMarker(args[0].timeAfterOverlap, playerSelectedMarker.rightMarker, 'update');
-        } else {
-          if (playerType !== 'panel') {
-            var createPoint = true;
-            if (markers && markers.length && markers[0].values && markers[0].values.length) {
-              var markerArr = markers[0].values;
-              if (Object.keys(player.selectedMarker).length) {
-                markerArr = markerArr.filter(function (marker) {
-                  return marker.start_time !== player.selectedMarker.leftMarker && marker.end_time !== player.selectedMarker.rightMarker;
+          frameRate = _this$props4.frameRate,
+          onMarkerSelect = _this$props4.onMarkerSelect;
+        var isHandleDisabled = ["snp_edit", "promo_review", "pgm_edit", "dubbing_review"].includes(playerType);
+        if (!isHandleDisabled) {
+          if (playerReadOnlyMode || disablePlayerActions.includes('marking_controls')) {
+            return;
+          }
+          var currentAdjustedTime = (0, _utils.handleAdjustingVideoAsPerFrame)(player.currentTime, frameRate);
+          for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+            args[_key - 2] = arguments[_key];
+          }
+          var isOverLapTime = args[0].timeAfterOverlap;
+          if (isOverLapTime) {
+            onAddMarker(args[0].timeAfterOverlap, playerSelectedMarker.rightMarker, 'update');
+          } else {
+            if (playerType !== 'panel') {
+              var createPoint = true;
+              if (markers && markers.length && markers[0].values && markers[0].values.length) {
+                var markerArr = markers[0].values;
+                if (Object.keys(player.selectedMarker).length) {
+                  markerArr = markerArr.filter(function (marker) {
+                    return marker.start_time !== player.selectedMarker.leftMarker && marker.end_time !== player.selectedMarker.rightMarker;
+                  });
+                }
+                markerArr.filter(function (marker) {
+                  if (currentAdjustedTime >= marker.start_time && currentAdjustedTime <= marker.end_time || playerSelectedMarker.leftMarker > -1 && currentAdjustedTime > marker.start_time && playerSelectedMarker.leftMarker < marker.start_time || playerSelectedMarker.leftMarker > -1 && currentAdjustedTime < marker.start_time && playerSelectedMarker.leftMarker > marker.end_time) {
+                    createPoint = false;
+                  }
                 });
               }
-              markerArr.filter(function (marker) {
-                if (currentAdjustedTime >= marker.start_time && currentAdjustedTime <= marker.end_time || playerSelectedMarker.leftMarker > -1 && currentAdjustedTime > marker.start_time && playerSelectedMarker.leftMarker < marker.start_time || playerSelectedMarker.leftMarker > -1 && currentAdjustedTime < marker.start_time && playerSelectedMarker.leftMarker > marker.end_time) {
-                  createPoint = false;
-                }
-              });
-            }
-            if (!createPoint && playerSelectedMarker.markerType === 'update' && currentAdjustedTime > player.selectedMarker.leftMarker && currentAdjustedTime < player.selectedMarker.rightMarker) {
-              createPoint = true;
-            }
-            if (createPoint) {
-              if (playerSelectedMarker.rightMarker < 0 || playerSelectedMarker.rightMarker > -1 && currentAdjustedTime < playerSelectedMarker.rightMarker) {
-                // actions.handleMarkerPointChange(
-                //   player.markerType !== 'update' ? 'add' : 'update',
-                //   'left',
-                //   currentAdjustedTime
-                // );
-                var data = {
-                  markerType: playerSelectedMarker.data && Object.keys(playerSelectedMarker.data).length ? 'update' : 'add',
-                  markerPos: 'left',
-                  currentTime: currentAdjustedTime
-                };
-                onAddMarker(currentAdjustedTime, -1, '', true, data);
-                if (playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 && (!playerSelectedMarker.markerCreate || playerSelectedMarker.markerType === 'update' || playerSelectedMarker.data && Object.keys(playerSelectedMarker.data).length)) {
-                  onAddMarker(currentAdjustedTime, playerSelectedMarker.rightMarker, 'update');
+              if (!createPoint && playerSelectedMarker.markerType === 'update' && currentAdjustedTime > player.selectedMarker.leftMarker && currentAdjustedTime < player.selectedMarker.rightMarker) {
+                createPoint = true;
+              }
+              if (createPoint) {
+                if (playerSelectedMarker.rightMarker < 0 || playerSelectedMarker.rightMarker > -1 && currentAdjustedTime < playerSelectedMarker.rightMarker) {
+                  // actions.handleMarkerPointChange(
+                  //   player.markerType !== 'update' ? 'add' : 'update',
+                  //   'left',
+                  //   currentAdjustedTime
+                  // );
+                  var data = {
+                    markerType: playerSelectedMarker.data && Object.keys(playerSelectedMarker.data).length ? 'update' : 'add',
+                    markerPos: 'left',
+                    currentTime: currentAdjustedTime
+                  };
+                  onAddMarker(currentAdjustedTime, -1, '', true, data);
+                  if (playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 && (!playerSelectedMarker.markerCreate || playerSelectedMarker.markerType === 'update' || playerSelectedMarker.data && Object.keys(playerSelectedMarker.data).length)) {
+                    onAddMarker(currentAdjustedTime, playerSelectedMarker.rightMarker, 'update');
+                  }
                 }
               }
             }
           }
-        }
-      } : function (player) {
-        var _this$props5 = _this.props,
-          onAddMarker = _this$props5.onAddMarker,
-          playerReadOnlyMode = _this$props5.playerReadOnlyMode,
-          disablePlayerActions = _this$props5.disablePlayerActions,
-          playerSelectedMarker = _this$props5.playerSelectedMarker,
-          frameRate = _this$props5.frameRate;
-        if (playerReadOnlyMode || disablePlayerActions.includes('marking_controls')) {
-          return;
-        }
-        //for single annotations here
-        var currentAdjustedTime = (0, _utils.handleAdjustingVideoAsPerFrame)(player.currentTime, frameRate);
-        if (currentAdjustedTime < (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) || playerSelectedMarker.leftMarker === -1 || playerSelectedMarker.rightMarker === -1) {
-          onAddMarker(currentAdjustedTime, playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker, '', false, {
-            markerType: 'create'
-          });
+        } else {
+          if (playerReadOnlyMode || disablePlayerActions.includes('marking_controls')) {
+            return;
+          }
+          //for single annotations here
+          var _currentAdjustedTime = (0, _utils.handleAdjustingVideoAsPerFrame)(player.currentTime, frameRate);
+          if (_currentAdjustedTime < (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) || playerSelectedMarker.leftMarker === -1 || playerSelectedMarker.rightMarker === -1) {
+            onAddMarker(_currentAdjustedTime, playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker, '', false, {
+              markerType: 'create'
+            });
+          }
         }
       }
     }, {
       keyCode: 79,
       // O Key
       handle: function handle(player, actions) {
-        var _this$props6 = _this.props,
-          markers = _this$props6.markers,
-          onMarkerSelect = _this$props6.onMarkerSelect,
-          playerType = _this$props6.playerType,
-          onAddMarker = _this$props6.onAddMarker,
-          playerReadOnlyMode = _this$props6.playerReadOnlyMode,
-          disablePlayerActions = _this$props6.disablePlayerActions,
-          playerSelectedMarker = _this$props6.playerSelectedMarker,
-          frameRate = _this$props6.frameRate,
-          pauseOnOutMarkerSelect = _this$props6.pauseOnOutMarkerSelect;
+        var _this$props5 = _this.props,
+          markers = _this$props5.markers,
+          onMarkerSelect = _this$props5.onMarkerSelect,
+          playerType = _this$props5.playerType,
+          onAddMarker = _this$props5.onAddMarker,
+          playerReadOnlyMode = _this$props5.playerReadOnlyMode,
+          disablePlayerActions = _this$props5.disablePlayerActions,
+          playerSelectedMarker = _this$props5.playerSelectedMarker,
+          frameRate = _this$props5.frameRate,
+          pauseOnOutMarkerSelect = _this$props5.pauseOnOutMarkerSelect;
         if (playerReadOnlyMode || disablePlayerActions.includes('marking_controls')) {
           return;
         }
@@ -603,10 +601,10 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props7 = this.props,
-        shortcuts = _this$props7.shortcuts,
-        player = _this$props7.player,
-        frameRate = _this$props7.frameRate;
+      var _this$props6 = this.props,
+        shortcuts = _this$props6.shortcuts,
+        player = _this$props6.player,
+        frameRate = _this$props6.frameRate;
       if (prevProps.shortcuts !== shortcuts) {
         this.mergeShortcuts();
       }
@@ -630,10 +628,10 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "rewindVideo",
     value: function rewindVideo() {
-      var _this$props8 = this.props,
-        player = _this$props8.player,
-        actions = _this$props8.actions,
-        frameRate = _this$props8.frameRate;
+      var _this$props7 = this.props,
+        player = _this$props7.player,
+        actions = _this$props7.actions,
+        frameRate = _this$props7.frameRate;
       if (player.currentTime == 0 || !player.rewindActive) {
         clearInterval(this.intervalRewind);
         this.intervalRewind = null;
@@ -762,11 +760,11 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleKeyPress",
     value: function handleKeyPress(e) {
-      var _this$props9 = this.props,
-        player = _this$props9.player,
-        actions = _this$props9.actions,
-        frameRate = _this$props9.frameRate,
-        markers = _this$props9.markers;
+      var _this$props8 = this.props,
+        player = _this$props8.player,
+        actions = _this$props8.actions,
+        frameRate = _this$props8.frameRate,
+        markers = _this$props8.markers;
       if (!player.isActive) {
         return;
       }
@@ -805,10 +803,10 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleClick",
     value: function handleClick(e) {
-      var _this$props10 = this.props,
-        player = _this$props10.player,
-        actions = _this$props10.actions,
-        clickable = _this$props10.clickable;
+      var _this$props9 = this.props,
+        player = _this$props9.player,
+        actions = _this$props9.actions,
+        clickable = _this$props9.clickable;
       if (!this.canBeClicked(player, e) || !clickable) {
         return;
       }
@@ -818,10 +816,10 @@ var Shortcut = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleDoubleClick",
     value: function handleDoubleClick(e) {
-      var _this$props11 = this.props,
-        player = _this$props11.player,
-        actions = _this$props11.actions,
-        dblclickable = _this$props11.dblclickable;
+      var _this$props10 = this.props,
+        player = _this$props10.player,
+        actions = _this$props10.actions,
+        dblclickable = _this$props10.dblclickable;
       if (!this.canBeClicked(player, e) || !dblclickable) {
         return;
       }

package/components/Video.js

@@ -100,7 +100,7 @@ var defaultProps = {
 var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  font-family: SFUIText-Regular;\n  font-size: 16px;\n  bottom: 20px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  color: #ffffff;\n  height: 90%;\n  align-items: center;\n\n  .subtitleContainer {\n    border-radius: 4px;\n    width: fit-content;\n    background: #000000;\n    opacity: 0.9;\n    padding: ", ";\n    line-height: 20px;\n    position: absolute;\n\n    i,em {\n      font-style: italic; /* Override the font style for <em> tags inside elements with the class .someClass */\n    }\n\n    strong{\n      font-weight: bold; \n    }\n    \n  }\n  .longSubtitleStyles {\n    overflow-y: auto;\n    height: fit-content;\n    max-height: 70px;\n    max-width: 75%;\n    width: fit-content;\n  }\n"])), function (props) {
   return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
 });
-var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  &.video-react-player-block {\n    position: relative;\n    transition: all 0.1s ease-in-out;\n    -moz-transition: all 0.1s ease-in-out;\n    -webkit-transition: all 0.1s ease-in-out;\n    -ms-transition: all 0.1s ease-in-out;\n    -o-transition: all 0.1s ease-in-out;\n    video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n    }\n    .audio-tracks {\n      position: relative;\n      display: flex;\n      background: rgba(0, 0, 0, 0.5);\n      color: #fff;\n      z-index: 10;\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      p {\n        cursor: pointer;\n        padding: 10px;\n      }\n    }\n    .loader-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      z-index: 10;\n      background: rgba(0, 0, 0, 0.5);\n    }\n  }\n  &.ratio-border {\n    // border: 1px solid rgba(255, 255, 255, 0.5);\n    &:after {\n      // content: '16:9 Safe Area';\n      position: absolute;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      transform: rotate(-90deg);\n      top: 20%;\n      left: -50px;\n    }\n  }\n"])));
+var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  &.video-react-player-block {\n    position: relative;\n    transition: all 0.1s ease-in-out;\n    -moz-transition: all 0.1s ease-in-out;\n    -webkit-transition: all 0.1s ease-in-out;\n    -ms-transition: all 0.1s ease-in-out;\n    -o-transition: all 0.1s ease-in-out;\n    video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      right: 0;\n      bottom: 0;\n    }\n    .audio-tracks {\n      position: relative;\n      display: flex;\n      background: rgba(0, 0, 0, 0.5);\n      color: #fff;\n      z-index: 10;\n      position: absolute;\n      width: 100%;\n      bottom: 0;\n      p {\n        cursor: pointer;\n        padding: 10px;\n      }\n    }\n    .loader-container {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      z-index: 10;\n      background: rgba(0, 0, 0, 0.5);\n    }\n  }\n  &.ratio-border {\n    // border: 1px solid rgba(255, 255, 255, 0.5);\n    &:after {\n      content: '16:9 Safe Area';\n      position: absolute;\n      color: #fff;\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      transform: rotate(-90deg);\n      top: 20%;\n      left: -50px;\n    }\n  }\n"])));
 var Video = exports["default"] = /*#__PURE__*/function (_Component) {
   function Video(props) {
     var _this;

package/package.json

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