@stacksjs/stx 0.2.94 → 0.2.96

package/dist/media/video/index.js

@@ -1,2 +1,583 @@
-// @bun
-import{pu as a,qu as b,ru as c,su as d}from"../../chunk-dyjnn5k8.js";import"../../chunk-ywkrxp2h.js";import"../../chunk-3jm3snz8.js";export{d as videoDirective,a as renderVideoComponent,b as parseVideoDirectiveOptions,c as createVideoDirective};
+async function getProcessor() {
+  try {
+    return await import("./processor/index.js");
+  } catch (error) {
+    if (!processorWarningLogged) {
+      console.warn("[stx-media] Video processor not available, some features disabled:", error);
+      processorWarningLogged = !0;
+    }
+    return null;
+  }
+}
+let processorWarningLogged = !1;
+const DEFAULT_CONTROLS = !0, DEFAULT_PRELOAD = "metadata", TS_VIDEO_PLAYER_CDN = "https://cdn.jsdelivr.net/npm/ts-video-player@latest/dist/index.min.js";
+export async function renderVideoComponent(props, context = {}) {
+  const extendedContext = context, enhancedProps = props;
+  if (enhancedProps.process && !enhancedProps.skipProcessing) {
+    if (extendedContext.tsVideosConfig?.enabled && !extendedContext.isDev)
+      return renderWithTsVideos(enhancedProps, extendedContext);
+  }
+  if (extendedContext.processedResult?.processed)
+    return renderFromProcessedResult(props, extendedContext.processedResult, context);
+  let generatedPoster;
+  if (enhancedProps.generatePoster && enhancedProps.src && !props.poster)
+    generatedPoster = await generatePosterOnDemand(enhancedProps, extendedContext);
+  const {
+    src,
+    sources = [],
+    poster: originalPoster,
+    posterPlaceholder,
+    controls = DEFAULT_CONTROLS,
+    autoplay = !1,
+    muted = !1,
+    loop = !1,
+    preload = DEFAULT_PRELOAD,
+    playsinline = !0,
+    lazy = !0,
+    player = "native",
+    type: embedType,
+    width,
+    height,
+    crossorigin,
+    disablePictureInPicture = !1,
+    disableRemotePlayback = !1
+  } = props, poster = generatedPoster || originalPoster, className = props.class, style = props.style, id = props.id || `stx-video-${Math.random().toString(36).slice(2, 8)}`;
+  if (player === "ts-video")
+    return renderTsVideoPlayer(props, context);
+  if (embedType && embedType !== "video")
+    return renderEmbed(src || "", embedType, props);
+  const videoSources = sources.length > 0 ? sources : src ? [{ src, type: detectMimeType(src) }] : [], attrs = [`id="${id}"`];
+  if (controls)
+    attrs.push("controls");
+  if (autoplay)
+    attrs.push("autoplay");
+  if (muted)
+    attrs.push("muted");
+  if (loop)
+    attrs.push("loop");
+  if (playsinline)
+    attrs.push("playsinline");
+  if (disablePictureInPicture)
+    attrs.push("disablepictureinpicture");
+  if (disableRemotePlayback)
+    attrs.push("disableremoteplayback");
+  if (crossorigin)
+    attrs.push(`crossorigin="${crossorigin}"`);
+  if (lazy) {
+    attrs.push(`data-preload="${preload}"`);
+    attrs.push('preload="none"');
+    if (poster)
+      attrs.push(`data-poster="${escapeAttr(poster)}"`);
+    attrs.push("data-stx-lazy");
+  } else {
+    attrs.push(`preload="${preload}"`);
+    if (poster)
+      attrs.push(`poster="${escapeAttr(poster)}"`);
+  }
+  if (width)
+    attrs.push(`width="${width}"`);
+  if (height)
+    attrs.push(`height="${height}"`);
+  if (className)
+    attrs.push(`class="${escapeAttr(className)}"`);
+  if (style)
+    attrs.push(`style="${escapeAttr(style)}"`);
+  const sourceTags = videoSources.map((source) => {
+    return `  <source ${lazy ? `data-src="${escapeAttr(source.src)}"` : `src="${escapeAttr(source.src)}"`} type="${source.type}"${source.media ? ` media="${source.media}"` : ""} />`;
+  }).join(`
+`), html = `<video ${attrs.join(" ")}>
+${sourceTags}
+  Your browser does not support the video tag.
+</video>`;
+  let script;
+  if (lazy)
+    script = `
+(function() {
+  var video = document.getElementById('${id}');
+  if (!video) return;
+
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      if (entry.isIntersecting) {
+        // Load poster
+        if (video.dataset.poster) {
+          video.poster = video.dataset.poster;
+          delete video.dataset.poster;
+        }
+
+        // Load sources
+        var sources = video.querySelectorAll('source[data-src]');
+        sources.forEach(function(source) {
+          source.src = source.dataset.src;
+          delete source.dataset.src;
+        });
+
+        // Set preload
+        if (video.dataset.preload) {
+          video.preload = video.dataset.preload;
+          delete video.dataset.preload;
+        }
+
+        video.load();
+        observer.disconnect();
+      }
+    });
+  }, { rootMargin: '50px' });
+
+  observer.observe(video);
+})();
+`.trim();
+  return { html, script };
+}
+function renderEmbed(url, type, props) {
+  const { width = 640, height = 360 } = props, className = props.class, style = props.style, id = props.id || `stx-embed-${Math.random().toString(36).slice(2, 8)}`;
+  let embedUrl, videoId = null;
+  switch (type) {
+    case "youtube":
+      videoId = extractYouTubeId(url);
+      embedUrl = videoId ? `https://www.youtube-nocookie.com/embed/${videoId}` : url;
+      break;
+    case "vimeo":
+      videoId = extractVimeoId(url);
+      embedUrl = videoId ? `https://player.vimeo.com/video/${videoId}` : url;
+      break;
+    case "dailymotion":
+      videoId = url.split("/").pop() || "";
+      embedUrl = `https://www.dailymotion.com/embed/video/${videoId}`;
+      break;
+    case "twitch":
+      videoId = url.split("/").pop() || "";
+      embedUrl = `https://player.twitch.tv/?video=${videoId}&parent=${typeof window < "u" ? window.location.hostname : "localhost"}`;
+      break;
+    default:
+      embedUrl = url;
+  }
+  const attrs = [
+    `id="${id}"`,
+    `src="${escapeAttr(embedUrl)}"`,
+    `width="${width}"`,
+    `height="${height}"`,
+    'frameborder="0"',
+    "allowfullscreen",
+    'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"'
+  ];
+  if (className)
+    attrs.push(`class="${escapeAttr(className)}"`);
+  if (style)
+    attrs.push(`style="${escapeAttr(style)}"`);
+  if (props.lazy)
+    attrs.push('loading="lazy"');
+  return { html: `<div class="stx-video-embed" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
+  <iframe ${attrs.join(" ")} style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
+</div>` };
+}
+function renderTsVideoPlayer(props, context = {}) {
+  const {
+    src,
+    sources = [],
+    poster,
+    controls = !0,
+    autoplay = !1,
+    muted = !1,
+    loop = !1,
+    preload = "metadata",
+    playsinline = !0,
+    lazy = !0,
+    width,
+    height
+  } = props, className = props.class, style = props.style, id = props.id || `ts-video-${Math.random().toString(36).slice(2, 8)}`, playerConfig = {
+    src: sources.length > 0 ? sources : src,
+    autoplay,
+    loop,
+    muted,
+    playsinline,
+    preload,
+    poster,
+    controls,
+    title: props.title
+  }, containerStyle = [
+    "position: relative",
+    width ? `width: ${typeof width === "number" ? width + "px" : width}` : "width: 100%",
+    height ? `height: ${typeof height === "number" ? height + "px" : height}` : "",
+    style || ""
+  ].filter(Boolean).join("; "), html = `
+<div
+  id="${id}"
+  class="ts-video-player${className ? " " + escapeAttr(className) : ""}"
+  style="${containerStyle}"
+  data-ts-video-player
+  data-config='${JSON.stringify(playerConfig)}'
+  ${lazy ? "data-lazy" : ""}
+>
+  <div class="ts-video-player__container">
+    ${poster ? `
+    <div class="ts-video-player__placeholder" style="background-image: url('${escapeAttr(poster)}');">
+      <button class="ts-video-player__play-button" aria-label="Play video">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="64" height="64">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      </button>
+    </div>
+    ` : ""}
+  </div>
+</div>
+`.trim(), script = `
+(function() {
+  var container = document.getElementById('${id}');
+  if (!container) return;
+
+  var config = JSON.parse(container.dataset.config || '{}');
+  var isLazy = container.hasAttribute('data-lazy');
+
+  function loadPlayer() {
+    if (typeof TSVideoPlayer !== 'undefined') {
+      initPlayer();
+      return;
+    }
+
+    // Load ts-video-player from CDN
+    var script = document.createElement('script');
+    script.src = '${TS_VIDEO_PLAYER_CDN}';
+    script.onload = initPlayer;
+    script.onerror = function() {
+      console.error('[stx] Failed to load ts-video-player');
+      fallbackToNative();
+    };
+    document.head.appendChild(script);
+  }
+
+  function initPlayer() {
+    var player = TSVideoPlayer.createPlayer(container, config);
+    if (config.src) {
+      player.setSrc(config.src);
+    }
+    container.__tsVideoPlayer = player;
+
+    // Remove placeholder
+    var placeholder = container.querySelector('.ts-video-player__placeholder');
+    if (placeholder) {
+      placeholder.style.display = 'none';
+    }
+  }
+
+  function fallbackToNative() {
+    // Fallback to native video element
+    var video = document.createElement('video');
+    video.controls = config.controls !== false;
+    video.autoplay = config.autoplay;
+    video.muted = config.muted;
+    video.loop = config.loop;
+    video.playsInline = config.playsinline;
+    video.preload = config.preload || 'metadata';
+    if (config.poster) video.poster = config.poster;
+    if (config.src) video.src = typeof config.src === 'string' ? config.src : config.src[0]?.src || config.src[0];
+    video.style.width = '100%';
+    video.style.height = '100%';
+
+    var containerEl = container.querySelector('.ts-video-player__container');
+    if (containerEl) {
+      containerEl.innerHTML = '';
+      containerEl.appendChild(video);
+    }
+  }
+
+  if (isLazy) {
+    var observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          loadPlayer();
+          observer.disconnect();
+        }
+      });
+    }, { rootMargin: '50px' });
+    observer.observe(container);
+  }
+else {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', loadPlayer);
+    }
+else {
+      loadPlayer();
+    }
+  }
+
+  // Handle play button click
+  var playButton = container.querySelector('.ts-video-player__play-button');
+  if (playButton) {
+    playButton.addEventListener('click', function() {
+      loadPlayer();
+      var check = setInterval(function() {
+        if (container.__tsVideoPlayer && container.__tsVideoPlayer.ready) {
+          container.__tsVideoPlayer.play();
+          clearInterval(check);
+        }
+      }, 100);
+    });
+  }
+})();
+`.trim(), css = `
+.ts-video-player {
+  position: relative;
+  background: #000;
+}
+
+.ts-video-player__container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+}
+
+.ts-video-player__container > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.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;
+}
+`.trim();
+  return { html, script, css };
+}
+function detectMimeType(src) {
+  switch (src.split(".").pop()?.toLowerCase()) {
+    case "mp4":
+      return "video/mp4";
+    case "webm":
+      return "video/webm";
+    case "ogg":
+    case "ogv":
+      return "video/ogg";
+    case "mov":
+      return "video/quicktime";
+    case "avi":
+      return "video/x-msvideo";
+    case "mkv":
+      return "video/x-matroska";
+    case "m3u8":
+      return "application/x-mpegURL";
+    default:
+      return "video/mp4";
+  }
+}
+function extractYouTubeId(url) {
+  const patterns = [
+    /youtube\.com\/watch\?v=([^&]+)/,
+    /youtube\.com\/embed\/([^?]+)/,
+    /youtu\.be\/([^?]+)/,
+    /youtube\.com\/v\/([^?]+)/
+  ];
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match)
+      return match[1];
+  }
+  return null;
+}
+function extractVimeoId(url) {
+  const match = url.match(/vimeo\.com\/(\d+)/);
+  return match ? match[1] : null;
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+export { createVideoDirective, videoDirective } from "./directive.js";
+export function parseVideoDirectiveOptions(content, params, context) {
+  if (params.src)
+    return {
+      src: String(params.src),
+      ...params
+    };
+  let args = content.trim();
+  if (args.startsWith("@video(") || args.startsWith("("))
+    args = args.replace(/^@video\(/, "").replace(/^\(/, "").replace(/\)$/, "");
+  const commaIdx = args.indexOf(",");
+  if (commaIdx === -1)
+    return { src: args.replace(/^['"]|['"]$/g, "") };
+  const src = args.slice(0, commaIdx).trim().replace(/^['"]|['"]$/g, ""), optStr = args.slice(commaIdx + 1).trim();
+  try {
+    const opts = JSON.parse(optStr);
+    return { src, ...opts };
+  } catch {
+    return { src };
+  }
+}
+async function renderWithTsVideos(props, context) {
+  const processor = await getProcessor();
+  if (!processor)
+    return renderVideoComponent({ ...props, process: !1 }, context);
+  const tsConfig = context.tsVideosConfig, processed = await processor.processVideo(props.src, props, tsConfig, props.onProcessProgress);
+  if (processed.processed)
+    return renderFromProcessedResult(props, processed, context);
+  return renderVideoComponent({ ...props, process: !1 }, context);
+}
+async function generatePosterOnDemand(props, context) {
+  const processor = await getProcessor();
+  if (!processor || !props.src)
+    return;
+  const posterOpts = typeof props.generatePoster === "object" ? props.generatePoster : { timestamp: 0 }, tsConfig = context.tsVideosConfig || {
+    enabled: !0,
+    outputDir: "dist/videos",
+    baseUrl: "/videos"
+  };
+  return (await processor.generatePoster(props.src, posterOpts, tsConfig.outputDir, tsConfig.baseUrl || "/videos"))?.url;
+}
+function renderFromProcessedResult(props, processed, context) {
+  const {
+    controls = DEFAULT_CONTROLS,
+    autoplay = !1,
+    muted = !1,
+    loop = !1,
+    preload = DEFAULT_PRELOAD,
+    playsinline = !0,
+    lazy = !0,
+    width,
+    height,
+    crossorigin,
+    disablePictureInPicture = !1,
+    disableRemotePlayback = !1
+  } = props, className = props.class, style = props.style, id = props.id || `stx-video-${Math.random().toString(36).slice(2, 8)}`;
+  let videoSrc = props.src, mimeType = detectMimeType(videoSrc);
+  if (processed.transcoded) {
+    videoSrc = processed.transcoded.url;
+    mimeType = "video/mp4";
+  }
+  const useStreaming = processed.streaming?.hls || processed.streaming?.dash;
+  if (useStreaming) {
+    if (processed.streaming?.hls) {
+      videoSrc = processed.streaming.hls.manifestUrl;
+      mimeType = "application/x-mpegURL";
+    } else if (processed.streaming?.dash) {
+      videoSrc = processed.streaming.dash.manifestUrl;
+      mimeType = "application/dash+xml";
+    }
+  }
+  const poster = processed.poster?.url || props.poster, attrs = [`id="${id}"`];
+  if (controls)
+    attrs.push("controls");
+  if (autoplay)
+    attrs.push("autoplay");
+  if (muted)
+    attrs.push("muted");
+  if (loop)
+    attrs.push("loop");
+  if (playsinline)
+    attrs.push("playsinline");
+  if (disablePictureInPicture)
+    attrs.push("disablepictureinpicture");
+  if (disableRemotePlayback)
+    attrs.push("disableremoteplayback");
+  if (crossorigin)
+    attrs.push(`crossorigin="${crossorigin}"`);
+  if (lazy) {
+    attrs.push(`data-preload="${preload}"`);
+    attrs.push('preload="none"');
+    if (poster)
+      attrs.push(`data-poster="${escapeAttr(poster)}"`);
+    attrs.push("data-stx-lazy");
+  } else {
+    attrs.push(`preload="${preload}"`);
+    if (poster)
+      attrs.push(`poster="${escapeAttr(poster)}"`);
+  }
+  const videoWidth = width || processed.metadata?.width, videoHeight = height || processed.metadata?.height;
+  if (videoWidth)
+    attrs.push(`width="${videoWidth}"`);
+  if (videoHeight)
+    attrs.push(`height="${videoHeight}"`);
+  if (className)
+    attrs.push(`class="${escapeAttr(className)}"`);
+  if (style)
+    attrs.push(`style="${escapeAttr(style)}"`);
+  const sourceTag = `  <source ${lazy ? `data-src="${escapeAttr(videoSrc)}"` : `src="${escapeAttr(videoSrc)}"`} type="${mimeType}" />`;
+  let html = `<video ${attrs.join(" ")}>
+${sourceTag}
+  Your browser does not support the video tag.
+</video>`;
+  if (processed.spriteSheet)
+    html = `<div class="stx-video-wrapper" data-sprite-sheet="${escapeAttr(processed.spriteSheet.url)}" data-sprite-cols="${processed.spriteSheet.columns}" data-sprite-interval="${processed.spriteSheet.interval}">
+${html}
+</div>`;
+  let script;
+  if (lazy)
+    script = `
+(function() {
+  var video = document.getElementById('${id}');
+  if (!video) return;
+
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      if (entry.isIntersecting) {
+        // Load poster
+        if (video.dataset.poster) {
+          video.poster = video.dataset.poster;
+          delete video.dataset.poster;
+        }
+
+        // Load sources
+        var sources = video.querySelectorAll('source[data-src]');
+        sources.forEach(function(source) {
+          source.src = source.dataset.src;
+          delete source.dataset.src;
+        });
+
+        // Set preload
+        if (video.dataset.preload) {
+          video.preload = video.dataset.preload;
+          delete video.dataset.preload;
+        }
+
+        video.load();
+        observer.disconnect();
+      }
+    });
+  }, { rootMargin: '50px' });
+
+  observer.observe(video);
+})();
+`.trim();
+  let css;
+  if (useStreaming)
+    css = `
+.stx-video-wrapper {
+  position: relative;
+  width: 100%;
+}
+.stx-video-wrapper video {
+  width: 100%;
+  height: auto;
+}
+`.trim();
+  return { html, script, css };
+}

package/dist/media/video/processor/cache.js

@@ -1,2 +1,52 @@
-// @bun
-import{Dj as a,Ej as b,Fj as c,Gj as d}from"../../../chunk-bn08k7yy.js";import"../../../chunk-gqpkp459.js";import"../../../chunk-5ggw1dyv.js";import"../../../chunk-3jm3snz8.js";export{c as setCachedVideoResult,b as getCachedVideoResult,d as clearVideoCache,a as VideoProcessorCache};
+import {
+  getCached,
+  setCached,
+  clearCache
+} from "../../shared/cache.js";
+const defaultVideoCacheConfig = {
+  enabled: !0,
+  directory: ".stx/media-cache",
+  maxAge: 30,
+  maxSize: 2000,
+  cacheTranscoded: !0,
+  cacheThumbnails: !0,
+  cacheManifests: !0
+};
+
+export class VideoProcessorCache {
+  config;
+  constructor(config = {}) {
+    this.config = { ...defaultVideoCacheConfig, ...config };
+  }
+  async get(src, options) {
+    return getCached(src, options, "video", this.config);
+  }
+  async set(src, options, result) {
+    return setCached(src, options, result, "video", this.config);
+  }
+  async clear() {
+    return clearCache("video", this.config);
+  }
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+}
+let globalVideoCache = null;
+function getVideoCache(config) {
+  if (!globalVideoCache)
+    globalVideoCache = new VideoProcessorCache(config);
+  else if (config)
+    globalVideoCache.updateConfig(config);
+  return globalVideoCache;
+}
+export async function getCachedVideoResult(src, options, config) {
+  const cacheConfig = config ? { directory: `${config.outputDir}/../.cache` } : {};
+  return getVideoCache(cacheConfig).get(src, options);
+}
+export async function setCachedVideoResult(src, options, result, config) {
+  const cacheConfig = config ? { directory: `${config.outputDir}/../.cache` } : {};
+  return getVideoCache(cacheConfig).set(src, options, result);
+}
+export async function clearVideoCache() {
+  return getVideoCache().clear();
+}

package/dist/media/video/processor/index.js

@@ -1,2 +1,4 @@
-// @bun
-import"../../../chunk-0b9w2w1y.js";import{vj as j,wj as k}from"../../../chunk-d77yxcds.js";import{yj as h,zj as i}from"../../../chunk-5xvbq2gs.js";import{Aj as e,Bj as f,Cj as g}from"../../../chunk-z37xq5rx.js";import{Dj as a,Ej as b,Fj as c,Gj as d}from"../../../chunk-bn08k7yy.js";import"../../../chunk-gqpkp459.js";import"../../../chunk-5ggw1dyv.js";import"../../../chunk-3jm3snz8.js";export{c as setCachedVideoResult,k as processVideo,b as getCachedVideoResult,f as generateThumbnails,g as generateSpriteSheet,e as generatePoster,h as generateHLSManifest,i as generateDASHManifest,d as clearVideoCache,j as analyzeVideo,a as VideoProcessorCache};
+export { processVideo, analyzeVideo } from "./transcoder.js";
+export { generatePoster, generateThumbnails, generateSpriteSheet } from "./thumbnail.js";
+export { generateHLSManifest, generateDASHManifest } from "./streaming.js";
+export { getCachedVideoResult, setCachedVideoResult, clearVideoCache, VideoProcessorCache } from "./cache.js";