nuxt-media-library 0.0.44

package/dist/runtime/composables/useMLChunkUploader.d.ts

@@ -0,0 +1,9 @@
+import type { ChunkUploaderConfig, UploadFileOptions, UploadResult, UploadSessionResponse } from '../types/uploader.js';
+export declare function useMLChunkUploader(config?: ChunkUploaderConfig): {
+    config: any;
+    abort: () => void;
+    createSession: (payload: any) => Promise<UploadSessionResponse>;
+    getSession: (id: string) => Promise<UploadSessionResponse>;
+    abortSession: (id: string) => Promise<void>;
+    uploadFile: (file: File, options: UploadFileOptions) => Promise<UploadResult>;
+};

package/dist/runtime/composables/useMLChunkUploader.js

@@ -0,0 +1,22 @@
+import { getCurrentInstance, inject } from "vue";
+import { ChunkUploader } from "../utils/uploader/uploader.js";
+export function useMLChunkUploader(config) {
+  const instance = getCurrentInstance();
+  const injected = inject("chunkUploader", null);
+  const globalCfg = instance?.appContext.config.globalProperties?.$chunkUploader;
+  const globalFallback = globalThis?.MediaLibraryConfig?.chunkUploader ?? globalThis?.MediaLibraryChunkUploader;
+  const cfg = config ?? injected ?? globalCfg ?? globalFallback;
+  if (!cfg) {
+    throw new Error("ChunkUploader config missing. Pass a config or provide it via app.provide().");
+  }
+  const normalizedCfg = cfg.proxyUploads ? { ...cfg, baseURL: "" } : cfg;
+  const uploader = new ChunkUploader(normalizedCfg);
+  return {
+    config: cfg,
+    abort: () => uploader.abort(),
+    createSession: (payload) => uploader.createSession(payload),
+    getSession: (id) => uploader.getSession(id),
+    abortSession: (id) => uploader.abortSession(id),
+    uploadFile: (file, options) => uploader.uploadFile(file, options)
+  };
+}

package/dist/runtime/composables/useMLProcessingPipeline.d.ts

@@ -0,0 +1,38 @@
+import { type ComputedRef, type MaybeRef, type Ref, type ShallowRef } from 'vue';
+import type { ProcessingEvent, ProcessingStream } from './useMLProcessingStatus.js';
+import type { ProcessingTask } from '../types/asset.js';
+export interface UseMLProcessingPipelineReturn {
+    tasks: Ref<ProcessingTask[]>;
+    loading: Ref<boolean>;
+    stream: ShallowRef<ProcessingStream | null>;
+    taskEventMap: ComputedRef<Map<string, ProcessingEvent>>;
+    pipelineStatus: ComputedRef<'queued' | 'running' | 'succeeded' | 'failed' | 'awaiting_input'>;
+    pipelineElapsed: Ref<string>;
+    completedCount: ComputedRef<number>;
+    totalSteps: ComputedRef<number>;
+    hasFailedSteps: ComputedRef<boolean>;
+    hasPendingInputSteps: ComputedRef<boolean>;
+    progressPercent: ComputedRef<number>;
+    expandedSteps: Ref<Set<string>>;
+    pipelineSchema: Ref<Record<string, Record<string, any>>>;
+    toggleStep: (taskId: string) => void;
+    fetchTasks: () => Promise<void>;
+    configureTask: (taskId: string, options: Record<string, any>) => Promise<void>;
+    triggerProcessing: (stepOptions?: Record<string, Record<string, any>>) => Promise<void>;
+    /** Retries a single failed task. Throws with the backend message on 400 (budget exhausted, wrong status, etc.). */
+    retryTask: (taskId: string) => Promise<void>;
+    /** Returns the upstream task currently blocking `taskId` (e.g. a `pending_input` step). Null if nothing upstream is blocking. */
+    getBlocker: (taskId: string) => ProcessingTask | null;
+    /** Tasks split by pipeline: the asset's own pipeline + one group per rendition. */
+    groupedTasks: ComputedRef<{
+        assetTasks: ProcessingTask[];
+        renditionGroups: {
+            renditionId: string;
+            tasks: ProcessingTask[];
+        }[];
+    }>;
+    /** First step currently waiting on user input. Drives the AWAITING_INPUT banner. */
+    firstPendingInputTask: ComputedRef<ProcessingTask | null>;
+    cleanup: () => void;
+}
+export declare function useMLProcessingPipeline(assetId: MaybeRef<string>, assetStatus?: MaybeRef<string | null | undefined>): UseMLProcessingPipelineReturn;

