nuxt-media-library 0.0.44 → 0.0.49

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

@@ -0,0 +1,147 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { AssetDetail } from '../types/asset.js';
+export interface MediaBrowseFilters {
+    /** One kind. The list API filters by a single kind. */
+    kind?: string | null;
+    status?: string | null;
+    query?: string | null;
+}
+/**
+ * The library as a growing list: page 1 on filter change, more on loadMore().
+ * Search text is debounced. Browser only, like useMLMediaAssets.
+ */
+export declare function useMLMediaBrowse(filters: MaybeRefOrGetter<MediaBrowseFilters>, opts?: {
+    pageSize?: number;
+    debounceMs?: number;
+}): {
+    items: import("vue").Ref<{
+        id: string;
+        kind: string;
+        title: string | null;
+        original_filename: string;
+        originalFilename?: string | undefined;
+        mime_type: string;
+        mimeType?: string | undefined;
+        size_bytes: number;
+        sizeBytes?: number | undefined;
+        bytes?: number | undefined;
+        hash_sha256: string | null;
+        hashSha256?: string | null | undefined;
+        content_hash_sha256?: string | null | undefined;
+        status: string;
+        visibility: string;
+        created_at: string;
+        createdAt?: string | undefined;
+        blob_id: string | null;
+        blobId?: string | null | undefined;
+        resource_policy_id: string | null;
+        resourcePolicyId?: string | null | undefined;
+        renditions: {
+            id: string;
+            renditionType: string;
+            entrypoint: string | null;
+            storagePrefix: string | null;
+            blobIds: string[];
+            variants: {
+                name: string;
+                entrypoint: string;
+                locale: string | null;
+                width: number | null;
+                height: number | null;
+                bitrateKbps: number | null;
+                blobIds: string[];
+                extras: Record<string, any> | null;
+                previewUrl: string | null;
+                previewUrlType: import("..").PreviewUrlType | null;
+                previewUrlExpiresIn: number | null;
+            }[] | null;
+            status: string;
+            durationSeconds: number | null;
+            pages: number | null;
+            channels: number | null;
+            extras: Record<string, any> | null;
+            createdAt: string;
+            updatedAt: string;
+            previewUrl: string | null;
+            previewUrlType: import("..").PreviewUrlType | null;
+            previewUrlExpiresIn: number | null;
+        }[];
+        slug?: string | null | undefined;
+        created_by?: string | null | undefined;
+        updated_at?: string | null | undefined;
+        deleted_at?: string | null | undefined;
+        upload_session_id?: string | null | undefined;
+        primary_blob_id?: string | null | undefined;
+        previewUrl: string | null;
+        previewUrlType: import("..").PreviewUrlType | null;
+        previewUrlExpiresIn: number | null;
+    }[], AssetDetail[] | {
+        id: string;
+        kind: string;
+        title: string | null;
+        original_filename: string;
+        originalFilename?: string | undefined;
+        mime_type: string;
+        mimeType?: string | undefined;
+        size_bytes: number;
+        sizeBytes?: number | undefined;
+        bytes?: number | undefined;
+        hash_sha256: string | null;
+        hashSha256?: string | null | undefined;
+        content_hash_sha256?: string | null | undefined;
+        status: string;
+        visibility: string;
+        created_at: string;
+        createdAt?: string | undefined;
+        blob_id: string | null;
+        blobId?: string | null | undefined;
+        resource_policy_id: string | null;
+        resourcePolicyId?: string | null | undefined;
+        renditions: {
+            id: string;
+            renditionType: string;
+            entrypoint: string | null;
+            storagePrefix: string | null;
+            blobIds: string[];
+            variants: {
+                name: string;
+                entrypoint: string;
+                locale: string | null;
+                width: number | null;
+                height: number | null;
+                bitrateKbps: number | null;
+                blobIds: string[];
+                extras: Record<string, any> | null;
+                previewUrl: string | null;
+                previewUrlType: import("..").PreviewUrlType | null;
+                previewUrlExpiresIn: number | null;
+            }[] | null;
+            status: string;
+            durationSeconds: number | null;
+            pages: number | null;
+            channels: number | null;
+            extras: Record<string, any> | null;
+            createdAt: string;
+            updatedAt: string;
+            previewUrl: string | null;
+            previewUrlType: import("..").PreviewUrlType | null;
+            previewUrlExpiresIn: number | null;
+        }[];
+        slug?: string | null | undefined;
+        created_by?: string | null | undefined;
+        updated_at?: string | null | undefined;
+        deleted_at?: string | null | undefined;
+        upload_session_id?: string | null | undefined;
+        primary_blob_id?: string | null | undefined;
+        previewUrl: string | null;
+        previewUrlType: import("..").PreviewUrlType | null;
+        previewUrlExpiresIn: number | null;
+    }[]>;
+    total: import("vue").Ref<number, number>;
+    error: import("vue").Ref<string | null, string | null>;
+    /** True for the first page too, including SSR and hydration. */
+    loading: import("vue").ComputedRef<boolean>;
+    hasMore: import("vue").ComputedRef<boolean>;
+    loadMore: () => void;
+    reload: () => Promise<void>;
+};

