@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/media/image/srcset.js

@@ -0,0 +1,194 @@
+export const DEFAULT_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1536, 1920, 2560], DEFAULT_DPR_VALUES = [1, 1.5, 2, 3], DEFAULT_FORMATS = ["avif", "webp", "jpeg"], MIME_TYPES = {
+  avif: "image/avif",
+  webp: "image/webp",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif"
+}, FORMAT_EXTENSIONS = {
+  avif: "avif",
+  webp: "webp",
+  jpeg: "jpg",
+  png: "png",
+  gif: "gif"
+};
+export function generateWidthSrcset(src, widths = DEFAULT_WIDTHS, params = {}, format) {
+  return widths.sort((a, b) => a - b).map((width) => {
+    return `${buildImageUrl(src, { ...params, w: width, fm: format })} ${width}w`;
+  }).join(", ");
+}
+export function generateAutoWidthSrcset(src, minWidth = 320, maxWidth = 2560, tolerance = 0.08, params = {}, format) {
+  const widths = calculateOptimalWidths(minWidth, maxWidth, tolerance);
+  return generateWidthSrcset(src, widths, params, format);
+}
+export function calculateOptimalWidths(minWidth, maxWidth, tolerance = 0.08) {
+  const widths = [];
+  let currentWidth = minWidth;
+  while (currentWidth < maxWidth) {
+    widths.push(Math.round(currentWidth));
+    currentWidth *= 1 + tolerance * 2;
+  }
+  if (widths[widths.length - 1] !== maxWidth)
+    widths.push(maxWidth);
+  return widths;
+}
+export function generateDprSrcset(src, width, dprValues = DEFAULT_DPR_VALUES, params = {}, format) {
+  return dprValues.sort((a, b) => a - b).map((dpr) => {
+    const actualWidth = Math.round(width * dpr);
+    return `${buildImageUrl(src, { ...params, w: actualWidth, dpr, fm: format })} ${dpr}x`;
+  }).join(", ");
+}
+export function generateDprSrcsetWithVariableQuality(src, width, dprValues = DEFAULT_DPR_VALUES, baseQuality = 80, params = {}, format) {
+  const qualityMap = {
+    1: baseQuality,
+    1.5: Math.round(baseQuality * 0.9),
+    2: Math.round(baseQuality * 0.8),
+    3: Math.round(baseQuality * 0.7),
+    4: Math.round(baseQuality * 0.6),
+    5: Math.round(baseQuality * 0.5)
+  };
+  return dprValues.sort((a, b) => a - b).map((dpr) => {
+    const actualWidth = Math.round(width * dpr), quality = qualityMap[dpr] || Math.round(baseQuality * Math.max(0.5, 1 - dpr * 0.1));
+    return `${buildImageUrl(src, { ...params, w: actualWidth, q: quality, dpr, fm: format })} ${dpr}x`;
+  }).join(", ");
+}
+export function generateSizesAttribute(breakpoints, defaultSize = "100vw") {
+  if (!breakpoints || Object.keys(breakpoints).length === 0)
+    return defaultSize;
+  const parts = Object.entries(breakpoints).map(([breakpoint, size]) => {
+    const bp = /^\d+$/.test(breakpoint) ? `${breakpoint}px` : breakpoint;
+    return { bp, size, numericBp: Number.parseInt(bp) || 0 };
+  }).sort((a, b) => a.numericBp - b.numericBp).map(({ bp, size }) => `(max-width: ${bp}) ${size}`);
+  parts.push(defaultSize);
+  return parts.join(", ");
+}
+export function generateSizesFromBreakpoints(breakpoints, defaultSize = "100vw") {
+  if (!breakpoints || breakpoints.length === 0)
+    return defaultSize;
+  const parts = [...breakpoints].sort((a, b) => (a.maxWidth || 0) - (b.maxWidth || 0)).filter((bp) => bp.maxWidth).map((bp) => `(max-width: ${bp.maxWidth}px) ${bp.imageWidth}`);
+  parts.push(defaultSize);
+  return parts.join(", ");
+}
+export const COMMON_SIZES = {
+  fullWidth: "100vw",
+  halfDesktop: "(max-width: 768px) 100vw, 50vw",
+  thirdDesktop: "(max-width: 768px) 100vw, 33.33vw",
+  quarterDesktop: "(max-width: 480px) 100vw, (max-width: 768px) 50vw, 25vw",
+  contentWidth: "(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 960px"
+};
+export function buildImageUrl(src, params = {}) {
+  const filteredParams = Object.entries(params).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => {
+    if (Array.isArray(value))
+      return [key, value.join(",")];
+    return [key, String(value)];
+  });
+  if (filteredParams.length === 0)
+    return src;
+  const queryString = filteredParams.map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join("&"), separator = src.includes("?") ? "&" : "?";
+  return `${src}${separator}${queryString}`;
+}
+export function parseImageUrl(url) {
+  const [src, queryString] = url.split("?"), params = {};
+  if (queryString)
+    new URLSearchParams(queryString).forEach((value, key) => {
+      if (/^\d+$/.test(value))
+        params[key] = Number.parseInt(value, 10);
+      else if (/^\d+\.\d+$/.test(value))
+        params[key] = Number.parseFloat(value);
+      else if (value === "true")
+        params[key] = !0;
+      else if (value === "false")
+        params[key] = !1;
+      else
+        params[key] = value;
+    });
+  return { src, params };
+}
+export function generateSrcsetData(options) {
+  const { src, widths, dprValues, fixedWidth, formats = DEFAULT_FORMATS, baseUrl = "", params = {} } = options, results = [];
+  for (const format of formats) {
+    let srcset, variants;
+    if (fixedWidth !== void 0 && dprValues) {
+      srcset = generateDprSrcset(src, fixedWidth, dprValues, params, format);
+      variants = dprValues.map((dpr) => ({
+        path: "",
+        url: buildImageUrl(src, { ...params, w: Math.round(fixedWidth * dpr), fm: format }),
+        width: Math.round(fixedWidth * dpr),
+        height: 0,
+        format,
+        size: 0,
+        dpr
+      }));
+    } else {
+      const usedWidths = widths || DEFAULT_WIDTHS;
+      srcset = generateWidthSrcset(src, usedWidths, params, format);
+      variants = usedWidths.map((width) => ({
+        path: "",
+        url: buildImageUrl(src, { ...params, w: width, fm: format }),
+        width,
+        height: 0,
+        format,
+        size: 0
+      }));
+    }
+    results.push({
+      srcset,
+      format,
+      mimeType: MIME_TYPES[format],
+      variants
+    });
+  }
+  return results;
+}
+export function generateSourceTags(srcsetData, sizes = "100vw") {
+  return srcsetData.map(({ srcset, mimeType }) => `<source type="${mimeType}" srcset="${srcset}" sizes="${sizes}" />`).join(`
+`);
+}
+export function getBestVariant(variants, targetWidth) {
+  if (variants.length === 0)
+    return;
+  const sorted = [...variants].sort((a, b) => a.width - b.width), larger = sorted.find((v) => v.width >= targetWidth);
+  if (larger)
+    return larger;
+  return sorted[sorted.length - 1];
+}
+export function getFallbackVariant(variants, preferFormat) {
+  const filtered = preferFormat ? variants.filter((v) => v.format === preferFormat) : variants;
+  if (filtered.length === 0) {
+    const jpegVariants = variants.filter((v) => v.format === "jpeg"), source = jpegVariants.length > 0 ? jpegVariants : variants;
+    return source[Math.floor(source.length / 2)];
+  }
+  const sorted = filtered.sort((a, b) => a.width - b.width);
+  return sorted[Math.floor(sorted.length / 2)];
+}
+export function groupVariantsByFormat(variants) {
+  const grouped = new Map;
+  for (const variant of variants) {
+    const existing = grouped.get(variant.format) || [];
+    existing.push(variant);
+    grouped.set(variant.format, existing);
+  }
+  return grouped;
+}
+export function getMimeType(format) {
+  return MIME_TYPES[format] || "application/octet-stream";
+}
+export function getFormatExtension(format) {
+  return FORMAT_EXTENSIONS[format] || format;
+}
+export function detectFormat(src) {
+  switch (src.split(".").pop()?.toLowerCase()) {
+    case "jpg":
+    case "jpeg":
+      return "jpeg";
+    case "png":
+      return "png";
+    case "webp":
+      return "webp";
+    case "avif":
+      return "avif";
+    case "gif":
+      return "gif";
+    default:
+      return;
+  }
+}

