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

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

@@ -0,0 +1,9 @@
+import type { MediaUploadProps } from '../types';
+/*',
+ *   maxSize: 10 * 1024 * 1024, // 10MB
+ *   preview: true,
+ *   dropzone: true,
+ * })
+ * ```
+ */
+export declare function renderMediaUpload(props: MediaUploadProps): { html: string; script: string; css: string };

package/dist/media/upload/component.js

@@ -0,0 +1,320 @@
+export function renderMediaUpload(props) {
+  const {
+    endpoint,
+    accept,
+    maxSize,
+    maxFiles = 1,
+    fieldName = "file",
+    preview = !1,
+    dropzone = !0,
+    multiple = !1,
+    autoUpload = !0,
+    showProgress = !0,
+    disabled = !1,
+    placeholder = "Drop files here or click to select",
+    label
+  } = props, className = props.class || "", style = props.style || "", id = props.id || `stx-upload-${Math.random().toString(36).slice(2, 8)}`, acceptAttr = Array.isArray(accept) ? accept.join(",") : accept, html = `
+<div id="${id}" class="stx-upload${dropzone ? " stx-upload-dropzone" : ""}${disabled ? " stx-upload-disabled" : ""}${className ? " " + className : ""}"${style ? ` style="${style}"` : ""}>
+  ${label ? `<label class="stx-upload-label">${escapeHtml(label)}</label>` : ""}
+  <div class="stx-upload-area" data-stx-upload-area>
+    <input
+      type="file"
+      name="${fieldName}"
+      ${acceptAttr ? `accept="${acceptAttr}"` : ""}
+      ${multiple ? "multiple" : ""}
+      ${disabled ? "disabled" : ""}
+      class="stx-upload-input"
+      data-stx-upload-input
+    />
+    <div class="stx-upload-placeholder">
+      <svg class="stx-upload-icon" viewBox="0 0 24 24" width="48" height="48">
+        <path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/>
+      </svg>
+      <span class="stx-upload-text">${escapeHtml(placeholder)}</span>
+      ${maxSize ? `<span class="stx-upload-hint">Max size: ${formatSize(maxSize)}</span>` : ""}
+    </div>
+  </div>
+  ${preview ? '<div class="stx-upload-previews" data-stx-upload-previews></div>' : ""}
+  ${showProgress ? '<div class="stx-upload-progress" data-stx-upload-progress style="display:none;"><div class="stx-upload-progress-bar"></div><span class="stx-upload-progress-text">0%</span></div>' : ""}
+</div>
+`.trim(), script = `
+(function() {
+  var container = document.getElementById('${id}');
+  if (!container) return;
+
+  var input = container.querySelector('[data-stx-upload-input]');
+  var area = container.querySelector('[data-stx-upload-area]');
+  var previews = container.querySelector('[data-stx-upload-previews]');
+  var progress = container.querySelector('[data-stx-upload-progress]');
+  var progressBar = progress ? progress.querySelector('.stx-upload-progress-bar') : null;
+  var progressText = progress ? progress.querySelector('.stx-upload-progress-text') : null;
+
+  var config = {
+    endpoint: '${escapeAttr(endpoint)}',
+    fieldName: '${fieldName}',
+    maxSize: ${maxSize || "null"},
+    maxFiles: ${maxFiles},
+    accept: ${acceptAttr ? JSON.stringify(acceptAttr.split(",")) : "null"},
+    autoUpload: ${autoUpload}
+  };
+
+  // Handle file selection
+  input.addEventListener('change', function(e) {
+    var files = Array.from(e.target.files);
+    handleFiles(files);
+  });
+
+  // Dropzone events
+  if (${dropzone}) {
+    area.addEventListener('dragover', function(e) {
+      e.preventDefault();
+      area.classList.add('stx-upload-dragover');
+    });
+
+    area.addEventListener('dragleave', function(e) {
+      e.preventDefault();
+      area.classList.remove('stx-upload-dragover');
+    });
+
+    area.addEventListener('drop', function(e) {
+      e.preventDefault();
+      area.classList.remove('stx-upload-dragover');
+      var files = Array.from(e.dataTransfer.files);
+      handleFiles(files);
+    });
+  }
+
+  function handleFiles(files) {
+    files = files.slice(0, config.maxFiles);
+
+    // Validate files
+    files = files.filter(function(file) {
+      var valid = STX.validateFile(file, config);
+      if (!valid.valid) {
+        console.warn('File validation failed:', file.name, valid.error);
+        return false;
+      }
+      return true;
+    });
+
+    if (files.length === 0) return;
+
+    // Generate previews
+    if (${preview} && previews) {
+      previews.innerHTML = '';
+      files.forEach(function(file) {
+        createPreview(file);
+      });
+    }
+
+    // Auto upload
+    if (config.autoUpload) {
+      uploadFiles(files);
+    }
+  }
+
+  function createPreview(file) {
+    var item = document.createElement('div');
+    item.className = 'stx-upload-preview-item';
+
+    if (file.type.startsWith('image/')) {
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        item.innerHTML = '<img src="' + e.target.result + '" alt="' + escapeHtml(file.name) + '" /><span>' + escapeHtml(file.name) + '</span>';
+      };
+      reader.readAsDataURL(file);
+    }
+else {
+      item.innerHTML = '<div class="stx-upload-preview-file">' + getFileIcon(file.type) + '</div><span>' + escapeHtml(file.name) + '</span>';
+    }
+
+    previews.appendChild(item);
+  }
+
+  function uploadFiles(files) {
+    if (progress) progress.style.display = 'block';
+
+    var uploaded = 0;
+    var total = files.length;
+
+    files.forEach(function(file) {
+      STX.uploadFile(file, config, function(prog) {
+        if (progressBar) progressBar.style.width = prog.percent + '%';
+        if (progressText) progressText.textContent = prog.percent + '%';
+      }).then(function(result) {
+        uploaded++;
+        if (result.success) {
+          container.dispatchEvent(new CustomEvent('upload', { detail: result }));
+        }
+else {
+          container.dispatchEvent(new CustomEvent('error', { detail: result }));
+        }
+
+        if (uploaded === total) {
+          container.dispatchEvent(new CustomEvent('complete', { detail: { files: files.length } }));
+          if (progress) {
+            setTimeout(function() { progress.style.display = 'none'; }, 1000);
+          }
+        }
+      });
+    });
+  }
+
+  function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+
+  function getFileIcon(type) {
+    if (type.startsWith('video/')) return '\uD83C\uDFAC';
+    if (type.startsWith('audio/')) return '\uD83C\uDFB5';
+    if (type.includes('pdf')) return '\uD83D\uDCC4';
+    if (type.includes('zip') || type.includes('rar')) return '\uD83D\uDCE6';
+    return '\uD83D\uDCC1';
+  }
+})();
+`.trim(), css = `
+.stx-upload {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.stx-upload-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.stx-upload-area {
+  position: relative;
+  border: 2px dashed #d1d5db;
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.stx-upload-area:hover,
+.stx-upload-dragover {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.stx-upload-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.stx-upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  color: #6b7280;
+}
+
+.stx-upload-icon {
+  color: #9ca3af;
+}
+
+.stx-upload-text {
+  font-size: 0.875rem;
+}
+
+.stx-upload-hint {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+.stx-upload-previews {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.stx-upload-preview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.25rem;
+  background: #f9fafb;
+  max-width: 100px;
+}
+
+.stx-upload-preview-item img {
+  max-width: 80px;
+  max-height: 80px;
+  object-fit: cover;
+  border-radius: 0.25rem;
+}
+
+.stx-upload-preview-item span {
+  font-size: 0.625rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stx-upload-preview-file {
+  font-size: 2rem;
+}
+
+.stx-upload-progress {
+  margin-top: 1rem;
+  background: #e5e7eb;
+  border-radius: 0.25rem;
+  height: 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.stx-upload-progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #3b82f6;
+  transition: width 0.3s;
+  width: 0;
+}
+
+.stx-upload-progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.625rem;
+  color: white;
+  text-shadow: 0 0 2px rgba(0,0,0,0.5);
+}
+
+.stx-upload-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+`.trim();
+  return { html, script, css };
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function formatSize(bytes) {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1048576)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * STX Media - Upload Module
+ *
+ * File upload components with validation and progress tracking.
+ *
+ * @module media/upload
+ */
+export { renderMediaUpload } from './component';

package/dist/media/upload/index.js

@@ -0,0 +1 @@
+export { renderMediaUpload } from "./component.js";

package/dist/media/video/directive.d.ts

@@ -0,0 +1,23 @@
+/**
+ * STX Media - Video Directive
+ *
+ * @video directive for declarative video rendering with ts-videos integration.
+ *
+ * @module media/video/directive
+ *
+ * @example
+ * ```html
+ * @video('/videos/intro.mp4', { controls: true, lazy: true })
+ * @video('/videos/movie.mp4', { quality: 'high', generatePoster: true })
+ * @video(dynamicSrc, { streaming: { format: 'hls' } })
+ * ```
+ */
+import type { CustomDirective } from '../../types';
+/**
+ * Create the @video directive
+ */
+export declare function createVideoDirective(): CustomDirective;
+/**
+ * The @video directive instance
+ */
+export declare const videoDirective: CustomDirective;

package/dist/media/video/directive.js

@@ -0,0 +1,142 @@
+import { defineDirective } from "../../directive-api.js";
+import { renderVideoComponent } from "./index.js";
+export function createVideoDirective() {
+  return defineDirective({
+    name: "video",
+    hasEndTag: !1,
+    description: "Render a video with optional ts-videos processing, streaming, and poster generation",
+    transform: async (content, params, context, filePath) => {
+      const { src, options } = parseVideoArgs(content, params, context);
+      if (!src) {
+        console.warn("@video directive: missing src argument");
+        return "<!-- @video: missing src -->";
+      }
+      const props = {
+        src,
+        poster: options.poster,
+        controls: options.controls !== !1,
+        autoplay: options.autoplay || !1,
+        muted: options.muted || !1,
+        loop: options.loop || !1,
+        preload: options.preload || "metadata",
+        playsinline: options.playsinline !== !1,
+        lazy: options.lazy !== !1,
+        player: options.player || "native",
+        type: options.type,
+        width: options.width,
+        height: options.height,
+        class: options.class,
+        style: options.style,
+        id: options.id,
+        crossorigin: options.crossorigin,
+        disablePictureInPicture: options.disablePictureInPicture,
+        disableRemotePlayback: options.disableRemotePlayback,
+        title: options.title,
+        quality: options.quality,
+        platform: options.platform,
+        process: options.process,
+        generatePoster: options.generatePoster,
+        streaming: options.streaming,
+        transcode: options.transcode,
+        spriteSheet: options.spriteSheet,
+        waveform: options.waveform
+      }, renderContext = {
+        isDev: context.__isDev || !1,
+        tsVideosConfig: context.__tsVideosConfig
+      }, result = await renderVideoComponent(props, renderContext);
+      let output = result.html;
+      if (result.css)
+        output += `
+<style>${result.css}</style>`;
+      if (result.script)
+        output += `
+<script>${result.script}</script>`;
+      return output;
+    },
+    defaults: {
+      src: "",
+      options: {
+        controls: !0,
+        lazy: !0,
+        preload: "metadata"
+      }
+    }
+  });
+}
+function parseVideoArgs(content, params, context) {
+  if (params.src)
+    return {
+      src: String(params.src),
+      options: params.options || {}
+    };
+  let args = content.trim();
+  if (args.startsWith("@video(") || args.startsWith("("))
+    args = args.replace(/^@video\(/, "").replace(/^\(/, "").replace(/\)$/, "");
+  const parsed = parseArguments(args), src = resolveValue(parsed[0], context) || "";
+  let options = {};
+  if (parsed[1]) {
+    const resolvedOptions = resolveValue(parsed[1], context);
+    if (typeof resolvedOptions === "object" && resolvedOptions !== null)
+      options = resolvedOptions;
+    else if (typeof parsed[1] === "string")
+      try {
+        options = JSON.parse(parsed[1]);
+      } catch {}
+  }
+  return { src, options };
+}
+function parseArguments(argsStr) {
+  const args = [];
+  let current = "", inString = !1, stringChar = "", braceDepth = 0, bracketDepth = 0;
+  for (let i = 0;i < argsStr.length; i++) {
+    const char = argsStr[i], prevChar = i > 0 ? argsStr[i - 1] : "";
+    if ((char === '"' || char === "'" || char === "`") && prevChar !== "\\") {
+      if (!inString) {
+        inString = !0;
+        stringChar = char;
+      } else if (char === stringChar) {
+        inString = !1;
+        stringChar = "";
+      } else
+        current += char;
+      continue;
+    }
+    if (!inString) {
+      if (char === "{")
+        braceDepth++;
+      if (char === "}")
+        braceDepth--;
+      if (char === "[")
+        bracketDepth++;
+      if (char === "]")
+        bracketDepth--;
+      if (char === "," && braceDepth === 0 && bracketDepth === 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 (!trimmed.startsWith("/") && !trimmed.startsWith(".") && !trimmed.startsWith("http") && !trimmed.startsWith("{")) {
+    const contextValue = context[trimmed];
+    if (contextValue !== void 0)
+      return contextValue;
+  }
+  if (trimmed.startsWith("{") || trimmed.startsWith("["))
+    try {
+      return JSON.parse(trimmed);
+    } catch {}
+  return trimmed;
+}
+export const videoDirective = createVideoDirective();

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

@@ -0,0 +1,76 @@
+/**
+ * STX Media - Video Module
+ *
+ * Video playback with native HTML5 and ts-video-player integration.
+ *
+ * This module provides a <Video> component that integrates with the
+ * ts-video-player library for advanced playback features including:
+ * - HLS/DASH streaming support
+ * - YouTube/Vimeo embeds with custom controls
+ * - Keyboard shortcuts
+ * - Picture-in-Picture
+ * - Full accessibility support
+ *
+ * With ts-videos integration:
+ * - Video transcoding with quality presets
+ * - Automatic poster/thumbnail generation
+ * - HLS/DASH streaming manifest generation
+ * - Sprite sheet generation for scrubbing preview
+ *
+ * @module media/video
+ */
+import type { VideoProps, VideoRenderResult, EnhancedVideoProps, TsVideosConfig, ProcessedVideoResult } from '../types';
+/**
+ * Extended video render context with ts-videos config
+ */
+export interface ExtendedVideoRenderContext {
+    /** Development mode */
+    isDev?: boolean;
+    /** ts-videos configuration */
+    tsVideosConfig?: TsVideosConfig;
+    /** Pre-processed video result */
+    processedResult?: ProcessedVideoResult;
+}
+/**
+ * Render a video component
+ *
+ * Supports both standard VideoProps and EnhancedVideoProps with ts-videos integration.
+ *
+ * @example
+ * ```typescript
+ * // Native HTML5 video
+ * const result = await renderVideoComponent({
+ *   src: '/videos/intro.mp4',
+ *   poster: '/images/poster.jpg',
+ *   controls: true,
+ *   lazy: true,
+ * })
+ *
+ * // With ts-video-player for advanced features
+ * const result = await renderVideoComponent({
+ *   src: 'https://youtube.com/watch?v=xxx',
+ *   player: 'ts-video',
+ *   lazy: true,
+ * })
+ *
+ * // With ts-videos processing
+ * const result = await renderVideoComponent({
+ *   src: '/videos/raw.mov',
+ *   process: true,
+ *   quality: 'high',
+ *   generatePoster: { timestamp: 5 },
+ *   streaming: { format: 'hls' },
+ * }, { tsVideosConfig: { enabled: true, outputDir: 'dist/videos' } })
+ * ```
+ */
+export declare function renderVideoComponent(props: VideoProps | EnhancedVideoProps, context?: {
+    isDev?: boolean;
+} | ExtendedVideoRenderContext): Promise<VideoRenderResult>;
+/**
+ * Parse @video directive options
+ */
+export { createVideoDirective, videoDirective } from './directive';
+/**
+ * Parse @video directive options (legacy - use videoDirective instead)
+ */
+export declare function parseVideoDirectiveOptions(content: string, params: Record<string, unknown>, context: Record<string, unknown>): VideoProps;