ts-video-player 0.1.0

package/dist/providers/youtube.d.ts

@@ -0,0 +1,134 @@
+/**
+ * ts-video-player YouTube Provider
+ *
+ * YouTube embed provider using the iframe API.
+ *
+ * @module providers/youtube
+ */
+import type { ProviderType, Src, PlayerOptions, VideoQuality } from '../types';
+import { BaseProvider } from './base';
+/**
+ * Extract YouTube video ID from URL
+ */
+export declare function extractYouTubeId(url: string): string | null;
+/**
+ * Check if source is a YouTube source
+ */
+export declare function isYouTubeSource(src: Src): boolean;
+interface YTPlayer {
+    playVideo(): void;
+    pauseVideo(): void;
+    stopVideo(): void;
+    seekTo(seconds: number, allowSeekAhead: boolean): void;
+    getCurrentTime(): number;
+    getDuration(): number;
+    setVolume(volume: number): void;
+    getVolume(): number;
+    mute(): void;
+    unMute(): void;
+    isMuted(): boolean;
+    setPlaybackRate(rate: number): void;
+    getPlaybackRate(): number;
+    getAvailablePlaybackRates(): number[];
+    setPlaybackQuality(quality: string): void;
+    getPlaybackQuality(): string;
+    getAvailableQualityLevels(): string[];
+    loadVideoById(options: {
+        videoId: string;
+        startSeconds?: number;
+        endSeconds?: number;
+    }): void;
+    cueVideoById(options: {
+        videoId: string;
+        startSeconds?: number;
+        endSeconds?: number;
+    }): void;
+    getIframe(): HTMLIFrameElement;
+    getPlayerState(): number;
+    destroy(): void;
+}
+interface YTPlayerEvent {
+    target: YTPlayer;
+    data: number;
+}
+declare global {
+    interface Window {
+        YT?: {
+            Player: new (elementId: string | HTMLElement, options: {
+                videoId?: string;
+                width?: number | string;
+                height?: number | string;
+                playerVars?: Record<string, string | number>;
+                events?: {
+                    onReady?: (event: YTPlayerEvent) => void;
+                    onStateChange?: (event: YTPlayerEvent) => void;
+                    onError?: (event: YTPlayerEvent) => void;
+                    onPlaybackQualityChange?: (event: YTPlayerEvent) => void;
+                    onPlaybackRateChange?: (event: YTPlayerEvent) => void;
+                };
+            }) => YTPlayer;
+            PlayerState: {
+                UNSTARTED: -1;
+                ENDED: 0;
+                PLAYING: 1;
+                PAUSED: 2;
+                BUFFERING: 3;
+                CUED: 5;
+            };
+        };
+        onYouTubeIframeAPIReady?: () => void;
+    }
+}
+/**
+ * YouTube embed provider
+ */
+export declare class YouTubeProvider extends BaseProvider {
+    readonly name = "youtube";
+    readonly type: ProviderType;
+    private player;
+    private iframe;
+    private pendingVideoId;
+    private startTime?;
+    private endTime?;
+    private timeUpdateInterval;
+    private lastState;
+    get mediaElement(): HTMLIFrameElement | null;
+    protected initialize(): Promise<void>;
+    private loadYouTubeAPI;
+    protected cleanup(): void;
+    private onReady;
+    private onStateChange;
+    private onError;
+    private onQualityChange;
+    private onRateChange;
+    canPlay(src: Src): boolean;
+    load(src: Src): Promise<void>;
+    private loadVideo;
+    play(): Promise<void>;
+    pause(): void;
+    stop(): void;
+    seekTo(time: number): void;
+    getCurrentTime(): number;
+    getDuration(): number;
+    setVolume(volume: number): void;
+    getVolume(): number;
+    setMuted(muted: boolean): void;
+    getMuted(): boolean;
+    setPlaybackRate(rate: number): void;
+    getPlaybackRate(): number;
+    getQualities(): VideoQuality[];
+    setQuality(quality: VideoQuality | 'auto'): void;
+}
+/**
+ * YouTube Provider Loader
+ */
+export declare const youtubeLoader: {
+    name: string;
+    type: ProviderType;
+    canPlay(src: Src): boolean;
+    mediaType(): "video";
+    preconnect(): string[];
+    load(container: HTMLElement, options: PlayerOptions): Promise<YouTubeProvider>;
+};
+export {};
+//# sourceMappingURL=youtube.d.ts.map

