unified-video-framework 1.4.192 → 1.4.194

package/packages/web/src/WebPlayer.ts

@@ -3679,6 +3679,15 @@ export class WebPlayer extends BasePlayer {
         flex: 0 1 auto;
         max-width: 60%;
       }
+
+      /* Top Controls - Right side of top bar */
+      .uvf-top-controls {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 12px;
+        flex-shrink: 0;
+      }
       
       .uvf-title-content {
         display: flex;
@@ -3820,15 +3829,6 @@ export class WebPlayer extends BasePlayer {
           height: 16px;
         }
       }
-      
-      /* Top Controls - Right side of top bar */
-      .uvf-top-controls {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 12px;
-        flex-shrink: 0;
-      }
 
       .uvf-top-btn {
         width: 40px;
@@ -4205,550 +4205,6 @@ export class WebPlayer extends BasePlayer {
       }
       
       
-      /* Enhanced Responsive Media Queries with UX Best Practices */
-      /* Mobile devices (portrait) - Material You Design (25-50-25 Layout) */
-      @media screen and (max-width: 767px) and (orientation: portrait) {
-        .uvf-responsive-container {
-          padding: 0;
-          width: 100vw !important;
-          height: 100vh;
-          height: 100dvh;
-          margin: 0;
-          position: fixed;
-          top: 0;
-          left: 0;
-          overflow: hidden;
-        }
-        
-        .uvf-responsive-container .uvf-player-wrapper {
-          width: 100vw !important;
-          height: 100vh;
-          height: 100dvh;
-          position: fixed;
-          top: 0;
-          left: 0;
-          display: flex;
-          flex-direction: column;
-          background: #000;
-          overflow: hidden;
-        }
-        
-        /* Video container occupies middle 50% with all UI elements */
-        .uvf-responsive-container .uvf-video-container {
-          height: 50vh;
-          height: 50dvh;
-          width: 100vw;
-          position: absolute;
-          top: 25vh;
-          top: 25dvh;
-          left: 0;
-          aspect-ratio: unset !important;
-          background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
-          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
-                      0 4px 16px rgba(0, 0, 0, 0.3),
-                      0 2px 8px rgba(0, 0, 0, 0.2);
-        }
-        
-        .uvf-video {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-        
-        /* Top black section (25%) - Tap zone */
-        .uvf-player-wrapper::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100vw;
-          height: 25vh;
-          height: 25dvh;
-          background: #000;
-          z-index: 1;
-          pointer-events: all;
-          touch-action: manipulation;
-        }
-        
-        /* Bottom black section (25%) - Controls area */
-        .uvf-player-wrapper::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100vw;
-          height: 25vh;
-          height: 25dvh;
-          background: linear-gradient(to top, 
-            #000 0%, 
-            rgba(0, 0, 0, 0.98) 20%,
-            rgba(0, 0, 0, 0.95) 100%);
-          z-index: 1;
-          pointer-events: none;
-        }
-        
-        /* Material surface container for controls - positioned in middle 50% area */
-        .uvf-responsive-container .uvf-video-container .uvf-controls-bar {
-          position: absolute;
-          bottom: 12px;
-          padding: 0px 10px;
-          background: transparent;
-          z-index: 10;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-end;
-          pointer-events: auto !important; /* Allow clicking on controls */
-        }
-
-        .uvf-responsive-container .uvf-video-container .uvf-controls-bar::before {
-          content: '';
-          position: absolute;
-          inset: 0; /* stretch to cover the controls-bar */
-          backdrop-filter: blur(24px);
-          -webkit-backdrop-filter: blur(24px);
-          pointer-events: auto !important; /* Allow clicking on controls */
-
-          /* Gradient mask */
-          -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
-          mask-image: linear-gradient(to top, black 50%, transparent 100%);
-          -webkit-mask-size: 100% 100%;
-          mask-size: 100% 100%;
-          -webkit-mask-repeat: no-repeat;
-          mask-repeat: no-repeat;
-
-          z-index: -1; /* sit behind the content of the controls bar */
-        }
-        
-        /* Make sure child elements are also clickable */
-        .uvf-controls-bar > * {
-          pointer-events: auto !important;
-        }
-
-        
-        /* Material surface tint overlay */
-        .uvf-controls-bar::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background: var(--uvf-surface-tint, rgba(0, 0, 0, 0.08));
-          pointer-events: none;
-          z-index: -1;
-        }
-        
-        /* Progress bar with chapter markers */
-        .uvf-progress-section {
-          margin-bottom: 12px;
-          position: relative;
-        }
-        
-        .uvf-progress-bar-wrapper {
-          padding: 12px 0;
-          position: relative;
-        }
-        
-        .uvf-progress-bar {
-          height: 4px;
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 4px;
-          position: relative;
-          overflow: visible;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-        }
-        
-        .uvf-progress-filled {
-          background: var(--uvf-accent-1, #ff0000);
-          box-shadow: 0 0 8px var(--uvf-accent-1, #ff0000);
-        }
-        
-        .uvf-progress-handle {
-          width: 20px;
-          height: 20px;
-          background: var(--uvf-accent-1, #ff0000);
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
-                      0 0 0 0 var(--uvf-accent-1, #ff0000);
-          transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        
-        .uvf-progress-handle:active {
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
-                      0 0 0 12px rgba(255, 0, 0, 0.15);
-          transform: translate(-50%, -50%) scale(1.2);
-        }
-        
-        /* Material Design control buttons */
-        .uvf-control-btn {
-          width: 48px;
-          height: 48px;
-          min-width: 48px;
-          min-height: 48px;
-          background: rgba(255, 255, 255, 0.12);
-          border-radius: 24px;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
-                      0 1px 2px rgba(0, 0, 0, 0.24);
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-          position: relative;
-          overflow: hidden;
-        }
-        
-        /* Material ripple effect */
-        .uvf-control-btn::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background: rgba(255, 255, 255, 0.1);
-          border-radius: inherit;
-          opacity: 0;
-          transition: opacity 0.2s ease;
-        }
-        
-        .uvf-control-btn:active::before {
-          opacity: 1;
-        }
-        
-        .uvf-control-btn:active {
-          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
-                      0 3px 6px rgba(0, 0, 0, 0.23);
-          transform: scale(0.95);
-        }
-        
-        .uvf-control-btn.play-pause {
-          width: 56px;
-          height: 56px;
-          min-width: 56px;
-          min-height: 56px;
-          border-radius: 28px;
-          background: linear-gradient(135deg, 
-            var(--uvf-accent-1, #ff0000), 
-            var(--uvf-accent-2, #ff4d4f));
-          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
-                      0 2px 4px rgba(0, 0, 0, 0.15),
-                      0 0 0 0 var(--uvf-accent-1, #ff0000);
-        }
-        
-        .uvf-control-btn.play-pause:active {
-          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
-                      0 4px 8px rgba(0, 0, 0, 0.20),
-                      0 0 0 8px rgba(255, 0, 0, 0.12);
-        }
-        
-        .uvf-control-btn svg {
-          width: 20px;
-          height: 20px;
-        }
-        
-        .uvf-control-btn.play-pause svg {
-          width: 24px;
-          height: 24px;
-        }
-        
-        /* Controls row with Material spacing */
-        .uvf-controls-row {
-          gap: 16px;
-          padding: 0;
-          align-items: center;
-        }
-        
-        /* Time display positioned bottom-left above seekbar */
-        .uvf-time-display {
-          background: rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(8px);
-          border-radius: 16px;
-          padding: 6px 12px;
-          font-size: 13px;
-          font-weight: 500;
-          font-feature-settings: 'tnum';
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-        }
-        
-        /* Framework branding positioned bottom-right above seekbar */
-        .uvf-video-container .uvf-framework-branding {
-          position: absolute !important;
-          bottom: 80px !important;
-          right: 16px !important;
-          z-index: 10 !important;
-          opacity: 0.8 !important;
-        }
-        
-        /* Adjust above-seekbar section to align time and branding */
-        .uvf-above-seekbar-section {
-          display: flex !important;
-          justify-content: space-between !important;
-          align-items: center !important;
-          width: 100% !important;
-          margin-bottom: 8px !important;
-        }
-        
-        /* Hide desktop volume control and skip buttons */
-        .uvf-volume-control,
-        #uvf-skip-back,
-        #uvf-skip-forward {
-          display: none !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: 16px !important;
-          padding: 0 !important;
-          z-index: 10 !important;
-          opacity: 0 !important;
-          transform: translateY(-10px) !important;
-          transition: opacity 0.3s ease, transform 0.3s ease !important;
-          display: flex !important;
-          justify-content: space-between !important;
-          align-items: flex-start !important;
-          gap: 12px !important;
-        }
-        
-        /* 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 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;
-          align-items: flex-start !important;
-          gap: 12px !important;
-          width: 100% !important;
-        }
-        
-        /* Video thumbnail/logo */
-        .uvf-title-bar .uvf-video-thumb {
-          width: 48px !important;
-          height: 48px !important;
-          border-radius: 12px !important;
-          object-fit: cover !important;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
-          flex-shrink: 0 !important;
-        }
-        
-        /* Title and subtitle text */
-        .uvf-title-bar .uvf-title-text {
-          flex: 1 !important;
-          min-width: 0 !important;
-        }
-        
-        .uvf-title-bar .uvf-video-title {
-          display: block !important;
-          font-size: 16px !important;
-          font-weight: 600 !important;
-          color: #fff !important;
-          margin-bottom: 4px !important;
-          line-height: 1.3 !important;
-          overflow: hidden !important;
-          text-overflow: ellipsis !important;
-          display: -webkit-box !important;
-          -webkit-line-clamp: 2 !important;
-          -webkit-box-orient: vertical !important;
-          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
-        }
-        
-        .uvf-title-bar .uvf-video-subtitle {
-          display: block !important;
-          font-size: 13px !important;
-          font-weight: 400 !important;
-          color: rgba(255, 255, 255, 0.8) !important;
-          line-height: 1.3 !important;
-          overflow: hidden !important;
-          text-overflow: ellipsis !important;
-          display: -webkit-box !important;
-          -webkit-line-clamp: 1 !important;
-          -webkit-box-orient: vertical !important;
-          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
-        }
-        
-        /* 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;
-          gap: 12px !important;
-          align-items: flex-start !important;
-          justify-content: flex-end !important;
-          flex-direction: row !important;
-          position: relative !important;
-        }
-        
-        /* Keep top bar visible when casting */
-        .uvf-player-wrapper.uvf-casting .uvf-top-bar {
-          opacity: 1 !important;
-          transform: translateY(0) !important;
-        }
-        
-        /* Material You top buttons (cast & share) */
-        .uvf-top-controls .uvf-top-btn {
-          width: 48px !important;
-          height: 48px !important;
-          min-width: 48px !important;
-          min-height: 48px !important;
-          background: rgba(0, 0, 0, 0.5) !important;
-          backdrop-filter: blur(16px) !important;
-          -webkit-backdrop-filter: blur(16px) !important;
-          border: 1px solid rgba(255, 255, 255, 0.15) !important;
-          border-radius: 24px !important;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
-                      0 1px 3px rgba(0, 0, 0, 0.2) !important;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        }
-        
-        .uvf-top-controls .uvf-top-btn:active {
-          transform: scale(0.95) !important;
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
-                      0 2px 6px rgba(0, 0, 0, 0.3) !important;
-          background: rgba(0, 0, 0, 0.7) !important;
-        }
-        
-        .uvf-top-controls .uvf-top-btn svg {
-          width: 22px !important;
-          height: 22px !important;
-          fill: #fff !important;
-          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
-        }
-        
-        /* Stop cast button styling */
-        .uvf-top-controls .uvf-pill-btn {
-          height: 48px !important;
-          padding: 0 16px !important;
-          border-radius: 24px !important;
-          background: rgba(255, 77, 79, 0.95) !important;
-          backdrop-filter: blur(16px) !important;
-          border: 1px solid rgba(255, 77, 79, 0.3) !important;
-          box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4),
-                      0 1px 3px rgba(0, 0, 0, 0.3) !important;
-        }
-        
-        .uvf-top-controls .uvf-pill-btn svg {
-          width: 20px !important;
-          height: 20px !important;
-        }
-        
-        .uvf-top-controls .uvf-pill-btn span {
-          font-size: 14px !important;
-          font-weight: 500 !important;
-          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
-        }
-        
-        /* Optimize settings button for Material You */
-        #uvf-settings-btn {
-          width: 48px !important;
-          height: 48px !important;
-          min-width: 48px !important;
-          min-height: 48px !important;
-          border-radius: 24px !important;
-        }
-        
-        /* Fullscreen on mobile portrait - maintain Material You layout */
-        .uvf-player-wrapper.uvf-fullscreen,
-        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen {
-          position: fixed !important;
-          top: 0 !important;
-          left: 0 !important;
-          width: 100vw !important;
-          height: 100vh !important;
-          height: 100dvh !important;
-          z-index: 2147483647 !important;
-          display: flex !important;
-          flex-direction: column !important;
-          background: #000 !important;
-        }
-        
-        /* Video container in fullscreen - keep 50% middle */
-        .uvf-player-wrapper.uvf-fullscreen .uvf-video-container,
-        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
-          height: 50vh !important;
-          height: 50dvh !important;
-          width: 100vw !important;
-          margin-top: 25vh !important;
-          margin-top: 25dvh !important;
-          position: relative !important;
-        }
-        
-        /* Top and bottom black sections in fullscreen */
-        .uvf-player-wrapper.uvf-fullscreen::before {
-          height: 25vh !important;
-          height: 25dvh !important;
-        }
-        
-        .uvf-player-wrapper.uvf-fullscreen::after {
-          height: 25vh !important;
-          height: 25dvh !important;
-        }
-        
-        /* Controls stay in bottom 25% in fullscreen */
-        .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
-        .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
-          position: absolute !important;
-          bottom: 0 !important;
-          max-height: 25vh !important;
-          max-height: 25dvh !important;
-          padding: 16px 20px !important;
-          padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px)) !important;
-        }
-      }
-        }
-        
-        #uvf-settings-btn svg {
-          width: 20px !important;
-          height: 20px !important;
-          fill: var(--uvf-icon-color) !important;
-        }
-        
-        /* Hide skip buttons on small mobile devices to save space */
-        @media screen and (max-width: 480px) {
-          #uvf-skip-back,
-          #uvf-skip-forward {
-            display: none;
-          }
-        }
-        
-        /* Ensure all controls remain visible and functional */
-        .uvf-controls-row > * {
-          flex-shrink: 0;
-        }
-        
-        /* Loading spinner optimization for mobile */
-        .uvf-loading-spinner {
-          width: 48px;
-          height: 48px;
-          border-width: 4px;
-        }
-        
-        /* Mobile shortcut indicators */
-        .uvf-shortcut-indicator {
-          font-size: 20px;
-          padding: 16px 24px;
-          border-radius: 12px;
-          max-width: 280px;
-        }
-      }
-      
       /* Mobile devices (landscape) - Optimized for fullscreen viewing with safe areas */
       @media screen and (max-width: 767px) and (orientation: landscape) {
         .uvf-responsive-container {