vidply 1.0.34 → 1.0.36

package/dist/dev/vidply.esm.js

@@ -21,7 +21,7 @@ import {
   focusFirstMenuItem,
   i18n,
   preventDragOnElement
-} from "./vidply.chunk-74NJTDQI.js";
+} from "./vidply.chunk-AXXU22HR.js";
 
 // src/utils/EventEmitter.js
 var EventEmitter = class {
@@ -271,6 +271,7 @@ var ControlBar = class {
         }
         if (menuRect.top < 10) {
           menu.style.top = "10px";
+          menu.style.bottom = "auto";
         }
         if (menuRect.bottom > viewportHeight - 10) {
           menu.style.bottom = "10px";
@@ -3235,6 +3236,20 @@ var KeyboardManager = class {
       if (playlistButton) {
         return;
       }
+      const signWrapper = activeElement.closest(".vidply-sign-language-wrapper");
+      if (signWrapper) {
+        const draggable = this.player.signLanguageManager?.draggable;
+        if (draggable?.keyboardDragMode || draggable?.keyboardResizeMode) {
+          return;
+        }
+      }
+      const transcriptWindow = activeElement.closest(".vidply-transcript-window");
+      if (transcriptWindow) {
+        const draggable = this.player.transcriptManager?.draggableResizable;
+        if (draggable?.keyboardDragMode || draggable?.keyboardResizeMode) {
+          return;
+        }
+      }
     }
     const key = e.key;
     let handled = false;
@@ -4298,7 +4313,7 @@ var SignLanguageManager = class {
   _setupInteraction() {
     const isMobile2 = window.innerWidth < 768;
     const isFullscreen = this.player.state.fullscreen;
-    if (isMobile2 && !isFullscreen) {
+    if (isMobile2 && !isFullscreen && this.player?.options?.signLanguageDragOnMobile === false) {
       if (this.draggable) {
         this.draggable.destroy();
         this.draggable = null;
@@ -4308,7 +4323,9 @@ var SignLanguageManager = class {
     if (this.draggable) return;
     const classPrefix = this.player.options.classPrefix;
     this.draggable = new DraggableResizable(this.wrapper, {
-      dragHandle: this.header,
+      // Allow dragging from anywhere on the sign-language window (better for touch).
+      // We still block dragging when interacting with controls via `onDragStart` below.
+      dragHandle: this.wrapper,
       resizeHandles: this.resizeHandles,
       constrainToViewport: true,
       maintainAspectRatio: true,
@@ -4557,9 +4574,15 @@ var SignLanguageManager = class {
       hasTextClass: true,
       onClick: () => {
         this.toggleKeyboardDragMode();
-        this.hideSettingsMenu();
+        this.hideSettingsMenu({ focusButton: false });
+        if (this.draggable?.keyboardDragMode) {
+          setTimeout(() => {
+            this.wrapper?.focus?.({ preventScroll: true });
+          }, 20);
+        }
       }
     });
+    dragOption.setAttribute("data-setting", "keyboard-drag");
     dragOption.setAttribute("role", "switch");
     dragOption.setAttribute("aria-checked", "false");
     this._removeTooltipFromMenuItem(dragOption);
@@ -5251,7 +5274,7 @@ var Player = class _Player extends EventEmitter {
     if (!this.options.transcript && !this.options.transcriptButton) {
       return null;
     }
-    const module = await import("./vidply.TranscriptManager-T3BVTZHZ.js");
+    const module = await import("./vidply.TranscriptManager-EIIN5YOF.js");
     const Manager = module.TranscriptManager || module.default;
     if (!Manager) {
       return null;
@@ -5335,23 +5358,9 @@ var Player = class _Player extends EventEmitter {
     if (this.options.height) {
       this.container.style.height = typeof this.options.height === "number" ? `${this.options.height}px` : this.options.height;
     }
-    if (this.element.tagName === "VIDEO" && !this.options.height) {
-      const wAttr = parseInt(this.element.getAttribute("width") || "", 10);
-      const hAttr = parseInt(this.element.getAttribute("height") || "", 10);
-      if (Number.isFinite(wAttr) && Number.isFinite(hAttr) && wAttr > 0 && hAttr > 0) {
-        if (!this.container.style.aspectRatio) {
-          this.container.style.aspectRatio = `${wAttr} / ${hAttr}`;
-        }
-        if (this.videoWrapper && !this.videoWrapper.style.aspectRatio) {
-          this.videoWrapper.style.aspectRatio = `${wAttr} / ${hAttr}`;
-          this.videoWrapper.style.height = "auto";
-        }
-      }
-    }
     if (this.options.poster && this.element.tagName === "VIDEO") {
       const resolvedPoster = this.resolvePosterPath(this.options.poster);
       this.element.poster = resolvedPoster;
-      this.applyPosterAspectRatio(resolvedPoster);
     }
     if (this.element.tagName === "VIDEO") {
       this.createPlayButtonOverlay();
@@ -5379,34 +5388,6 @@ var Player = class _Player extends EventEmitter {
       }
     }, { once: true });
   }
-  /**
-   * Apply aspect ratio to the video wrapper based on the poster's intrinsic size.
-   * This helps render correct poster sizing before media metadata is available.
-   */
-  applyPosterAspectRatio(posterUrl) {
-    try {
-      if (!posterUrl) return;
-      if (this.element.tagName !== "VIDEO") return;
-      if (!this.videoWrapper) return;
-      if (this.options.width || this.options.height) return;
-      if (this._posterAspectAppliedFor === posterUrl) return;
-      this._posterAspectAppliedFor = posterUrl;
-      const img = new Image();
-      img.decoding = "async";
-      img.onload = () => {
-        const w = img.naturalWidth;
-        const h = img.naturalHeight;
-        if (!w || !h) return;
-        this.videoWrapper.style.aspectRatio = `${w} / ${h}`;
-        this.videoWrapper.style.height = "auto";
-        if (this.container && !this.container.style.aspectRatio) {
-          this.container.style.aspectRatio = `${w} / ${h}`;
-        }
-      };
-      img.src = posterUrl;
-    } catch (e) {
-    }
-  }
   createPlayButtonOverlay() {
     this.playButtonOverlay = createPlayOverlay();
     this.playButtonOverlay.addEventListener("click", () => {
@@ -5468,16 +5449,16 @@ var Player = class _Player extends EventEmitter {
     }
     let rendererClass = HTML5Renderer;
     if (src.includes("youtube.com") || src.includes("youtu.be")) {
-      const module = await import("./vidply.YouTubeRenderer-EVXXE34A.js");
+      const module = await import("./vidply.YouTubeRenderer-E6F4UGVF.js");
       rendererClass = module.YouTubeRenderer || module.default;
     } else if (src.includes("vimeo.com")) {
-      const module = await import("./vidply.VimeoRenderer-DY2FG7LZ.js");
+      const module = await import("./vidply.VimeoRenderer-SLEBCZTT.js");
       rendererClass = module.VimeoRenderer || module.default;
     } else if (src.includes(".m3u8")) {
       const module = await import("./vidply.HLSRenderer-YGWCAICA.js");
       rendererClass = module.HLSRenderer || module.default;
     } else if (src.includes("soundcloud.com") || src.includes("api.soundcloud.com")) {
-      const module = await import("./vidply.SoundCloudRenderer-RIA3QKP3.js");
+      const module = await import("./vidply.SoundCloudRenderer-HCMKXHSX.js");
       rendererClass = module.SoundCloudRenderer || module.default;
     }
     this.log(`Using ${rendererClass?.name || "HTML5Renderer"} renderer`);
@@ -6074,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;
@@ -6081,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;
@@ -6115,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) {
@@ -8130,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);
@@ -9809,6 +9841,7 @@ function parseDataAttributes(dataset) {
     "responsive": "responsive",
     "pipButton": "pipButton",
     "fullscreenButton": "fullscreenButton"
+    // Layout
   };
   Object.keys(attributeMap).forEach((dataKey) => {
     const optionKey = attributeMap[dataKey];