unified-video-framework 1.4.151 → 1.4.153

package/packages/web/dist/WebPlayer.js

@@ -1,4 +1,6 @@
-import { BasePlayer } from "../../core/dist/index.js";
+import { BasePlayer } from 'unified-video-core';
+import { ChapterManager as CoreChapterManager } from 'unified-video-core';
+import { ChapterManager } from "./chapters/ChapterManager.js";
 export class WebPlayer extends BasePlayer {
     constructor() {
         super(...arguments);
@@ -50,6 +52,9 @@ export class WebPlayer extends BasePlayer {
         this.hasTriedButtonFallback = false;
         this.lastUserInteraction = 0;
         this.showTimeTooltip = false;
+        this.chapterManager = null;
+        this.coreChapterManager = null;
+        this.chapterConfig = { enabled: false };
     }
     debugLog(message, ...args) {
         if (this.config.debug) {
@@ -85,6 +90,31 @@ export class WebPlayer extends BasePlayer {
         else {
             console.log('No settings config found, using defaults:', this.settingsConfig);
         }
+        if (config && config.chapters) {
+            console.log('Chapter config found:', config.chapters);
+            this.chapterConfig = {
+                enabled: config.chapters.enabled || false,
+                data: config.chapters.data,
+                dataUrl: config.chapters.dataUrl,
+                autoHide: config.chapters.autoHide !== undefined ? config.chapters.autoHide : true,
+                autoHideDelay: config.chapters.autoHideDelay || 5000,
+                showChapterMarkers: config.chapters.showChapterMarkers !== undefined ? config.chapters.showChapterMarkers : true,
+                skipButtonPosition: config.chapters.skipButtonPosition || 'bottom-right',
+                customStyles: config.chapters.customStyles || {},
+                userPreferences: config.chapters.userPreferences || {
+                    autoSkipIntro: false,
+                    autoSkipRecap: false,
+                    autoSkipCredits: false,
+                    showSkipButtons: true,
+                    skipButtonTimeout: 5000,
+                    rememberChoices: true
+                }
+            };
+            console.log('Chapter config applied:', this.chapterConfig);
+        }
+        else {
+            console.log('No chapter config found, chapters disabled');
+        }
         await super.initialize(container, config);
     }
     async setupPlayer() {
@@ -125,6 +155,9 @@ export class WebPlayer extends BasePlayer {
         this.setupWatermark();
         this.setupFullscreenListeners();
         this.setupUserInteractionTracking();
+        if (this.chapterConfig.enabled && this.video) {
+            this.setupChapterManager();
+        }
         try {
             const pw = this.config.paywall || null;
             if (pw && pw.enabled) {
@@ -233,6 +266,9 @@ export class WebPlayer extends BasePlayer {
             const t = this.video.currentTime || 0;
             this.updateTime(t);
             this.enforceFreePreviewGate(t);
+            if (this.coreChapterManager) {
+                this.coreChapterManager.processTimeUpdate(t);
+            }
         });
         this.video.addEventListener('progress', () => {
             this.updateBufferProgress();
@@ -2058,6 +2094,201 @@ export class WebPlayer extends BasePlayer {
         transform: translateX(-50%) translateY(0);
       }
       
+      /* Chapter Markers */
+      .uvf-chapter-marker {
+        position: absolute;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.6);
+        z-index: 4;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+      
+      .uvf-chapter-marker:hover {
+        width: 3px;
+        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+      }
+      
+      .uvf-chapter-marker-intro {
+        background: var(--uvf-accent-1, #ff5722);
+      }
+      
+      .uvf-chapter-marker-recap {
+        background: #ffc107;
+      }
+      
+      .uvf-chapter-marker-credits {
+        background: #9c27b0;
+      }
+      
+      .uvf-chapter-marker-ad {
+        background: #f44336;
+      }
+      
+      /* Skip Button Styles */
+      .uvf-skip-button {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-radius: 8px;
+        padding: 12px 24px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        backdrop-filter: blur(10px);
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        z-index: 1000;
+        user-select: none;
+        
+        /* Default hidden state */
+        opacity: 0;
+        transform: translateX(100px) scale(0.9);
+        pointer-events: none;
+      }
+      
+      .uvf-skip-button.visible {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+        pointer-events: auto;
+      }
+      
+      .uvf-skip-button:hover {
+        background: var(--uvf-accent-1, #ff5722);
+        border-color: var(--uvf-accent-1, #ff5722);
+        transform: translateX(0) scale(1.05);
+        box-shadow: 0 4px 20px rgba(255, 87, 34, 0.4);
+      }
+      
+      .uvf-skip-button:active {
+        transform: translateX(0) scale(0.95);
+        transition: all 0.1s ease;
+      }
+      
+      /* Skip button positioning */
+      .uvf-skip-button-bottom-right {
+        bottom: 100px;
+        right: 30px;
+      }
+      
+      .uvf-skip-button-bottom-left {
+        bottom: 100px;
+        left: 30px;
+        transform: translateX(-100px) scale(0.9);
+      }
+      
+      .uvf-skip-button-bottom-left.visible {
+        transform: translateX(0) scale(1);
+      }
+      
+      .uvf-skip-button-bottom-left:hover {
+        transform: translateX(0) scale(1.05);
+      }
+      
+      .uvf-skip-button-bottom-left:active {
+        transform: translateX(0) scale(0.95);
+      }
+      
+      .uvf-skip-button-top-right {
+        top: 30px;
+        right: 30px;
+      }
+      
+      .uvf-skip-button-top-left {
+        top: 30px;
+        left: 30px;
+        transform: translateX(-100px) scale(0.9);
+      }
+      
+      .uvf-skip-button-top-left.visible {
+        transform: translateX(0) scale(1);
+      }
+      
+      .uvf-skip-button-top-left:hover {
+        transform: translateX(0) scale(1.05);
+      }
+      
+      .uvf-skip-button-top-left:active {
+        transform: translateX(0) scale(0.95);
+      }
+      
+      /* Skip button segment type styling */
+      .uvf-skip-intro {
+        border-color: var(--uvf-accent-1, #ff5722);
+      }
+      
+      .uvf-skip-intro:hover {
+        background: var(--uvf-accent-1, #ff5722);
+        border-color: var(--uvf-accent-1, #ff5722);
+      }
+      
+      .uvf-skip-recap {
+        border-color: #ffc107;
+      }
+      
+      .uvf-skip-recap:hover {
+        background: #ffc107;
+        border-color: #ffc107;
+        color: #000;
+      }
+      
+      .uvf-skip-credits {
+        border-color: #9c27b0;
+      }
+      
+      .uvf-skip-credits:hover {
+        background: #9c27b0;
+        border-color: #9c27b0;
+      }
+      
+      .uvf-skip-ad {
+        border-color: #f44336;
+      }
+      
+      .uvf-skip-ad:hover {
+        background: #f44336;
+        border-color: #f44336;
+      }
+      
+      /* Auto-skip countdown styling */
+      .uvf-skip-button.auto-skip {
+        position: relative;
+        overflow: hidden;
+        border-color: var(--uvf-accent-1, #ff5722);
+        animation: uvf-skip-pulse 2s infinite;
+      }
+      
+      .uvf-skip-button.auto-skip::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        background: var(--uvf-accent-1, #ff5722);
+        width: 0%;
+        transition: none;
+        z-index: -1;
+      }
+      
+      .uvf-skip-button.auto-skip.countdown::before {
+        width: 100%;
+        transition: width linear;
+      }
+      
+      @keyframes uvf-skip-pulse {
+        0% { 
+          box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4);
+        }
+        50% { 
+          box-shadow: 0 0 0 8px rgba(255, 87, 34, 0.1);
+        }
+        100% { 
+          box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
+        }
+      }
+      
       
       
       /* Mobile responsive design with enhanced touch targets */
@@ -2082,6 +2313,42 @@ export class WebPlayer extends BasePlayer {
           top: 2.5px; /* Center on the 5px mobile hover progress bar */
         }
         
+        /* Mobile skip button adjustments */
+        .uvf-skip-button {
+          padding: 10px 20px;
+          font-size: 14px;
+          border-radius: 6px;
+        }
+        
+        .uvf-skip-button-bottom-right {
+          bottom: 80px;
+          right: 20px;
+        }
+        
+        .uvf-skip-button-bottom-left {
+          bottom: 80px;
+          left: 20px;
+        }
+        
+        .uvf-skip-button-top-right {
+          top: 20px;
+          right: 20px;
+        }
+        
+        .uvf-skip-button-top-left {
+          top: 20px;
+          left: 20px;
+        }
+        
+        /* Mobile chapter markers */
+        .uvf-chapter-marker {
+          width: 3px; /* Thicker on mobile for better touch */
+        }
+        
+        .uvf-chapter-marker:hover {
+          width: 4px;
+        }
+        
       }
       
       /* Controls Row */
@@ -5962,6 +6229,202 @@ export class WebPlayer extends BasePlayer {
             this.setSettingsScrollbarConfig(options);
         }
     }
+    setupChapterManager() {
+        if (!this.video || !this.playerWrapper) {
+            this.debugWarn('Cannot setup chapter manager: video or wrapper not available');
+            return;
+        }
+        try {
+            this.chapterManager = new ChapterManager(this.playerWrapper, this.video, this.chapterConfig);
+            const coreChapterConfig = {
+                enabled: this.chapterConfig.enabled,
+                chapters: this.convertToChapters(this.chapterConfig.data),
+                segments: this.convertToChapterSegments(this.chapterConfig.data),
+                dataUrl: this.chapterConfig.dataUrl,
+                autoSkip: this.chapterConfig.userPreferences?.autoSkipIntro || false,
+                onChapterChange: (chapter) => {
+                    this.debugLog('Core chapter changed:', chapter?.title || 'none');
+                    this.emit('chapterchange', chapter);
+                },
+                onSegmentEntered: (segment) => {
+                    this.debugLog('Core segment entered:', segment.title);
+                    this.emit('segmententered', segment);
+                },
+                onSegmentExited: (segment) => {
+                    this.debugLog('Core segment exited:', segment.title);
+                    this.emit('segmentexited', segment);
+                },
+                onSegmentSkipped: (segment) => {
+                    this.debugLog('Core segment skipped:', segment.title);
+                    this.emit('segmentskipped', segment);
+                }
+            };
+            this.coreChapterManager = new CoreChapterManager(coreChapterConfig);
+            this.coreChapterManager.initialize();
+            this.chapterManager.on('segmentEntered', (data) => {
+                this.debugLog('Entered segment:', data.segment.type, data.segment.title);
+                this.emit('chapterSegmentEntered', data);
+            });
+            this.chapterManager.on('segmentSkipped', (data) => {
+                this.debugLog('Skipped segment:', data.fromSegment.type, 'to', data.toSegment?.type || 'end');
+                this.emit('chapterSegmentSkipped', data);
+            });
+            this.chapterManager.on('skipButtonShown', (data) => {
+                this.debugLog('Skip button shown for:', data.segment.type);
+                this.emit('chapterSkipButtonShown', data);
+            });
+            this.chapterManager.on('skipButtonHidden', (data) => {
+                this.debugLog('Skip button hidden for:', data.segment.type, 'reason:', data.reason);
+                this.emit('chapterSkipButtonHidden', data);
+            });
+            this.chapterManager.on('chaptersLoaded', (data) => {
+                this.debugLog('Chapters loaded:', data.segmentCount, 'segments');
+                this.emit('chaptersLoaded', data);
+            });
+            this.chapterManager.on('chaptersLoadError', (data) => {
+                this.debugError('Failed to load chapters:', data.error.message);
+                this.emit('chaptersLoadError', data);
+            });
+            this.debugLog('Chapter managers initialized successfully');
+        }
+        catch (error) {
+            this.debugError('Failed to initialize chapter managers:', error);
+        }
+    }
+    convertToChapters(webChapterData) {
+        if (!webChapterData || !webChapterData.segments) {
+            return [];
+        }
+        return webChapterData.segments
+            .filter((segment) => segment.type === 'content')
+            .map((segment, index) => ({
+            id: segment.id || `chapter-${index}`,
+            title: segment.title || `Chapter ${index + 1}`,
+            startTime: segment.startTime,
+            endTime: segment.endTime,
+            thumbnail: segment.thumbnail,
+            description: segment.description,
+            metadata: segment.metadata || {}
+        }));
+    }
+    convertToChapterSegments(webChapterData) {
+        if (!webChapterData || !webChapterData.segments) {
+            return [];
+        }
+        return webChapterData.segments
+            .filter((segment) => segment.type !== 'content')
+            .map((segment) => ({
+            id: segment.id,
+            startTime: segment.startTime,
+            endTime: segment.endTime,
+            category: segment.type,
+            action: this.mapSegmentAction(segment.type),
+            title: segment.title,
+            description: segment.description
+        }));
+    }
+    mapSegmentAction(segmentType) {
+        switch (segmentType) {
+            case 'intro':
+            case 'recap':
+            case 'credits':
+            case 'sponsor':
+                return 'skip';
+            case 'offensive':
+                return 'mute';
+            default:
+                return 'warn';
+        }
+    }
+    async loadChapters(chapters) {
+        if (!this.chapterManager) {
+            throw new Error('Chapter manager not initialized. Enable chapters in config first.');
+        }
+        try {
+            await this.chapterManager.loadChapters(chapters);
+            this.debugLog('Chapters loaded successfully');
+        }
+        catch (error) {
+            this.debugError('Failed to load chapters:', error);
+            throw error;
+        }
+    }
+    async loadChaptersFromUrl(url) {
+        if (!this.chapterManager) {
+            throw new Error('Chapter manager not initialized. Enable chapters in config first.');
+        }
+        try {
+            await this.chapterManager.loadChaptersFromUrl(url);
+            this.debugLog('Chapters loaded from URL successfully');
+        }
+        catch (error) {
+            this.debugError('Failed to load chapters from URL:', error);
+            throw error;
+        }
+    }
+    getCurrentSegment() {
+        if (!this.chapterManager || !this.video) {
+            return null;
+        }
+        return this.chapterManager.getCurrentSegment(this.video.currentTime);
+    }
+    skipToSegment(segmentId) {
+        if (!this.chapterManager) {
+            this.debugWarn('Cannot skip segment: chapter manager not initialized');
+            return;
+        }
+        this.chapterManager.skipToSegment(segmentId);
+    }
+    getSegments() {
+        if (!this.chapterManager) {
+            return [];
+        }
+        return this.chapterManager.getSegments();
+    }
+    updateChapterConfig(newConfig) {
+        this.chapterConfig = { ...this.chapterConfig, ...newConfig };
+        if (this.chapterManager) {
+            this.chapterManager.updateConfig(this.chapterConfig);
+        }
+    }
+    hasChapters() {
+        return this.chapterManager?.hasChapters() || false;
+    }
+    getChapters() {
+        return this.chapterManager?.getChapters() || null;
+    }
+    getCoreChapters() {
+        return this.coreChapterManager?.getChapters() || [];
+    }
+    getCoreSegments() {
+        return this.coreChapterManager?.getSegments() || [];
+    }
+    getCurrentChapterInfo() {
+        return this.coreChapterManager?.getCurrentChapterInfo() || null;
+    }
+    seekToChapter(chapterId) {
+        if (!this.coreChapterManager || !this.video) {
+            this.debugWarn('Cannot seek to chapter: core chapter manager or video not available');
+            return;
+        }
+        const chapter = this.coreChapterManager.seekToChapter(chapterId);
+        if (chapter) {
+            this.video.currentTime = chapter.startTime;
+            this.debugLog('Seeked to chapter:', chapter.title);
+        }
+    }
+    getNextChapter() {
+        if (!this.coreChapterManager || !this.video) {
+            return null;
+        }
+        return this.coreChapterManager.getNextChapter(this.video.currentTime);
+    }
+    getPreviousChapter() {
+        if (!this.coreChapterManager || !this.video) {
+            return null;
+        }
+        return this.coreChapterManager.getPreviousChapter(this.video.currentTime);
+    }
     setTheme(theme) {
         const wrapper = this.playerWrapper;
         if (!wrapper)
@@ -7132,6 +7595,14 @@ export class WebPlayer extends BasePlayer {
             this.paywallController.destroy();
             this.paywallController = null;
         }
+        if (this.chapterManager && typeof this.chapterManager.destroy === 'function') {
+            this.chapterManager.destroy();
+            this.chapterManager = null;
+        }
+        if (this.coreChapterManager) {
+            this.coreChapterManager.destroy();
+            this.coreChapterManager = null;
+        }
         if (this.video) {
             this.video.pause();
             this.video.removeAttribute('src');