package/dist/media/index.d.ts

@@ -0,0 +1,331 @@
+import type { MediaConfig } from './types';
+/*"
+ *   preview
+ * />
+ * ```
+ */
+// =============================================================================
+// Type Exports
+// =============================================================================
+export type {
+  // Placeholder types
+  PlaceholderStrategy,
+  PlaceholderOptions,
+  PlaceholderResult,
+
+  // Image types (prefixed to avoid conflicts with image-optimization)
+  ImageFormat as MediaImageFormat,
+  ImageFit,
+  ImageCrop,
+  ImageParams,
+  ImageVariant,
+  ProcessedImage,
+  ImgProps,
+  ImgDirectiveOptions,
+  ImageRenderContext as MediaImageRenderContext,
+  ImageRenderResult,
+
+  // Enhanced image types (ts-images integration)
+  EnhancedImgProps,
+  ProcessedImageResult,
+  ResponsiveVariantSet,
+  TsImagesConfig,
+  ImageOptimizationPreset,
+  ImageTransformation,
+  ImageTransformationConfig,
+  FormatQualitySettings,
+  WatermarkConfig,
+  WatermarkPosition,
+  ArtDirectionConfig,
+
+  // Video types
+  VideoSource,
+  VideoEmbedType,
+  PlyrControl,
+  PlyrOptions,
+  VideoProps,
+  VideoDirectiveOptions,
+  VideoRenderResult,
+
+  // Enhanced video types (ts-videos integration)
+  EnhancedVideoProps,
+  ProcessedVideoResult,
+  TsVideosConfig,
+  VideoQualityPreset,
+  VideoPlatformPreset,
+  VideoCodec,
+  AudioCodec,
+  TranscodeConfig,
+  TranscodeResult,
+  ThumbnailResult,
+  PosterGenerationConfig,
+  SpriteSheetConfig,
+  StreamingConfig,
+  StreamingQualityLevel,
+  HLSResult,
+  DASHResult,
+  WaveformConfig,
+
+  // Upload types
+  UploadConfig,
+  UploadProgress,
+  UploadResult,
+  FileValidationResult,
+  MediaUploadProps,
+  UploadDirectiveOptions,
+
+  // Protected media types
+  SignedUrl,
+  SignatureConfig,
+  BatchSignatureRequest,
+  BatchSignatureResult,
+  ProtectedAuthContext,
+  ProtectedMediaProps,
+  ProtectedDirectiveOptions,
+
+  // Media manager types
+  MediaManagerConfig,
+  MediaItem,
+
+  // Configuration types
+  MediaConfig,
+  MediaImageConfig,
+  MediaVideoConfig,
+  MediaUploadConfig,
+  MediaProtectedConfig,
+  MediaCacheConfig,
+
+  // Client types
+  LazyLoadOptions,
+  BlurUpOptions,
+
+  // Utility types
+  Breakpoint,
+  SrcsetOptions,
+  SrcsetData,
+} from './types';
+// Export types separately
+export type { ExtendedVideoRenderContext } from './video/index';
+export type { CacheConfig, CacheEntry } from './shared/index';
+/**
+ * Default media configuration
+ */
+export declare const defaultMediaConfig: MediaConfig;
+// =============================================================================
+// Image Module
+// =============================================================================
+export {
+  // Component
+  renderImgComponent,
+  parseImgComponent,
+  processImgComponents,
+
+  // Directive
+  createImgDirective,
+  imgDirective,
+
+  // Srcset generation (prefixed to avoid conflicts with image-optimization)
+  DEFAULT_WIDTHS as MEDIA_DEFAULT_WIDTHS,
+  DEFAULT_DPR_VALUES,
+  DEFAULT_FORMATS as MEDIA_DEFAULT_FORMATS,
+  MIME_TYPES,
+  COMMON_SIZES,
+  generateWidthSrcset,
+  generateAutoWidthSrcset,
+  calculateOptimalWidths,
+  generateDprSrcset,
+  generateDprSrcsetWithVariableQuality,
+  generateSizesAttribute,
+  generateSizesFromBreakpoints,
+  buildImageUrl,
+  parseImageUrl,
+  generateSrcsetData,
+  generateSourceTags,
+  getBestVariant,
+  getFallbackVariant,
+  groupVariantsByFormat,
+  getMimeType,
+  getFormatExtension,
+  detectFormat,
+
+  // Placeholder generation
+  DEFAULT_PLACEHOLDER_OPTIONS,
+  BLUR_UP_CSS,
+  generatePlaceholder,
+  generateThumbhashPlaceholder,
+  generateLQIP,
+  extractDominantColor,
+  generateColorPlaceholder,
+  decodeThumbhash,
+  generatePlaceholderCSS,
+  generatePlaceholderStyle,
+  getCachedPlaceholder,
+  clearPlaceholderCache,
+  getPlaceholderCacheStats,
+
+  // Editing API
+  buildUrl,
+  parseUrl,
+  mergeParams,
+  resize,
+  crop,
+  thumbnail,
+  contain,
+  cover,
+  blur,
+  sharpen,
+  grayscale,
+  sepia,
+  invert,
+  brightness,
+  contrast,
+  saturation,
+  rotate,
+  flipHorizontal,
+  flipVertical,
+  format,
+  quality,
+  auto,
+  watermark,
+  PRESETS,
+  applyPreset,
+  srcsetUrls,
+  dprUrls,
+  validateParams,
+  sanitizeParams,
+} from './image/index';
+// =============================================================================
+// Image Processor Module (ts-images integration)
+// =============================================================================
+export {
+  processImage,
+  optimizeImage,
+  applyTransformations,
+  generateResponsiveVariants,
+  generateSrcset,
+  getCachedImageResult,
+  setCachedImageResult,
+  clearImageCache,
+  ImageProcessorCache,
+} from './image/processor/index';
+// =============================================================================
+// Video Module
+// =============================================================================
+export {
+  renderVideoComponent,
+  parseVideoDirectiveOptions,
+  // Directive
+  createVideoDirective,
+  videoDirective,
+} from './video/index';
+// =============================================================================
+// Video Processor Module (ts-videos integration)
+// =============================================================================
+export {
+  processVideo,
+  analyzeVideo,
+  generatePoster,
+  generateThumbnails,
+  generateSpriteSheet,
+  generateHLSManifest,
+  generateDASHManifest,
+  getCachedVideoResult,
+  setCachedVideoResult,
+  clearVideoCache,
+  VideoProcessorCache,
+} from './video/processor/index';
+// =============================================================================
+// Upload Module
+// =============================================================================
+export { renderMediaUpload } from './upload/index';
+// =============================================================================
+// Protected Media Module
+// =============================================================================
+export {
+  // URL signing
+  signUrl,
+  batchSignUrls,
+  smartBatchSign,
+
+  // Validation
+  isSignatureValid,
+  getTimeUntilExpiry,
+  shouldRefreshSignature,
+
+  // Auth helpers
+  checkAuthAccess,
+  buildAuthParams,
+
+  // Cache
+  getCachedSignature,
+  clearSignatureCache,
+  pruneSignatureCache,
+
+  // Component
+  renderProtectedImg,
+  renderProtectedVideo,
+  processProtectedMedia,
+  parseProtectedArgs,
+
+  // Runtime
+  generateSignatureRuntime,
+} from './protected/index';
+// =============================================================================
+// Media Manager Module
+// =============================================================================
+export { generateMediaManagerEmbed, generateSimpleMediaPicker } from './manager/embed';
+// =============================================================================
+// Client Runtime Module
+// =============================================================================
+export {
+  // Lazy loading
+  isNativeLazySupported,
+  isIntersectionObserverSupported,
+  initLazyLoading,
+  loadElement,
+  lazyLoad,
+  lazyLoadAll,
+  createLazyObserver,
+  observeElement,
+  disconnectObserver,
+  generateLazyLoadRuntime,
+
+  // Blur-up
+  initBlurUp,
+  initAllBlurUp,
+  renderThumbhashToCanvas,
+  thumbHashToRGBA,
+  thumbHashToDataURL,
+  parseThumbhashString,
+  crossfadeTransition,
+  generateBlurUpRuntime,
+  generateBlurUpCSS,
+
+  // Upload handler
+  validateFile,
+  uploadFile,
+  uploadFiles,
+  generateImagePreview,
+  generateVideoPreview,
+  generateUploadRuntime,
+
+  // Combined runtime
+  generateMediaRuntime,
+  generateMinifiedMediaRuntime,
+} from './client/index';
+// =============================================================================
+// Shared Utilities
+// =============================================================================
+export {
+  hashFile,
+  hashBuffer,
+  hashString,
+  generateCacheKey,
+  getFileMtime,
+  fileExists,
+  getCached,
+  setCached,
+  clearCache,
+  getCacheStats,
+  pruneCache,
+} from './shared/index';

