nuxt-media-library 0.0.44

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

@@ -0,0 +1,30 @@
+import { type MaybeRef, type Ref, type ShallowRef, type ComputedRef } from 'vue';
+import type { ProcessingStream } from './useMLProcessingStatus.js';
+import type { AssetDetail, ProcessingTask, Rendition, AvailableSteps, PipelineConfig } from '../types/asset.js';
+export interface UseMLAssetManagerReturn {
+    assets: Ref<Map<string, AssetDetail>>;
+    loading: Ref<boolean>;
+    error: Ref<string | null>;
+    selectedAssetId: Ref<string | null>;
+    selectedAsset: ComputedRef<AssetDetail | null>;
+    select: (assetId: string | null) => void;
+    availableSteps: Ref<AvailableSteps | null>;
+    selectedPipeline: ComputedRef<PipelineConfig | null>;
+    fetchAvailableSteps: () => Promise<void>;
+    /** SSE streams for all assets currently being processed */
+    processingStreams: Map<string, ProcessingStream>;
+    processingTasks: Ref<ProcessingTask[]>;
+    processingTasksLoading: Ref<boolean>;
+    processingStream: ShallowRef<ProcessingStream | null>;
+    fetchProcessingTasks: (assetId: string) => Promise<void>;
+    retryTask: (taskId: string) => Promise<void>;
+    triggerProcessing: (assetId: string, stepOptions?: Record<string, Record<string, any>>) => Promise<void>;
+    renditions: Ref<Rendition[]>;
+    renditionsLoading: Ref<boolean>;
+    fetchRenditions: (assetId: string) => Promise<void>;
+    deleteAsset: (assetId: string) => Promise<void>;
+    updateAsset: (assetId: string, patch: Partial<Pick<AssetDetail, 'visibility' | 'title'>> & Record<string, any>) => Promise<void>;
+    refresh: (assetId?: string) => Promise<void>;
+    cleanup: () => void;
+}
+export declare function useMLAssetManager(assetIds: MaybeRef<string[]>): UseMLAssetManagerReturn;

package/dist/runtime/composables/useMLAssetManager.js

