unified-video-framework 1.4.365 → 1.4.366

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

@@ -12,21 +12,18 @@ 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 onSecondaryAction?: (segment: VideoSegment) => void
+    private onButtonHidden: (segment: VideoSegment, reason: string) => void
   ) {
     this.state = {
       visible: false,
@@ -53,13 +50,9 @@ export class SkipButtonController {
     this.state.segment = segment;
 
     // Create button if it doesn't exist
-    if (!this.container) {
-      console.log('[SkipButtonController] Creating skip button container');
-      const containerElement = this.createSkipButton();
-      this.playerContainer.appendChild(containerElement);
-      console.log('[SkipButtonController] Container appended to player. Container:', this.container);
-    } else {
-      console.log('[SkipButtonController] Container already exists, reusing it');
+    if (!this.skipButton) {
+      this.skipButton = this.createSkipButton();
+      this.playerContainer.appendChild(this.skipButton);
     }
 
     // Update button content and show it
@@ -126,13 +119,7 @@ export class SkipButtonController {
    */
   public destroy(): void {
     this.clearTimeouts();
-    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)
+    if (this.skipButton) {
       this.skipButton.remove();
       this.skipButton = null;
     }
@@ -142,70 +129,31 @@ export class SkipButtonController {
   }
 
   /**
-   * Create the skip button DOM element (container and buttons)
+   * Create the skip button DOM element
    */
   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', () => {
-      console.log('[SkipButtonController] Primary button (Next Episode) clicked! Current segment:', this.currentSegment?.type);
       if (this.currentSegment) {
         this.onSkip(this.currentSegment);
         this.hideSkipButton('user-action');
       }
     });
 
-    this.skipButton = button;
-    container.appendChild(button);
-
-    // Apply custom styles if provided (to the primary button mostly)
+    // Apply custom styles if provided
     if (this.config.customStyles?.skipButton) {
       Object.assign(button.style, this.config.customStyles.skipButton);
     }
 
-    // Apply position styles to CONTAINER
-    this.applyPositionStyles(container, this.state.position);
-
-    // Add flex layout for side-by-side buttons
-    container.style.display = 'flex';
-    container.style.flexDirection = 'row';
-    container.style.alignItems = 'center';
-    container.style.gap = '10px';
-
-    return container;
+    return button;
   }
 
   /**
@@ -215,75 +163,33 @@ export class SkipButtonController {
     if (!this.skipButton) return;
 
     // Set button text
-    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) {
-      console.log('[SkipButtonController] Credits segment detected, nextEpisode config:', this.config.nextEpisode);
-      if (this.config.nextEpisode?.title) {
-        skipLabel = `Next Episode: ${this.config.nextEpisode.title}`;
-      } else {
-        skipLabel = "Next Episode";
-      }
-      showSecondary = true;
-    } else {
-      console.log('[SkipButtonController] Not showing secondary button. segment.type:', segment.type, 'onSecondaryAction:', !!this.onSecondaryAction);
-    }
-
+    const skipLabel = segment.skipLabel || DEFAULT_SKIP_LABELS[segment.type];
     this.skipButton.textContent = skipLabel;
 
-    // Handle Secondary Button Visibility
-    if (this.secondaryButton) {
-      console.log('[SkipButtonController] Secondary button exists. showSecondary:', showSecondary, 'onSecondaryAction:', !!this.onSecondaryAction);
-      if (showSecondary && this.onSecondaryAction) {
-        console.log('[SkipButtonController] Showing Watch Credits button');
-        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 {
-        console.log('[SkipButtonController] Hiding Watch Credits button');
-        this.secondaryButton.style.display = 'none';
-      }
-    } else {
-      console.log('[SkipButtonController] Secondary button element does not exist!');
-    }
-
     // 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}`;
-
-    // Position class is on container now, so update it just in case position changed
-    this.updatePosition(this.state.position);
+    
+    // Apply position class
+    this.skipButton.classList.add(`uvf-skip-button-${this.state.position}`);
   }
 
   /**
-   * Apply position styles to element (container or button)
+   * Apply position styles to skip button
    */
-  private applyPositionStyles(element: HTMLElement, position: SkipButtonPosition): void {
+  private applyPositionStyles(button: HTMLElement, position: SkipButtonPosition): void {
     // Reset position classes
-    element.classList.remove(
+    button.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
-    element.classList.add(`uvf-skip-button-${position}`);
+    button.classList.add(`uvf-skip-button-${position}`);
 
     // Apply CSS styles based on position
     const styles: Partial<CSSStyleDeclaration> = {
@@ -295,58 +201,39 @@ export class SkipButtonController {
       case 'bottom-right':
         Object.assign(styles, {
           bottom: '100px',
-          right: '30px',
-          top: 'auto',
-          left: 'auto'
+          right: '30px'
         });
         break;
       case 'bottom-left':
         Object.assign(styles, {
           bottom: '100px',
-          left: '30px',
-          top: 'auto',
-          right: 'auto'
+          left: '30px'
         });
         break;
       case 'top-right':
         Object.assign(styles, {
           top: '30px',
-          right: '30px',
-          bottom: 'auto',
-          left: 'auto'
+          right: '30px'
         });
         break;
       case 'top-left':
         Object.assign(styles, {
           top: '30px',
-          left: '30px',
-          bottom: 'auto',
-          right: 'auto'
+          left: '30px'
         });
         break;
     }
 
-    Object.assign(element.style, styles);
+    Object.assign(button.style, styles);
   }
 
   /**
    * Show the skip button with animation
    */
   private showButton(): void {
-    console.log('[SkipButtonController] showButton called. Container exists:', !!this.container);
-    if (!this.container) {
-      console.error('[SkipButtonController] Cannot show button - container is null!');
-      return;
-    }
+    if (!this.skipButton) return;
 
-    this.container.classList.add('visible');
-    // Ensure visibility with inline styles as fallback
-    this.container.style.display = 'flex';
-    this.container.style.opacity = '1';
-    this.container.style.visibility = 'visible';
-    this.container.style.pointerEvents = 'auto';
-    console.log('[SkipButtonController] Container visibility set. Display:', this.container.style.display);
-    // Also ensure buttons are visible (opacity handled by CSS on container usually, but let's be safe)
+    this.skipButton.classList.add('visible');
     this.state.visible = true;
   }
 
@@ -354,12 +241,10 @@ export class SkipButtonController {
    * Hide the skip button with animation
    */
   private hideButton(): void {
-    if (!this.container) return;
+    if (!this.skipButton) return;
 
-    this.container.classList.remove('visible');
-    if (this.skipButton) {
-      this.skipButton.classList.remove('auto-skip', 'countdown');
-    }
+    this.skipButton.classList.remove('visible');
+    this.skipButton.classList.remove('auto-skip', 'countdown');
   }
 
   /**
@@ -400,10 +285,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

@@ -39,6 +39,15 @@ export interface VideoSegment {
 
   /** Whether to show skip button for this segment */
   showSkipButton?: boolean;
+
+  /** URL to navigate to for next episode (used in credits segments) */
+  nextEpisodeUrl?: string;
+
+  /** Custom label for "Watch Credits" button */
+  watchCreditsLabel?: string;
+
+  /** Custom label for "Next Episode/Play Next" button */
+  nextEpisodeLabel?: string;
 }
 
 /**
@@ -103,21 +112,6 @@ export interface ChapterConfig {
 
   /** 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;
 }
 
 /**
@@ -197,10 +191,31 @@ export interface ChapterEvents {
     url?: string;
   };
 
-  /** When next episode should be played */
-  nextEpisode: {
-    config: NextEpisodeConfig;
-    autoPlay: boolean;
+  /** When user clicks "Watch Credits" button */
+  creditsWatched: {
+    segment: VideoSegment;
+    currentTime: number;
+  };
+
+  /** When user manually clicks "Next Episode" button */
+  nextEpisodeClicked: {
+    segment: VideoSegment;
+    nextEpisodeUrl: string;
+    currentTime: number;
+  };
+
+  /** When auto-redirect timer triggers */
+  creditsAutoRedirect: {
+    segment: VideoSegment;
+    nextEpisodeUrl: string;
+    currentTime: number;
+  };
+
+  /** When credits segment ends after user watched them */
+  creditsFullyWatched: {
+    segment: VideoSegment;
+    nextEpisodeUrl?: string;
+    currentTime: number;
   };
 }
 

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

@@ -370,16 +370,9 @@ 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
@@ -436,7 +429,6 @@ 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
@@ -993,9 +985,7 @@ 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 }
       };
 
@@ -1131,9 +1121,6 @@ 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') {

package/packages/web/src/react/components/SkipButton.tsx

@@ -45,12 +45,6 @@ export interface SkipButtonProps {
   
   /** Auto-skip delay in seconds */
   autoSkipDelay?: number;
-
-  /** Secondary action label (e.g., "Watch Credits") */
-  secondaryLabel?: string;
-
-  /** Callback for secondary action */
-  onSecondaryAction?: (segment: VideoSegment) => void;
 }
 
 export const SkipButton: React.FC<SkipButtonProps> = ({
@@ -65,9 +59,7 @@ export const SkipButton: React.FC<SkipButtonProps> = ({
   className = '',
   style = {},
   enableAutoSkip = false,
-  autoSkipDelay = 10,
-  secondaryLabel,
-  onSecondaryAction
+  autoSkipDelay = 10
 }) => {
   // State
   const [isVisible, setIsVisible] = useState(visible);
@@ -138,33 +130,6 @@ export const SkipButton: React.FC<SkipButtonProps> = ({
     handleHide('user-action');
   };
 
-  /**
-   * Handle secondary button click
-   */
-  const handleSecondary = (e: React.MouseEvent) => {
-    e.stopPropagation(); // Prevent bubbling
-    if (!segment) return;
-    
-    // Stop auto-skip and countdown
-    clearTimeouts();
-    setIsAutoSkip(false);
-    setCountdown(null);
-
-    // Call callback
-    onSecondaryAction?.(segment);
-    
-    // We DON'T hide the button immediately for "Watch Credits", 
-    // we just stop the auto-skip countdown. User can still click "Next Episode" later.
-    // But typically "Watch Credits" implies dismissing the "Next Episode" urgency.
-    // If we want to hide it:
-    // handleHide('user-secondary-action');
-    
-    // For now, let's keep it visible but stop the countdown so they can click 'Next' later if they want,
-    // OR we can hide it if that's the desired UX. 
-    // Based on Netflix UX: "Watch Credits" usually minimizes the overlay. 
-    // Here we'll just stop the auto-skip.
-  };
-
   /**
    * Handle button show
    */
@@ -283,54 +248,31 @@ export const SkipButton: React.FC<SkipButtonProps> = ({
   }
 
   return (
-    <div className={`uvf-skip-container ${positionClass} ${className}`} style={defaultStyles}>
-      {/* Secondary Button (Watch Credits) */}
-      {secondaryLabel && (
-        <button
-          type="button"
-          className="uvf-skip-button uvf-skip-secondary"
-          onClick={handleSecondary}
+    <button
+      type="button"
+      className={buttonClasses}
+      style={defaultStyles}
+      onClick={handleSkip}
+      aria-label={`${buttonText} - ${segment.title || segment.type}`}
+    >
+      {displayText}
+      
+      {/* Progress bar for auto-skip countdown */}
+      {isAutoSkip && countdown !== null && (
+        <div 
+          className="uvf-skip-countdown-progress"
           style={{
-            marginRight: '10px',
-            backgroundColor: 'rgba(0, 0, 0, 0.7)',
-            border: '1px solid rgba(255, 255, 255, 0.5)',
-            color: '#fff',
-            ...style
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            height: '3px',
+            backgroundColor: 'currentColor',
+            width: `${((autoSkipDelay - countdown) / autoSkipDelay) * 100}%`,
+            transition: 'width 1s linear',
+            borderRadius: '0 0 6px 6px'
           }}
-        >
-          {secondaryLabel}
-        </button>
+        />
       )}
-
-      {/* Primary Button (Next Episode / Skip) */}
-      <button
-        type="button"
-        className={buttonClasses}
-        // style is applied to container now, but we keep button specific classes
-        // We need to adjust styles since we are wrapping in a div now
-        style={{ pointerEvents: 'auto' }}
-        onClick={handleSkip}
-        aria-label={`${buttonText} - ${segment.title || segment.type}`}
-      >
-        {displayText}
-        
-        {/* Progress bar for auto-skip countdown */}
-        {isAutoSkip && countdown !== null && (
-          <div 
-            className="uvf-skip-countdown-progress"
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              height: '3px',
-              backgroundColor: 'currentColor',
-              width: `${((autoSkipDelay - countdown) / autoSkipDelay) * 100}%`,
-              transition: 'width 1s linear',
-              borderRadius: '0 0 6px 6px'
-            }}
-          />
-        )}
-      </button>
-    </div>
+    </button>
   );
 };