@desynova-digital/player 3.1.1 → 3.2.2

package/components/PlayerHeader.js

@@ -410,7 +410,7 @@ var PlayerHeader = function (_Component) {
         _react2.default.createElement(
           PlayerType,
           null,
-          isShareAvailable && playerType === 'default' && _react2.default.createElement(_components.Button, _extends({
+          !isFullscreen && !isUserGuest && isShareAvailable && playerType === 'default' && _react2.default.createElement(_components.Button, _extends({
             display: 'rounded',
             appearance: 'cta',
             icon: 'share',
@@ -422,7 +422,7 @@ var PlayerHeader = function (_Component) {
           }, this.props, {
             onClick: openSharePopup
           })),
-          (playerType === 'default' || playerType === 'qc') && qcReportAvailable && _react2.default.createElement(QCReportButton, _extends({
+          !isFullscreen && !isUserGuest && (playerType === 'default' || playerType === 'qc') && qcReportAvailable && _react2.default.createElement(QCReportButton, _extends({
             display: 'rounded',
             appearance: 'cta',
             icon: 'qc_report',
@@ -443,7 +443,10 @@ var PlayerHeader = function (_Component) {
             height: 25,
             iconWidth: 12,
             iconHeight: 12,
-            tabIndex: '0'
+            tabIndex: '0',
+            style: {
+              pointerEvents: 'none'
+            }
           }, this.props)) : null
         )
       );

package/components/PointersBar.js

@@ -64,7 +64,9 @@ var MarkerTagsBlock = _styledComponents2.default.div.withConfig({
 var ToolTipStyles = _styledComponents2.default.div.withConfig({
   displayName: 'PointersBar__ToolTipStyles',
   componentId: 'b8687a-3'
-})(['position:absolute;z-index:2;height:18px;transition:left .1s ease-in-out;.tooltip-container{border-radius:0.25rem;padding:5px;width:fit-content;background:#FFFFFF;;color:#666666;h4{white-space:nowrap;font-size:12px;}&:after{content:\'\';position:absolute;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid white;bottom:-5px;left:50%;transform:translateX(-50%);top:22px;}}']);
+})(['position:absolute;z-index:2;height:18px;transition:left .1s ease-in-out;.tooltip-container{border-radius:0.25rem;padding:5px;width:fit-content;background:#FFFFFF;;color:#666666;h4{white-space:nowrap;font-size:12px;}&:after{content:\'\';position:absolute;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid white;', ' left:50%;transform:translateX(-50%);}}'], function (props) {
+  return props.multiline ? "bottom: -21px;" : "bottom: -9px;";
+});
 
 var PointersBar = function (_Component) {
   _inherits(PointersBar, _Component);
@@ -128,7 +130,8 @@ var PointersBar = function (_Component) {
 
       tooltip.isVisible = false;
       tooltip.text = title;
-      tooltip.top = e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
+      tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
+      tooltip.bottom = title.line1 ? tooltip.bottom + 22 : tooltip.bottom + 10;
       tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
       this.setState(_extends({}, tooltip), function () {
         var tooltip = _this2.state.tooltip;
@@ -138,6 +141,18 @@ var PointersBar = function (_Component) {
         _this2.setState(_extends({}, tooltip));
       });
     }
+  }, {
+    key: 'getTitle',
+    value: function getTitle(marker) {
+      var data = marker.segment_title || marker.word || '';
+      if (!data.length && marker.line1) {
+        return {
+          line1: marker.line1,
+          line2: marker.line2
+        };
+      }
+      return data;
+    }
   }, {
     key: 'render',
     value: function render() {
@@ -148,7 +163,7 @@ var PointersBar = function (_Component) {
           isVisible = _state$tooltip.isVisible,
           text = _state$tooltip.text,
           left = _state$tooltip.left,
-          top = _state$tooltip.top;
+          bottom = _state$tooltip.bottom;
 
       var self = this;
       return _react2.default.createElement(
@@ -182,7 +197,7 @@ var PointersBar = function (_Component) {
                     _this3.onMarkerClick(e, marker);
                   },
                   onMouseOver: function onMouseOver(e) {
-                    self.setTooltipData(e, marker.segment_title, true);
+                    self.setTooltipData(e, _this3.getTitle(marker));
                   },
                   onMouseOut: function onMouseOut() {
                     var tooltip = _this3.state.tooltip;
@@ -224,23 +239,12 @@ var PointersBar = function (_Component) {
                   width: 7,
                   height: 11
                 }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'to select a range. '
-                ),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Then press'
-                ),
-                _react2.default.createElement(_components.Icon, { name: 'add', stroke: '#fff', width: 10, height: 10 }),
                 _react2.default.createElement(
                   'p',
                   null,
                   'to create ',
                   marker_obj.name,
-                  '.'
+                  ' in the selected range. '
                 )
               )
             ),
@@ -255,13 +259,23 @@ var PointersBar = function (_Component) {
             )
           );
         }) : null,
-        _react2.default.createElement(
+        text && _react2.default.createElement(
           ToolTipStyles,
-          { ref: this._tooltipRef, style: { left: left || 0, top: top || 0, visibility: isVisible ? "visible" : "hidden" } },
+          { multiline: !!text.line1, ref: this._tooltipRef, style: { left: left || 0, bottom: bottom || 0, visibility: isVisible ? "visible" : "hidden" } },
           _react2.default.createElement(
             'div',
             { className: 'tooltip-container' },
-            _react2.default.createElement(
+            text.line1 && _react2.default.createElement(
+              'h4',
+              null,
+              text.line1
+            ),
+            text.line2 && _react2.default.createElement(
+              'h4',
+              null,
+              text.line2
+            ),
+            !text.line1 && _react2.default.createElement(
               'h4',
               null,
               text

package/components/Shortcut.js

@@ -224,11 +224,16 @@ var Shortcut = function (_Component) {
             if (player.leftMarker > -1 && player.rightMarker > -1 && (!player.markerCreate || player.markerType === 'update')) {
               onAddMarker(player.leftMarker, player.currentTime, 'update');
             }
-            if (player.controlType === 'default') {
-              onMarkerSelect(player.leftMarker, player.currentTime);
-            }
+            //Commented for CN-632.
+            // if (player.controlType === 'default') {
+            //   onMarkerSelect(player.leftMarker, player.currentTime);
+            // }
           }
         }
+        if (player.leftMarker > -1 && player.currentTime > -1 && player.markerCreate) {
+          actions.handleMarkerPointChange('create');
+          onAddMarker(player.leftMarker, player.currentTime);
+        }
       }
     }, {
       keyCode: 35, // End
@@ -266,16 +271,6 @@ var Shortcut = function (_Component) {
           source: 'shortcut'
         });
       }
-    }, {
-      keyCode: 67, // C Key
-      handle: function handle(player, actions) {
-        var onAddMarker = _this.props.onAddMarker;
-
-        if (player.leftMarker > -1 && player.rightMarker > -1 && player.markerCreate) {
-          actions.handleMarkerPointChange('create');
-          onAddMarker(player.leftMarker, player.rightMarker);
-        }
-      }
     }, {
       keyCode: 68, // D Key
       handle: function handle(player, actions) {
@@ -463,12 +458,12 @@ var Shortcut = function (_Component) {
     key: 'changePlaybackRate',
     value: function changePlaybackRate(player, actions) {
       var playbackRate = player.playbackRate;
-      if (playbackRate >= 4) {
-        playbackRate = 8;
-      } else if (playbackRate >= 2) {
+      if (playbackRate >= 2) {
         playbackRate = 4;
-      } else if (playbackRate >= 1) {
+      } else if (playbackRate >= 1.5) {
         playbackRate = 2;
+      } else if (playbackRate >= 1) {
+        playbackRate = 1.5;
       }
       /*
        * else if (playbackRate >= 1.25) {

package/components/Video.js

@@ -112,9 +112,14 @@ var defaultProps = {
   crossOrigin: 'anonymous'
 };
 
+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:85%;align-items:center;.subtitleContainer{border-radius:4px;width:fit-content;background:#000000;opacity:0.5;padding:8px 10px;line-height:20px;position:absolute;}']);
+
 var VideoBlock = _styledComponents2.default.div.withConfig({
   displayName: 'Video__VideoBlock',
-  componentId: 'omlcc3-0'
+  componentId: 'omlcc3-1'
 })(['position:relative;&.video-react-player-block{position:relative;transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;video{position:absolute;top:0;left:0;width:100%;height:100%;right:0;bottom:0;}.audio-tracks{position:relative;display:flex;background:rgba(0,0,0,0.5);color:#fff;z-index:10;position:absolute;width:100%;bottom:0;p{cursor:pointer;padding:10px;}}.loader-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:absolute;z-index:10;background:rgba(0,0,0,0.5)}}&.ratio-border{border:1px solid rgba(255,255,255,0.5);&:after{content:\'16:9 Safe Area\';position:absolute;color:#fff;font-family:SFUIText-Regular;font-size:12px;transform:rotate(-90deg);top:20%;left:-50px;}}']);
 
 var Video = function (_Component) {
@@ -140,7 +145,8 @@ var Video = function (_Component) {
         'left': '0px'
       },
       watermarkInterval: -1,
-      isBuffering: false
+      isBuffering: false,
+      currentSubtitleObj: {}
     };
     _this.video = null; // the html5 video
     _this.manager = new _Manager2.default(props.store);
@@ -414,7 +420,9 @@ var Video = function (_Component) {
     value: function UNSAFE_componentWillReceiveProps(newProps) {
       var _props4 = this.props,
           src = _props4.src,
-          activeAudio = _props4.player.activeAudio;
+          activeAudio = _props4.player.activeAudio,
+          currentSubtitleObj = _props4.currentSubtitleObj,
+          markers = _props4.markers;
 
       if (newProps.src !== src) {
         var isM3U8 = this.state.isM3U8;
@@ -442,6 +450,26 @@ var Video = function (_Component) {
       if (newProps.player.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)) {
+        // if(newProps.subtitleObj?.field){
+        var style = this.getSubtitleStyle(newProps.subtitleObj.field);
+        this.setState({
+          currentSubtitleObj: {
+            line1: newProps.subtitleObj.field.line1,
+            line2: newProps.subtitleObj.field.line2,
+            style: style
+          }
+        });
+        // } else if (!newProps.subtitleObj?.field?.length) {
+        // this.setState({
+        //   subtitleObj: {
+        //   }
+        // })
+        // }
+      }
+      if (newProps.markers.length && markers.length && newProps.markers[0].values.length !== markers[0].values.length) {
+        this.displaySubtitle(newProps.markers);
+      }
     }
 
     // play the video
@@ -524,6 +552,7 @@ var Video = function (_Component) {
     key: 'forward',
     value: function forward(seconds) {
       this.seek(this.video.currentTime + seconds);
+      this.displaySubtitle();
     }
 
     // jump back x seconds
@@ -532,6 +561,7 @@ var Video = function (_Component) {
     key: 'replay',
     value: function replay(seconds) {
       this.forward(-seconds);
+      this.displaySubtitle();
     }
 
     // enter or exist full screen
@@ -677,6 +707,7 @@ var Video = function (_Component) {
       if (onDurationChange) {
         onDurationChange.apply(undefined, arguments);
       }
+      this.displaySubtitle();
     }
 
     /*
@@ -698,6 +729,40 @@ var Video = function (_Component) {
       if (onProgress) {
         onProgress.apply(undefined, arguments);
       }
+      this.displaySubtitle();
+    }
+  }, {
+    key: 'getSubtitleStyle',
+    value: function getSubtitleStyle(data) {
+      var style = {};
+      style.top = data && data.text_position === 'text_position_top' ? '0px' : '';
+      style.bottom = data && data.text_position === 'text_position_bottom' ? '0px' : '';
+      style.left = data && data.text_alignment === 'text_aligned_left' ? '0px' : '';
+      style.right = data && data.text_alignment === 'text_aligned_right' ? '0px' : '';
+      return style;
+    }
+  }, {
+    key: 'displaySubtitle',
+    value: function displaySubtitle(marker) {
+      var _props14 = this.props,
+          currentTime = _props14.player.currentTime,
+          markers = _props14.markers;
+
+      var currentMarker = marker || markers;
+      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;
+        });
+        var style = this.getSubtitleStyle(currentValue[0]);
+        this.setState({
+          currentSubtitleObj: {
+            line1: currentValue[0] && currentValue[0].line1 || '',
+            line2: currentValue[0] && currentValue[0].line2 || '',
+            style: style
+          }
+        });
+      }
     }
 
     /*
@@ -708,11 +773,11 @@ var Video = function (_Component) {
   }, {
     key: 'handleEnded',
     value: function handleEnded() {
-      var _props14 = this.props,
-          loop = _props14.loop,
-          player = _props14.player,
-          actions = _props14.actions,
-          onEnded = _props14.onEnded;
+      var _props15 = this.props,
+          loop = _props15.loop,
+          player = _props15.player,
+          actions = _props15.actions,
+          onEnded = _props15.onEnded;
 
       if (loop) {
         this.seek(0);
@@ -732,9 +797,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleWaiting',
     value: function handleWaiting() {
-      var _props15 = this.props,
-          actions = _props15.actions,
-          onWaiting = _props15.onWaiting;
+      var _props16 = this.props,
+          actions = _props16.actions,
+          onWaiting = _props16.onWaiting;
 
       actions.handleWaiting(this.getProperties());
 
@@ -751,15 +816,16 @@ var Video = function (_Component) {
   }, {
     key: 'handleSeeking',
     value: function handleSeeking() {
-      var _props16 = this.props,
-          actions = _props16.actions,
-          onSeeking = _props16.onSeeking;
+      var _props17 = this.props,
+          actions = _props17.actions,
+          onSeeking = _props17.onSeeking;
 
       actions.handleSeeking(this.getProperties());
 
       if (onSeeking) {
         onSeeking.apply(undefined, arguments);
       }
+      this.displaySubtitle();
     }
 
     /*
@@ -770,9 +836,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleSeeked',
     value: function handleSeeked() {
-      var _props17 = this.props,
-          actions = _props17.actions,
-          onSeeked = _props17.onSeeked;
+      var _props18 = this.props,
+          actions = _props18.actions,
+          onSeeked = _props18.onSeeked;
 
       actions.handleSeeked(this.getProperties());
 
@@ -795,9 +861,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleSuspend',
     value: function handleSuspend() {
-      var _props18 = this.props,
-          actions = _props18.actions,
-          onSuspend = _props18.onSuspend;
+      var _props19 = this.props,
+          actions = _props19.actions,
+          onSuspend = _props19.onSuspend;
 
       actions.handleSuspend(this.getProperties());
       if (onSuspend) {
@@ -810,9 +876,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleAbort',
     value: function handleAbort() {
-      var _props19 = this.props,
-          actions = _props19.actions,
-          onAbort = _props19.onAbort;
+      var _props20 = this.props,
+          actions = _props20.actions,
+          onAbort = _props20.onAbort;
 
       actions.handleAbort(this.getProperties());
       if (onAbort) {
@@ -825,9 +891,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleEmptied',
     value: function handleEmptied() {
-      var _props20 = this.props,
-          actions = _props20.actions,
-          onEmptied = _props20.onEmptied;
+      var _props21 = this.props,
+          actions = _props21.actions,
+          onEmptied = _props21.onEmptied;
 
       actions.handleEmptied(this.getProperties());
       if (onEmptied) {
@@ -843,9 +909,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleStalled',
     value: function handleStalled() {
-      var _props21 = this.props,
-          actions = _props21.actions,
-          onStalled = _props21.onStalled;
+      var _props22 = this.props,
+          actions = _props22.actions,
+          onStalled = _props22.onStalled;
 
       actions.handleStalled(this.getProperties());
 
@@ -862,10 +928,10 @@ var Video = function (_Component) {
   }, {
     key: 'handleLoadedMetaData',
     value: function handleLoadedMetaData() {
-      var _props22 = this.props,
-          actions = _props22.actions,
-          onLoadedMetadata = _props22.onLoadedMetadata,
-          startTime = _props22.startTime;
+      var _props23 = this.props,
+          actions = _props23.actions,
+          onLoadedMetadata = _props23.onLoadedMetadata,
+          startTime = _props23.startTime;
 
 
       if (startTime && startTime > 0) {
@@ -887,9 +953,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleLoadedData',
     value: function handleLoadedData() {
-      var _props23 = this.props,
-          actions = _props23.actions,
-          onLoadedData = _props23.onLoadedData;
+      var _props24 = this.props,
+          actions = _props24.actions,
+          onLoadedData = _props24.onLoadedData;
 
       actions.handleLoadedData(this.getProperties());
 
@@ -906,12 +972,12 @@ var Video = function (_Component) {
   }, {
     key: 'handleTimeUpdate',
     value: function handleTimeUpdate() {
-      var _props24 = this.props,
-          _props24$player = _props24.player,
-          previewActive = _props24$player.previewActive,
-          rightMarker = _props24$player.rightMarker,
-          actions = _props24.actions,
-          onTimeUpdate = _props24.onTimeUpdate;
+      var _props25 = this.props,
+          _props25$player = _props25.player,
+          previewActive = _props25$player.previewActive,
+          rightMarker = _props25$player.rightMarker,
+          actions = _props25.actions,
+          onTimeUpdate = _props25.onTimeUpdate;
 
       actions.handleTimeUpdate(this.getProperties());
       if (previewActive && this.video.currentTime >= rightMarker) {
@@ -931,9 +997,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleRateChange',
     value: function handleRateChange() {
-      var _props25 = this.props,
-          actions = _props25.actions,
-          onRateChange = _props25.onRateChange;
+      var _props26 = this.props,
+          actions = _props26.actions,
+          onRateChange = _props26.onRateChange;
 
       actions.handleRateChange(this.getProperties());
 
@@ -947,9 +1013,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleVolumeChange',
     value: function handleVolumeChange() {
-      var _props26 = this.props,
-          actions = _props26.actions,
-          onVolumeChange = _props26.onVolumeChange;
+      var _props27 = this.props,
+          actions = _props27.actions,
+          onVolumeChange = _props27.onVolumeChange;
 
       actions.handleVolumeChange(this.getProperties());
 
@@ -966,9 +1032,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleError',
     value: function handleError() {
-      var _props27 = this.props,
-          actions = _props27.actions,
-          onError = _props27.onError;
+      var _props28 = this.props,
+          actions = _props28.actions,
+          onError = _props28.onError;
 
       actions.handleError(this.getProperties());
       if (onError) {
@@ -1080,20 +1146,21 @@ var Video = function (_Component) {
     value: function render() {
       var _this5 = this;
 
-      var _props28 = this.props,
-          loop = _props28.loop,
-          poster = _props28.poster,
-          preload = _props28.preload,
-          autoPlay = _props28.autoPlay,
-          playsInline = _props28.playsInline,
-          muted = _props28.muted,
-          crossOrigin = _props28.crossOrigin,
-          videoId = _props28.videoId,
-          fileType = _props28.fileType,
-          userEmail = _props28.userEmail;
+      var _props29 = this.props,
+          loop = _props29.loop,
+          poster = _props29.poster,
+          preload = _props29.preload,
+          autoPlay = _props29.autoPlay,
+          playsInline = _props29.playsInline,
+          muted = _props29.muted,
+          crossOrigin = _props29.crossOrigin,
+          videoId = _props29.videoId,
+          fileType = _props29.fileType,
+          userEmail = _props29.userEmail;
       var _state2 = this.state,
           isBuffering = _state2.isBuffering,
-          watermark = _state2.watermark;
+          watermark = _state2.watermark,
+          currentSubtitleObj = _state2.currentSubtitleObj;
 
 
       var children = this.getChildren(this.props);
@@ -1214,6 +1281,37 @@ var Video = function (_Component) {
           'p',
           { className: 'user-name-wrapper', id: 'watermark-text', style: _extends({}, watermark) },
           userEmail
+        ),
+        currentSubtitleObj && currentSubtitleObj.line1 && currentSubtitleObj.line1.length && _react2.default.createElement(
+          SubTitleSection,
+          {
+            onClick: function onClick() {
+              if (player.paused) {
+                actions.play();
+              } else {
+                actions.pause();
+              }
+              actions.handleVideoRewind(false);
+            }
+          },
+          _react2.default.createElement(
+            'span',
+            { className: 'subtitleContainer', style: _extends({}, currentSubtitleObj.style) },
+            _react2.default.createElement(
+              'p',
+              null,
+              ' ',
+              currentSubtitleObj.line1,
+              ' '
+            ),
+            _react2.default.createElement(
+              'p',
+              null,
+              ' ',
+              currentSubtitleObj.line2,
+              ' '
+            )
+          )
         )
       );
     }

package/components/control-bar/ControlBar.js

@@ -68,6 +68,10 @@ var _MarkingControl = require('../marking-controls/MarkingControl');
 
 var _MarkingControl2 = _interopRequireDefault(_MarkingControl);
 
+var _SubtitleLanguagesMenuButton = require('./SubtitleLanguagesMenuButton');
+
+var _SubtitleLanguagesMenuButton2 = _interopRequireDefault(_SubtitleLanguagesMenuButton);
+
 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"); } }
@@ -145,6 +149,9 @@ var ControlBar = function (_Component) {
       }, this.props, {
         key: 'volume-menu-button',
         order: 7
+      })), _react2.default.createElement(_SubtitleLanguagesMenuButton2.default, _extends({}, this.props, {
+        key: 'subtitle-menu-button',
+        order: 7
       })), _react2.default.createElement(_AudioTracksMenuButton2.default, _extends({}, this.props, {
         key: 'audio-tracks-menu-button',
         order: 7

package/components/control-bar/SubtitleLanguagesMenuButton.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _Menu = require('../Menu');
+
+var _Menu2 = _interopRequireDefault(_Menu);
+
+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"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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; }
+
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object)
+};
+
+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;}']);
+
+var SubtitleLanguagesMenuButton = function (_Component) {
+  _inherits(SubtitleLanguagesMenuButton, _Component);
+
+  function SubtitleLanguagesMenuButton(props, context) {
+    _classCallCheck(this, SubtitleLanguagesMenuButton);
+
+    var _this = _possibleConstructorReturn(this, (SubtitleLanguagesMenuButton.__proto__ || Object.getPrototypeOf(SubtitleLanguagesMenuButton)).call(this, props, context));
+
+    _this.state = {
+      activeLanguage: ''
+    };
+    return _this;
+  }
+
+  _createClass(SubtitleLanguagesMenuButton, [{
+    key: 'changeSubtitle',
+    value: function changeSubtitle(subtitle) {
+      var filterSelectedSubtitle = this.props.filterSelectedSubtitle;
+
+      filterSelectedSubtitle(subtitle.subtitle_info_id);
+      this.setState({
+        activeLanguage: subtitle.subtitle_info_id
+      });
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var subtitleData = this.props.subtitleData;
+
+      if (subtitleData && subtitleData.length) {
+        this.setState({
+          activeLanguage: subtitleData[0].subtitle_info_id
+        });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          player = _props.player,
+          actions = _props.actions,
+          subtitleData = _props.subtitleData;
+      var activeLanguage = this.state.activeLanguage;
+
+      return _react2.default.createElement(
+        _react2.default.Fragment,
+        null,
+        subtitleData && subtitleData.length ? _react2.default.createElement(
+          _Menu2.default,
+          {
+            icon: 'subtitle',
+            player: player,
+            actions: actions,
+            style: { marginRight: '10px' },
+            position: 'left'
+          },
+          _react2.default.createElement(
+            'div',
+            { className: 'menu-container' },
+            subtitleData.map(function (subtitle) {
+              return _react2.default.createElement(
+                SubtitleMenuBlock,
+                {
+                  onClick: function onClick() {
+                    return _this2.changeSubtitle(subtitle);
+                  },
+                  role: 'presentation',
+                  key: subtitle.subtitle_info_id,
+                  style: activeLanguage === subtitle.subtitle_info_id ? { pointerEvents: 'none' } : null
+                },
+                _react2.default.createElement(
+                  'p',
+                  {
+                    style: activeLanguage === subtitle.subtitle_info_id ? { color: '#00cec6', pointerEvents: 'none' } : { color: '#333333' }
+                  },
+                  subtitle.title
+                )
+              );
+            })
+          )
+        ) : null
+      );
+    }
+  }]);
+
+  return SubtitleLanguagesMenuButton;
+}(_react.Component);
+
+SubtitleLanguagesMenuButton.propTypes = propTypes;
+SubtitleLanguagesMenuButton.displayName = 'SubtitleLanguagesMenuButton';
+exports.default = SubtitleLanguagesMenuButton;

package/components/marking-controls/MarkOutControl.js

@@ -100,13 +100,17 @@ var MarkOutControl = function (_Component) {
           actions = _props2.actions,
           leftMarker = _props2.leftMarker,
           controlType = _props2.controlType,
-          onMarkerSelect = _props2.onMarkerSelect;
+          onMarkerSelect = _props2.onMarkerSelect,
+          onAddMarker = _props2.onAddMarker;
 
       if (leftMarker > -1 && player.currentTime > leftMarker) {
         actions.handleMarkerPointChange('add', 'right', player.currentTime);
-        if (controlType === 'default') {
-          onMarkerSelect(leftMarker, player.currentTime);
-        }
+        //Commented for CN-632.
+        // if (controlType === 'default') {
+        //   onMarkerSelect(leftMarker, player.currentTime);
+        // }
+        actions.handleMarkerPointChange('create');
+        onAddMarker(leftMarker, player.currentTime);
       }
     }
   }, {

package/components/marking-controls/MarkingControl.js

@@ -84,10 +84,10 @@ function MarkingControl(_ref) {
   return _react2.default.createElement(
     _react2.default.Fragment,
     null,
-    playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? _react2.default.createElement(
+    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' ? _react2.default.createElement(
+      (!(player.leftMarker > -1) || !(player.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, {
@@ -105,7 +105,8 @@ function MarkingControl(_ref) {
           markers: markers,
           controlType: controlType,
           onMarkerSelect: onMarkerSelect,
-          allowMarkerOverlap: allowMarkerOverlap
+          allowMarkerOverlap: allowMarkerOverlap,
+          onAddMarker: onAddMarker
         })
       ) : null,
       player.leftMarker > -1 || player.rightMarker > -1 ? _react2.default.createElement(_MarkingDuration2.default, {
@@ -114,21 +115,11 @@ function MarkingControl(_ref) {
         frameRate: frameRate,
         initialTime: initialTime
       }) : null,
-      player.leftMarker > -1 && player.rightMarker > -1 ? _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        player.markerType === 'create' && controlType === 'advanced' && player.markerCreate ? _react2.default.createElement(_MarkingAddButton2.default, {
-          leftMarker: player.leftMarker,
-          rightMarker: player.rightMarker,
-          onAddMarker: onAddMarker,
-          actions: actions
-        }) : null
-      ) : null,
       player.leftMarker > -1 && player.rightMarker > -1 ? _react2.default.createElement(_MarkingPreview2.default, {
         actions: actions,
         leftMarker: player.leftMarker
       }) : null,
-      (player.leftMarker > -1 || player.rightMarker > -1) && player.markerType === 'create' && player.markerCreate ? _react2.default.createElement(_MarkingDeleteButton2.default, {
+      (player.leftMarker > -1 || player.rightMarker > -1) && player.markerType === 'create' && player.markerCreate && !playerReadOnlyMode && !disablePlayerActions.includes("marking_controls") ? _react2.default.createElement(_MarkingDeleteButton2.default, {
         actions: actions,
         onDeleteMarker: onDeleteMarker
       }) : null

package/components/settings-menu-control/PlaybackRateControl.js

@@ -102,35 +102,35 @@ var PlaybackRateControl = function (_Component) {
           _react2.default.createElement(
             'div',
             {
-              className: player.playbackRate === 2 ? 'playback-rate active' : 'playback-rate',
+              className: player.playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate',
               onClick: function onClick() {
-                return _this2.changePlaybackRate(2);
+                return _this2.changePlaybackRate(1.5);
               },
               role: 'presentation'
             },
-            '2x'
+            '1.5x'
           ),
           _react2.default.createElement(
             'div',
             {
-              className: player.playbackRate === 4 ? 'playback-rate active' : 'playback-rate',
+              className: player.playbackRate === 2 ? 'playback-rate active' : 'playback-rate',
               onClick: function onClick() {
-                return _this2.changePlaybackRate(4);
+                return _this2.changePlaybackRate(2);
               },
               role: 'presentation'
             },
-            '4x'
+            '2x'
           ),
           _react2.default.createElement(
             'div',
             {
-              className: player.playbackRate === 8 ? 'playback-rate active' : 'playback-rate',
+              className: player.playbackRate === 4 ? 'playback-rate active' : 'playback-rate',
               onClick: function onClick() {
-                return _this2.changePlaybackRate(8);
+                return _this2.changePlaybackRate(4);
               },
               role: 'presentation'
             },
-            '8x'
+            '4x'
           )
         )
       );

package/package.json

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