@@ -0,0 +1,229 @@
+import { computed, onUnmounted, ref, shallowReactive, shallowRef, watch, toValue } from "vue";
+import { $fetch } from "ofetch";
+import { useMLProcessingStatus } from "./useMLProcessingStatus.js";
+export function useMLAssetManager(assetIds) {
+  const assets = ref(/* @__PURE__ */ new Map());
+  const loading = ref(false);
+  const error = ref(null);
+  const selectedAssetId = ref(null);
+  const selectedAsset = computed(() => {
+    if (!selectedAssetId.value) return null;
+    return assets.value.get(selectedAssetId.value) ?? null;
+  });
+  const availableSteps = ref(null);
+  const selectedPipeline = computed(() => {
+    if (!availableSteps.value || !selectedAsset.value) return null;
+    const kind = selectedAsset.value.kind?.toLowerCase();
+    return availableSteps.value[kind] ?? null;
+  });
+  const processingStreams = shallowReactive(/* @__PURE__ */ new Map());
+  const processingTasks = ref([]);
+  const processingTasksLoading = ref(false);
+  const processingStream = shallowRef(null);
+  const renditions = ref([]);
+  const renditionsLoading = ref(false);
+  const { track: trackProcessing, closeAll: closeAllProcessing } = useMLProcessingStatus();
+  function syncProcessingStreams() {
+    for (const [id, asset] of assets.value) {
+      if (asset.status === "processing" && !processingStreams.has(id)) {
+        const stream = trackProcessing(id);
+        processingStreams.set(id, stream);
+        watch(() => stream.isComplete.value, (done) => {
+          if (done) {
+            processingStreams.delete(id);
+            refreshSingle(id);
+          }
+        });
+        watch(() => stream.error.value, (err) => {
+          if (err) {
+            processingStreams.delete(id);
+            refreshSingle(id);
+          }
+        });
+        watch(() => stream.isFailed.value, (failed) => {
+          if (failed) {
+            processingStreams.delete(id);
+            refreshSingle(id);
+          }
+        });
+      }
+    }
+    for (const [id] of processingStreams) {
+      const asset = assets.value.get(id);
+      if (!asset || asset.status !== "processing") {
+        processingStreams.get(id)?.close();
+        processingStreams.delete(id);
+      }
+    }
+  }
+  async function fetchAssets(ids) {
+    if (!ids.length) return;
+    loading.value = true;
+    error.value = null;
+    try {
+      const result = await $fetch("/api/media-library/manage/assets/resolve", {
+        method: "POST",
+        body: { assetIds: ids }
+      });
+      for (const item of result.items ?? []) {
+        if (item.status === "ok" && item.asset) {
+          assets.value.set(item.asset.id, item.asset);
+        }
+      }
+      syncProcessingStreams();
+    } catch (err) {
+      error.value = err?.message ?? "Failed to load assets";
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function refreshSingle(assetId) {
+    try {
+      const asset = await $fetch(`/api/media-library/manage/assets/${encodeURIComponent(assetId)}`);
+      assets.value.set(assetId, asset);
+      syncProcessingStreams();
+    } catch {
+    }
+  }
+  async function refresh(assetId) {
+    if (assetId) {
+      await refreshSingle(assetId);
+    } else {
+      await fetchAssets(toValue(assetIds));
+    }
+  }
+  function select(assetId) {
+    selectedAssetId.value = assetId;
+  }
+  async function fetchAvailableSteps() {
+    if (availableSteps.value) return;
+    try {
+      const result = await $fetch(
+        "/api/media-library/manage/resource-policies/pipelines/available-steps"
+      );
+      availableSteps.value = result;
+    } catch {
+    }
+  }
+  watch(selectedAssetId, (newId) => {
+    processingTasks.value = [];
+    renditions.value = [];
+    if (newId && processingStreams.has(newId)) {
+      processingStream.value = processingStreams.get(newId);
+    } else {
+      processingStream.value = null;
+    }
+  });
+  async function fetchProcessingTasks(assetId) {
+    processingTasksLoading.value = true;
+    try {
+      const result = await $fetch(
+        `/api/media-library/manage/processing/assets/${encodeURIComponent(assetId)}/tasks`
+      );
+      processingTasks.value = Array.isArray(result) ? result : result.items ?? [];
+    } catch {
+      processingTasks.value = [];
+    } finally {
+      processingTasksLoading.value = false;
+    }
+  }
+  async function retryTask(_taskId) {
+    if (!selectedAssetId.value) return;
+    await $fetch(`/api/media-library/manage/processing/assets/${encodeURIComponent(selectedAssetId.value)}/process`, {
+      method: "POST"
+    });
+    await fetchProcessingTasks(selectedAssetId.value);
+  }
+  async function triggerProcessing(assetId, stepOptions) {
+    await $fetch(`/api/media-library/manage/processing/assets/${encodeURIComponent(assetId)}/process`, {
+      method: "POST",
+      body: stepOptions ? { stepOptions } : {}
+    });
+    await fetchProcessingTasks(assetId);
+    if (processingStreams.has(assetId)) {
+      processingStreams.get(assetId).close();
+    }
+    const stream = trackProcessing(assetId);
+    processingStreams.set(assetId, stream);
+    if (assetId === selectedAssetId.value) {
+      processingStream.value = stream;
+    }
+  }
+  async function fetchRenditions(assetId) {
+    const asset = assets.value.get(assetId);
+    renditions.value = asset?.renditions ?? [];
+  }
+  async function updateAsset(assetId, patch) {
+    const updated = await $fetch(
+      `/api/media-library/manage/assets/${encodeURIComponent(assetId)}`,
+      { method: "PATCH", body: patch }
+    );
+    if (updated && typeof updated === "object" && "id" in updated) {
+      assets.value.set(assetId, updated);
+    } else {
+      await refreshSingle(assetId);
+    }
+  }
+  async function deleteAsset(assetId) {
+    await $fetch(`/api/media-library/manage/assets/${encodeURIComponent(assetId)}`, {
+      method: "DELETE"
+    });
+    assets.value.delete(assetId);
+    if (processingStreams.has(assetId)) {
+      processingStreams.get(assetId).close();
+      processingStreams.delete(assetId);
+    }
+    if (selectedAssetId.value === assetId) {
+      selectedAssetId.value = null;
+      processingStream.value = null;
+    }
+  }
+  function cleanup() {
+    closeAllProcessing();
+    for (const [, stream] of processingStreams) {
+      stream.close();
+    }
+    processingStreams.clear();
+    processingStream.value = null;
+  }
+  watch(() => toValue(assetIds), async (ids) => {
+    const newIds = ids.filter((id) => !assets.value.has(id));
+    for (const key of assets.value.keys()) {
+      if (!ids.includes(key)) assets.value.delete(key);
+    }
+    if (newIds.length) await fetchAssets(newIds);
+    if (selectedAssetId.value && !ids.includes(selectedAssetId.value)) {
+      selectedAssetId.value = ids[0] || null;
+    }
+    if (!selectedAssetId.value && ids.length) {
+      selectedAssetId.value = ids[0] || null;
+    }
+  }, { immediate: true });
+  fetchAvailableSteps();
+  onUnmounted(cleanup);
+  return {
+    assets,
+    loading,
+    error,
+    selectedAssetId,
+    selectedAsset,
+    select,
+    availableSteps,
+    selectedPipeline,
+    fetchAvailableSteps,
+    processingStreams,
+    processingTasks,
+    processingTasksLoading,
+    processingStream,
+    fetchProcessingTasks,
+    retryTask,
+    triggerProcessing,
+    renditions,
+    renditionsLoading,
+    fetchRenditions,
+    deleteAsset,
+    updateAsset,
+    refresh,
+    cleanup
+  };
+}

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

@@ -0,0 +1,28 @@
+import { type Ref, type ComputedRef } from "vue";
+import type { AssetDetail } from "../types/asset.js";
+export type PreviewSourceKind = "video" | "image" | "audio" | "document" | "fallback";
+export type PreviewSourceType = "hls" | "dash" | "progressive" | "image" | "audio" | "document" | "fallback";
+export interface PreviewSource {
+    id: string;
+    label: string;
+    sublabel?: string;
+    kind: PreviewSourceKind;
+    type: PreviewSourceType;
+    src: string | null;
+    thumb: string | null;
+    meta?: string;
+    group?: string;
+    renditionId?: string | null;
+    variantName?: string | null;
+}
+export interface UseMLAssetManagerPreviewReturn {
+    sources: ComputedRef<PreviewSource[]>;
+    groups: ComputedRef<Array<{
+        label: string;
+        items: PreviewSource[];
+    }>>;
+    selected: ComputedRef<PreviewSource | null>;
+    selectedId: Ref<string | null>;
+    select: (id: string) => void;
+}
+export declare function useMLAssetManagerPreview(assetRef: Ref<AssetDetail | null | undefined>): UseMLAssetManagerPreviewReturn;

package/dist/runtime/composables/useMLAssetManagerPreview.js

@@ -0,0 +1,232 @@
+import { computed, ref, watch } from "vue";
+const RENDITION_LABELS = {
+  hls: "HLS",
+  dash: "DASH",
+  mp4: "MP4",
+  thumbnail: "Thumbnail",
+  web: "Web",
+  image_derive: "Image",
+  original: "Original",
+  backup: "Backup",
+  subtitle: "Subtitle",
+  transcript: "Transcript"
+};
+const NON_IMAGE_RENDITION_TYPES = /* @__PURE__ */ new Set([
+  "hls",
+  "dash",
+  "mp4",
+  "subtitle",
+  "transcript",
+  "backup",
+  "original"
+]);
+function isImageRendition(r) {
+  return !NON_IMAGE_RENDITION_TYPES.has(r.renditionType);
+}
+function isReady(r) {
+  const s = (r.status || "").toLowerCase();
+  return s === "ready" || s === "completed" || s === "succeeded";
+}
+function readyVariants(r) {
+  return (r.variants ?? []).filter((v) => !!v.previewUrl);
+}
+function bestThumb(asset) {
+  const thumbRendition = asset.renditions?.find(
+    (r) => r.renditionType === "thumbnail" && isReady(r)
+  );
+  if (!thumbRendition) return null;
+  const variant = thumbRendition.variants?.find((v) => v.previewUrl) ?? null;
+  return variant?.previewUrl ?? thumbRendition.previewUrl ?? null;
+}
+function kindForOriginal(asset) {
+  const k = (asset.kind || "").toLowerCase();
+  const mime = (asset.mime_type || asset.mimeType || "").toLowerCase();
+  if (k === "image" || mime.startsWith("image/")) return "image";
+  if (k === "video" || mime.startsWith("video/")) return "video";
+  if (k === "audio" || mime.startsWith("audio/")) return "audio";
+  if (k === "document" || mime === "application/pdf" || mime.startsWith("text/") || mime === "application/json") return "document";
+  return "fallback";
+}
+function variantMeta(v) {
+  const parts = [];
+  if (v.width && v.height) parts.push(`${v.width}\xD7${v.height}`);
+  if (v.bitrateKbps) parts.push(`${v.bitrateKbps} kbps`);
+  return parts.length ? parts.join(" \xB7 ") : void 0;
+}
+function buildSources(asset) {
+  if (!asset) return [];
+  const out = [];
+  const fallbackThumb = bestThumb(asset);
+  const renditions = asset.renditions ?? [];
+  for (const r of renditions) {
+    if (!isReady(r) || !r.previewUrl) continue;
+    if (r.renditionType === "hls" || r.renditionType === "dash") {
+      out.push({
+        id: `${r.id}:master`,
+        label: `${RENDITION_LABELS[r.renditionType] ?? r.renditionType.toUpperCase()} (auto)`,
+        sublabel: "Adaptive",
+        kind: "video",
+        type: r.renditionType,
+        src: r.previewUrl,
+        thumb: fallbackThumb,
+        renditionId: r.id
+      });
+      for (const v of readyVariants(r)) {
+        out.push({
+          id: `${r.id}:${v.name}`,
+          label: `${RENDITION_LABELS[r.renditionType] ?? r.renditionType.toUpperCase()} \xB7 ${v.name}`,
+          sublabel: variantMeta(v),
+          kind: "video",
+          type: r.renditionType,
+          src: v.previewUrl,
+          thumb: fallbackThumb,
+          meta: variantMeta(v),
+          renditionId: r.id,
+          variantName: v.name
+        });
+      }
+    }
+  }
+  for (const r of renditions) {
+    if (!isReady(r)) continue;
+    if (r.renditionType === "mp4") {
+      const variants = readyVariants(r);
+      if (variants.length) {
+        for (const v of variants) {
+          out.push({
+            id: `${r.id}:${v.name}`,
+            label: `MP4 \xB7 ${v.name}`,
+            sublabel: variantMeta(v),
+            kind: "video",
+            type: "progressive",
+            src: v.previewUrl,
+            thumb: fallbackThumb,
+            meta: variantMeta(v),
+            renditionId: r.id,
+            variantName: v.name
+          });
+        }
+      } else if (r.previewUrl) {
+        out.push({
+          id: r.id,
+          label: "MP4",
+          kind: "video",
+          type: "progressive",
+          src: r.previewUrl,
+          thumb: fallbackThumb,
+          renditionId: r.id
+        });
+      }
+    }
+  }
+  const originalKind = kindForOriginal(asset);
+  if (asset.previewUrl) {
+    const originalType = originalKind === "video" ? "progressive" : originalKind === "image" ? "image" : originalKind === "audio" ? "audio" : originalKind === "document" ? "document" : "fallback";
+    out.push({
+      id: "original",
+      label: "Original",
+      sublabel: asset.original_filename ?? void 0,
+      kind: originalKind,
+      type: originalType,
+      src: asset.previewUrl,
+      thumb: originalKind === "image" ? asset.previewUrl : fallbackThumb,
+      renditionId: null
+    });
+  }
+  for (const r of renditions) {
+    if (!isReady(r)) continue;
+    if (!isImageRendition(r)) continue;
+    const variants = readyVariants(r);
+    if (variants.length) {
+      for (const v of variants) {
+        out.push({
+          id: `${r.id}:${v.name}`,
+          label: `${RENDITION_LABELS[r.renditionType] ?? r.renditionType} \xB7 ${v.name}`,
+          sublabel: variantMeta(v),
+          kind: "image",
+          type: "image",
+          src: v.previewUrl,
+          thumb: v.previewUrl,
+          meta: variantMeta(v),
+          renditionId: r.id,
+          variantName: v.name
+        });
+      }
+    } else if (r.previewUrl) {
+      out.push({
+        id: r.id,
+        label: RENDITION_LABELS[r.renditionType] ?? r.renditionType,
+        kind: "image",
+        type: "image",
+        src: r.previewUrl,
+        thumb: r.previewUrl,
+        renditionId: r.id
+      });
+    }
+  }
+  if (!out.length) {
+    out.push({
+      id: "fallback",
+      label: asset.original_filename || asset.title || asset.id.slice(0, 12),
+      kind: "fallback",
+      type: "fallback",
+      src: null,
+      thumb: null
+    });
+  }
+  for (const s of out) {
+    s.group = groupFor(s);
+  }
+  return out;
+}
+function groupFor(s) {
+  if (s.id === "original") return "Original";
+  if (s.kind === "image") return "Images";
+  if (s.kind === "video") {
+    if (s.type === "hls") return "HLS";
+    if (s.type === "dash") return "DASH";
+    return "MP4";
+  }
+  return "Other";
+}
+export function useMLAssetManagerPreview(assetRef) {
+  const sources = computed(() => buildSources(assetRef.value));
+  const selectedId = ref(null);
+  const selected = computed(() => {
+    const s = sources.value;
+    if (!s.length) return null;
+    return s.find((x) => x.id === selectedId.value) ?? s[0] ?? null;
+  });
+  const groups = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const s of sources.value) {
+      const key = s.group ?? "Other";
+      if (!map.has(key)) map.set(key, []);
+      map.get(key).push(s);
+    }
+    return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
+  });
+  watch(
+    () => assetRef.value?.id,
+    () => {
+      selectedId.value = null;
+    }
+  );
+  watch(
+    sources,
+    (s) => {
+      if (!s.length) {
+        selectedId.value = null;
+        return;
+      }
+      if (!selectedId.value || !s.find((x) => x.id === selectedId.value)) {
+        selectedId.value = s[0].id;
+      }
+    },
+    { immediate: true }
+  );
+  function select(id) {
+    if (sources.value.find((s) => s.id === id)) selectedId.value = id;
+  }
+  return { sources, groups, selected, selectedId, select };
+}

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

