unified-video-framework 1.4.165 → 1.4.166

package/packages/web/dist/WebPlayer.js

@@ -53,6 +53,16 @@ export class WebPlayer extends BasePlayer {
         this.hasTriedButtonFallback = false;
         this.lastUserInteraction = 0;
         this.showTimeTooltip = false;
+        this.lastTapTime = 0;
+        this.tapCount = 0;
+        this.tapTimeout = null;
+        this.longPressTimer = null;
+        this.longPressActive = false;
+        this.longPressStartTime = 0;
+        this.originalPlaybackRate = 1;
+        this.dominantColor = '#ff0000';
+        this.accentColor = '#ff4d4f';
+        this.surfaceTint = 'rgba(255, 0, 0, 0.08)';
         this.autoplayCapabilities = {
             canAutoplay: false,
             canAutoplayMuted: false,
@@ -230,6 +240,26 @@ export class WebPlayer extends BasePlayer {
         catch (_) { }
         this.setupCastContextSafe();
         this.updateMetadataUI();
+        this.enableMaterialYouMobileIfNeeded();
+    }
+    enableMaterialYouMobileIfNeeded() {
+        const isMobile = this.isMobileDevice();
+        const isPortrait = window.innerHeight > window.innerWidth;
+        if (isMobile && isPortrait && this.playerWrapper) {
+            this.debugLog('Enabling Material You mobile layout');
+            this.playerWrapper.classList.add('uvf-material-you-mobile');
+            window.addEventListener('resize', () => {
+                const isNowPortrait = window.innerHeight > window.innerWidth;
+                if (this.playerWrapper) {
+                    if (isMobile && isNowPortrait) {
+                        this.playerWrapper.classList.add('uvf-material-you-mobile');
+                    }
+                    else {
+                        this.playerWrapper.classList.remove('uvf-material-you-mobile');
+                    }
+                }
+            });
+        }
     }
     setupVideoEventListeners() {
         if (!this.video)
@@ -307,6 +337,7 @@ export class WebPlayer extends BasePlayer {
             this.state.duration = this.video.duration || 0;
             this.debugLog('Metadata loaded - duration:', this.video.duration);
             this.updateTimeDisplay();
+            this.renderChapterMarkersOnProgressBar();
             this.emit('onLoadedMetadata', {
                 duration: this.video.duration || 0,
                 width: this.video.videoWidth || 0,
@@ -1876,6 +1907,8 @@ export class WebPlayer extends BasePlayer {
         --uvf-scrollbar-thumb-hover-start: rgba(255,0,0,0.5);
         --uvf-scrollbar-thumb-hover-end: rgba(255,0,0,0.6);
         --uvf-firefox-scrollbar-color: rgba(255,255,255,0.25);
+        /* Material You surface tint */
+        --uvf-surface-tint: rgba(255, 0, 0, 0.08);
       }
       
       /* Player focus styles for better UX */
@@ -3931,6 +3964,362 @@ export class WebPlayer extends BasePlayer {
       }
       
       /* Enhanced Responsive Media Queries with UX Best Practices */
+      
+      /* Material You Mobile Portrait Layout - 25% Black + 50% Video + 25% Black */
+      @media screen and (max-width: 767px) and (orientation: portrait) {
+        /* Enable Material You mode with class flag */
+        .uvf-player-wrapper.uvf-material-you-mobile {
+          /* Full viewport height layout */
+          height: 100vh;
+          height: 100dvh;
+          width: 100vw;
+          position: fixed;
+          top: 0;
+          left: 0;
+          display: flex;
+          flex-direction: column;
+          background: #000;
+          overflow: hidden;
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-video-container {
+          /* Video occupies middle 50% */
+          height: 50vh;
+          height: 50dvh;
+          width: 100vw;
+          position: relative;
+          margin-top: 25vh;
+          margin-top: 25dvh;
+          aspect-ratio: unset !important;
+          /* Match existing theme background */
+          background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
+          /* Material Design elevation */
+          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-player-wrapper.uvf-material-you-mobile .uvf-video {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        
+        /* Top black section (25%) - Tap zone overlay */
+        .uvf-player-wrapper.uvf-material-you-mobile::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%) - Surface container */
+        .uvf-player-wrapper.uvf-material-you-mobile::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 */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-controls-bar {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: auto;
+          max-height: 25vh;
+          max-height: 25dvh;
+          padding: 16px 20px;
+          padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
+          background: transparent;
+          z-index: 2;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+          /* Material Design surface with tint */
+          backdrop-filter: blur(24px);
+          -webkit-backdrop-filter: blur(24px);
+        }
+        
+        /* Material surface tint overlay */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-controls-bar::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: var(--uvf-surface-tint, rgba(255, 0, 0, 0.08));
+          border-radius: 28px 28px 0 0;
+          pointer-events: none;
+          z-index: -1;
+        }
+        
+        /* Progress bar with chapter markers */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-section {
+          margin-bottom: 12px;
+          position: relative;
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-bar-wrapper {
+          padding: 12px 0;
+          position: relative;
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-bar {
+          height: 4px;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 4px;
+          position: relative;
+          overflow: visible;
+          /* Material elevation */
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-filled {
+          background: var(--uvf-accent-1, #ff0000);
+          box-shadow: 0 0 8px var(--uvf-accent-1, #ff0000);
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-progress-handle {
+          width: 20px;
+          height: 20px;
+          background: var(--uvf-accent-1, #ff0000);
+          /* Material Design state layer */
+          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-player-wrapper.uvf-material-you-mobile .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);
+        }
+        
+        /* Chapter markers on progress bar */
+        .uvf-chapter-marker {
+          position: absolute;
+          top: 0;
+          height: 100%;
+          width: 3px;
+          background: rgba(255, 255, 255, 0.4);
+          border-radius: 2px;
+          transform: translateX(-50%);
+          pointer-events: none;
+          z-index: 1;
+          transition: all 0.2s ease;
+        }
+        
+        .uvf-chapter-marker.intro {
+          background: #4CAF50;
+        }
+        
+        .uvf-chapter-marker.recap {
+          background: #FFC107;
+        }
+        
+        .uvf-chapter-marker.credits {
+          background: #9C27B0;
+        }
+        
+        .uvf-progress-bar-wrapper:hover .uvf-chapter-marker {
+          width: 4px;
+          opacity: 1;
+        }
+        
+        /* Material Design control buttons */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn {
+          width: 48px;
+          height: 48px;
+          min-width: 48px;
+          min-height: 48px;
+          background: rgba(255, 255, 255, 0.12);
+          border-radius: 24px;
+          /* Material elevation level 1 */
+          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-player-wrapper.uvf-material-you-mobile .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-player-wrapper.uvf-material-you-mobile .uvf-control-btn:active::before {
+          opacity: 1;
+        }
+        
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-control-btn:active {
+          /* Material elevation level 2 */
+          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-player-wrapper.uvf-material-you-mobile .uvf-control-btn.play-pause {
+          width: 56px;
+          height: 56px;
+          min-width: 56px;
+          min-height: 56px;
+          border-radius: 28px;
+          /* Material elevated button */
+          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-player-wrapper.uvf-material-you-mobile .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);
+        }
+        
+        /* Controls row with Material spacing */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-controls-row {
+          gap: 16px;
+          padding: 0;
+          align-items: center;
+        }
+        
+        /* Time display with Material surface */
+        .uvf-player-wrapper.uvf-material-you-mobile .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';
+          /* Material elevation */
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        }
+        
+        /* Double-tap overlay indicators */
+        .uvf-doubletap-indicator {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 80px;
+          height: 80px;
+          background: rgba(255, 255, 255, 0.2);
+          backdrop-filter: blur(10px);
+          border-radius: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: none;
+          opacity: 0;
+          z-index: 100;
+          transition: opacity 0.3s ease;
+          /* Material elevation level 3 */
+          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
+                      0 6px 6px rgba(0, 0, 0, 0.23);
+        }
+        
+        .uvf-doubletap-indicator.left {
+          left: 15%;
+        }
+        
+        .uvf-doubletap-indicator.right {
+          right: 15%;
+        }
+        
+        .uvf-doubletap-indicator.active {
+          opacity: 1;
+          animation: doubletap-pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        @keyframes doubletap-pulse {
+          0% {
+            transform: translateY(-50%) scale(0.8);
+            opacity: 0;
+          }
+          50% {
+            transform: translateY(-50%) scale(1.1);
+            opacity: 1;
+          }
+          100% {
+            transform: translateY(-50%) scale(1);
+            opacity: 1;
+          }
+        }
+        
+        .uvf-doubletap-indicator svg {
+          width: 40px;
+          height: 40px;
+          fill: #fff;
+        }
+        
+        /* Long-press 2x speed indicator */
+        .uvf-longpress-indicator {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background: rgba(0, 0, 0, 0.8);
+          backdrop-filter: blur(16px);
+          padding: 16px 24px;
+          border-radius: 24px;
+          color: #fff;
+          font-size: 18px;
+          font-weight: 600;
+          pointer-events: none;
+          opacity: 0;
+          z-index: 100;
+          transition: opacity 0.2s ease;
+          /* Material elevation level 4 */
+          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
+                      0 10px 10px rgba(0, 0, 0, 0.22);
+        }
+        
+        .uvf-longpress-indicator.active {
+          opacity: 1;
+        }
+        
+        /* Hide desktop elements in Material You mode */
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-top-controls,
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-title-bar,
+        .uvf-player-wrapper.uvf-material-you-mobile .uvf-volume-control {
+          display: none !important;
+        }
+        
+        /* Optimize settings button for Material You */
+        .uvf-player-wrapper.uvf-material-you-mobile #uvf-settings-btn {
+          width: 48px !important;
+          height: 48px !important;
+          min-width: 48px !important;
+          min-height: 48px !important;
+          border-radius: 24px !important;
+        }
+      }
+      
       /* Mobile devices (portrait) - Enhanced UX with Safe Areas */
       @media screen and (max-width: 767px) and (orientation: portrait) {
         .uvf-responsive-container {
@@ -5225,6 +5614,21 @@ export class WebPlayer extends BasePlayer {
         shortcutIndicator.className = 'uvf-shortcut-indicator';
         shortcutIndicator.id = 'uvf-shortcut-indicator';
         container.appendChild(shortcutIndicator);
+        const doubleTapLeft = document.createElement('div');
+        doubleTapLeft.className = 'uvf-doubletap-indicator left';
+        doubleTapLeft.id = 'uvf-doubletap-left';
+        doubleTapLeft.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg><div style="margin-top:4px;font-size:14px;font-weight:600;">-10s</div>';
+        container.appendChild(doubleTapLeft);
+        const doubleTapRight = document.createElement('div');
+        doubleTapRight.className = 'uvf-doubletap-indicator right';
+        doubleTapRight.id = 'uvf-doubletap-right';
+        doubleTapRight.innerHTML = '<svg viewBox="0 0 24 24"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg><div style="margin-top:4px;font-size:14px;font-weight:600;">+10s</div>';
+        container.appendChild(doubleTapRight);
+        const longPressIndicator = document.createElement('div');
+        longPressIndicator.className = 'uvf-longpress-indicator';
+        longPressIndicator.id = 'uvf-longpress-indicator';
+        longPressIndicator.textContent = '2x';
+        container.appendChild(longPressIndicator);
         const controlsBar = document.createElement('div');
         controlsBar.className = 'uvf-controls-bar';
         controlsBar.id = 'uvf-controls';
@@ -5457,7 +5861,7 @@ export class WebPlayer extends BasePlayer {
         });
         centerPlay?.addEventListener('click', () => this.togglePlayPause());
         playPauseBtn?.addEventListener('click', () => this.togglePlayPause());
-        this.video.addEventListener('click', () => this.togglePlayPause());
+        this.setupMaterialYouGestures(wrapper);
         this.video.addEventListener('play', () => {
             const playIcon = document.getElementById('uvf-play-icon');
             const pauseIcon = document.getElementById('uvf-pause-icon');
@@ -6258,6 +6662,187 @@ export class WebPlayer extends BasePlayer {
             this.mute();
         }
     }
+    setupMaterialYouGestures(wrapper) {
+        if (!wrapper || !this.video)
+            return;
+        const doubleTapLeft = document.getElementById('uvf-doubletap-left');
+        const doubleTapRight = document.getElementById('uvf-doubletap-right');
+        const longPressIndicator = document.getElementById('uvf-longpress-indicator');
+        const videoElement = this.video;
+        const videoContainer = wrapper.querySelector('.uvf-video-container');
+        if (!videoContainer)
+            return;
+        videoContainer.addEventListener('touchstart', (e) => {
+            const touchEvent = e;
+            const touch = touchEvent.touches[0];
+            if (!touch || !videoElement)
+                return;
+            this.longPressStartTime = Date.now();
+            this.longPressTimer = setTimeout(() => {
+                this.longPressActive = true;
+                this.originalPlaybackRate = videoElement.playbackRate;
+                videoElement.playbackRate = 2.0;
+                if (longPressIndicator) {
+                    longPressIndicator.classList.add('active');
+                }
+            }, 500);
+        }, { passive: true });
+        videoContainer.addEventListener('touchend', (e) => {
+            const touchEvent = e;
+            const touch = touchEvent.changedTouches[0];
+            if (!touch || !videoElement)
+                return;
+            if (this.longPressTimer) {
+                clearTimeout(this.longPressTimer);
+                this.longPressTimer = null;
+            }
+            if (this.longPressActive) {
+                videoElement.playbackRate = this.originalPlaybackRate;
+                this.longPressActive = false;
+                if (longPressIndicator) {
+                    longPressIndicator.classList.remove('active');
+                }
+                return;
+            }
+            const now = Date.now();
+            const timeSinceLastTap = now - this.lastTapTime;
+            if (timeSinceLastTap < 300) {
+                if (this.tapTimeout) {
+                    clearTimeout(this.tapTimeout);
+                    this.tapTimeout = null;
+                }
+                const rect = videoContainer.getBoundingClientRect();
+                const x = touch.clientX - rect.left;
+                const isLeftSide = x < rect.width / 2;
+                if (isLeftSide) {
+                    this.seek(videoElement.currentTime - 10);
+                    if (doubleTapLeft) {
+                        doubleTapLeft.classList.add('active');
+                        setTimeout(() => {
+                            doubleTapLeft.classList.remove('active');
+                        }, 400);
+                    }
+                }
+                else {
+                    this.seek(videoElement.currentTime + 10);
+                    if (doubleTapRight) {
+                        doubleTapRight.classList.add('active');
+                        setTimeout(() => {
+                            doubleTapRight.classList.remove('active');
+                        }, 400);
+                    }
+                }
+                this.tapCount = 0;
+                this.lastTapTime = 0;
+            }
+            else {
+                this.tapCount = 1;
+                this.lastTapTime = now;
+                this.tapTimeout = setTimeout(() => {
+                    if (this.tapCount === 1) {
+                        this.toggleControls();
+                    }
+                    this.tapCount = 0;
+                }, 300);
+            }
+        }, { passive: true });
+        videoContainer.addEventListener('touchmove', () => {
+            if (this.longPressTimer) {
+                clearTimeout(this.longPressTimer);
+                this.longPressTimer = null;
+            }
+        }, { passive: true });
+        videoContainer.addEventListener('touchcancel', () => {
+            if (this.longPressTimer) {
+                clearTimeout(this.longPressTimer);
+                this.longPressTimer = null;
+            }
+            if (this.longPressActive && videoElement) {
+                videoElement.playbackRate = this.originalPlaybackRate;
+                this.longPressActive = false;
+                if (longPressIndicator) {
+                    longPressIndicator.classList.remove('active');
+                }
+            }
+        }, { passive: true });
+    }
+    toggleControls() {
+        const wrapper = this.container?.querySelector('.uvf-player-wrapper');
+        if (wrapper) {
+            if (wrapper.classList.contains('controls-visible')) {
+                this.hideControls();
+            }
+            else {
+                this.showControls();
+                if (this.state.isPlaying) {
+                    this.scheduleHideControls();
+                }
+            }
+        }
+    }
+    applyDynamicTheming(primaryColor) {
+        if (!this.playerWrapper)
+            return;
+        const color = primaryColor || this.dominantColor;
+        const rgb = this.hexToRgb(color);
+        if (rgb) {
+            this.playerWrapper.style.setProperty('--uvf-accent-1', color);
+            this.playerWrapper.style.setProperty('--uvf-accent-2', this.lightenColor(color, 10));
+            this.playerWrapper.style.setProperty('--uvf-surface-tint', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`);
+            this.debugLog(`Applied dynamic theming with color: ${color}`);
+        }
+    }
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    lightenColor(hex, percent) {
+        const rgb = this.hexToRgb(hex);
+        if (!rgb)
+            return hex;
+        const amount = Math.floor(255 * (percent / 100));
+        const r = Math.min(255, rgb.r + amount);
+        const g = Math.min(255, rgb.g + amount);
+        const b = Math.min(255, rgb.b + amount);
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    renderChapterMarkersOnProgressBar() {
+        if (!this.video || !this.chapterConfig.enabled || !this.chapterConfig.showChapterMarkers) {
+            return;
+        }
+        const progressBar = document.querySelector('.uvf-progress-bar');
+        if (!progressBar)
+            return;
+        const existingMarkers = progressBar.querySelectorAll('.uvf-chapter-marker');
+        existingMarkers.forEach(marker => marker.remove());
+        const chapters = this.chapterConfig.data;
+        if (!chapters || !Array.isArray(chapters) || chapters.length === 0) {
+            return;
+        }
+        const duration = this.video.duration;
+        if (!duration || duration === 0)
+            return;
+        chapters.forEach((chapter) => {
+            if (!chapter.startTime && chapter.startTime !== 0)
+                return;
+            const marker = document.createElement('div');
+            marker.className = 'uvf-chapter-marker';
+            if (chapter.type) {
+                marker.classList.add(chapter.type.toLowerCase());
+            }
+            const percent = (chapter.startTime / duration) * 100;
+            marker.style.left = `${percent}%`;
+            if (chapter.title) {
+                marker.setAttribute('title', chapter.title);
+            }
+            progressBar.appendChild(marker);
+        });
+        this.debugLog(`Rendered ${chapters.length} chapter markers on progress bar`);
+    }
     isMobileDevice() {
         const userAgent = navigator.userAgent.toLowerCase();
         const mobileKeywords = ['android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone', 'mobile'];