@desynova-digital/player 3.10.1 → 3.11.0

package/components/MarkerBar.js

@@ -90,13 +90,21 @@ var MarkerBar = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         player = _this$props.player,
         controlType = _this$props.controlType,
-        playerSelectedMarker = _this$props.playerSelectedMarker;
-      var leftMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) * 100).toFixed(2), "%");
-      var rightMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) * 100).toFixed(2), "%");
+        playerSelectedMarker = _this$props.playerSelectedMarker,
+        zoom = _this$props.zoom;
+      var leftMarkerPosition = 0;
+      var rightMarkerPosition = 0;
+      if (zoom > 0) {
+        leftMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.leftMarker) * 100 * zoom * 20).toFixed(2), "%");
+        rightMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.rightMarker) * 100 * zoom * 20).toFixed(2), "%");
+      } else {
+        leftMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.leftMarker) * 100).toFixed(2), "%");
+        rightMarkerPosition = "".concat((this.getMarkerPosition(playerSelectedMarker.rightMarker) * 100).toFixed(2), "%");
+      }
       return /*#__PURE__*/_react["default"].createElement(MarkerBlock, {
         controlType: controlType,
         isFullscreen: player.isFullscreen
-      }, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, playerSelectedMarker.leftMarker > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "marker marker-left",
         style: {
           left: leftMarkerPosition
@@ -106,7 +114,7 @@ var MarkerBar = /*#__PURE__*/function (_Component) {
         width: 8,
         height: 7,
         color: "#00cec6"
-      })) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
+      })) : null, playerSelectedMarker.rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "marker marker-right",
         style: {
           left: rightMarkerPosition

package/components/PointersBar.js

@@ -10,6 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = require("prop-types");
 var _components = require("@desynova-digital/components");
 var _lodash = _interopRequireDefault(require("lodash"));
+var _reactDom = require("react-dom");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /* eslint-disable jsx-a11y/mouse-events-have-key-events */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -42,13 +43,14 @@ var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   actions: _propTypes.PropTypes.instanceOf(Object),
   markers: _propTypes.PropTypes.instanceOf(Array),
-  onTagClick: _propTypes.PropTypes.func,
-  playerType: _propTypes.PropTypes.string
+  onTagClick: _propTypes.PropTypes.func
 };
 var defaultProps = {
   player: {}
 };
