@desynova-digital/player 3.7.4 → 3.8.0

package/components/Video.js

@@ -471,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
@@ -743,7 +746,9 @@ 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) {
@@ -751,13 +756,18 @@ var Video = function (_Component) {
       }
       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.start_time <= currentTime && ele.end_time >= currentTime;
         });
         var style = this.getSubtitleStyle(currentValue[0]);
-        if (currentValue && currentValue.length && (currentSubtitleObj.start_time === currentValue[0].start_time || currentSubtitleObj.end_time === currentValue[0].end_time) || Object.keys(currentSubtitleObj).length && currentValue.length === currentSubtitleObj.start_time.length && currentValue.length === currentSubtitleObj.end_time.length) {
+        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({
@@ -1150,16 +1160,25 @@ var Video = function (_Component) {
       });
     }
   }, {
-    key: 'handleClick',
-    value: function handleClick() {
+    key: 'handleSubtitleClick',
+    value: function handleSubtitleClick() {
       var _props29 = this.props,
           actions = _props29.actions,
-          player = _props29.player;
+          onScreenSubtitleClick = _props29.onScreenSubtitleClick,
+          controlType = _props29.controlType;
+      var currentSubtitleObj = this.state.currentSubtitleObj;
 
-      if (player.paused) {
-        actions.play();
-      } else {
+      if (controlType === 'advanced') {
+        if (onScreenSubtitleClick) {
+          onScreenSubtitleClick(currentSubtitleObj);
+        }
         actions.pause();
+      } else {
+        if (player.paused) {
+          actions.play();
+        } else {
+          actions.pause();
+        }
       }
       actions.handleVideoRewind(false);
     }
@@ -1308,7 +1327,7 @@ var Video = function (_Component) {
           SubTitleSection,
           {
             onClick: function onClick() {
-              return _this5.handleClick();
+              return _this5.handleSubtitleClick();
             }
           },
           _react2.default.createElement(

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/components/control-bar/SubtitleLanguagesMenuButton.js

@@ -20,6 +20,8 @@ var _Menu = require('../Menu');
 
 var _Menu2 = _interopRequireDefault(_Menu);
 
+var _components = require('@desynova-digital/components');
+
 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"); } }
@@ -33,10 +35,25 @@ var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object)
 };
 
+var IconButtonStyles = (0, _styledComponents2.default)(_components.Button).withConfig({
+  displayName: 'SubtitleLanguagesMenuButton__IconButtonStyles',
+  componentId: 'sc-1g8hfwo-0'
+})(['border:none;pointer-events:stroke;background-color:', ';svg{path{fill:', ' !important;}}&:hover,&:focus,&:active{border:none;border-radius:', ';svg{path{fill:', ' !important;}}}'], function (props) {
+  return props.backgroundColor;
+}, function (_ref) {
+  var svgFillDefault = _ref.svgFillDefault;
+  return svgFillDefault;
+}, function (props) {
+  return props.borderRadius ? props.borderRadius : 'none';
+}, function (_ref2) {
+  var hoverColor = _ref2.hoverColor;
+  return hoverColor;
+});
+
 var SubtitleMenuBlock = (0, _styledComponents2.default)('div').withConfig({
   displayName: 'SubtitleLanguagesMenuButton__SubtitleMenuBlock',
-  componentId: 'sc-1g8hfwo-0'
-})(['text-align:left;background:transparent;cursor:pointer;border-bottom:1px solid #eeeeee;&:last-child{border:none;}&:hover,&:focus{background:rgba(0,206,198,0.1);}p{padding 15px;font-family:SFUIText-Medium;font-size:12px;white-space:nowrap;}']);
+  componentId: 'sc-1g8hfwo-1'
+})(['display:flex;justify-content:space-between;text-align:left;background:transparent;cursor:pointer;border-bottom:1px solid #eeeeee;&:last-child{border:none;}&:hover,&:focus{background:rgba(0,206,198,0.1);}p{padding 15px;font-family:SFUIText-Medium;font-size:12px;white-space:nowrap;}.icon-wrapper{padding:9px;}.tooltip-container{.tooltip-block{white-space:nowrap;padding:0px;left:-15px;:after{right:0px;left:auto;}p{text-transform:capitalize;font-size:10px;padding:12px;}}}']);
 
 var SubtitleLanguagesMenuButton = function (_Component) {
   _inherits(SubtitleLanguagesMenuButton, _Component);
@@ -116,6 +133,30 @@ var SubtitleLanguagesMenuButton = function (_Component) {
                     style: activeLanguage === subtitle.subtitle_info_id ? { color: '#00cec6', pointerEvents: 'none' } : { color: '#333333' }
                   },
                   subtitle.title
+                ),
+                subtitle.srt_file_name && _react2.default.createElement(
+                  'div',
+                  { className: 'icon-wrapper' },
+                  _react2.default.createElement(IconButtonStyles, {
+                    display: 'rounded',
+                    appearance: 'cta',
+                    icon: 'download',
+                    label: 'Download',
+                    iconWidth: 14,
+                    iconHeight: 14,
+                    width: 22,
+                    height: 22,
+                    hoverColor: '#FFFFFF',
+                    hoverBackgroundColor: '#00cec6',
+                    backgroundColor: activeLanguage === subtitle.subtitle_info_id ? '#00cec6' : 'rgb(51,51,51,0.1)',
+                    svgFillDefault: activeLanguage === subtitle.subtitle_info_id ? '#FFFFFF' : 'rgb(51,51,51)',
+                    borderRadius: '50%',
+                    onClick: function onClick(e) {
+                      console.log("icon clicked1");
+                      window.open(subtitle.srt_file_name, '_blank');
+                      e.stopPropagation();
+                    }
+                  })
                 )
               );
             })

