unified-video-framework 1.4.151 → 1.4.154

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

@@ -0,0 +1,353 @@
+/**
+ * Controller for skip button UI and interactions
+ */
+
+import {
+  VideoSegment,
+  SkipButtonState,
+  SkipButtonPosition,
+  ChapterConfig,
+  DEFAULT_SKIP_LABELS
+} from './types/ChapterTypes';
+
+export class SkipButtonController {
+  private skipButton: 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
+  ) {
+    this.state = {
+      visible: false,
+      segment: null,
+      position: config.skipButtonPosition || 'bottom-right'
+    };
+  }
+
+  /**
+   * Show skip button for a segment
+   */
+  public showSkipButton(segment: VideoSegment, currentTime: number): void {
+    // Check if skip buttons are disabled in preferences
+    if (!this.config.userPreferences?.showSkipButtons) {
+      return;
+    }
+
+    // Check if this specific segment should show a skip button
+    if (segment.showSkipButton === false) {
+      return;
+    }
+
+    this.currentSegment = segment;
+    this.state.segment = segment;
+
+    // Create button if it doesn't exist
+    if (!this.skipButton) {
+      this.skipButton = this.createSkipButton();
+      this.playerContainer.appendChild(this.skipButton);
+    }
+
+    // Update button content and show it
+    this.updateSkipButton(segment);
+    this.showButton();
+
+    // Handle auto-skip functionality
+    this.handleAutoSkip(segment, currentTime);
+
+    // Handle auto-hide functionality
+    this.handleAutoHide();
+
+    // Emit event
+    this.onButtonShown(segment);
+  }
+
+  /**
+   * Hide skip button
+   */
+  public hideSkipButton(reason: 'timeout' | 'segment-end' | 'user-action' | 'manual' = 'manual'): void {
+    if (!this.skipButton || !this.state.visible) {
+      return;
+    }
+
+    this.hideButton();
+    this.clearTimeouts();
+
+    // Emit event
+    if (this.currentSegment) {
+      this.onButtonHidden(this.currentSegment, reason);
+    }
+
+    this.state.visible = false;
+    this.state.segment = null;
+    this.currentSegment = null;
+  }
+
+  /**
+   * Update skip button position
+   */
+  public updatePosition(position: SkipButtonPosition): void {
+    this.state.position = position;
+    if (this.skipButton) {
+      this.applyPositionStyles(this.skipButton, position);
+    }
+  }
+
+  /**
+   * Check if button is currently visible
+   */
+  public isVisible(): boolean {
+    return this.state.visible;
+  }
+
+  /**
+   * Get current button state
+   */
+  public getState(): SkipButtonState {
+    return { ...this.state };
+  }
+
+  /**
+   * Destroy the skip button controller
+   */
+  public destroy(): void {
+    this.clearTimeouts();
+    if (this.skipButton) {
+      this.skipButton.remove();
+      this.skipButton = null;
+    }
+    this.currentSegment = null;
+    this.state.visible = false;
+    this.state.segment = null;
+  }
+
+  /**
+   * Create the skip button DOM element
+   */
+  private createSkipButton(): HTMLElement {
+    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) {
+        this.onSkip(this.currentSegment);
+        this.hideSkipButton('user-action');
+      }
+    });
+
+    // Apply custom styles if provided
+    if (this.config.customStyles?.skipButton) {
+      Object.assign(button.style, this.config.customStyles.skipButton);
+    }
+
+    return button;
+  }
+
+  /**
+   * Update skip button content for current segment
+   */
+  private updateSkipButton(segment: VideoSegment): void {
+    if (!this.skipButton) return;
+
+    // Set button text
+    const skipLabel = segment.skipLabel || DEFAULT_SKIP_LABELS[segment.type];
+    this.skipButton.textContent = skipLabel;
+
+    // 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}`);
+  }
+
+  /**
+   * Apply position styles to skip button
+   */
+  private applyPositionStyles(button: HTMLElement, position: SkipButtonPosition): void {
+    // Reset position classes
+    button.classList.remove(
+      'uvf-skip-button-bottom-right',
+      '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}`);
+
+    // Apply CSS styles based on position
+    const styles: Partial<CSSStyleDeclaration> = {
+      position: 'absolute',
+      zIndex: '1000'
+    };
+
+    switch (position) {
+      case 'bottom-right':
+        Object.assign(styles, {
+          bottom: '100px',
+          right: '30px'
+        });
+        break;
+      case 'bottom-left':
+        Object.assign(styles, {
+          bottom: '100px',
+          left: '30px'
+        });
+        break;
+      case 'top-right':
+        Object.assign(styles, {
+          top: '30px',
+          right: '30px'
+        });
+        break;
+      case 'top-left':
+        Object.assign(styles, {
+          top: '30px',
+          left: '30px'
+        });
+        break;
+    }
+
+    Object.assign(button.style, styles);
+  }
+
+  /**
+   * Show the skip button with animation
+   */
+  private showButton(): void {
+    if (!this.skipButton) return;
+
+    this.skipButton.classList.add('visible');
+    this.state.visible = true;
+  }
+
+  /**
+   * Hide the skip button with animation
+   */
+  private hideButton(): void {
+    if (!this.skipButton) return;
+
+    this.skipButton.classList.remove('visible');
+    this.skipButton.classList.remove('auto-skip', 'countdown');
+  }
+
+  /**
+   * Handle auto-skip functionality
+   */
+  private handleAutoSkip(segment: VideoSegment, currentTime: number): void {
+    if (!segment.autoSkip || !segment.autoSkipDelay) {
+      return;
+    }
+
+    // Check user preferences for auto-skip
+    const preferences = this.config.userPreferences;
+    const shouldAutoSkip = (
+      (segment.type === 'intro' && preferences?.autoSkipIntro) ||
+      (segment.type === 'recap' && preferences?.autoSkipRecap) ||
+      (segment.type === 'credits' && preferences?.autoSkipCredits)
+    );
+
+    if (!shouldAutoSkip) {
+      return;
+    }
+
+    // Add auto-skip class for styling
+    this.skipButton?.classList.add('auto-skip');
+
+    // Start countdown
+    this.startAutoSkipCountdown(segment, segment.autoSkipDelay);
+  }
+
+  /**
+   * Start auto-skip countdown
+   */
+  private startAutoSkipCountdown(segment: VideoSegment, delay: number): void {
+    if (!this.skipButton) return;
+
+    let remainingTime = delay;
+    this.state.autoSkipCountdown = remainingTime;
+
+    // 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;
+      this.state.autoSkipCountdown = remainingTime;
+
+      if (this.skipButton) {
+        this.skipButton.textContent = `${originalText} (${remainingTime})`;
+      }
+
+      if (remainingTime <= 0) {
+        this.clearTimeouts();
+        if (this.currentSegment) {
+          this.onSkip(this.currentSegment);
+          this.hideSkipButton('timeout');
+        }
+      }
+    }, 1000);
+
+    // Set final timeout as backup
+    this.autoSkipTimeout = setTimeout(() => {
+      if (this.currentSegment) {
+        this.onSkip(this.currentSegment);
+        this.hideSkipButton('timeout');
+      }
+    }, delay * 1000);
+  }
+
+  /**
+   * Handle auto-hide functionality
+   */
+  private handleAutoHide(): void {
+    if (!this.config.autoHide || !this.config.autoHideDelay) {
+      return;
+    }
+
+    this.hideTimeout = setTimeout(() => {
+      this.hideSkipButton('timeout');
+    }, this.config.autoHideDelay);
+  }
+
+  /**
+   * Clear all timeouts
+   */
+  private clearTimeouts(): void {
+    if (this.autoSkipTimeout) {
+      clearTimeout(this.autoSkipTimeout);
+      this.autoSkipTimeout = null;
+    }
+
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = null;
+    }
+
+    this.state.autoSkipCountdown = undefined;
+  }
+}

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

