nuxt-media-library 0.0.44

package/dist/runtime/composables/useMLProcessingStepper.js

@@ -0,0 +1,280 @@
+import {
+  computed,
+  onUnmounted,
+  ref,
+  toValue,
+  watch
+} from "vue";
+import { $fetch } from "ofetch";
+import { useMLProcessingStatus } from "./useMLProcessingStatus.js";
+function formatStepName(name) {
+  return name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function getDefaults(schema) {
+  const defaults = {};
+  for (const [key, opt] of Object.entries(schema)) {
+    if (opt.default !== void 0) defaults[key] = opt.default;
+  }
+  return defaults;
+}
+export function useMLProcessingStepper(assetId) {
+  const steps = ref([]);
+  const loading = ref(false);
+  const currentStepIndex = ref(0);
+  const { track, closeAll } = useMLProcessingStatus();
+  let stream = null;
+  async function fetchAndHydrate() {
+    const id = toValue(assetId);
+    if (!id) return;
+    loading.value = true;
+    try {
+      const res = await $fetch(
+        `/api/media-library/manage/processing/assets/${encodeURIComponent(id)}/tasks`
+      );
+      console.log(res);
+      const pipeline = res.pipeline ?? [];
+      const schemas = res.pipeline_steps_schema ?? res.pipelineStepsSchema ?? {};
+      const existingTasks = res.items ?? [];
+      const taskByType = /* @__PURE__ */ new Map();
+      for (const t of existingTasks) {
+        taskByType.set(t.task_type, t);
+      }
+      const built = pipeline.map((name, index) => {
+        const schema = schemas[name] ?? {};
+        const task = taskByType.get(name) ?? null;
+        const hasOptions = Object.keys(schema).length > 0;
+        let status = "pending";
+        let error = null;
+        if (task) {
+          const ts = task.status?.toLowerCase();
+          if (ts === "succeeded" || ts === "completed") status = "succeeded";
+          else if (ts === "failed") {
+            status = "failed";
+            error = task.last_error;
+          } else if (ts === "queued") status = "queued";
+          else if (ts === "running") status = "running";
+        }
+        return {
+          name,
+          displayName: formatStepName(name),
+          index,
+          status,
+          task,
+          optionsSchema: schema,
+          userOptions: getDefaults(schema),
+          isLocked: false,
+          isActive: false,
+          hasOptions,
+          error
+        };
+      });
+      steps.value = built;
+      console.log(steps.value);
+      recomputeLocks();
+      if (built.some((s) => s.status === "queued" || s.status === "running")) {
+        openStream();
+      }
+    } catch {
+      steps.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }
+  function recomputeLocks() {
+    const list = steps.value;
+    let firstPending = -1;
+    for (let i = 0; i < list.length; i++) {
+      if (i === 0) {
+        list[i].isLocked = false;
+      } else {
+        const prev = list[i - 1].status;
+        list[i].isLocked = prev !== "succeeded" && prev !== "skipped";
+      }
+      list[i].isActive = false;
+      if (firstPending === -1 && list[i].status !== "succeeded" && list[i].status !== "skipped") {
+        firstPending = i;
+      }
+    }
+    if (firstPending >= 0) {
+      currentStepIndex.value = firstPending;
+      const step = list[firstPending];
+      if (!step.isLocked && step.status !== "running") {
+        step.isActive = true;
+        step.status = step.status === "pending" ? "configuring" : step.status;
+      }
+    } else {
+      currentStepIndex.value = list.length;
+    }
+    steps.value = [...list];
+  }
+  function updateStepOptions(stepName, options) {
+    const step = steps.value.find((s) => s.name === stepName);
+    if (step) {
+      step.userOptions = { ...options };
+      steps.value = [...steps.value];
+    }
+  }
+  async function runStep(stepName) {
+    const id = toValue(assetId);
+    if (!id) return;
+    const step = steps.value.find((s) => s.name === stepName);
+    if (!step || step.isLocked) return;
+    step.status = "running";
+    step.isActive = false;
+    step.error = null;
+    steps.value = [...steps.value];
+    try {
+      await $fetch(
+        `/api/media-library/manage/processing/assets/${encodeURIComponent(id)}/process`,
+        {
+          method: "POST",
+          body: {
+            steps: [stepName],
+            stepOptions: Object.keys(step.userOptions).length > 0 ? { [stepName]: step.userOptions } : void 0
+          }
+        }
+      );
+      openStream();
+    } catch (err) {
+      step.status = "failed";
+      step.error = err?.data?.detail ?? err?.message ?? "Failed to trigger step";
+      steps.value = [...steps.value];
+      recomputeLocks();
+    }
+  }
+  function skipStep(stepName) {
+    const step = steps.value.find((s) => s.name === stepName);
+    if (!step || step.isLocked) return;
+    step.status = "skipped";
+    step.error = null;
+    recomputeLocks();
+  }
+  async function retryStep(stepName) {
+    const step = steps.value.find((s) => s.name === stepName);
+    if (!step) return;
+    step.status = "configuring";
+    step.error = null;
+    step.isActive = true;
+    steps.value = [...steps.value];
+  }
+  async function runRemaining() {
+    const pending = steps.value.filter(
+      (s) => s.status !== "succeeded" && s.status !== "skipped"
+    );
+    for (const step of pending) {
+      if (step.isLocked) continue;
+      await runStep(step.name);
+      await waitForStep(step.name);
+      if (step.status === "failed") break;
+    }
+  }
+  function waitForStep(stepName) {
+    return new Promise((resolve) => {
+      const check = setInterval(() => {
+        const step = steps.value.find((s) => s.name === stepName);
+        if (!step || step.status === "succeeded" || step.status === "failed" || step.status === "skipped") {
+          clearInterval(check);
+          resolve();
+        }
+      }, 500);
+    });
+  }
+  let sseWatchStop = null;
+  function openStream() {
+    const id = toValue(assetId);
+    if (!id || stream) return;
+    stream = track(id);
+    let debounce = null;
+    sseWatchStop = watch(stream.taskEvents, () => {
+      if (debounce) clearTimeout(debounce);
+      debounce = setTimeout(() => refreshTasks(), 500);
+    }, { deep: true });
+  }
+  async function refreshTasks() {
+    const id = toValue(assetId);
+    if (!id) return;
+    try {
+      const res = await $fetch(
+        `/api/media-library/manage/processing/assets/${encodeURIComponent(id)}/tasks`
+      );
+      const existingTasks = res.items ?? [];
+      const taskByType = /* @__PURE__ */ new Map();
+      for (const t of existingTasks) {
+        taskByType.set(t.task_type, t);
+      }
+      for (const step of steps.value) {
+        const task = taskByType.get(step.name);
+        if (!task) continue;
+        step.task = task;
+        const ts = task.status?.toLowerCase();
+        if (ts === "succeeded" || ts === "completed") {
+          step.status = "succeeded";
+          step.error = null;
+        } else if (ts === "failed") {
+          step.status = "failed";
+          step.error = task.last_error;
+        } else if (ts === "queued") {
+          step.status = "queued";
+        } else if (ts === "running") {
+          step.status = "running";
+        }
+      }
+      recomputeLocks();
+    } catch {
+    }
+  }
+  const currentStep = computed(
+    () => currentStepIndex.value < steps.value.length ? steps.value[currentStepIndex.value] : null
+  );
+  const allComplete = computed(
+    () => steps.value.length > 0 && steps.value.every((s) => s.status === "succeeded" || s.status === "skipped")
+  );
+  const hasAnyFailed = computed(
+    () => steps.value.some((s) => s.status === "failed")
+  );
+  const progressPercent = computed(() => {
+    if (!steps.value.length) return 0;
+    const done = steps.value.filter((s) => s.status === "succeeded" || s.status === "skipped").length;
+    return Math.round(done / steps.value.length * 100);
+  });
+  watch(() => toValue(assetId), () => {
+    steps.value = [];
+    currentStepIndex.value = 0;
+    if (sseWatchStop) {
+      sseWatchStop();
+      sseWatchStop = null;
+    }
+    if (stream) {
+      stream.close();
+      stream = null;
+    }
+    void fetchAndHydrate();
+  }, { immediate: true });
+  function cleanup() {
+    if (sseWatchStop) {
+      sseWatchStop();
+      sseWatchStop = null;
+    }
+    if (stream) {
+      stream.close();
+      stream = null;
+    }
+    closeAll();
+  }
+  onUnmounted(cleanup);
+  return {
+    steps,
+    loading,
+    currentStepIndex,
+    currentStep,
+    allComplete,
+    hasAnyFailed,
+    progressPercent,
+    updateStepOptions,
+    runStep,
+    skipStep,
+    retryStep,
+    runRemaining,
+    cleanup
+  };
+}

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

@@ -0,0 +1,7 @@
+import { AssetKind } from '../types/resourcePolicy.js';
+export declare const RENDITION_PIPELINE: string[];
+export declare const useMLProcessingStrategies: () => {
+    getPipeline: (kind: AssetKind) => string[];
+    isConfigurable: (stepName: string) => boolean;
+    getDefaultOptions: (stepName: string) => Record<string, any>;
+};

package/dist/runtime/composables/useMLProcessingStrategies.js

@@ -0,0 +1,47 @@
+import { AssetKind } from "../types/resourcePolicy.js";
+const PIPELINES = {
+  [AssetKind.Image]: ["virus_scan", "image_derive", "relocate_to_bucket"],
+  [AssetKind.ImageBatch]: ["virus_scan", "zip_image_extract"],
+  [AssetKind.Video]: ["virus_scan", "video_transcode", "video_adaptive_stream", "relocate_to_volume", "video_thumbnail", "backup"],
+  [AssetKind.Audio]: ["virus_scan", "relocate_to_volume", "backup"],
+  [AssetKind.Document]: ["virus_scan", "relocate_to_bucket"],
+  [AssetKind.Archive]: ["virus_scan", "relocate_to_bucket"],
+  [AssetKind.Font]: ["virus_scan", "relocate_to_bucket"],
+  [AssetKind.Model3D]: ["virus_scan", "relocate_to_bucket"],
+  [AssetKind.WebApp]: ["virus_scan", "deploy_web_app"],
+  [AssetKind.Other]: ["virus_scan", "backup"]
+};
+export const RENDITION_PIPELINE = ["virus_scan", "relocate_to_bucket", "backup"];
+const CONFIGURABLE_STEPS = {
+  image_derive: {
+    defaultOptions: () => ({ formats: ["webp"], sizes: [640], quality: 80 })
+  },
+  video_transcode: {
+    defaultOptions: () => ({ codec: "h264", resolution: "1920x1080", bitrate: "5000k" })
+  },
+  video_thumbnail: {
+    defaultOptions: () => ({ timestamp: 1, sizes: [320], quality: 80 })
+  },
+  video_adaptive_stream: {
+    defaultOptions: () => ({ format: "hls", resolutions: ["1920x1080", "1280x720", "854x480"] })
+  },
+  backup: {
+    defaultOptions: () => ({ compression: 6, destination: "" })
+  }
+};
+export const useMLProcessingStrategies = () => {
+  const getPipeline = (kind) => {
+    return PIPELINES[kind] ?? PIPELINES[AssetKind.Other];
+  };
+  const isConfigurable = (stepName) => {
+    return stepName in CONFIGURABLE_STEPS;
+  };
+  const getDefaultOptions = (stepName) => {
+    return CONFIGURABLE_STEPS[stepName]?.defaultOptions() ?? {};
+  };
+  return {
+    getPipeline,
+    isConfigurable,
+    getDefaultOptions
+  };
+};

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

@@ -0,0 +1,5 @@
+export declare function useMLRepeater<T>(list: T[]): {
+    add: (item: T) => number;
+    removeAt: (idx: number) => T[];
+    move: (from: number, to: number) => void;
+};

package/dist/runtime/composables/useMLRepeater.js

@@ -0,0 +1,11 @@
+export function useMLRepeater(list) {
+  const add = (item) => list.push(item);
+  const removeAt = (idx) => list.splice(idx, 1);
+  const move = (from, to) => {
+    if (to < 0 || to >= list.length) return;
+    const removed = list.splice(from, 1);
+    if (removed.length === 0) return;
+    list.splice(to, 0, ...removed);
+  };
+  return { add, removeAt, move };
+}

package/dist/runtime/css/index.css

@@ -0,0 +1 @@
+@source "../components/**/*.{vue,js,ts}";

package/dist/runtime/index.d.ts

@@ -0,0 +1,13 @@
+export * from './composables/useMLChunkUploader.js';
+export * from './composables/useMLProcessingStatus.js';
+export * from './composables/useMLProcessingPipeline.js';
+export * from './composables/useMLProcessingStepper.js';
+export * from './composables/useMLAssetManager.js';
+export * from './composables/useMLAssetLibrary.js';
+export * from './composables/useMLAssetManagerPreview.js';
+export * from './composables/useElapsedTimer.js';
+export * from './composables/resourcePolicy/useMLResourcePolicy.js';
+export * from './types/resourcePolicy.js';
+export * from './types/uploader.js';
+export * from './types/asset.js';
+export * from './utils/uploader/uploader.js';

package/dist/runtime/index.js

@@ -0,0 +1,13 @@
+export * from "./composables/useMLChunkUploader.js";
+export * from "./composables/useMLProcessingStatus.js";
+export * from "./composables/useMLProcessingPipeline.js";
+export * from "./composables/useMLProcessingStepper.js";
+export * from "./composables/useMLAssetManager.js";
+export * from "./composables/useMLAssetLibrary.js";
+export * from "./composables/useMLAssetManagerPreview.js";
+export * from "./composables/useElapsedTimer.js";
+export * from "./composables/resourcePolicy/useMLResourcePolicy.js";
+export * from "./types/resourcePolicy.js";
+export * from "./types/uploader.js";
+export * from "./types/asset.js";
+export * from "./utils/uploader/uploader.js";

package/dist/runtime/plugins/asset-direcetive-client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/asset-direcetive-client.js

@@ -0,0 +1,64 @@
+import { defineNuxtPlugin } from "#app";
+import { watch } from "vue";
+import { useMLAssetPreview } from "../composables/useMLAssetPreview.js";
+function applyAssetToElement(el, asset, arg) {
+  if (!asset || !asset.url) return;
+  if (arg === "bg") {
+    el.style.backgroundImage = `url("${asset.url}")`;
+    if (!el.style.backgroundSize) el.style.backgroundSize = "cover";
+    if (!el.style.backgroundPosition) el.style.backgroundPosition = "center";
+  } else {
+    const imgEl = el;
+    imgEl.src = asset.url;
+    const altFromMeta = typeof asset.metadata?.alt === "string" ? asset.metadata.alt : void 0;
+    if (!imgEl.alt && altFromMeta) {
+      imgEl.alt = altFromMeta;
+    }
+  }
+}
+function setupWatcher(el, id, arg) {
+  if (el.__assetStopHandle__) {
+    el.__assetStopHandle__();
+    el.__assetStopHandle__ = void 0;
+  }
+  if (!id) return;
+  const store = useMLAssetPreview();
+  el.__assetStopHandle__ = watch(
+    () => store.getAsset(id),
+    (asset) => {
+      applyAssetToElement(el, asset, arg);
+    },
+    { immediate: true }
+  );
+}
+const assetDirective = {
+  mounted(el, binding) {
+    if (import.meta.server) return;
+    const id = binding.value || "";
+    const arg = binding.arg;
+    el.__assetId__ = id;
+    const store = useMLAssetPreview();
+    store.register(id);
+    setupWatcher(el, id, arg);
+  },
+  updated(el, binding) {
+    if (import.meta.server) return;
+    const newId = binding.value || "";
+    const oldId = binding.oldValue || "";
+    const arg = binding.arg;
+    if (newId === oldId) return;
+    el.__assetId__ = newId;
+    const store = useMLAssetPreview();
+    store.register(newId);
+    setupWatcher(el, newId, arg);
+  },
+  unmounted(el) {
+    if (el.__assetStopHandle__) {
+      el.__assetStopHandle__();
+      el.__assetStopHandle__ = void 0;
+    }
+  }
+};
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("asset", assetDirective);
+});

