@desynova-digital/player 3.3.2 → 3.5.1

package/actions/player.js

@@ -149,7 +149,9 @@ function forward(seconds) {
     source: ''
   };
 
-  this.video.pause();
+  if (seconds < 1) {
+    this.video.pause();
+  }
   this.video.forward(seconds);
 
   return {
@@ -165,7 +167,9 @@ function replay(seconds) {
     source: ''
   };
 
-  this.video.pause();
+  if (seconds < 1) {
+    this.video.pause();
+  }
   this.video.replay(seconds);
 
   return {

package/components/Player.js

@@ -290,9 +290,9 @@ var Player = function (_Component) {
     }
   }, {
     key: 'onSegmentClick',
-    value: function onSegmentClick(start_time, end_time) {
+    value: function onSegmentClick(start_time, end_time, seek) {
       this.actions.handleMarkerUpdate(start_time, end_time);
-      this.actions.play();
+      seek ? this.actions.pause() : this.actions.play();
       this.actions.handleVideoRewind(false);
       this.actions.seek(start_time);
       this.actions.handleVideoPreview(true);

package/components/PlayerHeader.js

@@ -78,7 +78,7 @@ var VideoTitle = _styledComponents2.default.button.withConfig({
 var PlayerDetails = _styledComponents2.default.div.withConfig({
   displayName: 'PlayerHeader__PlayerDetails',
   componentId: 'conl4h-2'
-})(['margin-left:20px;text-align:left;.video-bottom-container{display:flex;justify-content:flex-start;align-items:center;margin-top:8px;.video-sub-title{color:#afb2ba;font-size:10px;font-family:SFUIText-Medium;margin-right:5px;}.version-category{font-size:10px;letter-spacing:0.4px;color:#fff;font-family:SFUIText-Regular;text-transform:uppercase;}.versions-dropdown-block{position:relative;&:hover{.active-version{cursor:pointer;border-color:#00cec6 !important;}.versions-dropdown-container{visibility:visible;opacity:1;}}.active-version{transition:all 350ms ease-in-out;border:1px solid #fff;border-radius:10px;margin-left:5px;padding:3px 10px;color:#fff;font-size:10px;font-family:SFUIText-Regular;font-weight:bold;pointer-events:none;}.versions-dropdown-container{padding-top:15px;position:absolute;top:13px;left:50%;transform:translateX(-50%);visibility:hidden;opacity:0;transition:all 450ms ease-in-out;&:after{content:\'\';border-bottom:6px solid #00cec6;border-right:6px solid transparent;border-left:6px solid transparent;position:absolute;top:9px;left:50%;transform:translateX(-50%);}.versions-container{overflow-y:auto;overflow-x:hidden;max-height:204px;box-shadow:0px 12px 24px rgb(0 0 0 / 20%);min-width:250px;background:#fff;border-radius:10px;.ingest-versions-container{border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 15px;.ingest-version-block{display:flex;justify-content:space-between;align-items:center;.upload-type{width:6px;height:6px;border-radius:100%;overflow:hidden;left:5px;position:absolute;}.ingest-version-name{color:#182738;font-size:11px;font-family:SFUIText-Regular;font-weight:bold;margin-right:10px;}.video-versions-container{display:inline-flex;align-items:center;.more-dropdown-icon{padding-top:8px;cursor:pointer;}path{fill:#182738;}}}}&::-webkit-scrollbar{width:5px;background-color:#6d6a6a;}}}}.video-time-block{margin-left:5px;.tv-time,.ott-time{display:flex;justify-content:center;align-items:center;margin-left:10px;font-size:10px;p{margin-left:5px;color:#afb2ba;}}}}']);
+})(['margin-left:20px;text-align:left;.video-bottom-container{display:flex;justify-content:flex-start;align-items:center;margin-top:8px;.video-sub-title{color:#afb2ba;font-size:10px;font-family:SFUIText-Medium;margin-right:5px;}.version-category{font-size:10px;letter-spacing:0.4px;color:#fff;font-family:SFUIText-Regular;text-transform:uppercase;}.versions-dropdown-block{position:relative;&:hover{.active-version{cursor:pointer;border-color:#00cec6 !important;}.versions-dropdown-container{visibility:visible;opacity:1;}}.active-version{transition:all 350ms ease-in-out;border:1px solid #fff;border-radius:10px;margin-left:5px;padding:3px 10px;color:#fff;font-size:10px;font-family:SFUIText-Regular;font-weight:bold;pointer-events:none;}.versions-dropdown-container{padding-top:15px;position:absolute;top:13px;left:50%;transform:translateX(-50%);visibility:hidden;opacity:0;transition:all 450ms ease-in-out;&:after{content:\'\';border-bottom:6px solid #00cec6;border-right:6px solid transparent;border-left:6px solid transparent;position:absolute;top:9px;left:50%;transform:translateX(-50%);}.versions-container{overflow-y:auto;overflow-x:hidden;max-height:204px;box-shadow:0px 12px 24px rgb(0 0 0 / 20%);min-width:250px;background:#fff;border-radius:10px;.ingest-versions-container{border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 15px;.ingest-version-block{display:flex;justify-content:space-between;align-items:center;.upload-type{width:6px;height:6px;border-radius:100%;overflow:hidden;left:5px;position:absolute;}.ingest-version-name{color:#182738;font-size:11px;font-family:SFUIText-Regular;font-weight:bold;margin-right:10px;}.video-versions-container{display:inline-flex;align-items:center;.more-dropdown-icon{padding-top:8px;cursor:pointer;}path{fill:#182738;}}}}&::-webkit-scrollbar{width:5px;background-color:#6d6a6a;}}}}.video-time-block{margin-left:5px;display:flex;justify-content:center;align-items:center;.tv-time,.ott-time{display:flex;justify-content:center;align-items:center;margin-left:10px;p{margin-left:5px;color:rgb(175,178,186);font-family:\'SFUIText-Regular\';font-size:10px;align-self:self-end;}}}}']);
 
 var VersionBlock = _styledComponents2.default.div.withConfig({
   displayName: 'PlayerHeader__VersionBlock',
@@ -384,10 +384,19 @@ var PlayerHeader = function (_Component) {
             _react2.default.createElement(
               'div',
               { className: 'video-time-block' },
+              videoDetails.txDate ? _react2.default.createElement(
+                'div',
+                { className: 'tv-time' },
+                _react2.default.createElement(
+                  'p',
+                  null,
+                  videoDetails.txDate
+                )
+              ) : null,
               videoDetails.tvTime ? _react2.default.createElement(
                 'div',
                 { className: 'tv-time' },
-                _react2.default.createElement(_components.Icon, { name: 'tv', width: 10, height: 9, color: '#afb2ba' }),
+                _react2.default.createElement(_components.Icon, { name: 'tv', width: 14, height: 12, color: '#afb2ba' }),
                 _react2.default.createElement(
                   'p',
                   null,
@@ -397,7 +406,7 @@ var PlayerHeader = function (_Component) {
               videoDetails.ottTime ? _react2.default.createElement(
                 'div',
                 { className: 'ott-time' },
-                _react2.default.createElement(_components.Icon, { name: 'ott', width: 10, height: 14, color: '#afb2ba' }),
+                _react2.default.createElement(_components.Icon, { name: 'tablet', width: 16, height: 12, color: '#afb2ba' }),
                 _react2.default.createElement(
                   'p',
                   null,

package/components/Shortcut.js

@@ -201,8 +201,8 @@ var Shortcut = function (_Component) {
         if (playerReadOnlyMode || disablePlayerActions.includes("marking_controls")) {
           return;
         }
+        var createPoint = true;
         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) {
@@ -230,7 +230,7 @@ var Shortcut = function (_Component) {
             // }
           }
         }
-        if (player.leftMarker > -1 && player.currentTime > -1 && player.markerCreate) {
+        if (player.leftMarker > -1 && player.currentTime > -1 && player.markerCreate && createPoint && player.currentTime > player.leftMarker) {
           actions.handleMarkerPointChange('create');
           onAddMarker(player.leftMarker, player.currentTime);
         }

package/components/Video.js

@@ -447,7 +447,7 @@ var Video = function (_Component) {
         }
         this.forceUpdate(); // make sure the children can get the video property
       }
-      if (newProps.player.activeAudio && activeAudio.id !== newProps.player.activeAudio.id) {
+      if (newProps.player.activeAudio && activeAudio && activeAudio.id !== newProps.player.activeAudio.id) {
         this.hls.audioTrack = newProps.player.activeAudio.id;
       }
       if (newProps.subtitleObj && newProps.subtitleObj.field && JSON.stringify(newProps.subtitleObj) !== JSON.stringify(currentSubtitleObj)) {
@@ -461,6 +461,8 @@ var Video = function (_Component) {
             currentSubtitleObj: {
               line1: newProps.subtitleObj.field.line1,
               line2: newProps.subtitleObj.field.line2,
+              start_time: newProps.subtitleObj.field.in_time,
+              end_time: newProps.subtitleObj.field.out_time,
               style: style
             }
           });
@@ -469,6 +471,9 @@ var Video = function (_Component) {
       if (newProps.markers.length && markers.length && newProps.markers[0].values.length !== markers[0].values.length) {
         this.displaySubtitle(newProps.markers);
       }
+      if (newProps.subtitleReadOnly && newProps.subtitleDataList) {
+        this.displaySubtitle(newProps.subtitleDataList);
+      }
     }
 
     // play the video
@@ -551,7 +556,6 @@ var Video = function (_Component) {
     key: 'forward',
     value: function forward(seconds) {
       this.seek(this.video.currentTime + seconds);
-      this.displaySubtitle();
     }
 
     // jump back x seconds
@@ -560,7 +564,6 @@ var Video = function (_Component) {
     key: 'replay',
     value: function replay(seconds) {
       this.forward(-seconds);
-      this.displaySubtitle();
     }
 
     // enter or exist full screen
@@ -706,7 +709,6 @@ var Video = function (_Component) {
       if (onDurationChange) {
         onDurationChange.apply(undefined, arguments);
       }
-      this.displaySubtitle();
     }
 
     /*
@@ -728,7 +730,6 @@ var Video = function (_Component) {
       if (onProgress) {
         onProgress.apply(undefined, arguments);
       }
-      this.displaySubtitle();
     }
   }, {
     key: 'getSubtitleStyle',
@@ -745,26 +746,40 @@ var Video = function (_Component) {
     value: function displaySubtitle(marker) {
       var _props14 = this.props,
           markers = _props14.markers,
-          resetSubtitleData = _props14.resetSubtitleData;
+          resetSubtitleData = _props14.resetSubtitleData,
+          subtitleReadOnly = _props14.subtitleReadOnly,
+          subtitleDataList = _props14.subtitleDataList;
+      var currentSubtitleObj = this.state.currentSubtitleObj;
 
       if (resetSubtitleData) {
         resetSubtitleData();
       }
       var currentTime = this.video.currentTime;
       var currentMarker = marker || markers;
+      if (subtitleReadOnly) {
+        currentMarker = marker || subtitleDataList;
+      }
       if (currentMarker && currentMarker[0] && currentMarker[0].name === "Subtitle") {
         var values = currentMarker[0].values;
         var currentValue = values.filter(function (ele) {
-          return ele.in_time <= currentTime && ele.out_time >= currentTime;
+          return ele.start_time <= currentTime && ele.end_time >= currentTime;
         });
         var style = this.getSubtitleStyle(currentValue[0]);
-        this.setState({
-          currentSubtitleObj: {
-            line1: currentValue[0] && currentValue[0].line1 || '',
-            line2: currentValue[0] && currentValue[0].line2 || '',
-            style: style
-          }
-        });
+        var currentLine1 = currentSubtitleObj && currentSubtitleObj.line1 || '';
+        var propsLine1 = currentValue[0] && currentValue[0].line1 || '';
+        if (currentValue && currentValue.length && (currentSubtitleObj.start_time === currentValue[0].start_time || currentSubtitleObj.end_time === currentValue[0].end_time) && currentLine1 === propsLine1 || Object.keys(currentSubtitleObj).length && currentValue.length && currentValue.length === currentSubtitleObj.start_time.length && currentValue.length === currentSubtitleObj.end_time.length && currentLine1 === propsLine1) {
+          return;
+        } else {
+          this.setState({
+            currentSubtitleObj: {
+              line1: currentValue[0] && currentValue[0].line1 || '',
+              line2: currentValue[0] && currentValue[0].line2 || '',
+              start_time: currentValue[0] && currentValue[0].start_time || '',
+              end_time: currentValue[0] && currentValue[0].end_time || '',
+              style: style
+            }
+          });
+        }
       }
     }
 
@@ -828,7 +843,6 @@ var Video = function (_Component) {
       if (onSeeking) {
         onSeeking.apply(undefined, arguments);
       }
-      this.displaySubtitle();
     }
 
     /*

package/components/control-bar/AudioTracksMenuButton.js

@@ -88,12 +88,12 @@ var AudioTracksMenuButton = function (_Component) {
                   },
                   role: 'presentation',
                   key: track.id,
-                  style: player.activeAudio.id === track.id ? { pointerEvents: 'none' } : null
+                  style: player.activeAudio && player.activeAudio.id === track.id ? { pointerEvents: 'none' } : null
                 },
                 _react2.default.createElement(
                   'p',
                   {
-                    style: player.activeAudio.id === track.id ? { color: '#00cec6', pointerEvents: 'none' } : { color: '#333333' }
+                    style: player.activeAudio && player.activeAudio.id === track.id ? { color: '#00cec6', pointerEvents: 'none' } : { color: '#333333' }
                   },
                   track.name
                 )

package/components/control-bar/CameraButton.js

@@ -18,6 +18,8 @@ var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 var _components = require("@desynova-digital/components");
 
+var _utils = require("../../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -56,7 +58,11 @@ var CameraButton = function (_Component) {
                 onTakeSnapshot = _props.onTakeSnapshot,
                 video = _props.video;
 
-            onTakeSnapshot(video.currentTime);
+            var timeObj = {
+                "thumbnail": (0, _utils.secondsToTime)(this.props.video.currentTime, this.props.frameRate, this.props.initialTime),
+                "thumbnail_seconds": this.props.video.currentTime
+            };
+            onTakeSnapshot(timeObj);
         }
     }, {
         key: "render",

package/components/control-bar/ControlBar.js

@@ -191,6 +191,9 @@ var ControlBar = function (_Component) {
       }, this.props, {
         key: 'volume-menu-button',
         order: 8
+      })), _react2.default.createElement(_SubtitleLanguagesMenuButton2.default, _extends({}, this.props, {
+        key: 'subtitle-menu-button',
+        order: 8
       })), _react2.default.createElement(_CameraButton2.default, {
         order: 9,
         playerType: playerType

package/package.json

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

package/reducers/player.js

@@ -45,7 +45,7 @@ var initialState = {
   previewActive: false,
   audioTracksArr: [],
   activeAudio: {},
-  markerCreate: true,
+  markerCreate: false,
   rewindActive: false,
   HLSConfig: {
     debug: true,