package/dist/runtime/composables/useMLProcessingPipeline.js

@@ -0,0 +1,258 @@
+import {
+  computed,
+  onUnmounted,
+  ref,
+  shallowRef,
+  toValue,
+  watch
+} from "vue";
+import { $fetch } from "ofetch";
+import { useMLProcessingStatus } from "./useMLProcessingStatus.js";
+import { RENDITION_PIPELINE, useMLProcessingStrategies } from "./useMLProcessingStrategies.js";
+import { useElapsedTimer } from "./useElapsedTimer.js";
+export function useMLProcessingPipeline(assetId, assetStatus) {
+  const tasks = ref([]);
+  const loading = ref(false);
+  const stream = shallowRef(null);
+  const expandedSteps = ref(/* @__PURE__ */ new Set());
+  const pipelineSchema = ref({});
+  const { track, closeAll } = useMLProcessingStatus();
+  const { getPipeline } = useMLProcessingStrategies();
+  async function fetchTasks() {
+    const id = toValue(assetId);
+    if (!id) return;
+    loading.value = true;
+    try {
+      const result = await $fetch(
+        `/api/media-library/manage/processing/assets/${encodeURIComponent(id)}/tasks`
+      );
+      const raw = Array.isArray(result) ? result : result.items ?? [];
+      tasks.value = sortByPipeline(raw);
+      if (!Array.isArray(result) && result.pipeline_steps_schema) {
+        pipelineSchema.value = result.pipeline_steps_schema;
+      }
+    } catch {
+      tasks.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }
+  function sortByPipeline(raw, explicitPipeline) {
+    if (raw.length < 2) return raw;
+    let pipeline = explicitPipeline ?? [];
+    if (!pipeline.length) {
+      const taskTypes = raw.map((t) => t.task_type);
+      const allKinds = [
+        "image",
+        "image_batch",
+        "video",
+        "audio",
+        "document",
+        "archive",
+        "font",
+        "model_3d",
+        "web_app",
+        "other"
+      ];
+      let bestPipeline = [];
+      for (const kind of allKinds) {
+        const candidate = getPipeline(kind);
+        if (taskTypes.every((t) => candidate.includes(t)) && candidate.length >= bestPipeline.length) {
+          bestPipeline = candidate;
+        }
+      }
+      pipeline = bestPipeline;
+    }
+    if (!pipeline.length) return raw;
+    return [...raw].sort((a, b) => {
+      const ai = pipeline.indexOf(a.task_type);
+      const bi = pipeline.indexOf(b.task_type);
+      return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
+    });
+  }
+  async function configureTask(taskId, options) {
+    await $fetch(
+      `/api/media-library/manage/processing/tasks/${encodeURIComponent(taskId)}/configure`,
+      { method: "POST", body: { options } }
+    );
+    await fetchTasks();
+    openStream();
+  }
+  async function retryTask(taskId) {
+    await $fetch(
+      `/api/media-library/manage/processing/tasks/${encodeURIComponent(taskId)}/retry`,
+      { method: "POST" }
+    );
+    await fetchTasks();
+    openStream();
+  }
+  async function triggerProcessing(stepOptions) {
+    const id = toValue(assetId);
+    if (!id) return;
+    await $fetch(
+      `/api/media-library/manage/processing/assets/${encodeURIComponent(id)}/process`,
+      { method: "POST", body: stepOptions ? { stepOptions } : {} }
+    );
+    await fetchTasks();
+    openStream();
+  }
+  function openStream() {
+    const id = toValue(assetId);
+    if (!id) return;
+    if (stream.value) stream.value.close();
+    stream.value = track(id);
+  }
+  function closeStream() {
+    if (stream.value) {
+      stream.value.close();
+      stream.value = null;
+    }
+  }
+  const taskEventMap = computed(() => {
+    return stream.value?.taskEvents.value ?? /* @__PURE__ */ new Map();
+  });
+  const completedCount = computed(
+    () => tasks.value.filter((t) => effectiveStatus(t) === "succeeded").length
+  );
+  const totalSteps = computed(() => tasks.value.length);
+  const hasFailedSteps = computed(
+    () => tasks.value.some((t) => effectiveStatus(t) === "failed")
+  );
+  const hasPendingInputSteps = computed(
+    () => tasks.value.some((t) => effectiveStatus(t) === "pending_input")
+  );
+  const pipelineStatus = computed(() => {
+    const asset = toValue(assetStatus)?.toLowerCase();
+    if (asset === "ready") return "succeeded";
+    if (asset === "failed") return "failed";
+    if (asset === "awaiting_input") return "awaiting_input";
+    if (!tasks.value.length) return asset === "processing" ? "running" : "queued";
+    if (hasFailedSteps.value) return "failed";
+    if (completedCount.value === totalSteps.value) return "succeeded";
+    const hasRunning = tasks.value.some((t) => {
+      const sse = taskEventMap.value.get(t.id);
+      const status = (sse?.status ?? t.status)?.toLowerCase();
+      return status === "running";
+    });
+    if (hasRunning) return "running";
+    if (hasPendingInputSteps.value) return "awaiting_input";
+    if (completedCount.value > 0) return "running";
+    return "queued";
+  });
+  const progressPercent = computed(() => {
+    if (!totalSteps.value) return 0;
+    return Math.round(completedCount.value / totalSteps.value * 100);
+  });
+  const pipelineStartedAt = computed(() => {
+    const first = tasks.value.find((t) => t.started_at);
+    return first?.started_at ?? null;
+  });
+  const pipelineIsRunning = computed(
+    () => pipelineStatus.value === "running"
+  );
+  const { elapsed: pipelineElapsed } = useElapsedTimer(pipelineStartedAt, pipelineIsRunning);
+  function effectiveStatus(t) {
+    const sse = taskEventMap.value.get(t.id);
+    return (sse?.status ?? t.status ?? "").toLowerCase();
+  }
+  const groupedTasks = computed(() => {
+    const assetTasks = [];
+    const byRendition = /* @__PURE__ */ new Map();
+    for (const t of tasks.value) {
+      const rid = t.rendition_id ?? t.renditionId ?? null;
+      if (!rid) {
+        assetTasks.push(t);
+      } else {
+        const list = byRendition.get(rid) ?? [];
+        list.push(t);
+        byRendition.set(rid, list);
+      }
+    }
+    const renditionGroups = Array.from(byRendition.entries()).map(([renditionId, list]) => ({
+      renditionId,
+      tasks: sortByPipeline(list, RENDITION_PIPELINE)
+    }));
+    return { assetTasks, renditionGroups };
+  });
+  const firstPendingInputTask = computed(
+    () => tasks.value.find((t) => effectiveStatus(t) === "pending_input") ?? null
+  );
+  function getBlocker(taskId) {
+    const target = tasks.value.find((t) => t.id === taskId);
+    if (!target) return null;
+    const targetRid = target.rendition_id ?? target.renditionId ?? null;
+    const groups = groupedTasks.value;
+    const group = targetRid ? groups.renditionGroups.find((g) => g.renditionId === targetRid)?.tasks ?? [] : groups.assetTasks;
+    const idx = group.findIndex((t) => t.id === taskId);
+    if (idx <= 0) return null;
+    for (let i = idx - 1; i >= 0; i--) {
+      const status = effectiveStatus(group[i]);
+      if (status === "succeeded" || status === "" && group[i].metadata_payload?.skipped) continue;
+      return group[i];
+    }
+    return null;
+  }
+  function toggleStep(taskId) {
+    const next = new Set(expandedSteps.value);
+    if (next.has(taskId)) next.delete(taskId);
+    else next.add(taskId);
+    expandedSteps.value = next;
+  }
+  watch(tasks, (list) => {
+    const next = new Set(expandedSteps.value);
+    for (const t of list) {
+      if (effectiveStatus(t) === "failed") next.add(t.id);
+    }
+    expandedSteps.value = next;
+  });
+  watch(() => toValue(assetId), (id) => {
+    tasks.value = [];
+    expandedSteps.value = /* @__PURE__ */ new Set();
+    closeStream();
+    if (id) {
+      fetchTasks();
+    }
+  }, { immediate: true });
+  let refetchTimer = null;
+  watch(taskEventMap, () => {
+    if (refetchTimer) clearTimeout(refetchTimer);
+    refetchTimer = setTimeout(() => {
+      fetchTasks();
+    }, 500);
+  }, { deep: true });
+  watch(pipelineStatus, (status) => {
+    if (status === "running" || status === "queued") {
+      if (!stream.value) openStream();
+    }
+  }, { immediate: true });
+  function cleanup() {
+    closeStream();
+    closeAll();
+    if (refetchTimer) clearTimeout(refetchTimer);
+  }
+  onUnmounted(cleanup);
+  return {
+    tasks,
+    loading,
+    stream,
+    taskEventMap,
+    pipelineStatus,
+    pipelineElapsed,
+    completedCount,
+    totalSteps,
+    hasFailedSteps,
+    hasPendingInputSteps,
+    progressPercent,
+    expandedSteps,
+    pipelineSchema,
+    toggleStep,
+    fetchTasks,
+    configureTask,
+    triggerProcessing,
+    retryTask,
+    getBlocker,
+    groupedTasks,
+    firstPendingInputTask,
+    cleanup
+  };
+}

package/dist/runtime/composables/useMLProcessingStatus.d.ts

@@ -0,0 +1,34 @@
+import { type Ref } from 'vue';
+export interface ProcessingEvent {
+    assetId: string;
+    taskId?: string;
+    strategy?: string;
+    status: string;
+    step?: number | null;
+    totalSteps?: number | null;
+    error?: string | null;
+    metadata?: Record<string, any> | null;
+    timestamp?: string;
+    /** Pipeline-level fields */
+    completedSteps?: string[];
+}
+export interface ProcessingStream {
+    status: Ref<ProcessingEvent | null>;
+    isProcessing: Ref<boolean>;
+    isComplete: Ref<boolean>;
+    isFailed: Ref<boolean>;
+    error: Ref<boolean>;
+    progress: Ref<number>;
+    /** Per-task events from SSE for instant visual feedback */
+    taskEvents: Ref<Map<string, ProcessingEvent>>;
+    close: () => void;
+}
+/**
+ * Single tenant-wide SSE connection that multiplexes events to per-asset streams.
+ *
+ * Tracks both aggregate pipeline progress and per-task state for instant UI updates.
+ */
+export declare function useMLProcessingStatus(): {
+    track: (assetId: string) => ProcessingStream;
+    closeAll: () => void;
+};

package/dist/runtime/composables/useMLProcessingStatus.js

@@ -0,0 +1,100 @@
+import { ref } from "vue";
+export function useMLProcessingStatus() {
+  let source = null;
+  const streams = /* @__PURE__ */ new Map();
+  function ensureConnection() {
+    if (source && source.readyState !== EventSource.CLOSED) return;
+    if (typeof EventSource === "undefined") return;
+    source = new EventSource("/api/media-library/manage/processing/stream");
+    source.addEventListener("processing_status", (e) => {
+      const data = JSON.parse(e.data);
+      const assetId = data.assetId;
+      if (!assetId) return;
+      const s = streams.get(assetId);
+      if (!s) return;
+      if (data.status === "pipeline_complete") {
+        s.isProcessing.value = false;
+        s.isComplete.value = true;
+        s.isFailed.value = false;
+        s.progress.value = 100;
+        s.status.value = data;
+        return;
+      }
+      if (data.status === "pipeline_failed") {
+        s.isProcessing.value = false;
+        s.isComplete.value = false;
+        s.isFailed.value = true;
+        s.status.value = data;
+        return;
+      }
+      s.error.value = false;
+      s.isProcessing.value = true;
+      s.status.value = data;
+      if (data.taskId) {
+        const updated = new Map(s.taskEvents.value);
+        updated.set(data.taskId, data);
+        s.taskEvents.value = updated;
+      }
+      if (data.totalSteps && data.totalSteps > 0 && data.step != null) {
+        s.progress.value = Math.round(data.step / data.totalSteps * 100);
+      }
+    });
+    source.onerror = () => {
+      if (source?.readyState === EventSource.CLOSED) {
+        for (const [, s] of streams) {
+          if (s.isProcessing.value) {
+            s.isProcessing.value = false;
+            s.error.value = true;
+          }
+        }
+        source = null;
+      }
+    };
+  }
+  function track(assetId) {
+    if (streams.has(assetId)) {
+      const existing = streams.get(assetId);
+      existing.isProcessing.value = true;
+      existing.isComplete.value = false;
+      existing.isFailed.value = false;
+      existing.error.value = false;
+      ensureConnection();
+      return { ...existing, close: () => untrack(assetId) };
+    }
+    const status = ref(null);
+    const isProcessing = ref(true);
+    const isComplete = ref(false);
+    const isFailed = ref(false);
+    const error = ref(false);
+    const progress = ref(0);
+    const taskEvents = ref(/* @__PURE__ */ new Map());
+    if (typeof EventSource === "undefined") {
+      isProcessing.value = false;
+      error.value = true;
+      return { status, isProcessing, isComplete, isFailed, error, progress, taskEvents, close: () => {
+      } };
+    }
+    streams.set(assetId, { status, isProcessing, isComplete, isFailed, error, progress, taskEvents });
+    ensureConnection();
+    return { status, isProcessing, isComplete, isFailed, error, progress, taskEvents, close: () => untrack(assetId) };
+  }
+  function untrack(assetId) {
+    const s = streams.get(assetId);
+    if (s) {
+      s.isProcessing.value = false;
+      streams.delete(assetId);
+    }
+    if (streams.size === 0 && source) {
+      source.close();
+      source = null;
+    }
+  }
+  function closeAll() {
+    streams.clear();
+    if (source) {
+      source.close();
+      source = null;
+    }
+  }
+  return { track, closeAll };
+}

package/dist/runtime/composables/useMLProcessingStepper.d.ts

@@ -0,0 +1,32 @@
+import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
+import type { ProcessingTask, PipelineOptionSchema } from '../types/asset.js';
+export type StepStatus = 'pending' | 'configuring' | 'queued' | 'running' | 'succeeded' | 'failed' | 'skipped';
+export interface StepState {
+    name: string;
+    displayName: string;
+    index: number;
+    status: StepStatus;
+    task: ProcessingTask | null;
+    optionsSchema: Record<string, PipelineOptionSchema>;
+    userOptions: Record<string, any>;
+    isLocked: boolean;
+    isActive: boolean;
+    hasOptions: boolean;
+    error: string | null;
+}
+export interface UseMLProcessingStepperReturn {
+    steps: Ref<StepState[]>;
+    loading: Ref<boolean>;
+    currentStepIndex: Ref<number>;
+    currentStep: ComputedRef<StepState | null>;
+    allComplete: ComputedRef<boolean>;
+    hasAnyFailed: ComputedRef<boolean>;
+    progressPercent: ComputedRef<number>;
+    updateStepOptions: (stepName: string, options: Record<string, any>) => void;
+    runStep: (stepName: string) => Promise<void>;
+    skipStep: (stepName: string) => void;
+    retryStep: (stepName: string) => Promise<void>;
+    runRemaining: () => Promise<void>;
+    cleanup: () => void;
+}
+export declare function useMLProcessingStepper(assetId: MaybeRef<string>): UseMLProcessingStepperReturn;