nuxt-media-library 0.0.44 → 0.0.49

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

@@ -0,0 +1,134 @@
+import type { ChunkUploaderConfig } from '../types/uploader.js';
+export type MediaUploadPhase = 'uploading' | 'processing' | 'ready' | 'failed' | 'canceled';
+/** What a policy-less upload session takes. See docs/resource-policy/retirement.md. */
+export interface MediaUploadOptions {
+    /** Defaults to the kind read from the file. */
+    kind?: string;
+    visibility?: 'private' | 'public' | 'restricted';
+    processingConfig?: {
+        stepOptions?: Record<string, Record<string, unknown>> | null;
+        useFilenameAsAssetId?: boolean;
+        enableTranscription?: boolean;
+    };
+    /** Stored on the session as a label only. */
+    collectionName?: string | null;
+    /**
+     * Name of one of the app's upload profiles. Sent with the session request;
+     * the app's `authorize` hook looks it up and the grant's profile then
+     * decides kind, visibility and processing. The media library ignores it.
+     */
+    profile?: string | null;
+    /** Overrides the uploader config the module provides. */
+    chunkUploader?: ChunkUploaderConfig;
+}
+export interface MediaUpload {
+    readonly key: string;
+    readonly file: File;
+    readonly kind: string;
+    /** Object URL for images and videos, so the tile shows the file before any rendition exists. */
+    readonly localPreview: string | null;
+    phase: MediaUploadPhase;
+    /** 0–100, or null while a step reports no progress. */
+    progress: number | null;
+    assetId: string | null;
+    error: string | null;
+    cancel: () => void;
+    retry: () => void;
+    /** Resolves with the asset ID once the asset exists (before processing finishes), or null. */
+    readonly created: Promise<string | null>;
+}
+/**
+ * Uploads files one session each and follows them through processing.
+ * Every upload gets its own ChunkUploader so cancelling one never aborts another.
+ */
+export declare function useMLMediaUpload(defaults?: MediaUploadOptions): {
+    uploads: import("vue").Ref<{
+        readonly key: string;
+        readonly file: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        readonly kind: string;
+        readonly localPreview: string | null;
+        phase: MediaUploadPhase;
+        progress: number | null;
+        assetId: string | null;
+        error: string | null;
+        cancel: () => void;
+        retry: () => void;
+        readonly created: {
+            then: <TResult1 = string | null, TResult2 = never>(onfulfilled?: ((value: string | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+            catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<string | TResult | null>;
+            finally: (onfinally?: (() => void) | null | undefined) => Promise<string | null>;
+            readonly [Symbol.toStringTag]: string;
+        };
+    }[], MediaUpload[] | {
+        readonly key: string;
+        readonly file: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: {
+                (): Promise<ArrayBuffer>;
+                (): Promise<ArrayBuffer>;
+            };
+            bytes: {
+                (): Promise<Uint8Array<ArrayBuffer>>;
+                (): Promise<Uint8Array<ArrayBuffer>>;
+            };
+            slice: {
+                (start?: number, end?: number, contentType?: string): Blob;
+                (start?: number, end?: number, contentType?: string): Blob;
+            };
+            stream: {
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+                (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            };
+            text: {
+                (): Promise<string>;
+                (): Promise<string>;
+            };
+        };
+        readonly kind: string;
+        readonly localPreview: string | null;
+        phase: MediaUploadPhase;
+        progress: number | null;
+        assetId: string | null;
+        error: string | null;
+        cancel: () => void;
+        retry: () => void;
+        readonly created: {
+            then: <TResult1 = string | null, TResult2 = never>(onfulfilled?: ((value: string | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+            catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<string | TResult | null>;
+            finally: (onfinally?: (() => void) | null | undefined) => Promise<string | null>;
+            readonly [Symbol.toStringTag]: string;
+        };
+    }[]>;
+    start: (file: File, overrides?: MediaUploadOptions) => MediaUpload;
+    remove: (upload: MediaUpload) => void;
+};

package/dist/runtime/composables/useMLMediaUpload.js

@@ -0,0 +1,153 @@
+import { onBeforeUnmount, reactive, ref, watch } from "vue";
+import { $fetch } from "ofetch";
+import { ChunkUploader } from "../utils/uploader/uploader.js";
+import { kindForFile } from "../utils/fileAccept.js";
+import { useMLChunkUploader } from "./useMLChunkUploader.js";
+import { useMLProcessingStatus } from "./useMLProcessingStatus.js";
+let seq = 0;
+export function useMLMediaUpload(defaults = {}) {
+  const base = useMLChunkUploader(defaults.chunkUploader).config;
+  const cfg = base.proxyUploads ? { ...base, baseURL: "" } : base;
+  const { track } = useMLProcessingStatus();
+  const uploads = ref([]);
+  const cleanups = /* @__PURE__ */ new Map();
+  function start(file, overrides = {}) {
+    const opts = { ...defaults, ...overrides };
+    const kind = opts.kind ?? kindForFile(file);
+    const isVisual = file.type.startsWith("image/") || file.type.startsWith("video/");
+    const localPreview = isVisual && typeof URL !== "undefined" ? URL.createObjectURL(file) : null;
+    let uploader = null;
+    let stream = null;
+    let stopWatch = null;
+    let resolveCreated;
+    const upload = reactive({
+      key: `upload-${++seq}`,
+      file,
+      kind,
+      localPreview,
+      phase: "uploading",
+      progress: 0,
+      assetId: null,
+      error: null,
+      cancel,
+      retry,
+      created: new Promise((r) => {
+        resolveCreated = r;
+      })
+    });
+    function finish(phase, err = null) {
+      upload.phase = phase;
+      upload.error = err;
+      if (phase === "ready") upload.progress = 100;
+      stopWatch?.();
+      stopWatch = null;
+      stream?.close();
+      stream = null;
+    }
+    async function checkStatus() {
+      if (!upload.assetId) return null;
+      try {
+        const res = await $fetch(
+          "/api/media-library/manage/assets/resolve",
+          { method: "POST", body: { assetIds: [upload.assetId] } }
+        );
+        return res.items?.[0]?.asset?.status?.toLowerCase() ?? null;
+      } catch {
+        return null;
+      }
+    }
+    async function followProcessing(assetId) {
+      upload.phase = "processing";
+      upload.progress = null;
+      stream = track(assetId);
+      stopWatch = watch(
+        () => [stream?.progress.value, stream?.isComplete.value, stream?.isFailed.value, stream?.error.value],
+        async ([progress, complete, failed, dropped]) => {
+          if (upload.phase !== "processing") return;
+          if (complete) return finish("ready");
+          if (failed) return finish("failed", "Processing failed");
+          if (dropped) {
+            const status2 = await checkStatus();
+            if (status2 === "ready") finish("ready");
+            else if (status2 === "failed") finish("failed", "Processing failed");
+            else upload.progress = null;
+            return;
+          }
+          upload.progress = progress ? progress : null;
+        }
+      );
+      const status = await checkStatus();
+      if (upload.phase !== "processing") return;
+      if (status === "ready") finish("ready");
+      else if (status === "failed") finish("failed", "Processing failed");
+    }
+    async function run() {
+      uploader = new ChunkUploader(cfg);
+      upload.phase = "uploading";
+      upload.progress = 0;
+      upload.error = null;
+      const create = {
+        kind,
+        visibility: opts.visibility,
+        processing_config: opts.processingConfig,
+        collection_name: opts.collectionName ?? null,
+        ...opts.profile ? { profile: opts.profile } : {}
+      };
+      try {
+        const res = await uploader.uploadFile(file, {
+          create,
+          onProgress: (p) => {
+            upload.progress = p.percent;
+          }
+        });
+        const ids = Array.isArray(res?.finalize?.asset_ids) ? res.finalize.asset_ids : res?.finalize?.asset_id ? [res.finalize.asset_id] : [];
+        const assetId = ids[0] ?? null;
+        if (!assetId) {
+          finish("failed", "The upload finished but no file was created");
+          resolveCreated(null);
+          return;
+        }
+        upload.assetId = assetId;
+        resolveCreated(assetId);
+        await followProcessing(assetId);
+      } catch (err) {
+        if (upload.phase === "canceled") return;
+        finish("failed", err?.data?.message ?? err?.message ?? "Upload failed");
+        if (!upload.assetId) resolveCreated(null);
+      }
+    }
+    function cancel() {
+      if (upload.phase !== "uploading" && upload.phase !== "processing") return;
+      uploader?.abort();
+      finish("canceled");
+      if (!upload.assetId) resolveCreated(null);
+    }
+    function retry() {
+      if (upload.phase !== "failed") return;
+      if (upload.assetId) {
+        void followProcessing(upload.assetId);
+        return;
+      }
+      void run();
+    }
+    cleanups.set(upload.key, () => {
+      uploader?.abort();
+      stopWatch?.();
+      stream?.close();
+      if (localPreview) URL.revokeObjectURL(localPreview);
+    });
+    uploads.value = [...uploads.value, upload];
+    void run();
+    return upload;
+  }
+  function remove(upload) {
+    cleanups.get(upload.key)?.();
+    cleanups.delete(upload.key);
+    uploads.value = uploads.value.filter((u) => u.key !== upload.key);
+  }
+  onBeforeUnmount(() => {
+    cleanups.forEach((fn) => fn());
+    cleanups.clear();
+  });
+  return { uploads, start, remove };
+}

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

@@ -0,0 +1,36 @@
+import type { UploadProgress } from '../types/uploader.js';
+import type { ServiceUploadOptions, ServiceUploadResult } from '../utils/uploader/serviceUpload.js';
+export type { ServiceUploadOptions, ServiceUploadResult } from '../utils/uploader/serviceUpload.js';
+/**
+ * Upload a file through one of the app's backend services (py_client
+ * `create_upload_router`). The service starts the upload and hands out a
+ * grant for that session; the file goes straight to the media library.
+ *
+ * ```ts
+ * const { upload, abort, uploading, progress, error } = useMLServiceUpload()
+ * const { sessionId, assetId } = await upload(file, {
+ *   start: '/api/videos/uploads',
+ *   body: { profile: 'lesson-video', context: { lessonId } },
+ *   onProgress: p => console.log(p.percent),
+ * })
+ * await $fetch(`/api/videos/lessons/${lessonId}/video`, { method: 'PUT', body: { sessionId, assetId } })
+ * ```
+ *
+ * One upload at a time per call of the composable; call it once per
+ * upload field. The media library must allow the site's origin (CORS).
+ */
+export declare function useMLServiceUpload(): {
+    upload: (file: File, options: ServiceUploadOptions) => Promise<ServiceUploadResult>;
+    abort: () => void;
+    uploading: import("vue").Ref<boolean, boolean>;
+    progress: import("vue").Ref<{
+        totalBytes: number;
+        uploadedBytes: number;
+        percent: number;
+    } | null, UploadProgress | {
+        totalBytes: number;
+        uploadedBytes: number;
+        percent: number;
+    } | null>;
+    error: import("vue").Ref<unknown, unknown>;
+};

package/dist/runtime/composables/useMLServiceUpload.js

@@ -0,0 +1,32 @@
+import { ref } from "vue";
+import { ChunkUploader } from "../utils/uploader/uploader.js";
+import { createServiceUpload } from "../utils/uploader/serviceUpload.js";
+export function useMLServiceUpload() {
+  const uploading = ref(false);
+  const progress = ref(null);
+  const error = ref(null);
+  const runner = createServiceUpload({
+    fetch: (url, opts) => $fetch(url, opts),
+    createUploader: (cfg) => new ChunkUploader(cfg)
+  });
+  async function upload(file, options) {
+    uploading.value = true;
+    progress.value = null;
+    error.value = null;
+    try {
+      return await runner.upload(file, {
+        ...options,
+        onProgress: (p) => {
+          progress.value = p;
+          options.onProgress?.(p);
+        }
+      });
+    } catch (err) {
+      error.value = err;
+      throw err;
+    } finally {
+      uploading.value = false;
+    }
+  }
+  return { upload, abort: runner.abort, uploading, progress, error };
+}

package/dist/runtime/index.d.ts

@@ -6,8 +6,19 @@ export * from './composables/useMLAssetManager.js';
 export * from './composables/useMLAssetLibrary.js';
 export * from './composables/useMLAssetManagerPreview.js';
 export * from './composables/useElapsedTimer.js';
+export * from './composables/useMLMediaAssets.js';
+export * from './composables/useMLMediaUpload.js';
+export * from './composables/useMLMediaField.js';
+export * from './composables/useMLMediaBrowse.js';
+export * from './composables/useMLFilePicker.js';
+export * from './composables/useMLMediaEditor.js';
+export * from './composables/useMLMediaGallery.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';
+export * from './utils/assetDisplay.js';
+export * from './utils/assetThumbnail.js';
+export * from './utils/assetFormat.js';
+export * from './utils/fileAccept.js';

package/dist/runtime/index.js

@@ -6,8 +6,19 @@ export * from "./composables/useMLAssetManager.js";
 export * from "./composables/useMLAssetLibrary.js";
 export * from "./composables/useMLAssetManagerPreview.js";
 export * from "./composables/useElapsedTimer.js";
+export * from "./composables/useMLMediaAssets.js";
+export * from "./composables/useMLMediaUpload.js";
+export * from "./composables/useMLMediaField.js";
+export * from "./composables/useMLMediaBrowse.js";
+export * from "./composables/useMLFilePicker.js";
+export * from "./composables/useMLMediaEditor.js";
+export * from "./composables/useMLMediaGallery.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";
+export * from "./utils/assetDisplay.js";
+export * from "./utils/assetThumbnail.js";
+export * from "./utils/assetFormat.js";
+export * from "./utils/fileAccept.js";

package/dist/runtime/server/create-ml-proxy.d.ts

@@ -1,4 +1,5 @@
 import type { H3Event } from 'h3';
+import type { MLAuthorize, MLIssueGrant } from './grants.js';
 export type MLProxyType = 'assets' | 'uploads' | 'delivery' | 'processing' | 'resource-policy';
 export interface MLProxyOptions {
     /**
@@ -8,6 +9,21 @@ export interface MLProxyOptions {
      * from runtimeConfig.
      */
     requestHeaders?: (event: H3Event, incoming: Record<string, string>) => Record<string, string> | Promise<Record<string, string>>;
+    /**
+     * Media grants (server docs/security/media-grants.md). When set, `/manage`
+     * requests no longer carry the browser's or the static credentials: for
+     * each one the proxy asks `authorize(event, need)` (your rules: the user
+     * from your session, the asset ids in `need`) and sends a short-lived
+     * grant scoped to exactly that. `false` → 403. Unknown `/manage` routes →
+     * 404. `/delivery` is not affected.
+     */
+    authorize?: MLAuthorize<H3Event>;
+    /**
+     * How grants are issued. Default: `POST {baseURL}/manage/grants` with the
+     * private runtime config `mediaLibrary.serviceToken` (the Nuxt server is
+     * the app backend). Pass your own to ask your backend instead.
+     */
+    issueGrant?: MLIssueGrant;
 }
 /**
  * Create a Nitro event handler that replicates one of the media library's