package/dist/runtime/plugins/config.d.ts

@@ -0,0 +1,13 @@
+import type { ChunkUploaderConfig } from '../types/uploader.js';
+declare module '#app' {
+    interface NuxtApp {
+        $chunkUploader: ChunkUploaderConfig;
+    }
+}
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $chunkUploader: ChunkUploaderConfig;
+    }
+}
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/config.js

@@ -0,0 +1,23 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  const publicCfg = config.public?.mediaLibrary;
+  const routes = publicCfg?.routes;
+  if (!routes?.createSession || !routes?.getSession || !routes?.uploadPart || !routes?.finalize) {
+    throw new Error("ChunkUploader routes are required. Please provide createSession, getSession, uploadPart, and finalize.");
+  }
+  const cfg = {
+    baseURL: publicCfg?.baseURL ?? "",
+    routes,
+    proxyUploads: publicCfg?.proxyUploads ?? true,
+    partSize: publicCfg?.partSize ?? 8 * 1024 * 1024,
+    concurrency: publicCfg?.concurrency ?? 3,
+    checksum: {
+      algorithm: publicCfg?.checksum?.algorithm ?? "SHA-256",
+      perPart: publicCfg?.checksum?.perPart ?? true,
+      final: publicCfg?.checksum?.final ?? true
+    },
+    headers: publicCfg?.headers ?? {}
+  };
+  nuxtApp.provide("chunkUploader", cfg);
+});