unified-video-framework 1.4.209 → 1.4.210

package/packages/web/dist/WebPlayer.js

@@ -3253,7 +3253,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;
@@ -3270,16 +3270,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 */
@@ -3294,33 +3375,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 */
@@ -3399,7 +3559,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;
                     }
@@ -3787,6 +3961,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,
@@ -3954,6 +4169,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%);
@@ -4486,6 +4726,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 {
@@ -4544,6 +4818,100 @@ export class WebPlayer extends BasePlayer {
         container.appendChild(brandingContainer);
         this.debugLog('Framework branding added');
     }
+    createNavigationButtons(container) {
+        const navigationConfig = this.config.navigation;
+        if (!navigationConfig)
+            return;
+        const { backButton, closeButton } = navigationConfig;
+        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');
+            const backIcon = this.getNavigationIcon(backButton.icon || 'arrow', backButton.customIcon);
+            backBtn.innerHTML = backIcon;
+            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 {
+                    window.history.back();
+                }
+                this.emit('navigationBackClicked');
+            });
+            container.appendChild(backBtn);
+        }
+        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');
+            const closeIcon = this.getNavigationIcon(closeButton.icon || 'x', closeButton.customIcon);
+            closeBtn.innerHTML = closeIcon;
+            closeBtn.addEventListener('click', async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (closeButton.onClick) {
+                    await closeButton.onClick();
+                }
+                else {
+                    if (closeButton.exitFullscreen && this.isFullscreen()) {
+                        await this.exitFullscreen();
+                    }
+                    if (closeButton.closeModal) {
+                        const playerWrapper = this.container?.querySelector('.uvf-player-wrapper');
+                        if (playerWrapper) {
+                            playerWrapper.style.display = 'none';
+                        }
+                    }
+                }
+                this.emit('navigationCloseClicked');
+            });
+            container.appendChild(closeBtn);
+        }
+    }
+    getNavigationIcon(iconType, customIcon) {
+        if (customIcon) {
+            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>`;
+        }
+    }
     createCustomControls(container) {
         const topGradient = document.createElement('div');
         topGradient.className = 'uvf-top-gradient';
@@ -4553,18 +4921,24 @@ export class WebPlayer extends BasePlayer {
         container.appendChild(controlsGradient);
         const topBar = document.createElement('div');
         topBar.className = 'uvf-top-bar';
+        const leftSide = document.createElement('div');
+        leftSide.className = 'uvf-left-side';
+        const navigationControls = document.createElement('div');
+        navigationControls.className = 'uvf-navigation-controls';
+        this.createNavigationButtons(navigationControls);
+        leftSide.appendChild(navigationControls);
         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);
         const topControls = document.createElement('div');
         topControls.className = 'uvf-top-controls';
         topControls.innerHTML = `
@@ -5225,11 +5599,13 @@ export class WebPlayer extends BasePlayer {
                     break;
                 case 'ArrowLeft':
                     e.preventDefault();
+                    e.stopImmediatePropagation();
                     this.seek(Math.max(0, this.video.currentTime - 10));
                     shortcutText = '-10s';
                     break;
                 case 'ArrowRight':
                     e.preventDefault();
+                    e.stopImmediatePropagation();
                     this.seek(Math.min(this.video.duration, this.video.currentTime + 10));
                     shortcutText = '+10s';
                     break;
@@ -6210,7 +6586,7 @@ export class WebPlayer extends BasePlayer {
                 autoSkip: this.chapterConfig.userPreferences?.autoSkipIntro || false,
                 onChapterChange: (chapter) => {
                     this.debugLog('Core chapter changed:', chapter?.title || 'none');
-                    this.emit('chapterchange', chapter);
+                    this.emit('onChapterchange', chapter);
                 },
                 onSegmentEntered: (segment) => {
                     this.debugLog('Core segment entered:', segment.title);
@@ -7323,6 +7699,123 @@ export class WebPlayer extends BasePlayer {
             this.showNotification('Share failed');
         }
     }
+    isTextTruncated(element) {
+        return element.scrollWidth > element.offsetWidth || element.scrollHeight > element.offsetHeight;
+    }
+    showTextTooltip(element, text) {
+        const existingTooltip = element.querySelector('.uvf-text-tooltip');
+        if (existingTooltip) {
+            existingTooltip.remove();
+        }
+        const tooltip = document.createElement('div');
+        tooltip.className = 'uvf-text-tooltip';
+        tooltip.textContent = text;
+        element.appendChild(tooltip);
+        setTimeout(() => {
+            tooltip.classList.add('show');
+        }, 100);
+    }
+    hideTextTooltip(element) {
+        const tooltip = element.querySelector('.uvf-text-tooltip');
+        if (tooltip) {
+            tooltip.classList.remove('show');
+            setTimeout(() => {
+                if (tooltip.parentElement) {
+                    tooltip.remove();
+                }
+            }, 300);
+        }
+    }
+    setupTextTooltips() {
+        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);
+            });
+            titleElement.addEventListener('touchstart', () => {
+                const titleText = (this.source?.metadata?.title || '').toString().trim();
+                if (this.isTextTruncated(titleElement) && titleText) {
+                    this.showTextTooltip(titleElement, titleText);
+                    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);
+            });
+            descElement.addEventListener('touchstart', () => {
+                const descText = (this.source?.metadata?.description || '').toString().trim();
+                if (this.isTextTruncated(descElement) && descText) {
+                    this.showTextTooltip(descElement, descText);
+                    setTimeout(() => {
+                        this.hideTextTooltip(descElement);
+                    }, 3000);
+                }
+            });
+        }
+    }
+    smartTruncateText(text, maxWords = 12) {
+        const words = text.split(' ');
+        if (words.length <= maxWords) {
+            return { truncated: text, needsTooltip: false };
+        }
+        const truncated = words.slice(0, maxWords).join(' ') + '...';
+        return { truncated, needsTooltip: true };
+    }
+    applySmartTextDisplay(titleEl, descEl, titleText, descText) {
+        const isDesktop = window.innerWidth >= 1024;
+        const isMobile = window.innerWidth < 768;
+        if (titleEl && titleText) {
+            const wordCount = titleText.split(' ').length;
+            if (isDesktop && wordCount > 8 && wordCount <= 15) {
+                titleEl.classList.add('multiline');
+                titleEl.textContent = titleText;
+            }
+            else if (wordCount > 12) {
+                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) {
+                descEl.classList.add('multiline');
+                descEl.textContent = descText;
+            }
+            else if (wordCount > 20) {
+                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');
+            }
+        }
+    }
     updateMetadataUI() {
         try {
             const md = this.source?.metadata || {};
@@ -7333,28 +7826,23 @@ export class WebPlayer extends BasePlayer {
             const titleText = (md.title || '').toString().trim();
             const descText = (md.description || '').toString().trim();
             const thumbUrl = (md.thumbnailUrl || '').toString().trim();
+            this.applySmartTextDisplay(titleEl, descEl, titleText, descText);
             if (titleEl) {
-                titleEl.textContent = titleText;
                 titleEl.style.display = titleText ? 'block' : 'none';
             }
             if (descEl) {
-                descEl.textContent = descText;
                 descEl.style.display = descText ? 'block' : 'none';
             }
             if (thumbEl) {
-                if (thumbUrl) {
-                    thumbEl.src = thumbUrl;
-                    thumbEl.style.display = 'block';
-                }
-                else {
-                    thumbEl.removeAttribute('src');
-                    thumbEl.style.display = 'none';
-                }
+                thumbEl.style.display = 'none';
             }
-            const hasAny = !!(titleText || descText || thumbUrl);
+            const hasAny = !!(titleText || descText);
             if (titleBar) {
                 titleBar.style.display = hasAny ? '' : 'none';
             }
+            setTimeout(() => {
+                this.setupTextTooltips();
+            }, 100);
         }
         catch (_) { }
     }