unified-video-framework 1.4.365 → 1.4.367

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

@@ -13,12 +13,14 @@ import {
   SEGMENT_COLORS
 } from './types/ChapterTypes';
 import { SkipButtonController } from './SkipButtonController';
+import { CreditsButtonController } from './CreditsButtonController';
 
 export class ChapterManager {
   private chapters: VideoChapters | null = null;
   private currentSegment: VideoSegment | null = null;
   private previousSegment: VideoSegment | null = null;
   private skipButtonController: SkipButtonController;
+  private creditsButtonController: CreditsButtonController;
   private config: ChapterConfig;
   private eventListeners: Map<keyof ChapterEvents, Function[]> = new Map();
   private isDestroyed = false;
@@ -41,8 +43,24 @@ export class ChapterManager {
         segment,
         currentTime: this.videoElement.currentTime,
         reason: reason as any
-      }),
-      (segment) => this.handleSecondaryAction(segment)
+      })
+    );
+
+    // Initialize credits button controller
+    this.creditsButtonController = new CreditsButtonController(
+      playerContainer,
+      this.config,
+      {
+        onWatchCredits: (segment) => this.handleWatchCredits(segment),
+        onNextEpisode: (segment, url) => this.handleNextEpisode(segment, url),
+        onAutoRedirect: (segment, url) => this.handleAutoRedirect(segment, url),
+        onButtonsShown: (segment) => this.emit('skipButtonShown', { segment, currentTime: this.videoElement.currentTime }),
+        onButtonsHidden: (segment, reason) => this.emit('skipButtonHidden', {
+          segment,
+          currentTime: this.videoElement.currentTime,
+          reason: reason as any
+        })
+      }
     );
 
     // Set up time update listener
