vidply 1.0.34 → 1.0.36

package/dist/legacy/vidply.js

@@ -2065,9 +2065,16 @@
             touchstart: this.onTouchStart.bind(this),
             touchmove: this.onTouchMove.bind(this),
             touchend: this.onTouchEnd.bind(this),
+            pointerdown: this.onPointerDown.bind(this),
+            pointermove: this.onPointerMove.bind(this),
+            pointerup: this.onPointerUp.bind(this),
+            pointercancel: this.onPointerUp.bind(this),
             keydown: this.onKeyDown.bind(this),
-            resizeHandleMousedown: this.onResizeHandleMouseDown.bind(this)
+            resizeHandleMousedown: this.onResizeHandleMouseDown.bind(this),
+            resizeHandlePointerDown: this.onResizeHandlePointerDown.bind(this)
           };
+          this.activePointerId = null;
+          this.activePointerType = null;
           this.init();
         }
         hasManagedResizeHandles() {
@@ -2104,17 +2111,28 @@
         }
         init() {
           const dragHandle = this.options.dragHandle || this.element;
-          dragHandle.addEventListener("mousedown", this.handlers.mousedown);
-          dragHandle.addEventListener("touchstart", this.handlers.touchstart);
-          document.addEventListener("mousemove", this.handlers.mousemove);
-          document.addEventListener("mouseup", this.handlers.mouseup);
-          document.addEventListener("touchmove", this.handlers.touchmove, { passive: false });
-          document.addEventListener("touchend", this.handlers.touchend);
+          if (typeof window !== "undefined" && "PointerEvent" in window) {
+            dragHandle.addEventListener("pointerdown", this.handlers.pointerdown);
+            document.addEventListener("pointermove", this.handlers.pointermove, { passive: false });
+            document.addEventListener("pointerup", this.handlers.pointerup);
+            document.addEventListener("pointercancel", this.handlers.pointercancel);
+          } else {
+            dragHandle.addEventListener("mousedown", this.handlers.mousedown);
+            dragHandle.addEventListener("touchstart", this.handlers.touchstart, { passive: false });
+            document.addEventListener("mousemove", this.handlers.mousemove);
+            document.addEventListener("mouseup", this.handlers.mouseup);
+            document.addEventListener("touchmove", this.handlers.touchmove, { passive: false });
+            document.addEventListener("touchend", this.handlers.touchend);
+          }
           this.element.addEventListener("keydown", this.handlers.keydown);
           if (this.options.resizeHandles && this.options.resizeHandles.length > 0) {
             this.options.resizeHandles.forEach((handle) => {
-              handle.addEventListener("mousedown", this.handlers.resizeHandleMousedown);
-              handle.addEventListener("touchstart", this.handlers.resizeHandleMousedown);
+              if (typeof window !== "undefined" && "PointerEvent" in window) {
+                handle.addEventListener("pointerdown", this.handlers.resizeHandlePointerDown);
+              } else {
+                handle.addEventListener("mousedown", this.handlers.resizeHandleMousedown);
+                handle.addEventListener("touchstart", this.handlers.resizeHandleMousedown, { passive: false });
+              }
               const managed = handle.dataset.vidplyManagedResize === "true";
               this.resizeHandlesManaged.set(handle, managed);
               if (managed) {
@@ -2124,6 +2142,45 @@
             });
           }
         }
+        onPointerDown(e) {
+          var _a, _b;
+          if (e.isPrimary === false) return;
+          if (e.pointerType === "mouse" && e.button !== 0) return;
+          if (e.target.classList.contains("".concat(this.options.classPrefix, "-resize-handle"))) {
+            return;
+          }
+          if (this.options.onDragStart && !this.options.onDragStart(e)) {
+            return;
+          }
+          this.activePointerId = e.pointerId;
+          this.activePointerType = e.pointerType;
+          try {
+            (_b = (_a = e.currentTarget) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, e.pointerId);
+          } catch (e2) {
+          }
+          this.startDragging(e.clientX, e.clientY);
+          e.preventDefault();
+        }
+        onPointerMove(e) {
+          if (this.activePointerId !== null && e.pointerId !== this.activePointerId) return;
+          if (this.isDragging) {
+            this.drag(e.clientX, e.clientY);
+            e.preventDefault();
+          } else if (this.isResizing) {
+            this.resize(e.clientX, e.clientY);
+            e.preventDefault();
+          }
+        }
+        onPointerUp(e) {
+          if (this.activePointerId !== null && e.pointerId !== this.activePointerId) return;
+          if (this.isDragging) {
+            this.stopDragging();
+          } else if (this.isResizing) {
+            this.stopResizing();
+          }
+          this.activePointerId = null;
+          this.activePointerType = null;
+        }
         onMouseDown(e) {
           if (e.target.classList.contains("".concat(this.options.classPrefix, "-resize-handle"))) {
             return;
@@ -2143,6 +2200,23 @@
           }
           const touch = e.touches[0];
           this.startDragging(touch.clientX, touch.clientY);
+          e.preventDefault();
+        }
+        onResizeHandlePointerDown(e) {
+          var _a, _b;
+          if (e.isPrimary === false) return;
+          if (e.pointerType === "mouse" && e.button !== 0) return;
+          e.preventDefault();
+          e.stopPropagation();
+          const handle = e.target;
+          this.resizeDirection = handle.getAttribute("data-direction");
+          this.activePointerId = e.pointerId;
+          this.activePointerType = e.pointerType;
+          try {
+            (_b = (_a = e.currentTarget) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, e.pointerId);
+          } catch (e2) {
+          }
+          this.startResizing(e.clientX, e.clientY);
         }
         onResizeHandleMouseDown(e) {
           var _a, _b, _c, _d;
@@ -2583,15 +2657,20 @@
           this.disablePointerResizeMode();
           dragHandle.removeEventListener("mousedown", this.handlers.mousedown);
           dragHandle.removeEventListener("touchstart", this.handlers.touchstart);
+          dragHandle.removeEventListener("pointerdown", this.handlers.pointerdown);
           document.removeEventListener("mousemove", this.handlers.mousemove);
           document.removeEventListener("mouseup", this.handlers.mouseup);
           document.removeEventListener("touchmove", this.handlers.touchmove);
           document.removeEventListener("touchend", this.handlers.touchend);
+          document.removeEventListener("pointermove", this.handlers.pointermove);
+          document.removeEventListener("pointerup", this.handlers.pointerup);
+          document.removeEventListener("pointercancel", this.handlers.pointercancel);
           this.element.removeEventListener("keydown", this.handlers.keydown);
           if (this.options.resizeHandles && this.options.resizeHandles.length > 0) {
             this.options.resizeHandles.forEach((handle) => {
               handle.removeEventListener("mousedown", this.handlers.resizeHandleMousedown);
               handle.removeEventListener("touchstart", this.handlers.resizeHandleMousedown);
+              handle.removeEventListener("pointerdown", this.handlers.resizeHandlePointerDown);
             });
           }
           this.element.classList.remove(
@@ -4596,7 +4675,6 @@
           this.iframe = document.createElement("div");
           this.iframe.id = "youtube-player-".concat(Math.random().toString(36).substr(2, 9));
           this.iframe.style.width = "100%";
-          this.iframe.style.aspectRatio = "16 / 9";
           this.iframe.style.maxHeight = "100%";
           this.player.element.parentNode.insertBefore(this.iframe, this.player.element);
         }
@@ -4821,7 +4899,6 @@
           this.iframe = document.createElement("div");
           this.iframe.id = "vimeo-player-".concat(Math.random().toString(36).substr(2, 9));
           this.iframe.style.width = "100%";
-          this.iframe.style.aspectRatio = "16 / 9";
           this.iframe.style.maxHeight = "100%";
           this.player.element.parentNode.insertBefore(this.iframe, this.player.element);
         }
@@ -5409,10 +5486,8 @@
           this.iframe.style.width = "100%";
           this.iframe.style.display = "block";
           if (this.isPlaylist()) {
-            this.iframe.style.aspectRatio = "16 / 9";
             this.iframe.classList.add("vidply-soundcloud-iframe", "vidply-soundcloud-playlist");
           } else {
-            this.iframe.style.aspectRatio = "16 / 3";
             this.iframe.classList.add("vidply-soundcloud-iframe");
           }
           this.iframe.style.maxHeight = "100%";
@@ -5846,6 +5921,7 @@
           }
           if (menuRect.top < 10) {
             menu.style.top = "10px";
+            menu.style.bottom = "auto";
           }
           if (menuRect.bottom > viewportHeight - 10) {
             menu.style.bottom = "10px";
@@ -8808,6 +8884,7 @@
       }
     }
     handleKeydown(e) {
+      var _a, _b;
       if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA" || e.target.tagName === "SELECT") {
         return;
       }