package/dist/runtime/composables/useMLMediaBrowse.js

@@ -0,0 +1,72 @@
+import { computed, onBeforeUnmount, onMounted, ref, toValue, watch } from "vue";
+import { $fetch } from "ofetch";
+export function useMLMediaBrowse(filters, opts = {}) {
+  const pageSize = opts.pageSize ?? 30;
+  const debounceMs = opts.debounceMs ?? 300;
+  const items = ref([]);
+  const total = ref(0);
+  const page = ref(0);
+  const loading = ref(false);
+  const error = ref(null);
+  const mounted = ref(false);
+  let request = 0;
+  async function fetchPage(n) {
+    const id = ++request;
+    const f = toValue(filters);
+    loading.value = true;
+    error.value = null;
+    try {
+      const query = { page: String(n), pageSize: String(pageSize) };
+      if (f.kind) query.kind = f.kind;
+      if (f.status) query.status = f.status;
+      if (f.query?.trim()) query.query = f.query.trim();
+      const res = await $fetch("/api/media-library/manage/assets", { query });
+      if (id !== request) return;
+      const seen = new Set(n === 1 ? [] : items.value.map((a) => a.id));
+      items.value = n === 1 ? res.items ?? [] : [...items.value, ...(res.items ?? []).filter((a) => !seen.has(a.id))];
+      total.value = res.total ?? 0;
+      page.value = n;
+    } catch (err) {
+      if (id !== request) return;
+      error.value = err?.data?.message ?? err?.message ?? "Could not load the library";
+    } finally {
+      if (id === request) loading.value = false;
+    }
+  }
+  const hasMore = computed(() => items.value.length < total.value);
+  function loadMore() {
+    if (!loading.value && hasMore.value) void fetchPage(page.value + 1);
+  }
+  function reload() {
+    return fetchPage(1);
+  }
+  let timer;
+  onMounted(() => {
+    mounted.value = true;
+  });
+  watch(
+    [() => toValue(filters).kind, () => toValue(filters).status, mounted],
+    () => {
+      if (!mounted.value) return;
+      clearTimeout(timer);
+      void fetchPage(1);
+    },
+    { immediate: true }
+  );
+  watch(() => toValue(filters).query, () => {
+    if (!mounted.value) return;
+    clearTimeout(timer);
+    timer = setTimeout(() => void fetchPage(1), debounceMs);
+  });
+  onBeforeUnmount(() => clearTimeout(timer));
+  return {
+    items,
+    total,
+    error,
+    /** True for the first page too, including SSR and hydration. */
+    loading: computed(() => loading.value || !mounted.value),
+    hasMore,
+    loadMore,
+    reload
+  };
+}

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