package/dist/media/index.js

@@ -0,0 +1,198 @@
+export {
+  renderImgComponent,
+  parseImgComponent,
+  processImgComponents,
+  createImgDirective,
+  imgDirective,
+  DEFAULT_WIDTHS as MEDIA_DEFAULT_WIDTHS,
+  DEFAULT_DPR_VALUES,
+  DEFAULT_FORMATS as MEDIA_DEFAULT_FORMATS,
+  MIME_TYPES,
+  COMMON_SIZES,
+  generateWidthSrcset,
+  generateAutoWidthSrcset,
+  calculateOptimalWidths,
+  generateDprSrcset,
+  generateDprSrcsetWithVariableQuality,
+  generateSizesAttribute,
+  generateSizesFromBreakpoints,
+  buildImageUrl,
+  parseImageUrl,
+  generateSrcsetData,
+  generateSourceTags,
+  getBestVariant,
+  getFallbackVariant,
+  groupVariantsByFormat,
+  getMimeType,
+  getFormatExtension,
+  detectFormat,
+  DEFAULT_PLACEHOLDER_OPTIONS,
+  BLUR_UP_CSS,
+  generatePlaceholder,
+  generateThumbhashPlaceholder,
+  generateLQIP,
+  extractDominantColor,
+  generateColorPlaceholder,
+  decodeThumbhash,
+  generatePlaceholderCSS,
+  generatePlaceholderStyle,
+  getCachedPlaceholder,
+  clearPlaceholderCache,
+  getPlaceholderCacheStats,
+  buildUrl,
+  parseUrl,
+  mergeParams,
+  resize,
+  crop,
+  thumbnail,
+  contain,
+  cover,
+  blur,
+  sharpen,
+  grayscale,
+  sepia,
+  invert,
+  brightness,
+  contrast,
+  saturation,
+  rotate,
+  flipHorizontal,
+  flipVertical,
+  format,
+  quality,
+  auto,
+  watermark,
+  PRESETS,
+  applyPreset,
+  srcsetUrls,
+  dprUrls,
+  validateParams,
+  sanitizeParams
+} from "./image/index.js";
+export {
+  processImage,
+  optimizeImage,
+  applyTransformations,
+  generateResponsiveVariants,
+  generateSrcset,
+  getCachedImageResult,
+  setCachedImageResult,
+  clearImageCache,
+  ImageProcessorCache
+} from "./image/processor/index.js";
+export {
+  renderVideoComponent,
+  parseVideoDirectiveOptions,
+  createVideoDirective,
+  videoDirective
+} from "./video/index.js";
+export {
+  processVideo,
+  analyzeVideo,
+  generatePoster,
+  generateThumbnails,
+  generateSpriteSheet,
+  generateHLSManifest,
+  generateDASHManifest,
+  getCachedVideoResult,
+  setCachedVideoResult,
+  clearVideoCache,
+  VideoProcessorCache
+} from "./video/processor/index.js";
+export { renderMediaUpload } from "./upload/index.js";
+export {
+  signUrl,
+  batchSignUrls,
+  smartBatchSign,
+  isSignatureValid,
+  getTimeUntilExpiry,
+  shouldRefreshSignature,
+  checkAuthAccess,
+  buildAuthParams,
+  getCachedSignature,
+  clearSignatureCache,
+  pruneSignatureCache,
+  renderProtectedImg,
+  renderProtectedVideo,
+  processProtectedMedia,
+  parseProtectedArgs,
+  generateSignatureRuntime
+} from "./protected/index.js";
+export { generateMediaManagerEmbed, generateSimpleMediaPicker } from "./manager/embed.js";
+export {
+  isNativeLazySupported,
+  isIntersectionObserverSupported,
+  initLazyLoading,
+  loadElement,
+  lazyLoad,
+  lazyLoadAll,
+  createLazyObserver,
+  observeElement,
+  disconnectObserver,
+  generateLazyLoadRuntime,
+  initBlurUp,
+  initAllBlurUp,
+  renderThumbhashToCanvas,
+  thumbHashToRGBA,
+  thumbHashToDataURL,
+  parseThumbhashString,
+  crossfadeTransition,
+  generateBlurUpRuntime,
+  generateBlurUpCSS,
+  validateFile,
+  uploadFile,
+  uploadFiles,
+  generateImagePreview,
+  generateVideoPreview,
+  generateUploadRuntime,
+  generateMediaRuntime,
+  generateMinifiedMediaRuntime
+} from "./client/index.js";
+export {
+  hashFile,
+  hashBuffer,
+  hashString,
+  generateCacheKey,
+  getFileMtime,
+  fileExists,
+  getCached,
+  setCached,
+  clearCache,
+  getCacheStats,
+  pruneCache
+} from "./shared/index.js";
+export const defaultMediaConfig = {
+  enabled: !0,
+  image: {
+    enabled: !0,
+    defaultWidths: [320, 480, 640, 768, 1024, 1280, 1536, 1920],
+    defaultFormats: ["avif", "webp", "jpeg"],
+    defaultQuality: 80,
+    placeholderStrategy: "thumbhash",
+    lazyByDefault: !0,
+    enableDpr: !0,
+    defaultDpr: [1, 2, 3]
+  },
+  video: {
+    enabled: !0,
+    lazyByDefault: !0,
+    defaultControls: !0
+  },
+  upload: {
+    enabled: !0,
+    maxSize: 10485760,
+    allowedTypes: ["image/*", "video/*", "audio/*", "application/pdf"],
+    maxConcurrent: 3
+  },
+  protected: {
+    enabled: !0,
+    expirationSeconds: 3600,
+    batchSize: 10
+  },
+  cache: {
+    enabled: !0,
+    directory: ".stx/media-cache",
+    maxAge: 30,
+    maxSize: 500
+  }
+};