@desynova-digital/player 2.1.5 → 3.0.1

package/components/Player.js

@@ -328,7 +328,7 @@ var Player = function (_Component) {
         },
         key: 'control-bar',
         order: 4
-      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props))];
+      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props, { frameRate: fullProps.frameRate }))];
     }
   }, {
     key: 'getImageChildren',
@@ -385,7 +385,7 @@ var Player = function (_Component) {
         },
         key: 'control-bar',
         order: 2
-      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props))];
+      }, this.props)), _react2.default.createElement(_Shortcut2.default, _extends({ key: 'shortcut', order: 99.0 }, props, { frameRate: fullProps.frameRate }))];
     }
   }, {
     key: 'getChildren',

package/components/Shortcut.js

@@ -72,12 +72,12 @@ var Shortcut = function (_Component) {
       handle: _this.toggleFullscreen
     }, {
       keyCode: 37, // Left arrow
-      handle: function handle(player, actions) {
+      handle: function handle(player, actions, frameRate) {
         if (!player.hasStarted) {
           return;
         }
-        actions.replay(0.04, {
-          action: 'replay-0.04',
+        actions.replay(1 / frameRate, {
+          action: 'forward-' + 1 / frameRate,
           source: 'shortcut'
         }); // Go back 1 frame
       }
@@ -104,12 +104,12 @@ var Shortcut = function (_Component) {
       }
     }, {
       keyCode: 39, // Right arrow
-      handle: function handle(player, actions) {
+      handle: function handle(player, actions, frameRate) {
         if (!player.hasStarted) {
           return;
         }
-        actions.forward(0.04, {
-          action: 'forward-0.04',
+        actions.forward(1 / frameRate, {
+          action: 'forward-' + 1 / frameRate,
           source: 'shortcut'
         }); // Go forward 1 frame
       }
@@ -152,8 +152,12 @@ var Shortcut = function (_Component) {
         var _this$props = _this.props,
             markers = _this$props.markers,
             playerType = _this$props.playerType,
-            onAddMarker = _this$props.onAddMarker;
+            onAddMarker = _this$props.onAddMarker,
+            playerReadOnlyMode = _this$props.playerReadOnlyMode;
 
+        if (playerReadOnlyMode) {
+          return;
+        }
         if (playerType !== 'panel') {
           var createPoint = true;
           if (markers && markers.length && markers[0].values && markers[0].values.length) {
@@ -189,8 +193,12 @@ var Shortcut = function (_Component) {
             markers = _this$props2.markers,
             onMarkerSelect = _this$props2.onMarkerSelect,
             playerType = _this$props2.playerType,
-            onAddMarker = _this$props2.onAddMarker;
+            onAddMarker = _this$props2.onAddMarker,
+            playerReadOnlyMode = _this$props2.playerReadOnlyMode;
 
+        if (playerReadOnlyMode) {
+          return;
+        }
         if (playerType !== 'panel') {
           var createPoint = true;
           if (markers && markers.length && markers[0].values && markers[0].values.length) {
@@ -285,6 +293,8 @@ var Shortcut = function (_Component) {
           actions.handleVideoPreview(false);
           actions.handleMarkerPointChange('delete');
           onDeleteMarker();
+        } else {
+          return null;
         }
       }
     }, {
@@ -369,7 +379,7 @@ var Shortcut = function (_Component) {
       } else {
         var time = 1 / frameRate;
         actions.replay(time, {
-          action: 'replay-0.04',
+          action: 'forward-' + 1 / frameRate,
           source: 'shortcut'
         });
       }
@@ -492,7 +502,8 @@ var Shortcut = function (_Component) {
     value: function handleKeyPress(e) {
       var _props3 = this.props,
           player = _props3.player,
-          actions = _props3.actions;
+          actions = _props3.actions,
+          frameRate = _props3.frameRate;
 
       if (!player.isActive) {
         return;
@@ -517,7 +528,7 @@ var Shortcut = function (_Component) {
       })[0];
 
       if (shortcut) {
-        shortcut.handle(player, actions);
+        shortcut.handle(player, actions, frameRate);
         e.preventDefault();
       }
     }

package/components/Video.js

@@ -40,6 +40,8 @@ var _SDOutline = require('./SDOutline');
 
 var _SDOutline2 = _interopRequireDefault(_SDOutline);
 
+var _components = require('@desynova-digital/components/components');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -94,7 +96,9 @@ var propTypes = {
   onRateChange: _propTypes.PropTypes.func,
   onVolumeChange: _propTypes.PropTypes.func,
   onResize: _propTypes.PropTypes.func,
-  aspectRatio: _propTypes.PropTypes.string
+  aspectRatio: _propTypes.PropTypes.string,
+  onPlayerClose: _propTypes.PropTypes.func,
+  userEmail: _propTypes.PropTypes.string
 };
 
 var defaultProps = {
@@ -111,7 +115,7 @@ var defaultProps = {
 var VideoBlock = _styledComponents2.default.div.withConfig({
   displayName: 'Video__VideoBlock',
   componentId: 'omlcc3-0'
-})(['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;}}}&.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;}}']);
+})(['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) {
   _inherits(Video, _Component);
@@ -123,7 +127,20 @@ var Video = function (_Component) {
 
     _this.state = {
       audioTracks: [],
-      isM3U8: false
+      isM3U8: false,
+      watermark: {
+        'color': 'rgb(255, 255, 255)',
+        'position': 'absolute',
+        'font-family': 'SFUIText-Regular',
+        'text-shadow': '0 0 4px rgb(0 0 0 / 50%)',
+        'font-size': '12px',
+        'opacity': '0.6',
+        'display': 'block',
+        'top': '0px',
+        'left': '0px'
+      },
+      watermarkInterval: -1,
+      isBuffering: false
     };
     _this.video = null; // the html5 video
     _this.manager = new _Manager2.default(props.store);
@@ -162,6 +179,7 @@ var Video = function (_Component) {
     _this.handleProgress = (0, _utils.throttle)(_this.handleProgress.bind(_this), 250);
     _this.handleKeypress = _this.handleKeypress.bind(_this);
     _this.audioVisualizer = _this.audioVisualizer.bind(_this);
+    _this.checkWatermark = _this.checkWatermark.bind(_this);
     return _this;
   }
 
@@ -184,26 +202,75 @@ var Video = function (_Component) {
         this.video.src = src;
       }
       this.forceUpdate(); // make sure the children can get the video property
+      var watermarkInterval = setInterval(this.checkWatermark, 20000);
+      this.setState({
+        watermarkInterval: watermarkInterval
+      });
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      var isM3U8 = this.state.isM3U8;
+      var _state = this.state,
+          isM3U8 = _state.isM3U8,
+          watermarkInterval = _state.watermarkInterval;
 
       if (_hls2.default.isSupported() && isM3U8) {
         this.hls.detachMedia();
       } else {
         this.video.src = '';
       }
+      clearInterval(watermarkInterval);
+    }
+
+    /**
+     * This function is triggered on interval to shuffle the position of watermark on Player area
+     */
+
+  }, {
+    key: 'checkWatermark',
+    value: function checkWatermark() {
+      var watermark = this.state.watermark;
+      var _props = this.props,
+          onPlayerClose = _props.onPlayerClose,
+          userEmail = _props.userEmail;
+
+      var watermark_text = document.querySelector('#watermark-text');
+      var video_player = null;
+      var watermark_dimension = null;
+      var text_css = null;
+      var bool_text = false;
+
+      if (!watermark_text) {
+        onPlayerClose();
+      } else {
+        video_player = document.querySelector('.video-react-player-block').getBoundingClientRect();
+        watermark_dimension = watermark_text.getBoundingClientRect();
+        text_css = watermark_text.style;
+        bool_text = text_css.position !== 'absolute' || text_css.opacity !== '0.6' || text_css['font-family'] !== 'SFUIText-Regular' && text_css['font-family'] !== '"SFUIText-Regular"';
+        bool_text = bool_text || text_css.display !== 'block';
+        bool_text = bool_text || text_css.top !== watermark.top;
+        bool_text = bool_text || text_css.left !== watermark.left;
+        bool_text = bool_text || text_css.length !== 9 || text_css['font-size'] !== '12px';
+        bool_text = bool_text || text_css.color !== 'rgb(255, 255, 255)';
+        bool_text = bool_text || userEmail !== watermark_text.innerText;
+        if (bool_text) {
+          onPlayerClose();
+        }
+      }
+      watermark.left = (Math.random() * (video_player.width - watermark_dimension.width)).toFixed(0) + "px";
+      watermark.top = (Math.random() * (video_player.height - watermark_dimension.height)).toFixed(0) + "px";
+      this.setState({
+        watermark: watermark
+      });
     }
   }, {
     key: 'setupHLS',
     value: function setupHLS(src) {
       var _this2 = this;
 
-      var _props = this.props,
-          actions = _props.actions,
-          activeTrackIndex = _props.activeTrackIndex;
+      var _props2 = this.props,
+          actions = _props2.actions,
+          activeTrackIndex = _props2.activeTrackIndex;
 
       var self = this;
       // bind them together
@@ -281,10 +348,10 @@ var Video = function (_Component) {
           player = _manager$getState2.player;
 
       var style = {};
-      var _props2 = this.props,
-          aspectRatio = _props2.aspectRatio,
-          width = _props2.width,
-          height = _props2.height;
+      var _props3 = this.props,
+          aspectRatio = _props3.aspectRatio,
+          width = _props3.width,
+          height = _props3.height;
       /*
        * The aspect ratio is either used directly
        * or to calculate width and height.
@@ -345,9 +412,9 @@ var Video = function (_Component) {
   }, {
     key: 'UNSAFE_componentWillReceiveProps',
     value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var _props3 = this.props,
-          src = _props3.src,
-          activeAudio = _props3.player.activeAudio;
+      var _props4 = this.props,
+          src = _props4.src,
+          activeAudio = _props4.player.activeAudio;
 
       if (newProps.src !== src) {
         var isM3U8 = this.state.isM3U8;
@@ -472,9 +539,9 @@ var Video = function (_Component) {
   }, {
     key: 'toggleFullscreen',
     value: function toggleFullscreen() {
-      var _props4 = this.props,
-          player = _props4.player,
-          actions = _props4.actions;
+      var _props5 = this.props,
+          player = _props5.player,
+          actions = _props5.actions;
 
       actions.toggleFullscreen(player);
     }
@@ -487,10 +554,10 @@ var Video = function (_Component) {
   }, {
     key: 'handleLoadStart',
     value: function handleLoadStart() {
-      var _props5 = this.props,
-          actions = _props5.actions,
-          onLoadStart = _props5.onLoadStart,
-          fileType = _props5.fileType;
+      var _props6 = this.props,
+          actions = _props6.actions,
+          onLoadStart = _props6.onLoadStart,
+          fileType = _props6.fileType;
 
 
       if (fileType === 'audio') {
@@ -511,9 +578,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleCanPlay',
     value: function handleCanPlay() {
-      var _props6 = this.props,
-          actions = _props6.actions,
-          onCanPlay = _props6.onCanPlay;
+      var _props7 = this.props,
+          actions = _props7.actions,
+          onCanPlay = _props7.onCanPlay;
 
 
       actions.handleCanPlay(this.getProperties());
@@ -531,9 +598,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleCanPlayThrough',
     value: function handleCanPlayThrough() {
-      var _props7 = this.props,
-          actions = _props7.actions,
-          onCanPlayThrough = _props7.onCanPlayThrough;
+      var _props8 = this.props,
+          actions = _props8.actions,
+          onCanPlayThrough = _props8.onCanPlayThrough;
 
       actions.handleCanPlayThrough(this.getProperties());
 
@@ -550,9 +617,9 @@ var Video = function (_Component) {
   }, {
     key: 'handlePlaying',
     value: function handlePlaying() {
-      var _props8 = this.props,
-          actions = _props8.actions,
-          onPlaying = _props8.onPlaying;
+      var _props9 = this.props,
+          actions = _props9.actions,
+          onPlaying = _props9.onPlaying;
 
       actions.handlePlaying(this.getProperties());
 
@@ -566,9 +633,9 @@ var Video = function (_Component) {
   }, {
     key: 'handlePlay',
     value: function handlePlay() {
-      var _props9 = this.props,
-          actions = _props9.actions,
-          onPlay = _props9.onPlay;
+      var _props10 = this.props,
+          actions = _props10.actions,
+          onPlay = _props10.onPlay;
 
       actions.handlePlay(this.getProperties());
 
@@ -582,9 +649,9 @@ var Video = function (_Component) {
   }, {
     key: 'handlePause',
     value: function handlePause() {
-      var _props10 = this.props,
-          actions = _props10.actions,
-          onPause = _props10.onPause;
+      var _props11 = this.props,
+          actions = _props11.actions,
+          onPause = _props11.onPause;
 
       actions.handlePause(this.getProperties());
 
@@ -601,9 +668,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleDurationChange',
     value: function handleDurationChange() {
-      var _props11 = this.props,
-          actions = _props11.actions,
-          onDurationChange = _props11.onDurationChange;
+      var _props12 = this.props,
+          actions = _props12.actions,
+          onDurationChange = _props12.onDurationChange;
 
       actions.handleDurationChange(this.getProperties());
 
@@ -620,9 +687,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleProgress',
     value: function handleProgress() {
-      var _props12 = this.props,
-          actions = _props12.actions,
-          onProgress = _props12.onProgress;
+      var _props13 = this.props,
+          actions = _props13.actions,
+          onProgress = _props13.onProgress;
 
       if (this.video) {
         actions.handleProgressChange(this.getProperties());
@@ -641,11 +708,11 @@ var Video = function (_Component) {
   }, {
     key: 'handleEnded',
     value: function handleEnded() {
-      var _props13 = this.props,
-          loop = _props13.loop,
-          player = _props13.player,
-          actions = _props13.actions,
-          onEnded = _props13.onEnded;
+      var _props14 = this.props,
+          loop = _props14.loop,
+          player = _props14.player,
+          actions = _props14.actions,
+          onEnded = _props14.onEnded;
 
       if (loop) {
         this.seek(0);
@@ -665,9 +732,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleWaiting',
     value: function handleWaiting() {
-      var _props14 = this.props,
-          actions = _props14.actions,
-          onWaiting = _props14.onWaiting;
+      var _props15 = this.props,
+          actions = _props15.actions,
+          onWaiting = _props15.onWaiting;
 
       actions.handleWaiting(this.getProperties());
 
@@ -684,9 +751,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleSeeking',
     value: function handleSeeking() {
-      var _props15 = this.props,
-          actions = _props15.actions,
-          onSeeking = _props15.onSeeking;
+      var _props16 = this.props,
+          actions = _props16.actions,
+          onSeeking = _props16.onSeeking;
 
       actions.handleSeeking(this.getProperties());
 
@@ -703,9 +770,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleSeeked',
     value: function handleSeeked() {
-      var _props16 = this.props,
-          actions = _props16.actions,
-          onSeeked = _props16.onSeeked;
+      var _props17 = this.props,
+          actions = _props17.actions,
+          onSeeked = _props17.onSeeked;
 
       actions.handleSeeked(this.getProperties());
 
@@ -728,9 +795,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleSuspend',
     value: function handleSuspend() {
-      var _props17 = this.props,
-          actions = _props17.actions,
-          onSuspend = _props17.onSuspend;
+      var _props18 = this.props,
+          actions = _props18.actions,
+          onSuspend = _props18.onSuspend;
 
       actions.handleSuspend(this.getProperties());
       if (onSuspend) {
@@ -743,9 +810,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleAbort',
     value: function handleAbort() {
-      var _props18 = this.props,
-          actions = _props18.actions,
-          onAbort = _props18.onAbort;
+      var _props19 = this.props,
+          actions = _props19.actions,
+          onAbort = _props19.onAbort;
 
       actions.handleAbort(this.getProperties());
       if (onAbort) {
@@ -758,9 +825,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleEmptied',
     value: function handleEmptied() {
-      var _props19 = this.props,
-          actions = _props19.actions,
-          onEmptied = _props19.onEmptied;
+      var _props20 = this.props,
+          actions = _props20.actions,
+          onEmptied = _props20.onEmptied;
 
       actions.handleEmptied(this.getProperties());
       if (onEmptied) {
@@ -776,9 +843,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleStalled',
     value: function handleStalled() {
-      var _props20 = this.props,
-          actions = _props20.actions,
-          onStalled = _props20.onStalled;
+      var _props21 = this.props,
+          actions = _props21.actions,
+          onStalled = _props21.onStalled;
 
       actions.handleStalled(this.getProperties());
 
@@ -795,10 +862,10 @@ var Video = function (_Component) {
   }, {
     key: 'handleLoadedMetaData',
     value: function handleLoadedMetaData() {
-      var _props21 = this.props,
-          actions = _props21.actions,
-          onLoadedMetadata = _props21.onLoadedMetadata,
-          startTime = _props21.startTime;
+      var _props22 = this.props,
+          actions = _props22.actions,
+          onLoadedMetadata = _props22.onLoadedMetadata,
+          startTime = _props22.startTime;
 
 
       if (startTime && startTime > 0) {
@@ -820,9 +887,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleLoadedData',
     value: function handleLoadedData() {
-      var _props22 = this.props,
-          actions = _props22.actions,
-          onLoadedData = _props22.onLoadedData;
+      var _props23 = this.props,
+          actions = _props23.actions,
+          onLoadedData = _props23.onLoadedData;
 
       actions.handleLoadedData(this.getProperties());
 
@@ -839,12 +906,12 @@ var Video = function (_Component) {
   }, {
     key: 'handleTimeUpdate',
     value: function handleTimeUpdate() {
-      var _props23 = this.props,
-          _props23$player = _props23.player,
-          previewActive = _props23$player.previewActive,
-          rightMarker = _props23$player.rightMarker,
-          actions = _props23.actions,
-          onTimeUpdate = _props23.onTimeUpdate;
+      var _props24 = this.props,
+          _props24$player = _props24.player,
+          previewActive = _props24$player.previewActive,
+          rightMarker = _props24$player.rightMarker,
+          actions = _props24.actions,
+          onTimeUpdate = _props24.onTimeUpdate;
 
       actions.handleTimeUpdate(this.getProperties());
       if (previewActive && this.video.currentTime >= rightMarker) {
@@ -864,9 +931,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleRateChange',
     value: function handleRateChange() {
-      var _props24 = this.props,
-          actions = _props24.actions,
-          onRateChange = _props24.onRateChange;
+      var _props25 = this.props,
+          actions = _props25.actions,
+          onRateChange = _props25.onRateChange;
 
       actions.handleRateChange(this.getProperties());
 
@@ -880,9 +947,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleVolumeChange',
     value: function handleVolumeChange() {
-      var _props25 = this.props,
-          actions = _props25.actions,
-          onVolumeChange = _props25.onVolumeChange;
+      var _props26 = this.props,
+          actions = _props26.actions,
+          onVolumeChange = _props26.onVolumeChange;
 
       actions.handleVolumeChange(this.getProperties());
 
@@ -899,9 +966,9 @@ var Video = function (_Component) {
   }, {
     key: 'handleError',
     value: function handleError() {
-      var _props26 = this.props,
-          actions = _props26.actions,
-          onError = _props26.onError;
+      var _props27 = this.props,
+          actions = _props27.actions,
+          onError = _props27.onError;
 
       actions.handleError(this.getProperties());
       if (onError) {
@@ -1013,17 +1080,20 @@ var Video = function (_Component) {
     value: function render() {
       var _this5 = this;
 
-      var _props27 = this.props,
-          loop = _props27.loop,
-          poster = _props27.poster,
-          preload = _props27.preload,
-          autoPlay = _props27.autoPlay,
-          playsInline = _props27.playsInline,
-          muted = _props27.muted,
-          crossOrigin = _props27.crossOrigin,
-          videoId = _props27.videoId,
-          fileType = _props27.fileType;
-      var audioTracks = this.state.audioTracks;
+      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 _state2 = this.state,
+          isBuffering = _state2.isBuffering,
+          watermark = _state2.watermark;
 
 
       var children = this.getChildren(this.props);
@@ -1035,6 +1105,16 @@ var Video = function (_Component) {
             _this5.playerBlock = c;
           },
           style: this.getStyle() },
+        isBuffering && _react2.default.createElement(
+          'div',
+          {
+            className: 'loader-container',
+            onClick: function onClick() {
+              return _this5.togglePlay();
+            }
+          },
+          _react2.default.createElement(_components.Loader, { loaderName: 'SpinningLoader' })
+        ) || null,
         fileType === 'audio' ? _react2.default.createElement(
           _react2.default.Fragment,
           null,
@@ -1129,26 +1209,12 @@ var Video = function (_Component) {
           _react2.default.createElement('track', { kind: 'captions' }),
           this.renderChildren()
         ),
-        audioTracks && audioTracks.length ? _react2.default.createElement(
-          'div',
-          { className: 'audio-tracks' },
-          audioTracks.map(function (track) {
-            return _react2.default.createElement(
-              'p',
-              {
-                key: track.id,
-                onClick: function onClick() {
-                  _this5.changeAudio(track.id);
-                },
-                role: 'presentation'
-              },
-              track.name,
-              '-',
-              track.groupId
-            );
-          })
-        ) : null,
-        children
+        children,
+        _react2.default.createElement(
+          'p',
+          { className: 'user-name-wrapper', id: 'watermark-text', style: _extends({}, watermark) },
+          userEmail
+        )
       );
     }
   }, {

package/components/control-bar/ControlBar.js

@@ -58,10 +58,6 @@ var _VolumeMenuButton = require('./VolumeMenuButton');
 
 var _VolumeMenuButton2 = _interopRequireDefault(_VolumeMenuButton);
 
-var _EditorControlMenuButton = require('./EditorControlMenuButton');
-
-var _EditorControlMenuButton2 = _interopRequireDefault(_EditorControlMenuButton);
-
 var _utils = require('../../utils');
 
 var _colors = require('../../colors');
@@ -138,13 +134,14 @@ var ControlBar = function (_Component) {
         order: 5.1
       })), _react2.default.createElement(_TimeDivider2.default, _extends({}, this.props, { key: 'time-divider', order: 5.2 })), _react2.default.createElement(_DurationDisplay2.default, _extends({}, this.props, { key: 'duration-display', order: 5.3 })), _react2.default.createElement(_MarkingControl2.default, _extends({}, this.props, { key: 'marking-controls', order: 6 })),
       // <CommentsButton {...this.props} key="comments-button" order={6.01} />,
-      _react2.default.createElement(_EditorControlMenuButton2.default, _extends({
+      // <EditorControlMenuButton
+      //   style={{ margin: 'auto 10px auto auto' }}
+      //   {...this.props}
+      //   key="edit-menu-button"
+      //   order={6.1}
+      // />,
+      _react2.default.createElement(_VolumeMenuButton2.default, _extends({
         style: { margin: 'auto 10px auto auto' }
-      }, this.props, {
-        key: 'edit-menu-button',
-        order: 6.1
-      })), _react2.default.createElement(_VolumeMenuButton2.default, _extends({
-        style: playerType === 'snp_edit' || playerType === 'dubbing_review' ? { margin: '0 10px 0 0' } : { margin: 'auto 10px auto auto' }
       }, this.props, {
         key: 'volume-menu-button',
         order: 7
@@ -172,13 +169,14 @@ var ControlBar = function (_Component) {
       //   key="zoom-menu-button"
       //   order={7}
       // />, */}
-      _react2.default.createElement(_EditorControlMenuButton2.default, _extends({
+      // <EditorControlMenuButton
+      //   style={{ margin: 'auto 10px auto auto' }}
+      //   {...this.props}
+      //   key="edit-menu-button"
+      //   order={7}
+      // />,
+      _react2.default.createElement(_VolumeMenuButton2.default, _extends({
         style: { margin: 'auto 10px auto auto' }
-      }, this.props, {
-        key: 'edit-menu-button',
-        order: 7
-      })), _react2.default.createElement(_VolumeMenuButton2.default, _extends({
-        style: playerType === 'snp_edit' || playerType === 'dubbing_review' ? { margin: '0 10px 0 0' } : { margin: 'auto 10px auto auto' }
       }, this.props, {
         key: 'volume-menu-button',
         order: 8

package/components/marking-controls/MarkingControl.js

@@ -77,12 +77,13 @@ function MarkingControl(_ref) {
       markers = _ref.markers,
       controlType = _ref.controlType,
       playerType = _ref.playerType,
-      allowMarkerOverlap = _ref.allowMarkerOverlap;
+      allowMarkerOverlap = _ref.allowMarkerOverlap,
+      playerReadOnlyMode = _ref.playerReadOnlyMode;
 
   return _react2.default.createElement(
     _react2.default.Fragment,
     null,
-    playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? _react2.default.createElement(
+    playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode ? _react2.default.createElement(
       MarkingBlock,
       null,
       (!(player.leftMarker > -1) || !(player.rightMarker > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? _react2.default.createElement(
@@ -115,7 +116,7 @@ function MarkingControl(_ref) {
       player.leftMarker > -1 && player.rightMarker > -1 ? _react2.default.createElement(
         _react2.default.Fragment,
         null,
-        player.markerType === 'create' && controlType === 'advanced' && playerType !== 'dubbing_review' && playerType !== 'snp_edit' && player.markerCreate ? _react2.default.createElement(_MarkingAddButton2.default, {
+        player.markerType === 'create' && controlType === 'advanced' && player.markerCreate ? _react2.default.createElement(_MarkingAddButton2.default, {
           leftMarker: player.leftMarker,
           rightMarker: player.rightMarker,
           onAddMarker: onAddMarker,

package/package.json

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

package/utils/index.js

@@ -48,7 +48,7 @@ function secondsToTime() {
       _seconds += initialTime;
     }
     var date = new Date(null);
-    var currentFrame = Math.floor(_seconds * 25 % frameRate);
+    var currentFrame = Math.floor(_seconds * frameRate % frameRate);
     var paddedFrame = currentFrame < 10 ? '0' + currentFrame : currentFrame;
     date.setSeconds(_seconds);
     var timeString = date.toISOString().substr(11, 8);