-var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: ", ";\n"])), function (props) {
+  return props.width || '100%';
+});
 var PointerBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 20px;\n  position: relative;\n  border-top: 1px solid #333333;\n  border-bottom: 1px solid #333333;\n  .empty-pointers-msg {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    p {\n      font-family: SFUIText-Medium;\n      font-size: 11px;\n      color: #aaaaaa;\n    }\n    ", " {\n      margin: 0 5px;\n    }\n  }\n"])), _components.Icon.Element);
 var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100px;\n  max-width: 100px;\n  position: relative;\n  height: 100%;\n  .tags-block {\n    height: 20px;\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"])));
 var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 2;\n  height: 18px;\n  transition: left 0.1s ease-in-out;\n\n  .tooltip-container {\n    border-radius: 0.25rem;\n    padding: 5px;\n    width: fit-content;\n    background: #ffffff;\n    color: #666666;\n\n    h4 {\n      white-space: nowrap;\n      font-size: 12px;\n    }\n\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid white;\n      ", "\n      left: ", ";\n      transform: translateX(-50%);\n    }\n  }\n"])), function (props) {
@@ -72,12 +74,15 @@ var PointersBar = /*#__PURE__*/function (_Component) {
     };
     _this._tooltipRef = /*#__PURE__*/_react["default"].createRef();
     _this.renderComp = 0;
+    _this.zoom = 0;
     return _this;
   }
   _createClass(PointersBar, [{
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
-      if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
+      if (nextProps.zoom !== this.props.zoom) {
+        return true;
+      } else if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
         return false;
       }
       this.renderComp = 0;
@@ -106,10 +111,17 @@ var PointersBar = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPointerStyle",
     value: function getPointerStyle(leftMarker, rightMarker, index) {
-      var player = this.props.player;
+      var _this$props2 = this.props,
+        player = _this$props2.player,
+        zoom = _this$props2.zoom;
       var left = leftMarker / player.duration * 100;
       var right = rightMarker / player.duration * 100;
-      var width = right - left;
+      var width = 0;
+      if (zoom > 0) {
+        width = right - left * zoom * 20;
+      } else {
+        width = right - left;
+      }
       var style = {
         left: "".concat(left, "%"),
         position: 'absolute',
@@ -131,9 +143,10 @@ var PointersBar = /*#__PURE__*/function (_Component) {
       var tooltipPointer = 0;
       tooltip.isVisible = false;
       tooltip.text = title;
-      tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
-      tooltip.bottom = title.line1 && title.line2 ? tooltip.bottom + 22 : tooltip.bottom + 10;
-      tooltipPointer = tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
+      // tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
+      // tooltip.bottom = title.line1 && title.line2 ? tooltip.bottom + 22 : tooltip.bottom + 10;
+      tooltip.bottom = title.line1 && title.line2 ? 42 : 30;
+      tooltipPointer = tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2 - 100;
       this.renderComp = 1;
       this.setState(_objectSpread({}, tooltip), function () {
         var tooltip = _this2.state.tooltip;
@@ -171,27 +184,48 @@ var PointersBar = /*#__PURE__*/function (_Component) {
       }
       return data;
     }
+  }, {
+    key: "generateZoomWithOfPointersBar",
+    value: function generateZoomWithOfPointersBar(zoom) {
+      var pointerBlock = (0, _reactDom.findDOMNode)(this.pointerBlock);
+      var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
+      var width = 0;
+      if (zoom > 0) {
+        width = (document.getElementById('seekbar-control-block').clientWidth * zoom * 20).toFixed(0) + 'px';
+      } else {
+        width = document.getElementById('seekbar-control-block').clientWidth.toFixed(0) + 'px';
+      }
+      console.log('POINTERBARWID', width);
+      this.setState({
+        zoom: zoom,
+        width: width
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       var _this3 = this;
-      var markers = this.props.markers;
+      var _this$props3 = this.props,
+        markers = _this$props3.markers,
+        zoom = _this$props3.zoom;
       var _this$state = this.state,
         _this$state$tooltip = _this$state.tooltip,
         isVisible = _this$state$tooltip.isVisible,
         text = _this$state$tooltip.text,
         left = _this$state$tooltip.left,
         bottom = _this$state$tooltip.bottom,
-        tooltipPointer = _this$state.tooltipPointer;
+        tooltipPointer = _this$state.tooltipPointer,
+        width = _this$state.width;
       var self = this;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, markers && markers.length ? markers.map(function (marker_obj) {
         return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
+          id: "pointers-block",
+          ref: function ref(c) {
+            _this3.pointerBlock = c;
+          },
+          width: width,
           key: marker_obj.name
-        }, /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, {
-          key: "".concat(marker_obj.name, "-tags-block")
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "tags-block"
-        }, /*#__PURE__*/_react["default"].createElement("p", null, marker_obj.name))), /*#__PURE__*/_react["default"].createElement(PointerBlock, {
+        }, /*#__PURE__*/_react["default"].createElement(PointerBlock, {
           key: "".concat(marker_obj.name, "-key-tags-block")
         }, marker_obj && marker_obj.values && marker_obj.values.length ? marker_obj.values.map(function (marker, index) {
           var style = self.getPointerStyle(marker.start_time, marker.end_time, index);
@@ -205,12 +239,12 @@ var PointersBar = /*#__PURE__*/function (_Component) {
               self.setTooltipData(e, _this3.getTitle(marker));
             },
             onMouseOut: function onMouseOut() {
-              var tooltip = _this3.state.tooltip;
-              tooltip.isVisible = false;
-              tooltip.text = null;
-              _this3.renderComp = 1;
-              // tooltip.left = null;
-              _this3.setState(_objectSpread({}, tooltip));
+              // const { tooltip } = this.state;
+              // tooltip.isVisible = false;
+              // tooltip.text = null;
+              // this.renderComp = 1;
+              // // tooltip.left = null;
+              // this.setState({ ...tooltip });
             },
             role: "button",
             tabIndex: "-1",
@@ -231,9 +265,7 @@ var PointersBar = /*#__PURE__*/function (_Component) {
           stroke: "#fff",
           width: 7,
           height: 11
-        }), /*#__PURE__*/_react["default"].createElement("p", null, "to create ", marker_obj.name, " in the selected range. "))), /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "tags-block"
-        }, /*#__PURE__*/_react["default"].createElement("p", null))));
+        }), /*#__PURE__*/_react["default"].createElement("p", null, "to create ", marker_obj.name, " in the selected range. "))));
       }) : null, text && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
         multiline: !!text.line1 && text.line1.length && text.line2,
         ref: this._tooltipRef,

