unified-video-framework 1.4.189 → 1.4.190

package/packages/web/src/WebPlayer.ts

@@ -3651,25 +3651,35 @@ export class WebPlayer extends BasePlayer {
         margin-left: 10px;
       }
       
-      /* Title Bar */
-      .uvf-title-bar {
+      /* Top Bar Container - Contains Title (left) and Controls (right) */
+      .uvf-top-bar {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         padding: 20px;
         z-index: 7;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 20px;
         opacity: 0;
         transform: translateY(-10px);
         transition: all 0.3s ease;
       }
       
-      .uvf-player-wrapper:hover .uvf-title-bar,
-      .uvf-player-wrapper.controls-visible .uvf-title-bar {
+      .uvf-player-wrapper:hover .uvf-top-bar,
+      .uvf-player-wrapper.controls-visible .uvf-top-bar {
         opacity: 1;
         transform: translateY(0);
       }
       
+      /* Title Bar - Left side of top bar */
+      .uvf-title-bar {
+        flex: 0 1 auto;
+        max-width: 60%;
+      }
+      
       .uvf-title-content {
         display: flex;
         align-items: center;
@@ -3811,22 +3821,13 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
-      /* Top Controls - No position CSS, relies on HTML structure */
+      /* Top Controls - Right side of top bar */
       .uvf-top-controls {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         gap: 12px;
-        opacity: 0;
-        transform: translateY(-10px);
-        transition: all 0.3s ease;
-      }
-      
-      .uvf-player-wrapper:hover .uvf-top-controls,
-      .uvf-player-wrapper.controls-visible .uvf-top-controls,
-      .uvf-player-wrapper.uvf-casting .uvf-top-controls {
-        opacity: 1;
-        transform: translateY(0);
+        flex-shrink: 0;
       }
       
       .uvf-top-btn {
@@ -4053,9 +4054,8 @@ export class WebPlayer extends BasePlayer {
         100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
       }
       
-      /* Hide top elements with controls */
-      .uvf-player-wrapper.no-cursor .uvf-title-bar,
-      .uvf-player-wrapper.no-cursor .uvf-top-controls {
+      /* Hide top bar when no cursor */
+      .uvf-player-wrapper.no-cursor .uvf-top-bar {
         opacity: 0 !important;
         transform: translateY(-10px) !important;
         pointer-events: none;
@@ -4140,8 +4140,7 @@ export class WebPlayer extends BasePlayer {
         }
         
         /* Ensure overlays remain visible in fullscreen with consistent spacing */
-        .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
-        .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
+        .uvf-player-wrapper.uvf-fullscreen .uvf-top-bar,
         .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
         .uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
         .uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
@@ -4156,19 +4155,13 @@ export class WebPlayer extends BasePlayer {
           gap: 15px; /* Consistent gap in fullscreen */
         }
         
-        .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
+        .uvf-player-wrapper.uvf-fullscreen .uvf-top-bar {
           padding: 20px 30px;
         }
         
-        .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
-          gap: 10px;
-        }
-        
         /* Fullscreen hover and visibility states */
-        .uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
-        .uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
-        .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
-        .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
+        .uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-bar,
+        .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-bar {
           opacity: 1;
           transform: translateY(0);
         }
@@ -4492,42 +4485,53 @@ export class WebPlayer extends BasePlayer {
           display: none !important;
         }
         
-        /* Title bar positioned in top-left of middle 50% video area */
-        .uvf-video-container .uvf-title-bar,
-        .uvf-responsive-container .uvf-video-container .uvf-title-bar {
-          display: flex !important;
+        /* Top bar container - Mobile portrait uses separate positioning */
+        .uvf-video-container .uvf-top-bar,
+        .uvf-responsive-container .uvf-video-container .uvf-top-bar {
           position: absolute !important;
           top: 12px !important;
           left: 16px !important;
-          right: auto !important;
-          width: auto !important;
-          max-width: 50% !important;
-          height: auto !important;
+          right: 16px !important;
           padding: 0 !important;
-          background: transparent !important;
           z-index: 10 !important;
           opacity: 0 !important;
           transform: translateY(-10px) !important;
           transition: opacity 0.3s ease, transform 0.3s ease !important;
-          flex-direction: column !important;
-          justify-content: flex-start !important;
+          display: flex !important;
+          justify-content: space-between !important;
           align-items: flex-start !important;
+          gap: 12px !important;
         }
         
-        /* Show title bar when controls are visible or on hover */
-        .uvf-player-wrapper:hover .uvf-title-bar,
-        .uvf-player-wrapper.controls-visible .uvf-title-bar {
+        /* Show top bar when controls are visible or on hover */
+        .uvf-player-wrapper:hover .uvf-top-bar,
+        .uvf-player-wrapper.controls-visible .uvf-top-bar {
           opacity: 1 !important;
           transform: translateY(0) !important;
         }
         
-        /* Hide title bar when controls are hidden (no-cursor class) */
-        .uvf-player-wrapper.no-cursor .uvf-title-bar {
+        /* Hide top bar when controls are hidden (no-cursor class) */
+        .uvf-player-wrapper.no-cursor .uvf-top-bar {
           opacity: 0 !important;
           transform: translateY(-10px) !important;
           pointer-events: none !important;
         }
         
+        /* Title bar within top bar - mobile portrait */
+        .uvf-video-container .uvf-top-bar .uvf-title-bar,
+        .uvf-responsive-container .uvf-video-container .uvf-top-bar .uvf-title-bar {
+          display: flex !important;
+          width: auto !important;
+          max-width: 50% !important;
+          height: auto !important;
+          padding: 0 !important;
+          background: transparent !important;
+          flex-direction: column !important;
+          justify-content: flex-start !important;
+          align-items: flex-start !important;
+          position: relative !important;
+        }
+        
         /* Title content layout */
         .uvf-title-bar .uvf-title-content {
           display: flex !important;
@@ -4581,35 +4585,23 @@ export class WebPlayer extends BasePlayer {
           text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
         }
         
-        /* Top controls - No position CSS for mobile portrait */
-        .uvf-video-container .uvf-top-controls,
-        .uvf-responsive-container .uvf-video-container .uvf-top-controls {
+        /* Top controls within top bar - mobile portrait */
+        .uvf-video-container .uvf-top-bar .uvf-top-controls,
+        .uvf-responsive-container .uvf-video-container .uvf-top-bar .uvf-top-controls {
           display: flex !important;
-          opacity: 0 !important;
-          transform: translateY(-10px) !important;
-          transition: opacity 0.3s ease, transform 0.3s ease !important;
           gap: 12px !important;
           align-items: flex-start !important;
           justify-content: flex-end !important;
           flex-direction: row !important;
+          position: relative !important;
         }
         
-        /* Show top controls when controls are visible, on hover, or when casting */
-        .uvf-player-wrapper:hover .uvf-top-controls,
-        .uvf-player-wrapper.controls-visible .uvf-top-controls,
-        .uvf-player-wrapper.uvf-casting .uvf-top-controls {
+        /* Keep top bar visible when casting */
+        .uvf-player-wrapper.uvf-casting .uvf-top-bar {
           opacity: 1 !important;
           transform: translateY(0) !important;
         }
         
-        /* Hide top controls when controls are hidden (no-cursor class) */
-        /* Exception: Keep visible when casting */
-        .uvf-player-wrapper.no-cursor:not(.uvf-casting) .uvf-top-controls {
-          opacity: 0 !important;
-          transform: translateY(-10px) !important;
-          pointer-events: none !important;
-        }
-        
         /* Material You top buttons (cast & share) */
         .uvf-top-controls .uvf-top-btn {
           width: 48px !important;
@@ -4841,21 +4833,17 @@ export class WebPlayer extends BasePlayer {
           height: 22px;
         }
         
-        /* Compact top controls - No position CSS for landscape */
-        .uvf-top-controls,
-        .uvf-video-container .uvf-top-controls,
-        .uvf-responsive-container .uvf-video-container .uvf-top-controls {
-          justify-content: flex-end !important;
+        /* Top bar for landscape - compact padding */
+        .uvf-top-bar,
+        .uvf-video-container .uvf-top-bar,
+        .uvf-responsive-container .uvf-video-container .uvf-top-bar {
+          padding: 8px 12px !important;
+          padding-top: calc(8px + var(--uvf-safe-area-top)) !important;
+          padding-left: calc(12px + var(--uvf-safe-area-left)) !important;
+          padding-right: calc(12px + var(--uvf-safe-area-right)) !important;
           gap: 6px !important;
         }
         
-        .uvf-title-bar {
-          padding: 8px 12px;
-          padding-top: calc(8px + var(--uvf-safe-area-top));
-          padding-left: calc(12px + var(--uvf-safe-area-left));
-          padding-right: calc(12px + var(--uvf-safe-area-right));
-        }
-        
         .uvf-top-btn {
           width: 40px;
           height: 40px;
@@ -4868,8 +4856,9 @@ export class WebPlayer extends BasePlayer {
           height: 18px;
         }
         
-        .uvf-title-bar {
-          padding: 8px 12px;
+        /* Title bar within top bar - landscape */
+        .uvf-top-bar .uvf-title-bar {
+          padding: 0;
         }
         
         .uvf-video-title {
@@ -4901,12 +4890,11 @@ export class WebPlayer extends BasePlayer {
           height: 16px;
         }
         
-        /* Top-controls in fullscreen landscape - No position CSS */
-        .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
-        .uvf-player-wrapper.uvf-fullscreen .uvf-video-container .uvf-top-controls,
-        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
-        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-video-container .uvf-top-controls {
-          justify-content: flex-end !important;
+        /* Top bar in fullscreen landscape */
+        .uvf-player-wrapper.uvf-fullscreen .uvf-top-bar,
+        .uvf-player-wrapper.uvf-fullscreen .uvf-video-container .uvf-top-bar,
+        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-top-bar,
+        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-video-container .uvf-top-bar {
           display: flex !important;
         }
       }
@@ -4966,13 +4954,14 @@ export class WebPlayer extends BasePlayer {
           height: 19px;
         }
         
-        .uvf-top-controls {
-          justify-content: flex-end;
-          gap: 8px;
+        /* Top bar for tablet */
+        .uvf-top-bar {
+          padding: 16px;
+          gap: 12px;
         }
         
-        .uvf-title-bar {
-          padding: 16px;
+        .uvf-top-controls {
+          gap: 8px;
         }
         
         .uvf-video-title {
@@ -5124,18 +5113,14 @@ export class WebPlayer extends BasePlayer {
           height: 20px;
         }
         
-        .uvf-top-controls {
-          position: absolute;
-          top: 20px;
-          right: 20px;
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          z-index: 10;
+        /* Top bar for desktop 1024px+ */
+        .uvf-top-bar {
+          padding: 20px;
+          gap: 20px;
         }
         
-        .uvf-title-bar {
-          padding: 20px;
+        .uvf-top-controls {
+          gap: 12px;
         }
         
         .uvf-video-title {
@@ -5597,7 +5582,11 @@ export class WebPlayer extends BasePlayer {
     controlsGradient.className = 'uvf-controls-gradient';
     container.appendChild(controlsGradient);
     
-    // Add title bar
+    // Combined top bar: title on left, controls on right
+    const topBar = document.createElement('div');
+    topBar.className = 'uvf-top-bar';
+    
+    // Title bar (left side)
     const titleBar = document.createElement('div');
     titleBar.className = 'uvf-title-bar';
     titleBar.innerHTML = `
@@ -5609,9 +5598,9 @@ export class WebPlayer extends BasePlayer {
         </div>
       </div>
     `;
-    container.appendChild(titleBar);
+    topBar.appendChild(titleBar);
     
-    // Add top controls (Cast and Share buttons) - Always positioned at TOP-RIGHT using flexbox
+    // Top controls (right side - Cast and Share buttons)
     const topControls = document.createElement('div');
     topControls.className = 'uvf-top-controls';
     topControls.innerHTML = `
@@ -5632,7 +5621,9 @@ export class WebPlayer extends BasePlayer {
         </svg>
       </div>
     `;
-    container.appendChild(topControls);
+    topBar.appendChild(topControls);
+    
+    container.appendChild(topBar);
 
     // Add loading spinner
     const loadingContainer = document.createElement('div');