@@ -0,0 +1,324 @@
+/**
+ * User preferences manager for chapter and skip functionality
+ */
+
+import { ChapterPreferences } from './types/ChapterTypes';
+
+export class UserPreferencesManager {
+  private static readonly STORAGE_KEY = 'uvf_chapter_preferences';
+  private static readonly DEFAULT_PREFERENCES: ChapterPreferences = {
+    autoSkipIntro: false,
+    autoSkipRecap: false,
+    autoSkipCredits: false,
+    showSkipButtons: true,
+    skipButtonTimeout: 5000,
+    rememberChoices: true
+  };
+
+  private preferences: ChapterPreferences;
+  private listeners: ((preferences: ChapterPreferences) => void)[] = [];
+
+  constructor(initialPreferences?: Partial<ChapterPreferences>) {
+    // Load preferences from storage or use defaults
+    this.preferences = this.loadPreferences();
+    
+    // Apply initial preferences if provided
+    if (initialPreferences) {
+      this.updatePreferences(initialPreferences);
+    }
+  }
+
+  /**
+   * Get current preferences
+   */
+  public getPreferences(): ChapterPreferences {
+    return { ...this.preferences };
+  }
+
+  /**
+   * Update preferences
+   */
+  public updatePreferences(updates: Partial<ChapterPreferences>): void {
+    const oldPreferences = { ...this.preferences };
+    this.preferences = { ...this.preferences, ...updates };
+
+    // Save to storage if rememberChoices is enabled
+    if (this.preferences.rememberChoices) {
+      this.savePreferences();
+    }
+
+    // Notify listeners if preferences changed
+    if (!this.preferencesEqual(oldPreferences, this.preferences)) {
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Reset preferences to defaults
+   */
+  public resetPreferences(): void {
+    this.preferences = { ...UserPreferencesManager.DEFAULT_PREFERENCES };
+    this.savePreferences();
+    this.notifyListeners();
+  }
+
+  /**
+   * Get specific preference value
+   */
+  public getPreference<K extends keyof ChapterPreferences>(key: K): ChapterPreferences[K] {
+    return this.preferences[key];
+  }
+
+  /**
+   * Set specific preference value
+   */
+  public setPreference<K extends keyof ChapterPreferences>(
+    key: K, 
+    value: ChapterPreferences[K]
+  ): void {
+    this.updatePreferences({ [key]: value } as Partial<ChapterPreferences>);
+  }
+
+  /**
+   * Toggle auto-skip for specific segment type
+   */
+  public toggleAutoSkip(segmentType: 'intro' | 'recap' | 'credits'): void {
+    switch (segmentType) {
+      case 'intro':
+        this.setPreference('autoSkipIntro', !this.preferences.autoSkipIntro);
+        break;
+      case 'recap':
+        this.setPreference('autoSkipRecap', !this.preferences.autoSkipRecap);
+        break;
+      case 'credits':
+        this.setPreference('autoSkipCredits', !this.preferences.autoSkipCredits);
+        break;
+    }
+  }
+
+  /**
+   * Check if auto-skip is enabled for segment type
+   */
+  public isAutoSkipEnabled(segmentType: 'intro' | 'recap' | 'credits'): boolean {
+    switch (segmentType) {
+      case 'intro':
+        return this.preferences.autoSkipIntro || false;
+      case 'recap':
+        return this.preferences.autoSkipRecap || false;
+      case 'credits':
+        return this.preferences.autoSkipCredits || false;
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * Add preference change listener
+   */
+  public addListener(listener: (preferences: ChapterPreferences) => void): void {
+    this.listeners.push(listener);
+  }
+
+  /**
+   * Remove preference change listener
+   */
+  public removeListener(listener: (preferences: ChapterPreferences) => void): void {
+    const index = this.listeners.indexOf(listener);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+
+  /**
+   * Create preferences UI panel
+   */
+  public createPreferencesPanel(): HTMLElement {
+    const panel = document.createElement('div');
+    panel.className = 'uvf-chapter-preferences-panel';
+    panel.innerHTML = `
+      <div class="uvf-preferences-header">
+        <h3>Skip Preferences</h3>
+      </div>
+      <div class="uvf-preferences-body">
+        <div class="uvf-preference-item">
+          <label>
+            <input type="checkbox" id="uvf-pref-auto-skip-intro" ${this.preferences.autoSkipIntro ? 'checked' : ''}>
+            <span>Auto-skip intros</span>
+          </label>
+        </div>
+        <div class="uvf-preference-item">
+          <label>
+            <input type="checkbox" id="uvf-pref-auto-skip-recap" ${this.preferences.autoSkipRecap ? 'checked' : ''}>
+            <span>Auto-skip recaps</span>
+          </label>
+        </div>
+        <div class="uvf-preference-item">
+          <label>
+            <input type="checkbox" id="uvf-pref-auto-skip-credits" ${this.preferences.autoSkipCredits ? 'checked' : ''}>
+            <span>Auto-skip credits</span>
+          </label>
+        </div>
+        <div class="uvf-preference-item">
+          <label>
+            <input type="checkbox" id="uvf-pref-show-buttons" ${this.preferences.showSkipButtons ? 'checked' : ''}>
+            <span>Show skip buttons</span>
+          </label>
+        </div>
+        <div class="uvf-preference-item">
+          <label>
+            <span>Button timeout:</span>
+            <select id="uvf-pref-timeout">
+              <option value="3000" ${this.preferences.skipButtonTimeout === 3000 ? 'selected' : ''}>3 seconds</option>
+              <option value="5000" ${this.preferences.skipButtonTimeout === 5000 ? 'selected' : ''}>5 seconds</option>
+              <option value="10000" ${this.preferences.skipButtonTimeout === 10000 ? 'selected' : ''}>10 seconds</option>
+              <option value="0" ${this.preferences.skipButtonTimeout === 0 ? 'selected' : ''}>Never hide</option>
+            </select>
+          </label>
+        </div>
+        <div class="uvf-preference-item">
+          <label>
+            <input type="checkbox" id="uvf-pref-remember" ${this.preferences.rememberChoices ? 'checked' : ''}>
+            <span>Remember preferences</span>
+          </label>
+        </div>
+      </div>
+      <div class="uvf-preferences-footer">
+        <button type="button" id="uvf-pref-reset">Reset to Defaults</button>
+      </div>
+    `;
+
+    // Add event listeners
+    this.setupPreferencesEventListeners(panel);
+
+    return panel;
+  }
+
+  /**
+   * Load preferences from localStorage
+   */
+  private loadPreferences(): ChapterPreferences {
+    try {
+      const stored = localStorage.getItem(UserPreferencesManager.STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return { ...UserPreferencesManager.DEFAULT_PREFERENCES, ...parsed };
+      }
+    } catch (error) {
+      console.warn('Failed to load chapter preferences from storage:', error);
+    }
+    
+    return { ...UserPreferencesManager.DEFAULT_PREFERENCES };
+  }
+
+  /**
+   * Save preferences to localStorage
+   */
+  private savePreferences(): void {
+    try {
+      localStorage.setItem(
+        UserPreferencesManager.STORAGE_KEY, 
+        JSON.stringify(this.preferences)
+      );
+    } catch (error) {
+      console.warn('Failed to save chapter preferences to storage:', error);
+    }
+  }
+
+  /**
+   * Check if two preference objects are equal
+   */
+  private preferencesEqual(a: ChapterPreferences, b: ChapterPreferences): boolean {
+    return (
+      a.autoSkipIntro === b.autoSkipIntro &&
+      a.autoSkipRecap === b.autoSkipRecap &&
+      a.autoSkipCredits === b.autoSkipCredits &&
+      a.showSkipButtons === b.showSkipButtons &&
+      a.skipButtonTimeout === b.skipButtonTimeout &&
+      a.rememberChoices === b.rememberChoices
+    );
+  }
+
+  /**
+   * Notify all listeners of preference changes
+   */
+  private notifyListeners(): void {
+    this.listeners.forEach(listener => {
+      try {
+        listener(this.getPreferences());
+      } catch (error) {
+        console.error('Error in preference change listener:', error);
+      }
+    });
+  }
+
+  /**
+   * Setup event listeners for preferences panel
+   */
+  private setupPreferencesEventListeners(panel: HTMLElement): void {
+    // Auto-skip checkboxes
+    const autoSkipIntro = panel.querySelector('#uvf-pref-auto-skip-intro') as HTMLInputElement;
+    const autoSkipRecap = panel.querySelector('#uvf-pref-auto-skip-recap') as HTMLInputElement;
+    const autoSkipCredits = panel.querySelector('#uvf-pref-auto-skip-credits') as HTMLInputElement;
+    const showButtons = panel.querySelector('#uvf-pref-show-buttons') as HTMLInputElement;
+    const remember = panel.querySelector('#uvf-pref-remember') as HTMLInputElement;
+    const timeout = panel.querySelector('#uvf-pref-timeout') as HTMLSelectElement;
+    const resetButton = panel.querySelector('#uvf-pref-reset') as HTMLButtonElement;
+
+    // Event listeners
+    if (autoSkipIntro) {
+      autoSkipIntro.addEventListener('change', () => {
+        this.setPreference('autoSkipIntro', autoSkipIntro.checked);
+      });
+    }
+
+    if (autoSkipRecap) {
+      autoSkipRecap.addEventListener('change', () => {
+        this.setPreference('autoSkipRecap', autoSkipRecap.checked);
+      });
+    }
+
+    if (autoSkipCredits) {
+      autoSkipCredits.addEventListener('change', () => {
+        this.setPreference('autoSkipCredits', autoSkipCredits.checked);
+      });
+    }
+
+    if (showButtons) {
+      showButtons.addEventListener('change', () => {
+        this.setPreference('showSkipButtons', showButtons.checked);
+      });
+    }
+
+    if (remember) {
+      remember.addEventListener('change', () => {
+        this.setPreference('rememberChoices', remember.checked);
+      });
+    }
+
+    if (timeout) {
+      timeout.addEventListener('change', () => {
+        this.setPreference('skipButtonTimeout', parseInt(timeout.value, 10));
+      });
+    }
+
+    if (resetButton) {
+      resetButton.addEventListener('click', () => {
+        this.resetPreferences();
+        // Update UI
+        if (autoSkipIntro) autoSkipIntro.checked = this.preferences.autoSkipIntro || false;
+        if (autoSkipRecap) autoSkipRecap.checked = this.preferences.autoSkipRecap || false;
+        if (autoSkipCredits) autoSkipCredits.checked = this.preferences.autoSkipCredits || false;
+        if (showButtons) showButtons.checked = this.preferences.showSkipButtons || true;
+        if (remember) remember.checked = this.preferences.rememberChoices || true;
+        if (timeout) timeout.value = String(this.preferences.skipButtonTimeout || 5000);
+      });
+    }
+  }
+
+  /**
+   * Get default preferences
+   */
+  public static getDefaultPreferences(): ChapterPreferences {
+    return { ...UserPreferencesManager.DEFAULT_PREFERENCES };
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Chapter functionality exports for unified-video-framework
+ */
+
+// Core classes
+export { ChapterManager } from './ChapterManager';
+export { SkipButtonController } from './SkipButtonController';
+export { UserPreferencesManager } from './UserPreferencesManager';
+
+// Types and interfaces
+export * from './types/ChapterTypes';
+
+// React components and hooks
+export { useChapters } from '../react/hooks/useChapters';
+export { SkipButton } from '../react/components/SkipButton';
+export { ChapterProgress } from '../react/components/ChapterProgress';
+
+// Re-export commonly used types
+export type {
+  UseChaptersOptions,
+  UseChaptersResult
+} from '../react/hooks/useChapters';
+
+export type {
+  SkipButtonProps
+} from '../react/components/SkipButton';
+
+export type {
+  ChapterProgressProps
+} from '../react/components/ChapterProgress';
+
+export type {
+  ChapterMarker
+} from '../react/components/ChapterProgress';