package/components/Video.js

@@ -273,7 +273,7 @@ var Video = /*#__PURE__*/function (_Component) {
               _this2.hls.destroy();
               break;
           }
-        } else if (data.details === 'internalException' && data.type === 'otherError') {
+        } else if (data.details === 'internalException' && data.type === 'otherError' || data.details === 'bufferStalledError' && data.type === 'mediaError') {
           _this2.hls.startLoad();
         }
       });

package/components/control-bar/ControlBar.js

@@ -24,6 +24,7 @@ var _MarkingControl = _interopRequireDefault(require("../marking-controls/Markin
 var _SubtitleLanguagesMenuButton = _interopRequireDefault(require("./SubtitleLanguagesMenuButton"));
 var _CameraButton = _interopRequireDefault(require("./CameraButton"));
 var _SubtitleMovementMenu = _interopRequireDefault(require("./SubtitleMovementMenu"));
+var _ZoomMenuButton = _interopRequireDefault(require("./ZoomMenuButton"));
 var _templateObject, _templateObject2; // import CommentsButton from './CommentsButton';
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -178,12 +179,15 @@ var ControlBar = /*#__PURE__*/function (_Component) {
       })),
       /*#__PURE__*/
       // {/* <CommentsButton {...this.props} key="comments-button" order={6.01} />, */}
-      // {/* <ZoomMenuButton
-      //   style={{ marginLeft: '0 10px' }}
-      //   {...this.props}
-      //   key="zoom-menu-button"
-      //   order={7}
-      // />, */}
+      _react["default"].createElement(_ZoomMenuButton["default"], _extends({
+        style: {
+          marginLeft: '0 10px'
+        }
+      }, this.props, {
+        key: "zoom-menu-button",
+        order: 7
+      })),
+      /*#__PURE__*/
       // <EditorControlMenuButton
       //   style={{ margin: 'auto 10px auto auto' }}
       //   {...this.props}

package/components/progress-bar/ProgressControl.js

@@ -13,6 +13,7 @@ var Dom = _interopRequireWildcard(require("../../utils/dom"));
 var _SeekBar = _interopRequireDefault(require("./SeekBar"));
 var _PointersBar = _interopRequireDefault(require("../PointersBar"));
 var _colors = _interopRequireDefault(require("../../colors"));
+var _player = _interopRequireDefault(require("../../reducers/player"));
 var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,17 +38,17 @@ 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"])), function (props) {
+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';
 }, function (props) {
   return props.controlType === 'advanced' && !props.isFullscreen ? 'none' : 'visible';
 }, _colors["default"].common.base.black, function (props) {
   return props.player === 'panel' && props.active ? '50px' : 'initial';
 });
-var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  cursor: pointer;\n  z-index: ", ";\n"])), function (props) {
+var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  z-index: ", ";\n  .timeline-content {\n    overflow-x: auto;\n    white-space: nowrap;\n  }\n"])), function (props) {
   return props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1';
 });
