vidply 1.2.0 → 1.2.1

package/src/controls/SettingsDialog.ts

@@ -1,488 +1,488 @@
-/**
- * Settings Dialog Component
- */
-
-import { DOMUtils } from '../utils/DOMUtils.js';
-import { createIconElement } from '../icons/Icons.js';
-import { i18n } from '../i18n/i18n.js';
-import type { Player } from '../core/Player.js';
-import type { CaptionManager } from './CaptionManager.js';
-
-export class SettingsDialog {
-  player: Player;
-  element!: HTMLElement;
-  isOpen: boolean;
-  overlay!: HTMLElement;
-  /**
-   * Trigger element captured on `show()` so we can return focus to the
-   * exact button the user activated when the dialog closes.
-   */
-  private _triggerElement: HTMLElement | null = null;
-  private _keydownHandler: ((e: KeyboardEvent) => void) | null = null;
-
-  constructor(player: Player) {
-    this.player = player;
-    this.isOpen = false;
-
-    this.init();
-  }
-
-  init() {
-    this.createElement();
-  }
-
-  createElement() {
-    // Create overlay
-    // Labelled by the visible <h2> title (created below) rather than a
-    // duplicate aria-label, so the accessible name matches what is on screen
-    // (WCAG 2.4.6, 4.1.2).
-    this.overlay = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-overlay`,
-      attributes: {
-        'role': 'dialog',
-        'aria-modal': 'true',
-        'aria-labelledby': `${this.player.options.classPrefix}-settings-title`
-      }
-    });
-
-    this.overlay.style.display = 'none';
-
-    // Create dialog
-    this.element = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-dialog`
-    });
-
-    // Header
-    const header = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-header`
-    });
-
-    const title = DOMUtils.createElement('h2', {
-      textContent: i18n.t('settings.title'),
-      attributes: {
-        'id': `${this.player.options.classPrefix}-settings-title`
-      }
-    });
-
-    const closeButton = DOMUtils.createElement('button', {
-      className: `${this.player.options.classPrefix}-button ${this.player.options.classPrefix}-settings-close`,
-      attributes: {
-        'type': 'button',
-        'aria-label': i18n.t('settings.close')
-      }
-    });
-    closeButton.appendChild(createIconElement('close'));
-    closeButton.addEventListener('click', () => this.hide());
-
-    header.appendChild(title);
-    header.appendChild(closeButton);
-
-    // Content
-    const content = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-content`
-    });
-
-    content.appendChild(this.createSpeedSettings());
-    
-    if (this.player.captionManager && this.player.captionManager.tracks.length > 0) {
-      content.appendChild(this.createCaptionSettings());
-    }
-
-    // Footer
-    const footer = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-footer`
-    });
-
-    const resetButton = DOMUtils.createElement('button', {
-      className: `${this.player.options.classPrefix}-button`,
-      textContent: i18n.t('settings.reset'),
-      attributes: {
-        'type': 'button'
-      }
-    });
-    resetButton.addEventListener('click', () => this.resetSettings());
-
-    footer.appendChild(resetButton);
-
-    // Assemble dialog
-    this.element.appendChild(header);
-    this.element.appendChild(content);
-    this.element.appendChild(footer);
-
-    this.overlay.appendChild(this.element);
-    this.player.container.appendChild(this.overlay);
-
-    // Attach events
-    this.overlay.addEventListener('click', (e: MouseEvent) => {
-      if (e.target === this.overlay) {
-        this.hide();
-      }
-    });
-
-    // Escape key to close. The handler is stored so `destroy()` can
-    // remove it; the player's lifecycle AbortSignal is also forwarded so
-    // teardown of the player tears down the listener with us.
-    this._keydownHandler = (e: KeyboardEvent) => {
-      if (!this.isOpen) return;
-
-      if (e.key === 'Escape') {
-        this.hide();
-        return;
-      }
-
-      // Trap Tab within the modal dialog so keyboard focus cannot reach the
-      // inert background content behind the overlay (WCAG 2.1.2, 2.4.3).
-      if (e.key === 'Tab') {
-        const focusable = Array.from(
-          this.overlay.querySelectorAll<HTMLElement>(
-            'button, [href], select, input, textarea, [tabindex]:not([tabindex="-1"])'
-          )
-        ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
-        if (focusable.length === 0) return;
-
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (!first || !last) return;
-        const active = document.activeElement as HTMLElement | null;
-
-        if (e.shiftKey && (active === first || !this.overlay.contains(active))) {
-          e.preventDefault();
-          last.focus({ preventScroll: true });
-        } else if (!e.shiftKey && active === last) {
-          e.preventDefault();
-          first.focus({ preventScroll: true });
-        }
-      }
-    };
-    const lifecycleSignal = (this.player as { lifecycleSignal?: AbortSignal }).lifecycleSignal;
-    document.addEventListener('keydown', this._keydownHandler, lifecycleSignal ? { signal: lifecycleSignal } : undefined);
-  }
-
-  formatSpeedLabel(speed: number) {
-    // Special case: 1x is "Normal" (translated)
-    if (speed === 1) {
-      return i18n.t('speeds.normal');
-    }
-    
-    // For other speeds, format with locale-specific decimal separator
-    const speedStr = speed.toLocaleString(i18n.getLanguage(), {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2
-    });
-    
-    return `${speedStr}×`;
-  }
-
-  createSpeedSettings() {
-    const section = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-section`
-    });
-
-    const label = DOMUtils.createElement('label', {
-      textContent: i18n.t('settings.speed'),
-      attributes: {
-        'for': `${this.player.options.classPrefix}-speed-select`
-      }
-    });
-
-    const select = DOMUtils.createElement('select', {
-      className: `${this.player.options.classPrefix}-settings-select`,
-      attributes: {
-        'id': `${this.player.options.classPrefix}-speed-select`
-      }
-    });
-
-    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-    
-    speeds.forEach((speed: number) => {
-      const option = DOMUtils.createElement('option', {
-        textContent: this.formatSpeedLabel(speed),
-        attributes: {
-          'value': String(speed)
-        }
-      });
-      
-      if (speed === this.player.state.playbackSpeed) {
-        (option as HTMLOptionElement).selected = true;
-      }
-      
-      select.appendChild(option);
-    });
-
-    select.addEventListener('change', (e) => {
-      this.player.setPlaybackSpeed(parseFloat((e.target as HTMLSelectElement).value));
-    });
-
-    section.appendChild(label);
-    section.appendChild(select);
-
-    return section;
-  }
-
-  createCaptionSettings() {
-    const section = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-section`
-    });
-
-    const heading = DOMUtils.createElement('h3', {
-      textContent: i18n.t('settings.captions')
-    });
-
-    section.appendChild(heading);
-
-    // Caption track selection
-    const trackLabel = DOMUtils.createElement('label', {
-      textContent: i18n.t('captions.select'),
-      attributes: {
-        'for': `${this.player.options.classPrefix}-caption-track-select`
-      }
-    });
-
-    const trackSelect = DOMUtils.createElement('select', {
-      className: `${this.player.options.classPrefix}-settings-select`,
-      attributes: {
-        'id': `${this.player.options.classPrefix}-caption-track-select`
-      }
-    });
-
-    // Off option
-    const offOption = DOMUtils.createElement('option', {
-      textContent: i18n.t('captions.off'),
-      attributes: { 'value': '-1' }
-    });
-    trackSelect.appendChild(offOption);
-
-    const tracks: ReturnType<CaptionManager['getAvailableTracks']> =
-      this.player.captionManager?.getAvailableTracks() ?? [];
-    tracks.forEach((track) => {
-      const attributes: Record<string, string> = { 'value': String(track.index) };
-      if (track.language) {
-        attributes['lang'] = track.language;
-      }
-      const option = DOMUtils.createElement('option', {
-        textContent: track.label,
-        attributes: attributes
-      });
-      trackSelect.appendChild(option);
-    });
-
-    trackSelect.addEventListener('change', (e) => {
-      const index = parseInt((e.target as HTMLSelectElement).value);
-      if (index === -1) {
-        this.player.disableCaptions();
-      } else {
-        this.player.captionManager?.switchTrack(index);
-      }
-    });
-
-    section.appendChild(trackLabel);
-    section.appendChild(trackSelect);
-
-    // Font size
-    section.appendChild(this.createCaptionStyleControl('fontSize', i18n.t('captions.fontSize'), [
-      { label: i18n.t('fontSizes.small'), value: '87.5%' },
-      { label: i18n.t('fontSizes.normal'), value: '100%' },
-      { label: i18n.t('fontSizes.large'), value: '125%' },
-      { label: i18n.t('fontSizes.xlarge'), value: '150%' }
-    ]));
-
-    // Font family
-    section.appendChild(this.createCaptionStyleControl('fontFamily', i18n.t('captions.fontFamily'), [
-      { label: i18n.t('fontFamilies.sansSerif'), value: 'sans-serif' },
-      { label: i18n.t('fontFamilies.serif'), value: 'serif' },
-      { label: i18n.t('fontFamilies.monospace'), value: 'monospace' }
-    ]));
-
-    // Color controls
-    section.appendChild(this.createColorControl('color', i18n.t('captions.color')));
-    section.appendChild(this.createColorControl('backgroundColor', i18n.t('captions.backgroundColor')));
-
-    // Opacity
-    section.appendChild(this.createRangeControl('opacity', i18n.t('captions.opacity'), 0, 1, 0.1));
-
-    return section;
-  }
-
-  createCaptionStyleControl(property: string, label: string, options: Array<{ label: string; value: string }>) {
-    const wrapper = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-control`
-    });
-
-    const labelEl = DOMUtils.createElement('label', {
-      textContent: label,
-      attributes: {
-        'for': `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-
-    const select = DOMUtils.createElement('select', {
-      className: `${this.player.options.classPrefix}-settings-select`,
-      attributes: {
-        'id': `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-
-    options.forEach((opt: { label: string; value: string }) => {
-      const option = DOMUtils.createElement('option', {
-        textContent: opt.label,
-        attributes: { 'value': opt.value }
-      });
-      
-      if (opt.value === this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`]) {
-        (option as HTMLOptionElement).selected = true;
-      }
-      
-      select.appendChild(option);
-    });
-
-    select.addEventListener('change', (e) => {
-      this.player.captionManager?.setCaptionStyle(property, (e.target as HTMLSelectElement).value);
-    });
-
-    wrapper.appendChild(labelEl);
-    wrapper.appendChild(select);
-
-    return wrapper;
-  }
-
-  createColorControl(property: string, label: string) {
-    const wrapper = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-control`
-    });
-
-    const labelEl = DOMUtils.createElement('label', {
-      textContent: label,
-      attributes: {
-        'for': `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-
-    const input = DOMUtils.createElement('input', {
-      className: `${this.player.options.classPrefix}-settings-color`,
-      attributes: {
-        'type': 'color',
-        'id': `${this.player.options.classPrefix}-caption-${property}`,
-        'value': String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`] ?? '')
-      }
-    });
-
-    input.addEventListener('change', (e) => {
-      this.player.captionManager?.setCaptionStyle(property, (e.target as HTMLInputElement).value);
-    });
-
-    wrapper.appendChild(labelEl);
-    wrapper.appendChild(input);
-
-    return wrapper;
-  }
-
-  createRangeControl(property: string, label: string, min: number, max: number, step: number) {
-    const wrapper = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-settings-control`
-    });
-
-    const labelEl = DOMUtils.createElement('label', {
-      textContent: label,
-      attributes: {
-        'for': `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-
-    const input = DOMUtils.createElement('input', {
-      className: `${this.player.options.classPrefix}-settings-range`,
-      attributes: {
-        'type': 'range',
-        'id': `${this.player.options.classPrefix}-caption-${property}`,
-        'min': String(min),
-        'max': String(max),
-        'step': String(step),
-        'value': String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`])
-      }
-    });
-
-    const valueDisplay = DOMUtils.createElement('span', {
-      className: `${this.player.options.classPrefix}-settings-value`,
-      textContent: String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`])
-    });
-
-    input.addEventListener('input', (e) => {
-      const value = parseFloat((e.target as HTMLInputElement).value);
-      valueDisplay.textContent = value.toFixed(1);
-      this.player.captionManager?.setCaptionStyle(property, value);
-    });
-
-    wrapper.appendChild(labelEl);
-    wrapper.appendChild(input);
-    wrapper.appendChild(valueDisplay);
-
-    return wrapper;
-  }
-
-  resetSettings() {
-    // Reset to default values
-    this.player.setPlaybackSpeed(1);
-    
-    if (this.player.captionManager) {
-      this.player.captionManager.setCaptionStyle('fontSize', '100%');
-      this.player.captionManager.setCaptionStyle('fontFamily', 'sans-serif');
-      this.player.captionManager.setCaptionStyle('color', '#FFFFFF');
-      this.player.captionManager.setCaptionStyle('backgroundColor', '#000000');
-      this.player.captionManager.setCaptionStyle('opacity', 0.8);
-    }
-
-    // Refresh dialog
-    this.hide();
-    setTimeout(() => this.show(), 100);
-  }
-
-  show() {
-    // Capture the element that opened the dialog so focus can be restored
-    // to it when the dialog closes.
-    const active = (typeof document !== 'undefined' ? document.activeElement : null) as HTMLElement | null;
-    this._triggerElement = active && typeof active.focus === 'function' ? active : null;
-
-    this.overlay.style.display = 'flex';
-    this.isOpen = true;
-    
-    const closeButton = this.element.querySelector<HTMLElement>(`.${this.player.options.classPrefix}-settings-close`);
-    if (closeButton) {
-      closeButton.focus();
-    }
-    
-    this.player.emit('settingsopen');
-  }
-
-  hide() {
-    this.overlay.style.display = 'none';
-    this.isOpen = false;
-    
-    // Return focus to whichever element opened the dialog. Falls back to
-    // the player container if the trigger was removed from the DOM in the
-    // meantime.
-    const trigger = this._triggerElement;
-    this._triggerElement = null;
-    if (trigger && document.contains(trigger)) {
-      try {
-        trigger.focus({ preventScroll: true });
-      } catch {
-        this.player.container.focus();
-      }
-    } else if (this.player.container) {
-      this.player.container.focus();
-    }
-    
-    this.player.emit('settingsclose');
-  }
-
-  destroy() {
-    if (this._keydownHandler) {
-      document.removeEventListener('keydown', this._keydownHandler);
-      this._keydownHandler = null;
-    }
-    if (this.overlay && this.overlay.parentNode) {
-      this.overlay.parentNode.removeChild(this.overlay);
-    }
-    this._triggerElement = null;
-  }
-}
-
+/**
+ * Settings Dialog Component
+ */
+
+import { DOMUtils } from '../utils/DOMUtils.js';
+import { createIconElement } from '../icons/Icons.js';
+import { i18n } from '../i18n/i18n.js';
+import type { Player } from '../core/Player.js';
+import type { CaptionManager } from './CaptionManager.js';
+
+export class SettingsDialog {
+  player: Player;
+  element!: HTMLElement;
+  isOpen: boolean;
+  overlay!: HTMLElement;
+  /**
+   * Trigger element captured on `show()` so we can return focus to the
+   * exact button the user activated when the dialog closes.
+   */
+  private _triggerElement: HTMLElement | null = null;
+  private _keydownHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  constructor(player: Player) {
+    this.player = player;
+    this.isOpen = false;
+
+    this.init();
+  }
+
+  init() {
+    this.createElement();
+  }
+
+  createElement() {
+    // Create overlay
+    // Labelled by the visible <h2> title (created below) rather than a
+    // duplicate aria-label, so the accessible name matches what is on screen
+    // (WCAG 2.4.6, 4.1.2).
+    this.overlay = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-overlay`,
+      attributes: {
+        'role': 'dialog',
+        'aria-modal': 'true',
+        'aria-labelledby': `${this.player.options.classPrefix}-settings-title`
+      }
+    });
+
+    this.overlay.style.display = 'none';
+
+    // Create dialog
+    this.element = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-dialog`
+    });
+
+    // Header
+    const header = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-header`
+    });
+
+    const title = DOMUtils.createElement('h2', {
+      textContent: i18n.t('settings.title'),
+      attributes: {
+        'id': `${this.player.options.classPrefix}-settings-title`
+      }
+    });
+
+    const closeButton = DOMUtils.createElement('button', {
+      className: `${this.player.options.classPrefix}-button ${this.player.options.classPrefix}-settings-close`,
+      attributes: {
+        'type': 'button',
+        'aria-label': i18n.t('settings.close')
+      }
+    });
+    closeButton.appendChild(createIconElement('close'));
+    closeButton.addEventListener('click', () => this.hide());
+
+    header.appendChild(title);
+    header.appendChild(closeButton);
+
+    // Content
+    const content = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-content`
+    });
+
+    content.appendChild(this.createSpeedSettings());
+    
+    if (this.player.captionManager && this.player.captionManager.tracks.length > 0) {
+      content.appendChild(this.createCaptionSettings());
+    }
+
+    // Footer
+    const footer = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-footer`
+    });
+
+    const resetButton = DOMUtils.createElement('button', {
+      className: `${this.player.options.classPrefix}-button`,
+      textContent: i18n.t('settings.reset'),
+      attributes: {
+        'type': 'button'
+      }
+    });
+    resetButton.addEventListener('click', () => this.resetSettings());
+
+    footer.appendChild(resetButton);
+
+    // Assemble dialog
+    this.element.appendChild(header);
+    this.element.appendChild(content);
+    this.element.appendChild(footer);
+
+    this.overlay.appendChild(this.element);
+    this.player.container.appendChild(this.overlay);
+
+    // Attach events
+    this.overlay.addEventListener('click', (e: MouseEvent) => {
+      if (e.target === this.overlay) {
+        this.hide();
+      }
+    });
+
+    // Escape key to close. The handler is stored so `destroy()` can
+    // remove it; the player's lifecycle AbortSignal is also forwarded so
+    // teardown of the player tears down the listener with us.
+    this._keydownHandler = (e: KeyboardEvent) => {
+      if (!this.isOpen) return;
+
+      if (e.key === 'Escape') {
+        this.hide();
+        return;
+      }
+
+      // Trap Tab within the modal dialog so keyboard focus cannot reach the
+      // inert background content behind the overlay (WCAG 2.1.2, 2.4.3).
+      if (e.key === 'Tab') {
+        const focusable = Array.from(
+          this.overlay.querySelectorAll<HTMLElement>(
+            'button, [href], select, input, textarea, [tabindex]:not([tabindex="-1"])'
+          )
+        ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
+        if (focusable.length === 0) return;
+
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (!first || !last) return;
+        const active = document.activeElement as HTMLElement | null;
+
+        if (e.shiftKey && (active === first || !this.overlay.contains(active))) {
+          e.preventDefault();
+          last.focus({ preventScroll: true });
+        } else if (!e.shiftKey && active === last) {
+          e.preventDefault();
+          first.focus({ preventScroll: true });
+        }
+      }
+    };
+    const lifecycleSignal = (this.player as { lifecycleSignal?: AbortSignal }).lifecycleSignal;
+    document.addEventListener('keydown', this._keydownHandler, lifecycleSignal ? { signal: lifecycleSignal } : undefined);
+  }
+
+  formatSpeedLabel(speed: number) {
+    // Special case: 1x is "Normal" (translated)
+    if (speed === 1) {
+      return i18n.t('speeds.normal');
+    }
+    
+    // For other speeds, format with locale-specific decimal separator
+    const speedStr = speed.toLocaleString(i18n.getLanguage(), {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    });
+    
+    return `${speedStr}×`;
+  }
+
+  createSpeedSettings() {
+    const section = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-section`
+    });
+
+    const label = DOMUtils.createElement('label', {
+      textContent: i18n.t('settings.speed'),
+      attributes: {
+        'for': `${this.player.options.classPrefix}-speed-select`
+      }
+    });
+
+    const select = DOMUtils.createElement('select', {
+      className: `${this.player.options.classPrefix}-settings-select`,
+      attributes: {
+        'id': `${this.player.options.classPrefix}-speed-select`
+      }
+    });
+
+    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    
+    speeds.forEach((speed: number) => {
+      const option = DOMUtils.createElement('option', {
+        textContent: this.formatSpeedLabel(speed),
+        attributes: {
+          'value': String(speed)
+        }
+      });
+      
+      if (speed === this.player.state.playbackSpeed) {
+        (option as HTMLOptionElement).selected = true;
+      }
+      
+      select.appendChild(option);
+    });
+
+    select.addEventListener('change', (e) => {
+      this.player.setPlaybackSpeed(parseFloat((e.target as HTMLSelectElement).value));
+    });
+
+    section.appendChild(label);
+    section.appendChild(select);
+
+    return section;
+  }
+
+  createCaptionSettings() {
+    const section = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-section`
+    });
+
+    const heading = DOMUtils.createElement('h3', {
+      textContent: i18n.t('settings.captions')
+    });
+
+    section.appendChild(heading);
+
+    // Caption track selection
+    const trackLabel = DOMUtils.createElement('label', {
+      textContent: i18n.t('captions.select'),
+      attributes: {
+        'for': `${this.player.options.classPrefix}-caption-track-select`
+      }
+    });
+
+    const trackSelect = DOMUtils.createElement('select', {
+      className: `${this.player.options.classPrefix}-settings-select`,
+      attributes: {
+        'id': `${this.player.options.classPrefix}-caption-track-select`
+      }
+    });
+
+    // Off option
+    const offOption = DOMUtils.createElement('option', {
+      textContent: i18n.t('captions.off'),
+      attributes: { 'value': '-1' }
+    });
+    trackSelect.appendChild(offOption);
+
+    const tracks: ReturnType<CaptionManager['getAvailableTracks']> =
+      this.player.captionManager?.getAvailableTracks() ?? [];
+    tracks.forEach((track) => {
+      const attributes: Record<string, string> = { 'value': String(track.index) };
+      if (track.language) {
+        attributes['lang'] = track.language;
+      }
+      const option = DOMUtils.createElement('option', {
+        textContent: track.label,
+        attributes: attributes
+      });
+      trackSelect.appendChild(option);
+    });
+
+    trackSelect.addEventListener('change', (e) => {
+      const index = parseInt((e.target as HTMLSelectElement).value);
+      if (index === -1) {
+        this.player.disableCaptions();
+      } else {
+        this.player.captionManager?.switchTrack(index);
+      }
+    });
+
+    section.appendChild(trackLabel);
+    section.appendChild(trackSelect);
+
+    // Font size
+    section.appendChild(this.createCaptionStyleControl('fontSize', i18n.t('captions.fontSize'), [
+      { label: i18n.t('fontSizes.small'), value: '87.5%' },
+      { label: i18n.t('fontSizes.normal'), value: '100%' },
+      { label: i18n.t('fontSizes.large'), value: '125%' },
+      { label: i18n.t('fontSizes.xlarge'), value: '150%' }
+    ]));
+
+    // Font family
+    section.appendChild(this.createCaptionStyleControl('fontFamily', i18n.t('captions.fontFamily'), [
+      { label: i18n.t('fontFamilies.sansSerif'), value: 'sans-serif' },
+      { label: i18n.t('fontFamilies.serif'), value: 'serif' },
+      { label: i18n.t('fontFamilies.monospace'), value: 'monospace' }
+    ]));
+
+    // Color controls
+    section.appendChild(this.createColorControl('color', i18n.t('captions.color')));
+    section.appendChild(this.createColorControl('backgroundColor', i18n.t('captions.backgroundColor')));
+
+    // Opacity
+    section.appendChild(this.createRangeControl('opacity', i18n.t('captions.opacity'), 0, 1, 0.1));
+
+    return section;
+  }
+
+  createCaptionStyleControl(property: string, label: string, options: Array<{ label: string; value: string }>) {
+    const wrapper = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-control`
+    });
+
+    const labelEl = DOMUtils.createElement('label', {
+      textContent: label,
+      attributes: {
+        'for': `${this.player.options.classPrefix}-caption-${property}`
+      }
+    });
+
+    const select = DOMUtils.createElement('select', {
+      className: `${this.player.options.classPrefix}-settings-select`,
+      attributes: {
+        'id': `${this.player.options.classPrefix}-caption-${property}`
+      }
+    });
+
+    options.forEach((opt: { label: string; value: string }) => {
+      const option = DOMUtils.createElement('option', {
+        textContent: opt.label,
+        attributes: { 'value': opt.value }
+      });
+      
+      if (opt.value === this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`]) {
+        (option as HTMLOptionElement).selected = true;
+      }
+      
+      select.appendChild(option);
+    });
+
+    select.addEventListener('change', (e) => {
+      this.player.captionManager?.setCaptionStyle(property, (e.target as HTMLSelectElement).value);
+    });
+
+    wrapper.appendChild(labelEl);
+    wrapper.appendChild(select);
+
+    return wrapper;
+  }
+
+  createColorControl(property: string, label: string) {
+    const wrapper = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-control`
+    });
+
+    const labelEl = DOMUtils.createElement('label', {
+      textContent: label,
+      attributes: {
+        'for': `${this.player.options.classPrefix}-caption-${property}`
+      }
+    });
+
+    const input = DOMUtils.createElement('input', {
+      className: `${this.player.options.classPrefix}-settings-color`,
+      attributes: {
+        'type': 'color',
+        'id': `${this.player.options.classPrefix}-caption-${property}`,
+        'value': String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`] ?? '')
+      }
+    });
+
+    input.addEventListener('change', (e) => {
+      this.player.captionManager?.setCaptionStyle(property, (e.target as HTMLInputElement).value);
+    });
+
+    wrapper.appendChild(labelEl);
+    wrapper.appendChild(input);
+
+    return wrapper;
+  }
+
+  createRangeControl(property: string, label: string, min: number, max: number, step: number) {
+    const wrapper = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-settings-control`
+    });
+
+    const labelEl = DOMUtils.createElement('label', {
+      textContent: label,
+      attributes: {
+        'for': `${this.player.options.classPrefix}-caption-${property}`
+      }
+    });
+
+    const input = DOMUtils.createElement('input', {
+      className: `${this.player.options.classPrefix}-settings-range`,
+      attributes: {
+        'type': 'range',
+        'id': `${this.player.options.classPrefix}-caption-${property}`,
+        'min': String(min),
+        'max': String(max),
+        'step': String(step),
+        'value': String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`])
+      }
+    });
+
+    const valueDisplay = DOMUtils.createElement('span', {
+      className: `${this.player.options.classPrefix}-settings-value`,
+      textContent: String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`])
+    });
+
+    input.addEventListener('input', (e) => {
+      const value = parseFloat((e.target as HTMLInputElement).value);
+      valueDisplay.textContent = value.toFixed(1);
+      this.player.captionManager?.setCaptionStyle(property, value);
+    });
+
+    wrapper.appendChild(labelEl);
+    wrapper.appendChild(input);
+    wrapper.appendChild(valueDisplay);
+
+    return wrapper;
+  }
+
+  resetSettings() {
+    // Reset to default values
+    this.player.setPlaybackSpeed(1);
+    
+    if (this.player.captionManager) {
+      this.player.captionManager.setCaptionStyle('fontSize', '100%');
+      this.player.captionManager.setCaptionStyle('fontFamily', 'sans-serif');
+      this.player.captionManager.setCaptionStyle('color', '#FFFFFF');
+      this.player.captionManager.setCaptionStyle('backgroundColor', '#000000');
+      this.player.captionManager.setCaptionStyle('opacity', 0.8);
+    }
+
+    // Refresh dialog
+    this.hide();
+    setTimeout(() => this.show(), 100);
+  }
+
+  show() {
+    // Capture the element that opened the dialog so focus can be restored
+    // to it when the dialog closes.
+    const active = (typeof document !== 'undefined' ? document.activeElement : null) as HTMLElement | null;
+    this._triggerElement = active && typeof active.focus === 'function' ? active : null;
+
+    this.overlay.style.display = 'flex';
+    this.isOpen = true;
+    
+    const closeButton = this.element.querySelector<HTMLElement>(`.${this.player.options.classPrefix}-settings-close`);
+    if (closeButton) {
+      closeButton.focus();
+    }
+    
+    this.player.emit('settingsopen');
+  }
+
+  hide() {
+    this.overlay.style.display = 'none';
+    this.isOpen = false;
+    
+    // Return focus to whichever element opened the dialog. Falls back to
+    // the player container if the trigger was removed from the DOM in the
+    // meantime.
+    const trigger = this._triggerElement;
+    this._triggerElement = null;
+    if (trigger && document.contains(trigger)) {
+      try {
+        trigger.focus({ preventScroll: true });
+      } catch {
+        this.player.container.focus();
+      }
+    } else if (this.player.container) {
+      this.player.container.focus();
+    }
+    
+    this.player.emit('settingsclose');
+  }
+
+  destroy() {
+    if (this._keydownHandler) {
+      document.removeEventListener('keydown', this._keydownHandler);
+      this._keydownHandler = null;
+    }
+    if (this.overlay && this.overlay.parentNode) {
+      this.overlay.parentNode.removeChild(this.overlay);
+    }
+    this._triggerElement = null;
+  }
+}
+