package/dist/providers/youtube.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube.d.ts","sourceRoot":"","sources":["../../src/providers/youtube.ts"],"names":[],"mappings":"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"}

package/dist/stx/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * ts-video-player stx Integration
+ *
+ * Deep integration with the stx templating framework.
+ * Provides components, directives, and runtime for seamless video embedding.
+ *
+ * @module stx
+ */
+import type { VideoComponentProps, VideoRenderResult } from '../types';
+/**
+ * Render the <Video> component for stx
+ *
+ * @example
+ * ```typescript
+ * const result = await renderVideoComponent({
+ *   src: '/videos/intro.mp4',
+ *   poster: '/images/poster.jpg',
+ *   controls: true,
+ *   lazy: true,
+ * })
+ * ```
+ */
+export declare function renderVideoComponent(props: VideoComponentProps, _context?: {
+    isDev?: boolean;
+}): Promise<VideoRenderResult>;
+/**
+ * Parse <Video> component from template
+ */
+export declare function parseVideoComponent(content: string): VideoComponentProps | null;
+/**
+ * Create the @video directive for stx
+ *
+ * Usage:
+ * ```html
+ * @video('/videos/intro.mp4', { poster: '/poster.jpg', controls: true })
+ * @video(youtubeUrl, { lazy: true })
+ * ```
+ */
+export declare function createVideoDirective(): {
+    name: string;
+    hasEndTag: boolean;
+    description: string;
+    transform: (content: string, params: Record<string, unknown>, context: Record<string, unknown>) => Promise<string>;
+};
+export declare const videoDirective: {
+    name: string;
+    hasEndTag: boolean;
+    description: string;
+    transform: (content: string, params: Record<string, unknown>, context: Record<string, unknown>) => Promise<string>;
+};
+/**
+ * Register ts-video-player directives with stx
+ */
+export declare function registerVideoDirectives(stx: {
+    config: {
+        customDirectives?: any[];
+    };
+}): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/stx/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stx/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAGlB,MAAM,UAAU,CAAA;AAOjB;;;;;;;;;;;;GAYG;AACH,wBAAsB,oBAAoB,CACxC,KAAK,EAAE,mBAAmB,EAC1B,QAAQ,GAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO,GACjC,OAAO,CAAC,iBAAiB,CAAC,CAsF5B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI,CA2B/E;AAMD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,IAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,CAgCpN;AAyYD,eAAO,MAAM,cAAc,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;CAA2B,CAAA;AAEnO;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,GAAG,EAAE;IAAE,MAAM,EAAE;QAAE,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAA;KAAE,CAAA;CAAE,GAAG,IAAI,CAK3F"}

package/dist/stx/index.js

