vidply 1.0.34 → 1.0.36

package/src/controls/ControlBar.js

@@ -145,6 +145,9 @@ export class ControlBar {
                 // Ensure menu doesn't go off top or bottom
                 if (menuRect.top < 10) {
                     menu.style.top = '10px';
+                    // Important: clear bottom constraint, otherwise top+bottom will squeeze the menu height
+                    // into a tiny strip on some mobile layouts.
+                    menu.style.bottom = 'auto';
                 }
                 
                 if (menuRect.bottom > viewportHeight - 10) {

package/src/controls/KeyboardManager.js

@@ -46,6 +46,25 @@ export class KeyboardManager {
         if (playlistButton) {
           return; // Let the playlist handle keyboard events
         }
+
+      // Don't steal arrow keys when the sign-language overlay is in keyboard drag/resize mode.
+      // DraggableResizable listens on the overlay itself, but we run in CAPTURE phase, so we must opt out here.
+      const signWrapper = activeElement.closest('.vidply-sign-language-wrapper');
+      if (signWrapper) {
+        const draggable = this.player.signLanguageManager?.draggable;
+        if (draggable?.keyboardDragMode || draggable?.keyboardResizeMode) {
+          return;
+        }
+      }
+
+      // Same idea for the transcript floating window (it also uses DraggableResizable).
+      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;

package/src/core/Player.js

@@ -588,6 +588,7 @@ export class Player extends EventEmitter {
             this.container.classList.add(`${this.options.classPrefix}-responsive`);
         }
 
+
         // Create video wrapper (for proper positioning of controls)
         this.videoWrapper = DOMUtils.createElement('div', {
             className: `${this.options.classPrefix}-video-wrapper`
@@ -639,35 +640,10 @@ export class Player extends EventEmitter {
                 : this.options.height;
         }
 
-        // If no explicit height is set, ensure video players still have a stable layout box
-        // even before any media is loaded (important for deferLoad + playlists).
-        // We use the element's width/height attributes (e.g. from TYPO3) as aspect ratio.
-        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) {
-                // Only set if not already defined by CSS/inline style
-                if (!this.container.style.aspectRatio) {
-                    this.container.style.aspectRatio = `${wAttr} / ${hAttr}`;
-                }
-
-                // The actual visual box is the videoWrapper (the video element is 100% height).
-                // Give the wrapper the same aspect ratio so posters render correctly before metadata is loaded.
-                if (this.videoWrapper && !this.videoWrapper.style.aspectRatio) {
-                    this.videoWrapper.style.aspectRatio = `${wAttr} / ${hAttr}`;
-                    // Override default CSS height:100% (which depends on parent having a height)
-                    this.videoWrapper.style.height = 'auto';
-                }
-            }
-        }
-
         // Set poster (convert relative paths to absolute URLs)
         if (this.options.poster && this.element.tagName === 'VIDEO') {
             const resolvedPoster = this.resolvePosterPath(this.options.poster);
             this.element.poster = resolvedPoster;
-            // If we intentionally have no media loaded yet (e.g. deferLoad/playlist),
-            // use poster aspect ratio to size the wrapper so the poster isn't stretched.
-            this.applyPosterAspectRatio(resolvedPoster);
         }
 
         // Create centered play button overlay (only for video)
@@ -711,45 +687,6 @@ export 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 user explicitly configured dimensions, don't override.
-            if (this.options.width || this.options.height) return;
-
-            // Avoid repeated work
-            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;
-
-                // Apply to wrapper (the actual layout box)
-                this.videoWrapper.style.aspectRatio = `${w} / ${h}`;
-                this.videoWrapper.style.height = 'auto';
-
-                // Also apply to container if not explicitly set
-                if (this.container && !this.container.style.aspectRatio) {
-                    this.container.style.aspectRatio = `${w} / ${h}`;
-                }
-            };
-            img.src = posterUrl;
-        } catch (e) {
-            // ignore
-        }
-    }
-
     createPlayButtonOverlay() {
         // Create complete SVG play button from Icons.js
         this.playButtonOverlay = createPlayOverlay();
@@ -1675,6 +1612,9 @@ export class Player extends EventEmitter {
         this.state.fullscreen = true;
         this.container.classList.add(`${this.options.classPrefix}-fullscreen`);
         
+        // Add body class for CSS targeting (fallback for browsers without :has() support)
+        document.body.classList.add('vidply-fullscreen-active');
+        
         // Store current scroll position for restoration later
         this._originalScrollX = window.scrollX || window.pageXOffset;
         this._originalScrollY = window.scrollY || window.pageYOffset;
@@ -1685,11 +1625,15 @@ export 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';
         
         // On iOS, also lock the viewport and scroll to top
         this._originalViewport = document.querySelector('meta[name="viewport"]')?.getAttribute('content');
@@ -1701,11 +1645,62 @@ export class Player extends EventEmitter {
         // Scroll to top on iOS to prevent positioning issues
         window.scrollTo(0, 0);
         
+        // Make all other page content inert to prevent keyboard focus escaping to background
+        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 = [];
+        
+        // Find all siblings and ancestors' siblings that should be made inert
+        let current = this.container;
+        while (current && current !== document.body && current !== document.documentElement) {
+            const parent = current.parentElement;
+            if (parent) {
+                // Make all siblings inert
+                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() {
+        // Remove body class for CSS targeting
+        document.body.classList.remove('vidply-fullscreen-active');
+        
+        // Restore interactivity to background elements
+        this._restoreBackgroundInteractivity();
+        
         // Restore body scrolling
         if (this._originalBodyOverflow !== undefined) {
             document.body.style.overflow = this._originalBodyOverflow;
@@ -1727,6 +1722,14 @@ export class Player extends EventEmitter {
             document.documentElement.style.overflow = this._originalHtmlOverflow;
             delete this._originalHtmlOverflow;
         }
+        if (this._originalBodyBackground !== undefined) {
+            document.body.style.background = this._originalBodyBackground;
+            delete this._originalBodyBackground;
+        }
+        if (this._originalHtmlBackground !== undefined) {
+            document.documentElement.style.background = this._originalHtmlBackground;
+            delete this._originalHtmlBackground;
+        }
         
         // Restore viewport settings
         if (this._originalViewport !== undefined) {
@@ -4522,8 +4525,16 @@ export class Player extends EventEmitter {
                 
                 if (isFullscreen) {
                     this.container.classList.add(`${this.options.classPrefix}-fullscreen`);
+                    // Add body class for CSS targeting (fallback for browsers without :has() support)
+                    document.body.classList.add('vidply-fullscreen-active');
+                    // Make background content inert to prevent keyboard focus escaping
+                    this._makeBackgroundInert();
                 } else {
                     this.container.classList.remove(`${this.options.classPrefix}-fullscreen`);
+                    // Remove body class for CSS targeting
+                    document.body.classList.remove('vidply-fullscreen-active');
+                    // Restore background interactivity
+                    this._restoreBackgroundInteractivity();
                     // Clean up pseudo-fullscreen state when exiting
                     this._disablePseudoFullscreen();
                 }

package/src/core/SignLanguageManager.js

@@ -459,8 +459,11 @@ export class SignLanguageManager {
     _setupInteraction() {
         const isMobile = window.innerWidth < 768;
         const isFullscreen = this.player.state.fullscreen;
-        
-        if (isMobile && !isFullscreen) {
+
+        // Historically, drag/resize was disabled on mobile unless fullscreen to avoid scroll conflicts.
+        // Now that we support touch/pointer dragging with proper `touch-action` handling, enable it
+        // by default on iOS/Android as well. Allow opting out via option.
+        if (isMobile && !isFullscreen && this.player?.options?.signLanguageDragOnMobile === false) {
             if (this.draggable) {
                 this.draggable.destroy();
                 this.draggable = null;
@@ -473,7 +476,9 @@ export class SignLanguageManager {
         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,
@@ -761,9 +766,18 @@ export class SignLanguageManager {
             hasTextClass: true,
             onClick: () => {
                 this.toggleKeyboardDragMode();
-                this.hideSettingsMenu();
+                // Keep focus off the settings button so arrow keys go to the draggable overlay.
+                this.hideSettingsMenu({ focusButton: false });
+                // If we just enabled keyboard drag mode, focus the overlay.
+                if (this.draggable?.keyboardDragMode) {
+                    setTimeout(() => {
+                        this.wrapper?.focus?.({ preventScroll: true });
+                    }, 20);
+                }
             }
         });
+        // Allow CSS to hide this option on touch/mobile where dragging is always enabled
+        dragOption.setAttribute('data-setting', 'keyboard-drag');
         dragOption.setAttribute('role', 'switch');
         dragOption.setAttribute('aria-checked', 'false');
         this._removeTooltipFromMenuItem(dragOption);

package/src/index.js

@@ -57,7 +57,9 @@ function parseDataAttributes(dataset) {
     'keyboard': 'keyboard',
     'responsive': 'responsive',
     'pipButton': 'pipButton',
-    'fullscreenButton': 'fullscreenButton'
+    'fullscreenButton': 'fullscreenButton',
+
+    // Layout
   };
   
   // Parse each data attribute

package/src/renderers/SoundCloudRenderer.js

@@ -125,10 +125,8 @@ export class SoundCloudRenderer {
     // Use different aspect ratio for playlists vs single tracks
     // Playlists need more height to show the track list
     if (this.isPlaylist()) {
-      this.iframe.style.aspectRatio = '16 / 9'; // More height for playlist
       this.iframe.classList.add('vidply-soundcloud-iframe', 'vidply-soundcloud-playlist');
     } else {
-      this.iframe.style.aspectRatio = '16 / 3'; // Banner-like for single track
       this.iframe.classList.add('vidply-soundcloud-iframe');
     }
     this.iframe.style.maxHeight = '100%';

package/src/renderers/VimeoRenderer.js

@@ -70,7 +70,6 @@ export class VimeoRenderer {
     this.iframe = document.createElement('div');
     this.iframe.id = `vimeo-player-${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);

package/src/renderers/YouTubeRenderer.js

@@ -86,7 +86,6 @@ export class YouTubeRenderer {
     this.iframe = document.createElement('div');
     this.iframe.id = `youtube-player-${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);