@@ -0,0 +1,22 @@
+import type { MediaUsage } from '../components/MLMedia/UsageList.vue.js';
+import type { MediaEditorResult } from '../components/MLMedia/Editor.vue.js';
+export type { MediaEditorResult };
+export interface MediaEditorOpenOptions {
+    /** The record's files, in order. Enables previous / next. */
+    siblings?: readonly (string | null | undefined)[];
+    /** Current alt text, per asset ID, or one string for the opened file. */
+    alt?: Readonly<Record<string, string>> | string | null;
+    /** Preview only: no alt editing, no Save. */
+    readonly?: boolean;
+    /** Shows a remove button with this label, e.g. "Remove from product". */
+    removeLabel?: string;
+    /** Where each file is used, per asset ID. */
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+}
+/**
+ * Opens the media editor. Resolves with `{ action: 'save', alt }`,
+ * `{ action: 'remove', assetId }`, or null when cancelled. Needs <UApp>.
+ */
+export declare function useMLMediaEditor(): {
+    open: (assetId: string, options?: MediaEditorOpenOptions) => Promise<MediaEditorResult | null>;
+};

package/dist/runtime/composables/useMLMediaEditor.js

@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from "vue";
+import { useOverlay } from "#imports";
+const LazyEditor = defineAsyncComponent(() => import("../components/MLMedia/Editor.vue"));
+export function useMLMediaEditor() {
+  const overlay = useOverlay();
+  async function open(assetId, options = {}) {
+    const { siblings, alt, ...rest } = options;
+    const altMap = typeof alt === "string" ? { [assetId]: alt } : alt ?? {};
+    const editor = overlay.create(LazyEditor, { destroyOnClose: true });
+    const instance = editor.open({
+      ...rest,
+      assetId,
+      siblings: (siblings ?? []).filter((id) => !!id),
+      alt: altMap
+    });
+    const result = await instance.result;
+    return result ?? null;
+  }
+  return { open };
+}

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

@@ -0,0 +1,29 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+import { type RejectedFile } from '../utils/fileAccept.js';
+import { type MediaUpload, type MediaUploadOptions } from './useMLMediaUpload.js';
+export type MediaFieldState = 'empty' | 'loading' | 'uploading' | 'filled' | 'missing';
+export interface UseMLMediaFieldOptions extends MediaUploadOptions {
+    /** Asset kinds the field takes, e.g. ['image'] or "image,video". Empty means any. */
+    accept?: MaybeRefOrGetter<readonly string[] | string | null | undefined>;
+    /** Bytes. */
+    maxSize?: MaybeRefOrGetter<number | null | undefined>;
+    /** Called once the uploaded file exists in the library (before processing finishes). */
+    onUploaded?: (assetId: string) => void;
+}
+/**
+ * Logic behind <MLMediaField>: one asset ID, uploads that replace it, and the
+ * messages for files that don't fit. Usable on its own for custom markup.
+ */
+export declare function useMLMediaField(model: Ref<string | null | undefined>, options?: UseMLMediaFieldOptions): {
+    state: import("vue").ComputedRef<MediaFieldState>;
+    asset: import("vue").ComputedRef<import("..").AssetDetail | null>;
+    upload: import("vue").ShallowRef<MediaUpload | null, MediaUpload | null>;
+    message: Ref<string | null, string | null>;
+    acceptAttr: import("vue").ComputedRef<string>;
+    acceptLabel: import("vue").ComputedRef<string>;
+    onFiles: (files: File[]) => void;
+    onRejected: (rejected: RejectedFile[]) => void;
+    clear: () => void;
+    clearMessage: () => void;
+    refresh: () => Promise<void>;
+};

package/dist/runtime/composables/useMLMediaField.js

