@desynova-digital/player 3.9.3 → 3.9.5

package/components/BigPlayButton.js

@@ -46,8 +46,8 @@ var defaultProps = {
 
 var PlayButton = (0, _styledComponents2.default)(_components.Button).withConfig({
   displayName: 'BigPlayButton__PlayButton',
-  componentId: 'o6dg96-0'
-})(['background:', ';width:100px;height:100px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:none;&:hover,&:focus{background:', ';}'], function (props) {
+  componentId: 'sc-o6dg96-0'
+})(['background:', ';width:100px;height:100px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:none;z-index:1;&:hover,&:focus{background:', ';}'], function (props) {
   return _colors2.default.common.video[props.assetType].buttonGradient;
 }, function (props) {
   return _colors2.default.common.video[props.assetType].buttonGradient;

package/components/MarkerBar.js

@@ -42,7 +42,7 @@ var defaultProps = {
 
 var MarkerBlock = _styledComponents2.default.div.withConfig({
   displayName: 'MarkerBar__MarkerBlock',
-  componentId: 'yn9zkf-0'
+  componentId: 'sc-yn9zkf-0'
 })(['width:100%;height:30px;position:', ';bottom:', ';.marker{position:absolute;width:2px;height:20px;p{font-family:SFUIText-Medium;font-size:10px;color:#ffffff;position:absolute;left:50%;transform:translateX(-50%);}', '{position:absolute;display:block;left:50%;top:10px;transform:translateX(-50%);}}'], function (props) {
   return props.controlType === 'advanced' && !props.isFullscreen ? 'relative' : 'absolute';
 }, function (props) {

package/components/PlayerHeader.js

@@ -56,7 +56,7 @@ var propTypes = {
 
 var PlayerHeaderBlock = _styledComponents2.default.div.withConfig({
   displayName: 'PlayerHeader__PlayerHeaderBlock',
-  componentId: 'conl4h-0'
+  componentId: 'sc-conl4h-0'
 })(['position:relative;display:flex;justify-content:flex-start;align-items:center;background:#000;transition:all 250ms ease-in-out;height:', ';width:100%;z-index:1;position:', ';top:', ';overflow:', ';'], function (props) {
   return props.player === 'panel' && props.active || props.player !== 'panel' ? '60px' : '0px';
 }, function (props) {
@@ -69,7 +69,7 @@ var PlayerHeaderBlock = _styledComponents2.default.div.withConfig({
 
 var VideoTitle = _styledComponents2.default.button.withConfig({
   displayName: 'PlayerHeader__VideoTitle',
-  componentId: 'conl4h-1'
+  componentId: 'sc-conl4h-1'
 })(['font-family:SFUIText-Regular;text-align:left;padding:0;font-size:13px;color:#ffffff;background-color:transparent;border:none;outline:none;cursor:', ';'], function (_ref) {
   var isShowPageAvailable = _ref.isShowPageAvailable;
   return isShowPageAvailable ? 'pointer' : 'default';
@@ -77,12 +77,12 @@ var VideoTitle = _styledComponents2.default.button.withConfig({
 
 var PlayerDetails = _styledComponents2.default.div.withConfig({
   displayName: 'PlayerHeader__PlayerDetails',
-  componentId: 'conl4h-2'
+  componentId: 'sc-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;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',
-  componentId: 'conl4h-3'
+  componentId: 'sc-conl4h-3'
 })(['font-family:SFUIText-Regular;font-weight:bold;font-size:10px;line-height:1.2;border-radius:100%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:', ';color:', ';&.active{background:', ';color:#ffffff;pointer-events:none;}margin-right:10px;'], function (props) {
   return props.upload_type === 'fc' ? 'rgba(0, 206, 198, 0.1)' : 'rgba(255, 99, 39, 0.1)';
 }, function (props) {
@@ -93,17 +93,17 @@ var VersionBlock = _styledComponents2.default.div.withConfig({
 
 var PlayerType = _styledComponents2.default.div.withConfig({
   displayName: 'PlayerHeader__PlayerType',
-  componentId: 'conl4h-4'
+  componentId: 'sc-conl4h-4'
 })(['margin-left:auto;margin-right:15px;display:flex;', '{padding:7px;background-color:rgba(255,255,255,0.1);border:none;}'], _components.Button.Element);
 
 var QCReportButton = (0, _styledComponents2.default)(_components.Button).withConfig({
   displayName: 'PlayerHeader__QCReportButton',
-  componentId: 'conl4h-5'
+  componentId: 'sc-conl4h-5'
 })(['pointer-events:all !important;margin-right:10px;']);
 
 var BackButton = (0, _styledComponents2.default)(_components.Button).withConfig({
   displayName: 'PlayerHeader__BackButton',
-  componentId: 'conl4h-6'
+  componentId: 'sc-conl4h-6'
 })(['background:', ';border:none;margin:10px;margin-right:0;width:40px;height:40px;&:hover,&:focus{background:', ';}', '{transform:translate(-50%,-50%);top:50%;left:50%;position:absolute;}'], function (props) {
   return _colors2.default.common.video[props.assetType].base;
 }, function (props) {

package/components/Playlist.js

@@ -41,17 +41,17 @@ var propTypes = {
 
 var PlaylistContainer = (0, _styledComponents2.default)('div').withConfig({
   displayName: 'Playlist__PlaylistContainer',
-  componentId: 'pwroms-0'
+  componentId: 'sc-pwroms-0'
 })(['', '{display:none;}'], _components.Carousel.Header);
 
 var PlaylistCarousel = (0, _styledComponents2.default)(_components.Carousel).withConfig({
   displayName: 'Playlist__PlaylistCarousel',
-  componentId: 'pwroms-1'
+  componentId: 'sc-pwroms-1'
 })(['width:100%;']);
 
 var PlaylistCard = (0, _styledComponents2.default)('div').withConfig({
   displayName: 'Playlist__PlaylistCard',
-  componentId: 'pwroms-2'
+  componentId: 'sc-pwroms-2'
 })(['width:143px;height:80px;opacity:', ';background:url(', ') 50% 50%/100% auto no-repeat;transform:', ';transition:all 550ms cubic-bezier(0.02,0.01,0.47,1);cursor:', ';pointer-events:', ';&:hover{opacity:1;transform:translateY(0px);}.asset-filename{text-shadow:0 2px 4px rgba(0,0,0,0.7);font-family:SFUIText-Medium;font-size:12px;line-height:1;color:#ffffff;text-align:left;height:auto;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;line-height:17px;padding:5px;}'], function (props) {
   return props.active ? '1' : '0.5';
 }, function (props) {

package/components/PointersBar.js

@@ -49,21 +49,21 @@ var defaultProps = {
 
 var PointersContainer = _styledComponents2.default.div.withConfig({
   displayName: 'PointersBar__PointersContainer',
-  componentId: 'b8687a-0'
+  componentId: 'sc-b8687a-0'
 })(['display:flex;']);
 
 var PointerBlock = _styledComponents2.default.div.withConfig({
   displayName: 'PointersBar__PointerBlock',
-  componentId: 'b8687a-1'
+  componentId: 'sc-b8687a-1'
 })(['width:100%;height:20px;position:relative;border-top:1px solid #333333;border-bottom:1px solid #333333;.empty-pointers-msg{display:flex;justify-content:center;align-items:center;height:100%;p{font-family:SFUIText-Medium;font-size:11px;color:#aaaaaa;}', '{margin:0 5px;}}'], _components.Icon.Element);
 var MarkerTagsBlock = _styledComponents2.default.div.withConfig({
   displayName: 'PointersBar__MarkerTagsBlock',
-  componentId: 'b8687a-2'
+  componentId: 'sc-b8687a-2'
 })(['min-width:100px;max-width:100px;position:relative;height:100%;.tags-block{height:20px;font-family:SFUIText-Medium;font-size:10px;color:#ffffff;text-transform:uppercase;border-top:1px solid #333333;border-bottom:1px solid #333333;p{line-height:18px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}']);
 
 var ToolTipStyles = _styledComponents2.default.div.withConfig({
   displayName: 'PointersBar__ToolTipStyles',
-  componentId: 'b8687a-3'
+  componentId: 'sc-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;', ' left:50%;transform:translateX(-50%);}}'], function (props) {
   return props.multiline ? "bottom: -21px;" : "bottom: -9px;";
 });

package/components/Shortcut.js

@@ -299,8 +299,8 @@ var Shortcut = function (_Component) {
 
         if ((playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1) && playerSelectedMarker.markerType === 'create') {
           var onDeleteMarker = _this.props.onDeleteMarker;
-          // actions.handleMarkerPointChange('delete');
 
+          actions.handleMarkerPointChange('delete');
           onDeleteMarker();
         }
       }
@@ -313,7 +313,7 @@ var Shortcut = function (_Component) {
           var onDeleteMarker = _this.props.onDeleteMarker;
 
           actions.handleVideoPreview(false);
-          // actions.handleMarkerPointChange('delete');
+          actions.handleMarkerPointChange('delete');
           onDeleteMarker();
         } else {
           return null;

package/components/Slider.js

@@ -76,7 +76,7 @@ var defaultProps = {
 
 var SliderBlock = _styledComponents2.default.div.withConfig({
   displayName: 'Slider__SliderBlock',
-  componentId: 'i91ua7-0'
+  componentId: 'sc-i91ua7-0'
 })(['position:relative;z-index:2;width:100%;height:100%;background:', ';'], _colors2.default.dark.base);
 
 var Slider = function (_Component) {

package/components/TagsBar.js

@@ -32,7 +32,7 @@ var propTypes = {
 
 var TagsBlock = _styledComponents2.default.div.withConfig({
   displayName: 'TagsBar__TagsBlock',
-  componentId: 'n53sgs-0'
+  componentId: 'sc-n53sgs-0'
 })(['width:100%;height:10px;position:absolute;bottom:40px;cursor:default;.marker{position:absolute;width:2px;height:100%;background:#00cec6;cursor:pointer;transition:transform 250ms ease-in-out;&:hover{transform:scale(2);}}']);
 
 var TagsBar = function (_Component) {

package/components/Video.js

@@ -115,12 +115,12 @@ var defaultProps = {
 
 var SubTitleSection = _styledComponents2.default.div.withConfig({
   displayName: 'Video__SubTitleSection',
-  componentId: 'omlcc3-0'
+  componentId: 'sc-omlcc3-0'
 })(['position:absolute;font-family:SFUIText-Regular;font-size:16px;bottom:20px;width:100%;display:flex;justify-content:center;text-align:center;color:#FFFFFF;height:90%;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',
-  componentId: 'omlcc3-1'
+  componentId: 'sc-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) {
@@ -1160,12 +1160,26 @@ var Video = function (_Component) {
       });
     }
   }, {
-    key: 'handleSubtitleClick',
-    value: function handleSubtitleClick() {
+    key: 'handleSubtitleContainerClick',
+    value: function handleSubtitleContainerClick() {
       var _props29 = this.props,
           actions = _props29.actions,
-          onScreenSubtitleClick = _props29.onScreenSubtitleClick,
-          controlType = _props29.controlType;
+          player = _props29.player;
+
+      if (player.paused) {
+        actions.play();
+      } else {
+        actions.pause();
+      }
+    }
+  }, {
+    key: 'handleSubtitleClick',
+    value: function handleSubtitleClick(e) {
+      var _props30 = this.props,
+          actions = _props30.actions,
+          player = _props30.player,
+          onScreenSubtitleClick = _props30.onScreenSubtitleClick,
+          controlType = _props30.controlType;
       var currentSubtitleObj = this.state.currentSubtitleObj;
 
       if (controlType === 'advanced') {
@@ -1181,23 +1195,24 @@ var Video = function (_Component) {
         }
       }
       actions.handleVideoRewind(false);
+      e.stopPropagation();
     }
   }, {
     key: 'render',
     value: function render() {
       var _this5 = this;
 
-      var _props30 = this.props,
-          loop = _props30.loop,
-          poster = _props30.poster,
-          preload = _props30.preload,
-          autoPlay = _props30.autoPlay,
-          playsInline = _props30.playsInline,
-          muted = _props30.muted,
-          crossOrigin = _props30.crossOrigin,
-          videoId = _props30.videoId,
-          fileType = _props30.fileType,
-          userEmail = _props30.userEmail;
+      var _props31 = this.props,
+          loop = _props31.loop,
+          poster = _props31.poster,
+          preload = _props31.preload,
+          autoPlay = _props31.autoPlay,
+          playsInline = _props31.playsInline,
+          muted = _props31.muted,
+          crossOrigin = _props31.crossOrigin,
+          videoId = _props31.videoId,
+          fileType = _props31.fileType,
+          userEmail = _props31.userEmail;
       var _state2 = this.state,
           isBuffering = _state2.isBuffering,
           watermark = _state2.watermark,
@@ -1325,14 +1340,14 @@ var Video = function (_Component) {
         ),
         currentSubtitleObj && currentSubtitleObj.line1 && currentSubtitleObj.line1.length && _react2.default.createElement(
           SubTitleSection,
-          {
-            onClick: function onClick() {
-              return _this5.handleSubtitleClick();
-            }
-          },
+          { id: 'outer', onClick: function onClick() {
+              return _this5.handleSubtitleContainerClick();
+            } },
           _react2.default.createElement(
             'span',
-            { className: 'subtitleContainer', style: _extends({}, currentSubtitleObj.style) },
+            { onClick: function onClick(e) {
+                return _this5.handleSubtitleClick(e);
+              }, className: 'subtitleContainer', style: _extends({}, currentSubtitleObj.style) },
             currentSubtitleObj.line1 && _react2.default.createElement(
               'pre',
               null,

package/components/control-bar/ControlBar.js

@@ -98,7 +98,7 @@ var propTypes = {
 
 var PlayerControlBlock = _styledComponents2.default.div.withConfig({
   displayName: 'ControlBar__PlayerControlBlock',
-  componentId: 'u3uawu-0'
+  componentId: 'sc-u3uawu-0'
 })(['width:100%;height:', ';overflow:', ';position:', ';bottom:', ';background:', ';display:flex;justify-content:flex-start;align-items:center;transition:all 250ms ease-in-out;'], function (props) {
   return props.player === 'panel' && props.active || props.player !== 'panel' ? '50px' : '0px';
 }, function (props) {
@@ -111,7 +111,7 @@ var PlayerControlBlock = _styledComponents2.default.div.withConfig({
 
 var VideoControlBlock = _styledComponents2.default.div.withConfig({
   displayName: 'ControlBar__VideoControlBlock',
-  componentId: 'u3uawu-1'
+  componentId: 'sc-u3uawu-1'
 })(['width:100%;display:flex;justify-content:flex-start;align-items:center;']);
 
 var defaultProps = {

package/components/control-bar/EditorControlMenuButton.js

@@ -44,12 +44,12 @@ var propTypes = {
 
 var EditContainer = (0, _styledComponents2.default)('div').withConfig({
   displayName: 'EditorControlMenuButton__EditContainer',
-  componentId: 'yoq9bd-0'
+  componentId: 'sc-yoq9bd-0'
 })(['position:relative;']);
 
 var EditBlock = (0, _styledComponents2.default)('div').withConfig({
   displayName: 'EditorControlMenuButton__EditBlock',
-  componentId: 'yoq9bd-1'
+  componentId: 'sc-yoq9bd-1'
 })(['display:flex;background:transparent;font-family:SFUIText-Medium;font-size:12px;text-transform:uppercase;justify-content:flex-start;align-items:center;border-bottom:1px solid #eeeeee;box-sizing:border-box;height:', ';padding:', ';transition:all 250ms ease-in-out;opacity:', ';pointer-events:', ';overflow:hidden;&:last-child{border:none;}&:hover,&:focus{svg path{fill:#00cec6;}p{color:#00cec6;}}svg path{fill:#afb2ba;}p{margin-left:10px;white-space:nowrap;color:#999999;}'], function (props) {
   return props.active ? '45px' : '0px';
 }, function (props) {
@@ -62,7 +62,7 @@ var EditBlock = (0, _styledComponents2.default)('div').withConfig({
 
 var CommentBlock = (0, _styledComponents2.default)('div').withConfig({
   displayName: 'EditorControlMenuButton__CommentBlock',
-  componentId: 'yoq9bd-2'
+  componentId: 'sc-yoq9bd-2'
 })(['position:relative;width:', ';padding:', ';height:', ';overflow:hidden;transition:all 250ms ease-in-out;', '{border:none;resize:none;}'], function (props) {
   return props.active ? '300px' : '0px';
 }, function (props) {
@@ -73,12 +73,12 @@ var CommentBlock = (0, _styledComponents2.default)('div').withConfig({
 
 var BackButton = (0, _styledComponents2.default)(_components.Button).withConfig({
   displayName: 'EditorControlMenuButton__BackButton',
-  componentId: 'yoq9bd-3'
+  componentId: 'sc-yoq9bd-3'
 })(['background:transparent;border:none;margin:0 !important;width:20px;height:20px;padding:0;right:15px;top:10px;position:absolute;&:hover,&:focus{background:transparent;}', '{transform:translate(-50%,-50%);top:50%;left:50%;position:absolute;svg path{fill:#000;}}'], _components.Icon.Element);
 
 var SendButton = (0, _styledComponents2.default)(_components.Button).withConfig({
   displayName: 'EditorControlMenuButton__SendButton',
-  componentId: 'yoq9bd-4'
+  componentId: 'sc-yoq9bd-4'
 })(['background:rgba(0,206,198,0.1);border:none;margin:0 !important;width:30px;height:30px;padding:0;position:absolute;right:15px;top:calc(100% - 45px);&:hover,&:focus{background:rgba(0,206,198,0.1);}', '{transform:translate(-50%,-50%);top:50%;left:50%;position:absolute;svg path{fill:#00cec6;}}'], _components.Icon.Element);
 
 var EditorControlMenuButton = function (_Component) {

package/components/control-bar/ForwardReplayControl.js

@@ -38,7 +38,7 @@ var defaultProps = {
 
 var ForwardReplayButton = (0, _styledComponents2.default)(_components.Button).withConfig({
   displayName: 'ForwardReplayControl__ForwardReplayButton',
-  componentId: 's2rlry-0'
+  componentId: 'sc-s2rlry-0'
 })(['background:transparent;border:none;margin:0 10px;&:hover,&:focus{background:transparent;}']);
 
 exports.default = function (mode) {

package/components/control-bar/PlayToggle.js

@@ -38,7 +38,7 @@ var defaultProps = {
 
 var PlayPauseButton = (0, _styledComponents2.default)(_components.Button).withConfig({
   displayName: 'PlayToggle__PlayPauseButton',
-  componentId: 'pe28t7-0'
+  componentId: 'sc-pe28t7-0'
 })(['background:transparent;border:none;margin:0 10px;&:hover,&:focus{background:transparent;}']);
 
 var PlayToggle = function (_Component) {

package/components/marking-controls/MarkingControl.js

@@ -63,7 +63,7 @@ var defaultProps = {
 
 var MarkingBlock = _styledComponents2.default.div.withConfig({
   displayName: 'MarkingControl__MarkingBlock',
-  componentId: 'zeqqs4-0'
+  componentId: 'sc-zeqqs4-0'
 })(['min-width:300px;margin:0 15px;display:flex;justify-content:flex-start;align-items:center;']);
 
 function MarkingControl(_ref) {

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

@@ -33,7 +33,7 @@ var propTypes = {
 
 var SafeAreaBlock = (0, _styledComponents2.default)('div').withConfig({
   displayName: 'SafeAreaControl__SafeAreaBlock',
-  componentId: 'zvok24-0'
+  componentId: 'sc-zvok24-0'
 })(['display:flex;background:transparent;font-family:SFUIText-Medium;font-size:12px;text-transform:uppercase;justify-content:flex-start;align-items:center;&:hover{background:rgba(0,206,198,0.1);}p{margin-left:10px;white-space:nowrap;}']);
 
 var SafeAreaControl = function (_Component) {

package/components/time-controls/CurrentTimeDisplay.js

@@ -30,7 +30,7 @@ var defaultProps = {
 
 var VideoCurrentTime = _styledComponents2.default.div.withConfig({
   displayName: 'CurrentTimeDisplay__VideoCurrentTime',
-  componentId: 'lqzvv-0'
+  componentId: 'sc-lqzvv-0'
 })(['font-family:SFUIText-Regular;font-size:12px;letter-spacing:-0.6px;color:#ffffff;min-width:65px;text-align:left;']);
 
 function CurrentTimeDisplay(_ref) {

package/components/time-controls/DurationDisplay.js

@@ -29,7 +29,7 @@ var defaultProps = {
 
 var VideoTotalDuration = _styledComponents2.default.div.withConfig({
   displayName: 'DurationDisplay__VideoTotalDuration',
-  componentId: 'ymjmp3-0'
+  componentId: 'sc-ymjmp3-0'
 })(['font-family:SFUIText-Regular;font-size:12px;letter-spacing:-0.6px;margin:0 2px;color:#888888;']);
 
 function DurationDisplay(_ref) {

package/components/time-controls/TimeDivider.js

@@ -23,7 +23,7 @@ var propTypes = {
 
 var TimeSeperator = _styledComponents2.default.div.withConfig({
   displayName: 'TimeDivider__TimeSeperator',
-  componentId: 'tgg0s-0'
+  componentId: 'sc-tgg0s-0'
 })(['color:#888888;margin:0 2px;font-family:SFUIText-Regular;font-size:12px;letter-spacing:-0.6px;']);
 
 function TimeDivider(_ref) {

package/components/zoom-control/ZoomBar.js

@@ -36,7 +36,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 var ZoomControlBar = _styledComponents2.default.div.withConfig({
   displayName: 'ZoomBar__ZoomControlBar',
-  componentId: 'kco6ks-0'
+  componentId: 'sc-kco6ks-0'
 })(['height:100%;position:relative;cursor:pointer;z-index:1;width:100%;']);
 
 var propTypes = {

package/package.json

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