vidply 1.0.34 → 1.0.35

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();

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);