@@ -0,0 +1,77 @@
+import { computed, ref, shallowRef, toValue, watch } from "vue";
+import { acceptForKinds, describeKinds } from "../utils/fileAccept.js";
+import { formatBytes } from "../utils/assetFormat.js";
+import { useMLMediaAssets } from "./useMLMediaAssets.js";
+import { useMLMediaUpload } from "./useMLMediaUpload.js";
+export function useMLMediaField(model, options = {}) {
+  const { accept, maxSize, onUploaded, ...uploadOptions } = options;
+  const library = useMLMediaAssets(() => [model.value]);
+  const uploader = useMLMediaUpload(uploadOptions);
+  const upload = shallowRef(null);
+  const message = ref(null);
+  const acceptAttr = computed(() => acceptForKinds(toValue(accept)));
+  const acceptLabel = computed(() => describeKinds(toValue(accept)));
+  const asset = computed(() => library.get(model.value));
+  const state = computed(() => {
+    const u = upload.value;
+    if (u && (u.phase === "uploading" || u.phase === "processing" || u.phase === "failed")) return "uploading";
+    if (!model.value) return "empty";
+    const found = library.lookup(model.value);
+    if (found === "loading") return "loading";
+    return found === "ok" ? "filled" : "missing";
+  });
+  function drop(u) {
+    if (u) uploader.remove(u);
+    if (upload.value === u) upload.value = null;
+  }
+  function onFiles(files) {
+    const file = files[0];
+    if (!file) return;
+    message.value = null;
+    drop(upload.value);
+    const u = uploader.start(file);
+    upload.value = u;
+    void u.created.then((id) => {
+      if (!id || upload.value !== u) return;
+      model.value = id;
+      onUploaded?.(id);
+    });
+  }
+  watch(() => upload.value?.phase, async (phase) => {
+    const u = upload.value;
+    if (!u) return;
+    if (phase === "ready" && u.assetId) {
+      await library.refresh([u.assetId]);
+      drop(u);
+    } else if (phase === "canceled") {
+      drop(u);
+    }
+  });
+  function onRejected(rejected) {
+    const first = rejected[0];
+    if (!first) return;
+    const name = first.file.name;
+    const max = toValue(maxSize);
+    message.value = first.reason === "type" ? `${name} can't be used here. This field takes ${acceptLabel.value}.` : first.reason === "size" ? `${name} is larger than ${max ? formatBytes(max) : "the limit"}.` : `This field holds one file. ${name} was left out.`;
+  }
+  function clear() {
+    drop(upload.value);
+    message.value = null;
+    model.value = null;
+  }
+  return {
+    state,
+    asset,
+    upload,
+    message,
+    acceptAttr,
+    acceptLabel,
+    onFiles,
+    onRejected,
+    clear,
+    clearMessage: () => {
+      message.value = null;
+    },
+    refresh: () => library.refresh()
+  };
+}

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

@@ -0,0 +1,55 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+import type { AssetDetail } from '../types/asset.js';
+import { type RejectedFile } from '../utils/fileAccept.js';
+import { type MediaAssetLookup } from './useMLMediaAssets.js';
+import { type MediaUpload, type MediaUploadOptions } from './useMLMediaUpload.js';
+export interface GalleryItem {
+    /** Stable across the upload → asset handover, for v-for keys. */
+    key: string;
+    /** Null while the file is still uploading and has no asset yet. */
+    id: string | null;
+    asset: AssetDetail | null;
+    lookup: MediaAssetLookup | 'loading' | null;
+    upload: MediaUpload | null;
+}
+export interface UseMLMediaGalleryOptions extends MediaUploadOptions {
+    accept?: MaybeRefOrGetter<readonly string[] | string | null | undefined>;
+    /** Most files on the record. */
+    max?: MaybeRefOrGetter<number | null | undefined>;
+    /** Bytes. */
+    maxSize?: MaybeRefOrGetter<number | null | undefined>;
+    onUploaded?: (assetId: string) => void;
+    /**
+     * Called with a new upload's asset ID right before it joins the list, with
+     * the tag passed to onFiles. Lets a gallery with roles place it.
+     */
+    onAdd?: (assetId: string, tag: string | undefined) => void;
+}
+export interface GalleryFilesOptions {
+    /** Upload profile for these files instead of the default one. */
+    profile?: string | null;
+    /** Handed back to `onAdd`. */
+    tag?: string;
+}
+/**
+ * Logic behind <MLMediaGallery>: an ordered list of asset IDs, uploads that
+ * append to it, reordering and removal. Removing never deletes the file.
+ */
+export declare function useMLMediaGallery(model: Ref<string[]>, options?: UseMLMediaGalleryOptions): {
+    items: import("vue").ComputedRef<GalleryItem[]>;
+    message: Ref<string | null, string | null>;
+    remaining: import("vue").ComputedRef<number>;
+    full: import("vue").ComputedRef<boolean>;
+    replaces: import("vue").ComputedRef<boolean>;
+    insert: (id: string, index?: number) => boolean;
+    acceptAttr: import("vue").ComputedRef<string>;
+    acceptLabel: import("vue").ComputedRef<string>;
+    limit: import("vue").ComputedRef<number>;
+    onFiles: (files: File[], opts?: GalleryFilesOptions) => void;
+    onRejected: (rejected: RejectedFile[]) => void;
+    remove: (toRemove: readonly string[]) => void;
+    discard: (upload: MediaUpload) => void;
+    move: (from: number, to: number) => void;
+    setFromPicker: (chosen: string[]) => void;
+    clearMessage: () => void;
+};

