@desynova-digital/player 3.8.3 → 3.9.1

package/components/Player.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 
 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; };
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 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; }; }();
 
 var _propTypes = require('prop-types');
@@ -267,6 +269,30 @@ var Player = function (_Component) {
        * this.actions.toggleFullscreen(player);
        */
     }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      // Rendering the component only if passed props value is changed
+
+      var replacerFunc = function replacerFunc() {
+        var visited = new WeakSet();
+        return function (key, value) {
+          if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value !== null) {
+            if (visited.has(value)) {
+              return;
+            }
+            visited.add(value);
+          }
+          return value;
+        };
+      };
+
+      if (JSON.stringify(nextProps, replacerFunc()) !== JSON.stringify(this.props, replacerFunc())) {
+        return true;
+      } else {
+        return false;
+      }
+    }
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {

package/components/Shortcut.js

@@ -154,7 +154,8 @@ var Shortcut = function (_Component) {
             playerType = _this$props.playerType,
             onAddMarker = _this$props.onAddMarker,
             playerReadOnlyMode = _this$props.playerReadOnlyMode,
-            disablePlayerActions = _this$props.disablePlayerActions;
+            disablePlayerActions = _this$props.disablePlayerActions,
+            playerSelectedMarker = _this$props.playerSelectedMarker;
 
         if (playerReadOnlyMode || disablePlayerActions.includes("marking_controls")) {
           return;
@@ -179,7 +180,17 @@ var Shortcut = function (_Component) {
           }
           if (createPoint) {
             if (player.rightMarker < 0 || player.rightMarker > -1 && player.currentTime < player.rightMarker) {
-              actions.handleMarkerPointChange(player.markerType !== 'update' ? 'add' : 'update', 'left', player.currentTime);
+              // actions.handleMarkerPointChange(
+              //   player.markerType !== 'update' ? 'add' : 'update',
+              //   'left',
+              //   player.currentTime
+              // );
+              var data = {
+                markerType: player.markerType !== 'update' ? 'add' : 'update',
+                markerPos: 'left',
+                currentTime: player.currentTime
+              };
+              onAddMarker(player.currentTime, -1, '', true, data);
               if (player.leftMarker > -1 && player.rightMarker > -1 && (!player.markerCreate || player.markerType === 'update')) {
                 onAddMarker(player.currentTime, player.rightMarker, 'update');
               }
@@ -196,7 +207,8 @@ var Shortcut = function (_Component) {
             playerType = _this$props2.playerType,
             onAddMarker = _this$props2.onAddMarker,
             playerReadOnlyMode = _this$props2.playerReadOnlyMode,
-            disablePlayerActions = _this$props2.disablePlayerActions;
+            disablePlayerActions = _this$props2.disablePlayerActions,
+            playerSelectedMarker = _this$props2.playerSelectedMarker;
 
         if (playerReadOnlyMode || disablePlayerActions.includes("marking_controls")) {
           return;
@@ -216,13 +228,22 @@ var Shortcut = function (_Component) {
               }
             });
           }
-          if (!createPoint && player.markerType === 'update' && player.currentTime > player.selectedMarker.leftMarker && player.currentTime < player.selectedMarker.rightMarker) {
+          if (!createPoint && playerSelectedMarker.markerType === 'update' && player.currentTime > player.selectedMarker.leftMarker && player.currentTime < player.selectedMarker.rightMarker) {
             createPoint = true;
           }
-          if (createPoint && player.leftMarker > -1 && player.currentTime > player.leftMarker) {
-            actions.handleMarkerPointChange(player.markerType !== 'update' ? 'add' : 'update', 'right', player.currentTime);
-            if (player.leftMarker > -1 && player.rightMarker > -1 && (!player.markerCreate || player.markerType === 'update')) {
-              onAddMarker(player.leftMarker, player.currentTime, 'update');
+          if (createPoint && playerSelectedMarker.leftMarker > -1 && player.currentTime > playerSelectedMarker.leftMarker) {
+            // actions.handleMarkerPointChange(
+            //   markerType: player.markerType !== 'update' ? 'add' : 'update',
+            //   markerPos: 'right',
+            //   currentTime: player.currentTime
+            // );
+            var data = {
+              markerType: playerSelectedMarker.markerType !== 'update' ? 'add' : 'update',
+              markerPos: 'right',
+              currentTime: player.currentTime
+            };
+            if (playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 && (!playerSelectedMarker.markerCreate || playerSelectedMarker.markerType === 'update')) {
+              onAddMarker(playerSelectedMarker.leftMarker, player.currentTime, 'update', false, data);
             }
             //Commented for CN-632.
             // if (player.controlType === 'default') {
@@ -230,9 +251,9 @@ var Shortcut = function (_Component) {
             // }
           }
         }
-        if (player.leftMarker > -1 && player.currentTime > -1 && player.markerCreate && createPoint && player.currentTime > player.leftMarker) {
-          actions.handleMarkerPointChange('create');
-          onAddMarker(player.leftMarker, player.currentTime);
+        if (playerSelectedMarker.leftMarker > -1 && player.currentTime > -1 && playerSelectedMarker.markerCreate && createPoint && player.currentTime > playerSelectedMarker.leftMarker) {
+          // actions.handleMarkerPointChange('create');
+          onAddMarker(playerSelectedMarker.leftMarker, player.currentTime, '', false, { markerType: 'create' });
         }
       }
     }, {
@@ -284,11 +305,13 @@ var Shortcut = function (_Component) {
     }, {
       keyCode: 27, // Escape Key
       handle: function handle(player, actions) {
-        if (player.leftMarker > -1) {
+        var playerSelectedMarker = _this.props.playerSelectedMarker;
+
+        if (playerSelectedMarker.leftMarker > -1) {
           var onDeleteMarker = _this.props.onDeleteMarker;
 
           actions.handleVideoPreview(false);
-          actions.handleMarkerPointChange('delete');
+          // actions.handleMarkerPointChange('delete');
           onDeleteMarker();
         } else {
           return null;

package/components/Video.js

@@ -115,7 +115,7 @@ var defaultProps = {
 var SubTitleSection = _styledComponents2.default.div.withConfig({
   displayName: 'Video__SubTitleSection',
   componentId: 'omlcc3-0'
-})(['position:absolute;font-family:SFUIText-Regular;font-size:14px;bottom:20px;width:100%;display:flex;justify-content:center;text-align:center;color:#FFFFFF;height:60px;align-items:center;.subtitleContainer{border-radius:4px;width:fit-content;background:#000000;opacity:0.5;padding:8px 10px;line-height:20px;position:absolute;}']);
+})(['position:absolute;font-family:SFUIText-Regular;font-size:16px;bottom:20px;width:100%;display:flex;justify-content:center;text-align:center;color:#FFFFFF;height:60px;align-items:center;.subtitleContainer{border-radius:4px;width:fit-content;background:#000000;opacity:0.9;padding:8px 10px;line-height:20px;position:absolute;}']);
 
 var VideoBlock = _styledComponents2.default.div.withConfig({
   displayName: 'Video__VideoBlock',
@@ -1325,26 +1325,28 @@ var Video = function (_Component) {
         ),
         currentSubtitleObj && currentSubtitleObj.line1 && currentSubtitleObj.line1.length && _react2.default.createElement(
           SubTitleSection,
-          null,
+          {
+            onClick: function onClick() {
+              return _this5.handleSubtitleClick();
+            }
+          },
           _react2.default.createElement(
             'span',
-            { className: 'subtitleContainer', style: _extends({}, currentSubtitleObj.style), onClick: function onClick() {
-                return _this5.handleSubtitleClick();
-              } },
-            _react2.default.createElement(
-              'p',
+            { className: 'subtitleContainer', style: _extends({}, currentSubtitleObj.style) },
+            currentSubtitleObj.line1 && _react2.default.createElement(
+              'pre',
               null,
               ' ',
               currentSubtitleObj.line1,
               ' '
-            ),
-            _react2.default.createElement(
-              'p',
+            ) || null,
+            currentSubtitleObj.line2 && _react2.default.createElement(
+              'pre',
               null,
               ' ',
               currentSubtitleObj.line2,
               ' '
-            )
+            ) || null
           )
         )
       );

package/components/marking-controls/MarkInControl.js

@@ -93,9 +93,18 @@ var MarkInControl = function (_Component) {
     value: function handleClick() {
       var _props2 = this.props,
           player = _props2.player,
-          actions = _props2.actions;
-
-      actions.handleMarkerPointChange('add', 'left', player.currentTime);
+          actions = _props2.actions,
+          onAddMarker = _props2.onAddMarker;
+      // actions.handleMarkerPointChange('add', 'left', player.currentTime);
+
+      if (onAddMarker) {
+        var data = {
+          markerType: player.markerType !== 'update' ? 'add' : 'update',
+          markerPos: 'left',
+          currentTime: player.currentTime
+        };
+        onAddMarker(player.currentTime, -1, '', true, data);
+      }
     }
   }, {
     key: 'render',

package/components/marking-controls/MarkOutControl.js

@@ -104,13 +104,19 @@ var MarkOutControl = function (_Component) {
           onAddMarker = _props2.onAddMarker;
 
       if (leftMarker > -1 && player.currentTime > leftMarker) {
-        actions.handleMarkerPointChange('add', 'right', player.currentTime);
+        // actions.handleMarkerPointChange('add', 'right', player.currentTime);
         //Commented for CN-632.
         // if (controlType === 'default') {
         //   onMarkerSelect(leftMarker, player.currentTime);
         // }
-        actions.handleMarkerPointChange('create');
-        onAddMarker(leftMarker, player.currentTime);
+        // actions.handleMarkerPointChange('create');
+        var data = {
+          markerType: player.markerType !== 'update' ? 'add' : 'update',
+          markerPos: 'right',
+          currentTime: player.currentTime
+        };
+        onAddMarker(leftMarker, player.currentTime, 'update', false, data);
+        // onAddMarker(leftMarker, player.currentTime);
       }
     }
   }, {

package/components/marking-controls/MarkingControl.js

@@ -80,7 +80,8 @@ function MarkingControl(_ref) {
       allowMarkerOverlap = _ref.allowMarkerOverlap,
       playerReadOnlyMode = _ref.playerReadOnlyMode,
       _ref$disablePlayerAct = _ref.disablePlayerActions,
-      disablePlayerActions = _ref$disablePlayerAct === undefined ? [] : _ref$disablePlayerAct;
+      disablePlayerActions = _ref$disablePlayerAct === undefined ? [] : _ref$disablePlayerAct,
+      playerSelectedMarker = _ref.playerSelectedMarker;
 
   return _react2.default.createElement(
     _react2.default.Fragment,
@@ -88,19 +89,20 @@ function MarkingControl(_ref) {
     playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? _react2.default.createElement(
       MarkingBlock,
       null,
-      (!(player.leftMarker > -1) || !(player.rightMarker > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? _react2.default.createElement(
+      (!(playerSelectedMarker.leftMarker > -1) || !(playerSelectedMarker.rightMarker > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? _react2.default.createElement(
         _react2.default.Fragment,
         null,
         _react2.default.createElement(_MarkInControl2.default, {
-          leftMarker: player.leftMarker,
+          leftMarker: playerSelectedMarker.leftMarker,
           actions: actions,
           player: player,
           markers: markers,
-          allowMarkerOverlap: allowMarkerOverlap
+          allowMarkerOverlap: allowMarkerOverlap,
+          onAddMarker: onAddMarker
         }),
         _react2.default.createElement(_MarkOutControl2.default, {
-          leftMarker: player.leftMarker,
-          rightMarker: player.rightMarker,
+          leftMarker: playerSelectedMarker.leftMarker,
+          rightMarker: playerSelectedMarker.rightMarker,
           actions: actions,
           player: player,
           markers: markers,
@@ -110,17 +112,17 @@ function MarkingControl(_ref) {
           onAddMarker: onAddMarker
         })
       ) : null,
-      player.leftMarker > -1 || player.rightMarker > -1 ? _react2.default.createElement(_MarkingDuration2.default, {
-        leftMarker: player.leftMarker,
-        rightMarker: player.rightMarker,
+      playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1 ? _react2.default.createElement(_MarkingDuration2.default, {
+        leftMarker: playerSelectedMarker.leftMarker,
+        rightMarker: playerSelectedMarker.rightMarker,
         frameRate: frameRate,
         initialTime: initialTime
       }) : null,
-      player.leftMarker > -1 && player.rightMarker > -1 ? _react2.default.createElement(_MarkingPreview2.default, {
+      playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 ? _react2.default.createElement(_MarkingPreview2.default, {
         actions: actions,
-        leftMarker: player.leftMarker
+        leftMarker: playerSelectedMarker.leftMarker
       }) : null,
-      (player.leftMarker > -1 || player.rightMarker > -1) && player.markerType === 'create' && player.markerCreate && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? _react2.default.createElement(_MarkingDeleteButton2.default, {
+      (playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1) && playerSelectedMarker.markerType === 'create' && playerSelectedMarker.markerCreate && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? _react2.default.createElement(_MarkingDeleteButton2.default, {
         actions: actions,
         onDeleteMarker: onDeleteMarker
       }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "3.8.3",
+  "version": "3.9.1",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {
@@ -53,8 +53,8 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@desynova-digital/components": "^8.15.1",
-    "@desynova-digital/tokens": "^8.15.1",
+    "@desynova-digital/components": "^8.16.0",
+    "@desynova-digital/tokens": "^8.16.0",
     "hls.js": "^0.11.0",
     "latest-version": "^4.0.0",
     "prettycli": "^1.4.3",