@@ -0,0 +1,23 @@
+import type { AssetPreview } from "../types/preview.js";
+declare function getAsset(id?: string | null): AssetPreview | undefined;
+declare function isBroken(id?: string | null): boolean;
+declare function isForbidden(id?: string | null): boolean;
+declare function markBroken(id?: string | null): void;
+declare function clearBroken(id?: string | null): void;
+declare function ensureAssets(ids: string[]): Promise<void>;
+declare function register(id?: string | null): void;
+export declare const useMLAssetPreview: () => {
+    assets: import("vue").Ref<Record<string, AssetPreview>, Record<string, AssetPreview>>;
+    pending: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    broken: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    forbidden: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    loading: import("vue").Ref<boolean, boolean>;
+    getAsset: typeof getAsset;
+    isBroken: typeof isBroken;
+    isForbidden: typeof isForbidden;
+    markBroken: typeof markBroken;
+    clearBroken: typeof clearBroken;
+    register: typeof register;
+    ensureAssets: typeof ensureAssets;
+};
+export {};

package/dist/runtime/composables/useMLAssetPreview.js

@@ -0,0 +1,153 @@
+import { ref } from "vue";
+import { $fetch } from "ofetch";
+const assets = ref({});
+const pending = ref(/* @__PURE__ */ new Set());
+const broken = ref(/* @__PURE__ */ new Set());
+const forbidden = ref(/* @__PURE__ */ new Set());
+const loading = ref(false);
+function computeSources(asset) {
+  const sources = [];
+  for (const rendition of asset.renditions ?? []) {
+    if (rendition.variants?.length) {
+      for (const variant of rendition.variants) {
+        if (variant.previewUrl) {
+          sources.push({
+            url: variant.previewUrl,
+            renditionType: rendition.renditionType,
+            name: variant.name,
+            width: variant.width,
+            height: variant.height,
+            bitrateKbps: variant.bitrateKbps
+          });
+        }
+      }
+    } else if (rendition.previewUrl) {
+      sources.push({
+        url: rendition.previewUrl,
+        renditionType: rendition.renditionType,
+        name: null,
+        width: null,
+        height: null,
+        bitrateKbps: null
+      });
+    }
+  }
+  return sources;
+}
+let fetchTimer = null;
+function getAsset(id) {
+  if (!id) return void 0;
+  return assets.value[id];
+}
+function isBroken(id) {
+  if (!id) return false;
+  return broken.value.has(id);
+}
+function isForbidden(id) {
+  if (!id) return false;
+  return forbidden.value.has(id);
+}
+function markBroken(id) {
+  if (!id) return;
+  broken.value.add(id);
+}
+function clearBroken(id) {
+  if (!id) return;
+  broken.value.delete(id);
+}
+async function fetchAssets(ids) {
+  const targetIds = ids.filter((id) => !broken.value.has(id) && !forbidden.value.has(id));
+  if (!targetIds.length) return;
+  loading.value = true;
+  try {
+    const result = await $fetch("/api/media-library/delivery/assets/resolve", {
+      method: "POST",
+      body: { assetIds: targetIds }
+    });
+    for (const item of result.items ?? []) {
+      if (item.status !== "ok" || !item.asset) {
+        broken.value.add(item.assetId);
+        continue;
+      }
+      const asset = item.asset;
+      assets.value[asset.id] = {
+        id: asset.id,
+        asset_type: asset.kind,
+        url: asset.downloadUrl,
+        metadata: asset,
+        expiresIn: asset.downloadUrlExpiresIn,
+        renditions: asset.renditions ?? [],
+        sources: computeSources(asset),
+        forbidden: false
+      };
+      broken.value.delete(asset.id);
+      forbidden.value.delete(asset.id);
+    }
+  } catch (err) {
+    const status = err?.status ?? err?.statusCode ?? err?.response?.status;
+    if (status === 403) {
+      for (const id of targetIds) {
+        forbidden.value.add(id);
+        assets.value[id] = {
+          id,
+          asset_type: "",
+          url: null,
+          metadata: null,
+          expiresIn: null,
+          renditions: [],
+          sources: [],
+          forbidden: true
+        };
+      }
+    } else {
+      for (const id of targetIds) broken.value.add(id);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+async function ensureAssets(ids) {
+  const missing = ids.filter(
+    (id) => !assets.value[id] && !broken.value.has(id)
+  );
+  if (!missing.length) return;
+  await fetchAssets(missing);
+}
+function register(id) {
+  if (!id) return;
+  if (assets.value[id]) return;
+  if (broken.value.has(id)) return;
+  pending.value.add(id);
+  if (import.meta.client) {
+    scheduleFetch();
+  }
+}
+function scheduleFetch() {
+  if (fetchTimer !== null) return;
+  fetchTimer = setTimeout(async () => {
+    fetchTimer = null;
+    await flushPending();
+  }, 0);
+}
+async function flushPending() {
+  if (!pending.value.size) return;
+  const ids = Array.from(pending.value);
+  pending.value.clear();
+  await fetchAssets(ids);
+}
+export const useMLAssetPreview = () => {
+  return {
+    assets,
+    pending,
+    broken,
+    forbidden,
+    loading,
+    getAsset,
+    isBroken,
+    isForbidden,
+    markBroken,
+    clearBroken,
+    register,
+    ensureAssets
+  };
+};