vidply 1.0.33 → 1.0.35

package/src/features/PlaylistManager.js

@@ -972,25 +972,9 @@ export class PlaylistManager {
       return;
     }
     
-    // Create track artwork element (shows album art/poster for audio playlists)
-    // Only create for audio players
-    if (this.player.element.tagName === 'AUDIO') {
-      this.trackArtworkElement = DOMUtils.createElement('div', {
-        className: 'vidply-track-artwork',
-        attributes: {
-          'aria-hidden': 'true'
-        }
-      });
-      this.trackArtworkElement.style.display = 'none';
-      
-      // Insert before video wrapper
-      const videoWrapper = this.container.querySelector('.vidply-video-wrapper');
-      if (videoWrapper) {
-        this.container.insertBefore(this.trackArtworkElement, videoWrapper);
-      } else {
-        this.container.appendChild(this.trackArtworkElement);
-      }
-    }
+    // Track artwork element (shows album art/poster for audio tracks).
+    // Important: in mixed playlists the player may start as <video> and later recreate to <audio>,
+    // so we create this lazily in `updateTrackArtwork()` when we actually have an audio element.
     
     // Create track info element (shows current track)
     this.trackInfoElement = DOMUtils.createElement('div', {
@@ -1089,6 +1073,34 @@ export class PlaylistManager {
    * Update track artwork display (for audio playlists)
    */
   updateTrackArtwork(track) {
+    // Only show artwork for audio players.
+    // In mixed playlists we may recreate from <video> -> <audio> later, so ensure the element exists lazily.
+    if (this.player?.element?.tagName !== 'AUDIO') {
+      if (this.trackArtworkElement) {
+        this.trackArtworkElement.style.display = 'none';
+      }
+      return;
+    }
+
+    // Lazily create artwork element once we have an audio element/container.
+    if (!this.trackArtworkElement && this.container) {
+      this.trackArtworkElement = DOMUtils.createElement('div', {
+        className: 'vidply-track-artwork',
+        attributes: {
+          'aria-hidden': 'true'
+        }
+      });
+      this.trackArtworkElement.style.display = 'none';
+
+      // Insert before video wrapper (if present) for consistent layout.
+      const videoWrapper = this.container.querySelector('.vidply-video-wrapper');
+      if (videoWrapper) {
+        this.container.insertBefore(this.trackArtworkElement, videoWrapper);
+      } else {
+        this.container.appendChild(this.trackArtworkElement);
+      }
+    }
+
     if (!this.trackArtworkElement) return;
     
     // If track has a poster/artwork, show it

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