-var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100px;\n  max-width: 100px;\n  position: relative;\n  height: 100%;\n  .empty-block {\n    height: calc(100% - 20px);\n  }\n  .tags-block {\n    height: 20px;\n    font-family: SFUIText-Medium;\n    font-size: 12px;\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-left: 10px;\n    }\n  }\n"])));
+var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100px;\n  max-width: 100px;\n  position: relative;\n  height: 60px;\n  .empty-block {\n    height: calc(100% - 20px);\n  }\n  .tags-block {\n    height: 20px;\n    font-family: SFUIText-Medium;\n    font-size: 12px;\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-left: 10px;\n    }\n  }\n"])));
 var ProgressControl = /*#__PURE__*/function (_Component) {
   _inherits(ProgressControl, _Component);
   var _super = _createSuper(ProgressControl);
@@ -86,16 +87,12 @@ var ProgressControl = /*#__PURE__*/function (_Component) {
       var zoom = this.props.player.zoom;
       var progressBlock = (0, _reactDom.findDOMNode)(this.progressControlBlock);
       var seekBarBlock = (0, _reactDom.findDOMNode)(this.seekControlBar);
-      var progressBlockWidth = progressBlock.offsetWidth;
       var currentZoom = parseFloat(zoom.toFixed(1));
-      if (currentZoom > 0) {
-        seekBarBlock.style.width = "".concat(progressBlockWidth * (currentZoom * 20), "px");
-      } else {
-        seekBarBlock.style.width = '100%';
-      }
+
       // To be Rectified
       if (this.seekBar.timeline) {
-        this.seekBar.timeline.generateTimeline();
+        this.seekBar.timeline.generateTimeline(currentZoom);
+        this.pointersBar.generateZoomWithOfPointersBar(currentZoom);
         // this.seekBar.audioWaveform.getWaveform();
         this.setState({
           stateZoom: zoom
@@ -129,31 +126,55 @@ var ProgressControl = /*#__PURE__*/function (_Component) {
         _this$props2$player = _this$props2.player,
         userActivity = _this$props2$player.userActivity,
         isFullscreen = _this$props2$player.isFullscreen,
-        duration = _this$props2$player.duration;
-      var mouseTime = this.state.mouseTime;
+        duration = _this$props2$player.duration,
+        markers = _this$props2.markers;
+      var _this$state = this.state,
+        mouseTime = _this$state.mouseTime,
+        stateZoom = _this$state.stateZoom;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ProgressControlBlock, {
         controlType: controlType,
+        id: "progress-control-block",
         player: playerType,
         active: userActivity,
         isFullscreen: isFullscreen,
         ref: function ref(c) {
           _this2.progressControlBlock = c;
         }
-      }, controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, controlType === 'advanced' && !isFullscreen && duration ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }, markers && markers.length ? markers.map(function (marker_obj) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "tags-block"
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          className: "pointer-wrapper"
+        }, marker_obj.name));
+      }) : /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "empty-block"
-      })) : null, /*#__PURE__*/_react["default"].createElement(SeekControlBar, {
+      }))) : null, /*#__PURE__*/_react["default"].createElement(SeekControlBar, {
         ref: function ref(c) {
           _this2.seekControlBar = c;
         },
+        id: "seekbar-control-block",
         onMouseMove: this.handleMouseMoveThrottle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "timeline-content"
       }, /*#__PURE__*/_react["default"].createElement(_SeekBar["default"], _extends({
         mouseTime: mouseTime,
         ref: function ref(c) {
           _this2.seekBar = c;
-        }
-      }, this.props))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+        },
+        zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_PointersBar["default"], _extends({
+        ref: function ref(c) {
+          _this2.pointersBar = c;
+        },
+        zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
+      }, this.props)))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "empty-block"
-      })) : null), controlType === 'advanced' && !isFullscreen && duration ? /*#__PURE__*/_react["default"].createElement(_PointersBar["default"], this.props) : null);
+      })) : null));
     }
   }]);
   return ProgressControl;

package/components/progress-bar/SeekBar.js

