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

package/dist/media/manager/embed.d.ts

@@ -0,0 +1,25 @@
+import type { MediaManagerConfig } from '../types';
+/**
+ * Generate HTML and script for embedding a media manager
+ *
+ * @example
+ * ```typescript
+ * const { html, script } = generateMediaManagerEmbed({
+ *   src: 'https://media-manager.example.com/embed.js',
+ *   apiKey: 'your-api-key',
+ *   bucket: 'uploads',
+ * })
+ * ```
+ */
+export declare function generateMediaManagerEmbed(config: MediaManagerConfig): { html: string; script: string };
+/**
+ * Generate a simple media picker modal
+ *
+ * For use when a full media manager is not available,
+ * provides a basic file browser interface.
+ */
+export declare function generateSimpleMediaPicker(options: {
+  accept?: string
+  multiple?: boolean
+  onSelect?: string
+}): { html: string; script: string; css: string };

package/dist/media/manager/embed.js

@@ -0,0 +1,253 @@
+export function generateMediaManagerEmbed(config) {
+  const {
+    src,
+    apiKey,
+    bucket,
+    allowedTypes,
+    maxFileSize,
+    multiple = !1,
+    customStyles = {},
+    callbacks = {}
+  } = config, containerId = `stx-media-manager-${Math.random().toString(36).slice(2, 8)}`, managerConfig = {
+    container: `#${containerId}`
+  };
+  if (apiKey)
+    managerConfig.apiKey = apiKey;
+  if (bucket)
+    managerConfig.bucket = bucket;
+  if (allowedTypes)
+    managerConfig.allowedTypes = allowedTypes;
+  if (maxFileSize)
+    managerConfig.maxFileSize = maxFileSize;
+  if (multiple)
+    managerConfig.multiple = multiple;
+  if (Object.keys(customStyles).length > 0)
+    managerConfig.styles = customStyles;
+  const html = `<div id="${containerId}" class="stx-media-manager"></div>`, callbackHandlers = Object.entries(callbacks).filter(([, handler]) => handler).map(([event, handler]) => {
+    return `manager.on('${event.replace(/^on/, "").toLowerCase()}', ${handler});`;
+  }).join(`
+    `), script = `
+(function() {
+  // Load media manager script
+  var script = document.createElement('script');
+  script.src = '${escapeAttr(src)}';
+  script.async = true;
+
+  script.onload = function() {
+    // Initialize manager
+    if (typeof MediaManager !== 'undefined') {
+      var manager = new MediaManager(${JSON.stringify(managerConfig)});
+      ${callbackHandlers}
+      manager.init();
+
+      // Expose manager instance
+      window.STX = window.STX || {};
+      window.STX.mediaManager = manager;
+    }
+  };
+
+  script.onerror = function() {
+    console.error('[stx] Failed to load media manager from:', '${escapeAttr(src)}');
+  };
+
+  document.head.appendChild(script);
+})();
+`.trim();
+  return { html, script };
+}
+export function generateSimpleMediaPicker(options) {
+  const { accept = "image/*", multiple = !1, onSelect = "handleMediaSelect" } = options, pickerId = `stx-picker-${Math.random().toString(36).slice(2, 8)}`, html = `
+<div id="${pickerId}" class="stx-media-picker" style="display:none;">
+  <div class="stx-media-picker-backdrop"></div>
+  <div class="stx-media-picker-modal">
+    <div class="stx-media-picker-header">
+      <h3>Select Media</h3>
+      <button class="stx-media-picker-close" data-close>&times;</button>
+    </div>
+    <div class="stx-media-picker-body">
+      <input type="file" accept="${accept}" ${multiple ? "multiple" : ""} data-input />
+      <div class="stx-media-picker-preview" data-preview></div>
+    </div>
+    <div class="stx-media-picker-footer">
+      <button class="stx-media-picker-cancel" data-close>Cancel</button>
+      <button class="stx-media-picker-confirm" data-confirm>Select</button>
+    </div>
+  </div>
+</div>
+`.trim(), script = `
+(function() {
+  var picker = document.getElementById('${pickerId}');
+  if (!picker) return;
+
+  var input = picker.querySelector('[data-input]');
+  var preview = picker.querySelector('[data-preview]');
+  var selectedFiles = [];
+
+  // Open picker
+  window.STX = window.STX || {};
+  window.STX.openMediaPicker = function() {
+    picker.style.display = 'flex';
+  };
+
+  window.STX.closeMediaPicker = function() {
+    picker.style.display = 'none';
+    input.value = '';
+    preview.innerHTML = '';
+    selectedFiles = [];
+  };
+
+  // Close handlers
+  picker.querySelectorAll('[data-close]').forEach(function(btn) {
+    btn.addEventListener('click', window.STX.closeMediaPicker);
+  });
+
+  picker.querySelector('.stx-media-picker-backdrop').addEventListener('click', window.STX.closeMediaPicker);
+
+  // File selection
+  input.addEventListener('change', function(e) {
+    selectedFiles = Array.from(e.target.files);
+    preview.innerHTML = '';
+
+    selectedFiles.forEach(function(file) {
+      var item = document.createElement('div');
+      item.className = 'stx-media-picker-item';
+
+      if (file.type.startsWith('image/')) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+          item.innerHTML = '<img src="' + e.target.result + '" alt="' + file.name + '" />';
+        };
+        reader.readAsDataURL(file);
+      }
+else {
+        item.textContent = file.name;
+      }
+
+      preview.appendChild(item);
+    });
+  });
+
+  // Confirm selection
+  picker.querySelector('[data-confirm]').addEventListener('click', function() {
+    if (selectedFiles.length > 0 && typeof ${onSelect} === 'function') {
+      ${onSelect}(selectedFiles);
+    }
+    window.STX.closeMediaPicker();
+  });
+})();
+`.trim(), css = `
+.stx-media-picker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.stx-media-picker-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.stx-media-picker-modal {
+  position: relative;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.stx-media-picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.stx-media-picker-header h3 {
+  margin: 0;
+  font-size: 1.125rem;
+}
+
+.stx-media-picker-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #6b7280;
+}
+
+.stx-media-picker-body {
+  padding: 1rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.stx-media-picker-preview {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.stx-media-picker-item {
+  aspect-ratio: 1;
+  background: #f3f4f6;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.stx-media-picker-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.stx-media-picker-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.stx-media-picker-footer button {
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.stx-media-picker-cancel {
+  background: white;
+  border: 1px solid #d1d5db;
+  color: #374151;
+}
+
+.stx-media-picker-confirm {
+  background: #3b82f6;
+  border: none;
+  color: white;
+}
+`.trim();
+  return { html, script, css };
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#039;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

package/dist/media/protected/component.d.ts

@@ -0,0 +1,33 @@
+import type { ProtectedMediaProps } from '../types';
+/**
+ * Render a protected image component
+ *
+ * @example
+ * ```typescript
+ * const html = await renderProtectedImg({
+ *   src: '/api/media/secure-image.jpg',
+ *   alt: 'Secure content',
+ *   signatureEndpoint: '/api/sign',
+ *   auth: { role: 'premium' },
+ * })
+ * ```
+ */
+export declare function renderProtectedImg(props: ProtectedMediaProps): Promise<{ html: string; script?: string }>;
+/**
+ * Render a protected video component
+ */
+export declare function renderProtectedVideo(props: ProtectedMediaProps & {
+    poster?: string
+    controls?: boolean
+    autoplay?: boolean
+    muted?: boolean
+    loop?: boolean
+  }): Promise<{ html: string; script?: string }>;
+/**
+ * Collect all protected media elements from content and batch sign
+ */
+export declare function processProtectedMedia(content: string, signatureEndpoint: string): Promise<{ html: string; script: string }>;
+/**
+ * Parse @protected directive arguments
+ */
+export declare function parseProtectedArgs(content: string, params: Record<string, unknown>, context: Record<string, unknown>): ProtectedMediaProps;

package/dist/media/protected/component.js

@@ -0,0 +1,235 @@
+import {
+  signUrl,
+  batchSignUrls,
+  checkAuthAccess,
+  buildAuthParams,
+  generateSignatureRuntime
+} from "./signature.js";
+export async function renderProtectedImg(props) {
+  const {
+    src,
+    alt = "",
+    signatureEndpoint = "/api/sign",
+    signatureConfig = {},
+    auth,
+    fallback,
+    oneTimeUse = !0
+  } = props, className = props.class, style = props.style;
+  if (auth) {
+    if (!await checkAuthAccess(auth)) {
+      if (fallback)
+        return {
+          html: `<img src="${escapeAttr(fallback)}" alt="${escapeAttr(alt)}"${className ? ` class="${escapeAttr(className)}"` : ""}${style ? ` style="${escapeAttr(style)}"` : ""} />`
+        };
+      return {
+        html: "<!-- Protected content: access denied -->"
+      };
+    }
+  }
+  const config = {
+    endpoint: signatureEndpoint,
+    oneTimeUse,
+    ...signatureConfig,
+    params: auth ? buildAuthParams(auth) : signatureConfig.params
+  }, elementId = `stx-protected-${Math.random().toString(36).slice(2, 8)}`, attrs = [
+    `id="${elementId}"`,
+    `data-protected-src="${escapeAttr(src)}"`,
+    `data-signature-endpoint="${escapeAttr(signatureEndpoint)}"`,
+    `alt="${escapeAttr(alt)}"`
+  ];
+  if (fallback) {
+    attrs.push(`data-fallback="${escapeAttr(fallback)}"`);
+    attrs.push(`src="${escapeAttr(fallback)}"`);
+  } else
+    attrs.push('src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"');
+  if (className)
+    attrs.push(`class="${escapeAttr(className)}"`);
+  if (style)
+    attrs.push(`style="${escapeAttr(style)}"`);
+  const script = `
+(function() {
+  var el = document.getElementById('${elementId}');
+  if (!el) return;
+
+  STX.loadProtectedMedia(el, {
+    endpoint: '${escapeAttr(signatureEndpoint)}',
+    oneTimeUse: ${oneTimeUse},
+    expirationSeconds: ${signatureConfig.expirationSeconds || 3600}
+  });
+})();
+`.trim();
+  return {
+    html: `<img ${attrs.join(" ")} />`,
+    script
+  };
+}
+export async function renderProtectedVideo(props) {
+  const {
+    src,
+    signatureEndpoint = "/api/sign",
+    signatureConfig = {},
+    auth,
+    fallback,
+    oneTimeUse = !0,
+    poster,
+    controls = !0,
+    autoplay = !1,
+    muted = !1,
+    loop = !1
+  } = props, className = props.class, style = props.style, alt = props.alt;
+  if (auth) {
+    if (!await checkAuthAccess(auth))
+      return {
+        html: "<!-- Protected video: access denied -->"
+      };
+  }
+  const elementId = `stx-protected-video-${Math.random().toString(36).slice(2, 8)}`, attrs = [
+    `id="${elementId}"`,
+    `data-protected-src="${escapeAttr(src)}"`,
+    `data-signature-endpoint="${escapeAttr(signatureEndpoint)}"`
+  ];
+  if (poster)
+    attrs.push(`poster="${escapeAttr(poster)}"`);
+  if (controls)
+    attrs.push("controls");
+  if (autoplay)
+    attrs.push("autoplay");
+  if (muted)
+    attrs.push("muted");
+  if (loop)
+    attrs.push("loop");
+  if (className)
+    attrs.push(`class="${escapeAttr(className)}"`);
+  if (style)
+    attrs.push(`style="${escapeAttr(style)}"`);
+  if (fallback)
+    attrs.push(`data-fallback="${escapeAttr(fallback)}"`);
+  const script = `
+(function() {
+  var el = document.getElementById('${elementId}');
+  if (!el) return;
+
+  STX.loadProtectedMedia(el, {
+    endpoint: '${escapeAttr(signatureEndpoint)}',
+    oneTimeUse: ${oneTimeUse},
+    expirationSeconds: ${signatureConfig.expirationSeconds || 3600}
+  });
+})();
+`.trim();
+  return {
+    html: `<video ${attrs.join(" ")}></video>`,
+    script
+  };
+}
+export async function processProtectedMedia(content, signatureEndpoint) {
+  const protectedPattern = /data-protected-src="([^"]+)"/g, sources = [];
+  let match;
+  while ((match = protectedPattern.exec(content)) !== null)
+    sources.push(match[1]);
+  if (sources.length === 0)
+    return { html: content, script: "" };
+  let script = generateSignatureRuntime() + `
+
+`;
+  script += `
+(function() {
+  var sources = ${JSON.stringify(sources)};
+  var endpoint = '${escapeAttr(signatureEndpoint)}';
+
+  // Batch sign all URLs
+  STX.batchSignUrls(sources, { endpoint: endpoint })
+    .then(function(data) {
+      sources.forEach(function(src) {
+        var els = document.querySelectorAll('[data-protected-src="' + src + '"]');
+        var signedUrl = data.signatures && data.signatures[src];
+
+        els.forEach(function(el) {
+          if (signedUrl) {
+            if (el.tagName === 'IMG') el.src = signedUrl.url;
+            else if (el.tagName === 'VIDEO') { el.src = signedUrl.url; el.load(); }
+          }
+else if (el.dataset.fallback) {
+            el.src = el.dataset.fallback;
+          }
+        });
+      });
+    })
+    .catch(function(error) {
+      console.error('Failed to sign protected media:', error);
+      document.querySelectorAll('[data-protected-src]').forEach(function(el) {
+        if (el.dataset.fallback) el.src = el.dataset.fallback;
+      });
+    });
+})();
+`.trim();
+  return { html: content, script };
+}
+export function parseProtectedArgs(content, params, context) {
+  if (params.src)
+    return {
+      src: String(params.src),
+      alt: String(params.alt || ""),
+      signatureEndpoint: String(params.signatureEndpoint || "/api/sign"),
+      auth: params.auth,
+      fallback: params.fallback ? String(params.fallback) : void 0,
+      oneTimeUse: params.oneTimeUse !== !1
+    };
+  let args = content.trim();
+  if (args.startsWith("@protected(") || args.startsWith("("))
+    args = args.replace(/^@protected\(/, "").replace(/^\(/, "").replace(/\)$/, "");
+  const parts = parseArguments(args);
+  return {
+    src: resolveValue(parts[0], context) || "",
+    alt: resolveValue(parts[1], context) || "",
+    ...typeof parts[2] === "object" ? parts[2] : {}
+  };
+}
+function parseArguments(argsStr) {
+  const args = [];
+  let current = "", inString = !1, stringChar = "", braceDepth = 0;
+  for (let i = 0;i < argsStr.length; i++) {
+    const char = argsStr[i], prevChar = i > 0 ? argsStr[i - 1] : "";
+    if ((char === '"' || char === "'") && prevChar !== "\\") {
+      if (!inString) {
+        inString = !0;
+        stringChar = char;
+      } else if (char === stringChar)
+        inString = !1;
+      else
+        current += char;
+      continue;
+    }
+    if (!inString) {
+      if (char === "{")
+        braceDepth++;
+      if (char === "}")
+        braceDepth--;
+      if (char === "," && braceDepth === 0) {
+        args.push(current.trim());
+        current = "";
+        continue;
+      }
+    }
+    current += char;
+  }
+  if (current.trim())
+    args.push(current.trim());
+  return args;
+}
+function resolveValue(value, context) {
+  if (typeof value !== "string")
+    return value;
+  const trimmed = value.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'"))
+    return trimmed.slice(1, -1);
+  if (context[trimmed] !== void 0)
+    return context[trimmed];
+  if (trimmed.startsWith("{"))
+    try {
+      return JSON.parse(trimmed);
+    } catch {}
+  return trimmed;
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#039;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

package/dist/media/protected/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * STX Media - Protected Media Module
+ *
+ * Content protection via signed URLs and authentication.
+ *
+ * @module media/protected
+ */
+// =============================================================================
+// Signature Exports
+// =============================================================================
+export {
+  // URL signing
+  signUrl,
+  batchSignUrls,
+  smartBatchSign,
+
+  // Validation
+  isSignatureValid,
+  getTimeUntilExpiry,
+  shouldRefreshSignature,
+
+  // Auth helpers
+  checkAuthAccess,
+  buildAuthParams,
+
+  // Cache
+  getCachedSignature,
+  clearSignatureCache,
+  pruneSignatureCache,
+
+  // Runtime
+  generateSignatureRuntime,
+} from './signature';
+// =============================================================================
+// Component Exports
+// =============================================================================
+export {
+  // Components
+  renderProtectedImg,
+  renderProtectedVideo,
+
+  // Processing
+  processProtectedMedia,
+
+  // Directive helpers
+  parseProtectedArgs,
+} from './component';

package/dist/media/protected/index.js

@@ -0,0 +1,20 @@
+export {
+  signUrl,
+  batchSignUrls,
+  smartBatchSign,
+  isSignatureValid,
+  getTimeUntilExpiry,
+  shouldRefreshSignature,
+  checkAuthAccess,
+  buildAuthParams,
+  getCachedSignature,
+  clearSignatureCache,
+  pruneSignatureCache,
+  generateSignatureRuntime
+} from "./signature.js";
+export {
+  renderProtectedImg,
+  renderProtectedVideo,
+  processProtectedMedia,
+  parseProtectedArgs
+} from "./component.js";

package/dist/media/protected/signature.d.ts

@@ -0,0 +1,72 @@
+import type { BatchSignatureResult, ProtectedAuthContext, SignatureConfig, SignedUrl } from '../types';
+/**
+ * Sign a single URL for protected access
+ *
+ * @example
+ * ```typescript
+ * const signed = await signUrl('/media/secure-video.mp4', {
+ *   endpoint: '/api/sign',
+ *   expirationSeconds: 3600,
+ * })
+ * console.log(signed.url) // URL with signature query param
+ * ```
+ */
+export declare function signUrl(src: string, config: SignatureConfig): Promise<SignedUrl>;
+/**
+ * Sign multiple URLs in a single batch request
+ *
+ * This minimizes API calls when a page has multiple protected media items.
+ *
+ * @example
+ * ```typescript
+ * const result = await batchSignUrls(
+ *   ['/media/video1.mp4', '/media/video2.mp4'],
+ *   { endpoint: '/api/batch-sign' }
+ * )
+ * console.log(result.signatures.get('/media/video1.mp4'))
+ * ```
+ */
+export declare function batchSignUrls(sources: string[], config: SignatureConfig): Promise<BatchSignatureResult>;
+/**
+ * Smart batch signing that groups requests for efficiency
+ */
+export declare function smartBatchSign(sources: string[], config: SignatureConfig, batchSize?: number): Promise<BatchSignatureResult>;
+/**
+ * Check if a signed URL is still valid (not expired)
+ */
+export declare function isSignatureValid(signedUrl: SignedUrl): boolean;
+/**
+ * Get time until signature expires (in ms)
+ */
+export declare function getTimeUntilExpiry(signedUrl: SignedUrl): number;
+/**
+ * Check if signature should be refreshed (within refresh window)
+ *
+ * @param signedUrl - The signed URL to check
+ * @param refreshWindowMs - Time before expiry to trigger refresh (default: 5 minutes)
+ */
+export declare function shouldRefreshSignature(signedUrl: SignedUrl, refreshWindowMs?: number): boolean;
+/**
+ * Check if user has access based on auth context
+ */
+export declare function checkAuthAccess(auth: ProtectedAuthContext): Promise<boolean>;
+/**
+ * Build auth params for signature request
+ */
+export declare function buildAuthParams(auth: ProtectedAuthContext): Record<string, unknown>;
+/**
+ * Get signed URL from cache or fetch new
+ */
+export declare function getCachedSignature(src: string, config: SignatureConfig): Promise<SignedUrl>;
+/**
+ * Clear signature cache
+ */
+export declare function clearSignatureCache(): void;
+/**
+ * Remove expired signatures from cache
+ */
+export declare function pruneSignatureCache(): number;
+/**
+ * Generate client-side signature handler runtime
+ */
+export declare function generateSignatureRuntime(): string;