@desynova-digital/player 4.0.104 → 4.0.106

package/components/Playlist.js

@@ -85,7 +85,7 @@ var Playlist = exports["default"] = /*#__PURE__*/function (_Component) {
           }
         }, /*#__PURE__*/_react["default"].createElement("p", {
           className: "asset-filename"
-        }, asset.filename || asset.asset_name));
+        }, asset.asset_name || asset.filename));
       })) : null);
     }
   }]);

package/components/progress-bar/ProgressControl.js

@@ -15,7 +15,7 @@ var _PointersBar = _interopRequireDefault(require("../PointersBar"));
 var _colors = _interopRequireDefault(require("../../colors"));
 var _player = _interopRequireDefault(require("../../reducers/player"));
 var _MarkerBar = _interopRequireDefault(require("../MarkerBar"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -71,12 +71,53 @@ var ScrollStyledDiv = _styledComponents["default"].div(_templateObject4 || (_tem
   return markers.length > 3 ? 'hidden' : 'visible';
 });
 var CoverDiv = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: black;\n  z-index: 2;\n  position: absolute;\n  height: 60px;\n  width: 89px;\n  left: 0px;\n  top: 20px;\n"])));
+var HoverPreviewBox = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: fixed;               \n  top: 0;\n  left: 0;\n  width: 220px;\n  height: 126px;\n  overflow: hidden;\n  display: none;\n  pointer-events: none;\n  z-index: 999999999;            \n  border: 2px solid #333333;\n  border-radius: 4px;\n"])));
+var HoverPreviewImage = _styledComponents["default"].img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 220px;\n  height: auto;\n"])));
 var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
   function ProgressControl(props, context) {
     var _props$player$zoom, _props$player;
     var _this;
     _classCallCheck(this, ProgressControl);
     _this = _callSuper(this, ProgressControl, [props, context]);
+    _defineProperty(_this, "handleHoverScrub", function (event) {
+      var _this$props;
+      var hoverBox = _this.hoverBoxRef.current;
+      var hoverImg = _this.hoverImageRef.current;
+      if (!hoverBox || !hoverImg) return;
+      var container = event.currentTarget;
+      var rect = container.getBoundingClientRect();
+      var scrollLeft = container.scrollLeft || 0;
+      var offsetX = event.clientX - rect.left + scrollLeft;
+      offsetX = Math.max(0, Math.min(offsetX, container.scrollWidth));
+      var previewBlockHeight = 126;
+      var iframeOgHeight = 120;
+      var ogHeight = hoverImg.naturalHeight || 1;
+      var offsetHeight = hoverImg.offsetHeight || 1;
+      var frameCount = Math.max(1, Math.floor(ogHeight / iframeOgHeight));
+      var frameHeight = offsetHeight / frameCount;
+      var offsetTop = Math.abs(previewBlockHeight - frameHeight) / 2;
+      var frameNum = Math.floor(offsetX / container.scrollWidth * frameCount);
+      frameNum = Math.max(0, Math.min(frameNum, frameCount - 1));
+      hoverImg.style.top = "-".concat(frameHeight * frameNum + offsetTop, "px");
+      var hoverWidth = hoverBox.offsetWidth || 220;
+      var boxLeft = event.clientX - hoverWidth / 2;
+      var padding = 10;
+      var minLeft = rect.left + padding;
+      var maxLeft = rect.right - hoverWidth - padding;
+      boxLeft = Math.max(minLeft, Math.min(boxLeft, maxLeft));
+      hoverBox.style.left = "".concat(boxLeft, "px");
+      hoverBox.style.top = ((_this$props = _this.props) === null || _this$props === void 0 ? void 0 : _this$props.controlType) == 'default' ? "".concat(rect.top - hoverBox.offsetHeight - 10, "px") : "".concat(rect.top - hoverBox.offsetHeight + 10, "px");
+    });
+    _defineProperty(_this, "showHoverPreview", function () {
+      if (_this.hoverBoxRef.current) {
+        _this.hoverBoxRef.current.style.display = 'block';
+      }
+    });
+    _defineProperty(_this, "hideHoverPreview", function () {
+      if (_this.hoverBoxRef.current) {
+        _this.hoverBoxRef.current.style.display = 'none';
+      }
+    });
     _defineProperty(_this, "handleChildScroll", function (scrollTop) {
       if (_this.parentScrollDivRef.current) {
         _this.parentScrollDivRef.current.scrollTop = scrollTop;
@@ -90,6 +131,8 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
       }
     };
     _this.parentScrollDivRef = /*#__PURE__*/(0, _react.createRef)();
+    _this.hoverBoxRef = /*#__PURE__*/(0, _react.createRef)();
+    _this.hoverImageRef = /*#__PURE__*/(0, _react.createRef)();
     _this.handleMouseMoveThrottle = _this.handleMouseMove.bind(_this);
     _this.handleSeekbarZoom = _this.handleSeekbarZoom.bind(_this);
     _this.ensureInitialSizing = _this.ensureInitialSizing.bind(_this);
@@ -106,13 +149,13 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this$props = this.props,
-        _this$props$player = _this$props.player,
-        zoom = _this$props$player.zoom,
-        readyState = _this$props$player.readyState,
-        isFullscreen = _this$props$player.isFullscreen,
-        duration = _this$props$player.duration,
-        controlType = _this$props.controlType;
+      var _this$props2 = this.props,
+        _this$props2$player = _this$props2.player,
+        zoom = _this$props2$player.zoom,
+        readyState = _this$props2$player.readyState,
+        isFullscreen = _this$props2$player.isFullscreen,
+        duration = _this$props2$player.duration,
+        controlType = _this$props2.controlType;
       var prevDuration = this.prevDuration;
       this.prevDuration = duration;
       var stateZoom = this.state.stateZoom;
@@ -132,9 +175,9 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "handleSeekbarZoom",
     value: function handleSeekbarZoom() {
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var _this$props$player2 = this.props.player,
-        zoom = _this$props$player2.zoom,
-        readyState = _this$props$player2.readyState;
+      var _this$props$player = this.props.player,
+        zoom = _this$props$player.zoom,
+        readyState = _this$props$player.readyState;
       if (!force && readyState !== 4) {
         return;
       }
@@ -156,9 +199,9 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "ensureInitialSizing",
     value: function ensureInitialSizing() {
       var _this2 = this;
-      var _this$props$player3 = this.props.player,
-        zoom = _this$props$player3.zoom,
-        duration = _this$props$player3.duration;
+      var _this$props$player2 = this.props.player,
+        zoom = _this$props$player2.zoom,
+        duration = _this$props$player2.duration;
       if (!duration) return;
       // First attempt on next paint
       requestAnimationFrame(function () {
@@ -177,9 +220,9 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
         _this$seekBar2,
         _this3 = this;
       var attempt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var _this$props$player4 = this.props.player,
-        zoom = _this$props$player4.zoom,
-        duration = _this$props$player4.duration;
+      var _this$props$player3 = this.props.player,
+        zoom = _this$props$player3.zoom,
+        duration = _this$props$player3.duration;
       if (!duration) return;
       var currentZoom = parseFloat((zoom || 0).toFixed(1));
       if ((_this$seekBar = this.seekBar) !== null && _this$seekBar !== void 0 && _this$seekBar.timeline) {
@@ -222,16 +265,16 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this4 = this;
-      var _this$props2 = this.props,
-        controlType = _this$props2.controlType,
-        playerType = _this$props2.playerType,
-        _this$props2$player = _this$props2.player,
-        userActivity = _this$props2$player.userActivity,
-        isFullscreen = _this$props2$player.isFullscreen,
-        duration = _this$props2$player.duration,
-        markers = _this$props2.markers,
-        theme = _this$props2.theme,
-        zoom = _this$props2.zoom;
+      var _this$props3 = this.props,
+        controlType = _this$props3.controlType,
+        playerType = _this$props3.playerType,
+        _this$props3$player = _this$props3.player,
+        userActivity = _this$props3$player.userActivity,
+        isFullscreen = _this$props3$player.isFullscreen,
+        duration = _this$props3$player.duration,
+        markers = _this$props3.markers,
+        theme = _this$props3.theme,
+        zoom = _this$props3.zoom;
       var _this$state = this.state,
         mouseTime = _this$state.mouseTime,
         stateZoom = _this$state.stateZoom;
@@ -268,7 +311,10 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
         onMouseMove: this.handleMouseMoveThrottle,
         isFullscreen: isFullscreen
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "timeline-content hide-scrollbar"
+        className: "timeline-content hide-scrollbar",
+        onMouseMove: this.handleHoverScrub,
+        onMouseEnter: this.showHoverPreview,
+        onMouseLeave: this.hideHoverPreview
       }, /*#__PURE__*/_react["default"].createElement(_SeekBar["default"], _extends({
         mouseTime: mouseTime,
         ref: function ref(c) {
@@ -284,7 +330,13 @@ var ProgressControl = exports["default"] = /*#__PURE__*/function (_Component) {
           _this4.pointersBar = c;
         },
         zoom: stateZoom && parseFloat(stateZoom.toFixed(1))
-      }, this.props))))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, this.props)))), this.props.iframeURL && /*#__PURE__*/_react["default"].createElement(HoverPreviewBox, {
+        ref: this.hoverBoxRef
+      }, /*#__PURE__*/_react["default"].createElement(HoverPreviewImage, {
+        ref: this.hoverImageRef,
+        src: this.props.iframeURL,
+        draggable: false
+      }))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "empty-block"
       })) : null));
     }

package/components/progress-bar/SeekBar.js

@@ -347,18 +347,12 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
         onMouseDown: this.handleMouseDown,
         onMouseMove: function onMouseMove(e) {
           _this4.handleMouseMove(e); // existing seeking
-          _this4.handleHoverScrub(e); // NEW preview scrub
+          // this.handleHoverScrub(e);     // NEW preview scrub
         },
         onMouseUp: this.handleMouseUp,
         onMouseEnter: this.showHoverPreview,
         onMouseLeave: this.hideHoverPreview
-      }, this.props.iframeURL && /*#__PURE__*/_react["default"].createElement(HoverPreviewBox, {
-        ref: this.hoverBoxRef
-      }, /*#__PURE__*/_react["default"].createElement(HoverPreviewImage, {
-        ref: this.hoverImageRef,
-        src: this.props.iframeURL,
-        draggable: false
-      })), /*#__PURE__*/_react["default"].createElement(SliderBlock, {
+      }, /*#__PURE__*/_react["default"].createElement(SliderBlock, {
         playerType: playerType,
         isFullscreen: isFullscreen
       }, /*#__PURE__*/_react["default"].createElement(_Slider["default"], _extends({}, this.props, {

package/package.json

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