ts-video-player 0.1.0 → 0.1.2

package/dist/plugins/index.js

@@ -1,20 +1,2146 @@
+// src/plugins/analytics.ts
+var DEFAULT_MILESTONES = [10, 25, 50, 75, 90, 100];
+var DEFAULT_HEARTBEAT_INTERVAL = 30;
+
+class VideoAnalytics {
+  player = null;
+  config;
+  state;
+  heartbeatTimer = null;
+  eventQueue = [];
+  flushTimer = null;
+  sessionId;
+  visitorId;
+  unsubscribers = [];
+  constructor(config) {
+    this.config = {
+      milestones: DEFAULT_MILESTONES,
+      heartbeatInterval: DEFAULT_HEARTBEAT_INTERVAL,
+      trackQualityChanges: true,
+      trackSeeking: true,
+      trackBuffering: true,
+      trackErrors: true,
+      trackEngagement: true,
+      ...config
+    };
+    this.sessionId = config.sessionId || this.generateId();
+    this.visitorId = config.visitorId || this.getOrCreateVisitorId();
+    this.state = this.createInitialState();
+  }
+  createInitialState() {
+    return {
+      hasStarted: false,
+      hasCompleted: false,
+      watchTime: 0,
+      pauseCount: 0,
+      seekCount: 0,
+      bufferCount: 0,
+      bufferTime: 0,
+      qualityChangeCount: 0,
+      reachedMilestones: [],
+      reachedQuartiles: [],
+      playbackStartTime: null,
+      lastHeartbeat: 0,
+      isBuffering: false,
+      bufferStartTime: null
+    };
+  }
+  attach(player) {
+    if (this.config.disabled)
+      return;
+    this.player = player;
+    this.attachEventListeners();
+    this.startHeartbeat();
+  }
+  detach() {
+    this.stopHeartbeat();
+    this.unsubscribers.forEach((unsub) => unsub());
+    this.unsubscribers = [];
+    this.flush();
+    this.player = null;
+  }
+  attachEventListeners() {
+    if (!this.player)
+      return;
+    this.on("play", () => {
+      if (!this.state.hasStarted) {
+        this.state.hasStarted = true;
+        this.state.playbackStartTime = Date.now();
+        this.trackEvent("video_start");
+      } else {
+        this.trackEvent("video_resume");
+      }
+      this.trackEvent("video_play");
+    });
+    this.on("pause", () => {
+      this.state.pauseCount++;
+      this.updateWatchTime();
+      this.trackEvent("video_pause");
+    });
+    if (this.config.trackSeeking) {
+      this.on("seeking", () => {
+        this.state.seekCount++;
+      });
+      this.on("seeked", () => {
+        const playerState = this.player?.state;
+        this.trackEvent("video_seek", {
+          seekTo: playerState?.currentTime || 0
+        });
+      });
+    }
+    if (this.config.trackBuffering) {
+      this.on("waiting", () => {
+        if (!this.state.isBuffering) {
+          this.state.isBuffering = true;
+          this.state.bufferStartTime = Date.now();
+          this.state.bufferCount++;
+          this.trackEvent("video_buffer_start");
+        }
+      });
+      this.on("playing", () => {
+        if (this.state.isBuffering) {
+          this.state.isBuffering = false;
+          if (this.state.bufferStartTime) {
+            this.state.bufferTime += (Date.now() - this.state.bufferStartTime) / 1000;
+          }
+          this.trackEvent("video_buffer_end", {
+            bufferDuration: this.state.bufferStartTime ? (Date.now() - this.state.bufferStartTime) / 1000 : 0
+          });
+          this.state.bufferStartTime = null;
+        }
+      });
+    }
+    this.on("timeupdate", () => {
+      this.checkMilestones();
+    });
+    if (this.config.trackQualityChanges) {
+      this.on("qualitychange", (quality) => {
+        this.state.qualityChangeCount++;
+        this.trackEvent("video_quality_change", {
+          quality: quality ? `${quality.height}p` : "auto",
+          bitrate: quality?.bitrate
+        });
+      });
+    }
+    this.on("volumechange", () => {
+      const playerState = this.player?.state;
+      if (playerState?.muted) {
+        this.trackEvent("video_mute");
+      } else {
+        this.trackEvent("video_volume_change", {
+          volume: playerState?.volume
+        });
+      }
+    });
+    this.on("fullscreenchange", (isFullscreen) => {
+      this.trackEvent(isFullscreen ? "video_fullscreen_enter" : "video_fullscreen_exit");
+    });
+    this.on("pipchange", (isPiP) => {
+      this.trackEvent(isPiP ? "video_pip_enter" : "video_pip_exit");
+    });
+    this.on("texttrackchange", (track) => {
+      if (track) {
+        this.trackEvent("video_caption_change", {
+          language: track.language,
+          label: track.label
+        });
+      } else {
+        this.trackEvent("video_caption_disable");
+      }
+    });
+    this.on("audiotrackchange", (track) => {
+      if (track) {
+        this.trackEvent("video_audio_track_change", {
+          language: track.language,
+          label: track.label
+        });
+      }
+    });
+    this.on("ratechange", (rate) => {
+      this.trackEvent("video_speed_change", { speed: rate });
+    });
+    this.on("ended", () => {
+      if (!this.state.hasCompleted) {
+        this.state.hasCompleted = true;
+        this.updateWatchTime();
+        this.trackEvent("video_complete", {
+          watchTime: this.state.watchTime,
+          pauseCount: this.state.pauseCount,
+          seekCount: this.state.seekCount,
+          bufferCount: this.state.bufferCount,
+          bufferTime: this.state.bufferTime
+        });
+      }
+    });
+    if (this.config.trackErrors) {
+      this.on("error", (error) => {
+        this.trackEvent("video_error", {
+          code: error?.code,
+          message: error?.message
+        });
+      });
+    }
+  }
+  on(event, handler) {
+    if (!this.player)
+      return;
+    this.player.on(event, handler);
+    this.unsubscribers.push(() => this.player?.off(event, handler));
+  }
+  checkMilestones() {
+    const playerState = this.player?.state;
+    if (!playerState || !playerState.duration)
+      return;
+    const progress = playerState.currentTime / playerState.duration * 100;
+    for (const milestone of this.config.milestones || []) {
+      if (progress >= milestone && !this.state.reachedMilestones.includes(milestone)) {
+        this.state.reachedMilestones.push(milestone);
+        this.trackEvent("video_milestone", { milestone });
+      }
+    }
+    const quartiles = [25, 50, 75, 100];
+    for (const quartile of quartiles) {
+      if (progress >= quartile && !this.state.reachedQuartiles.includes(quartile)) {
+        this.state.reachedQuartiles.push(quartile);
+        this.trackEvent("video_quartile", { quartile });
+      }
+    }
+  }
+  updateWatchTime() {
+    if (this.state.playbackStartTime) {
+      this.state.watchTime += (Date.now() - this.state.playbackStartTime) / 1000;
+      this.state.playbackStartTime = Date.now();
+    }
+  }
+  startHeartbeat() {
+    if (this.heartbeatTimer)
+      return;
+    const interval = (this.config.heartbeatInterval || DEFAULT_HEARTBEAT_INTERVAL) * 1000;
+    this.heartbeatTimer = setInterval(() => {
+      const playerState = this.player?.state;
+      if (playerState?.playbackState === "playing") {
+        this.updateWatchTime();
+        this.trackEvent("video_heartbeat", {
+          watchTime: this.state.watchTime,
+          currentTime: playerState.currentTime
+        });
+      }
+    }, interval);
+  }
+  stopHeartbeat() {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = null;
+    }
+  }
+  trackEvent(name, properties) {
+    if (this.config.disabled)
+      return;
+    const playerState = this.player?.state;
+    const event = {
+      name,
+      timestamp: new Date,
+      currentTime: playerState?.currentTime || 0,
+      duration: playerState?.duration || this.config.duration || 0,
+      properties
+    };
+    this.eventQueue.push(event);
+    this.scheduleFlush();
+  }
+  scheduleFlush() {
+    if (this.flushTimer)
+      return;
+    this.flushTimer = setTimeout(() => {
+      this.flush();
+      this.flushTimer = null;
+    }, 1000);
+  }
+  async flush() {
+    if (this.eventQueue.length === 0)
+      return;
+    const events = [...this.eventQueue];
+    this.eventQueue = [];
+    try {
+      await this.sendEvents(events);
+    } catch (error) {
+      console.error("Failed to send analytics events:", error);
+      this.eventQueue.unshift(...events);
+    }
+  }
+  async sendEvents(events) {
+    const payload = events.map((event) => this.buildEventPayload(event));
+    for (const p of payload) {
+      await fetch(this.config.apiEndpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(p),
+        keepalive: true
+      });
+    }
+  }
+  buildEventPayload(event) {
+    return {
+      s: this.config.siteId,
+      sid: this.sessionId,
+      vid: this.visitorId,
+      e: "event",
+      u: typeof window !== "undefined" ? window.location.href : "",
+      p: {
+        eventName: event.name,
+        videoId: this.config.videoId,
+        videoTitle: this.config.videoTitle,
+        contentType: this.config.contentType,
+        category: this.config.category,
+        creatorId: this.config.creatorId,
+        seriesId: this.config.seriesId,
+        episode: this.config.episode,
+        season: this.config.season,
+        currentTime: event.currentTime,
+        duration: event.duration,
+        progress: event.duration > 0 ? event.currentTime / event.duration * 100 : 0,
+        watchTime: this.state.watchTime,
+        ...this.config.customProperties,
+        ...event.properties
+      }
+    };
+  }
+  generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+  }
+  getOrCreateVisitorId() {
+    if (typeof localStorage === "undefined") {
+      return this.generateId();
+    }
+    const key = "tsvp_visitor_id";
+    let visitorId = localStorage.getItem(key);
+    if (!visitorId) {
+      visitorId = this.generateId();
+      localStorage.setItem(key, visitorId);
+    }
+    return visitorId;
+  }
+  getState() {
+    return { ...this.state };
+  }
+  getSummary() {
+    return {
+      videoId: this.config.videoId,
+      sessionId: this.sessionId,
+      hasStarted: this.state.hasStarted,
+      hasCompleted: this.state.hasCompleted,
+      watchTime: this.state.watchTime,
+      pauseCount: this.state.pauseCount,
+      seekCount: this.state.seekCount,
+      bufferCount: this.state.bufferCount,
+      bufferTime: this.state.bufferTime,
+      qualityChangeCount: this.state.qualityChangeCount,
+      reachedMilestones: this.state.reachedMilestones,
+      completionRate: this.state.reachedQuartiles.length > 0 ? Math.max(...this.state.reachedQuartiles) : 0
+    };
+  }
+  reset() {
+    this.flush();
+    this.state = this.createInitialState();
+    this.sessionId = this.generateId();
+  }
+  destroy() {
+    this.detach();
+    if (this.flushTimer) {
+      clearTimeout(this.flushTimer);
+    }
+  }
+}
+function createVideoAnalytics(config) {
+  return new VideoAnalytics(config);
+}
+function analyticsPlugin(config) {
+  return {
+    name: "analytics",
+    install(player, videoConfig) {
+      const analytics = createVideoAnalytics({
+        ...config,
+        ...videoConfig
+      });
+      analytics.attach(player);
+      player.analytics = analytics;
+      return () => {
+        analytics.destroy();
+        delete player.analytics;
+      };
+    }
+  };
+}
+// src/plugins/ads.ts
+class VASTParser {
+  maxRedirects;
+  timeout;
+  redirectCount = 0;
+  constructor(options = {}) {
+    this.maxRedirects = options.maxRedirects ?? 5;
+    this.timeout = options.timeout ?? 1e4;
+  }
+  async parseFromUrl(url) {
+    this.redirectCount = 0;
+    return this.fetchAndParse(url);
+  }
+  parseFromXml(xml) {
+    const parser = new DOMParser;
+    const doc = parser.parseFromString(xml, "text/xml");
+    return this.parseDocument(doc);
+  }
+  async fetchAndParse(url) {
+    if (this.redirectCount >= this.maxRedirects) {
+      throw new Error("Too many VAST redirects");
+    }
+    const controller = new AbortController;
+    const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+    try {
+      const response = await fetch(url, { signal: controller.signal });
+      const text = await response.text();
+      const parser = new DOMParser;
+      const doc = parser.parseFromString(text, "text/xml");
+      const wrapper = doc.querySelector("Wrapper");
+      if (wrapper) {
+        const vastAdTagUri = wrapper.querySelector("VASTAdTagURI")?.textContent?.trim();
+        if (vastAdTagUri) {
+          this.redirectCount++;
+          return this.fetchAndParse(vastAdTagUri);
+        }
+      }
+      return this.parseDocument(doc);
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+  parseDocument(doc) {
+    const ads = [];
+    const adElements = doc.querySelectorAll("Ad");
+    adElements.forEach((adEl) => {
+      const inLine = adEl.querySelector("InLine");
+      if (!inLine)
+        return;
+      const ad = {
+        id: adEl.getAttribute("id") || this.generateId(),
+        type: "linear",
+        adSystem: inLine.querySelector("AdSystem")?.textContent?.trim(),
+        title: inLine.querySelector("AdTitle")?.textContent?.trim(),
+        description: inLine.querySelector("Description")?.textContent?.trim(),
+        duration: 0,
+        mediaFiles: [],
+        trackingEvents: []
+      };
+      const linear = inLine.querySelector("Linear");
+      if (linear) {
+        const durationStr = linear.querySelector("Duration")?.textContent?.trim();
+        if (durationStr) {
+          ad.duration = this.parseDuration(durationStr);
+        }
+        const skipOffset = linear.getAttribute("skipoffset");
+        if (skipOffset) {
+          ad.skipOffset = this.parseOffset(skipOffset, ad.duration);
+        }
+        linear.querySelectorAll("MediaFile").forEach((mf) => {
+          const url = mf.textContent?.trim();
+          if (url) {
+            ad.mediaFiles.push({
+              url,
+              type: mf.getAttribute("type") || "video/mp4",
+              width: Number.parseInt(mf.getAttribute("width") || "0", 10),
+              height: Number.parseInt(mf.getAttribute("height") || "0", 10),
+              bitrate: mf.getAttribute("bitrate") ? Number.parseInt(mf.getAttribute("bitrate"), 10) : undefined,
+              delivery: mf.getAttribute("delivery") || "progressive"
+            });
+          }
+        });
+        const clickThrough = linear.querySelector("VideoClicks > ClickThrough");
+        if (clickThrough) {
+          ad.clickThroughUrl = clickThrough.textContent?.trim();
+        }
+        linear.querySelectorAll("TrackingEvents > Tracking").forEach((tracking) => {
+          const event = tracking.getAttribute("event");
+          const url = tracking.textContent?.trim();
+          if (event && url) {
+            const trackingEvent = { event, url };
+            if (event === "progress") {
+              const offset = tracking.getAttribute("offset");
+              if (offset) {
+                trackingEvent.offset = this.parseOffset(offset, ad.duration);
+              }
+            }
+            ad.trackingEvents.push(trackingEvent);
+          }
+        });
+        linear.querySelectorAll("Icons > Icon").forEach((icon) => {
+          const staticResource = icon.querySelector("StaticResource");
+          if (staticResource?.textContent) {
+            ad.icons = ad.icons || [];
+            ad.icons.push({
+              url: staticResource.textContent.trim(),
+              width: Number.parseInt(icon.getAttribute("width") || "0", 10),
+              height: Number.parseInt(icon.getAttribute("height") || "0", 10),
+              xPosition: icon.getAttribute("xPosition") || "right",
+              yPosition: icon.getAttribute("yPosition") || "top",
+              clickUrl: icon.querySelector("IconClicks > IconClickThrough")?.textContent?.trim()
+            });
+          }
+        });
+      }
+      inLine.querySelectorAll("CompanionAds > Companion").forEach((comp) => {
+        ad.companions = ad.companions || [];
+        const staticResource = comp.querySelector("StaticResource");
+        const iframeResource = comp.querySelector("IFrameResource");
+        const htmlResource = comp.querySelector("HTMLResource");
+        let resourceUrl = "";
+        let resourceType = "static";
+        if (staticResource?.textContent) {
+          resourceUrl = staticResource.textContent.trim();
+          resourceType = "static";
+        } else if (iframeResource?.textContent) {
+          resourceUrl = iframeResource.textContent.trim();
+          resourceType = "iframe";
+        } else if (htmlResource?.textContent) {
+          resourceUrl = htmlResource.textContent.trim();
+          resourceType = "html";
+        }
+        if (resourceUrl) {
+          ad.companions.push({
+            width: Number.parseInt(comp.getAttribute("width") || "0", 10),
+            height: Number.parseInt(comp.getAttribute("height") || "0", 10),
+            resourceUrl,
+            resourceType,
+            clickThroughUrl: comp.querySelector("CompanionClickThrough")?.textContent?.trim(),
+            altText: comp.getAttribute("altText") || undefined,
+            trackingUrl: comp.querySelector("TrackingEvents > Tracking")?.textContent?.trim()
+          });
+        }
+      });
+      if (ad.mediaFiles.length > 0) {
+        ads.push(ad);
+      }
+    });
+    return ads;
+  }
+  parseDuration(duration) {
+    const parts = duration.split(":");
+    if (parts.length !== 3)
+      return 0;
+    const hours = Number.parseFloat(parts[0]);
+    const minutes = Number.parseFloat(parts[1]);
+    const seconds = Number.parseFloat(parts[2]);
+    return hours * 3600 + minutes * 60 + seconds;
+  }
+  parseOffset(offset, duration) {
+    if (offset.endsWith("%")) {
+      const percent = Number.parseFloat(offset) / 100;
+      return duration * percent;
+    }
+    return this.parseDuration(offset);
+  }
+  generateId() {
+    return `ad-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+  }
+}
+
+class AdsManager {
+  player = null;
+  config;
+  parser;
+  state;
+  container = null;
+  adVideo = null;
+  adContainer = null;
+  skipButton = null;
+  adBreaks = [];
+  currentAds = [];
+  currentAdIndex = 0;
+  skipTimer = null;
+  contentPaused = false;
+  onAdStart = null;
+  onAdComplete = null;
+  onAdSkip = null;
+  onAdClick = null;
+  onAdErrorCallback = null;
+  onAllAdsComplete = null;
+  constructor(config = {}) {
+    this.config = {
+      skipDelay: 5,
+      maxRedirects: 5,
+      timeout: 1e4,
+      vpaidEnabled: false,
+      preloadAds: true,
+      debug: false,
+      ...config
+    };
+    this.parser = new VASTParser({
+      maxRedirects: this.config.maxRedirects,
+      timeout: this.config.timeout
+    });
+    this.state = {
+      isPlaying: false,
+      currentAd: null,
+      currentBreak: null,
+      timeRemaining: 0,
+      canSkip: false,
+      skipCountdown: 0,
+      isLoading: false,
+      error: null
+    };
+    if (this.config.schedule) {
+      this.adBreaks = this.config.schedule;
+    } else if (this.config.vastUrl || this.config.vastXml) {
+      this.adBreaks = [{
+        type: "preroll",
+        vastUrl: this.config.vastUrl,
+        vastXml: this.config.vastXml
+      }];
+    }
+  }
+  attach(player, container) {
+    this.player = player;
+    this.container = container;
+    this.createAdContainer();
+    this.attachPlayerEvents();
+    if (this.config.preloadAds) {
+      this.preloadAds();
+    }
+  }
+  createAdContainer() {
+    if (!this.container)
+      return;
+    this.adContainer = document.createElement("div");
+    this.adContainer.className = "tsvp-ad-container";
+    this.adContainer.style.cssText = `
+      position: absolute;
+      inset: 0;
+      z-index: 50;
+      display: none;
+      background: #000;
+    `;
+    this.adVideo = document.createElement("video");
+    this.adVideo.style.cssText = `
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    `;
+    this.adVideo.playsInline = true;
+    const overlay = document.createElement("div");
+    overlay.className = "tsvp-ad-overlay";
+    overlay.style.cssText = `
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      pointer-events: none;
+    `;
+    const adInfo = document.createElement("div");
+    adInfo.className = "tsvp-ad-info";
+    adInfo.style.cssText = `
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      padding: 6px 12px;
+      background: rgba(0, 0, 0, 0.7);
+      color: #fff;
+      font-size: 12px;
+      font-family: var(--tsvp-font-family, sans-serif);
+      border-radius: 4px;
+    `;
+    adInfo.textContent = "Ad";
+    this.skipButton = document.createElement("button");
+    this.skipButton.className = "tsvp-ad-skip";
+    this.skipButton.style.cssText = `
+      position: absolute;
+      bottom: 80px;
+      right: 12px;
+      padding: 10px 16px;
+      background: rgba(0, 0, 0, 0.8);
+      color: #fff;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: var(--tsvp-font-family, sans-serif);
+      cursor: pointer;
+      pointer-events: auto;
+      display: none;
+    `;
+    this.skipButton.addEventListener("click", () => this.skipAd());
+    const learnMore = document.createElement("button");
+    learnMore.className = "tsvp-ad-learn-more";
+    learnMore.style.cssText = `
+      position: absolute;
+      bottom: 80px;
+      left: 12px;
+      padding: 10px 16px;
+      background: var(--tsvp-color-primary, #00a8ff);
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: var(--tsvp-font-family, sans-serif);
+      cursor: pointer;
+      pointer-events: auto;
+      display: none;
+    `;
+    learnMore.textContent = "Learn More";
+    learnMore.addEventListener("click", () => this.handleAdClick());
+    overlay.appendChild(adInfo);
+    overlay.appendChild(this.skipButton);
+    overlay.appendChild(learnMore);
+    this.adContainer.appendChild(this.adVideo);
+    this.adContainer.appendChild(overlay);
+    this.container.appendChild(this.adContainer);
+    this.adVideo.addEventListener("timeupdate", () => this.onAdTimeUpdate());
+    this.adVideo.addEventListener("ended", () => this.onAdEnded());
+    this.adVideo.addEventListener("error", () => this.handleAdError());
+  }
+  attachPlayerEvents() {
+    if (!this.player)
+      return;
+    let firstPlay = true;
+    this.player.on("play", async () => {
+      if (firstPlay) {
+        firstPlay = false;
+        const preroll = this.adBreaks.find((b) => b.type === "preroll" && !b.played);
+        if (preroll) {
+          await this.playAdBreak(preroll);
+        }
+      }
+    });
+    this.player.on("timeupdate", () => {
+      const state = this.player?.state;
+      if (!state)
+        return;
+      for (const adBreak of this.adBreaks) {
+        if (adBreak.type === "midroll" && !adBreak.played && adBreak.timeOffset && state.currentTime >= adBreak.timeOffset) {
+          this.playAdBreak(adBreak);
+          break;
+        }
+      }
+    });
+    this.player.on("ended", async () => {
+      const postroll = this.adBreaks.find((b) => b.type === "postroll" && !b.played);
+      if (postroll) {
+        await this.playAdBreak(postroll);
+      }
+    });
+  }
+  async preloadAds() {
+    for (const adBreak of this.adBreaks) {
+      if (adBreak.vastUrl) {
+        try {
+          await this.parser.parseFromUrl(adBreak.vastUrl);
+        } catch (error) {
+          this.log("Failed to preload ad:", error);
+        }
+      }
+    }
+  }
+  async playAdBreak(adBreak) {
+    if (this.state.isPlaying)
+      return;
+    this.state.currentBreak = adBreak;
+    this.state.isLoading = true;
+    this.pauseContent();
+    try {
+      if (adBreak.vastUrl) {
+        this.currentAds = await this.parser.parseFromUrl(adBreak.vastUrl);
+      } else if (adBreak.vastXml) {
+        this.currentAds = this.parser.parseFromXml(adBreak.vastXml);
+      }
+      if (this.currentAds.length === 0) {
+        throw new Error("No ads found in VAST response");
+      }
+      this.currentAdIndex = 0;
+      adBreak.played = true;
+      await this.playAd(this.currentAds[0]);
+    } catch (error) {
+      this.state.error = error.message;
+      this.state.isLoading = false;
+      this.onAdErrorCallback?.(error.message);
+      this.resumeContent();
+    }
+  }
+  async playAd(ad) {
+    if (!this.adVideo || !this.adContainer)
+      return;
+    this.state.currentAd = ad;
+    this.state.isPlaying = true;
+    this.state.isLoading = false;
+    this.state.timeRemaining = ad.duration;
+    this.state.canSkip = false;
+    this.state.skipCountdown = this.config.skipDelay || 0;
+    const mediaFile = this.selectMediaFile(ad.mediaFiles);
+    if (!mediaFile) {
+      throw new Error("No suitable media file found");
+    }
+    this.adContainer.style.display = "block";
+    this.adVideo.src = mediaFile.url;
+    await this.adVideo.play();
+    this.trackEvent(ad, "impression");
+    this.trackEvent(ad, "start");
+    this.startSkipTimer(ad);
+    this.onAdStart?.(ad);
+  }
+  selectMediaFile(mediaFiles) {
+    const sorted = [...mediaFiles].sort((a, b) => {
+      if (a.type.includes("mp4") && !b.type.includes("mp4"))
+        return -1;
+      if (!a.type.includes("mp4") && b.type.includes("mp4"))
+        return 1;
+      return (b.bitrate || 0) - (a.bitrate || 0);
+    });
+    return sorted[0] || null;
+  }
+  startSkipTimer(ad) {
+    const skipDelay = this.config.skipDelay === -1 ? ad.skipOffset || 5 : this.config.skipDelay || 0;
+    if (skipDelay <= 0) {
+      this.state.canSkip = true;
+      this.updateSkipButton();
+      return;
+    }
+    this.state.skipCountdown = skipDelay;
+    this.skipTimer = setInterval(() => {
+      this.state.skipCountdown--;
+      if (this.state.skipCountdown <= 0) {
+        this.state.canSkip = true;
+        if (this.skipTimer) {
+          clearInterval(this.skipTimer);
+          this.skipTimer = null;
+        }
+      }
+      this.updateSkipButton();
+    }, 1000);
+  }
+  updateSkipButton() {
+    if (!this.skipButton)
+      return;
+    if (this.state.canSkip) {
+      this.skipButton.textContent = "Skip Ad";
+      this.skipButton.style.display = "block";
+    } else if (this.state.skipCountdown > 0) {
+      this.skipButton.textContent = `Skip in ${this.state.skipCountdown}s`;
+      this.skipButton.style.display = "block";
+      this.skipButton.style.cursor = "default";
+    } else {
+      this.skipButton.style.display = "none";
+    }
+  }
+  skipAd() {
+    if (!this.state.canSkip || !this.state.currentAd)
+      return;
+    this.trackEvent(this.state.currentAd, "skip");
+    this.onAdSkip?.(this.state.currentAd);
+    this.onAdEnded();
+  }
+  handleAdClick() {
+    if (!this.state.currentAd?.clickThroughUrl)
+      return;
+    this.adVideo?.pause();
+    this.trackEvent(this.state.currentAd, "clickThrough");
+    this.onAdClick?.(this.state.currentAd);
+    window.open(this.state.currentAd.clickThroughUrl, "_blank");
+  }
+  onAdTimeUpdate() {
+    if (!this.adVideo || !this.state.currentAd)
+      return;
+    const currentTime = this.adVideo.currentTime;
+    const duration = this.state.currentAd.duration;
+    this.state.timeRemaining = Math.max(0, duration - currentTime);
+    const progress = currentTime / duration;
+    if (progress >= 0.25)
+      this.trackEvent(this.state.currentAd, "firstQuartile");
+    if (progress >= 0.5)
+      this.trackEvent(this.state.currentAd, "midpoint");
+    if (progress >= 0.75)
+      this.trackEvent(this.state.currentAd, "thirdQuartile");
+    for (const event of this.state.currentAd.trackingEvents) {
+      if (event.event === "progress" && event.offset && currentTime >= event.offset) {
+        this.trackUrl(event.url);
+      }
+    }
+  }
+  onAdEnded() {
+    if (this.state.currentAd) {
+      this.trackEvent(this.state.currentAd, "complete");
+      this.onAdComplete?.(this.state.currentAd);
+    }
+    if (this.skipTimer) {
+      clearInterval(this.skipTimer);
+      this.skipTimer = null;
+    }
+    this.currentAdIndex++;
+    if (this.currentAdIndex < this.currentAds.length) {
+      this.playAd(this.currentAds[this.currentAdIndex]);
+    } else {
+      this.finishAdBreak();
+    }
+  }
+  handleAdError() {
+    const error = "Ad playback failed";
+    this.state.error = error;
+    this.onAdErrorCallback?.(error);
+    this.trackEvent(this.state.currentAd, "error");
+    this.finishAdBreak();
+  }
+  finishAdBreak() {
+    this.state.isPlaying = false;
+    this.state.currentAd = null;
+    this.state.currentBreak = null;
+    this.currentAds = [];
+    this.currentAdIndex = 0;
+    if (this.adContainer) {
+      this.adContainer.style.display = "none";
+    }
+    this.onAllAdsComplete?.();
+    this.resumeContent();
+  }
+  pauseContent() {
+    if (!this.player)
+      return;
+    const state = this.player.state;
+    if (state.playbackState === "playing") {
+      this.contentPaused = true;
+      this.player.pause();
+    }
+  }
+  resumeContent() {
+    if (!this.player)
+      return;
+    if (this.contentPaused) {
+      this.contentPaused = false;
+      this.player.play();
+    }
+  }
+  trackEvent(ad, eventName) {
+    const events = ad.trackingEvents.filter((e) => e.event === eventName);
+    for (const event of events) {
+      this.trackUrl(event.url);
+    }
+  }
+  trackUrl(url) {
+    const img = new Image;
+    img.src = url;
+  }
+  log(...args) {
+    if (this.config.debug) {
+      console.log("[VideoAds]", ...args);
+    }
+  }
+  getState() {
+    return { ...this.state };
+  }
+  on(event, handler) {
+    switch (event) {
+      case "adStart":
+        this.onAdStart = handler;
+        break;
+      case "adComplete":
+        this.onAdComplete = handler;
+        break;
+      case "adSkip":
+        this.onAdSkip = handler;
+        break;
+      case "adClick":
+        this.onAdClick = handler;
+        break;
+      case "adError":
+        this.onAdErrorCallback = handler;
+        break;
+      case "allAdsComplete":
+        this.onAllAdsComplete = handler;
+        break;
+    }
+  }
+  destroy() {
+    if (this.skipTimer) {
+      clearInterval(this.skipTimer);
+    }
+    if (this.adContainer) {
+      this.adContainer.remove();
+    }
+    this.player = null;
+    this.container = null;
+    this.adVideo = null;
+    this.adContainer = null;
+  }
+}
+function createAdsManager(config) {
+  return new AdsManager(config);
+}
+function adsPlugin(config) {
+  return {
+    name: "ads",
+    install(player, container) {
+      const ads = createAdsManager(config);
+      ads.attach(player, container);
+      player.ads = ads;
+      return () => {
+        ads.destroy();
+        delete player.ads;
+      };
+    }
+  };
+}
+// src/plugins/skip-segments.ts
+var defaultButtonText = {
+  intro: "Skip Intro",
+  outro: "Skip Outro",
+  recap: "Skip Recap",
+  preview: "Skip Preview",
+  credits: "Skip Credits",
+  sponsor: "Skip",
+  custom: "Skip"
+};
+
+class SkipSegmentsManager {
+  player = null;
+  config;
+  state;
+  container = null;
+  button = null;
+  markersContainer = null;
+  countdownTimer = null;
+  hideTimer = null;
+  unsubscribers = [];
+  onSkip = null;
+  onSegmentEnter = null;
+  onSegmentExit = null;
+  constructor(config) {
+    this.config = {
+      segments: config.segments || [],
+      buttonVisibleDuration: config.buttonVisibleDuration ?? 1e4,
+      defaultAutoSkipDelay: config.defaultAutoSkipDelay ?? 0,
+      buttonPosition: config.buttonPosition || "bottom-right",
+      showMarkers: config.showMarkers ?? true,
+      markerColor: config.markerColor || "rgba(255, 255, 0, 0.8)",
+      keyboardShortcut: config.keyboardShortcut ?? true
+    };
+    this.state = {
+      activeSegment: null,
+      buttonVisible: false,
+      countdown: 0,
+      isAutoSkipping: false
+    };
+  }
+  attach(player, container) {
+    this.player = player;
+    this.container = container;
+    this.createButton();
+    this.attachEventListeners();
+    if (this.config.showMarkers) {
+      this.createMarkers();
+    }
+  }
+  createButton() {
+    if (!this.container)
+      return;
+    this.button = document.createElement("button");
+    this.button.className = "tsvp-skip-button";
+    this.button.type = "button";
+    const positionStyles = this.getPositionStyles();
+    this.button.style.cssText = `
+      position: absolute;
+      ${positionStyles}
+      padding: 12px 24px;
+      background: rgba(0, 0, 0, 0.85);
+      color: #fff;
+      border: 2px solid rgba(255, 255, 255, 0.8);
+      border-radius: 4px;
+      font-size: 16px;
+      font-weight: 600;
+      font-family: var(--tsvp-font-family, sans-serif);
+      cursor: pointer;
+      z-index: 30;
+      display: none;
+      transition: transform 150ms ease, background 150ms ease;
+    `;
+    this.button.addEventListener("mouseenter", () => {
+      this.button.style.background = "rgba(255, 255, 255, 0.2)";
+      this.button.style.transform = "scale(1.05)";
+    });
+    this.button.addEventListener("mouseleave", () => {
+      this.button.style.background = "rgba(0, 0, 0, 0.85)";
+      this.button.style.transform = "scale(1)";
+    });
+    this.button.addEventListener("click", () => this.skip());
+    this.container.appendChild(this.button);
+  }
+  getPositionStyles() {
+    switch (this.config.buttonPosition) {
+      case "top-left":
+        return "top: 20px; left: 20px;";
+      case "top-right":
+        return "top: 20px; right: 20px;";
+      case "bottom-left":
+        return "bottom: 80px; left: 20px;";
+      case "bottom-right":
+      default:
+        return "bottom: 80px; right: 20px;";
+    }
+  }
+  createMarkers() {}
+  getMarkersElement(duration) {
+    this.markersContainer = document.createElement("div");
+    this.markersContainer.className = "tsvp-skip-markers";
+    this.markersContainer.style.cssText = `
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+    `;
+    for (const segment of this.config.segments) {
+      const marker = document.createElement("div");
+      marker.className = "tsvp-skip-marker";
+      const startPercent = segment.startTime / duration * 100;
+      const widthPercent = (segment.endTime - segment.startTime) / duration * 100;
+      marker.style.cssText = `
+        position: absolute;
+        left: ${startPercent}%;
+        width: ${widthPercent}%;
+        top: 0;
+        bottom: 0;
+        background: ${this.config.markerColor};
+        opacity: 0.6;
+      `;
+      this.markersContainer.appendChild(marker);
+    }
+    return this.markersContainer;
+  }
+  attachEventListeners() {
+    if (!this.player)
+      return;
+    const handleTimeUpdate = () => {
+      const state = this.player?.state;
+      if (!state)
+        return;
+      this.checkSegments(state.currentTime);
+    };
+    this.player.on("timeupdate", handleTimeUpdate);
+    this.unsubscribers.push(() => this.player?.off("timeupdate", handleTimeUpdate));
+    if (this.config.keyboardShortcut) {
+      const handleKeydown = (e) => {
+        if (e.key === "Enter" && this.state.activeSegment && this.state.buttonVisible) {
+          e.preventDefault();
+          this.skip();
+        }
+      };
+      document.addEventListener("keydown", handleKeydown);
+      this.unsubscribers.push(() => document.removeEventListener("keydown", handleKeydown));
+    }
+  }
+  checkSegments(currentTime) {
+    const previousSegment = this.state.activeSegment;
+    let activeSegment = null;
+    for (const segment of this.config.segments) {
+      if (currentTime >= segment.startTime && currentTime < segment.endTime) {
+        activeSegment = segment;
+        break;
+      }
+    }
+    if (activeSegment !== previousSegment) {
+      if (previousSegment) {
+        this.onSegmentExit?.(previousSegment);
+        this.hideButton();
+      }
+      if (activeSegment) {
+        this.state.activeSegment = activeSegment;
+        this.onSegmentEnter?.(activeSegment);
+        this.showButton(activeSegment);
+      } else {
+        this.state.activeSegment = null;
+      }
+    }
+  }
+  showButton(segment) {
+    if (!this.button)
+      return;
+    const text = segment.buttonText || defaultButtonText[segment.type];
+    this.button.textContent = text;
+    this.state.buttonVisible = true;
+    this.button.style.display = "block";
+    this.button.style.opacity = "0";
+    this.button.style.transform = "translateX(20px)";
+    requestAnimationFrame(() => {
+      this.button.style.transition = "opacity 200ms ease, transform 200ms ease";
+      this.button.style.opacity = "1";
+      this.button.style.transform = "translateX(0)";
+    });
+    const autoSkipDelay = segment.autoSkipDelay ?? this.config.defaultAutoSkipDelay;
+    if (autoSkipDelay > 0) {
+      this.startAutoSkip(autoSkipDelay, segment);
+    }
+    if (this.config.buttonVisibleDuration > 0 && !autoSkipDelay) {
+      this.hideTimer = setTimeout(() => {
+        this.hideButton();
+      }, this.config.buttonVisibleDuration);
+    }
+  }
+  hideButton() {
+    if (!this.button)
+      return;
+    this.state.buttonVisible = false;
+    this.state.isAutoSkipping = false;
+    this.state.countdown = 0;
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+      this.countdownTimer = null;
+    }
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+    this.button.style.opacity = "0";
+    this.button.style.transform = "translateX(20px)";
+    setTimeout(() => {
+      if (this.button && !this.state.buttonVisible) {
+        this.button.style.display = "none";
+      }
+    }, 200);
+  }
+  startAutoSkip(delay, segment) {
+    this.state.isAutoSkipping = true;
+    this.state.countdown = delay;
+    this.updateButtonText(segment);
+    this.countdownTimer = setInterval(() => {
+      this.state.countdown--;
+      this.updateButtonText(segment);
+      if (this.state.countdown <= 0) {
+        if (this.countdownTimer) {
+          clearInterval(this.countdownTimer);
+          this.countdownTimer = null;
+        }
+        this.skip();
+      }
+    }, 1000);
+  }
+  updateButtonText(segment) {
+    if (!this.button)
+      return;
+    const baseText = segment.buttonText || defaultButtonText[segment.type];
+    if (this.state.isAutoSkipping && this.state.countdown > 0 && segment.showCountdown !== false) {
+      this.button.textContent = `${baseText} (${this.state.countdown})`;
+    } else {
+      this.button.textContent = baseText;
+    }
+  }
+  skip() {
+    if (!this.state.activeSegment || !this.player)
+      return;
+    const segment = this.state.activeSegment;
+    const skipTo = segment.skipTo ?? segment.endTime;
+    this.player.seekTo(skipTo);
+    this.onSkip?.(segment);
+    this.hideButton();
+  }
+  addSegment(segment) {
+    this.config.segments.push(segment);
+  }
+  removeSegment(type) {
+    this.config.segments = this.config.segments.filter((s) => s.type !== type);
+  }
+  clearSegments() {
+    this.config.segments = [];
+    this.hideButton();
+  }
+  setSegments(segments) {
+    this.config.segments = segments;
+  }
+  getSegments() {
+    return [...this.config.segments];
+  }
+  getState() {
+    return { ...this.state };
+  }
+  on(event, handler) {
+    switch (event) {
+      case "skip":
+        this.onSkip = handler;
+        break;
+      case "segmentEnter":
+        this.onSegmentEnter = handler;
+        break;
+      case "segmentExit":
+        this.onSegmentExit = handler;
+        break;
+    }
+  }
+  destroy() {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+    }
+    this.unsubscribers.forEach((unsub) => unsub());
+    this.button?.remove();
+    this.markersContainer?.remove();
+    this.player = null;
+    this.container = null;
+  }
+}
+function createSkipSegments(config) {
+  return new SkipSegmentsManager(config);
+}
+function skipSegmentsPlugin(config) {
+  return {
+    name: "skipSegments",
+    install(player, container) {
+      const skipSegments = createSkipSegments(config);
+      skipSegments.attach(player, container);
+      player.skipSegments = skipSegments;
+      return () => {
+        skipSegments.destroy();
+        delete player.skipSegments;
+      };
+    }
+  };
+}
+// src/plugins/end-screen.ts
+class EndScreenManager {
+  player = null;
+  config;
+  state;
+  container = null;
+  element = null;
+  countdownTimer = null;
+  showTimer = null;
+  unsubscribers = [];
+  onRecommendationClick = null;
+  onReplay = null;
+  onAutoplay = null;
+  onShow = null;
+  onHide = null;
+  constructor(config = {}) {
+    this.config = {
+      enabled: config.enabled ?? true,
+      showDelay: config.showDelay ?? 0,
+      recommendations: config.recommendations || [],
+      actions: config.actions || [],
+      showReplay: config.showReplay ?? true,
+      showShare: config.showShare ?? false,
+      autoplayCountdown: config.autoplayCountdown ?? 0,
+      title: config.title || "",
+      template: config.template || "",
+      backgroundStyle: config.backgroundStyle || "blur"
+    };
+    this.state = {
+      visible: false,
+      countdown: 0,
+      isCountingDown: false,
+      selectedIndex: 0
+    };
+  }
+  attach(player, container) {
+    this.player = player;
+    this.container = container;
+    this.createElement();
+    this.attachEventListeners();
+  }
+  createElement() {
+    if (!this.container)
+      return;
+    this.element = document.createElement("div");
+    this.element.className = "tsvp-end-screen";
+    this.element.style.cssText = `
+      position: absolute;
+      inset: 0;
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 40;
+      font-family: var(--tsvp-font-family, sans-serif);
+      color: var(--tsvp-color-text, #ffffff);
+      padding: 24px;
+      overflow: auto;
+    `;
+    this.applyBackgroundStyle();
+    this.container.appendChild(this.element);
+  }
+  applyBackgroundStyle() {
+    if (!this.element)
+      return;
+    switch (this.config.backgroundStyle) {
+      case "blur":
+        this.element.style.background = "rgba(0, 0, 0, 0.85)";
+        this.element.style.backdropFilter = "blur(10px)";
+        break;
+      case "dark":
+        this.element.style.background = "rgba(0, 0, 0, 0.95)";
+        break;
+      case "gradient":
+        this.element.style.background = "linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,20,40,0.95) 100%)";
+        break;
+      case "none":
+        this.element.style.background = "transparent";
+        break;
+    }
+  }
+  render() {
+    if (!this.element)
+      return;
+    if (this.config.template) {
+      this.element.innerHTML = this.config.template;
+      return;
+    }
+    this.element.innerHTML = "";
+    if (this.config.title) {
+      const title = document.createElement("h2");
+      title.className = "tsvp-end-screen-title";
+      title.textContent = this.config.title;
+      title.style.cssText = `
+        margin: 0 0 24px;
+        font-size: 24px;
+        font-weight: 600;
+        text-align: center;
+      `;
+      this.element.appendChild(title);
+    }
+    if (this.config.recommendations.length > 0) {
+      const grid = document.createElement("div");
+      grid.className = "tsvp-end-screen-grid";
+      grid.style.cssText = `
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        max-width: 900px;
+        width: 100%;
+        margin-bottom: 24px;
+      `;
+      this.config.recommendations.forEach((rec, index) => {
+        const card = this.createRecommendationCard(rec, index);
+        grid.appendChild(card);
+      });
+      this.element.appendChild(grid);
+    }
+    const actionsRow = document.createElement("div");
+    actionsRow.className = "tsvp-end-screen-actions";
+    actionsRow.style.cssText = `
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      justify-content: center;
+    `;
+    if (this.config.showReplay) {
+      const replayBtn = this.createActionButton({
+        label: "Replay",
+        icon: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+          <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+        </svg>`,
+        style: "secondary",
+        onClick: () => this.replay()
+      });
+      actionsRow.appendChild(replayBtn);
+    }
+    if (this.config.showShare) {
+      const shareBtn = this.createActionButton({
+        label: "Share",
+        icon: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+          <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/>
+        </svg>`,
+        style: "outline",
+        onClick: () => this.share()
+      });
+      actionsRow.appendChild(shareBtn);
+    }
+    for (const action of this.config.actions) {
+      const btn = this.createActionButton(action);
+      actionsRow.appendChild(btn);
+    }
+    this.element.appendChild(actionsRow);
+    if (this.state.isCountingDown && this.config.recommendations.length > 0) {
+      const countdown = document.createElement("div");
+      countdown.className = "tsvp-end-screen-countdown";
+      countdown.style.cssText = `
+        margin-top: 24px;
+        text-align: center;
+        font-size: 14px;
+        opacity: 0.8;
+      `;
+      countdown.innerHTML = `
+        Next video in <strong>${this.state.countdown}</strong> seconds
+        <button class="tsvp-end-screen-cancel" style="
+          margin-left: 12px;
+          padding: 4px 12px;
+          border: 1px solid rgba(255,255,255,0.3);
+          border-radius: 4px;
+          background: transparent;
+          color: inherit;
+          cursor: pointer;
+        ">Cancel</button>
+      `;
+      const cancelBtn = countdown.querySelector(".tsvp-end-screen-cancel");
+      cancelBtn?.addEventListener("click", () => this.cancelAutoplay());
+      this.element.appendChild(countdown);
+    }
+  }
+  createRecommendationCard(rec, index) {
+    const card = document.createElement("div");
+    card.className = "tsvp-end-screen-card";
+    card.tabIndex = 0;
+    const isSelected = index === this.state.selectedIndex && this.state.isCountingDown;
+    card.style.cssText = `
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: transform 150ms ease, background 150ms ease;
+      ${isSelected ? "outline: 2px solid var(--tsvp-color-primary, #00a8ff); outline-offset: 2px;" : ""}
+    `;
+    const thumbnail = document.createElement("div");
+    thumbnail.className = "tsvp-end-screen-thumbnail";
+    thumbnail.style.cssText = `
+      position: relative;
+      aspect-ratio: 16 / 9;
+      background: url(${rec.thumbnail}) center/cover;
+    `;
+    if (rec.duration) {
+      const duration = document.createElement("span");
+      duration.className = "tsvp-end-screen-duration";
+      duration.textContent = rec.duration;
+      duration.style.cssText = `
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+        padding: 2px 6px;
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+      `;
+      thumbnail.appendChild(duration);
+    }
+    card.appendChild(thumbnail);
+    const info = document.createElement("div");
+    info.className = "tsvp-end-screen-info";
+    info.style.cssText = `
+      padding: 12px;
+    `;
+    const title = document.createElement("h3");
+    title.className = "tsvp-end-screen-card-title";
+    title.textContent = rec.title;
+    title.style.cssText = `
+      margin: 0 0 4px;
+      font-size: 14px;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    `;
+    info.appendChild(title);
+    if (rec.channel) {
+      const channel = document.createElement("p");
+      channel.className = "tsvp-end-screen-channel";
+      channel.textContent = rec.channel;
+      channel.style.cssText = `
+        margin: 0;
+        font-size: 12px;
+        opacity: 0.7;
+      `;
+      info.appendChild(channel);
+    }
+    if (rec.views || rec.date) {
+      const meta = document.createElement("p");
+      meta.className = "tsvp-end-screen-meta";
+      meta.textContent = [rec.views, rec.date].filter(Boolean).join(" • ");
+      meta.style.cssText = `
+        margin: 4px 0 0;
+        font-size: 12px;
+        opacity: 0.6;
+      `;
+      info.appendChild(meta);
+    }
+    card.appendChild(info);
+    card.addEventListener("mouseenter", () => {
+      card.style.transform = "scale(1.03)";
+      card.style.background = "rgba(255, 255, 255, 0.15)";
+    });
+    card.addEventListener("mouseleave", () => {
+      card.style.transform = "scale(1)";
+      card.style.background = "rgba(255, 255, 255, 0.1)";
+    });
+    card.addEventListener("click", () => {
+      this.onRecommendationClick?.(rec);
+      if (rec.onClick) {
+        rec.onClick();
+      } else if (rec.url) {
+        window.location.href = rec.url;
+      }
+    });
+    return card;
+  }
+  createActionButton(action) {
+    const btn = document.createElement("button");
+    btn.className = `tsvp-end-screen-btn tsvp-end-screen-btn--${action.style || "secondary"}`;
+    btn.type = "button";
+    let bgColor = "rgba(255, 255, 255, 0.2)";
+    let borderColor = "transparent";
+    switch (action.style) {
+      case "primary":
+        bgColor = "var(--tsvp-color-primary, #00a8ff)";
+        break;
+      case "outline":
+        bgColor = "transparent";
+        borderColor = "rgba(255, 255, 255, 0.5)";
+        break;
+    }
+    btn.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 20px;
+      background: ${bgColor};
+      border: 1px solid ${borderColor};
+      border-radius: 6px;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: transform 150ms ease, opacity 150ms ease;
+    `;
+    if (action.icon) {
+      const icon = document.createElement("span");
+      icon.innerHTML = action.icon;
+      icon.style.display = "flex";
+      btn.appendChild(icon);
+    }
+    const label = document.createElement("span");
+    label.textContent = action.label;
+    btn.appendChild(label);
+    btn.addEventListener("mouseenter", () => {
+      btn.style.transform = "scale(1.05)";
+    });
+    btn.addEventListener("mouseleave", () => {
+      btn.style.transform = "scale(1)";
+    });
+    btn.addEventListener("click", action.onClick);
+    return btn;
+  }
+  attachEventListeners() {
+    if (!this.player)
+      return;
+    const handleEnded = () => {
+      if (this.config.enabled) {
+        this.showTimer = setTimeout(() => {
+          this.show();
+        }, this.config.showDelay);
+      }
+    };
+    this.player.on("ended", handleEnded);
+    this.unsubscribers.push(() => this.player?.off("ended", handleEnded));
+    const handlePlay = () => {
+      if (this.state.visible) {
+        this.hide();
+      }
+    };
+    this.player.on("play", handlePlay);
+    this.unsubscribers.push(() => this.player?.off("play", handlePlay));
+    const handleKeydown = (e) => {
+      if (!this.state.visible)
+        return;
+      switch (e.key) {
+        case "Escape":
+          this.hide();
+          break;
+        case "ArrowLeft":
+          this.selectPrevious();
+          break;
+        case "ArrowRight":
+          this.selectNext();
+          break;
+        case "Enter":
+          this.selectCurrent();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    this.unsubscribers.push(() => document.removeEventListener("keydown", handleKeydown));
+  }
+  show() {
+    if (!this.element || this.state.visible)
+      return;
+    this.state.visible = true;
+    this.state.selectedIndex = 0;
+    if (this.config.autoplayCountdown > 0 && this.config.recommendations.length > 0) {
+      this.startAutoplayCountdown();
+    }
+    this.render();
+    this.element.style.display = "flex";
+    this.element.style.opacity = "0";
+    requestAnimationFrame(() => {
+      this.element.style.transition = "opacity 300ms ease";
+      this.element.style.opacity = "1";
+    });
+    this.onShow?.();
+  }
+  hide() {
+    if (!this.element || !this.state.visible)
+      return;
+    this.state.visible = false;
+    this.cancelAutoplay();
+    this.element.style.opacity = "0";
+    setTimeout(() => {
+      if (this.element && !this.state.visible) {
+        this.element.style.display = "none";
+      }
+    }, 300);
+    this.onHide?.();
+  }
+  startAutoplayCountdown() {
+    this.state.isCountingDown = true;
+    this.state.countdown = this.config.autoplayCountdown;
+    this.countdownTimer = setInterval(() => {
+      this.state.countdown--;
+      this.render();
+      if (this.state.countdown <= 0) {
+        this.playNextVideo();
+      }
+    }, 1000);
+  }
+  cancelAutoplay() {
+    this.state.isCountingDown = false;
+    this.state.countdown = 0;
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+      this.countdownTimer = null;
+    }
+    if (this.state.visible) {
+      this.render();
+    }
+  }
+  playNextVideo() {
+    const rec = this.config.recommendations[this.state.selectedIndex];
+    if (rec) {
+      this.onAutoplay?.(rec);
+      if (rec.onClick) {
+        rec.onClick();
+      } else if (rec.url) {
+        window.location.href = rec.url;
+      }
+    }
+  }
+  selectPrevious() {
+    if (this.config.recommendations.length === 0)
+      return;
+    this.state.selectedIndex = (this.state.selectedIndex - 1 + this.config.recommendations.length) % this.config.recommendations.length;
+    this.render();
+  }
+  selectNext() {
+    if (this.config.recommendations.length === 0)
+      return;
+    this.state.selectedIndex = (this.state.selectedIndex + 1) % this.config.recommendations.length;
+    this.render();
+  }
+  selectCurrent() {
+    const rec = this.config.recommendations[this.state.selectedIndex];
+    if (rec) {
+      this.onRecommendationClick?.(rec);
+      if (rec.onClick) {
+        rec.onClick();
+      } else if (rec.url) {
+        window.location.href = rec.url;
+      }
+    }
+  }
+  replay() {
+    this.hide();
+    this.player?.seekTo(0);
+    this.player?.play();
+    this.onReplay?.();
+  }
+  share() {
+    if (navigator.share) {
+      navigator.share({
+        title: document.title,
+        url: window.location.href
+      });
+    } else {
+      navigator.clipboard?.writeText(window.location.href);
+    }
+  }
+  setRecommendations(recommendations) {
+    this.config.recommendations = recommendations;
+    if (this.state.visible) {
+      this.render();
+    }
+  }
+  getState() {
+    return { ...this.state };
+  }
+  on(event, handler) {
+    switch (event) {
+      case "recommendationClick":
+        this.onRecommendationClick = handler;
+        break;
+      case "replay":
+        this.onReplay = handler;
+        break;
+      case "autoplay":
+        this.onAutoplay = handler;
+        break;
+      case "show":
+        this.onShow = handler;
+        break;
+      case "hide":
+        this.onHide = handler;
+        break;
+    }
+  }
+  destroy() {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
+    if (this.showTimer) {
+      clearTimeout(this.showTimer);
+    }
+    this.unsubscribers.forEach((unsub) => unsub());
+    this.element?.remove();
+    this.player = null;
+    this.container = null;
+  }
+}
+function createEndScreen(config) {
+  return new EndScreenManager(config);
+}
+function endScreenPlugin(config) {
+  return {
+    name: "endScreen",
+    install(player, container) {
+      const endScreen = createEndScreen(config);
+      endScreen.attach(player, container);
+      player.endScreen = endScreen;
+      return () => {
+        endScreen.destroy();
+        delete player.endScreen;
+      };
+    }
+  };
+}
+// src/plugins/watermark.ts
+class WatermarkManager {
+  player = null;
+  container = null;
+  elements = new Map;
+  dynamicTimers = new Map;
+  unsubscribers = [];
+  constructor() {}
+  attach(player, container) {
+    this.player = player;
+    this.container = container;
+  }
+  add(id, config) {
+    if (!this.container) {
+      throw new Error("Watermark manager not attached to container");
+    }
+    this.remove(id);
+    const element = this.createElement(config);
+    element.dataset.watermarkId = id;
+    this.elements.set(id, element);
+    this.container.appendChild(element);
+    if (config.showOnlyDuringPlayback && this.player) {
+      this.setupPlaybackVisibility(id, element);
+    }
+    if (config.animation && config.animation.type !== "none") {
+      this.applyAnimation(element, config.animation);
+    }
+    return element;
+  }
+  createElement(config) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "tsvp-watermark";
+    const positionStyles = this.getPositionStyles(config.position || "bottom-right", config.offset);
+    wrapper.style.cssText = `
+      position: absolute;
+      ${positionStyles}
+      z-index: 25;
+      pointer-events: ${config.url ? "auto" : "none"};
+      opacity: ${config.opacity ?? 0.7};
+      transition: opacity ${config.fadeIn || 300}ms ease;
+      ${config.rotate ? `transform: rotate(${config.rotate}deg);` : ""}
+    `;
+    if (config.styles) {
+      Object.assign(wrapper.style, config.styles);
+    }
+    let content;
+    if (config.html) {
+      content = document.createElement("div");
+      content.innerHTML = config.html;
+    } else if (config.image) {
+      const img = document.createElement("img");
+      img.src = config.image;
+      img.alt = "Watermark";
+      img.style.cssText = `
+        display: block;
+        max-width: 100%;
+        height: auto;
+        ${config.size ? `width: ${config.size};` : ""}
+      `;
+      content = img;
+    } else if (config.text) {
+      content = document.createElement("span");
+      content.textContent = config.text;
+      content.style.cssText = `
+        font-family: var(--tsvp-font-family, sans-serif);
+        font-size: ${config.size || "14px"};
+        color: rgba(255, 255, 255, 0.8);
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+      `;
+    } else {
+      content = document.createElement("span");
+    }
+    if (config.url) {
+      const link = document.createElement("a");
+      link.href = config.url;
+      link.target = config.newTab ? "_blank" : "_self";
+      link.rel = config.newTab ? "noopener noreferrer" : "";
+      link.style.textDecoration = "none";
+      link.appendChild(content);
+      wrapper.appendChild(link);
+    } else {
+      wrapper.appendChild(content);
+    }
+    return wrapper;
+  }
+  getPositionStyles(position, offset) {
+    const offsetX = typeof offset?.x === "number" ? `${offset.x}px` : offset?.x || "16px";
+    const offsetY = typeof offset?.y === "number" ? `${offset.y}px` : offset?.y || "16px";
+    const positions = {
+      "top-left": `top: ${offsetY}; left: ${offsetX};`,
+      "top-center": `top: ${offsetY}; left: 50%; transform: translateX(-50%);`,
+      "top-right": `top: ${offsetY}; right: ${offsetX};`,
+      "center-left": `top: 50%; left: ${offsetX}; transform: translateY(-50%);`,
+      center: `top: 50%; left: 50%; transform: translate(-50%, -50%);`,
+      "center-right": `top: 50%; right: ${offsetX}; transform: translateY(-50%);`,
+      "bottom-left": `bottom: ${offsetY}; left: ${offsetX};`,
+      "bottom-center": `bottom: ${offsetY}; left: 50%; transform: translateX(-50%);`,
+      "bottom-right": `bottom: ${offsetY}; right: ${offsetX};`
+    };
+    return positions[position] || positions["bottom-right"];
+  }
+  setupPlaybackVisibility(_id, element) {
+    if (!this.player)
+      return;
+    element.style.opacity = "0";
+    const handlePlay = () => {
+      element.style.opacity = "";
+    };
+    const handlePause = () => {
+      element.style.opacity = "0";
+    };
+    this.player.on("play", handlePlay);
+    this.player.on("pause", handlePause);
+    this.player.on("ended", handlePause);
+    this.unsubscribers.push(() => {
+      this.player?.off("play", handlePlay);
+      this.player?.off("pause", handlePause);
+      this.player?.off("ended", handlePause);
+    });
+  }
+  applyAnimation(element, animation) {
+    const duration = animation.duration || 1000;
+    const delay = animation.delay || 0;
+    const repeat = animation.repeat ? "infinite" : "1";
+    if (!document.querySelector("#tsvp-watermark-animations")) {
+      const style = document.createElement("style");
+      style.id = "tsvp-watermark-animations";
+      style.textContent = `
+        @keyframes tsvp-watermark-fade {
+          0%, 100% { opacity: 0.3; }
+          50% { opacity: 1; }
+        }
+        @keyframes tsvp-watermark-slide {
+          0% { transform: translateX(-10px); }
+          50% { transform: translateX(10px); }
+          100% { transform: translateX(-10px); }
+        }
+        @keyframes tsvp-watermark-bounce {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-10px); }
+        }
+        @keyframes tsvp-watermark-pulse {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.1); }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    const animationName = `tsvp-watermark-${animation.type}`;
+    element.style.animation = `${animationName} ${duration}ms ease ${delay}ms ${repeat}`;
+  }
+  addDynamic(id, config, baseConfig = {}) {
+    const getText = () => {
+      const parts = [];
+      if (config.userId) {
+        parts.push(config.userId);
+      }
+      if (config.showTimestamp) {
+        parts.push(new Date().toISOString());
+      }
+      if (config.customText) {
+        parts.push(config.customText);
+      }
+      return parts.join(" | ");
+    };
+    const positions = [
+      "top-left",
+      "top-right",
+      "bottom-left",
+      "bottom-right",
+      "center-left",
+      "center-right"
+    ];
+    let currentPosition = baseConfig.position || "bottom-right";
+    const element = this.add(id, {
+      ...baseConfig,
+      text: getText(),
+      position: currentPosition,
+      opacity: baseConfig.opacity ?? 0.3
+    });
+    if (config.updateInterval && config.updateInterval > 0) {
+      const textTimer = setInterval(() => {
+        const textEl = element.querySelector("span");
+        if (textEl) {
+          textEl.textContent = getText();
+        }
+      }, config.updateInterval);
+      this.dynamicTimers.set(`${id}-text`, textTimer);
+    }
+    if (config.randomizePosition && config.moveInterval && config.moveInterval > 0) {
+      const moveTimer = setInterval(() => {
+        const randomIndex = Math.floor(Math.random() * positions.length);
+        currentPosition = positions[randomIndex];
+        const positionStyles = this.getPositionStyles(currentPosition, baseConfig.offset);
+        element.style.cssText = element.style.cssText.replace(/top:.*?;|bottom:.*?;|left:.*?;|right:.*?;|transform:.*?;/g, "");
+        element.style.cssText += positionStyles;
+      }, config.moveInterval);
+      this.dynamicTimers.set(`${id}-move`, moveTimer);
+    }
+    return element;
+  }
+  remove(id) {
+    const element = this.elements.get(id);
+    if (element) {
+      element.remove();
+      this.elements.delete(id);
+    }
+    const textTimer = this.dynamicTimers.get(`${id}-text`);
+    if (textTimer) {
+      clearInterval(textTimer);
+      this.dynamicTimers.delete(`${id}-text`);
+    }
+    const moveTimer = this.dynamicTimers.get(`${id}-move`);
+    if (moveTimer) {
+      clearInterval(moveTimer);
+      this.dynamicTimers.delete(`${id}-move`);
+    }
+  }
+  removeAll() {
+    for (const id of this.elements.keys()) {
+      this.remove(id);
+    }
+  }
+  update(id, config) {
+    const element = this.elements.get(id);
+    if (!element)
+      return;
+    if (config.opacity !== undefined) {
+      element.style.opacity = String(config.opacity);
+    }
+    if (config.position) {
+      const positionStyles = this.getPositionStyles(config.position, config.offset);
+      element.style.cssText = element.style.cssText.replace(/top:.*?;|bottom:.*?;|left:.*?;|right:.*?;|transform:.*?;/g, "");
+      element.style.cssText += positionStyles;
+    }
+    if (config.text) {
+      const textEl = element.querySelector("span");
+      if (textEl) {
+        textEl.textContent = config.text;
+      }
+    }
+    if (config.image) {
+      const imgEl = element.querySelector("img");
+      if (imgEl) {
+        imgEl.src = config.image;
+      }
+    }
+  }
+  show(id) {
+    const element = this.elements.get(id);
+    if (element) {
+      element.style.display = "";
+    }
+  }
+  hide(id) {
+    const element = this.elements.get(id);
+    if (element) {
+      element.style.display = "none";
+    }
+  }
+  showAll() {
+    for (const id of this.elements.keys()) {
+      this.show(id);
+    }
+  }
+  hideAll() {
+    for (const id of this.elements.keys()) {
+      this.hide(id);
+    }
+  }
+  get(id) {
+    return this.elements.get(id);
+  }
+  getAll() {
+    return Array.from(this.elements.keys());
+  }
+  destroy() {
+    this.removeAll();
+    this.unsubscribers.forEach((unsub) => unsub());
+    this.player = null;
+    this.container = null;
+  }
+}
+function createWatermarkManager() {
+  return new WatermarkManager;
+}
+function watermarkPlugin(watermarks) {
+  return {
+    name: "watermark",
+    install(player, container) {
+      const manager = createWatermarkManager();
+      manager.attach(player, container);
+      for (const { id, ...config } of watermarks) {
+        manager.add(id, config);
+      }
+      player.watermark = manager;
+      return () => {
+        manager.destroy();
+        delete player.watermark;
+      };
+    }
+  };
+}
 export {
-  watermarkPlugin,
-  skipSegmentsPlugin,
-  endScreenPlugin,
-  createWatermarkManager,
-  createVideoAnalytics,
-  createSkipSegments,
-  createEndScreen,
-  createAdsManager,
-  analyticsPlugin,
-  adsPlugin,
-  WatermarkManager,
-  VideoAnalytics,
-  VASTParser,
-  SkipSegmentsManager,
+  AdsManager,
   EndScreenManager,
-  AdsManager
+  SkipSegmentsManager,
+  VASTParser,
+  VideoAnalytics,
+  WatermarkManager,
+  adsPlugin,
+  analyticsPlugin,
+  createAdsManager,
+  createEndScreen,
+  createSkipSegments,
+  createVideoAnalytics,
+  createWatermarkManager,
+  endScreenPlugin,
+  skipSegmentsPlugin,
+  watermarkPlugin
 };
-
-//# debugId=A3B32FA203220F8B64756E2164756E21