@desynova-digital/player 4.0.90 → 4.0.91

package/actions/player.js

@@ -199,13 +199,37 @@ function mute(muted) {
     operation: operation
   };
 }
+function safeAppend(parent, child) {
+  if (!parent || !child) return;
+
+  // Prevent circular nesting
+  if (child.contains(parent)) return; // ❌ cannot append parent inside child
+
+  // Prevent duplicates
+  if (parent.contains(child)) return; // already appended
+
+  parent.appendChild(child); // safe
+}
+
+// keep this outside so original parent is remembered across toggles
+var toastOriginalParent = null;
 function toggleFullscreen(player) {
   if (_fullscreen["default"].enabled) {
-    // var elem = document.getElementsByClassName('left-video-section')[0];
-    var elem = document.getElementsByClassName('player-container')[0];
+    var elem = document.querySelector('.player-container');
     var right = document.querySelector('.right-video-section');
+    var root = document.getElementById('root'); // app root
+    var toastRoot = root.children[0];
+    var fallbackParent = root || document.body;
     if (_fullscreen["default"].isFullscreen) {
+      // exit fullscreen
       _fullscreen["default"].exit();
+
+      // restore toast to its original parent (or fallback)
+      if (toastRoot) {
+        var parentToRestore = toastOriginalParent || fallbackParent;
+        // parentToRestore.appendChild(toastRoot);
+        safeAppend(parentToRestore, toastRoot);
+      }
       setTimeout(function () {
         if (right) {
           right.style.removeProperty('transition');
@@ -215,6 +239,14 @@ function toggleFullscreen(player) {
         }
       }, 300);
     } else {
+      // entering fullscreen
+      if (toastRoot && !toastOriginalParent) {
+        toastOriginalParent = toastRoot.parentNode || fallbackParent;
+      }
+      if (toastRoot && elem) {
+        // elem.appendChild(toastRoot);
+        safeAppend(elem, toastRoot);
+      }
       _fullscreen["default"].request(elem);
     }
     return {
@@ -225,11 +257,48 @@ function toggleFullscreen(player) {
       }
     };
   }
+
+  // <-- this return must be outside the if-block
   return {
     type: FULLSCREEN_CHANGE,
     isFullscreen: !player.isFullscreen
   };
 }
+
+// export function toggleFullscreen(player) {
+//   if (fullscreen.enabled) {
+//     // var elem = document.getElementsByClassName('left-video-section')[0];
+//     var elem = document.getElementsByClassName('player-container')[0];
+//     const right = document.querySelector('.right-video-section');
+
+//     if (fullscreen.isFullscreen) {
+//       fullscreen.exit();
+//       setTimeout(() => {
+//         if (right) {
+//           right.style.removeProperty('transition');
+//           right.style.removeProperty('display');
+//           right.style.removeProperty('transform');
+//           right.style.removeProperty('opacity');
+//         }
+//       }, 300);
+//     } else {
+//       fullscreen.request(elem);
+//     }
+//     return {
+//       type: OPERATE,
+//       operation: {
+//         action: 'toggle-fullscreen',
+//         source: ''
+//       }
+//     };
+//   }
+
+//   return {
+//     type: FULLSCREEN_CHANGE,
+//     isFullscreen: !player.isFullscreen
+//   };
+// }
+
 function toggleRightBar(player, showRightMenu) {
   var right = document.querySelector('.right-video-section');
   var sidebarWidth = right.offsetWidth; // actual width of sidebar

package/components/AudioMeter.js

@@ -39,7 +39,9 @@ var propTypes = {
 var defaultProps = {
   height: 0
 };
-var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: -12px;\n  height: 100%;\n  overflow: hidden;\n  .range {\n    color: #aaaaaa;\n    font-family: SFUIText-Medium;\n    text-align: right;\n    font-size: 8px;\n    box-sizing: border-box;\n  }\n"])));
+var RangeBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: -12px;\n  background-color: ", ";\n  height: 100%;\n  overflow: hidden;\n  .range {\n    color: #aaaaaa;\n    font-family: SFUIText-Medium;\n    text-align: right;\n    font-size: 8px;\n    box-sizing: border-box;\n  }\n"])), function (props) {
+  return props.isFullscreen ? '#000' : 'unset';
+});
 var MeterBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  .track-block {\n    position: relative;\n    width: 15px;\n    height: 100%;\n    overflow: visible;\n    &.left-track,\n    &.right-track {\n      &:after {\n        position: absolute;\n        color: #aaaaaa;\n        bottom: -12px;\n        font-size: 10px;\n        left: 50%;\n        transform: translateX(-50%);\n        font-family: SFUIText-Regular;\n      }\n    }\n    &.left-track:after {\n      content: 'L';\n    }\n    &.right-track:after {\n      content: 'R';\n    }\n  }\n"])));
 var ColorMeter = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to top,\n    #00c8e7,\n    #00e6b9 57%,\n    #ff8d29 83%,\n    #f6462c\n  );\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  .stack-block {\n    height: 2px;\n    margin-bottom: 3px;\n    background: #000000;\n  }\n"])));
 var BlackMeter = (0, _styledComponents["default"])('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: #000000;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  height: 100%;\n  transition: all 0.25s ease-in-out;\n  -moz-transition: all 0.25s ease-in-out;\n  -webkit-transition: all 0.25s ease-in-out;\n  -ms-transition: all 0.25s ease-in-out;\n  -o-transition: all 0.25s ease-in-out;\n  .stack-block {\n    height: 2px;\n    margin-bottom: 3px;\n    background: #304153;\n  }\n"])));
@@ -290,7 +292,10 @@ var AudioMeter = exports["default"] = /*#__PURE__*/function (_Component) {
         rangeArray = _this$state.rangeArray,
         unitBlockHeight = _this$state.unitBlockHeight,
         audioPan = _this$state.audioPan;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, null, rangeArray.map(function (range) {
+      var isFullscreen = this.props.isFullscreen;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RangeBlock, {
+        isFullscreen: isFullscreen
+      }, rangeArray.map(function (range) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: 'range' + range,
           style: {

package/components/Player.js

@@ -158,7 +158,7 @@ var defaultProps = {
   onVolumeChange: null
 };
 var PlayerBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
-var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  background: #000000;\n  .left-video-section {\n    width: ", ";\n    position: relative;\n  }\n  .audio-meter-block {\n    position: relative;\n    width: 0px;\n    display: none;\n    &.qc {\n      width: 70px;\n      display: block;\n    }\n  }\n  .right-video-section {\n    width: ", ";\n    position: relative;\n  }\n"])), function (props) {
+var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  background: #000000;\n  .left-video-section {\n    width: ", ";\n    position: relative;\n  }\n  .audio-meter-block {\n    position: relative;\n    width: 0px;\n    display: none;\n    &.qc {\n      width: 70px;\n      display: block;\n    }\n  }\n .right-video-section {\n  width: ", ";\n"])), function (props) {
   if (!props.isRightMenuVisible) {
     return '100%';
   }
@@ -168,7 +168,9 @@ var PlayerContainer = _styledComponents["default"].div(_templateObject2 || (_tem
     return '100%';
   }
 }, function (props) {
-  if (props.playerType === 'qc') {
+  if (props.isFullscreen && props.playerType === 'qc') {
+    return 'calc(38.1% - 70px)';
+  } else if (props.playerType === 'qc') {
     return 'calc(36.33% - 70px)';
   } else {
     return '36.33%';
@@ -208,6 +210,42 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         onRightMenuVisible(false);
       }
     });
+    // handleFullScreenChange() {
+    //   this.actions.handleFullscreenChange(fullscreen.isFullscreen);
+    // }
+    _defineProperty(_this, "handleFullScreenChange", function () {
+      var onRightMenuVisible = _this.props.onRightMenuVisible;
+      var rightSectionRef = _this._rightSectionRef;
+      var playerHeader = (0, _reactDom.findDOMNode)(_this._playerHeader);
+      var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
+      var totalHeight = window.innerHeight;
+      var newHeight;
+      var isFS = _fullscreen["default"].isFullscreen;
+      _this.actions.handleFullscreenChange(isFS);
+      if (isFS) {
+        rightSectionRef.style.position = 'relative';
+        newHeight = totalHeight - headerHeight;
+        rightSectionRef.style.top = "".concat(headerHeight, "px");
+        rightSectionRef.style.height = "".concat(newHeight, "px");
+      }
+      // If exited fullscreen
+      if (!isFS) {
+        // Hide right sidebar
+        var right = document.querySelector('.right-video-section');
+        if (right) {
+          right.style.removeProperty('transition');
+          right.style.removeProperty('display');
+          right.style.removeProperty('transform');
+          right.style.removeProperty('opacity');
+          right.style.removeProperty('right');
+        }
+
+        // Reset UI state in parent
+        if (onRightMenuVisible) {
+          onRightMenuVisible(true);
+        }
+      }
+    });
     _this.controlsHideTimer = null;
     _this.meterHeight = 40;
     _this.video = null; // the Video component
@@ -851,11 +889,6 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }
       // this.video.handleResize();
     }
-  }, {
-    key: "handleFullScreenChange",
-    value: function handleFullScreenChange() {
-      this.actions.handleFullscreenChange(_fullscreen["default"].isFullscreen);
-    }
   }, {
     key: "handleStateChange",
     value: function handleStateChange(state, prevState) {
@@ -880,7 +913,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this5 = this,
+        _props$player,
+        _props$player2;
       var _this$manager$getStat4 = this.manager.getState(),
         player = _this$manager$getStat4.player;
       var props = _objectSpread(_objectSpread({}, this.props), {}, {
@@ -912,7 +947,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         }
       }, props, {
         hasRightSection: !!rightSection,
-        isRightMenuVisible: isRightMenuVisible
+        isRightMenuVisible: isRightMenuVisible,
+        isFullscreen: (_props$player = props.player) === null || _props$player === void 0 ? void 0 : _props$player.isFullscreen
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "left-video-section",
         ref: function ref(leftSectionRef) {
@@ -931,7 +967,8 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         active: true
       }, /*#__PURE__*/_react["default"].createElement(_AudioMeter["default"], {
         player: props.player,
-        height: this.meterHeight
+        height: this.meterHeight,
+        isFullscreen: (_props$player2 = props.player) === null || _props$player2 === void 0 ? void 0 : _props$player2.isFullscreen
       }))), rightSection ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "right-video-section",
         ref: function ref(rightSectionRef) {

package/package.json

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