unified-video-framework 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unified-video-framework",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more",
   "main": "packages/core/dist/index.js",
   "types": "packages/core/dist/index.d.ts",

package/packages/web/dist/WebPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/WebPlayer.js

@@ -632,6 +632,10 @@ class WebPlayer extends core_1.BasePlayer {
         --uvf-icon-color: #ffffff;
         --uvf-text-primary: #ffffff;
         --uvf-text-secondary: rgba(255,255,255,0.75);
+        /* Overlay variables (can be overridden by theme) */
+        --uvf-overlay-strong: rgba(0,0,0,0.95);
+        --uvf-overlay-medium: rgba(0,0,0,0.7);
+        --uvf-overlay-transparent: rgba(0,0,0,0);
         /* Scrollbar design variables */
         --uvf-scrollbar-width: 8px;
         --uvf-scrollbar-thumb-start: rgba(255,0,0,0.35);
@@ -733,14 +737,14 @@ class WebPlayer extends core_1.BasePlayer {
       .uvf-top-gradient {
         top: 0;
         height: 120px;
-        background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
+        background: linear-gradient(to bottom, var(--uvf-overlay-medium), var(--uvf-overlay-transparent));
         z-index: 6;
       }
       
       .uvf-controls-gradient {
         bottom: 0;
         height: 150px;
-        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+        background: linear-gradient(to top, var(--uvf-overlay-strong), var(--uvf-overlay-transparent));
         z-index: 9;
       }
       
@@ -1490,30 +1494,74 @@ class WebPlayer extends core_1.BasePlayer {
         
         .uvf-controls-bar {
           padding: 12px 8px;
+          background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 70%, var(--uvf-overlay-transparent) 100%);
         }
         
         .uvf-controls-row {
-          gap: 6px;
+          gap: 8px;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: space-between;
         }
         
+        /* Mobile control sizing - 70% of desktop size */
         .uvf-control-btn {
-          width: 34px;
-          height: 34px;
-          min-width: 34px;
-          min-height: 34px;
+          width: 28px;  /* 70% of 40px */
+          height: 28px;
+          min-width: 28px;
+          min-height: 28px;
         }
         
         .uvf-control-btn.play-pause {
-          width: 42px;
-          height: 42px;
-          min-width: 42px;
-          min-height: 42px;
+          width: 35px;  /* 70% of 50px */
+          height: 35px;
+          min-width: 35px;
+          min-height: 35px;
+        }
+        
+        .uvf-control-btn svg {
+          width: 14px;  /* 70% of 20px */
+          height: 14px;
+        }
+        
+        .uvf-control-btn.play-pause svg {
+          width: 17px;  /* 70% of 24px */
+          height: 17px;
+        }
+        
+        /* Skip buttons */
+        #uvf-skip-back svg,
+        #uvf-skip-forward svg {
+          width: 15px;  /* 70% of 22px */
+          height: 15px;
         }
         
         .uvf-time-display {
-          font-size: 11px;
-          min-width: 70px;
-          padding: 0 4px;
+          font-size: 10px;  /* 70% of 14px */
+          min-width: 84px;   /* 70% of 120px */
+          padding: 0 7px;    /* 70% of 10px */
+          order: 4;
+        }
+        
+        /* Volume control mobile adjustments */
+        .uvf-volume-control {
+          order: 3;
+        }
+        
+        .uvf-volume-panel {
+          left: -60px;
+          width: 140px;
+        }
+        
+        .uvf-volume-slider {
+          width: 80px;  /* Reduced from 120px for mobile */
+        }
+        
+        /* Right controls mobile layout */
+        .uvf-right-controls {
+          order: 5;
+          gap: 6px;
+          margin-left: 4px;
         }
         
         .uvf-top-controls {
@@ -1523,10 +1571,15 @@ class WebPlayer extends core_1.BasePlayer {
         }
         
         .uvf-top-btn {
-          width: 34px;
-          height: 34px;
-          min-width: 34px;
-          min-height: 34px;
+          width: 28px;  /* 70% of 40px */
+          height: 28px;
+          min-width: 28px;
+          min-height: 28px;
+        }
+        
+        .uvf-top-btn svg {
+          width: 14px;  /* 70% of 20px */
+          height: 14px;
         }
         
         .uvf-title-bar {
@@ -1534,38 +1587,59 @@ class WebPlayer extends core_1.BasePlayer {
         }
         
         .uvf-video-title {
-          font-size: 15px;
+          font-size: 13px;  /* 70% of 18px */
         }
         
         .uvf-video-subtitle {
-          font-size: 11px;
+          font-size: 9px;   /* 70% of 13px */
         }
         
         .uvf-center-play-btn {
-          width: 56px;
+          width: 56px;  /* 70% of 80px */
           height: 56px;
         }
         
         .uvf-center-play-btn svg {
-          width: 26px;
-          height: 26px;
+          width: 25px;  /* 70% of 35px */
+          height: 25px;
         }
         
         .uvf-progress-bar-wrapper {
-          height: 8px;
-          margin-bottom: 10px;
+          height: 6px;  /* Slightly reduced for mobile */
+          margin-bottom: 8px;
         }
         
         .uvf-progress-handle {
-          width: 16px;
-          height: 16px;
+          width: 14px;  /* Slightly larger for touch */
+          height: 14px;
         }
         
         .uvf-settings-menu {
-          min-width: 150px;
-          bottom: 35px;
-          right: 5px;
+          min-width: 140px;
+          bottom: 30px;
+          right: 8px;
+          font-size: 12px;
+        }
+        
+        .uvf-settings-option {
+          padding: 6px 12px;
+          font-size: 12px;
+        }
+        
+        .uvf-quality-badge {
+          font-size: 9px;  /* 70% of 11px, but more readable at 9px */
+          padding: 2px 4px;
+        }
+        
+        /* Ensure all controls remain visible and functional */
+        .uvf-controls-row > * {
+          flex-shrink: 0;
         }
+        
+        /* Mobile-specific control group ordering for better layout */
+        .uvf-control-btn:nth-child(1) { order: 1; } /* play-pause */
+        .uvf-control-btn:nth-child(2) { order: 2; } /* skip-back */
+        .uvf-control-btn:nth-child(3) { order: 3; } /* skip-forward */
       }
       
       /* Mobile devices (landscape) */
@@ -1602,13 +1676,38 @@ class WebPlayer extends core_1.BasePlayer {
         }
         
         .uvf-control-btn {
-          width: 32px;
-          height: 32px;
+          width: 28px;  /* 70% sizing for landscape mobile */
+          height: 28px;
+        }
+        
+        .uvf-control-btn svg {
+          width: 14px;
+          height: 14px;
         }
         
         .uvf-control-btn.play-pause {
-          width: 40px;
-          height: 40px;
+          width: 35px;  /* 70% of 50px */
+          height: 35px;
+        }
+        
+        .uvf-control-btn.play-pause svg {
+          width: 17px;
+          height: 17px;
+        }
+        
+        .uvf-top-btn {
+          width: 28px;
+          height: 28px;
+        }
+        
+        .uvf-top-btn svg {
+          width: 14px;
+          height: 14px;
+        }
+        
+        .uvf-time-display {
+          font-size: 10px;
+          min-width: 80px;
         }
       }
       
@@ -1619,13 +1718,33 @@ class WebPlayer extends core_1.BasePlayer {
         }
         
         .uvf-control-btn {
-          width: 42px;
-          height: 42px;
+          width: 36px;  /* 90% of desktop size for tablets */
+          height: 36px;
+        }
+        
+        .uvf-control-btn svg {
+          width: 18px;
+          height: 18px;
         }
         
         .uvf-control-btn.play-pause {
-          width: 48px;
-          height: 48px;
+          width: 45px;  /* 90% of 50px */
+          height: 45px;
+        }
+        
+        .uvf-control-btn.play-pause svg {
+          width: 22px;  /* 90% of 24px */
+          height: 22px;
+        }
+        
+        .uvf-top-btn {
+          width: 36px;
+          height: 36px;
+        }
+        
+        .uvf-top-btn svg {
+          width: 18px;
+          height: 18px;
         }
         
         .uvf-top-controls {
@@ -1637,9 +1756,27 @@ class WebPlayer extends core_1.BasePlayer {
           padding: 15px;
         }
         
+        .uvf-video-title {
+          font-size: 16px;  /* 90% of 18px */
+        }
+        
+        .uvf-video-subtitle {
+          font-size: 12px;  /* 90% of 13px */
+        }
+        
+        .uvf-time-display {
+          font-size: 13px;  /* 90% of 14px */
+          min-width: 108px;  /* 90% of 120px */
+        }
+        
         .uvf-center-play-btn {
-          width: 70px;
-          height: 70px;
+          width: 72px;  /* 90% of 80px */
+          height: 72px;
+        }
+        
+        .uvf-center-play-btn svg {
+          width: 32px;  /* 90% of 35px */
+          height: 32px;
         }
       }
       
@@ -1650,6 +1787,13 @@ class WebPlayer extends core_1.BasePlayer {
         }
       }
       
