unified-video-framework 1.4.208 → 1.4.210

package/packages/web/src/WebPlayer.ts

@@ -1142,7 +1142,7 @@ export class WebPlayer extends BasePlayer {
   private setupClickToUnmute(): void {
     // Remove any existing listener first
     if (this.clickToUnmuteHandler) {
-      this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler);
+      this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler, true);
     }
     
     this.clickToUnmuteHandler = (e: MouseEvent) => {
@@ -1159,6 +1159,10 @@ export class WebPlayer extends BasePlayer {
         return;
       }
       
+      // Stop the event from triggering play/pause
+      e.stopPropagation();
+      e.preventDefault();
+      
       // Unmute the video
       this.video.muted = false;
       this.debugLog('🔊 Video unmuted by clicking on player');
@@ -1166,12 +1170,13 @@ export class WebPlayer extends BasePlayer {
       
       // Clean up the handler
       if (this.clickToUnmuteHandler) {
-        this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler);
+        this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler, true);
         this.clickToUnmuteHandler = null;
       }
     };
     
-    this.playerWrapper?.addEventListener('click', this.clickToUnmuteHandler);
+    // Use capture phase to intercept clicks before they reach the video element
+    this.playerWrapper?.addEventListener('click', this.clickToUnmuteHandler, true);
     this.debugLog('👆 Click anywhere to unmute enabled');
   }
   
@@ -1189,7 +1194,7 @@ export class WebPlayer extends BasePlayer {
     
     // Remove click to unmute handler when button is hidden
     if (this.clickToUnmuteHandler) {
-      this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler);
+      this.playerWrapper?.removeEventListener('click', this.clickToUnmuteHandler, true);
       this.clickToUnmuteHandler = null;
     }
   }
@@ -3211,6 +3216,37 @@ export class WebPlayer extends BasePlayer {
         filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
       }
       
+      /* PiP Button Specific Styling */
+      #uvf-pip-btn {
+        background: var(--uvf-button-bg);
+        border: 1px solid var(--uvf-button-border);
+        position: relative;
+        z-index: 10;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      #uvf-pip-btn:hover {
+        transform: scale(1.08);
+        box-shadow: 0 4px 12px var(--uvf-button-shadow);
+      }
+      
+      #uvf-pip-btn:active {
+        transform: scale(0.95);
+        transition: all 0.1s ease;
+      }
+      
+      #uvf-pip-btn svg {
+        opacity: 0.9;
+        transition: all 0.3s ease;
+        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+      }
+      
+      #uvf-pip-btn:hover svg {
+        opacity: 1;
+        transform: scale(1.05);
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
+      }
+      
       /* Fullscreen Button Specific Styling */
       #uvf-fullscreen-btn {
         background: var(--uvf-button-bg);
@@ -3714,7 +3750,7 @@ export class WebPlayer extends BasePlayer {
         margin-left: 10px;
       }
       
-      /* Top Bar Container - Contains Title (left) and Controls (right) */
+      /* Top Bar Container - Contains Navigation + Title (left) and Controls (right) */
       .uvf-top-bar {
         position: absolute;
         top: 0;
@@ -3731,16 +3767,97 @@ export class WebPlayer extends BasePlayer {
         transition: all 0.3s ease;
       }
       
+      /* Left side container for navigation + title */
+      .uvf-left-side {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex: 1;
+        max-width: 70%;
+      }
+      
+      /* Navigation controls container */
+      .uvf-navigation-controls {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+      
+      /* Navigation button styles */
+      .uvf-nav-btn {
+        width: 40px;
+        height: 40px;
+        min-width: 40px;
+        min-height: 40px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.6);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        backdrop-filter: blur(8px);
+        position: relative;
+        overflow: hidden;
+      }
+      
+      .uvf-nav-btn:hover {
+        background: rgba(255, 255, 255, 0.15);
+        border-color: rgba(255, 255, 255, 0.4);
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      }
+      
+      .uvf-nav-btn:active {
+        transform: scale(0.95);
+      }
+      
+      .uvf-nav-btn svg {
+        width: 20px;
+        height: 20px;
+        fill: currentColor;
+        transition: all 0.2s ease;
+      }
+      
+      .uvf-nav-btn:hover svg {
+        transform: scale(1.1);
+      }
+      
+      /* Back button specific styles */
+      #uvf-back-btn {
+        background: rgba(0, 0, 0, 0.7);
+      }
+      
+      #uvf-back-btn:hover {
+        background: rgba(255, 255, 255, 0.2);
+        border-color: var(--uvf-accent-1, #ff0000);
+      }
+      
+      /* Close button specific styles */
+      #uvf-close-btn {
+        background: rgba(220, 53, 69, 0.8);
+        border-color: rgba(220, 53, 69, 0.6);
+      }
+      
+      #uvf-close-btn:hover {
+        background: rgba(220, 53, 69, 1);
+        border-color: rgba(220, 53, 69, 1);
+        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
+      }
+      
       .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 */