@@ -126,26 +144,9 @@ export class ChapterManager {
    * Skip to next segment after current one
    */
   public skipToNextSegment(currentSegment: VideoSegment): void {
-    console.log('[ChapterManager] skipToNextSegment called with segment:', currentSegment.type, currentSegment.title);
     if (!this.chapters) return;
 
     const nextSegment = this.getNextContentSegment(currentSegment);
-    console.log('[ChapterManager] Next content segment:', nextSegment?.type || 'none');
-
-    // Check for Next Episode trigger if no next segment or if we are skipping credits
-    console.log('[ChapterManager] Checking Next Episode conditions:', {
-      noNextSegment: !nextSegment,
-      isCredits: currentSegment.type === 'credits',
-      hasNextEpisodeConfig: !!(this.config.nextEpisode?.enabled || this.config.nextEpisode?.url)
-    });
-
-    if ((!nextSegment || currentSegment.type === 'credits') &&
-      (this.config.nextEpisode?.enabled || this.config.nextEpisode?.url)) {
-      console.log('[ChapterManager] Triggering Next Episode!');
-      this.triggerNextEpisode();
-      return;
-    }
-
     const targetTime = nextSegment ? nextSegment.startTime : currentSegment.endTime;
 
     // Store current playback state
@@ -176,32 +177,6 @@ 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 {
-    console.log('[ChapterManager] triggerNextEpisode called. nextEpisode config:', this.config.nextEpisode);
-    if (this.config.nextEpisode?.enabled || this.config.nextEpisode?.url) {
-      console.log('[ChapterManager] Emitting nextEpisode event with config:', this.config.nextEpisode);
-      this.emit('nextEpisode', {
-        config: this.config.nextEpisode,
-        autoPlay: true
-      });
-    } else {
-      console.log('[ChapterManager] nextEpisode not triggered - no enabled flag or URL');
-    }
-  }
-
   /**
    * Skip to specific segment by ID
    */
@@ -338,6 +313,7 @@ export class ChapterManager {
   public destroy(): void {
     this.isDestroyed = true;
     this.skipButtonController.destroy();
+    this.creditsButtonController.destroy();
     this.removeChapterMarkers();
     this.eventListeners.clear();
     this.chapters = null;
@@ -393,6 +369,28 @@ export class ChapterManager {
         if (this.shouldShowSkipButton(this.currentSegment)) {
           this.skipButtonController.hideSkipButton('segment-end');
         }
+
+        // Hide credits buttons when exiting credits segment
+        if (this.currentSegment.type === 'credits' && this.currentSegment.nextEpisodeUrl) {
+          this.creditsButtonController.hideCreditsButtons('segment-end');
+
+          // If user watched full credits, redirect to next episode
+          if (this.creditsButtonController.isUserWatchingCredits()) {
+            // Capture URL before segment state changes
+            const redirectUrl = this.currentSegment.nextEpisodeUrl;
+
+            this.emit('creditsFullyWatched', {
+              segment: this.currentSegment,
+              nextEpisodeUrl: redirectUrl,
+              currentTime
+            });
+
+            // Redirect to next episode after short delay
+            setTimeout(() => {
+              window.location.href = redirectUrl;
+            }, 500);
+          }
+        }
       }
 
       // Update current segment
@@ -407,8 +405,12 @@ export class ChapterManager {
           previousSegment: this.previousSegment || undefined
         });
 
-        // Show skip button for skippable segments
-        if (this.shouldShowSkipButton(this.currentSegment)) {
+        // Check if this is a credits segment with next episode URL
+        if (this.currentSegment.type === 'credits' && this.currentSegment.nextEpisodeUrl) {
+          // Show credits buttons instead of skip button
+          this.creditsButtonController.showCreditsButtons(this.currentSegment, currentTime);
+        } else if (this.shouldShowSkipButton(this.currentSegment)) {
+          // Show skip button for regular skippable segments
           this.skipButtonController.showSkipButton(this.currentSegment, currentTime);
         }
       }
@@ -429,17 +431,35 @@ export class ChapterManager {
   }
 
   /**
-   * Check if we should override skip button label/behavior for Next Episode
+   * Handle "Watch Credits" button click
    */
-  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.
-    }
+  private handleWatchCredits(segment: VideoSegment): void {
+    this.emit('creditsWatched', {
+      segment,
+      currentTime: this.videoElement.currentTime
+    });
+  }
+
+  /**
+   * Handle "Next Episode" button click
+   */
+  private handleNextEpisode(segment: VideoSegment, url: string): void {
+    this.emit('nextEpisodeClicked', {
+      segment,
+      nextEpisodeUrl: url,
+      currentTime: this.videoElement.currentTime
+    });
+  }
+
+  /**
+   * Handle auto-redirect when countdown expires
+   */
+  private handleAutoRedirect(segment: VideoSegment, url: string): void {
+    this.emit('creditsAutoRedirect', {
+      segment,
+      nextEpisodeUrl: url,
+      currentTime: this.videoElement.currentTime
+    });
   }
 
   /**

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

@@ -0,0 +1,397 @@
+/**
+ * Controller for credits dual-button UI (Watch Credits & Next Episode)
+ */
+
+import {
+    VideoSegment,
+    ChapterConfig
+} from './types/ChapterTypes';
+
+interface CreditsButtonCallbacks {
+    onWatchCredits: (segment: VideoSegment) => void;
+    onNextEpisode: (segment: VideoSegment, url: string) => void;
+    onAutoRedirect: (segment: VideoSegment, url: string) => void;
+    onButtonsShown: (segment: VideoSegment) => void;
+    onButtonsHidden: (segment: VideoSegment, reason: string) => void;
+}
+
+export class CreditsButtonController {
+    private buttonsContainer: HTMLElement | null = null;
+    private watchCreditsButton: HTMLElement | null = null;
+    private nextEpisodeButton: HTMLElement | null = null;
+    private currentSegment: VideoSegment | null = null;
+    private autoRedirectTimeout: NodeJS.Timeout | null = null;
+    private countdownInterval: NodeJS.Timeout | null = null;
+    private isVisible = false;
+    private userWatchingCredits = false;
+
+    // Default labels
+    private readonly DEFAULT_WATCH_CREDITS_LABEL = 'Watch Credits';
+    private readonly DEFAULT_NEXT_EPISODE_LABEL = 'Play Next';
+    private readonly DEFAULT_AUTO_REDIRECT_DELAY = 10; // seconds
+
+    constructor(
+        private playerContainer: HTMLElement,
+        private config: ChapterConfig,
+        private callbacks: CreditsButtonCallbacks
+    ) { }
+
+    /**
+     * Show credits buttons for a segment with next episode URL
+     */
+    public showCreditsButtons(segment: VideoSegment, currentTime: number): void {
+        // Verify segment has nextEpisodeUrl
+        if (!segment.nextEpisodeUrl) {
+            console.warn('[CreditsButtonController] Segment does not have nextEpisodeUrl');
+            return;
+        }
+
+        this.currentSegment = segment;
+        this.userWatchingCredits = false;
+
+        // Create buttons if they don't exist
+        if (!this.buttonsContainer) {
+            this.createCreditsButtons();
+        }
+
+        // Update button content
+        this.updateButtonLabels(segment);
+
+        // Show the buttons
+        this.showButtons();
+
+        // Start auto-redirect countdown
+        const delay = segment.autoSkipDelay || this.DEFAULT_AUTO_REDIRECT_DELAY;
+        this.startAutoRedirectCountdown(segment, delay);
+
+        // Emit event
+        this.callbacks.onButtonsShown(segment);
+    }
+
+    /**
+     * Hide credits buttons
+     */
+    public hideCreditsButtons(reason: 'timeout' | 'segment-end' | 'user-action' | 'manual' = 'manual'): void {
+        if (!this.buttonsContainer || !this.isVisible) {
+            return;
+        }
+
+        // Emit event before cleanup
+        if (this.currentSegment) {
+            this.callbacks.onButtonsHidden(this.currentSegment, reason);
+        }
+
+        this.hideButtons();
+        this.clearTimeouts();
+
+        this.isVisible = false;
+        this.currentSegment = null;
+    }
+
+    /**
+     * Check if user is watching credits (clicked "Watch Credits")
+     */
+    public isUserWatchingCredits(): boolean {
+        return this.userWatchingCredits;
+    }
+
+    /**
+     * Get current segment
+     */
+    public getCurrentSegment(): VideoSegment | null {
+        return this.currentSegment;
+    }
+
+    /**
+     * Check if buttons are visible
+     */
+    public isButtonsVisible(): boolean {
+        return this.isVisible;
+    }
+
+    /**
+     * Destroy the credits button controller
+     */
+    public destroy(): void {
+        this.clearTimeouts();
+        if (this.buttonsContainer) {
+            this.buttonsContainer.remove();
+            this.buttonsContainer = null;
+        }
+        this.watchCreditsButton = null;
+        this.nextEpisodeButton = null;
+        this.currentSegment = null;
+        this.isVisible = false;
+        this.userWatchingCredits = false;
+    }
+
+    /**
+     * Create the credits buttons DOM elements
+     */
+    private createCreditsButtons(): void {
+        // Create container
+        this.buttonsContainer = document.createElement('div');
+        this.buttonsContainer.className = 'uvf-credits-buttons';
+        this.buttonsContainer.setAttribute('role', 'group');
+        this.buttonsContainer.setAttribute('aria-label', 'Credits navigation');
+
+        // Apply container styles
+        Object.assign(this.buttonsContainer.style, {
+            position: 'absolute',
+            bottom: '100px',
+            right: '30px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+            zIndex: '1000',
+            opacity: '0',
+            transition: 'opacity 0.3s ease-in-out'
+        });
+
+        // Create "Watch Credits" button
+        this.watchCreditsButton = document.createElement('button');
+        this.watchCreditsButton.className = 'uvf-watch-credits-button';
+        this.watchCreditsButton.setAttribute('type', 'button');
+        this.watchCreditsButton.setAttribute('aria-label', 'Watch credits');
+
+        // Add click handler for Watch Credits
+        this.watchCreditsButton.addEventListener('click', () => this.handleWatchCreditsClick());
+
+        // Create "Next Episode" button
+        this.nextEpisodeButton = document.createElement('button');
+        this.nextEpisodeButton.className = 'uvf-next-episode-button';
+        this.nextEpisodeButton.setAttribute('type', 'button');
+        this.nextEpisodeButton.setAttribute('aria-label', 'Play next episode');
+
+        // Add click handler for Next Episode
+        this.nextEpisodeButton.addEventListener('click', () => this.handleNextEpisodeClick());
+
+        // Apply button styles
+        this.applyButtonStyles(this.watchCreditsButton, 'watch-credits');
+        this.applyButtonStyles(this.nextEpisodeButton, 'next-episode');
+
+        // Append buttons to container
+        this.buttonsContainer.appendChild(this.watchCreditsButton);
+        this.buttonsContainer.appendChild(this.nextEpisodeButton);
+
+        // Append container to player
+        this.playerContainer.appendChild(this.buttonsContainer);
+    }
+
+    /**
+     * Apply styles to buttons
+     */
+    private applyButtonStyles(button: HTMLElement, type: 'watch-credits' | 'next-episode'): void {
+        const baseStyles: Partial<CSSStyleDeclaration> = {
+            padding: '12px 24px',
+            fontSize: '14px',
+            fontWeight: '600',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease-in-out',
+            fontFamily: 'inherit',
+            outline: 'none',
+            minWidth: '180px',
+            position: 'relative'
+        };
+
+        if (type === 'watch-credits') {
+            Object.assign(baseStyles, {
+                backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                color: '#ffffff',
+                border: '2px solid rgba(255, 255, 255, 0.3)'
+            });
+        } else {
+            Object.assign(baseStyles, {
+                backgroundColor: '#e50914',
+                color: '#ffffff',
+                boxShadow: '0 2px 8px rgba(229, 9, 20, 0.4)'
+            });
+        }
+
+        Object.assign(button.style, baseStyles);
+
+        // Add hover effect
+        button.addEventListener('mouseenter', () => {
+            if (type === 'watch-credits') {
+                button.style.backgroundColor = 'rgba(255, 255, 255, 0.25)';
+                button.style.borderColor = 'rgba(255, 255, 255, 0.5)';
+            } else {
+                button.style.backgroundColor = '#f40612';
+                button.style.transform = 'scale(1.03)';
+            }
+        });
+
+        button.addEventListener('mouseleave', () => {
+            if (type === 'watch-credits') {
+                button.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
+                button.style.borderColor = 'rgba(255, 255, 255, 0.3)';
+            } else {
+                button.style.backgroundColor = '#e50914';
+                button.style.transform = 'scale(1)';
+            }
+        });
+    }
+
+    /**
+     * Update button labels based on segment configuration
+     */
+    private updateButtonLabels(segment: VideoSegment): void {
+        if (!this.watchCreditsButton || !this.nextEpisodeButton) return;
+
+        const watchLabel = segment.watchCreditsLabel || this.DEFAULT_WATCH_CREDITS_LABEL;
+        const nextLabel = segment.nextEpisodeLabel || this.DEFAULT_NEXT_EPISODE_LABEL;
+
+        this.watchCreditsButton.textContent = watchLabel;
+        this.nextEpisodeButton.textContent = nextLabel;
+
+        this.watchCreditsButton.setAttribute('aria-label', watchLabel);
+        this.nextEpisodeButton.setAttribute('aria-label', nextLabel);
+    }
+
+    /**
+     * Show buttons with animation
+     */
+    private showButtons(): void {
+        if (!this.buttonsContainer) return;
+
+        this.buttonsContainer.style.opacity = '1';
+        this.isVisible = true;
+    }
+
+    /**
+   * Hide buttons with animation
+   */
+    private hideButtons(): void {
+        if (!this.buttonsContainer) return;
+
+        // Remove from DOM instead of just hiding with opacity
+        // This prevents accessibility tooltips from showing
+        this.buttonsContainer.remove();
+        this.buttonsContainer = null;
+        this.watchCreditsButton = null;
+        this.nextEpisodeButton = null;
+    }
+
+    /**
+     * Handle "Watch Credits" button click
+     */
+    private handleWatchCreditsClick(): void {
+        if (!this.currentSegment) return;
+
+        this.userWatchingCredits = true;
+        this.clearTimeouts();
+        this.hideCreditsButtons('user-action');
+
+        // Emit event
+        this.callbacks.onWatchCredits(this.currentSegment);
+    }
+
+    /**
+     * Handle "Next Episode" button click
+     */
+    private handleNextEpisodeClick(): void {
+        if (!this.currentSegment || !this.currentSegment.nextEpisodeUrl) return;
+
+        this.clearTimeouts();
+
+        // Emit event
+        this.callbacks.onNextEpisode(this.currentSegment, this.currentSegment.nextEpisodeUrl);
+
+        // Redirect to next episode
+        this.redirectToNextEpisode(this.currentSegment.nextEpisodeUrl);
+    }
+
+    /**
+     * Start auto-redirect countdown
+     */
+    private startAutoRedirectCountdown(segment: VideoSegment, delay: number): void {
+        if (!this.nextEpisodeButton || !segment.nextEpisodeUrl) return;
+
+        let remainingTime = delay;
+        const originalLabel = segment.nextEpisodeLabel || this.DEFAULT_NEXT_EPISODE_LABEL;
+
+        // Update button text with countdown
+        this.nextEpisodeButton.textContent = `${originalLabel} (${remainingTime})`;
+
+        // Create countdown progress bar
+        const progressBar = this.createProgressBar();
+        this.nextEpisodeButton.appendChild(progressBar);
+
+        // Update countdown every second
+        this.countdownInterval = setInterval(() => {
+            remainingTime -= 1;
+
+            if (this.nextEpisodeButton) {
+                this.nextEpisodeButton.textContent = `${originalLabel} (${remainingTime})`;
+                this.nextEpisodeButton.appendChild(progressBar);
+
+                // Update progress bar
+                const progress = ((delay - remainingTime) / delay) * 100;
+                progressBar.style.width = `${progress}%`;
+            }
+
+            if (remainingTime <= 0) {
+                this.clearTimeouts();
+
+                // Emit auto-redirect event
+                this.callbacks.onAutoRedirect(segment, segment.nextEpisodeUrl!);
+
+                // Redirect to next episode
+                this.redirectToNextEpisode(segment.nextEpisodeUrl!);
+            }
+        }, 1000);
+
+        // Set final timeout as backup
+        this.autoRedirectTimeout = setTimeout(() => {
+            if (segment.nextEpisodeUrl) {
+                this.callbacks.onAutoRedirect(segment, segment.nextEpisodeUrl);
+                this.redirectToNextEpisode(segment.nextEpisodeUrl);
+            }
+        }, delay * 1000);
+    }
+
+    /**
+     * Create countdown progress bar element
+     */
+    private createProgressBar(): HTMLElement {
+        const progressBar = document.createElement('div');
+        progressBar.className = 'uvf-countdown-progress';
+
+        Object.assign(progressBar.style, {
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            height: '3px',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            width: '0%',
+            transition: 'width 1s linear',
+            borderRadius: '0 0 6px 6px'
+        });
+
+        return progressBar;
+    }
+
+    /**
+     * Redirect to next episode URL
+     */
+    private redirectToNextEpisode(url: string): void {
+        window.location.href = url;
+    }
+
+    /**
+     * Clear all timeouts and intervals
+     */
+    private clearTimeouts(): void {
+        if (this.autoRedirectTimeout) {
+            clearTimeout(this.autoRedirectTimeout);
+            this.autoRedirectTimeout = null;
+        }
+
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+            this.countdownInterval = null;
+        }
+    }
+}