+      /* Define overlay variables late to allow theme overrides elsewhere if needed */
+      .uvf-player-wrapper {
+        --uvf-overlay-strong: var(--uvf-overlay-strong, rgba(0,0,0,0.95));
+        --uvf-overlay-medium: var(--uvf-overlay-medium, rgba(0,0,0,0.7));
+        --uvf-overlay-transparent: var(--uvf-overlay-transparent, rgba(0,0,0,0));
+      }
+      
       /* Touch device optimizations */
       @media (hover: none) and (pointer: coarse) {
         .uvf-control-btn {
@@ -1791,11 +1935,6 @@ class WebPlayer extends core_1.BasePlayer {
         </svg>
         <span>Stop Casting</span>
       </button>
-      <div class="uvf-top-btn" id="uvf-playlist-btn" title="Add to Playlist">
-        <svg viewBox="0 0 24 24">
-          <path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/>
-        </svg>
-      </div>
       <div class="uvf-top-btn" id="uvf-share-btn" title="Share">
         <svg viewBox="0 0 24 24">
           <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
@@ -2188,11 +2327,9 @@ class WebPlayer extends core_1.BasePlayer {
         pipBtn?.addEventListener('click', () => this.togglePiP());
         const castBtn = document.getElementById('uvf-cast-btn');
         const stopCastBtn = document.getElementById('uvf-stop-cast-btn');
-        const playlistBtn = document.getElementById('uvf-playlist-btn');
         const shareBtn = document.getElementById('uvf-share-btn');
         castBtn?.addEventListener('click', () => this.onCastButtonClick());
         stopCastBtn?.addEventListener('click', () => this.stopCasting());
-        playlistBtn?.addEventListener('click', () => this.showNotification('Added to playlist'));
         shareBtn?.addEventListener('click', () => this.shareVideo());
         document.addEventListener('click', (e) => {
             if (!e.target.closest('#uvf-settings-btn') &&
@@ -2699,6 +2836,9 @@ class WebPlayer extends core_1.BasePlayer {
             let iconColor = null;
             let textPrimary = null;
             let textSecondary = null;
+            let overlayStrong = null;
+            let overlayMedium = null;
+            let overlayTransparent = null;
             if (typeof theme === 'string') {
                 accent1 = theme;
             }
@@ -2708,6 +2848,9 @@ class WebPlayer extends core_1.BasePlayer {
                 iconColor = theme.iconColor || null;
                 textPrimary = theme.textPrimary || null;
                 textSecondary = theme.textSecondary || null;
+                overlayStrong = theme.overlayStrong || null;
+                overlayMedium = theme.overlayMedium || null;
+                overlayTransparent = theme.overlayTransparent || null;
             }
             if (accent1)
                 wrapper.style.setProperty('--uvf-accent-1', accent1);
@@ -2734,6 +2877,12 @@ class WebPlayer extends core_1.BasePlayer {
                 wrapper.style.setProperty('--uvf-text-primary', textPrimary);
             if (textSecondary)
                 wrapper.style.setProperty('--uvf-text-secondary', textSecondary);
+            if (overlayStrong)
+                wrapper.style.setProperty('--uvf-overlay-strong', overlayStrong);
+            if (overlayMedium)
+                wrapper.style.setProperty('--uvf-overlay-medium', overlayMedium);
+            if (overlayTransparent)
+                wrapper.style.setProperty('--uvf-overlay-transparent', overlayTransparent);
         }
         catch (_) {
         }