@@ -8821,6 +8898,20 @@
         if (playlistButton) {
           return;
         }
+        const signWrapper = activeElement.closest(".vidply-sign-language-wrapper");
+        if (signWrapper) {
+          const draggable = (_a = this.player.signLanguageManager) == null ? void 0 : _a.draggable;
+          if ((draggable == null ? void 0 : draggable.keyboardDragMode) || (draggable == null ? void 0 : draggable.keyboardResizeMode)) {
+            return;
+          }
+        }
+        const transcriptWindow = activeElement.closest(".vidply-transcript-window");
+        if (transcriptWindow) {
+          const draggable = (_b = this.player.transcriptManager) == null ? void 0 : _b.draggableResizable;
+          if ((draggable == null ? void 0 : draggable.keyboardDragMode) || (draggable == null ? void 0 : draggable.keyboardResizeMode)) {
+            return;
+          }
+        }
       }
       const key = e.key;
       let handled = false;
@@ -9894,9 +9985,10 @@
      * Setup interaction (drag and resize)
      */
     _setupInteraction() {
+      var _a, _b;
       const isMobile2 = window.innerWidth < 768;
       const isFullscreen = this.player.state.fullscreen;
-      if (isMobile2 && !isFullscreen) {
+      if (isMobile2 && !isFullscreen && ((_b = (_a = this.player) == null ? void 0 : _a.options) == null ? void 0 : _b.signLanguageDragOnMobile) === false) {
         if (this.draggable) {
           this.draggable.destroy();
           this.draggable = null;
@@ -9906,7 +9998,9 @@
       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,
@@ -10159,10 +10253,18 @@
         label: "player.enableSignDragMode",
         hasTextClass: true,
         onClick: () => {
+          var _a2;
           this.toggleKeyboardDragMode();
-          this.hideSettingsMenu();
+          this.hideSettingsMenu({ focusButton: false });
+          if ((_a2 = this.draggable) == null ? void 0 : _a2.keyboardDragMode) {
+            setTimeout(() => {
+              var _a3, _b2;
+              (_b2 = (_a3 = this.wrapper) == null ? void 0 : _a3.focus) == null ? void 0 : _b2.call(_a3, { preventScroll: true });
+            }, 20);
+          }
         }
       });
+      dragOption.setAttribute("data-setting", "keyboard-drag");
       dragOption.setAttribute("role", "switch");
       dragOption.setAttribute("aria-checked", "false");
       this._removeTooltipFromMenuItem(dragOption);
@@ -10942,23 +11044,9 @@
       if (this.options.height) {
         this.container.style.height = typeof this.options.height === "number" ? "".concat(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 = "".concat(wAttr, " / ").concat(hAttr);
-          }
-          if (this.videoWrapper && !this.videoWrapper.style.aspectRatio) {
-            this.videoWrapper.style.aspectRatio = "".concat(wAttr, " / ").concat(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();
@@ -10986,34 +11074,6 @@
         }
       }, { 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 = "".concat(w, " / ").concat(h);
-          this.videoWrapper.style.height = "auto";
-          if (this.container && !this.container.style.aspectRatio) {
-            this.container.style.aspectRatio = "".concat(w, " / ").concat(h);
-          }
-        };
-        img.src = posterUrl;
-      } catch (e) {
-      }
-    }
     createPlayButtonOverlay() {
       this.playButtonOverlay = createPlayOverlay();
       this.playButtonOverlay.addEventListener("click", () => {
@@ -11684,6 +11744,7 @@
       var _a;
       this.state.fullscreen = true;
       this.container.classList.add("".concat(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;
@@ -11691,20 +11752,58 @@
       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 = (_a = document.querySelector('meta[name="viewport"]')) == null ? void 0 : _a.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;
@@ -11725,6 +11824,14 @@
         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) {
@@ -13744,8 +13851,12 @@
           this.state.fullscreen = isFullscreen;
           if (isFullscreen) {
             this.container.classList.add("".concat(this.options.classPrefix, "-fullscreen"));
+            document.body.classList.add("vidply-fullscreen-active");
+            this._makeBackgroundInert();
           } else {
             this.container.classList.remove("".concat(this.options.classPrefix, "-fullscreen"));
+            document.body.classList.remove("vidply-fullscreen-active");
+            this._restoreBackgroundInteractivity();
             this._disablePseudoFullscreen();
           }
           this.emit("fullscreenchange", isFullscreen);
@@ -15427,6 +15538,7 @@
       "responsive": "responsive",
       "pipButton": "pipButton",
       "fullscreenButton": "fullscreenButton"
+      // Layout
     };
     Object.keys(attributeMap).forEach((dataKey) => {
       const optionKey = attributeMap[dataKey];