vidply 1.0.28 → 1.0.30

package/dist/dev/vidply.TranscriptManager-UTJBQC5B.js

@@ -1,1744 +0,0 @@
-/*!
- * Universal, Accessible Video Player
- * (c) 2025 Matthias Peltzer
- * Released under GPL-2.0-or-later License
- */
-import {
-  DOMUtils,
-  DraggableResizable,
-  StorageManager,
-  TimeUtils,
-  attachMenuKeyboardNavigation,
-  createIconElement,
-  createLabeledSelect,
-  createMenuItem,
-  focusElement,
-  i18n,
-  preventDragOnElement
-} from "./vidply.chunk-5663PYKK.js";
-
-// src/controls/TranscriptManager.js
-var TranscriptManager = class {
-  constructor(player) {
-    this.player = player;
-    this.transcriptWindow = null;
-    this.transcriptEntries = [];
-    this.metadataCues = [];
-    this.currentActiveEntry = null;
-    this.isVisible = false;
-    this.storage = new StorageManager("vidply");
-    this.draggableResizable = null;
-    this.settingsMenuVisible = false;
-    this.settingsMenu = null;
-    this.settingsButton = null;
-    this.settingsMenuJustOpened = false;
-    this.resizeOptionButton = null;
-    this.resizeOptionText = null;
-    this.dragOptionButton = null;
-    this.dragOptionText = null;
-    this.resizeModeIndicator = null;
-    this.resizeModeIndicatorTimeout = null;
-    this.transcriptResizeHandles = [];
-    this.liveRegion = null;
-    this.styleDialog = null;
-    this.styleDialogVisible = false;
-    this.styleDialogJustOpened = false;
-    this.languageSelector = null;
-    this.languageLabel = null;
-    this.currentTranscriptLanguage = null;
-    this.availableTranscriptLanguages = [];
-    this.languageSelectorHandler = null;
-    const savedPreferences = this.storage.getTranscriptPreferences();
-    this.autoscrollEnabled = savedPreferences?.autoscroll !== void 0 ? savedPreferences.autoscroll : true;
-    this.showTimestamps = savedPreferences?.showTimestamps !== void 0 ? savedPreferences.showTimestamps : false;
-    this.transcriptStyle = {
-      fontSize: savedPreferences?.fontSize || this.player.options.transcriptFontSize || "100%",
-      fontFamily: savedPreferences?.fontFamily || this.player.options.transcriptFontFamily || "sans-serif",
-      color: savedPreferences?.color || this.player.options.transcriptColor || "#ffffff",
-      backgroundColor: savedPreferences?.backgroundColor || this.player.options.transcriptBackgroundColor || "#1e1e1e",
-      opacity: savedPreferences?.opacity ?? this.player.options.transcriptOpacity ?? 0.98
-    };
-    this.handlers = {
-      timeupdate: () => this.updateActiveEntry(),
-      audiodescriptionenabled: () => {
-        if (this.isVisible) {
-          this.loadTranscriptData();
-        }
-      },
-      audiodescriptiondisabled: () => {
-        if (this.isVisible) {
-          this.loadTranscriptData();
-        }
-      },
-      resize: null,
-      settingsClick: null,
-      settingsKeydown: null,
-      documentClick: null,
-      styleDialogKeydown: null
-    };
-    this.timeouts = /* @__PURE__ */ new Set();
-    this.init();
-  }
-  init() {
-    this.setupMetadataHandlingOnLoad();
-    this.player.on("timeupdate", this.handlers.timeupdate);
-    this.player.on("audiodescriptionenabled", this.handlers.audiodescriptionenabled);
-    this.player.on("audiodescriptiondisabled", this.handlers.audiodescriptiondisabled);
-    this.player.on("fullscreenchange", () => {
-      if (this.isVisible) {
-        const isMobile = window.innerWidth < 768;
-        if (isMobile) {
-          this.setupDragAndDrop();
-        }
-        if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
-          this.setManagedTimeout(() => this.positionTranscript(), 100);
-        }
-      }
-    });
-  }
-  /**
-   * Toggle transcript window visibility
-   */
-  toggleTranscript() {
-    if (this.isVisible) {
-      this.hideTranscript();
-    } else {
-      this.showTranscript();
-    }
-  }
-  /**
-   * Show transcript window
-   */
-  showTranscript() {
-    if (this.transcriptWindow) {
-      this.transcriptWindow.style.display = "flex";
-      this.isVisible = true;
-      if (this.player.controlBar && typeof this.player.controlBar.updateTranscriptButton === "function") {
-        this.player.controlBar.updateTranscriptButton();
-      }
-      focusElement(this.settingsButton, { delay: 150 });
-      return;
-    }
-    this.createTranscriptWindow();
-    this.loadTranscriptData();
-    if (this.transcriptWindow) {
-      this.transcriptWindow.style.display = "flex";
-      if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
-        this.setManagedTimeout(() => this.positionTranscript(), 0);
-      }
-      focusElement(this.settingsButton, { delay: 150 });
-    }
-    this.isVisible = true;
-  }
-  /**
-   * Hide transcript window
-   */
-  hideTranscript({ focusButton = false } = {}) {
-    if (this.transcriptWindow) {
-      this.transcriptWindow.style.display = "none";
-      this.isVisible = false;
-    }
-    if (this.draggableResizable && this.draggableResizable.pointerResizeMode) {
-      this.draggableResizable.disablePointerResizeMode();
-      this.updateResizeOptionState();
-    }
-    this.hideResizeModeIndicator();
-    this.announceLive("");
-    if (this.player.controlBar && typeof this.player.controlBar.updateTranscriptButton === "function") {
-      this.player.controlBar.updateTranscriptButton();
-    }
-    if (focusButton) {
-      const transcriptButton = this.player.controlBar?.controls?.transcript;
-      if (transcriptButton && typeof transcriptButton.focus === "function") {
-        transcriptButton.focus({ preventScroll: true });
-      }
-    }
-  }
-  /**
-   * Create the transcript window UI
-   */
-  createTranscriptWindow() {
-    this.transcriptWindow = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-window`,
-      attributes: {
-        "role": "dialog",
-        "aria-label": "Video Transcript",
-        "tabindex": "-1"
-      }
-    });
-    this.transcriptHeader = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-header`,
-      attributes: {
-        "tabindex": "0"
-      }
-    });
-    this.headerLeft = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-header-left`
-    });
-    const settingsAriaLabel = i18n.t("transcript.settingsMenu");
-    this.settingsButton = DOMUtils.createElement("button", {
-      className: `${this.player.options.classPrefix}-transcript-settings`,
-      attributes: {
-        "type": "button",
-        "aria-label": settingsAriaLabel,
-        "aria-expanded": "false"
-      }
-    });
-    this.settingsButton.appendChild(createIconElement("settings"));
-    DOMUtils.attachTooltip(this.settingsButton, settingsAriaLabel, this.player.options.classPrefix);
-    this.handlers.settingsClick = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (this.settingsMenuVisible) {
-        this.hideSettingsMenu();
-      } else {
-        this.showSettingsMenu();
-      }
-    };
-    this.settingsButton.addEventListener("click", this.handlers.settingsClick);
-    this.handlers.settingsKeydown = (e) => {
-      if (e.key === "d" || e.key === "D") {
-        e.preventDefault();
-        e.stopPropagation();
-        this.toggleKeyboardDragMode();
-      } else if (e.key === "r" || e.key === "R") {
-        e.preventDefault();
-        e.stopPropagation();
-        this.toggleResizeMode();
-      } else if (e.key === "Escape" && this.settingsMenuVisible) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.hideSettingsMenu();
-      }
-    };
-    this.settingsButton.addEventListener("keydown", this.handlers.settingsKeydown);
-    const title = DOMUtils.createElement("h3", {
-      textContent: `${i18n.t("transcript.title")}. ${i18n.t("transcript.dragResizePrompt")}`
-    });
-    const autoscrollId = `${this.player.options.classPrefix}-transcript-autoscroll-${Date.now()}`;
-    const autoscrollLabel = DOMUtils.createElement("label", {
-      className: `${this.player.options.classPrefix}-transcript-autoscroll-label`,
-      attributes: {
-        "for": autoscrollId
-      }
-    });
-    this.autoscrollCheckbox = DOMUtils.createElement("input", {
-      attributes: {
-        "id": autoscrollId,
-        "type": "checkbox"
-      }
-    });
-    if (this.autoscrollEnabled) {
-      this.autoscrollCheckbox.checked = true;
-    }
-    const autoscrollText = DOMUtils.createElement("span", {
-      textContent: i18n.t("transcript.autoscroll"),
-      className: `${this.player.options.classPrefix}-transcript-autoscroll-text`
-    });
-    autoscrollLabel.appendChild(this.autoscrollCheckbox);
-    autoscrollLabel.appendChild(autoscrollText);
-    this.autoscrollCheckbox.addEventListener("change", (e) => {
-      this.autoscrollEnabled = e.target.checked;
-      this.saveAutoscrollPreference();
-    });
-    this.transcriptHeader.appendChild(title);
-    this.headerLeft.appendChild(this.settingsButton);
-    this.headerLeft.appendChild(autoscrollLabel);
-    const selectId = `${this.player.options.classPrefix}-transcript-language-select-${Date.now()}`;
-    const { label: languageLabel, select: languageSelector } = createLabeledSelect({
-      classPrefix: this.player.options.classPrefix,
-      labelClass: `${this.player.options.classPrefix}-transcript-language-label`,
-      selectClass: `${this.player.options.classPrefix}-transcript-language-select`,
-      labelText: "settings.language",
-      selectId,
-      hidden: false
-      // Don't hide individual elements, we'll hide the wrapper instead
-    });
-    this.languageLabel = languageLabel;
-    this.languageSelector = languageSelector;
-    const languageSelectorWrapper = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-language-wrapper`,
-      attributes: {
-        "style": "display: none;"
-        // Hidden until we detect multiple languages
-      }
-    });
-    languageSelectorWrapper.appendChild(this.languageLabel);
-    languageSelectorWrapper.appendChild(this.languageSelector);
-    this.languageSelectorWrapper = languageSelectorWrapper;
-    preventDragOnElement(languageSelectorWrapper);
-    this.headerLeft.appendChild(languageSelectorWrapper);
-    const closeAriaLabel = i18n.t("transcript.close");
-    const closeButton = DOMUtils.createElement("button", {
-      className: `${this.player.options.classPrefix}-transcript-close`,
-      attributes: {
-        "type": "button",
-        "aria-label": closeAriaLabel
-      }
-    });
-    closeButton.appendChild(createIconElement("close"));
-    DOMUtils.attachTooltip(closeButton, closeAriaLabel, this.player.options.classPrefix);
-    closeButton.addEventListener("click", () => this.hideTranscript({ focusButton: true }));
-    this.transcriptHeader.appendChild(this.headerLeft);
-    this.transcriptHeader.appendChild(closeButton);
-    this.transcriptContent = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-content`
-    });
-    this.transcriptWindow.appendChild(this.transcriptHeader);
-    this.transcriptWindow.appendChild(this.transcriptContent);
-    this.createResizeHandles();
-    this.liveRegion = DOMUtils.createElement("div", {
-      className: "vidply-sr-only",
-      attributes: {
-        "aria-live": "polite",
-        "aria-atomic": "true"
-      }
-    });
-    this.transcriptWindow.appendChild(this.liveRegion);
-    this.player.container.appendChild(this.transcriptWindow);
-    this.setupDragAndDrop();
-    if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
-      this.positionTranscript();
-    }
-    this.handlers.documentClick = (e) => {
-      if (this.settingsMenuJustOpened) {
-        return;
-      }
-      if (this.styleDialogJustOpened) {
-        return;
-      }
-      if (this.settingsButton && this.settingsButton.contains(e.target)) {
-        return;
-      }
-      if (this.settingsMenu && this.settingsMenu.contains(e.target)) {
-        return;
-      }
-      if (this.settingsMenuVisible) {
-        this.hideSettingsMenu();
-      }
-      if (this.styleDialogVisible && this.styleDialog && !this.styleDialog.contains(e.target)) {
-        this.hideStyleDialog();
-      }
-    };
-    this.documentClickHandlerAdded = false;
-    let resizeTimeout;
-    this.handlers.resize = () => {
-      if (resizeTimeout) {
-        this.clearManagedTimeout(resizeTimeout);
-      }
-      resizeTimeout = this.setManagedTimeout(() => {
-        if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
-          this.positionTranscript();
-        }
-      }, 100);
-    };
-    window.addEventListener("resize", this.handlers.resize);
-  }
-  createResizeHandles() {
-    if (!this.transcriptWindow) return;
-    const directions = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
-    this.transcriptResizeHandles = directions.map((direction) => {
-      const handle = DOMUtils.createElement("div", {
-        className: `${this.player.options.classPrefix}-transcript-resize-handle ${this.player.options.classPrefix}-transcript-resize-${direction}`,
-        attributes: {
-          "data-direction": direction,
-          "data-vidply-managed-resize": "true",
-          "aria-hidden": "true"
-        }
-      });
-      handle.style.display = "none";
-      this.transcriptWindow.appendChild(handle);
-      return handle;
-    });
-  }
-  /**
-   * Position transcript window next to video
-   */
-  positionTranscript() {
-    if (!this.transcriptWindow || !this.player.videoWrapper || !this.isVisible) return;
-    if (this.draggableResizable && this.draggableResizable.manuallyPositioned) {
-      return;
-    }
-    const isMobile = window.innerWidth < 768;
-    const videoRect = this.player.videoWrapper.getBoundingClientRect();
-    const isFullscreen = this.player.state.fullscreen;
-    if (isMobile && !isFullscreen) {
-      this.transcriptWindow.style.position = "relative";
-      this.transcriptWindow.style.left = "0";
-      this.transcriptWindow.style.right = "0";
-      this.transcriptWindow.style.bottom = "auto";
-      this.transcriptWindow.style.top = "auto";
-      this.transcriptWindow.style.width = "100%";
-      this.transcriptWindow.style.maxWidth = "100%";
-      this.transcriptWindow.style.maxHeight = "400px";
-      this.transcriptWindow.style.height = "auto";
-      this.transcriptWindow.style.borderRadius = "0";
-      this.transcriptWindow.style.transform = "none";
-      this.transcriptWindow.style.border = "none";
-      this.transcriptWindow.style.borderTop = "1px solid var(--vidply-border-light)";
-      this.transcriptWindow.style.removeProperty("border-right");
-      this.transcriptWindow.style.removeProperty("border-bottom");
-      this.transcriptWindow.style.removeProperty("border-left");
-      this.transcriptWindow.style.removeProperty("border-image");
-      this.transcriptWindow.style.removeProperty("border-image-source");
-      this.transcriptWindow.style.removeProperty("border-image-slice");
-      this.transcriptWindow.style.removeProperty("border-image-width");
-      this.transcriptWindow.style.removeProperty("border-image-outset");
-      this.transcriptWindow.style.removeProperty("border-image-repeat");
-      this.transcriptWindow.style.boxShadow = "none";
-      if (this.transcriptHeader) {
-        this.transcriptHeader.style.cursor = "default";
-      }
-      if (this.transcriptWindow.parentNode !== this.player.container) {
-        this.player.container.appendChild(this.transcriptWindow);
-      }
-    } else if (isFullscreen) {
-      this.transcriptWindow.style.position = "fixed";
-      this.transcriptWindow.style.left = "auto";
-      this.transcriptWindow.style.right = "20px";
-      this.transcriptWindow.style.bottom = "80px";
-      this.transcriptWindow.style.top = "auto";
-      this.transcriptWindow.style.maxHeight = "calc(100vh - 180px)";
-      this.transcriptWindow.style.height = "auto";
-      const fullscreenMinWidth = 260;
-      const fullscreenAvailable = Math.max(fullscreenMinWidth, window.innerWidth - 40);
-      const fullscreenDesired = parseFloat(this.transcriptWindow.style.width) || 400;
-      const fullscreenWidth = Math.max(fullscreenMinWidth, Math.min(fullscreenDesired, fullscreenAvailable));
-      this.transcriptWindow.style.width = `${fullscreenWidth}px`;
-      this.transcriptWindow.style.maxWidth = "none";
-      this.transcriptWindow.style.borderRadius = "8px";
-      this.transcriptWindow.style.border = "1px solid var(--vidply-border)";
-      this.transcriptWindow.style.removeProperty("border-top");
-      this.transcriptWindow.style.removeProperty("border-right");
-      this.transcriptWindow.style.removeProperty("border-bottom");
-      this.transcriptWindow.style.removeProperty("border-left");
-      this.transcriptWindow.style.removeProperty("border-image");
-      this.transcriptWindow.style.removeProperty("border-image-source");
-      this.transcriptWindow.style.removeProperty("border-image-slice");
-      this.transcriptWindow.style.removeProperty("border-image-width");
-      this.transcriptWindow.style.removeProperty("border-image-outset");
-      this.transcriptWindow.style.removeProperty("border-image-repeat");
-      if (this.transcriptHeader) {
-        this.transcriptHeader.style.cursor = "move";
-      }
-      if (this.transcriptWindow.parentNode !== this.player.container) {
-        this.player.container.appendChild(this.transcriptWindow);
-      }
-    } else {
-      const transcriptWidth = parseFloat(this.transcriptWindow.style.width) || 400;
-      const padding = 20;
-      const minWidth = 260;
-      const containerRect = this.player.container.getBoundingClientRect();
-      const ensureContainerPositioned = () => {
-        const computed = window.getComputedStyle(this.player.container);
-        if (computed.position === "static") {
-          this.player.container.style.position = "relative";
-        }
-      };
-      ensureContainerPositioned();
-      const left = videoRect.right - containerRect.left + padding;
-      const availableWidth = window.innerWidth - videoRect.right - padding;
-      const appliedWidth = Math.max(minWidth, Math.min(transcriptWidth, availableWidth));
-      const appliedHeight = videoRect.height;
-      this.transcriptWindow.style.position = "absolute";
-      this.transcriptWindow.style.left = `${left}px`;
-      this.transcriptWindow.style.right = "auto";
-      this.transcriptWindow.style.bottom = "auto";
-      this.transcriptWindow.style.top = "0";
-      this.transcriptWindow.style.height = `${appliedHeight}px`;
-      this.transcriptWindow.style.maxHeight = "none";
-      this.transcriptWindow.style.width = `${appliedWidth}px`;
-      this.transcriptWindow.style.maxWidth = "none";
-      this.transcriptWindow.style.borderRadius = "8px";
-      this.transcriptWindow.style.border = "1px solid var(--vidply-border)";
-      this.transcriptWindow.style.removeProperty("border-top");
-      this.transcriptWindow.style.removeProperty("border-right");
-      this.transcriptWindow.style.removeProperty("border-bottom");
-      this.transcriptWindow.style.removeProperty("border-left");
-      this.transcriptWindow.style.removeProperty("border-image");
-      this.transcriptWindow.style.removeProperty("border-image-source");
-      this.transcriptWindow.style.removeProperty("border-image-slice");
-      this.transcriptWindow.style.removeProperty("border-image-width");
-      this.transcriptWindow.style.removeProperty("border-image-outset");
-      this.transcriptWindow.style.removeProperty("border-image-repeat");
-      if (this.transcriptHeader) {
-        this.transcriptHeader.style.cursor = "move";
-      }
-      if (this.transcriptWindow.parentNode !== this.player.container) {
-        this.player.container.appendChild(this.transcriptWindow);
-      }
-    }
-  }
-  /**
-   * Get available transcript languages from tracks
-   */
-  getAvailableTranscriptLanguages() {
-    const textTracks = this.player.textTracks;
-    const languages = /* @__PURE__ */ new Map();
-    textTracks.forEach((track) => {
-      if ((track.kind === "captions" || track.kind === "subtitles") && track.language) {
-        if (!languages.has(track.language)) {
-          languages.set(track.language, {
-            language: track.language,
-            label: track.label || track.language,
-            track
-          });
-        }
-      }
-    });
-    return Array.from(languages.values());
-  }
-  /**
-   * Update language selector dropdown
-   */
-  updateLanguageSelector() {
-    if (!this.languageSelector) return;
-    this.availableTranscriptLanguages = this.getAvailableTranscriptLanguages();
-    this.languageSelector.innerHTML = "";
-    if (this.availableTranscriptLanguages.length < 2) {
-      if (this.languageSelectorWrapper) {
-        this.languageSelectorWrapper.style.display = "none";
-      }
-      return;
-    }
-    if (this.languageSelectorWrapper) {
-      this.languageSelectorWrapper.style.display = "flex";
-    }
-    this.availableTranscriptLanguages.forEach((langInfo, index) => {
-      const option = DOMUtils.createElement("option", {
-        textContent: langInfo.label,
-        attributes: {
-          "value": langInfo.language,
-          "lang": langInfo.language
-        }
-      });
-      this.languageSelector.appendChild(option);
-    });
-    if (this.currentTranscriptLanguage) {
-      this.languageSelector.value = this.currentTranscriptLanguage;
-    } else if (this.availableTranscriptLanguages.length > 0) {
-      const activeTrack = this.player.textTracks.find(
-        (track) => (track.kind === "captions" || track.kind === "subtitles") && track.mode === "showing"
-      );
-      this.currentTranscriptLanguage = activeTrack ? activeTrack.language : this.availableTranscriptLanguages[0].language;
-      this.languageSelector.value = this.currentTranscriptLanguage;
-    }
-    if (this.languageSelectorHandler) {
-      this.languageSelector.removeEventListener("change", this.languageSelectorHandler);
-    }
-    this.languageSelectorHandler = (e) => {
-      this.currentTranscriptLanguage = e.target.value;
-      this.loadTranscriptData();
-      if (this.transcriptContent && this.currentTranscriptLanguage) {
-        this.transcriptContent.setAttribute("lang", this.currentTranscriptLanguage);
-      }
-    };
-    this.languageSelector.addEventListener("change", this.languageSelectorHandler);
-  }
-  /**
-   * Load transcript data from caption/subtitle tracks
-   */
-  loadTranscriptData() {
-    this.transcriptEntries = [];
-    this.transcriptContent.innerHTML = "";
-    const textTracks = this.player.textTracks;
-    let captionTrack = null;
-    if (this.currentTranscriptLanguage) {
-      captionTrack = textTracks.find(
-        (track) => (track.kind === "captions" || track.kind === "subtitles") && track.language === this.currentTranscriptLanguage
-      );
-    }
-    if (!captionTrack) {
-      captionTrack = textTracks.find(
-        (track) => track.kind === "captions" || track.kind === "subtitles"
-      );
-      if (captionTrack) {
-        this.currentTranscriptLanguage = captionTrack.language;
-      }
-    }
-    let descriptionTrack = null;
-    if (this.currentTranscriptLanguage) {
-      descriptionTrack = textTracks.find(
-        (track) => track.kind === "descriptions" && track.language === this.currentTranscriptLanguage
-      );
-    }
-    if (!descriptionTrack) {
-      descriptionTrack = textTracks.find((track) => track.kind === "descriptions");
-    }
-    const metadataTrack = textTracks.find((track) => track.kind === "metadata");
-    const hasDescriptionTrack = descriptionTrack && this.player.state.audioDescriptionEnabled;
-    if (!captionTrack && !hasDescriptionTrack && !metadataTrack) {
-      this.showNoTranscriptMessage();
-      return;
-    }
-    const tracksToLoad = [captionTrack, descriptionTrack, metadataTrack].filter(Boolean);
-    tracksToLoad.forEach((track) => {
-      if (track.mode === "disabled") {
-        track.mode = "hidden";
-      }
-    });
-    const needsLoading = tracksToLoad.some((track) => !track.cues || track.cues.length === 0);
-    if (needsLoading) {
-      const loadingMessage = DOMUtils.createElement("div", {
-        className: `${this.player.options.classPrefix}-transcript-loading`,
-        textContent: i18n.t("transcript.loading")
-      });
-      this.transcriptContent.appendChild(loadingMessage);
-      let loaded = 0;
-      const onLoad = () => {
-        loaded++;
-        if (loaded >= tracksToLoad.length) {
-          this.loadTranscriptData();
-        }
-      };
-      tracksToLoad.forEach((track) => {
-        track.addEventListener("load", onLoad, { once: true });
-      });
-      this.setManagedTimeout(() => {
-        this.loadTranscriptData();
-      }, 500);
-      return;
-    }
-    const allCues = [];
-    if (captionTrack && captionTrack.cues) {
-      Array.from(captionTrack.cues).forEach((cue) => {
-        allCues.push({ cue, type: "caption" });
-      });
-    }
-    if (descriptionTrack && descriptionTrack.cues && this.player.state.audioDescriptionEnabled) {
-      Array.from(descriptionTrack.cues).forEach((cue) => {
-        allCues.push({ cue, type: "description" });
-      });
-    }
-    if (metadataTrack && metadataTrack.cues) {
-      this.metadataCues = Array.from(metadataTrack.cues);
-      this.setupMetadataHandling();
-    }
-    allCues.sort((a, b) => a.cue.startTime - b.cue.startTime);
-    allCues.forEach((item, index) => {
-      const entry = this.createTranscriptEntry(item.cue, index, item.type);
-      this.transcriptEntries.push({
-        element: entry,
-        cue: item.cue,
-        type: item.type,
-        startTime: item.cue.startTime,
-        endTime: item.cue.endTime
-      });
-      this.transcriptContent.appendChild(entry);
-    });
-    this.applyTranscriptStyles();
-    this.updateTimestampVisibility();
-    if (this.transcriptContent && this.currentTranscriptLanguage) {
-      this.transcriptContent.setAttribute("lang", this.currentTranscriptLanguage);
-    }
-    this.updateLanguageSelector();
-  }
-  /**
-   * Setup metadata handling on player load
-   * This runs independently of transcript loading
-   */
-  setupMetadataHandlingOnLoad() {
-    const setupMetadata = () => {
-      const textTracks = this.player.textTracks;
-      const metadataTrack = textTracks.find((track) => track.kind === "metadata");
-      if (metadataTrack) {
-        if (metadataTrack.mode === "disabled") {
-          metadataTrack.mode = "hidden";
-        }
-        if (this.metadataCueChangeHandler) {
-          metadataTrack.removeEventListener("cuechange", this.metadataCueChangeHandler);
-        }
-        this.metadataCueChangeHandler = () => {
-          const activeCues = Array.from(metadataTrack.activeCues || []);
-          if (activeCues.length > 0) {
-            if (this.player.options.debug) {
-              console.log("[VidPly Metadata] Active cues:", activeCues.map((c) => ({
-                start: c.startTime,
-                end: c.endTime,
-                text: c.text
-              })));
-            }
-          }
-          activeCues.forEach((cue) => {
-            this.handleMetadataCue(cue);
-          });
-        };
-        metadataTrack.addEventListener("cuechange", this.metadataCueChangeHandler);
-        if (this.player.options.debug) {
-          const cueCount = metadataTrack.cues ? metadataTrack.cues.length : 0;
-          console.log("[VidPly Metadata] Track enabled,", cueCount, "cues available");
-        }
-      } else if (this.player.options.debug) {
-        console.warn("[VidPly Metadata] No metadata track found");
-      }
-    };
-    setupMetadata();
-    this.player.on("loadedmetadata", setupMetadata);
-  }
-  /**
-   * Setup metadata handling
-   * Metadata cues are not displayed but can be used programmatically
-   * This is called when transcript data is loaded (for storing cues)
-   */
-  setupMetadataHandling() {
-    if (!this.metadataCues || this.metadataCues.length === 0) {
-      return;
-    }
-    if (this.player.options.debug) {
-      console.log("[VidPly Metadata]", this.metadataCues.length, "cues stored from transcript load");
-    }
-  }
-  /**
-   * Handle individual metadata cues
-   * Parses metadata text and emits events or triggers actions
-   */
-  handleMetadataCue(cue) {
-    const text = cue.text.trim();
-    if (this.player.options.debug) {
-      console.log("[VidPly Metadata] Processing cue:", {
-        time: cue.startTime,
-        text
-      });
-    }
-    this.player.emit("metadata", {
-      time: cue.startTime,
-      endTime: cue.endTime,
-      text,
-      cue
-    });
-    if (text.includes("PAUSE")) {
-      if (!this.player.state.paused) {
-        if (this.player.options.debug) {
-          console.log("[VidPly Metadata] Pausing video at", cue.startTime);
-        }
-        this.player.pause();
-      }
-      this.player.emit("metadata:pause", { time: cue.startTime, text });
-    }
-    const focusMatch = text.match(/FOCUS:([\w#-]+)/);
-    if (focusMatch) {
-      const targetSelector = focusMatch[1];
-      const targetElement = document.querySelector(targetSelector);
-      if (targetElement) {
-        if (this.player.options.debug) {
-          console.log("[VidPly Metadata] Focusing element:", targetSelector);
-        }
-        this.setManagedTimeout(() => {
-          targetElement.focus({ preventScroll: true });
-        }, 10);
-      } else if (this.player.options.debug) {
-        console.warn("[VidPly Metadata] Element not found:", targetSelector);
-      }
-      this.player.emit("metadata:focus", {
-        time: cue.startTime,
-        target: targetSelector,
-        element: targetElement,
-        text
-      });
-    }
-    const hashtags = text.match(/#[\w-]+/g);
-    if (hashtags) {
-      if (this.player.options.debug) {
-        console.log("[VidPly Metadata] Hashtags found:", hashtags);
-      }
-      this.player.emit("metadata:hashtags", {
-        time: cue.startTime,
-        hashtags,
-        text
-      });
-    }
-  }
-  /**
-   * Create a single transcript entry element
-   */
-  createTranscriptEntry(cue, index, type = "caption") {
-    const entryText = this.stripVTTFormatting(cue.text);
-    const entry = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-entry ${this.player.options.classPrefix}-transcript-${type}`,
-      attributes: {
-        "tabindex": "0",
-        "data-start": String(cue.startTime),
-        "data-end": String(cue.endTime),
-        "data-type": type
-      }
-    });
-    const timestamp = DOMUtils.createElement("span", {
-      className: `${this.player.options.classPrefix}-transcript-time`,
-      textContent: TimeUtils.formatTime(cue.startTime),
-      attributes: {
-        "aria-hidden": "true"
-        // Hide from screen readers - decorative timestamp
-      }
-    });
-    const text = DOMUtils.createElement("span", {
-      className: `${this.player.options.classPrefix}-transcript-text`,
-      textContent: entryText
-    });
-    entry.appendChild(timestamp);
-    entry.appendChild(text);
-    const seekToTime = () => {
-      this.player.seek(cue.startTime);
-      if (this.player.state.paused) {
-        this.player.play();
-      }
-    };
-    entry.addEventListener("click", seekToTime);
-    entry.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        seekToTime();
-      }
-    });
-    return entry;
-  }
-  /**
-   * Strip VTT formatting tags from text
-   */
-  stripVTTFormatting(text) {
-    return text.replace(/<[^>]+>/g, "").replace(/\n/g, " ").trim();
-  }
-  /**
-   * Show message when no transcript is available
-   */
-  showNoTranscriptMessage() {
-    const message = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-empty`,
-      textContent: i18n.t("transcript.noTranscript")
-    });
-    this.transcriptContent.appendChild(message);
-  }
-  /**
-   * Update active transcript entry based on current time
-   */
-  updateActiveEntry() {
-    if (!this.isVisible || this.transcriptEntries.length === 0) return;
-    const currentTime = this.player.state.currentTime;
-    const activeEntry = this.transcriptEntries.find(
-      (entry) => currentTime >= entry.startTime && currentTime < entry.endTime
-    );
-    if (activeEntry && activeEntry !== this.currentActiveEntry) {
-      if (this.currentActiveEntry) {
-        this.currentActiveEntry.element.classList.remove(
-          `${this.player.options.classPrefix}-transcript-entry-active`
-        );
-      }
-      activeEntry.element.classList.add(
-        `${this.player.options.classPrefix}-transcript-entry-active`
-      );
-      this.scrollToEntry(activeEntry.element);
-      this.currentActiveEntry = activeEntry;
-    } else if (!activeEntry && this.currentActiveEntry) {
-      this.currentActiveEntry.element.classList.remove(
-        `${this.player.options.classPrefix}-transcript-entry-active`
-      );
-      this.currentActiveEntry = null;
-    }
-  }
-  /**
-   * Scroll transcript window to show active entry
-   */
-  scrollToEntry(entryElement) {
-    if (!this.transcriptContent || !this.autoscrollEnabled) return;
-    const contentRect = this.transcriptContent.getBoundingClientRect();
-    const entryRect = entryElement.getBoundingClientRect();
-    if (entryRect.top < contentRect.top || entryRect.bottom > contentRect.bottom) {
-      const scrollTop = entryElement.offsetTop - this.transcriptContent.clientHeight / 2 + entryElement.clientHeight / 2;
-      this.transcriptContent.scrollTo({
-        top: scrollTop,
-        behavior: "smooth"
-      });
-    }
-  }
-  /**
-   * Save autoscroll preference to localStorage
-   */
-  saveAutoscrollPreference() {
-    const savedPreferences = this.storage.getTranscriptPreferences() || {};
-    savedPreferences.autoscroll = this.autoscrollEnabled;
-    this.storage.saveTranscriptPreferences(savedPreferences);
-  }
-  /**
-   * Setup drag and drop functionality
-   */
-  setupDragAndDrop() {
-    if (!this.transcriptHeader || !this.transcriptWindow) return;
-    const isMobile = window.innerWidth < 768;
-    const isFullscreen = this.player.state.fullscreen;
-    if (isMobile && !isFullscreen) {
-      if (this.draggableResizable) {
-        this.draggableResizable.destroy();
-        this.draggableResizable = null;
-      }
-      return;
-    }
-    if (this.draggableResizable) {
-      return;
-    }
-    this.draggableResizable = new DraggableResizable(this.transcriptWindow, {
-      dragHandle: this.transcriptHeader,
-      resizeHandles: this.transcriptResizeHandles,
-      constrainToViewport: true,
-      classPrefix: `${this.player.options.classPrefix}-transcript`,
-      keyboardDragKey: "d",
-      keyboardResizeKey: "r",
-      keyboardStep: 10,
-      keyboardStepLarge: 50,
-      minWidth: 300,
-      minHeight: 200,
-      maxWidth: () => Math.max(320, window.innerWidth - 40),
-      maxHeight: () => Math.max(200, window.innerHeight - 120),
-      pointerResizeIndicatorText: i18n.t("transcript.resizeModeHint"),
-      onPointerResizeToggle: (enabled) => {
-        this.transcriptResizeHandles.forEach((handle) => {
-          handle.style.display = enabled ? "block" : "none";
-        });
-        this.onPointerResizeModeChange(enabled);
-      },
-      onDragStart: (e) => {
-        const ignoreSelectors = [
-          `.${this.player.options.classPrefix}-transcript-close`,
-          `.${this.player.options.classPrefix}-transcript-settings`,
-          `.${this.player.options.classPrefix}-transcript-language-select`,
-          `.${this.player.options.classPrefix}-transcript-language-label`,
-          `.${this.player.options.classPrefix}-transcript-settings-menu`,
-          `.${this.player.options.classPrefix}-transcript-style-dialog`
-        ];
-        for (const selector of ignoreSelectors) {
-          if (e.target.closest(selector)) {
-            return false;
-          }
-        }
-        return true;
-      }
-    });
-    this.customKeyHandler = (e) => {
-      const key = e.key.toLowerCase();
-      const alreadyPrevented = e.defaultPrevented;
-      if (this.settingsMenuVisible || this.styleDialogVisible) {
-        return;
-      }
-      if (key === "home") {
-        e.preventDefault();
-        e.stopPropagation();
-        if (this.draggableResizable) {
-          if (this.draggableResizable.pointerResizeMode) {
-            this.draggableResizable.disablePointerResizeMode();
-          }
-          this.draggableResizable.manuallyPositioned = false;
-          this.positionTranscript();
-          this.updateResizeOptionState();
-          this.announceLive(i18n.t("transcript.positionReset"));
-        }
-        return;
-      }
-      if (key === "r") {
-        if (alreadyPrevented) {
-          return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const enabled = this.toggleResizeMode();
-        if (enabled) {
-          this.transcriptWindow.focus({ preventScroll: true });
-        }
-        return;
-      }
-      if (key === "escape") {
-        if (this.draggableResizable && this.draggableResizable.pointerResizeMode) {
-          e.preventDefault();
-          e.stopPropagation();
-          this.draggableResizable.disablePointerResizeMode();
-          return;
-        }
-        if (this.draggableResizable && this.draggableResizable.keyboardDragMode) {
-          e.preventDefault();
-          e.stopPropagation();
-          this.draggableResizable.disableKeyboardDragMode();
-          this.announceLive(i18n.t("transcript.dragModeDisabled"));
-          return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        this.hideTranscript({ focusButton: true });
-        return;
-      }
-    };
-    this.transcriptWindow.addEventListener("keydown", this.customKeyHandler);
-  }
-  /**
-   * Toggle keyboard drag mode
-   */
-  toggleKeyboardDragMode() {
-    if (this.draggableResizable) {
-      const wasEnabled = this.draggableResizable.keyboardDragMode;
-      this.draggableResizable.toggleKeyboardDragMode();
-      const isEnabled = this.draggableResizable.keyboardDragMode;
-      if (!wasEnabled && isEnabled) {
-        this.enableMoveMode();
-      }
-      this.updateDragOptionState();
-      if (this.settingsMenuVisible) {
-        this.hideSettingsMenu();
-      }
-      this.transcriptWindow.focus({ preventScroll: true });
-    }
-  }
-  /**
-   * Toggle settings menu visibility
-   */
-  toggleSettingsMenu() {
-    if (this.settingsMenuVisible) {
-      this.hideSettingsMenu();
-    } else {
-      this.showSettingsMenu();
-    }
-  }
-  /**
-   * Show settings menu
-   */
-  showSettingsMenu() {
-    this.settingsMenuJustOpened = true;
-    setTimeout(() => {
-      this.settingsMenuJustOpened = false;
-    }, 350);
-    if (!this.documentClickHandlerAdded) {
-      setTimeout(() => {
-        document.addEventListener("click", this.handlers.documentClick);
-        this.documentClickHandlerAdded = true;
-      }, 300);
-    }
-    if (this.settingsMenu) {
-      this.settingsMenu.style.display = "block";
-      this.settingsMenuVisible = true;
-      if (this.settingsButton) {
-        this.settingsButton.setAttribute("aria-expanded", "true");
-      }
-      this.attachSettingsMenuKeyboardNavigation();
-      this.positionSettingsMenuImmediate();
-      this.updateResizeOptionState();
-      setTimeout(() => {
-        const menuItems = this.settingsMenu.querySelectorAll(`.${this.player.options.classPrefix}-transcript-settings-item`);
-        if (menuItems.length > 0) {
-          menuItems[0].setAttribute("tabindex", "0");
-          for (let i = 1; i < menuItems.length; i++) {
-            menuItems[i].setAttribute("tabindex", "-1");
-          }
-          menuItems[0].focus({ preventScroll: true });
-        }
-      }, 50);
-      return;
-    }
-    this.settingsMenu = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-settings-menu`,
-      attributes: {
-        "role": "menu"
-      }
-    });
-    const keyboardDragOption = createMenuItem({
-      classPrefix: this.player.options.classPrefix,
-      itemClass: `${this.player.options.classPrefix}-transcript-settings-item`,
-      icon: "move",
-      label: "transcript.enableDragMode",
-      hasTextClass: true,
-      onClick: () => {
-        this.toggleKeyboardDragMode();
-        this.hideSettingsMenu();
-      }
-    });
-    keyboardDragOption.setAttribute("role", "switch");
-    keyboardDragOption.setAttribute("aria-checked", "false");
-    const dragTooltip = keyboardDragOption.querySelector(`.${this.player.options.classPrefix}-tooltip`);
-    if (dragTooltip) dragTooltip.remove();
-    const dragButtonText = keyboardDragOption.querySelector(`.${this.player.options.classPrefix}-button-text`);
-    if (dragButtonText) dragButtonText.remove();
-    this.dragOptionButton = keyboardDragOption;
-    this.dragOptionText = keyboardDragOption.querySelector(`.${this.player.options.classPrefix}-settings-text`);
-    this.updateDragOptionState();
-    const styleOption = createMenuItem({
-      classPrefix: this.player.options.classPrefix,
-      itemClass: `${this.player.options.classPrefix}-transcript-settings-item`,
-      icon: "settings",
-      label: "transcript.styleTranscript",
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.hideSettingsMenu();
-        setTimeout(() => {
-          this.showStyleDialog();
-        }, 50);
-      }
-    });
-    const styleTooltip = styleOption.querySelector(`.${this.player.options.classPrefix}-tooltip`);
-    if (styleTooltip) styleTooltip.remove();
-    const styleButtonText = styleOption.querySelector(`.${this.player.options.classPrefix}-button-text`);
-    if (styleButtonText) styleButtonText.remove();
-    const resizeOption = createMenuItem({
-      classPrefix: this.player.options.classPrefix,
-      itemClass: `${this.player.options.classPrefix}-transcript-settings-item`,
-      icon: "resize",
-      label: "transcript.enableResizeMode",
-      hasTextClass: true,
-      onClick: (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const enabled = this.toggleResizeMode({ focus: false });
-        if (enabled) {
-          this.hideSettingsMenu({ focusButton: false });
-          setTimeout(() => {
-            if (this.transcriptWindow) {
-              this.transcriptWindow.focus({ preventScroll: true });
-            }
-          }, 20);
-        } else {
-          this.hideSettingsMenu({ focusButton: true });
-        }
-      }
-    });
-    resizeOption.setAttribute("role", "switch");
-    resizeOption.setAttribute("aria-checked", "false");
-    const resizeTooltip = resizeOption.querySelector(`.${this.player.options.classPrefix}-tooltip`);
-    if (resizeTooltip) resizeTooltip.remove();
-    const resizeButtonText = resizeOption.querySelector(`.${this.player.options.classPrefix}-button-text`);
-    if (resizeButtonText) resizeButtonText.remove();
-    this.resizeOptionButton = resizeOption;
-    this.resizeOptionText = resizeOption.querySelector(`.${this.player.options.classPrefix}-settings-text`);
-    this.updateResizeOptionState();
-    const showTimestampsOption = createMenuItem({
-      classPrefix: this.player.options.classPrefix,
-      itemClass: `${this.player.options.classPrefix}-transcript-settings-item`,
-      icon: "clock",
-      label: "transcript.showTimestamps",
-      hasTextClass: true,
-      onClick: () => {
-        this.toggleShowTimestamps();
-      }
-    });
-    showTimestampsOption.setAttribute("role", "switch");
-    showTimestampsOption.setAttribute("aria-checked", this.showTimestamps ? "true" : "false");
-    const timestampsTooltip = showTimestampsOption.querySelector(`.${this.player.options.classPrefix}-tooltip`);
-    if (timestampsTooltip) timestampsTooltip.remove();
-    const timestampsButtonText = showTimestampsOption.querySelector(`.${this.player.options.classPrefix}-button-text`);
-    if (timestampsButtonText) timestampsButtonText.remove();
-    this.showTimestampsButton = showTimestampsOption;
-    this.showTimestampsText = showTimestampsOption.querySelector(`.${this.player.options.classPrefix}-settings-text`);
-    this.updateShowTimestampsState();
-    const closeOption = createMenuItem({
-      classPrefix: this.player.options.classPrefix,
-      itemClass: `${this.player.options.classPrefix}-transcript-settings-item`,
-      icon: "close",
-      label: "transcript.closeMenu",
-      onClick: () => {
-        this.hideSettingsMenu();
-      }
-    });
-    const closeTooltip = closeOption.querySelector(`.${this.player.options.classPrefix}-tooltip`);
-    if (closeTooltip) closeTooltip.remove();
-    const closeButtonText = closeOption.querySelector(`.${this.player.options.classPrefix}-button-text`);
-    if (closeButtonText) closeButtonText.remove();
-    this.settingsMenu.appendChild(keyboardDragOption);
-    this.settingsMenu.appendChild(resizeOption);
-    this.settingsMenu.appendChild(styleOption);
-    this.settingsMenu.appendChild(showTimestampsOption);
-    this.settingsMenu.appendChild(closeOption);
-    this.settingsMenu.style.visibility = "hidden";
-    this.settingsMenu.style.display = "block";
-    if (this.settingsButton && this.settingsButton.parentNode) {
-      this.settingsButton.insertAdjacentElement("afterend", this.settingsMenu);
-    } else if (this.headerLeft) {
-      this.headerLeft.appendChild(this.settingsMenu);
-    } else if (this.transcriptHeader) {
-      this.transcriptHeader.appendChild(this.settingsMenu);
-    } else {
-      this.transcriptWindow.appendChild(this.settingsMenu);
-    }
-    this.positionSettingsMenuImmediate();
-    requestAnimationFrame(() => {
-      if (this.settingsMenu) {
-        this.settingsMenu.style.visibility = "visible";
-      }
-    });
-    this.settingsMenuKeyHandler = attachMenuKeyboardNavigation(
-      this.settingsMenu,
-      this.settingsButton,
-      `.${this.player.options.classPrefix}-transcript-settings-item`,
-      () => this.hideSettingsMenu({ focusButton: true })
-    );
-    this.settingsMenuVisible = true;
-    this.settingsMenu.style.display = "block";
-    if (this.settingsButton) {
-      this.settingsButton.setAttribute("aria-expanded", "true");
-    }
-    this.updateResizeOptionState();
-    setTimeout(() => {
-      const menuItems = this.settingsMenu.querySelectorAll(`.${this.player.options.classPrefix}-transcript-settings-item`);
-      if (menuItems.length > 0) {
-        menuItems[0].setAttribute("tabindex", "0");
-        for (let i = 1; i < menuItems.length; i++) {
-          menuItems[i].setAttribute("tabindex", "-1");
-        }
-        menuItems[0].focus({ preventScroll: true });
-      }
-    }, 50);
-  }
-  /**
-   * Position settings menu relative to settings button (immediate/synchronous)
-   */
-  positionSettingsMenuImmediate() {
-    if (!this.settingsMenu || !this.settingsButton) return;
-    const container = this.settingsButton.parentElement;
-    if (!container) return;
-    const buttonRect = this.settingsButton.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const menuRect = this.settingsMenu.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const buttonLeft = buttonRect.left - containerRect.left;
-    const buttonBottom = buttonRect.bottom - containerRect.top;
-    const buttonTop = buttonRect.top - containerRect.top;
-    const spaceBelow = viewportHeight - buttonRect.bottom;
-    const spaceAbove = buttonRect.top;
-    let menuTop = buttonBottom + 4;
-    if (spaceBelow < menuRect.height + 20 && spaceAbove > spaceBelow) {
-      menuTop = buttonTop - menuRect.height - 4;
-      this.settingsMenu.classList.add("vidply-menu-above");
-    } else {
-      this.settingsMenu.classList.remove("vidply-menu-above");
-    }
-    this.settingsMenu.style.top = `${menuTop}px`;
-    this.settingsMenu.style.left = `${buttonLeft}px`;
-    this.settingsMenu.style.right = "auto";
-    this.settingsMenu.style.bottom = "auto";
-  }
-  /**
-   * Position settings menu relative to settings button (async for repositioning)
-   */
-  positionSettingsMenu() {
-    if (!this.settingsMenu || !this.settingsButton) return;
-    requestAnimationFrame(() => {
-      setTimeout(() => {
-        this.positionSettingsMenuImmediate();
-      }, 10);
-    });
-  }
-  /**
-   * Attach keyboard navigation to settings menu
-   */
-  attachSettingsMenuKeyboardNavigation() {
-    if (!this.settingsMenu) return;
-    if (this.settingsMenuKeyHandler) {
-      this.settingsMenu.removeEventListener("keydown", this.settingsMenuKeyHandler, true);
-    }
-    const handler = attachMenuKeyboardNavigation(
-      this.settingsMenu,
-      this.settingsButton,
-      `.${this.player.options.classPrefix}-transcript-settings-item`,
-      () => this.hideSettingsMenu({ focusButton: true })
-    );
-    this.settingsMenuKeyHandler = handler;
-  }
-  /**
-   * Hide settings menu
-   */
-  hideSettingsMenu({ focusButton = true } = {}) {
-    if (this.settingsMenu) {
-      this.settingsMenu.style.display = "none";
-      this.settingsMenuVisible = false;
-      this.settingsMenuJustOpened = false;
-      if (this.settingsMenuKeyHandler) {
-        this.settingsMenu.removeEventListener("keydown", this.settingsMenuKeyHandler, true);
-        this.settingsMenuKeyHandler = null;
-      }
-      if (this.settingsButton) {
-        this.settingsButton.setAttribute("aria-expanded", "false");
-        if (focusButton) {
-          this.settingsButton.focus({ preventScroll: true });
-        }
-      }
-    }
-  }
-  /**
-   * Enable move mode (gives visual feedback)
-   */
-  enableMoveMode() {
-    this.hideResizeModeIndicator();
-    this.transcriptWindow.classList.add(`${this.player.options.classPrefix}-transcript-move-mode`);
-    const tooltip = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-move-tooltip`,
-      textContent: "Drag with mouse or press D for keyboard drag mode"
-    });
-    this.transcriptHeader.appendChild(tooltip);
-    setTimeout(() => {
-      this.transcriptWindow.classList.remove(`${this.player.options.classPrefix}-transcript-move-mode`);
-      if (tooltip.parentNode) {
-        tooltip.remove();
-      }
-    }, 2e3);
-  }
-  /**
-   * Toggle resize mode
-   */
-  toggleResizeMode({ focus = true } = {}) {
-    if (!this.draggableResizable) {
-      return false;
-    }
-    if (this.draggableResizable.pointerResizeMode) {
-      this.draggableResizable.disablePointerResizeMode({ focus });
-      return false;
-    }
-    this.draggableResizable.enablePointerResizeMode({ focus });
-    return true;
-  }
-  updateDragOptionState() {
-    if (!this.dragOptionButton) {
-      return;
-    }
-    const isEnabled = !!(this.draggableResizable && this.draggableResizable.keyboardDragMode);
-    const text = isEnabled ? i18n.t("transcript.disableDragMode") : i18n.t("transcript.enableDragMode");
-    const ariaLabel = isEnabled ? i18n.t("transcript.disableDragModeAria") : i18n.t("transcript.enableDragModeAria");
-    this.dragOptionButton.setAttribute("aria-checked", isEnabled ? "true" : "false");
-    this.dragOptionButton.setAttribute("aria-label", ariaLabel);
-    if (this.dragOptionText) {
-      this.dragOptionText.textContent = text;
-    }
-  }
-  updateResizeOptionState() {
-    if (!this.resizeOptionButton) {
-      return;
-    }
-    const isEnabled = !!(this.draggableResizable && this.draggableResizable.pointerResizeMode);
-    const text = isEnabled ? i18n.t("transcript.disableResizeMode") : i18n.t("transcript.enableResizeMode");
-    const ariaLabel = isEnabled ? i18n.t("transcript.disableResizeModeAria") : i18n.t("transcript.enableResizeModeAria");
-    this.resizeOptionButton.setAttribute("aria-checked", isEnabled ? "true" : "false");
-    this.resizeOptionButton.setAttribute("aria-label", ariaLabel);
-    if (this.resizeOptionText) {
-      this.resizeOptionText.textContent = text;
-    }
-  }
-  toggleShowTimestamps() {
-    this.showTimestamps = !this.showTimestamps;
-    this.updateShowTimestampsState();
-    this.updateTimestampVisibility();
-    this.saveTimestampsPreference();
-  }
-  updateShowTimestampsState() {
-    if (!this.showTimestampsButton) {
-      return;
-    }
-    const text = this.showTimestamps ? i18n.t("transcript.hideTimestamps") : i18n.t("transcript.showTimestamps");
-    const ariaLabel = this.showTimestamps ? i18n.t("transcript.hideTimestampsAria") : i18n.t("transcript.showTimestampsAria");
-    this.showTimestampsButton.setAttribute("aria-checked", this.showTimestamps ? "true" : "false");
-    this.showTimestampsButton.setAttribute("aria-label", ariaLabel);
-    if (this.showTimestampsText) {
-      this.showTimestampsText.textContent = text;
-    }
-  }
-  updateTimestampVisibility() {
-    if (!this.transcriptContent) return;
-    const timestamps = this.transcriptContent.querySelectorAll(`.${this.player.options.classPrefix}-transcript-time`);
-    timestamps.forEach((timestamp) => {
-      timestamp.style.display = this.showTimestamps ? "" : "none";
-    });
-  }
-  saveTimestampsPreference() {
-    const savedPreferences = this.storage.getTranscriptPreferences() || {};
-    savedPreferences.showTimestamps = this.showTimestamps;
-    this.storage.saveTranscriptPreferences(savedPreferences);
-  }
-  showResizeModeIndicator() {
-    if (!this.transcriptHeader) {
-      return;
-    }
-    this.hideResizeModeIndicator();
-    const indicator = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-resize-tooltip`,
-      textContent: i18n.t("transcript.resizeModeHint") || "Resize handles enabled. Drag edges or corners to adjust. Press Esc or R to exit."
-    });
-    this.transcriptHeader.appendChild(indicator);
-    this.resizeModeIndicator = indicator;
-    this.resizeModeIndicatorTimeout = this.setManagedTimeout(() => {
-      this.hideResizeModeIndicator();
-    }, 3e3);
-  }
-  hideResizeModeIndicator() {
-    if (this.resizeModeIndicatorTimeout) {
-      this.clearManagedTimeout(this.resizeModeIndicatorTimeout);
-      this.resizeModeIndicatorTimeout = null;
-    }
-    if (this.resizeModeIndicator && this.resizeModeIndicator.parentNode) {
-      this.resizeModeIndicator.remove();
-    }
-    this.resizeModeIndicator = null;
-  }
-  onPointerResizeModeChange(enabled) {
-    this.updateResizeOptionState();
-    if (enabled) {
-      this.showResizeModeIndicator();
-      this.announceLive(i18n.t("transcript.resizeModeEnabled"));
-    } else {
-      this.hideResizeModeIndicator();
-      this.announceLive(i18n.t("transcript.resizeModeDisabled"));
-    }
-  }
-  /**
-   * Show style dialog
-   */
-  showStyleDialog() {
-    if (this.styleDialog) {
-      this.styleDialog.style.display = "block";
-      this.styleDialogVisible = true;
-      if (this.handlers.styleDialogKeydown) {
-        document.addEventListener("keydown", this.handlers.styleDialogKeydown);
-      }
-      this.styleDialogJustOpened = true;
-      setTimeout(() => {
-        this.styleDialogJustOpened = false;
-      }, 350);
-      setTimeout(() => {
-        const firstSelect = this.styleDialog.querySelector("select, input");
-        if (firstSelect) {
-          firstSelect.focus({ preventScroll: true });
-        }
-      }, 0);
-      return;
-    }
-    this.styleDialog = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-style-dialog`
-    });
-    const title = DOMUtils.createElement("h4", {
-      textContent: i18n.t("transcript.styleTitle"),
-      className: `${this.player.options.classPrefix}-transcript-style-title`
-    });
-    this.styleDialog.appendChild(title);
-    const fontSizeControl = this.createStyleSelectControl(
-      i18n.t("captions.fontSize"),
-      "fontSize",
-      [
-        { label: i18n.t("fontSizes.small"), value: "90%" },
-        { label: i18n.t("fontSizes.normal"), value: "100%" },
-        { label: i18n.t("fontSizes.large"), value: "110%" },
-        { label: i18n.t("fontSizes.xlarge"), value: "120%" }
-      ]
-    );
-    this.styleDialog.appendChild(fontSizeControl);
-    const fontFamilyControl = this.createStyleSelectControl(
-      i18n.t("captions.fontFamily"),
-      "fontFamily",
-      [
-        { label: i18n.t("fontFamilies.sansSerif"), value: "sans-serif" },
-        { label: i18n.t("fontFamilies.serif"), value: "serif" },
-        { label: i18n.t("fontFamilies.monospace"), value: "monospace" }
-      ]
-    );
-    this.styleDialog.appendChild(fontFamilyControl);
-    const colorControl = this.createStyleColorControl(i18n.t("captions.color"), "color");
-    this.styleDialog.appendChild(colorControl);
-    const bgColorControl = this.createStyleColorControl(i18n.t("captions.backgroundColor"), "backgroundColor");
-    this.styleDialog.appendChild(bgColorControl);
-    const opacityControl = this.createStyleOpacityControl(i18n.t("captions.opacity"), "opacity");
-    this.styleDialog.appendChild(opacityControl);
-    const closeBtn = DOMUtils.createElement("button", {
-      className: `${this.player.options.classPrefix}-transcript-style-close`,
-      textContent: i18n.t("settings.close"),
-      attributes: {
-        "type": "button"
-      }
-    });
-    closeBtn.addEventListener("click", () => this.hideStyleDialog());
-    this.styleDialog.appendChild(closeBtn);
-    this.handlers.styleDialogKeydown = (e) => {
-      if (!this.styleDialogVisible) return;
-      if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        this.hideStyleDialog();
-        return;
-      }
-      if (e.key === "Tab") {
-        const focusableElements = this.styleDialog.querySelectorAll(
-          "select, input, button"
-        );
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-        if (e.shiftKey && document.activeElement === firstElement) {
-          e.preventDefault();
-          lastElement.focus({ preventScroll: true });
-        } else if (!e.shiftKey && document.activeElement === lastElement) {
-          e.preventDefault();
-          firstElement.focus({ preventScroll: true });
-        }
-      }
-    };
-    document.addEventListener("keydown", this.handlers.styleDialogKeydown);
-    if (this.headerLeft) {
-      this.headerLeft.appendChild(this.styleDialog);
-    } else {
-      this.transcriptHeader.appendChild(this.styleDialog);
-    }
-    this.applyTranscriptStyles();
-    this.styleDialogVisible = true;
-    this.styleDialog.style.display = "block";
-    this.styleDialogJustOpened = true;
-    setTimeout(() => {
-      this.styleDialogJustOpened = false;
-    }, 350);
-    setTimeout(() => {
-      const firstSelect = this.styleDialog.querySelector("select, input");
-      if (firstSelect) {
-        firstSelect.focus({ preventScroll: true });
-      }
-    }, 0);
-  }
-  /**
-   * Hide style dialog
-   */
-  hideStyleDialog() {
-    if (this.styleDialog) {
-      this.styleDialog.style.display = "none";
-      this.styleDialogVisible = false;
-      if (this.handlers.styleDialogKeydown) {
-        document.removeEventListener("keydown", this.handlers.styleDialogKeydown);
-      }
-      if (this.settingsButton) {
-        this.settingsButton.focus({ preventScroll: true });
-      }
-    }
-  }
-  /**
-   * Create style select control
-   */
-  createStyleSelectControl(label, property, options) {
-    const group = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-style-group`
-    });
-    const controlId = `${this.player.options.classPrefix}-transcript-${property}-${Date.now()}`;
-    const labelEl = DOMUtils.createElement("label", {
-      textContent: label,
-      attributes: {
-        "for": controlId
-      }
-    });
-    group.appendChild(labelEl);
-    const select = DOMUtils.createElement("select", {
-      className: `${this.player.options.classPrefix}-transcript-style-select`,
-      attributes: {
-        "id": controlId
-      }
-    });
-    options.forEach((opt) => {
-      const option = DOMUtils.createElement("option", {
-        textContent: opt.label,
-        attributes: {
-          "value": opt.value
-        }
-      });
-      if (this.transcriptStyle[property] === opt.value) {
-        option.selected = true;
-      }
-      select.appendChild(option);
-    });
-    select.addEventListener("change", (e) => {
-      this.transcriptStyle[property] = e.target.value;
-      this.applyTranscriptStyles();
-      this.savePreferences();
-    });
-    group.appendChild(select);
-    return group;
-  }
-  /**
-   * Create style color control
-   */
-  createStyleColorControl(label, property) {
-    const group = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-style-group`
-    });
-    const controlId = `${this.player.options.classPrefix}-transcript-${property}-${Date.now()}`;
-    const labelEl = DOMUtils.createElement("label", {
-      textContent: label,
-      attributes: {
-        "for": controlId
-      }
-    });
-    group.appendChild(labelEl);
-    const input = DOMUtils.createElement("input", {
-      attributes: {
-        "id": controlId,
-        "type": "color",
-        "value": this.transcriptStyle[property]
-      },
-      className: `${this.player.options.classPrefix}-transcript-style-color`
-    });
-    input.addEventListener("input", (e) => {
-      this.transcriptStyle[property] = e.target.value;
-      this.applyTranscriptStyles();
-      this.savePreferences();
-    });
-    group.appendChild(input);
-    return group;
-  }
-  /**
-   * Create style opacity control
-   */
-  createStyleOpacityControl(label, property) {
-    const group = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-style-group`
-    });
-    const controlId = `${this.player.options.classPrefix}-transcript-${property}-${Date.now()}`;
-    const labelEl = DOMUtils.createElement("label", {
-      textContent: label,
-      attributes: {
-        "for": controlId
-      }
-    });
-    group.appendChild(labelEl);
-    const valueDisplay = DOMUtils.createElement("span", {
-      textContent: Math.round(this.transcriptStyle[property] * 100) + "%",
-      className: `${this.player.options.classPrefix}-transcript-style-value`
-    });
-    const input = DOMUtils.createElement("input", {
-      attributes: {
-        "id": controlId,
-        "type": "range",
-        "min": "0",
-        "max": "1",
-        "step": "0.1",
-        "value": String(this.transcriptStyle[property])
-      },
-      className: `${this.player.options.classPrefix}-transcript-style-range`
-    });
-    input.addEventListener("input", (e) => {
-      const value = parseFloat(e.target.value);
-      this.transcriptStyle[property] = value;
-      valueDisplay.textContent = Math.round(value * 100) + "%";
-      this.applyTranscriptStyles();
-      this.savePreferences();
-    });
-    const inputContainer = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-transcript-style-range-container`
-    });
-    inputContainer.appendChild(input);
-    inputContainer.appendChild(valueDisplay);
-    group.appendChild(labelEl);
-    group.appendChild(inputContainer);
-    return group;
-  }
-  /**
-   * Save transcript preferences to localStorage
-   */
-  savePreferences() {
-    this.storage.saveTranscriptPreferences(this.transcriptStyle);
-  }
-  /**
-   * Apply transcript styles
-   */
-  applyTranscriptStyles() {
-    if (!this.transcriptWindow) return;
-    this.transcriptWindow.style.backgroundColor = this.transcriptStyle.backgroundColor;
-    this.transcriptWindow.style.opacity = String(this.transcriptStyle.opacity);
-    if (this.transcriptContent) {
-      this.transcriptContent.style.fontSize = this.transcriptStyle.fontSize;
-      this.transcriptContent.style.fontFamily = this.transcriptStyle.fontFamily;
-      this.transcriptContent.style.color = this.transcriptStyle.color;
-    }
-    const textEntries = this.transcriptWindow.querySelectorAll(`.${this.player.options.classPrefix}-transcript-text`);
-    textEntries.forEach((entry) => {
-      entry.style.fontSize = this.transcriptStyle.fontSize;
-      entry.style.fontFamily = this.transcriptStyle.fontFamily;
-      entry.style.color = this.transcriptStyle.color;
-    });
-    const timeEntries = this.transcriptWindow.querySelectorAll(`.${this.player.options.classPrefix}-transcript-time`);
-    timeEntries.forEach((entry) => {
-      entry.style.fontFamily = this.transcriptStyle.fontFamily;
-    });
-  }
-  /**
-   * Set a managed timeout that will be cleaned up on destroy
-   * @param {Function} callback - Callback function
-   * @param {number} delay - Delay in milliseconds
-   * @returns {number} Timeout ID
-   */
-  setManagedTimeout(callback, delay) {
-    const timeoutId = setTimeout(() => {
-      this.timeouts.delete(timeoutId);
-      callback();
-    }, delay);
-    this.timeouts.add(timeoutId);
-    return timeoutId;
-  }
-  /**
-   * Clear a managed timeout
-   * @param {number} timeoutId - Timeout ID to clear
-   */
-  clearManagedTimeout(timeoutId) {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      this.timeouts.delete(timeoutId);
-    }
-  }
-  /**
-   * Cleanup
-   */
-  destroy() {
-    this.hideResizeModeIndicator();
-    if (this.draggableResizable) {
-      if (this.draggableResizable.pointerResizeMode) {
-        this.draggableResizable.disablePointerResizeMode();
-        this.updateResizeOptionState();
-      }
-      this.draggableResizable.destroy();
-      this.draggableResizable = null;
-    }
-    if (this.transcriptWindow && this.customKeyHandler) {
-      this.transcriptWindow.removeEventListener("keydown", this.customKeyHandler);
-      this.customKeyHandler = null;
-    }
-    if (this.handlers.timeupdate) {
-      this.player.off("timeupdate", this.handlers.timeupdate);
-    }
-    if (this.handlers.audiodescriptionenabled) {
-      this.player.off("audiodescriptionenabled", this.handlers.audiodescriptionenabled);
-    }
-    if (this.handlers.audiodescriptiondisabled) {
-      this.player.off("audiodescriptiondisabled", this.handlers.audiodescriptiondisabled);
-    }
-    if (this.settingsButton) {
-      if (this.handlers.settingsClick) {
-        this.settingsButton.removeEventListener("click", this.handlers.settingsClick);
-      }
-      if (this.handlers.settingsKeydown) {
-        this.settingsButton.removeEventListener("keydown", this.handlers.settingsKeydown);
-      }
-    }
-    if (this.handlers.styleDialogKeydown) {
-      document.removeEventListener("keydown", this.handlers.styleDialogKeydown);
-    }
-    if (this.handlers.documentClick) {
-      document.removeEventListener("click", this.handlers.documentClick);
-    }
-    if (this.handlers.resize) {
-      window.removeEventListener("resize", this.handlers.resize);
-    }
-    this.timeouts.forEach((timeoutId) => clearTimeout(timeoutId));
-    this.timeouts.clear();
-    this.handlers = null;
-    if (this.transcriptWindow && this.transcriptWindow.parentNode) {
-      this.transcriptWindow.parentNode.removeChild(this.transcriptWindow);
-    }
-    this.transcriptWindow = null;
-    this.transcriptHeader = null;
-    this.transcriptContent = null;
-    this.transcriptEntries = [];
-    this.settingsMenu = null;
-    this.styleDialog = null;
-    this.transcriptResizeHandles = [];
-    this.resizeOptionButton = null;
-    this.resizeOptionText = null;
-    this.liveRegion = null;
-  }
-  announceLive(message) {
-    if (!this.liveRegion) return;
-    this.liveRegion.textContent = message || "";
-  }
-};
-export {
-  TranscriptManager
-};
-//# sourceMappingURL=vidply.TranscriptManager-UTJBQC5B.js.map