package/dist/runtime/composables/useMLMediaGallery.js

@@ -0,0 +1,134 @@
+import { computed, ref, toValue, watch } from "vue";
+import { acceptForKinds, describeKinds } from "../utils/fileAccept.js";
+import { formatBytes } from "../utils/assetFormat.js";
+import { useMLMediaAssets } from "./useMLMediaAssets.js";
+import { useMLMediaUpload } from "./useMLMediaUpload.js";
+export function useMLMediaGallery(model, options = {}) {
+  const { accept, max, maxSize, onUploaded, onAdd, ...uploadOptions } = options;
+  const ids = computed(() => model.value ?? []);
+  const library = useMLMediaAssets(ids);
+  const uploader = useMLMediaUpload(uploadOptions);
+  const message = ref(null);
+  const limit = computed(() => toValue(max) ?? Number.POSITIVE_INFINITY);
+  const acceptAttr = computed(() => acceptForKinds(toValue(accept)));
+  const acceptLabel = computed(() => describeKinds(toValue(accept)));
+  const pendingUploads = computed(() => uploader.uploads.value.filter(
+    (u) => (u.phase === "uploading" || u.phase === "failed") && !u.assetId
+  ));
+  const replaces = computed(() => limit.value === 1);
+  const remaining = computed(() => replaces.value ? 1 : Math.max(0, limit.value - ids.value.length - pendingUploads.value.length));
+  const full = computed(() => remaining.value <= 0);
+  const uploadByAsset = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const u of uploader.uploads.value) if (u.assetId) map.set(u.assetId, u);
+    return map;
+  });
+  const items = computed(() => [
+    ...ids.value.map((id) => {
+      const upload = uploadByAsset.value.get(id) ?? null;
+      return { key: upload?.key ?? id, id, asset: library.get(id), lookup: library.lookup(id), upload };
+    }),
+    ...pendingUploads.value.map((u) => ({ key: u.key, id: null, asset: null, lookup: null, upload: u }))
+  ]);
+  function onFiles(files, opts = {}) {
+    message.value = null;
+    if (replaces.value) {
+      for (const u of pendingUploads.value) discard(u);
+      files = files.slice(0, 1);
+    }
+    for (const file of files) {
+      const u = uploader.start(file, opts.profile !== void 0 ? { profile: opts.profile } : {});
+      void u.created.then((id) => {
+        if (!id) return;
+        if (replaces.value) {
+          onAdd?.(id, opts.tag);
+          model.value = [id];
+          onUploaded?.(id);
+          return;
+        }
+        if (ids.value.includes(id)) {
+          onAdd?.(id, opts.tag);
+          return;
+        }
+        if (ids.value.length >= limit.value) {
+          message.value = `${file.name} was uploaded to the library but not added: this list is full.`;
+          return;
+        }
+        onAdd?.(id, opts.tag);
+        model.value = [...ids.value, id];
+        onUploaded?.(id);
+      });
+    }
+  }
+  watch(() => uploader.uploads.value.map((u) => u.phase), async () => {
+    for (const u of uploader.uploads.value) {
+      if (u.phase === "ready" && u.assetId) {
+        await library.refresh([u.assetId]);
+        uploader.remove(u);
+      } else if (u.phase === "canceled") {
+        uploader.remove(u);
+      }
+    }
+  });
+  function onRejected(rejected) {
+    const first = rejected[0];
+    if (!first) return;
+    const more = rejected.length > 1 ? ` and ${rejected.length - 1} more` : "";
+    const size = toValue(maxSize);
+    message.value = first.reason === "type" ? `${first.file.name}${more} can't be added. This list takes ${acceptLabel.value}.` : first.reason === "size" ? `${first.file.name}${more} is larger than ${size ? formatBytes(size) : "the limit"}.` : `This list holds up to ${limit.value} files. ${first.file.name}${more} was left out.`;
+  }
+  function remove(toRemove) {
+    const drop = new Set(toRemove);
+    for (const u of uploader.uploads.value) if (u.assetId && drop.has(u.assetId)) uploader.remove(u);
+    model.value = ids.value.filter((id) => !drop.has(id));
+  }
+  function discard(upload) {
+    upload.cancel();
+    uploader.remove(upload);
+  }
+  function move(from, to) {
+    const list = [...ids.value];
+    if (from < 0 || from >= list.length) return;
+    const target = Math.max(0, Math.min(list.length - 1, to));
+    if (target === from) return;
+    const [id] = list.splice(from, 1);
+    list.splice(target, 0, id);
+    model.value = list;
+  }
+  function insert(id, index) {
+    if (ids.value.includes(id)) return true;
+    if (replaces.value) {
+      model.value = [id];
+      return true;
+    }
+    if (ids.value.length >= limit.value) return false;
+    const list = [...ids.value];
+    list.splice(index ?? list.length, 0, id);
+    model.value = list;
+    return true;
+  }
+  function setFromPicker(chosen) {
+    message.value = null;
+    model.value = chosen.slice(0, Number.isFinite(limit.value) ? limit.value : void 0);
+  }
+  return {
+    items,
+    message,
+    remaining,
+    full,
+    replaces,
+    insert,
+    acceptAttr,
+    acceptLabel,
+    limit,
+    onFiles,
+    onRejected,
+    remove,
+    discard,
+    move,
+    setFromPicker,
+    clearMessage: () => {
+      message.value = null;
+    }
+  };
+}

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

