@desynova-digital/player 4.0.81 → 4.0.83

package/components/progress-bar/SeekBar.js

@@ -14,7 +14,7 @@ var _utils = require("../../utils");
 var _Timeline = _interopRequireDefault(require("./Timeline"));
 var _MarkerBar = _interopRequireDefault(require("../MarkerBar"));
 var _TagsBar = _interopRequireDefault(require("../TagsBar"));
-var _templateObject, _templateObject2; // import AudioWaveform from './AudioWaveform';
+var _templateObject, _templateObject2, _templateObject3, _templateObject4; // import AudioWaveform from './AudioWaveform';
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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 && Object.prototype.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; }
@@ -22,8 +22,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -31,13 +29,18 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 // import MouseTimeDisplay from './MouseTimeDisplay';
 
 var AdvancedControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 46px;\n  position: relative;\n  cursor: pointer;\n  z-index: 1;\n"])));
-var SliderBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 4px;\n  position: relative;\n  cursor: pointer;\n  z-index: 2;\n  top: ", ";\n"])), function (props) {
+var SliderBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 4px;\n  position: relative;\n  cursor: pointer;\n  z-index: 2;\n   &:hover {\n    height: 6px;\n    background-color: rgba(255, 255, 255, 0.4); \n    transition: all 0.2s ease;\n  }\n  top: ", ";\n"])), function (props) {
   return props.isFullscreen && props.playerType != 'default' ? '4px' : '0px';
 });
+var HoverPreviewBox = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 220px;\n  height: auto;\n"])));
 var propTypes = {
   actions: _propTypes.PropTypes.instanceOf(Object),
   player: _propTypes.PropTypes.instanceOf(Object),
@@ -54,6 +57,63 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, SeekBar);
     _this = _callSuper(this, SeekBar, [props, context]);