package/components/marking-controls/MarkingControl.js

@@ -79,7 +79,8 @@ function MarkingControl(_ref) {
       playerType = _ref.playerType,
       allowMarkerOverlap = _ref.allowMarkerOverlap,
       playerReadOnlyMode = _ref.playerReadOnlyMode,
-      disablePlayerActions = _ref.disablePlayerActions;
+      _ref$disablePlayerAct = _ref.disablePlayerActions,
+      disablePlayerActions = _ref$disablePlayerAct === undefined ? [] : _ref$disablePlayerAct;
 
   return _react2.default.createElement(
     _react2.default.Fragment,

package/components/progress-bar/ProgressControl.js

@@ -130,7 +130,7 @@ var ProgressControl = function (_Component) {
       // To be Rectified
       if (this.seekBar.timeline) {
         this.seekBar.timeline.generateTimeline();
-        this.seekBar.audioWaveform.getWaveform();
+        // this.seekBar.audioWaveform.getWaveform();
         this.setState({ stateZoom: zoom });
       }
     }

package/components/progress-bar/SeekBar.js

@@ -18,10 +18,6 @@ var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 var _propTypes = require('prop-types');
 
-var _AudioWaveform = require('./AudioWaveform');
-
-var _AudioWaveform2 = _interopRequireDefault(_AudioWaveform);
-
 var _Slider = require('../Slider');
 
 var _Slider2 = _interopRequireDefault(_Slider);
@@ -52,6 +48,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+// import AudioWaveform from './AudioWaveform';
+
+
 // import MouseTimeDisplay from './MouseTimeDisplay';
 
 var AdvancedControlBlock = _styledComponents2.default.div.withConfig({
@@ -137,11 +136,13 @@ var SeekBar = function (_Component) {
   }, {
     key: 'handleMouseDown',
     value: function handleMouseDown() {
+      console.log('handleMouse handleMouseDown');
       this.setState({ sliderActive: true });
     }
   }, {
     key: 'handleMouseUp',
     value: function handleMouseUp(event) {
+      console.log('handleMouse handleMouseUp');
       var actions = this.props.actions;
 
       var newTime = this.getNewTime(event);
@@ -199,54 +200,53 @@ var SeekBar = function (_Component) {
         _react2.default.createElement(_MarkerBar2.default, this.props),
         tagsMarker && tagsMarker.length ? _react2.default.createElement(_TagsBar2.default, this.props) : null,
         _react2.default.createElement(
-          SliderBlock,
-          null,
+          'div',
+          {
+            onMouseDown: this.handleMouseDown,
+            onMouseMove: this.handleMouseMove,
+            onMouseUp: this.handleMouseUp
+          },
           _react2.default.createElement(
-            _Slider2.default,
-            {
-              ref: function ref(input) {
-                _this2.slider = input;
+            SliderBlock,
+            null,
+            _react2.default.createElement(
+              _Slider2.default,
+              {
+                ref: function ref(input) {
+                  _this2.slider = input;
+                },
+                label: 'video progress bar',
+                valuenow: (this.getPercent() * 100).toFixed(2),
+                valuetext: (0, _utils.formatTime)(time, duration)
+                // onMouseDown={this.handleMouseDown}
+                // onMouseMove={this.handleMouseMove}
+                // onMouseUp={this.handleMouseUp}
+                , getPercent: this.getPercent,
+                stepForward: this.stepForward,
+                stepBack: this.stepBack
               },
-              label: 'video progress bar',
-              valuenow: (this.getPercent() * 100).toFixed(2),
-              valuetext: (0, _utils.formatTime)(time, duration),
-              onMouseDown: this.handleMouseDown,
-              onMouseMove: this.handleMouseMove,
-              onMouseUp: this.handleMouseUp,
-              getPercent: this.getPercent,
-              stepForward: this.stepForward,
-              stepBack: this.stepBack
-            },
-            _react2.default.createElement(_PlayProgressBar2.default, _extends({
-              currentTime: time,
-              duration: duration,
-              playerType: playerType,
-              assetType: assetType
-            }, this.props))
-          )
-        ),
-        controlType === 'advanced' && !isFullscreen ? _react2.default.createElement(
-          _react2.default.Fragment,
-          null,
-          _react2.default.createElement(
-            AdvancedControlBlock,
-            {
-              onMouseDown: this.handleMouseDown,
-              onMouseMove: this.handleMouseMove,
-              onMouseUp: this.handleMouseUp
-            },
-            _react2.default.createElement(_AudioWaveform2.default, _extends({}, this.props, {
-              ref: function ref(c) {
-                _this2.audioWaveform = c;
-              }
-            })),
-            _react2.default.createElement(_Timeline2.default, _extends({}, this.props, {
-              ref: function ref(c) {
-                _this2.timeline = c;
-              }
-            }))
-          )
-        ) : null
+              _react2.default.createElement(_PlayProgressBar2.default, _extends({
+                currentTime: time,
+                duration: duration,
+                playerType: playerType,
+                assetType: assetType
+              }, this.props))
+            )
+          ),
+          controlType === 'advanced' && !isFullscreen ? _react2.default.createElement(
+            _react2.default.Fragment,
+            null,
+            _react2.default.createElement(
+              AdvancedControlBlock,
+              null,
+              _react2.default.createElement(_Timeline2.default, _extends({}, this.props, {
+                ref: function ref(c) {
+                  _this2.timeline = c;
+                }
+              }))
+            )
+          ) : null
+        )
       );
     }
   }]);

package/components/progress-bar/Timeline.js

@@ -39,7 +39,7 @@ var propTypes = {
 var TimelineBlock = _styledComponents2.default.div.withConfig({
   displayName: 'Timeline__TimelineBlock',
   componentId: 'sc-1qvrkuc-0'
-})(['display:flex;justify-content:space-between;align-items:stretch;position:absolute;width:100%;height:100%;top:0px;left:0;.player-time{width:100%;position:relative;height:46px;&:first-child{p{left:0px;}}&:last-child{width:10px;', '{display:none;}p{left:auto;right:0px;}}', '{position:absolute;left:0;bottom:0;}p{color:#aaa;font-size:10px;font-family:SFUIText-Regular;left:-28px;top:10px;letter-spacing:0.5px;position:absolute;}}'], _components.Icon.Element, _components.Icon.Element);
+})(['display:flex;justify-content:space-between;align-items:stretch;position:absolute;width:100%;height:100%;top:0px;left:0;.player-time{width:100%;position:relative;height:46px;user-select:none;&:first-child{p{left:0px;}}&:last-child{width:10px;', '{display:none;}p{left:auto;right:0px;}}', '{position:absolute;left:0;bottom:0;}p{color:#aaa;font-size:10px;font-family:SFUIText-Regular;left:-28px;top:10px;letter-spacing:0.5px;position:absolute;user-select:none;}}'], _components.Icon.Element, _components.Icon.Element);
 
 var Timeline = function (_Component) {
   _inherits(Timeline, _Component);

package/components/zoom-control/ZoomLevel.js

@@ -49,7 +49,8 @@ var ZoomLevelBar = _styledComponents2.default.div.withConfig({
 function ZoomLevel(_ref) {
   var percentage = _ref.percentage,
       vertical = _ref.vertical,
-      playerType = _ref.playerType;
+      playerType = _ref.playerType,
+      assetType = _ref.assetType;
 
   var style = {};
   if (vertical) {
@@ -58,7 +59,7 @@ function ZoomLevel(_ref) {
     style.width = percentage;
   }
 
-  return _react2.default.createElement(ZoomLevelBar, { style: style, playerType: playerType, vertical: vertical });
+  return _react2.default.createElement(ZoomLevelBar, { style: style, playerType: playerType, vertical: vertical, assetType: assetType });
 }
 
 ZoomLevel.propTypes = propTypes;

package/package.json

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