@desynova-digital/player 3.11.0 → 3.11.2

package/components/PointersBar.js

@@ -239,12 +239,12 @@ var PointersBar = /*#__PURE__*/function (_Component) {
               self.setTooltipData(e, _this3.getTitle(marker));
             },
             onMouseOut: function onMouseOut() {
-              // const { tooltip } = this.state;
-              // tooltip.isVisible = false;
-              // tooltip.text = null;
-              // this.renderComp = 1;
-              // // tooltip.left = null;
-              // this.setState({ ...tooltip });
+              var tooltip = _this3.state.tooltip;
+              tooltip.isVisible = false;
+              tooltip.text = null;
+              _this3.renderComp = 1;
+              // tooltip.left = null;
+              _this3.setState(_objectSpread({}, tooltip));
             },
             role: "button",
             tabIndex: "-1",

package/components/control-bar/ControlBar.js

@@ -181,7 +181,7 @@ var ControlBar = /*#__PURE__*/function (_Component) {
       // {/* <CommentsButton {...this.props} key="comments-button" order={6.01} />, */}
       _react["default"].createElement(_ZoomMenuButton["default"], _extends({
         style: {
-          marginLeft: '0 10px'
+          margin: 'auto 10px auto auto'
         }
       }, this.props, {
         key: "zoom-menu-button",

package/components/progress-bar/ProgressControl.js

@@ -38,8 +38,8 @@ var propTypes = {
   playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
 };
 var defaultProps = {};
-var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  position: relative;\n  overflow: ", ";\n  padding-top: 0px;\n  background: #000000;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 250ms ease-in-out;\n  bottom: ", ";\n\n  .tags-block {\n    position: relative;\n    height: 20px;\n    width: 100px;\n    font-family: SFUIText-Medium;\n    font-size: 10px;\n    color: #ffffff;\n    text-transform: uppercase;\n    border-top: 1px solid #333333;\n    border-bottom: 1px solid #333333;\n    p {\n      line-height: 18px;\n      padding: 0 10px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .tags-block:first-child {\n    top: 40px;\n  }\n"])), function (props) {
-  return props.controlType === 'advanced' && !props.isFullscreen ? '80px' : '4px';
+var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  position: relative;\n  overflow: ", ";\n  padding-top: 0px;\n  background: #000000;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 250ms ease-in-out;\n  bottom: ", ";\n\n  .tags-block {\n    position: relative;\n    height: 20px;\n    width: 100px;\n    font-family: SFUIText-Medium;\n    font-size: 10px;\n    color: #ffffff;\n    text-transform: uppercase;\n    border-top: 1px solid #333333;\n    border-bottom: 1px solid #333333;\n    top: 40px;\n    p {\n      line-height: 18px;\n      padding: 0 10px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), function (props) {
+  return props.controlType === 'advanced' && !props.isFullscreen ? '' : '4px';
 }, function (props) {
   return props.controlType === 'advanced' && !props.isFullscreen ? 'none' : 'visible';
 }, _colors["default"].common.base.black, function (props) {

package/components/progress-bar/SeekBar.js

@@ -69,7 +69,12 @@ var SeekBar = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {}
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {}
+    value: function componentDidUpdate(prevProps) {
+      var _prevProps$player, _this$props$player;
+      if (((_prevProps$player = prevProps.player) === null || _prevProps$player === void 0 ? void 0 : _prevProps$player.currentTime) !== ((_this$props$player = this.props.player) === null || _this$props$player === void 0 ? void 0 : _this$props$player.currentTime)) {
+        this.scrollToSeekbarMiddle();
+      }
+    }
 
     /**
      * Get percentage of video played
@@ -81,10 +86,10 @@ var SeekBar = /*#__PURE__*/function (_Component) {
     key: "getPercent",
     value: function getPercent() {
       var _this$props = this.props,
-        _this$props$player = _this$props.player,
-        currentTime = _this$props$player.currentTime,
-        seekingTime = _this$props$player.seekingTime,
-        duration = _this$props$player.duration,
+        _this$props$player2 = _this$props.player,
+        currentTime = _this$props$player2.currentTime,
+        seekingTime = _this$props$player2.seekingTime,
+        duration = _this$props$player2.duration,
         zoom = _this$props.zoom;
       var time = seekingTime || currentTime;
       var percent = time / duration;
@@ -105,15 +110,20 @@ var SeekBar = /*#__PURE__*/function (_Component) {
   }, {
     key: "getNewTime",
     value: function getNewTime(event) {
-      var duration = this.props.player.duration;
-      // const distance = this.slider.calculateDistance(event);
-      // const newTime = distance * duration;
-
-      var seekBar = document.getElementById('timeline-block');
-      var clickPosition = event.clientX - seekBar.getBoundingClientRect().left;
-      var data = this.getScrollableWidth(seekBar);
-      var seekPercentage = clickPosition / data;
-      var newTime = duration * seekPercentage;
+      var _this$props2 = this.props,
+        duration = _this$props2.player.duration,
+        playerType = _this$props2.playerType;
+      var newTime;
+      if (playerType === 'default') {
+        var distance = this.slider.calculateDistance(event);
+        newTime = distance * duration;
+      } else {
+        var seekBar = document.getElementById('timeline-block');
+        var clickPosition = event.clientX - seekBar.getBoundingClientRect().left;
+        var data = this.getScrollableWidth(seekBar);
+        var seekPercentage = clickPosition / data;
+        newTime = duration * seekPercentage;
+      }
 
       // Don't let video end while scrubbing.
       return newTime === duration ? newTime - 0.1 : newTime;
@@ -129,7 +139,7 @@ var SeekBar = /*#__PURE__*/function (_Component) {
         scrollWidth = scrollWidth - viewportWidth;
         document.getElementsByClassName('timeline-content')[0].scrollTo({
           left: scrollWidth,
-          behavior: 'smooth'
+          behavior: 'instant'
         });
       }
     }
@@ -181,17 +191,17 @@ var SeekBar = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props2 = this.props,
-        _this$props2$player = _this$props2.player,
-        currentTime = _this$props2$player.currentTime,
-        seekingTime = _this$props2$player.seekingTime,
-        duration = _this$props2$player.duration,
-        isFullscreen = _this$props2$player.isFullscreen,
-        controlType = _this$props2.controlType,
-        playerType = _this$props2.playerType,
-        tagsMarker = _this$props2.tagsMarker,
-        assetType = _this$props2.assetType,
-        zoom = _this$props2.zoom;
+      var _this$props3 = this.props,
+        _this$props3$player = _this$props3.player,
+        currentTime = _this$props3$player.currentTime,
+        seekingTime = _this$props3$player.seekingTime,
+        duration = _this$props3$player.duration,
+        isFullscreen = _this$props3$player.isFullscreen,
+        controlType = _this$props3.controlType,
+        playerType = _this$props3.playerType,
+        tagsMarker = _this$props3.tagsMarker,
+        assetType = _this$props3.assetType,
+        zoom = _this$props3.zoom;
       var time = seekingTime || currentTime;
       console.log('ages', (this.getPercent() * 100).toFixed(2));
       return /*#__PURE__*/_react["default"].createElement("span", {

package/package.json

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