unified-video-framework 1.4.356 → 1.4.358

package/packages/web/src/chapters/ChapterManager.ts

@@ -30,18 +30,19 @@ export class ChapterManager {
   ) {
     // Merge config with defaults
     this.config = { ...DEFAULT_CHAPTER_CONFIG, ...config };
-    
+
     // Initialize skip button controller
     this.skipButtonController = new SkipButtonController(
       playerContainer,
       this.config,
       (segment) => this.skipToNextSegment(segment),
       (segment) => this.emit('skipButtonShown', { segment, currentTime: this.videoElement.currentTime }),
-      (segment, reason) => this.emit('skipButtonHidden', { 
-        segment, 
-        currentTime: this.videoElement.currentTime, 
-        reason: reason as any 
-      })
+      (segment, reason) => this.emit('skipButtonHidden', {
+        segment,
+        currentTime: this.videoElement.currentTime,
+        reason: reason as any
+      }),
+      (segment) => this.handleSecondaryAction(segment)
     );
 
     // Set up time update listener
@@ -65,7 +66,7 @@ export class ChapterManager {
 
       this.chapters = chapters;
       this.sortSegments();
-      
+
       // Emit loaded event
       this.emit('chaptersLoaded', {
         chapters: this.chapters,
@@ -81,8 +82,8 @@ export class ChapterManager {
       this.checkCurrentSegment(this.videoElement.currentTime);
 
     } catch (error) {
-      this.emit('chaptersLoadError', { 
-        error: error as Error 
+      this.emit('chaptersLoadError', {
+        error: error as Error
       });
       throw error;
     }
@@ -102,9 +103,9 @@ export class ChapterManager {
       await this.loadChapters(chapters);
 
     } catch (error) {
-      this.emit('chaptersLoadError', { 
+      this.emit('chaptersLoadError', {
         error: error as Error,
-        url 
+        url
       });
       throw error;
     }
@@ -116,7 +117,7 @@ export class ChapterManager {
   public getCurrentSegment(currentTime: number): VideoSegment | null {
     if (!this.chapters) return null;
 
-    return this.chapters.segments.find(segment => 
+    return this.chapters.segments.find(segment =>
       currentTime >= segment.startTime && currentTime < segment.endTime
     ) || null;
   }
@@ -128,6 +129,14 @@ export class ChapterManager {
     if (!this.chapters) return;
 
     const nextSegment = this.getNextContentSegment(currentSegment);
+
+    // Check for Next Episode trigger if no next segment or if we are skipping credits
+    if ((!nextSegment || currentSegment.type === 'credits') &&
+      this.config.nextEpisode?.enabled) {
+      this.triggerNextEpisode();
+      return;
+    }
+
     const targetTime = nextSegment ? nextSegment.startTime : currentSegment.endTime;
 
     // Store current playback state
@@ -158,6 +167,28 @@ export class ChapterManager {
     }
   }
 
+  /**
+   * Handle secondary action (Watch Credits)
+   */
+  public handleSecondaryAction(segment: VideoSegment): void {
+    // For "Watch Credits", we imply that the user wants to stay on the credits.
+    // So we just emit an event or log it, but importantly the SkipButton will have
+    // cancelled the auto-skip.
+    console.log('[ChapterManager] User chose to watch credits');
+  }
+
+  /**
+   * Trigger next episode directly
+   */
+  public triggerNextEpisode(): void {
+    if (this.config.nextEpisode?.enabled) {
+      this.emit('nextEpisode', {
+        config: this.config.nextEpisode,
+        autoPlay: true
+      });
+    }
+  }
+
   /**
    * Skip to specific segment by ID
    */
@@ -168,10 +199,10 @@ export class ChapterManager {
     if (!segment) return;
 
     const fromSegment = this.currentSegment;
-    
+
     // Store current playback state
     const wasPlaying = !this.videoElement.paused;
-    
+
     // Emit skip event
     if (fromSegment) {
       this.emit('segmentSkipped', {
@@ -234,7 +265,7 @@ export class ChapterManager {
         // Use custom color if provided, otherwise fallback to default
         const customColor = this.config.customStyles?.progressMarkers?.[segment.type];
         const color = customColor || SEGMENT_COLORS[segment.type];
-        
+
         return {
           segment,
           position: (segment.startTime / this.chapters!.duration) * 100,
@@ -249,7 +280,7 @@ export class ChapterManager {
    */
   public updateConfig(newConfig: Partial<ChapterConfig>): void {
     this.config = { ...this.config, ...newConfig };
-    
+
     // Update skip button position if changed
     if (newConfig.skipButtonPosition) {
       this.skipButtonController.updatePosition(newConfig.skipButtonPosition);
@@ -384,6 +415,20 @@ export class ChapterManager {
     return segment.showSkipButton !== false;
   }
 
+  /**
+   * Check if we should override skip button label/behavior for Next Episode
+   */
+  private checkNextEpisodeOverride(segment: VideoSegment) {
+    if (segment.type === 'credits' && this.config.nextEpisode?.enabled) {
+      // If we have a next episode, modifying the segment on the fly to include secondary actions
+      // might be tricky since segment objects are shared.
+      // Ideally, the SkipButtonController should ask for this info.
+      // But for now, we rely on the generic SkipButton rendering secondaryLabel if passed.
+      // The SkipButtonController needs to know to pass 'secondaryLabel' to the SkipButton.
+      // We might need to handle this in SkipButtonController.updateSkipButton.
+    }
+  }
+
   /**
    * Get next content segment after current segment
    */
@@ -392,7 +437,7 @@ export class ChapterManager {
 
     const sortedSegments = [...this.chapters.segments].sort((a, b) => a.startTime - b.startTime);
     const currentIndex = sortedSegments.findIndex(s => s.id === currentSegment.id);
-    
+
     if (currentIndex === -1) return null;
 
     // Find next content segment

package/packages/web/src/chapters/SkipButtonController.ts

@@ -12,18 +12,21 @@ import {
 
 export class SkipButtonController {
   private skipButton: HTMLElement | null = null;
+  private secondaryButton: HTMLElement | null = null;
+  private container: HTMLElement | null = null;
   private currentSegment: VideoSegment | null = null;
   private autoSkipTimeout: NodeJS.Timeout | null = null;
   private hideTimeout: NodeJS.Timeout | null = null;
   private countdownInterval: NodeJS.Timeout | null = null;
   private state: SkipButtonState;
-  
+
   constructor(
     private playerContainer: HTMLElement,
     private config: ChapterConfig,
     private onSkip: (segment: VideoSegment) => void,
     private onButtonShown: (segment: VideoSegment) => void,
-    private onButtonHidden: (segment: VideoSegment, reason: string) => void
+    private onButtonHidden: (segment: VideoSegment, reason: string) => void,
+    private onSecondaryAction?: (segment: VideoSegment) => void
   ) {
     this.state = {
       visible: false,
@@ -119,7 +122,13 @@ export class SkipButtonController {
    */
   public destroy(): void {
     this.clearTimeouts();
-    if (this.skipButton) {
+    if (this.container) {
+      this.container.remove();
+      this.container = null;
+      this.skipButton = null;
+      this.secondaryButton = null;
+    } else if (this.skipButton) {
+      // Fallback if no container (shouldn't happen with new logic but safe to keep)
       this.skipButton.remove();
       this.skipButton = null;
     }
@@ -129,17 +138,43 @@ export class SkipButtonController {
   }
 
   /**
-   * Create the skip button DOM element
+   * Create the skip button DOM element (container and buttons)
    */
   private createSkipButton(): HTMLElement {
+    // Create container
+    const container = document.createElement('div');
+    container.className = 'uvf-skip-container';
+    this.container = container;
+
+    // Create secondary button (Watch Credits) - initially hidden
+    const secondaryBtn = document.createElement('button');
+    secondaryBtn.className = 'uvf-skip-button uvf-skip-secondary';
+    secondaryBtn.setAttribute('type', 'button');
+    secondaryBtn.textContent = 'Watch Credits';
+    secondaryBtn.style.display = 'none'; // Hidden by default
+    secondaryBtn.style.marginRight = '10px';
+    secondaryBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+    secondaryBtn.style.border = '1px solid rgba(255, 255, 255, 0.5)';
+
+    // Explicit click listener for secondary button
+    secondaryBtn.addEventListener('click', (e) => {
+      e.stopPropagation(); // prevent triggering other things
+      if (this.currentSegment && this.onSecondaryAction) {
+        this.clearTimeouts(); // Stop auto-skip
+        this.onSecondaryAction(this.currentSegment);
+        // Hide the container after action
+        this.hideSkipButton('user-action');
+      }
+    });
+    this.secondaryButton = secondaryBtn;
+    container.appendChild(secondaryBtn);
+
+    // Create primary button
     const button = document.createElement('button');
     button.className = 'uvf-skip-button';
     button.setAttribute('type', 'button');
     button.setAttribute('aria-label', 'Skip segment');
 
-    // Apply position styles
-    this.applyPositionStyles(button, this.state.position);
-
     // Add click handler
     button.addEventListener('click', () => {
       if (this.currentSegment) {
@@ -148,12 +183,18 @@ export class SkipButtonController {
       }
     });
 
-    // Apply custom styles if provided
+    this.skipButton = button;
+    container.appendChild(button);
+
+    // Apply custom styles if provided (to the primary button mostly)
     if (this.config.customStyles?.skipButton) {
       Object.assign(button.style, this.config.customStyles.skipButton);
     }
 
-    return button;
+    // Apply position styles to CONTAINER
+    this.applyPositionStyles(container, this.state.position);
+
+    return container;
   }
 
   /**
@@ -163,33 +204,67 @@ export class SkipButtonController {
     if (!this.skipButton) return;
 
     // Set button text
-    const skipLabel = segment.skipLabel || DEFAULT_SKIP_LABELS[segment.type];
+    let skipLabel = segment.skipLabel || DEFAULT_SKIP_LABELS[segment.type];
+
+    // Check for Next Episode override
+    let showSecondary = false;
+    // We infer it's next episode scenario if it's credits and we have a config for it 
+    // AND secondary action is available.
+    // Ideally we checked for `nextEpisode` config in ChapterManager, but here we only know if onSecondaryAction exists.
+    // Let's assume onSecondaryAction implies we support it.
+    if (segment.type === 'credits' && this.onSecondaryAction) {
+      if (this.config.nextEpisode?.title) {
+        skipLabel = `Next Episode: ${this.config.nextEpisode.title}`;
+      } else {
+        skipLabel = "Next Episode";
+      }
+      showSecondary = true;
+    }
+
     this.skipButton.textContent = skipLabel;
 
+    // Handle Secondary Button Visibility
+    if (this.secondaryButton) {
+      if (showSecondary && this.onSecondaryAction) {
+        this.secondaryButton.style.display = 'inline-block';
+        if (this.config.customStyles?.skipButton) {
+          // Inherit some basic styles like font size if available
+          if (this.config.customStyles.skipButton.fontSize) {
+            this.secondaryButton.style.fontSize = this.config.customStyles.skipButton.fontSize;
+          }
+          if (this.config.customStyles.skipButton.padding) {
+            this.secondaryButton.style.padding = this.config.customStyles.skipButton.padding;
+          }
+        }
+      } else {
+        this.secondaryButton.style.display = 'none';
+      }
+    }
+
     // Update aria-label for accessibility
     this.skipButton.setAttribute('aria-label', `${skipLabel} - ${segment.title || segment.type}`);
 
     // Add segment type class for styling
     this.skipButton.className = `uvf-skip-button uvf-skip-${segment.type}`;
-    
-    // Apply position class
-    this.skipButton.classList.add(`uvf-skip-button-${this.state.position}`);
+
+    // Position class is on container now, so update it just in case position changed
+    this.updatePosition(this.state.position);
   }
 
   /**
-   * Apply position styles to skip button
+   * Apply position styles to element (container or button)
    */
-  private applyPositionStyles(button: HTMLElement, position: SkipButtonPosition): void {
+  private applyPositionStyles(element: HTMLElement, position: SkipButtonPosition): void {
     // Reset position classes
-    button.classList.remove(
+    element.classList.remove(
       'uvf-skip-button-bottom-right',
-      'uvf-skip-button-bottom-left', 
+      'uvf-skip-button-bottom-left',
       'uvf-skip-button-top-right',
       'uvf-skip-button-top-left'
     );
 
     // Add new position class
-    button.classList.add(`uvf-skip-button-${position}`);
+    element.classList.add(`uvf-skip-button-${position}`);
 
     // Apply CSS styles based on position
     const styles: Partial<CSSStyleDeclaration> = {
@@ -201,39 +276,48 @@ export class SkipButtonController {
       case 'bottom-right':
         Object.assign(styles, {
           bottom: '100px',
-          right: '30px'
+          right: '30px',
+          top: 'auto',
+          left: 'auto'
         });
         break;
       case 'bottom-left':
         Object.assign(styles, {
           bottom: '100px',
-          left: '30px'
+          left: '30px',
+          top: 'auto',
+          right: 'auto'
         });
         break;
       case 'top-right':
         Object.assign(styles, {
           top: '30px',
-          right: '30px'
+          right: '30px',
+          bottom: 'auto',
+          left: 'auto'
         });
         break;
       case 'top-left':
         Object.assign(styles, {
           top: '30px',
-          left: '30px'
+          left: '30px',
+          bottom: 'auto',
+          right: 'auto'
         });
         break;
     }
 
-    Object.assign(button.style, styles);
+    Object.assign(element.style, styles);
   }
 
   /**
    * Show the skip button with animation
    */
   private showButton(): void {
-    if (!this.skipButton) return;
+    if (!this.container) return;
 
-    this.skipButton.classList.add('visible');
+    this.container.classList.add('visible');
+    // Also ensure buttons are visible (opacity handled by CSS on container usually, but let's be safe)
     this.state.visible = true;
   }
 
@@ -241,10 +325,12 @@ export class SkipButtonController {
    * Hide the skip button with animation
    */
   private hideButton(): void {
-    if (!this.skipButton) return;
+    if (!this.container) return;
 
-    this.skipButton.classList.remove('visible');
-    this.skipButton.classList.remove('auto-skip', 'countdown');
+    this.container.classList.remove('visible');
+    if (this.skipButton) {
+      this.skipButton.classList.remove('auto-skip', 'countdown');
+    }
   }
 
   /**
@@ -285,10 +371,10 @@ export class SkipButtonController {
 
     // Update button text with countdown
     const originalText = this.skipButton.textContent || '';
-    
+
     // Start countdown animation
     this.skipButton.classList.add('countdown');
-    
+
     // Update countdown every second
     this.countdownInterval = setInterval(() => {
       remainingTime -= 1;

package/packages/web/src/chapters/types/ChapterTypes.ts

@@ -12,31 +12,31 @@ export type SkipButtonPosition = 'bottom-right' | 'bottom-left' | 'top-right' |
 export interface VideoSegment {
   /** Unique identifier for the segment */
   id: string;
-  
+
   /** Type of segment */
   type: SegmentType;
-  
+
   /** Start time in seconds */
   startTime: number;
-  
+
   /** End time in seconds */
   endTime: number;
-  
+
   /** Display title for the segment */
   title?: string;
-  
+
   /** Description of the segment */
   description?: string;
-  
+
   /** Custom text for the skip button */
   skipLabel?: string;
-  
+
   /** Whether to auto-skip after a delay */
   autoSkip?: boolean;
-  
+
   /** Delay in seconds before auto-skip */
   autoSkipDelay?: number;
-  
+
   /** Whether to show skip button for this segment */
   showSkipButton?: boolean;
 }
@@ -47,13 +47,13 @@ export interface VideoSegment {
 export interface VideoChapters {
   /** Video identifier */
   videoId: string;
-  
+
   /** Total video duration in seconds */
   duration: number;
-  
+
   /** Array of video segments */
   segments: VideoSegment[];
-  
+
   /** Metadata about the chapters */
   metadata?: {
     version?: string;
@@ -69,25 +69,25 @@ export interface VideoChapters {
 export interface ChapterConfig {
   /** Enable/disable chapter functionality */
   enabled: boolean;
-  
+
   /** Chapter data object */
   data?: VideoChapters;
-  
+
   /** URL to fetch chapter data from */
   dataUrl?: string;
-  
+
   /** Auto-hide skip button after showing */
   autoHide?: boolean;
-  
+
   /** Delay before auto-hiding skip button (ms) */
   autoHideDelay?: number;
-  
+
   /** Show chapter markers on progress bar */
   showChapterMarkers?: boolean;
-  
+
   /** Position of skip button */
   skipButtonPosition?: SkipButtonPosition;
-  
+
   /** Custom CSS styles */
   customStyles?: {
     skipButton?: Partial<CSSStyleDeclaration>;
@@ -100,9 +100,24 @@ export interface ChapterConfig {
       ad?: string;
     };
   };
-  
+
   /** User preferences */
   userPreferences?: ChapterPreferences;
+
+  /** Next Episode Configuration */
+  nextEpisode?: NextEpisodeConfig;
+}
+
+/**
+ * Configuration for the next episode
+ */
+export interface NextEpisodeConfig {
+  enabled: boolean;
+  url: string;
+  title?: string;
+  thumbnail?: string;
+  autoPlayDelay?: number; // seconds, overrides segment autoSkipDelay if present
+  description?: string;
 }
 
 /**
@@ -111,22 +126,22 @@ export interface ChapterConfig {
 export interface ChapterPreferences {
   /** Auto-skip intro segments */
   autoSkipIntro?: boolean;
-  
+
   /** Auto-skip recap segments */
   autoSkipRecap?: boolean;
-  
+
   /** Auto-skip credits segments */
   autoSkipCredits?: boolean;
-  
+
   /** Show skip buttons */
   showSkipButtons?: boolean;
-  
+
   /** Skip button timeout in milliseconds */
   skipButtonTimeout?: number;
-  
+
   /** Remember user choices */
   rememberChoices?: boolean;
-  
+
   /** Resume playback after skip (default: true for better UX) */
   resumePlaybackAfterSkip?: boolean;
 }
@@ -141,14 +156,14 @@ export interface ChapterEvents {
     currentTime: number;
     previousSegment?: VideoSegment;
   };
-  
+
   /** When exiting a segment */
   segmentExited: {
     segment: VideoSegment;
     currentTime: number;
     nextSegment?: VideoSegment;
   };
-  
+
   /** When a segment is skipped */
   segmentSkipped: {
     fromSegment: VideoSegment;
@@ -156,31 +171,37 @@ export interface ChapterEvents {
     skipMethod: 'button' | 'auto' | 'manual';
     currentTime: number;
   };
-  
+
   /** When skip button is shown */
   skipButtonShown: {
     segment: VideoSegment;
     currentTime: number;
   };
-  
+
   /** When skip button is hidden */
   skipButtonHidden: {
     segment: VideoSegment;
     currentTime: number;
     reason: 'timeout' | 'segment-end' | 'user-action' | 'manual';
   };
-  
+
   /** When chapters are loaded */
   chaptersLoaded: {
     chapters: VideoChapters;
     segmentCount: number;
   };
-  
+
   /** When chapter loading fails */
   chaptersLoadError: {
     error: Error;
     url?: string;
   };
+
+  /** When next episode should be played */
+  nextEpisode: {
+    config: NextEpisodeConfig;
+    autoPlay: boolean;
+  };
 }
 
 /**

package/packages/web/src/react/WebPlayerView.tsx

@@ -370,9 +370,16 @@ export type WebPlayerViewProps = {
       autoSkipCredits?: boolean;        // Auto-skip credits segments (default: false)
       showSkipButtons?: boolean;        // Show skip buttons (default: true)
       skipButtonTimeout?: number;       // Button timeout in milliseconds (default: 5000)
+
       rememberChoices?: boolean;        // Remember user preferences (default: true)
       resumePlaybackAfterSkip?: boolean; // Resume playback after skipping (default: true)
     };
+    nextEpisode?: {                      // Next episode configuration
+      title: string;
+      url: string;
+      thumbnail?: string;
+      autoPlayDelay?: number;
+    };
   };
 
   // Navigation Configuration
@@ -429,6 +436,7 @@ export type WebPlayerViewProps = {
   onChapterSkipButtonHidden?: (data: { segment: any; reason: string }) => void;    // Skip button hidden  
   onChaptersLoaded?: (data: { segmentCount: number; chapters: any[] }) => void;    // Chapters loaded
   onChaptersLoadError?: (data: { error: Error; url?: string }) => void;            // Chapters load error
+  onNextEpisode?: (data: { config: any; autoPlay: boolean }) => void;              // Next episode triggered
 
   // Flash News Ticker
   flashNewsTicker?: FlashNewsTickerConfig;                                         // Flash news ticker configuration
@@ -985,7 +993,9 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
             skipButtonTimeout: chaptersConfig.userPreferences?.skipButtonTimeout ?? 5000,
             rememberChoices: chaptersConfig.userPreferences?.rememberChoices ?? true,
             resumePlaybackAfterSkip: chaptersConfig.userPreferences?.resumePlaybackAfterSkip ?? true,
-          }
+
+          },
+          nextEpisode: chaptersConfig.nextEpisode
         } : { enabled: false }
       };
 
@@ -1121,6 +1131,9 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
           if (props.onChaptersLoadError && typeof (player as any).on === 'function') {
             (player as any).on('chaptersLoadError', props.onChaptersLoadError);
           }
+          if (props.onNextEpisode && typeof (player as any).on === 'function') {
+            (player as any).on('nextEpisode', props.onNextEpisode);
+          }
           
           // Navigation event listeners
           if (props.onNavigationBackClicked && typeof (player as any).on === 'function') {