+    _defineProperty(_assertThisInitialized(_this), "handleHoverScrub", function (event) {
+      var hoverBox = _this.hoverBoxRef.current;
+      var hoverImg = _this.hoverImageRef.current;
+      if (!hoverBox || !hoverImg) return;
+
+      // Get's length of div so that scrub is inside
+      var containerRect = event.currentTarget.getBoundingClientRect();
+      var containerLeft = containerRect.left;
+      var containerWidth = containerRect.width;
+
+      // X coordinate ki value inside the container
+      var offsetX = event.clientX - containerLeft;
+      if (offsetX < 0) offsetX = 0;
+      if (offsetX > containerWidth) offsetX = containerWidth;
+
+      /// Frame selection (unchanged
+      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 / containerWidth * frameCount);
+      frameNum = Math.max(0, Math.min(frameNum, frameCount - 1));
+      var imageTop = frameHeight * frameNum + offsetTop;
+      hoverImg.style.top = "-".concat(imageTop, "px");
+
+      //Position preview box horizontally within container
+      var hoverWidth = hoverBox.offsetWidth || 220;
+
+      // Center the preview on the mouse X
+      var boxLeft = event.clientX - hoverWidth / 2;
+
+      // Clamp to container so that it does not move out
+      var padding = 10;
+      var minLeft = containerLeft + padding;
+      var maxLeft = containerLeft + containerWidth - hoverWidth - padding;
+      if (boxLeft < minLeft) boxLeft = minLeft;
+      if (boxLeft > maxLeft) boxLeft = maxLeft;
+      hoverBox.style.left = "".concat(boxLeft, "px");
+
+      // Pos fixed vwrically always 10px above the wrapper div
+      var containerTop = containerRect.top;
+      var hoverHeight = hoverBox.offsetHeight;
+      hoverBox.style.top = "".concat(containerTop - hoverHeight - 10, "px");
+    });
+    _defineProperty(_assertThisInitialized(_this), "showHoverPreview", function () {
+      if (_this.hoverBoxRef.current) {
+        _this.hoverBoxRef.current.style.display = "block";
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "hideHoverPreview", function () {
+      if (_this.hoverBoxRef.current) {
+        _this.hoverBoxRef.current.style.display = "none";
+      }
+    });
     _this.getPercent = _this.getPercent.bind(_assertThisInitialized(_this));
     _this.getNewTime = _this.getNewTime.bind(_assertThisInitialized(_this));
     _this.stepForward = _this.stepForward.bind(_assertThisInitialized(_this));
@@ -64,6 +124,8 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
     _this.state = {
       sliderActive: false
     };
+    _this.hoverBoxRef = /*#__PURE__*/_react["default"].createRef();
+    _this.hoverImageRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
   _createClass(SeekBar, [{
@@ -225,9 +287,21 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
       })), tagsMarker && tagsMarker.length ? /*#__PURE__*/_react["default"].createElement(_TagsBar["default"], this.props) : null, /*#__PURE__*/_react["default"].createElement("div", {
         style: this.returnStyle(playerType),
         onMouseDown: this.handleMouseDown,
-        onMouseMove: this.handleMouseMove,
-        onMouseUp: this.handleMouseUp
-      }, /*#__PURE__*/_react["default"].createElement(SliderBlock, {
+        onMouseMove: function onMouseMove(e) {
+          _this2.handleMouseMove(e); // existing seeking
+          _this2.handleHoverScrub(e); // NEW preview scrub
+        },
+        onMouseUp: this.handleMouseUp,
+        onMouseEnter: this.showHoverPreview,
+        onMouseLeave: this.hideHoverPreview
+      }, /*#__PURE__*/_react["default"].createElement(HoverPreviewBox, {
+        ref: this.hoverBoxRef
+      }, /*#__PURE__*/_react["default"].createElement(HoverPreviewImage, {
+        ref: this.hoverImageRef,
+        src: this.props.iframeURL // use your iframeURL from props
+        ,
+        draggable: false
+      })), /*#__PURE__*/_react["default"].createElement(SliderBlock, {
         playerType: playerType,
         isFullscreen: isFullscreen
       }, /*#__PURE__*/_react["default"].createElement(_Slider["default"], _extends({}, this.props, {

package/components/settings-menu-control/ParentMenuComponent.js

@@ -36,10 +36,13 @@ var propTypes = {
   activeChild: _propTypes.PropTypes.string,
   heading: _propTypes.PropTypes.string,
   hasChild: _propTypes.PropTypes.bool,
-  iconName: _propTypes.PropTypes.string
+  iconName: _propTypes.PropTypes.string,
+  disablePlayerActions: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.string)
 };
-var ParentMenuBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  justify-content: flex-start;\n  align-items: center;\n  &:hover {\n    background: ", ";\n  }\n\n  p {\n    margin-left: 10px;\n    white-space: nowrap;\n  }\n"])), function (props) {
-  return props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
+var ParentMenuBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  justify-content: flex-start;\n  align-items: center;\n  &:hover {\n    background: ", ";\n      cursor: ", "\n  }\n\n  p {\n    margin-left: 10px;\n    white-space: nowrap;\n  }\n"])), function (props) {
+  return props.disablePlaybackRate ? '' : props.theme ? " ".concat(_tokens.colors[props.theme].videoPlayer.rgbaThemeColor) : 'rgba(0, 206, 198, 0.1)';
+}, function (props) {
+  return props.disablePlaybackRate && 'not-allowed';
 });
 var RightContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute; /* Position absolutely */\n  right: 0; /* Align to the right */\n  display: flex;\n  align-items: center;\n  p {\n    font-family: SFUIText-Medium;\n    margin-right: 10px;\n    white-space: nowrap;\n  }\n  i {\n    display: flex;\n    align-items: center;\n  }\n"])));
 var ParentMenuControl = exports["default"] = /*#__PURE__*/function (_Component) {
@@ -70,9 +73,13 @@ var ParentMenuControl = exports["default"] = /*#__PURE__*/function (_Component)
         heading = _this$props.heading,
         hasChild = _this$props.hasChild,
         iconName = _this$props.iconName,
-        data = _this$props.data;
+        data = _this$props.data,
+        _this$props$disablePl = _this$props.disablePlayerActions,
+        disablePlayerActions = _this$props$disablePl === void 0 ? [] : _this$props$disablePl;
+      var disablePlaybackRate = disablePlayerActions === null || disablePlayerActions === void 0 ? void 0 : disablePlayerActions.includes('playback_rate');
       return data && data.length ? /*#__PURE__*/_react["default"].createElement(ParentMenuBlock, {
-        onClick: this.handleClick,
+        onClick: !disablePlaybackRate && this.handleClick,
+        disablePlaybackRate: disablePlaybackRate,
         theme: theme
       }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
         name: iconName,

package/components/settings-menu-control/SettingsMenu.js

@@ -202,6 +202,7 @@ function SettingsMenu(_ref) {
     hasChild: true,
     heading: 'Playback Speed',
     theme: theme,
+    disablePlayerActions: disablePlayerActions,
     player: player,
     actions: actions,
     activeChild: "".concat(activePlaybackRate, "x"),

package/package.json

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