@@ -0,0 +1,480 @@
+// src/providers/youtube.ts
+var YOUTUBE_PATTERNS = [
+  /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
+  /youtube\.com\/v\/([a-zA-Z0-9_-]{11})/,
+  /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/
+];
+function extractYouTubeId(url) {
+  for (const pattern of YOUTUBE_PATTERNS) {
+    const match = url.match(pattern);
+    if (match)
+      return match[1];
+  }
+  return null;
+}
+
+// src/stx/index.ts
+async function renderVideoComponent(props, _context = {}) {
+  const {
+    src,
+    poster,
+    title,
+    class: className,
+    style,
+    id = `ts-video-${randomId()}`,
+    width,
+    height,
+    options = {},
+    lazy = true,
+    autoplay = false,
+    loop = false,
+    muted = false,
+    controls = true,
+    playsinline = true,
+    preload = "metadata",
+    crossorigin,
+    controlsList,
+    disablePictureInPicture = false,
+    theme = "default"
+  } = props;
+  const providerType = detectProviderType(src);
+  const isEmbed = providerType === "youtube" || providerType === "vimeo";
+  const playerOptions = {
+    ...options,
+    autoplay,
+    loop,
+    muted,
+    playsinline,
+    preload,
+    poster,
+    title,
+    controls,
+    crossorigin,
+    controlsList,
+    disablePictureInPicture
+  };
+  const attrs = [
+    `id="${id}"`,
+    `class="ts-video-player ts-video-player--${theme}${className ? " " + escapeAttr(className) : ""}"`,
+    `data-ts-video-player`,
+    `data-provider="${providerType}"`
+  ];
+  if (style)
+    attrs.push(`style="${escapeAttr(style)}"`);
+  if (width)
+    attrs.push(`data-width="${width}"`);
+  if (height)
+    attrs.push(`data-height="${height}"`);
+  if (lazy)
+    attrs.push(`data-lazy`);
+  const config = {
+    src: normalizeSrc(src),
+    options: playerOptions
+  };
+  attrs.push(`data-config='${JSON.stringify(config)}'`);
+  let html = "";
+  if (isEmbed) {
+    html = buildEmbedPlaceholder(id, attrs, poster, title, providerType, src);
+  } else {
+    html = buildNativeVideoPlaceholder(id, attrs, poster, title, lazy, preload, src, {
+      crossorigin,
+      controlsList,
+      disablePictureInPicture
+    });
+  }
+  const script = generateInitScript(id, lazy);
+  const css = generatePlayerCSS(theme);
+  return { html, script, css };
+}
+function parseVideoComponent(content) {
+  const srcMatch = content.match(/src=["']([^"']+)["']/);
+  const posterMatch = content.match(/poster=["']([^"']+)["']/);
+  const titleMatch = content.match(/title=["']([^"']+)["']/);
+  const classMatch = content.match(/class=["']([^"']+)["']/);
+  const idMatch = content.match(/id=["']([^"']+)["']/);
+  const widthMatch = content.match(/width=["']?(\d+)["']?/);
+  const heightMatch = content.match(/height=["']?(\d+)["']?/);
+  if (!srcMatch)
+    return null;
+  return {
+    src: srcMatch[1],
+    poster: posterMatch?.[1],
+    title: titleMatch?.[1],
+    class: classMatch?.[1],
+    id: idMatch?.[1],
+    width: widthMatch ? parseInt(widthMatch[1], 10) : undefined,
+    height: heightMatch ? parseInt(heightMatch[1], 10) : undefined,
+    autoplay: content.includes("autoplay"),
+    loop: content.includes("loop"),
+    muted: content.includes("muted"),
+    controls: !content.includes('controls="false"') && !content.includes(':controls="false"'),
+    playsinline: !content.includes('playsinline="false"'),
+    lazy: !content.includes('lazy="false"') && !content.includes(':lazy="false"')
+  };
+}
+function createVideoDirective() {
+  return {
+    name: "video",
+    hasEndTag: false,
+    description: "Embed a video player with full playback controls",
+    transform: async (content, params, context) => {
+      const props = parseVideoDirectiveArgs(content, params, context);
+      if (!props.src) {
+        console.warn("@video directive: missing src argument");
+        return "<!-- @video: missing src -->";
+      }
+      const isDev = context.__isDev || false;
+      const result = await renderVideoComponent(props, { isDev });
+      let output = result.html;
+      if (result.css) {
+        output += `
+<style>${result.css}</style>`;
+      }
+      if (result.script) {
+        output += `
+<script>${result.script}</script>`;
+      }
+      return output;
+    }
+  };
+}
+function parseVideoDirectiveArgs(content, params, context) {
+  if (params.src) {
+    return {
+      src: String(params.src),
+      ...params.options || params
+    };
+  }
+  let args = content.trim();
+  if (args.startsWith("@video(") || args.startsWith("(")) {
+    args = args.replace(/^@video\(/, "").replace(/^\(/, "").replace(/\)$/, "");
+  }
+  const parts = splitArgs(args);
+  const src = resolveValue(parts[0], context) || "";
+  let options = {};
+  if (parts[1]) {
+    const resolved = resolveValue(parts[1], context);
+    if (typeof resolved === "object" && resolved !== null) {
+      options = resolved;
+    }
+  }
+  return { src, ...options };
+}
+function detectProviderType(src) {
+  const firstSrc = Array.isArray(src) ? src[0] : src;
+  const url = typeof firstSrc === "string" ? firstSrc : firstSrc.src || "";
+  if (extractYouTubeId(url))
+    return "youtube";
+  if (url.includes("vimeo.com"))
+    return "vimeo";
+  if (url.endsWith(".m3u8") || url.includes("application/x-mpegURL"))
+    return "hls";
+  if (url.endsWith(".mpd") || url.includes("application/dash+xml"))
+    return "dash";
+  return "html5";
+}
+function normalizeSrc(src) {
+  return src;
+}
+function buildEmbedPlaceholder(_id, attrs, poster, title, _provider, _src) {
+  const posterStyle = poster ? `background-image: url('${escapeAttr(poster)}');` : "";
+  return `
+<div ${attrs.join(" ")}>
+  <div class="ts-video-player__container">
+    <div class="ts-video-player__placeholder" style="${posterStyle}" data-poster>
+      <button class="ts-video-player__play-button" aria-label="Play ${escapeAttr(title || "video")}">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="64" height="64">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`.trim();
+}
+function buildNativeVideoPlaceholder(_id, attrs, poster, title, lazy, preload, src, options) {
+  const firstSrc = Array.isArray(src) ? src[0] : src;
+  const url = typeof firstSrc === "string" ? firstSrc : firstSrc.src || "";
+  const videoAttrs = [
+    `class="ts-video-player__media"`,
+    `playsinline`,
+    lazy ? 'preload="none"' : `preload="${preload}"`
+  ];
+  if (lazy) {
+    videoAttrs.push(`data-poster="${escapeAttr(poster || "")}"`);
+    videoAttrs.push(`data-src="${escapeAttr(url)}"`);
+  } else {
+    if (poster)
+      videoAttrs.push(`poster="${escapeAttr(poster)}"`);
+    videoAttrs.push(`src="${escapeAttr(url)}"`);
+  }
+  if (title)
+    videoAttrs.push(`title="${escapeAttr(title)}"`);
+  if (options.crossorigin !== undefined)
+    videoAttrs.push(`crossorigin="${escapeAttr(options.crossorigin)}"`);
+  if (options.controlsList?.length)
+    videoAttrs.push(`controlslist="${escapeAttr(options.controlsList.join(" "))}"`);
+  if (options.disablePictureInPicture)
+    videoAttrs.push("disablepictureinpicture");
+  return `
+<div ${attrs.join(" ")}>
+  <div class="ts-video-player__container">
+    <video ${videoAttrs.join(" ")}>
+      ${!lazy ? buildSourceTags(src) : ""}
+    </video>
+  </div>
+</div>
+`.trim();
+}
+function buildSourceTags(src) {
+  const sources = Array.isArray(src) ? src : [src];
+  return sources.map((s) => {
+    if (typeof s === "string") {
+      return `<source src="${escapeAttr(s)}" type="${getMimeType(s)}" />`;
+    }
+    const mediaSource = s;
+    return `<source src="${escapeAttr(mediaSource.src)}" type="${mediaSource.type || getMimeType(mediaSource.src)}" />`;
+  }).join(`
+`);
+}
+function getMimeType(src) {
+  const path = src.split(/[?#]/, 1)[0];
+  const ext = path.slice(path.lastIndexOf(".") + 1).toLowerCase();
+  const types = {
+    mp4: "video/mp4",
+    webm: "video/webm",
+    ogg: "video/ogg",
+    ogv: "video/ogg",
+    mov: "video/quicktime",
+    m3u8: "application/x-mpegURL",
+    mpd: "application/dash+xml",
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    flac: "audio/flac",
+    m4a: "audio/mp4",
+    aac: "audio/aac",
+    oga: "audio/ogg",
+    opus: "audio/ogg; codecs=opus"
+  };
+  return types[ext || ""] || "video/mp4";
+}
+function generateInitScript(id, _lazy) {
+  return `
+(function() {
+  const container = document.getElementById('${id}');
+  if (!container) return;
+
+  const config = JSON.parse(container.dataset.config || '{}');
+  const isLazy = container.hasAttribute('data-lazy');
+
+  function initPlayer() {
+    if (typeof VideoPlayer === 'undefined') {
+      // Load the player library
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/ts-video-player@latest/dist/index.min.js';
+      script.onload = function() { createPlayer(); };
+      document.head.appendChild(script);
+    } else {
+      createPlayer();
+    }
+  }
+
+  function createPlayer() {
+    const player = VideoPlayer.createPlayer(container, config.options || {});
+    if (config.src) {
+      player.setSrc(config.src);
+    }
+    container.__videoPlayer = player;
+  }
+
+  if (isLazy) {
+    // Use IntersectionObserver for lazy loading
+    const observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          initPlayer();
+          observer.disconnect();
+        }
+      });
+    }, { rootMargin: '50px' });
+    observer.observe(container);
+  } else {
+    // Initialize immediately
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initPlayer);
+    } else {
+      initPlayer();
+    }
+  }
+
+  // Handle play button click (for embed placeholders)
+  const playButton = container.querySelector('.ts-video-player__play-button');
+  if (playButton) {
+    playButton.addEventListener('click', function() {
+      initPlayer();
+      // Wait for player to initialize then play
+      const checkPlayer = setInterval(function() {
+        if (container.__videoPlayer && container.__videoPlayer.ready) {
+          container.__videoPlayer.play();
+          clearInterval(checkPlayer);
+        }
+      }, 100);
+    });
+  }
+})();
+`.trim();
+}
+function generatePlayerCSS(_theme) {
+  return `
+.ts-video-player {
+  position: relative;
+  width: 100%;
+  background: #000;
+}
+
+.ts-video-player__container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 */
+}
+
+.ts-video-player__media,
+.ts-video-player__placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.ts-video-player__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #1a1a1a;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+}
+
+.ts-video-player__play-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  background: rgba(0, 0, 0, 0.7);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  transition: transform 0.2s, background 0.2s;
+}
+
+.ts-video-player__play-button:hover {
+  transform: scale(1.1);
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.ts-video-player__play-button svg {
+  margin-left: 4px;
+}
+
+/* Loading state */
+.ts-video-player[data-loading="true"]::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin: -20px 0 0 -20px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: ts-video-spin 0.8s linear infinite;
+}
+
+@keyframes ts-video-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Controls hidden */
+.ts-video-player[data-controls-visible="false"] .ts-video-player__controls {
+  opacity: 0;
+  pointer-events: none;
+}
+`.trim();
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#039;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function randomId() {
+  return Math.random().toString(36).slice(2, 8);
+}
+function splitArgs(str) {
+  const args = [];
+  let current = "";
+  let depth = 0;
+  let inString = false;
+  let stringChar = "";
+  for (const char of str) {
+    if ((char === '"' || char === "'") && !inString) {
+      inString = true;
+      stringChar = char;
+    } else if (char === stringChar && inString) {
+      inString = false;
+      stringChar = "";
+    }
+    if (!inString) {
+      if (char === "{" || char === "[")
+        depth++;
+      if (char === "}" || char === "]")
+        depth--;
+      if (char === "," && depth === 0) {
+        args.push(current.trim());
+        current = "";
+        continue;
+      }
+    }
+    current += char;
+  }
+  if (current.trim()) {
+    args.push(current.trim());
+  }
+  return args;
+}
+function resolveValue(value, context) {
+  if (!value)
+    return;
+  const trimmed = value.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+    return trimmed.slice(1, -1);
+  }
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    try {
+      return JSON.parse(trimmed);
+    } catch {}
+  }
+  if (trimmed in context) {
+    return context[trimmed];
+  }
+  return trimmed;
+}
+var videoDirective = createVideoDirective();
+function registerVideoDirectives(stx) {
+  if (!stx.config.customDirectives) {
+    stx.config.customDirectives = [];
+  }
+  stx.config.customDirectives.push(videoDirective);
+}
+export {
+  videoDirective,
+  renderVideoComponent,
+  registerVideoDirectives,
+  parseVideoComponent,
+  createVideoDirective
+};
+
+//# debugId=CC15566753F52D2564756E2164756E21