@@ -80,24 +80,59 @@ var SeekBar = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPercent",
     value: function getPercent() {
-      var _this$props$player = this.props.player,
+      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;
+        duration = _this$props$player.duration,
+        zoom = _this$props.zoom;
       var time = seekingTime || currentTime;
       var percent = time / duration;
-      return percent >= 1 ? 1 : percent;
+      percent = percent >= 1 ? 1 : percent;
+      if (zoom > 0) {
+        percent = percent * zoom * 20;
+      }
+      return percent;
+    }
+  }, {
+    key: "getScrollableWidth",
+    value: function getScrollableWidth(element) {
+      var style = getComputedStyle(element);
+      var padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+      var scrollbarWidth = element.offsetWidth - element.clientWidth;
+      return element.scrollWidth - padding - scrollbarWidth;
     }
   }, {
     key: "getNewTime",
     value: function getNewTime(event) {
       var duration = this.props.player.duration;
-      var distance = this.slider.calculateDistance(event);
-      var newTime = distance * 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;
 
       // Don't let video end while scrubbing.
       return newTime === duration ? newTime - 0.1 : newTime;
     }
+  }, {
+    key: "scrollToSeekbarMiddle",
+    value: function scrollToSeekbarMiddle() {
+      var viewportWidth = document.getElementById('seekbar-control-block').clientWidth;
+      var percentScroll = (this.getPercent() * 100).toFixed(2) / 100;
+      var scrollWidth = viewportWidth * percentScroll;
+      if (scrollWidth < document.getElementsByClassName('timeline-content')[0].scrollLeft || scrollWidth > document.getElementsByClassName('timeline-content')[0].scrollLeft + viewportWidth) {
+        viewportWidth = viewportWidth / 2;
+        scrollWidth = scrollWidth - viewportWidth;
+        document.getElementsByClassName('timeline-content')[0].scrollTo({
+          left: scrollWidth,
+          behavior: 'smooth'
+        });
+      }
+    }
   }, {
     key: "handleMouseDown",
     value: function handleMouseDown() {
@@ -113,6 +148,7 @@ var SeekBar = /*#__PURE__*/function (_Component) {
       var actions = this.props.actions;
       var newTime = this.getNewTime(event);
       // Set new time (tell video to seek to new time)
+      console.log('ppp', event, newTime);
       actions.seek(newTime);
       actions.handleEndSeeking(newTime);
       this.setState({
@@ -145,18 +181,24 @@ var SeekBar = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        _this$props$player2 = _this$props.player,
-        currentTime = _this$props$player2.currentTime,
-        seekingTime = _this$props$player2.seekingTime,
-        duration = _this$props$player2.duration,
-        isFullscreen = _this$props$player2.isFullscreen,
-        controlType = _this$props.controlType,
-        playerType = _this$props.playerType,
-        tagsMarker = _this$props.tagsMarker,
-        assetType = _this$props.assetType;
+      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 time = seekingTime || currentTime;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], this.props), tagsMarker && tagsMarker.length ? /*#__PURE__*/_react["default"].createElement(_TagsBar["default"], this.props) : null, /*#__PURE__*/_react["default"].createElement("div", {
+      console.log('ages', (this.getPercent() * 100).toFixed(2));
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        id: "seekbarss"
+      }, /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], _extends({}, this.props, {
+        zoom: zoom
+      })), tagsMarker && tagsMarker.length ? /*#__PURE__*/_react["default"].createElement(_TagsBar["default"], this.props) : null, /*#__PURE__*/_react["default"].createElement("div", {
         onMouseDown: this.handleMouseDown,
         onMouseMove: this.handleMouseMove,
         onMouseUp: this.handleMouseUp
@@ -180,6 +222,9 @@ var SeekBar = /*#__PURE__*/function (_Component) {
         playerType: playerType,
         assetType: assetType
       }, this.props)))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AdvancedControlBlock, null, /*#__PURE__*/_react["default"].createElement(_Timeline["default"], _extends({}, this.props, {
+        scrollSeekBar: function scrollSeekBar() {
+          _this2.scrollToSeekbarMiddle();
+        },
         ref: function ref(c) {
           _this2.timeline = c;
         }

package/components/progress-bar/Timeline.js

@@ -33,7 +33,9 @@ var propTypes = {
   initialTime: _propTypes.PropTypes.number,
   frameRate: _propTypes.PropTypes.number
 };
-var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: stretch;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0;\n  .player-time {\n    width: 100%;\n    position: relative;\n    height: 46px;\n    user-select: none;\n    &:first-child {\n      p {\n        left: 0px;\n      }\n    }\n    &:last-child {\n      width: 10px;\n      ", " {\n        display: none;\n      }\n      p {\n        left: auto;\n        right: 0px;\n      }\n    }\n    ", " {\n      position: absolute;\n      left: 0;\n      bottom: 0;\n    }\n    p {\n      color: #aaa;\n      font-size: 10px;\n      font-family: SFUIText-Regular;\n      left: -28px;\n      top: 10px;\n      letter-spacing: 0.5px;\n      position: absolute;\n      user-select: none;\n    }\n  }\n"])), _components.Icon.Element, _components.Icon.Element);
+var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: stretch;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0;\n  width: ", ";\n  .player-time {\n    width: 100%;\n    :not(:last-child) {\n      min-width: 100px;\n    }\n    position: relative;\n    height: 46px;\n    user-select: none;\n    &:first-child {\n      p {\n        left: 0px;\n      }\n    }\n    &:last-child {\n      flex-grow: 1;\n      ", " {\n        display: none;\n      }\n      p {\n        left: auto;\n        right: 0px;\n      }\n    }\n    ", " {\n      position: absolute;\n      left: 0;\n      bottom: 0;\n    }\n    p {\n      color: #aaa;\n      font-size: 10px;\n      font-family: SFUIText-Regular;\n      left: -28px;\n      top: 10px;\n      letter-spacing: 0.5px;\n      position: absolute;\n      user-select: none;\n    }\n  }\n"])), function (props) {
+  return props.maxWidth ? props.maxWidth : '';
+}, _components.Icon.Element, _components.Icon.Element);
 var Timeline = /*#__PURE__*/function (_Component) {
   _inherits(Timeline, _Component);
   var _super = _createSuper(Timeline);
@@ -52,13 +54,27 @@ var Timeline = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       this.generateTimeline();
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+        scrollSeekBar = _this$props.scrollSeekBar,
+        zoom = _this$props.zoom;
+      if (prevProps.zoom !== zoom) scrollSeekBar && scrollSeekBar();
+    }
   }, {
     key: "generateTimeline",
-    value: function generateTimeline() {
+    value: function generateTimeline(zoomFactor) {
       var player = this.props.player;
       var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
       var perTimeWidth = 100;
-      var sliderWidth = timelineBlock.offsetWidth;
+      var sliderWidth = 0;
+      if (zoomFactor > 0) {
+        sliderWidth = (document.getElementById('seekbar-control-block').clientWidth * zoomFactor * 20).toFixed(0);
+      } else {
+        sliderWidth = document.getElementById('seekbar-control-block').clientWidth.toFixed(0);
+      }
+      console.log('sliderwidth generatetimeline', sliderWidth, zoomFactor); //1200
       var timeBlocks = parseInt(sliderWidth / perTimeWidth, 10);
       var timeDistance = parseInt(player.duration / timeBlocks, 10);
       var timeArray = [0];
@@ -73,18 +89,24 @@ var Timeline = /*#__PURE__*/function (_Component) {
         }
       }
       this.setState({
-        timeArray: timeArray
+        timeArray: timeArray,
+        zoom: zoomFactor,
+        maxWidth: sliderWidth + 'px'
       });
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        initialTime = _this$props.initialTime,
-        frameRate = _this$props.frameRate;
-      var timeArray = this.state.timeArray;
+      var _this$props2 = this.props,
+        initialTime = _this$props2.initialTime,
+        frameRate = _this$props2.frameRate;
+      var _this$state = this.state,
+        timeArray = _this$state.timeArray,
+        maxWidth = _this$state.maxWidth;
       return /*#__PURE__*/_react["default"].createElement(TimelineBlock, {
+        id: "timeline-block",
+        maxWidth: maxWidth,
         ref: function ref(c) {
           _this2.timelineBlock = c;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {
@@ -55,7 +55,7 @@
   "dependencies": {
     "@desynova-digital/components": "^8.19.3",
     "@desynova-digital/tokens": "^8.19.3",
-    "hls.js": "^1.4.3",
+    "hls.js": "0.11.0",
     "babel-core": "7.0.0-bridge.0",
     "latest-version": "^4.0.0",
     "prettycli": "^1.4.3",