Component System

/**
 * Register a custom component for use in players
 * @param name - Component name (used in player options and addChild calls)
 * @param component - Component class extending Component
 * @returns Registered component class
 */
videojs.registerComponent(name: string, component: typeof Component): typeof Component;

/**
 * Get registered component class by name
 * @param name - Component name
 * @returns Component class or undefined
 */
videojs.getComponent(name: string): typeof Component | undefined;

// Create custom component
class CustomButton extends videojs.getComponent('Button') {
  constructor(player, options) {
    super(player, options);
    this.controlText('Custom Action');
  }
  
  handleClick() {
    console.log('Custom button clicked!');
  }
}

// Register component
videojs.registerComponent('CustomButton', CustomButton);

// Use in player
const player = videojs('my-video', {
  children: ['CustomButton']
});

// Or add programmatically
const customButton = new CustomButton(player);
player.addChild(customButton);

/**
 * Base class for all UI components
 */
class Component {
  /**
   * Create component instance
   * @param player - Player instance
   * @param options - Component options
   */
  constructor(player?: Player, options?: ComponentOptions);
  
  /**
   * Get component's DOM element
   * @returns Component's DOM element
   */
  el(): Element;
  
  /**
   * Get/set component content text
   * @param text - Text content to set
   * @returns Current text or this for chaining
   */
  contentEl(): Element;
  
  /**
   * Get component ID
   * @returns Component ID
   */
  id(): string;
  
  /**
   * Get component name
   * @returns Component name
   */
  name(): string;
  
  /**
   * Get associated player
   * @returns Player instance
   */
  player(): Player;
  
  /**
   * Get component options
   * @returns Component options
   */
  options(): ComponentOptions;
}

/**
 * Add child component
 * @param child - Component name, instance, or class
 * @param options - Child component options  
 * @param index - Index to insert at
 * @returns Child component instance
 */
addChild(child: string | Component | typeof Component, options?: object, index?: number): Component;

/**
 * Remove child component
 * @param component - Child component to remove
 */
removeChild(component: Component): void;

/**
 * Initialize child components from options
 * @param children - Array of child component definitions
 */
initChildren(children?: ChildComponentSpec[]): void;

/**
 * Get child component by name
 * @param name - Child component name
 * @returns Child component or undefined
 */
getChild(name: string): Component | undefined;

/**
 * Get child component by ID
 * @param id - Child component ID
 * @returns Child component or undefined
 */
getChildById(id: string): Component | undefined;

/**
 * Get all child components
 * @returns Array of child components
 */
children(): Component[];

// Add child components
const controlBar = player.getChild('ControlBar');
const customButton = controlBar.addChild('CustomButton', {
  text: 'My Button'
});

// Remove child
controlBar.removeChild(customButton);

// Get children
const playButton = controlBar.getChild('PlayToggle');
const allChildren = controlBar.children();

/**
 * Add event listener
 * @param type - Event type or types (space-separated)
 * @param listener - Event handler function
 */
on(type: string, listener: EventListener): void;

/**
 * Add one-time event listener  
 * @param type - Event type or types (space-separated)
 * @param listener - Event handler function
 */
one(type: string, listener: EventListener): void;

/**
 * Remove event listener
 * @param type - Event type or types (space-separated)
 * @param listener - Event handler function to remove
 */
off(type?: string, listener?: EventListener): void;

/**
 * Trigger event on component
 * @param event - Event type or Event object
 * @param data - Event data
 */
trigger(event: string | Event, data?: any): void;

// Add event listeners
component.on('click', function(event) {
  console.log('Component clicked');
});

component.on('focus blur', function(event) {
  console.log('Focus changed:', event.type);
});

// One-time listener
component.one('ready', function() {
  console.log('Component ready - fires once');
});

// Trigger custom events
component.trigger('customEvent', { data: 'value' });

// Remove listeners
component.off('click'); // Remove all click listeners
component.off(); // Remove all listeners

