@desynova-digital/player 4.0.97 → 4.0.99

package/actions/player.js

@@ -301,11 +301,12 @@ function toggleFullscreen(player) {
 // }
 
 function toggleRightBar(player, showRightMenu) {
+  var _right$offsetWidth;
   var root = document.querySelector('.player-container');
   var right = document.querySelector('.right-video-section');
-  var sidebarWidth = right.offsetWidth; // actual width of sidebar
+  var sidebarWidth = (_right$offsetWidth = right === null || right === void 0 ? void 0 : right.offsetWidth) !== null && _right$offsetWidth !== void 0 ? _right$offsetWidth : 0; // actual width of sidebar
   // Already fullscreen → toggle UI only (NO EXIT)
-  if (_fullscreen["default"].isFullscreen) {
+  if (_fullscreen["default"].isFullscreen && right) {
     right.style.transition = 'transform 0.4s ease, opacity 0.3s ease';
     if (showRightMenu) {
       root.classList.add('rightbar-visible');

package/components/Player.js

@@ -236,7 +236,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       var newHeight;
       var isFS = _fullscreen["default"].isFullscreen;
       _this.actions.handleFullscreenChange(isFS);
-      if (isFS) {
+      if (isFS && rightSectionRef) {
         rightSectionRef.style.position = 'relative';
         newHeight = totalHeight - headerHeight;
         rightSectionRef.style.top = "".concat(headerHeight, "px");
@@ -850,7 +850,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.classList.add('ratio-border');
       }
       // Fullscreen mode with right section consideration
-      else if (player.isFullscreen) {
+      else if (player.isFullscreen && rightSectionRef) {
         // Calculate available width considering right section
         var availableWidth = totalWidth;
         if (isRightMenuVisible) {
@@ -871,6 +871,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video.style.margin = '0 auto';
         video.classList.add('ratio-border');
       } else if (window.innerHeight < 1024 && (playerContainer.offsetHeight > window.innerHeight || window.innerHeight > playerContainer.offsetHeight)) {
+        var _this$props6;
         var playlistMinHeight = 150;
         if (controlType === 'default') {
           if (fileType === 'image') {
@@ -888,7 +889,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         }
         video.style.paddingTop = '0';
         video.style.width = videoWidth + 'px';
-        video.style.height = videoHeight + 'px';
+        if (!((_this$props6 = this.props) !== null && _this$props6 !== void 0 && _this$props6.noRightComponent)) {
+          video.style.height = videoHeight + 'px';
+        }
+        ;
         video.style.margin = '0 auto';
         video.classList.add('ratio-border');
       } else if (window.innerHeight >= 900) {
@@ -956,12 +960,12 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         video: this.video ? this.video.video : null
       });
       var childrensLeft = this.getChildren(props, 'left');
-      var _this$props6 = this.props,
-        rightSection = _this$props6.rightSection,
-        playerType = _this$props6.playerType,
-        isFullscreen = _this$props6.isFullscreen,
-        tabMetadata = _this$props6.tabMetadata,
-        isRightMenuVisible = _this$props6.isRightMenuVisible;
+      var _this$props7 = this.props,
+        rightSection = _this$props7.rightSection,
+        playerType = _this$props7.playerType,
+        isFullscreen = _this$props7.isFullscreen,
+        tabMetadata = _this$props7.tabMetadata,
+        isRightMenuVisible = _this$props7.isRightMenuVisible;
       return /*#__PURE__*/_react["default"].createElement(PlayerBlock, {
         ref: function ref(c) {
           _this5.manager.rootElement = c;

package/components/PlayerHeader.js

@@ -225,7 +225,8 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
         openSharePopup = _this$props6.openSharePopup,
         isShareAvailable = _this$props6.isShareAvailable,
         isUserGuest = _this$props6.isUserGuest,
-        isRightMenuVisible = _this$props6.isRightMenuVisible;
+        isRightMenuVisible = _this$props6.isRightMenuVisible,
+        noRightComponent = _this$props6.noRightComponent;
       var _this$state = this.state,
         versionIndex = _this$state.versionIndex,
         updatedVersionsList = _this$state.updatedVersionsList;
@@ -367,7 +368,7 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
         style: {
           pointerEvents: 'none'
         }
-      }, this.props)) : null, isFullscreen ? /*#__PURE__*/_react["default"].createElement(IconButton, {
+      }, this.props)) : null, isFullscreen && !noRightComponent ? /*#__PURE__*/_react["default"].createElement(IconButton, {
         isRightMenuVisible: isRightMenuVisible,
         display: "rounded",
         appearance: "cta",

package/components/SDOutline.js

@@ -1,23 +1,32 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = SDOutline;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = require("prop-types");
 var _colors = _interopRequireDefault(require("../colors"));
 var _templateObject, _templateObject2;
 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; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 var propTypes = {
   player: _propTypes.PropTypes.instanceOf(Object),
   actions: _propTypes.PropTypes.instanceOf(Object)
 };
-var SDPlayerBorder = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: 0.3;\n  border: solid 1px ", ";\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  position: absolute;\n  // padding-left: 75%;\n  // height: 100%;\n  height: ", ";\n  padding-left: ", "\n"])), _colors["default"].common.base.white, function (props) {
-  if (props.isFullscreen && props.isRightMenuVisible) {
-    return props.heightRatio ? "calc(75% * ".concat(props.heightRatio, ")") : '75%';
+var SDPlayerBorder = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: 0.3;\n  border: solid 1px ", ";\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  position: absolute;\n  height: ", ";\n  padding-left: ", ";\n"])), _colors["default"].common.base.white, function (props) {
+  if (props.isFullscreen && props.isRightMenuVisible && props.calculatedHeight) {
+    return "".concat(props.calculatedHeight, "px");
   } else {
     return props.heightRatio ? "calc(100% * ".concat(props.heightRatio, ")") : '100%';
   }
@@ -34,7 +43,106 @@ function SDOutline(_ref) {
     text = _ref.text,
     keyData = _ref.keyData,
     isRightMenuVisible = _ref.isRightMenuVisible;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    calculatedHeight = _useState2[0],
+    setCalculatedHeight = _useState2[1];
+  var containerRef = (0, _react.useRef)(null);
+  var calculateHeightBasedOnResolution = function calculateHeightBasedOnResolution() {
+    if (!player.isFullscreen || !isRightMenuVisible) {
+      setCalculatedHeight(null);
+      return;
+    }
+    try {
+      // Get video element
+      var videoElement = document.querySelector('video');
+      if (!videoElement) return;
+
+      // Get video width and height
+      var videoWidth = videoElement.videoWidth;
+      var videoHeight = videoElement.videoHeight;
+      if (!videoWidth || !videoHeight) return;
+
+      // Calculate aspect ratio
+      var aspectRatio = videoWidth / videoHeight;
+
+      // Get container width
+      var leftVideoSection = document.querySelector('.left-video-section');
+      if (!leftVideoSection) return;
+      var containerWidth = leftVideoSection.getBoundingClientRect().width;
+      var newHeight;
+      var is169Ratio = aspectRatio > 1.5;
+      var is43Ratio = aspectRatio < 1.5;
+      if (is43Ratio) {
+        // For 4:3 aspect ratio: height = width * 0.75 (3/4)
+        newHeight = containerWidth * (3 / 4);
+      } else {
+        // For 16:9 aspect ratio: height = width * 0.5625 (9/16)
+        newHeight = containerWidth * (9 / 16);
+      }
+
+      // Apply heightRatio if provided
+      var finalHeight = newHeight;
+      if (heightRatio !== undefined) {
+        // heightRatio of 0.8 means 80%, 0.9 means 90%, etc.
+        finalHeight = newHeight * heightRatio;
+      }
+
+      // Set height in pixels
+      setCalculatedHeight(finalHeight);
+    } catch (error) {
+      console.error('Error calculating height:', error);
+      setCalculatedHeight(null);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    calculateHeightBasedOnResolution();
+    // Optional: Recalculate on window resize
+    var handleResize = function handleResize() {
+      calculateHeightBasedOnResolution();
+    };
+    window.addEventListener('resize', handleResize);
+    // Use ResizeObserver for container resize
+    var leftVideoSection = document.querySelector('.left-video-section');
+    var resizeObserver;
+    if (leftVideoSection) {
+      resizeObserver = new ResizeObserver(function () {
+        // Debounce to prevent excessive calculations
+        clearTimeout(resizeObserver.timeout);
+        resizeObserver.timeout = setTimeout(calculateHeightBasedOnResolution, 100);
+      });
+      resizeObserver.observe(leftVideoSection);
+    }
+    return function () {
+      window.removeEventListener('resize', handleResize);
+      if (resizeObserver && leftVideoSection) {
+        resizeObserver.unobserve(leftVideoSection);
+        clearTimeout(resizeObserver.timeout);
+      }
+    };
+  }, [player.isFullscreen, isRightMenuVisible, heightRatio]);
+
+  // Recalculate when video metadata is loaded
+  (0, _react.useEffect)(function () {
+    var videoElement = document.querySelector('video');
+    if (videoElement) {
+      videoElement.addEventListener('loadedmetadata', calculateHeightBasedOnResolution);
+    }
+    return function () {
+      if (videoElement) {
+        videoElement.removeEventListener('loadedmetadata', calculateHeightBasedOnResolution);
+      }
+    };
+  }, []);
+
+  // Also recalculate when heightRatio changes
+  (0, _react.useEffect)(function () {
+    if (player.isFullscreen && isRightMenuVisible) {
+      calculateHeightBasedOnResolution();
+    }
+  }, [heightRatio]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SDPlayerBorder, {
+    ref: containerRef,
     style: !player[keyData] ? {
       display: 'none'
     } : {
@@ -45,6 +153,7 @@ function SDOutline(_ref) {
     paddingLeftRatio: paddingLeftRatio,
     isFullscreen: player.isFullscreen,
     isRightMenuVisible: isRightMenuVisible,
+    calculatedHeight: calculatedHeight,
     onClick: function onClick() {
       if (player.paused) {
         actions.play();

package/components/control-bar/ControlBar.js

@@ -27,7 +27,8 @@ var _SubtitleMovementMenu = _interopRequireDefault(require("./SubtitleMovementMe
 var _ZoomMenuButton = _interopRequireDefault(require("./ZoomMenuButton"));
 var _colors = _interopRequireDefault(require("../../colors"));
 var _TimecodeFormatSelector = _interopRequireDefault(require("../marking-controls/TimecodeFormatSelector"));
-var _templateObject, _templateObject2; // import CommentsButton from './CommentsButton';
+var _components = require("@desynova-digital/components");
+var _templateObject, _templateObject2, _templateObject3; // import CommentsButton from './CommentsButton';
 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; }
@@ -65,6 +66,7 @@ var PlayerControlBlock = _styledComponents["default"].div(_templateObject || (_t
   return props.player === 'panel' ? '0px' : 'initial';
 }, _colors["default"].common.base.black);
 var VideoControlBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"])));
+var DownloadButton = (0, _styledComponents["default"])(_components.Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
 var defaultProps = {
   autoHide: false,
   className: ''
@@ -82,8 +84,12 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
   return _createClass(ControlBar, [{
     key: "getDefaultChildren",
     value: function getDefaultChildren() {
-      var playerType = this.props.playerType;
-      return [/*#__PURE__*/_react["default"].createElement(_PlayToggle["default"], _extends({}, this.props, {
+      var _this$props2;
+      var _this$props = this.props,
+        playerType = _this$props.playerType,
+        theme = _this$props.theme,
+        handleShareDownload = _this$props.handleShareDownload;
+      var arr = [/*#__PURE__*/_react["default"].createElement(_PlayToggle["default"], _extends({}, this.props, {
         key: "play-toggle",
         order: 2
       })), /*#__PURE__*/_react["default"].createElement(_ReplayControl["default"], _extends({}, this.props, {
@@ -130,7 +136,7 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
         }
       }, this.props, {
         key: "volume-menu-button",
-        order: 7
+        order: 8
       })),
       /*#__PURE__*/
       //Added to show camera button on fullscreen too
@@ -145,12 +151,12 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
       //   order={7}
       // />,
       _react["default"].createElement(_CaptionControlMenuButton["default"], _extends({}, this.props, {
-        order: 7,
+        order: 8,
         playerType: playerType,
         key: "caption-control-menu-button"
       })), /*#__PURE__*/_react["default"].createElement(_AudioTracksMenuButton["default"], _extends({}, this.props, {
         key: "audio-tracks-menu-button",
-        order: 7
+        order: 8
       })), /*#__PURE__*/_react["default"].createElement(_SettingsMenuButton["default"], _extends({}, this.props, {
         key: "settings-menu-button",
         order: 9
@@ -161,6 +167,25 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
           marginRight: '10px'
         }
       }))];
+      if (this.props.noRightComponent && (_this$props2 = this.props) !== null && _this$props2 !== void 0 && (_this$props2 = _this$props2.videoData) !== null && _this$props2 !== void 0 && (_this$props2 = _this$props2.asset_actions) !== null && _this$props2 !== void 0 && _this$props2.includes('download_shared_asset')) {
+        arr.push(/*#__PURE__*/_react["default"].createElement(DownloadButton, {
+          theme: theme,
+          display: "rounded",
+          appearance: "cta",
+          icon: "download",
+          iconWidth: 18,
+          iconHeight: 18,
+          width: 20,
+          height: 20,
+          order: 9,
+          onClick: handleShareDownload,
+          key: "download-button",
+          style: {
+            marginLeft: '10px'
+          }
+        }));
+      }
+      return arr;
     }
   }, {
     key: "getAdvancedChildren",
@@ -268,11 +293,11 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "getChildren",
     value: function getChildren() {
-      var _this$props = this.props,
-        controlType = _this$props.controlType,
-        children = _this$props.children,
-        fileType = _this$props.fileType,
-        player = _this$props.player;
+      var _this$props3 = this.props,
+        controlType = _this$props3.controlType,
+        children = _this$props3.children,
+        fileType = _this$props3.fileType,
+        player = _this$props3.player;
       var childrens = _react["default"].Children.toArray(children);
       var defaultChildren = [];
       if (fileType === 'image') {
@@ -286,9 +311,9 @@ var ControlBar = exports["default"] = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var children = this.getChildren();
-      var _this$props2 = this.props,
-        userActivity = _this$props2.player.userActivity,
-        playerType = _this$props2.playerType;
+      var _this$props4 = this.props,
+        userActivity = _this$props4.player.userActivity,
+        playerType = _this$props4.playerType;
       return /*#__PURE__*/_react["default"].createElement(PlayerControlBlock, {
         active: userActivity,
         player: playerType

package/components/progress-bar/RenderCommentMarkers.js

@@ -27,7 +27,7 @@ var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templ
    Marker Dot
 ---------------------------------------------------------- */
 var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -6px;\n  transform: translateX(-50%);\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #0c141d;\n  z-index: ", ";\n  pointer-events: auto;\n\n  font-family: SFUIText-Medium;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    top: -6px;\n    left: -6px;\n  }\n\n  /* --- NEW top vertical line --- */\n  &::after {\n    content: '';\n    position: absolute;\n    top: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 1.5px;\n    height: 5px;\n    background: #bfbfbf;\n    opacity: ", ";\n    transition: opacity 0.15s ease-out;\n  }\n\n  ", "\n"])), function (p) {
-  return p.isHovered ? 99999 : 9000;
+  return p.isHovered ? 2 : 1;
 }, function (p) {
   return p.showLine ? 1 : 0;
 }, function (p) {
@@ -37,7 +37,7 @@ var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateO
 /* ----------------------------------------------------------
    END MARKER DOT
 ---------------------------------------------------------- */
-var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -6px;\n  transform: translateX(-50%);\n  width: 24px; /* bigger like your screenshot */\n  height: 24px;\n  border-radius: 50%;\n  background: #47d2c7; /* teal outer circle */\n  border: 2px solid #00b9b0; /* ring / boundary */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9000;\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n\n  &::after {\n    content: '';\n    width: 6px; /* inner white dot */\n    height: 6px;\n    background: #ffffff;\n    border-radius: 50%;\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 1.5px;\n    height: 5px;\n    background: #bfbfbf;\n    opacity: 1;\n\n    transition: opacity 0.15s ease-out;\n  }\n"])));
+var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -6px;\n  transform: translateX(-50%);\n  width: 24px; /* bigger like your screenshot */\n  height: 24px;\n  border-radius: 50%;\n  background: #47d2c7; /* teal outer circle */\n  border: 2px solid #00b9b0; /* ring / boundary */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n\n  &::after {\n    content: '';\n    width: 6px; /* inner white dot */\n    height: 6px;\n    background: #ffffff;\n    border-radius: 50%;\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 1.5px;\n    height: 5px;\n    background: #bfbfbf;\n    opacity: 1;\n\n    transition: opacity 0.15s ease-out;\n  }\n"])));
 
 /* ----------------------------------------------------------
    SEGMENT LINE
@@ -49,7 +49,7 @@ var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_template
 ---------------------------------------------------------- */
 
 var HoverScroll = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  max-height: 360px; /* 400 total - header height */\n\n  /* Hide scrollbar everywhere */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var HoverBox = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  right: auto !important;\n  width: max-content;\n\n  background: #303f51;\n  border: 2px solid rgba(255, 255, 255, 0.15);\n  backdrop-filter: blur(12px);\n  border-radius: 12px;\n  padding: 0;\n  color: white;\n  z-index: 999999;\n  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n  animation: fadeInBox 0.18s ease-out;\n\n  display: flex;\n  flex-direction: column;\n\n  min-width: 180px;\n  max-width: 220px;\n  max-height: 400px;\n  overflow: hidden; /* prevent scroll at root */\n"])));
+var HoverBox = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  right: auto !important;\n  width: max-content;\n\n  background: #303f51;\n  border: 2px solid rgba(255, 255, 255, 0.15);\n  backdrop-filter: blur(12px);\n  border-radius: 12px;\n  padding: 0;\n  color: white;\n  z-index: 2;\n  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n  animation: fadeInBox 0.18s ease-out;\n\n  display: flex;\n  flex-direction: column;\n\n  min-width: 180px;\n  max-width: 220px;\n  max-height: 400px;\n  overflow: hidden; /* prevent scroll at root */\n"])));
 var HoverHeader = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background: #3e6673;\n  color: #00cec6;\n  font-size: 12px;\n  font-weight: 700;\n  padding: 10px 12px;\n  border-top-left-radius: 12px;\n  border-top-right-radius: 12px;\n  font-family: SFUIText-Regular;\n\n  position: sticky;\n  top: 0;\n  z-index: 2; /* must be above scroll content */\n\n  width: 100%;\n  box-sizing: border-box;\n"])));
 var HoverComment = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 12px 14px;\n  background: transparent;\n  transition: background 0.15s ease, transform 0.15s ease;\n  border-radius: 6px;\n  position: relative;\n\n  /* FIX */\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n\n  &:hover {\n    background: rgba(255, 255, 255, 0.07);\n  }\n\n  &:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 1.3px;\n    background: rgba(255, 255, 255, 0.12);\n  }\n"])));
 var HoverName = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: #afb2ba;\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 6px;\n  text-transform: capitalize;\n"])));

package/components/progress-bar/SeekBar.js

@@ -213,7 +213,6 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleMouseDown",
     value: function handleMouseDown() {
-      console.log('handleMouse handleMouseDown');
       this.setState({
         sliderActive: true
       });
@@ -221,7 +220,6 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleMouseUp",
     value: function handleMouseUp(event) {
-      console.log('handleMouse handleMouseUp');
       var actions = this.props.actions;
       var newTime = this.getNewTime(event);
       // Set new time (tell video to seek to new time)

package/package.json

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