@@ -0,0 +1,23 @@
+import type { GrantInput, HeldGrant } from '../utils/grants/store.js';
+/**
+ * Add read grants your services returned (`"mlg_…"` or `{ grant, expiresAt }`).
+ * Assets the server answered "forbidden" for are resolved again, since a
+ * new grant may list them. Every delivery resolve sends the live grants in `X-Media-Grants`.
+ */
+declare function addMediaGrants(...grants: GrantInput[]): void;
+declare function clearMediaGrants(): void;
+/** Headers to send on a `/delivery` request. */
+declare function mediaGrantHeaders(): Record<string, string>;
+export { addMediaGrants, clearMediaGrants, mediaGrantHeaders };
+export declare const useMLMediaGrants: () => {
+    grants: import("vue").Ref<{
+        grant: string;
+        expiresAt: number;
+    }[], HeldGrant[] | {
+        grant: string;
+        expiresAt: number;
+    }[]>;
+    addMediaGrants: typeof addMediaGrants;
+    clearMediaGrants: typeof clearMediaGrants;
+    mediaGrantHeaders: typeof mediaGrantHeaders;
+};

package/dist/runtime/composables/useMLMediaGrants.js

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+import { grantHeaders, mergeGrants } from "../utils/grants/store.js";
+import { notifyMediaGrantsAdded } from "../utils/grants/listeners.js";
+const held = ref([]);
+function addMediaGrants(...grants) {
+  if (!import.meta.client) return;
+  held.value = mergeGrants(held.value, grants);
+  notifyMediaGrantsAdded();
+}
+function clearMediaGrants() {
+  held.value = [];
+}
+function mediaGrantHeaders() {
+  return import.meta.client ? grantHeaders(held.value) : {};
+}
+export { addMediaGrants, clearMediaGrants, mediaGrantHeaders };
+export const useMLMediaGrants = () => ({
+  grants: held,
+  addMediaGrants,
+  clearMediaGrants,
+  mediaGrantHeaders
+});