vidply 1.0.20 → 1.0.21

package/src/renderers/HLSRenderer.js

@@ -22,6 +22,16 @@ export class HLSRenderer {
   }
 
   canPlayNatively() {
+    // Only use native HLS on Safari/iOS where it actually works properly
+    // Chrome reports it can play HLS but doesn't have proper quality switching
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    
+    if (!isSafari && !isIOS) {
+      // Force hls.js on non-Safari browsers for proper quality switching
+      return false;
+    }
+    
     const video = document.createElement('video');
     return video.canPlayType('application/vnd.apple.mpegurl') !== '';
   }
@@ -244,8 +254,15 @@ export class HLSRenderer {
   }
 
   play() {
+    // Save scroll position to prevent browser from scrolling to video
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    
     const promise = this.media.play();
     
+    // Restore scroll position immediately to prevent auto-scroll
+    window.scrollTo(scrollX, scrollY);
+    
     if (promise !== undefined) {
       promise.catch(error => {
         this.player.log('Play failed:', error, 'warn');

package/src/renderers/HTML5Renderer.js

@@ -142,8 +142,15 @@ export class HTML5Renderer {
   }
 
   play() {
+    // Save scroll position to prevent browser from scrolling to video
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    
     const promise = this.media.play();
     
+    // Restore scroll position immediately to prevent auto-scroll
+    window.scrollTo(scrollX, scrollY);
+    
     if (promise !== undefined) {
       promise.catch(error => {
         this.player.log('Play failed:', error, 'warn');
@@ -152,7 +159,13 @@ export class HTML5Renderer {
         if (this.player.options.autoplay && !this.player.state.muted) {
           this.player.log('Retrying play with muted audio', 'info');
           this.media.muted = true;
-          this.media.play().catch(err => {
+          
+          // Save scroll position again for retry
+          const retryScrollX = window.scrollX;
+          const retryScrollY = window.scrollY;
+          this.media.play().then(() => {
+            window.scrollTo(retryScrollX, retryScrollY);
+          }).catch(err => {
             this.player.handleError(err);
           });
         }

package/src/renderers/VimeoRenderer.js

@@ -188,9 +188,16 @@ export class VimeoRenderer {
 
   play() {
     if (this.isReady && this.vimeo) {
+      // Save scroll position to prevent browser from scrolling to video
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+      
       this.vimeo.play().catch(error => {
         this.player.log('Play error:', error, 'warn');
       });
+      
+      // Restore scroll position immediately to prevent auto-scroll
+      window.scrollTo(scrollX, scrollY);
     }
   }
 

package/src/renderers/YouTubeRenderer.js

@@ -211,7 +211,14 @@ export class YouTubeRenderer {
 
   play() {
     if (this.isReady && this.youtube) {
+      // Save scroll position to prevent browser from scrolling to video
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+      
       this.youtube.playVideo();
+      
+      // Restore scroll position immediately to prevent auto-scroll
+      window.scrollTo(scrollX, scrollY);
     }
   }
 

package/src/styles/vidply.css

@@ -2111,6 +2111,33 @@
    ============================================================================ */
 
 /* Track Info Display (below video, above playlist) */
+/* Track Artwork - Displays album art/poster above audio player */
+.vidply-track-artwork {
+    aspect-ratio: 16 / 3;
+    background-color: var(--vidply-black);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-bottom: 1px solid var(--vidply-border-light);
+    order: 1; /* Before video-wrapper */
+    overflow: hidden;
+    position: relative;
+    transition: background-image 0.3s ease-in-out;
+    width: 100%;
+}
+
+/* Optional: Add a subtle overlay for better text readability if needed */
+.vidply-track-artwork::after {
+    background: linear-gradient(180deg, transparent 0%, var(--vidply-black-30) 100%);
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
 .vidply-track-info {
     background: var(--vidply-bg-track-info);
     border-bottom: 1px solid var(--vidply-border-light);
@@ -3773,6 +3800,10 @@
         padding: 10px 12px;
     }
 
+    .vidply-track-artwork {
+        aspect-ratio: 16 / 3;
+    }
+    
     .vidply-track-info {
         padding: 12px 16px;
     }