+      /* Title Bar - After navigation buttons */
       .uvf-title-bar {
-        flex: 0 1 auto;
-        max-width: 60%;
+        flex: 1;
+        min-width: 0; /* Allow shrinking */
       }
 
       /* Top Controls - Right side of top bar */
@@ -3755,33 +3872,112 @@ export class WebPlayer extends BasePlayer {
       .uvf-title-content {
         display: flex;
         align-items: center;
-        gap: 12px;
+        width: 100%;
+        min-width: 0; /* Allow shrinking */
       }
-      .uvf-video-thumb {
-        width: 56px;
-        height: 56px;
-        border-radius: 8px;
-        object-fit: cover;
-        box-shadow: 0 4px 14px rgba(0,0,0,0.5);
-        border: 1px solid rgba(255,255,255,0.25);
-        background: rgba(255,255,255,0.05);
+      
+      .uvf-title-text { 
+        display: flex; 
+        flex-direction: column;
+        min-width: 0; /* Allow shrinking */
+        flex: 1;
       }
-      .uvf-title-text { display: flex; flex-direction: column; }
+      
       .uvf-video-title {
         color: var(--uvf-text-primary);
-        font-size: 18px;
+        font-size: clamp(14px, 2.5vw, 18px); /* Responsive font size */
         font-weight: 600;
         text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+        cursor: pointer;
+        transition: color 0.3s ease;
+        position: relative;
+      }
+      
+      .uvf-video-title:hover {
+        color: var(--uvf-accent-1, #ff0000);
       }
       
       .uvf-video-subtitle {
         color: var(--uvf-text-secondary);
-        font-size: 13px;
-        margin-top: 4px;
-        max-width: min(70vw, 900px);
+        font-size: clamp(11px, 1.8vw, 13px); /* Responsive font size */
+        margin-top: 2px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        max-width: 100%;
+        opacity: 0.9;
+        line-height: 1.4;
+        cursor: pointer;
+        transition: opacity 0.3s ease;
+        position: relative;
+      }
+      
+      .uvf-video-subtitle:hover {
+        opacity: 1;
+      }
+      
+      /* Tooltip for long text */
+      .uvf-text-tooltip {
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        background: rgba(0, 0, 0, 0.9);
+        color: white;
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        line-height: 1.4;
+        max-width: 400px;
+        word-wrap: break-word;
+        white-space: normal;
+        z-index: 1000;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-5px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        pointer-events: none;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(8px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      }
+      
+      .uvf-text-tooltip::before {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 12px;
+        border: 5px solid transparent;
+        border-top-color: rgba(0, 0, 0, 0.9);
+      }
+      
+      .uvf-text-tooltip.show {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+      
+      /* Multi-line title option for desktop */
+      .uvf-video-title.multiline {
+        white-space: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 1.2;
+        max-height: 2.4em;
+      }
+      
+      .uvf-video-subtitle.multiline {
+        white-space: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        line-height: 1.3;
+        max-height: 3.9em;
       }
       
                 /* Above seekbar section with time and branding */
@@ -3860,7 +4056,21 @@ export class WebPlayer extends BasePlayer {
                     }
                 }
                 
+                /* Ultra small screens */
                 @media (max-width: 480px) {
+                    .uvf-video-title {
+                        font-size: clamp(11px, 3.5vw, 14px) !important;
+                    }
+                    
+                    .uvf-video-subtitle {
+                        font-size: clamp(9px, 2.5vw, 11px) !important;
+                        -webkit-line-clamp: 1; /* Single line on very small screens */
+                    }
+                    
+                    .uvf-left-side {
+                        max-width: 80%;
+                    }
+                    
                     .uvf-above-seekbar-section {
                         margin-bottom: 5px;
                     }
@@ -4248,6 +4458,47 @@ export class WebPlayer extends BasePlayer {
       }
       
       
+      /* Mobile responsive styles for navigation buttons */
+      @media screen and (max-width: 767px) {
+        .uvf-nav-btn {
+          width: 36px;
+          height: 36px;
+          min-width: 36px;
+          min-height: 36px;
+        }
+        
+        .uvf-nav-btn svg {
+          width: 18px;
+          height: 18px;
+        }
+        
+        .uvf-navigation-controls {
+          gap: 6px;
+        }
+        
+        .uvf-left-side {
+          gap: 8px;
+          max-width: 75%;
+        }
+        
+        /* Mobile title adjustments */
+        .uvf-video-title {
+          font-size: clamp(12px, 3vw, 16px) !important;
+          line-height: 1.2;
+        }
+        
+        .uvf-video-subtitle {
+          font-size: clamp(10px, 2.2vw, 12px) !important;
+          margin-top: 1px;
+          /* Allow wrapping on mobile if needed */
+          white-space: normal;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+      
       /* Mobile portrait - hide skip buttons, ensure top bar visible */
       @media screen and (max-width: 767px) and (orientation: portrait) {
         #uvf-skip-back,
@@ -4415,6 +4666,31 @@ export class WebPlayer extends BasePlayer {
       
       /* Tablet devices - Enhanced UX with desktop features */
       @media screen and (min-width: 768px) and (max-width: 1023px) {
+        /* Tablet navigation and title adjustments */
+        .uvf-nav-btn {
+          width: 38px;
+          height: 38px;
+          min-width: 38px;
+          min-height: 38px;
+        }
+        
+        .uvf-nav-btn svg {
+          width: 19px;
+          height: 19px;
+        }
+        
+        .uvf-left-side {
+          max-width: 70%;
+        }
+        
+        .uvf-video-title {
+          font-size: clamp(15px, 2.2vw, 17px) !important;
+        }
+        
+        .uvf-video-subtitle {
+          font-size: clamp(12px, 1.8vw, 13px) !important;
+        }
+        
         .uvf-controls-bar {
           padding: 18px 16px;
           background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 70%, var(--uvf-overlay-transparent) 100%);
@@ -4947,6 +5223,40 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
+      /* Desktop styles for title and navigation */
+      @media screen and (min-width: 1024px) {
+        .uvf-left-side {
+          max-width: 65%; /* More space for title on desktop */
+        }
+        
+        .uvf-video-title {
+          font-size: clamp(16px, 1.8vw, 20px) !important;
+          font-weight: 700; /* Bolder on desktop */
+        }
+        
+        .uvf-video-subtitle {
+          font-size: clamp(13px, 1.4vw, 15px) !important;
+          margin-top: 3px;
+        }
+        
+        /* Allow hover effects on desktop */
+        .uvf-title-bar:hover .uvf-video-title {
+          color: var(--uvf-accent-1, #ff0000);
+          transition: color 0.3s ease;
+        }
+      }
+      
+      /* Ultra-wide screens */
+      @media screen and (min-width: 1440px) {
+        .uvf-video-title {
+          font-size: clamp(18px, 1.6vw, 22px) !important;
+        }
+        
+        .uvf-video-subtitle {
+          font-size: clamp(14px, 1.2vw, 16px) !important;
+        }
+      }
+      
       /* Paywall Desktop */
       @media screen and (min-width: 1024px) {
         .uvf-paywall-modal {
@@ -5022,6 +5332,132 @@ export class WebPlayer extends BasePlayer {
         this.debugLog('Framework branding added');
     }
 
+  /**
+   * Create navigation buttons (back/close) based on configuration
+   */
+  private createNavigationButtons(container: HTMLElement): void {
+    const navigationConfig = (this.config as any).navigation;
+    if (!navigationConfig) return;
+
+    const { backButton, closeButton } = navigationConfig;
+
+    // Back button
+    if (backButton?.enabled) {
+      const backBtn = document.createElement('button');
+      backBtn.className = 'uvf-control-btn uvf-nav-btn';
+      backBtn.id = 'uvf-back-btn';
+      backBtn.title = backButton.title || 'Back';
+      backBtn.setAttribute('aria-label', backButton.ariaLabel || 'Go back');
+      
+      // Get icon based on config
+      const backIcon = this.getNavigationIcon(backButton.icon || 'arrow', backButton.customIcon);
+      backBtn.innerHTML = backIcon;
+      
+      // Add click handler
+      backBtn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        if (backButton.onClick) {
+          await backButton.onClick();
+        } else if (backButton.href) {
+          if (backButton.replace) {
+            window.history.replaceState(null, '', backButton.href);
+          } else {
+            window.location.href = backButton.href;
+          }
+        } else {
+          // Default: go back in history
+          window.history.back();
+        }
+        
+        this.emit('navigationBackClicked');
+      });
+      
+      container.appendChild(backBtn);
+    }
+
+    // Close button
+    if (closeButton?.enabled) {
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'uvf-control-btn uvf-nav-btn';
+      closeBtn.id = 'uvf-close-btn';
+      closeBtn.title = closeButton.title || 'Close';
+      closeBtn.setAttribute('aria-label', closeButton.ariaLabel || 'Close player');
+      
+      // Get icon based on config
+      const closeIcon = this.getNavigationIcon(closeButton.icon || 'x', closeButton.customIcon);
+      closeBtn.innerHTML = closeIcon;
+      
+      // Add click handler
+      closeBtn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        if (closeButton.onClick) {
+          await closeButton.onClick();
+        } else {
+          // Default behaviors
+          if (closeButton.exitFullscreen && this.isFullscreen()) {
+            await this.exitFullscreen();
+          }
+          
+          if (closeButton.closeModal) {
+            // Hide player or remove from DOM
+            const playerWrapper = this.container?.querySelector('.uvf-player-wrapper') as HTMLElement;
+            if (playerWrapper) {
+              playerWrapper.style.display = 'none';
+            }
+          }
+        }
+        
+        this.emit('navigationCloseClicked');
+      });
+      
+      container.appendChild(closeBtn);
+    }
+  }
+
+  /**
+   * Get navigation icon SVG based on type
+   */
+  private getNavigationIcon(iconType: string, customIcon?: string): string {
+    if (customIcon) {
+      // If it's a URL, create img tag, otherwise assume it's SVG
+      if (customIcon.startsWith('http') || customIcon.includes('.')) {
+        return `<img src="${customIcon}" alt="" style="width: 20px; height: 20px;" />`;
+      }
+      return customIcon;
+    }
+
+    switch (iconType) {
+      case 'arrow':
+        return `<svg viewBox="0 0 24 24">
+          <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z" fill="currentColor"/>
+        </svg>`;
+      
+      case 'chevron':
+        return `<svg viewBox="0 0 24 24">
+          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
+        </svg>`;
+      
+      case 'x':
+        return `<svg viewBox="0 0 24 24">
+          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
+        </svg>`;
+      
+      case 'close':
+        return `<svg viewBox="0 0 24 24">
+          <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="currentColor"/>
+        </svg>`;
+      
+      default:
+        return `<svg viewBox="0 0 24 24">
+          <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z" fill="currentColor"/>
+        </svg>`;
+    }
+  }
+
   private createCustomControls(container: HTMLElement): void {
     // Add gradients
     const topGradient = document.createElement('div');
@@ -5032,23 +5468,34 @@ export class WebPlayer extends BasePlayer {
     controlsGradient.className = 'uvf-controls-gradient';
     container.appendChild(controlsGradient);
     
-    // Combined top bar: title on left, controls on right
+    // Combined top bar: navigation buttons → title → controls
     const topBar = document.createElement('div');
     topBar.className = 'uvf-top-bar';
     
-    // Title bar (left side)
+    // Left side container for navigation + title
+    const leftSide = document.createElement('div');
+    leftSide.className = 'uvf-left-side';
+    
+    // Navigation buttons (back/close)
+    const navigationControls = document.createElement('div');
+    navigationControls.className = 'uvf-navigation-controls';
+    this.createNavigationButtons(navigationControls);
+    leftSide.appendChild(navigationControls);
+    
+    // Title bar (after navigation buttons)
     const titleBar = document.createElement('div');
     titleBar.className = 'uvf-title-bar';
     titleBar.innerHTML = `
       <div class="uvf-title-content">
-        <img class="uvf-video-thumb" id="uvf-video-thumb" alt="thumbnail" style="display:none;" />
         <div class="uvf-title-text">
           <div class=\"uvf-video-title\" id=\"uvf-video-title\" style=\"display:none;\"></div>
           <div class=\"uvf-video-subtitle\" id=\"uvf-video-description\" style=\"display:none;\"></div>
         </div>
       </div>
     `;
-    topBar.appendChild(titleBar);
+    leftSide.appendChild(titleBar);
+    
+    topBar.appendChild(leftSide);
     
     // Top controls (right side - Cast and Share buttons)
     const topControls = document.createElement('div');
@@ -5895,11 +6342,13 @@ export class WebPlayer extends BasePlayer {
           break;
         case 'ArrowLeft':
           e.preventDefault();
+          e.stopImmediatePropagation(); // Prevent duplicate handler triggers
           this.seek(Math.max(0, this.video!.currentTime - 10));
           shortcutText = '-10s';
           break;
         case 'ArrowRight':
           e.preventDefault();
+          e.stopImmediatePropagation(); // Prevent duplicate handler triggers
           this.seek(Math.min(this.video!.duration, this.video!.currentTime + 10));
           shortcutText = '+10s';
           break;
@@ -7080,7 +7529,7 @@ export class WebPlayer extends BasePlayer {
         autoSkip: this.chapterConfig.userPreferences?.autoSkipIntro || false,
         onChapterChange: (chapter: Chapter | null) => {
           this.debugLog('Core chapter changed:', chapter?.title || 'none');
-          this.emit('chapterchange', chapter);
+          this.emit('onChapterchange', chapter);
         },
         onSegmentEntered: (segment: ChapterSegment) => {
           this.debugLog('Core segment entered:', segment.title);
@@ -8363,6 +8812,168 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
+  /**
+   * Check if text is truncated and needs tooltip
+   */
+  private isTextTruncated(element: HTMLElement): boolean {
+    return element.scrollWidth > element.offsetWidth || element.scrollHeight > element.offsetHeight;
+  }
+
+  /**
+   * Show tooltip for truncated text
+   */
+  private showTextTooltip(element: HTMLElement, text: string): void {
+    // Remove existing tooltip
+    const existingTooltip = element.querySelector('.uvf-text-tooltip');
+    if (existingTooltip) {
+      existingTooltip.remove();
+    }
+
+    // Create tooltip
+    const tooltip = document.createElement('div');
+    tooltip.className = 'uvf-text-tooltip';
+    tooltip.textContent = text;
+    
+    element.appendChild(tooltip);
+    
+    // Show tooltip with delay
+    setTimeout(() => {
+      tooltip.classList.add('show');
+    }, 100);
+  }
+
+  /**
+   * Hide tooltip
+   */
+  private hideTextTooltip(element: HTMLElement): void {
+    const tooltip = element.querySelector('.uvf-text-tooltip');
+    if (tooltip) {
+      tooltip.classList.remove('show');
+      setTimeout(() => {
+        if (tooltip.parentElement) {
+          tooltip.remove();
+        }
+      }, 300);
+    }
+  }
+
+  /**
+   * Setup tooltip handlers for title and description
+   */
+  private setupTextTooltips(): void {
+    const titleElement = document.getElementById('uvf-video-title');
+    const descElement = document.getElementById('uvf-video-description');
+
+    if (titleElement) {
+      titleElement.addEventListener('mouseenter', () => {
+        const titleText = (this.source?.metadata?.title || '').toString().trim();
+        if (this.isTextTruncated(titleElement) && titleText) {
+          this.showTextTooltip(titleElement, titleText);
+        }
+      });
+      
+      titleElement.addEventListener('mouseleave', () => {
+        this.hideTextTooltip(titleElement);
+      });
+      
+      // Touch support for mobile
+      titleElement.addEventListener('touchstart', () => {
+        const titleText = (this.source?.metadata?.title || '').toString().trim();
+        if (this.isTextTruncated(titleElement) && titleText) {
+          this.showTextTooltip(titleElement, titleText);
+          // Auto-hide after 3 seconds on touch
+          setTimeout(() => {
+            this.hideTextTooltip(titleElement);
+          }, 3000);
+        }
+      });
+    }
+
+    if (descElement) {
+      descElement.addEventListener('mouseenter', () => {
+        const descText = (this.source?.metadata?.description || '').toString().trim();
+        if (this.isTextTruncated(descElement) && descText) {
+          this.showTextTooltip(descElement, descText);
+        }
+      });
+      
+      descElement.addEventListener('mouseleave', () => {
+        this.hideTextTooltip(descElement);
+      });
+      
+      // Touch support for mobile
+      descElement.addEventListener('touchstart', () => {
+        const descText = (this.source?.metadata?.description || '').toString().trim();
+        if (this.isTextTruncated(descElement) && descText) {
+          this.showTextTooltip(descElement, descText);
+          // Auto-hide after 3 seconds on touch
+          setTimeout(() => {
+            this.hideTextTooltip(descElement);
+          }, 3000);
+        }
+      });
+    }
+  }
+
+  /**
+   * Smart text truncation based on word count
+   */
+  private smartTruncateText(text: string, maxWords: number = 12): { truncated: string, needsTooltip: boolean } {
+    const words = text.split(' ');
+    if (words.length <= maxWords) {
+      return { truncated: text, needsTooltip: false };
+    }
+    
+    const truncated = words.slice(0, maxWords).join(' ') + '...';
+    return { truncated, needsTooltip: true };
+  }
+
+  /**
+   * Apply smart text display based on screen size and content length
+   */
+  private applySmartTextDisplay(titleEl: HTMLElement | null, descEl: HTMLElement | null, titleText: string, descText: string): void {
+    const isDesktop = window.innerWidth >= 1024;
+    const isMobile = window.innerWidth < 768;
+    
+    if (titleEl && titleText) {
+      const wordCount = titleText.split(' ').length;
+      
+      if (isDesktop && wordCount > 8 && wordCount <= 15) {
+        // Use multiline for moderately long titles on desktop
+        titleEl.classList.add('multiline');
+        titleEl.textContent = titleText;
+      } else if (wordCount > 12) {
+        // Smart truncation for very long titles
+        const maxWords = isMobile ? 8 : isDesktop ? 12 : 10;
+        const { truncated } = this.smartTruncateText(titleText, maxWords);
+        titleEl.textContent = truncated;
+        titleEl.classList.remove('multiline');
+      } else {
+        titleEl.textContent = titleText;
+        titleEl.classList.remove('multiline');
+      }
+    }
+    
+    if (descEl && descText) {
+      const wordCount = descText.split(' ').length;
+      
+      if (isDesktop && wordCount > 15 && wordCount <= 25) {
+        // Use multiline for moderately long descriptions on desktop
+        descEl.classList.add('multiline');
+        descEl.textContent = descText;
+      } else if (wordCount > 20) {
+        // Smart truncation for very long descriptions
+        const maxWords = isMobile ? 12 : isDesktop ? 18 : 15;
+        const { truncated } = this.smartTruncateText(descText, maxWords);
+        descEl.textContent = truncated;
+        descEl.classList.remove('multiline');
+      } else {
+        descEl.textContent = descText;
+        descEl.classList.remove('multiline');
+      }
+    }
+  }
+
   private updateMetadataUI(): void {
     try {
       const md = this.source?.metadata || ({} as any);
@@ -8375,34 +8986,33 @@ export class WebPlayer extends BasePlayer {
       const descText = (md.description || '').toString().trim();
       const thumbUrl = (md.thumbnailUrl || '').toString().trim();
 
-      // Title
+      // Apply smart text display with truncation and multiline support
+      this.applySmartTextDisplay(titleEl, descEl, titleText, descText);
+
+      // Show/hide elements
       if (titleEl) {
-        titleEl.textContent = titleText;
         titleEl.style.display = titleText ? 'block' : 'none';
       }
-
-      // Description
       if (descEl) {
-        descEl.textContent = descText;
         descEl.style.display = descText ? 'block' : 'none';
       }
 
-      // Thumbnail
+      // Thumbnail (removed from layout but keeping for compatibility)
       if (thumbEl) {
-        if (thumbUrl) {
-          thumbEl.src = thumbUrl;
-          thumbEl.style.display = 'block';
-        } else {
-          thumbEl.removeAttribute('src');
-          thumbEl.style.display = 'none';
-        }
+        thumbEl.style.display = 'none'; // Always hidden in new layout
       }
 
       // Hide entire title bar if nothing to show
-      const hasAny = !!(titleText || descText || thumbUrl);
+      const hasAny = !!(titleText || descText);
       if (titleBar) {
         titleBar.style.display = hasAny ? '' : 'none';
       }
+
+      // Setup tooltips for truncated text
+      setTimeout(() => {
+        this.setupTextTooltips();
+      }, 100); // Small delay to ensure elements are rendered
+      
     } catch (_) { /* ignore */ }
   }