vidply 1.0.35 → 1.0.36

package/dist/dev/vidply.esm.js

@@ -6055,6 +6055,7 @@ var Player = class _Player extends EventEmitter {
   _enablePseudoFullscreen() {
     this.state.fullscreen = true;
     this.container.classList.add(`${this.options.classPrefix}-fullscreen`);
+    document.body.classList.add("vidply-fullscreen-active");
     this._originalScrollX = window.scrollX || window.pageXOffset;
     this._originalScrollY = window.scrollY || window.pageYOffset;
     this._originalBodyOverflow = document.body.style.overflow;
@@ -6062,20 +6063,58 @@ var Player = class _Player extends EventEmitter {
     this._originalBodyWidth = document.body.style.width;
     this._originalBodyHeight = document.body.style.height;
     this._originalHtmlOverflow = document.documentElement.style.overflow;
+    this._originalBodyBackground = document.body.style.background;
+    this._originalHtmlBackground = document.documentElement.style.background;
     document.body.style.overflow = "hidden";
     document.body.style.width = "100%";
     document.body.style.height = "100%";
+    document.body.style.background = "#000";
     document.documentElement.style.overflow = "hidden";
+    document.documentElement.style.background = "#000";
     this._originalViewport = document.querySelector('meta[name="viewport"]')?.getAttribute("content");
     const viewport = document.querySelector('meta[name="viewport"]');
     if (viewport) {
       viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
     }
     window.scrollTo(0, 0);
+    this._makeBackgroundInert();
     this.emit("fullscreenchange", true);
     this.emit("enterfullscreen");
   }
+  /**
+   * Makes all page content except the fullscreen player inert (non-focusable)
+   * This prevents keyboard navigation from focusing on hidden background elements
+   */
+  _makeBackgroundInert() {
+    this._inertElements = [];
+    let current = this.container;
+    while (current && current !== document.body && current !== document.documentElement) {
+      const parent = current.parentElement;
+      if (parent) {
+        Array.from(parent.children).forEach((sibling) => {
+          if (sibling !== current && sibling.nodeType === Node.ELEMENT_NODE && !sibling.hasAttribute("inert") && sibling.tagName !== "SCRIPT" && sibling.tagName !== "STYLE" && sibling.tagName !== "LINK" && sibling.tagName !== "META") {
+            sibling.setAttribute("inert", "");
+            this._inertElements.push(sibling);
+          }
+        });
+      }
+      current = parent;
+    }
+  }
+  /**
+   * Restores interactivity to elements that were made inert during fullscreen
+   */
+  _restoreBackgroundInteractivity() {
+    if (this._inertElements) {
+      this._inertElements.forEach((el) => {
+        el.removeAttribute("inert");
+      });
+      this._inertElements = [];
+    }
+  }
   _disablePseudoFullscreen() {
+    document.body.classList.remove("vidply-fullscreen-active");
+    this._restoreBackgroundInteractivity();
     if (this._originalBodyOverflow !== void 0) {
       document.body.style.overflow = this._originalBodyOverflow;
       delete this._originalBodyOverflow;
@@ -6096,6 +6135,14 @@ var Player = class _Player extends EventEmitter {
       document.documentElement.style.overflow = this._originalHtmlOverflow;
       delete this._originalHtmlOverflow;
     }
+    if (this._originalBodyBackground !== void 0) {
+      document.body.style.background = this._originalBodyBackground;
+      delete this._originalBodyBackground;
+    }
+    if (this._originalHtmlBackground !== void 0) {
+      document.documentElement.style.background = this._originalHtmlBackground;
+      delete this._originalHtmlBackground;
+    }
     if (this._originalViewport !== void 0) {
       const viewport = document.querySelector('meta[name="viewport"]');
       if (viewport) {
@@ -8111,8 +8158,12 @@ var Player = class _Player extends EventEmitter {
         this.state.fullscreen = isFullscreen;
         if (isFullscreen) {
           this.container.classList.add(`${this.options.classPrefix}-fullscreen`);
+          document.body.classList.add("vidply-fullscreen-active");
+          this._makeBackgroundInert();
         } else {
           this.container.classList.remove(`${this.options.classPrefix}-fullscreen`);
+          document.body.classList.remove("vidply-fullscreen-active");
+          this._restoreBackgroundInteractivity();
           this._disablePseudoFullscreen();
         }
         this.emit("fullscreenchange", isFullscreen);