/**
 * Add CSS class
 * @param className - Class name to add
 */
addClass(className: string): void;

/**
 * Remove CSS class
 * @param className - Class name to remove
 */
removeClass(className: string): void;

/**
 * Toggle CSS class
 * @param className - Class name to toggle
 * @param predicate - Force add (true) or remove (false)
 */
toggleClass(className: string, predicate?: boolean): void;

/**
 * Check if component has CSS class
 * @param className - Class name to check
 * @returns True if class exists
 */
hasClass(className: string): boolean;

/**
 * Show component
 */
show(): void;

/**
 * Hide component
 */
hide(): void;

/**
 * Get/set component width
 * @param width - Width to set
 * @returns Current width or this for chaining
 */
width(width?: number | string): number | Component;

/**
 * Get/set component height
 * @param height - Height to set
 * @returns Current height or this for chaining
 */
height(height?: number | string): number | Component;

/**
 * Execute callback when component is ready
 * @param callback - Function to call when ready
 */
ready(callback: () => void): void;

/**
 * Dispose component and clean up resources
 */
dispose(): void;

/**
 * Check if component has been disposed
 * @returns True if disposed
 */
isDisposed(): boolean;

/**
 * Get component's ready state
 * @returns True if ready
 */
isReady(): boolean;

// Control Bar Components
ControlBar: typeof Component;
PlayToggle: typeof Component;
MuteToggle: typeof Component;
VolumeControl: typeof Component;
ProgressControl: typeof Component;
FullscreenToggle: typeof Component;
PictureInPictureToggle: typeof Component;

// Menu Components  
Menu: typeof Component;
MenuItem: typeof Component;
MenuButton: typeof Component;

// UI Components
Button: typeof Component;
BigPlayButton: typeof Component;
LoadingSpinner: typeof Component;
ErrorDisplay: typeof Component;
PosterImage: typeof Component;

// Text Track Components
TextTrackDisplay: typeof Component;
TextTrackSettings: typeof Component;
TextTrackMenuItem: typeof Component;

// Extend built-in components
class CustomPlayButton extends videojs.getComponent('PlayToggle') {
  buildCSSClass() {
    return `custom-play ${super.buildCSSClass()}`;
  }
  
  handleClick() {
    super.handleClick();
    console.log('Custom play logic');
  }
}

// Replace default component
videojs.registerComponent('PlayToggle', CustomPlayButton);

// Create custom menu
class QualityMenu extends videojs.getComponent('MenuButton') {
  constructor(player, options) {
    super(player, options);
    this.controlText('Quality');
  }
  
  createItems() {
    return [
      new QualityMenuItem(this.player(), { label: '1080p', quality: '1080p' }),
      new QualityMenuItem(this.player(), { label: '720p', quality: '720p' }),
      new QualityMenuItem(this.player(), { label: '480p', quality: '480p' })
    ];
  }
}

interface ComponentOptions {
  [key: string]: any;
}

interface ChildComponentSpec {
  name?: string;
  component?: string | typeof Component;
  options?: ComponentOptions;
}

interface Component {
  // Core properties
  player_: Player;
  options_: ComponentOptions;
  el_: Element;
  children_: Component[];
  
  // Lifecycle
  ready(callback: () => void): void;
  dispose(): void;
  isDisposed(): boolean;
  
  // DOM management
  el(): Element;
  contentEl(): Element;
  addClass(className: string): void;
  removeClass(className: string): void;
  hasClass(className: string): boolean;
  show(): void;
  hide(): void;
  
  // Child management
  addChild(child: string | Component, options?: object): Component;
  removeChild(component: Component): void;
  getChild(name: string): Component | undefined;
  children(): Component[];
  
  // Event handling
  on(type: string, listener: EventListener): void;
  off(type?: string, listener?: EventListener): void;
  trigger(event: string | Event, data?: any): void;
}