nuxt-media-library 0.0.44

package/dist/runtime/components/MLProcessing/StepperItem.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  step: { type: Object, required: true },
+  downloadUrl: { type: [String, null], required: false }
+});
+const emit = defineEmits(["update:options", "run", "retry"]);
+const isDone = computed(() => props.step.status === "succeeded");
+const isRunning = computed(() => props.step.status === "running");
+const isFailed = computed(() => props.step.status === "failed");
+const isConfiguring = computed(() => props.step.status === "configuring");
+const isPending = computed(() => props.step.status === "pending");
+const isLocked = computed(() => props.step.isLocked);
+const canRun = computed(
+  () => !isLocked.value && (isConfiguring.value || isPending.value)
+);
+const showOptions = computed(
+  () => (isConfiguring.value || isFailed.value) && props.step.hasOptions && !isLocked.value
+);
+const showFramePicker = computed(
+  () => showOptions.value && props.step.name === "video_thumbnail"
+);
+const titleClasses = computed(() => {
+  if (isDone.value) return "font-semibold text-default";
+  if (isRunning.value || isConfiguring.value) return "font-bold text-primary";
+  if (isFailed.value) return "font-semibold text-error";
+  return "text-muted";
+});
+const stepIcon = computed(() => {
+  if (isDone.value) return "i-lucide-circle-check";
+  if (isRunning.value) return "i-lucide-loader";
+  if (isFailed.value) return "i-lucide-circle-x";
+  if (isConfiguring.value) return "i-lucide-settings-2";
+  if (isLocked.value) return "i-lucide-lock";
+  return "i-lucide-circle-dot";
+});
+const iconClasses = computed(() => {
+  if (isDone.value) return "text-green-500";
+  if (isRunning.value || isConfiguring.value) return "text-primary";
+  if (isFailed.value) return "text-red-500";
+  if (isLocked.value) return "text-muted/50";
+  return "text-muted";
+});
+const statusLabel = computed(() => {
+  if (isDone.value) return "DONE";
+  if (isRunning.value) return "RUNNING";
+  if (isFailed.value) return "FAILED";
+  if (isConfiguring.value) return "CONFIGURE";
+  if (isLocked.value) return "LOCKED";
+  return "PENDING";
+});
+const badgeColor = computed(() => {
+  if (isDone.value) return "success";
+  if (isRunning.value) return "warning";
+  if (isFailed.value) return "error";
+  if (isConfiguring.value) return "info";
+  return "neutral";
+});
+const hasBody = computed(
+  () => isRunning.value || isFailed.value && !!props.step.error || showOptions.value || isConfiguring.value && !props.step.hasOptions || canRun.value || isFailed.value || isDone.value && !!props.step.task?.metadata_payload && Object.keys(props.step.task.metadata_payload).length > 0
+);
+</script>
+
+<template>
+  <MLProcessingStepLayout
+    :title="step.displayName"
+    :title-class="titleClasses"
+    :icon="stepIcon"
+    :icon-class="iconClasses"
+    :spinning="isRunning"
+    class="transition-opacity duration-200"
+    :class="{ 'opacity-40 pointer-events-none': isLocked }"
+  >
+    <template #header-actions>
+      <UBadge :label="statusLabel" :color="badgeColor" variant="subtle" size="sm"/>
+    </template>
+
+    <div
+      v-if="hasBody"
+      class="ps-8 py-2 pe-2">
+      <!-- Running state -->
+      <div v-if="isRunning" class="mt-2 flex items-center gap-2 text-xs text-muted">
+        <UIcon name="i-lucide-loader" class="size-3.5 animate-spin text-primary"/>
+        <span>Processing...</span>
+      </div>
+      <!-- Error display -->
+      <div v-if="isFailed && step.error"
+           class="mt-2 bg-error/5 border border-error/20 rounded-md p-3 text-error text-xs">
+        <pre class="whitespace-pre-wrap font-mono text-[11px]">{{ step.error }}</pre>
+      </div>
+
+      <!-- Options Form (configuring state) -->
+      <div v-if="showOptions" class="mt-3">
+        <!-- Frame picker for video_thumbnail -->
+        <MLProcessingFormsFramePicker
+          v-if="showFramePicker"
+          :download-url="downloadUrl ?? null"
+          :model-value="step.userOptions"
+          @update:model-value="emit('update:options', $event)"
+        />
+        <!-- Generic options form -->
+        <MLProcessingFormsStepOptionsForm
+          v-else
+          :schema="step.optionsSchema"
+          :model-value="step.userOptions"
+          @update:model-value="emit('update:options', $event)"
+        />
+      </div>
+
+      <!-- No options message -->
+      <div v-if="isConfiguring && !step.hasOptions" class="mt-2 text-xs text-muted">
+        No configuration needed for this step.
+      </div>
+
+      <!-- Action buttons -->
+      <div v-if="canRun || isFailed" class="mt-3 flex gap-2">
+        <UButton
+          v-if="canRun"
+          size="xs"
+          icon="i-lucide-play"
+          label="Run Step"
+          @click="emit('run')"
+        />
+        <UButton
+          v-if="isFailed"
+          size="xs"
+          color="warning"
+          icon="i-lucide-settings-2"
+          label="Reconfigure"
+          @click="emit('retry')"
+        />
+      </div>
+
+      <!-- Completed metadata -->
+      <div
+        v-if="isDone && step.task?.metadata_payload && Object.keys(step.task.metadata_payload).length"
+        class="mt-2 text-xs text-muted"
+      >
+        <span
+          v-for="([k, v]) in Object.entries(step.task.metadata_payload).filter(([k2]) => k2 !== 'skipped')"
+          :key="k"
+          class="mr-3"
+        >
+          {{ k.replace(/_/g, " ") }}: <span
+          class="font-medium text-default">{{ typeof v === "boolean" ? v ? "Yes" : "No" : v }}</span>
+        </span>
+      </div>
+    </div>
+  </MLProcessingStepLayout>
+</template>

package/dist/runtime/components/MLProcessing/StepperItem.vue.d.ts

@@ -0,0 +1,16 @@
+import type { StepState } from "../../composables/useMLProcessingStepper.js";
+type __VLS_Props = {
+    step: StepState;
+    downloadUrl?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+    "update:options": (value: Record<string, any>) => any;
+    run: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+    "onUpdate:options"?: ((value: Record<string, any>) => any) | undefined;
+    onRun?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/TopBar.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    title: string;
+    status?: 'queued' | 'running' | 'succeeded' | 'failed' | null;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    subtitle?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    status: "queued" | "running" | "succeeded" | "failed" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MLProcessing/TopBar.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  title: { type: String, required: true },
+  status: { type: [String, null], required: false, default: null }
+});
+const bgClasses = computed(() => {
+  if (props.status === "succeeded") return "bg-green-500/5";
+  if (props.status === "failed") return "bg-red-500/5";
+  return "";
+});
+const dotClasses = computed(() => {
+  switch (props.status) {
+    case "queued":
+      return "bg-muted border border-default";
+    case "running":
+      return "bg-primary border border-primary animate-pulse";
+    case "succeeded":
+      return "bg-green-500 border border-green-500";
+    case "failed":
+      return "bg-red-500 border border-red-500";
+    default:
+      return "";
+  }
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between px-4 py-3 border border-default rounded-t-lg"
+    :class="bgClasses"
+  >
+    <div class="flex items-center gap-3 min-w-0">
+      <div v-if="status" class="w-3 h-3 rounded-full shrink-0" :class="dotClasses" />
+      <div class="min-w-0">
+        <div class="text-sm font-semibold text-default">{{ title }}</div>
+        <div class="text-xs text-muted">
+          <slot name="subtitle" />
+        </div>
+      </div>
+    </div>
+    <div class="flex items-center gap-2 shrink-0">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/MLProcessing/TopBar.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    title: string;
+    status?: 'queued' | 'running' | 'succeeded' | 'failed' | null;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    subtitle?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    status: "queued" | "running" | "succeeded" | "failed" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MLUploader/ButtonUploader.d.vue.ts

@@ -0,0 +1,55 @@
+type __VLS_Props = {
+    resourceType: string;
+    collectionName?: string | null;
+    chunkUploader?: Record<string, any> | string;
+    label?: string;
+    uploadingLabel?: string;
+    uploadedLabel?: string;
+    processingLabel?: string;
+    readyLabel?: string;
+    errorLabel?: string;
+    fileTypeErrorText?: string;
+    fileTooLargeText?: string;
+    fileTooSmallText?: string;
+    uploadFailedText?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (message: string) => any;
+    progress: (percent: number) => any;
+    uploaded: (assetIds: string[]) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: ((message: string) => any) | undefined;
+    onProgress?: ((percent: number) => any) | undefined;
+    onUploaded?: ((assetIds: string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    label: string;
+    uploadingLabel: string;
+    uploadedLabel: string;
+    processingLabel: string;
+    readyLabel: string;
+    errorLabel: string;
+    fileTypeErrorText: string;
+    fileTooLargeText: string;
+    fileTooSmallText: string;
+    uploadFailedText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MLUploader/ButtonUploader.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useMLChunkUploader, useMLResourcePolicy } from "../../index";
+import { useMLProcessingStatus } from "../../composables/useMLProcessingStatus";
+import { buildAcceptAttribute, isFileMimeAllowed } from "../../composables/resourcePolicy/mimeUtils";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  resourceType: { type: String, required: true },
+  collectionName: { type: [String, null], required: false },
+  chunkUploader: { type: [Object, String], required: false },
+  label: { type: String, required: false, default: "Upload" },
+  uploadingLabel: { type: String, required: false, default: "{percent}%" },
+  uploadedLabel: { type: String, required: false, default: "Uploaded" },
+  processingLabel: { type: String, required: false, default: "Processing\u2026" },
+  readyLabel: { type: String, required: false, default: "Ready" },
+  errorLabel: { type: String, required: false, default: "Error" },
+  fileTypeErrorText: { type: String, required: false, default: "File type is not allowed." },
+  fileTooLargeText: { type: String, required: false, default: "File is larger than the maximum allowed size." },
+  fileTooSmallText: { type: String, required: false, default: "File is smaller than the minimum allowed size." },
+  uploadFailedText: { type: String, required: false, default: "Upload failed." }
+});
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+const emit = defineEmits(["uploaded", "error", "progress"]);
+const fileInput = ref(null);
+const policy = ref(null);
+const status = ref("idle");
+const percent = ref(0);
+const uploadedAssetId = ref(null);
+const popoverOpen = ref(false);
+const { track } = useMLProcessingStatus();
+let processingStream = null;
+let checkInterval = null;
+const parsedChunkUploader = computed(() => {
+  if (!props.chunkUploader) return void 0;
+  if (typeof props.chunkUploader === "string") {
+    try {
+      return JSON.parse(props.chunkUploader);
+    } catch {
+      return void 0;
+    }
+  }
+  return props.chunkUploader;
+});
+const { uploadFile, abort } = useMLChunkUploader(parsedChunkUploader.value);
+onMounted(async () => {
+  try {
+    const resourcePolicy = useMLResourcePolicy();
+    policy.value = await resourcePolicy.refreshByTypeCollection(
+      props.resourceType,
+      props.collectionName
+    );
+  } catch (err) {
+    console.error("Failed to load resource policy", err);
+  }
+});
+onUnmounted(() => {
+  processingStream?.close();
+  if (checkInterval) clearInterval(checkInterval);
+});
+const acceptTypes = computed(() => {
+  const allowed = policy.value?.file_constraints?.allowed_mime_types;
+  return allowed?.length ? buildAcceptAttribute(allowed) : void 0;
+});
+const isUploading = computed(() => status.value === "uploading");
+const isProcessing = computed(() => status.value === "processing");
+const showPopover = computed(
+  () => !!uploadedAssetId.value && (status.value === "processing" || status.value === "ready" || status.value === "error")
+);
+const currentLabel = computed(() => {
+  switch (status.value) {
+    case "uploading":
+      return props.uploadingLabel.replace("{percent}", percent.value.toFixed(0));
+    case "uploaded":
+      return props.uploadedLabel;
+    case "processing":
+      return props.processingLabel;
+    case "ready":
+      return props.readyLabel;
+    case "error":
+      return props.errorLabel;
+    default:
+      return props.label;
+  }
+});
+const buttonColor = computed(() => {
+  if (status.value === "ready") return "success";
+  if (status.value === "error") return "error";
+  if (status.value === "processing") return "warning";
+  return "primary";
+});
+const buttonIcon = computed(() => {
+  if (status.value === "processing") return "i-lucide-loader";
+  if (status.value === "ready") return "i-lucide-check";
+  if (status.value === "error") return "i-lucide-alert-circle";
+  return void 0;
+});
+const validateFile = (file) => {
+  const constraints = policy.value?.file_constraints;
+  if (!constraints) return null;
+  if (constraints.allowed_mime_types?.length) {
+    if (!isFileMimeAllowed(file, constraints.allowed_mime_types)) {
+      return props.fileTypeErrorText;
+    }
+  }
+  if (constraints.max_size_bytes != null && file.size > constraints.max_size_bytes) {
+    return props.fileTooLargeText;
+  }
+  if (constraints.min_size_bytes != null && file.size < constraints.min_size_bytes) {
+    return props.fileTooSmallText;
+  }
+  return null;
+};
+const triggerFileSelect = () => {
+  fileInput.value?.click();
+};
+const onPick = async (e) => {
+  const input = e.target;
+  const file = input?.files?.[0];
+  if (!file) return;
+  input.value = "";
+  if (!policy.value) {
+    status.value = "error";
+    emit("error", "Resource policy not loaded yet.");
+    return;
+  }
+  const validationError = validateFile(file);
+  if (validationError) {
+    status.value = "error";
+    emit("error", validationError);
+    return;
+  }
+  status.value = "uploading";
+  percent.value = 0;
+  try {
+    const res = await uploadFile(file, {
+      create: {
+        resource_type: props.resourceType,
+        collection_name: props.collectionName ?? null
+      },
+      onProgress(p) {
+        percent.value = p.percent;
+        emit("progress", p.percent);
+      },
+      onState(_s) {
+      }
+    });
+    const assetIds = Array.isArray(res?.finalize?.asset_ids) ? res.finalize.asset_ids : res?.finalize?.asset_id ? [res.finalize.asset_id] : [];
+    model.value = assetIds;
+    emit("uploaded", assetIds);
+    if (assetIds.length > 0) {
+      uploadedAssetId.value = assetIds[0];
+      status.value = "processing";
+      processingStream = track(assetIds[0]);
+      popoverOpen.value = true;
+      checkInterval = setInterval(() => {
+        if (processingStream?.isComplete.value) {
+          status.value = "ready";
+          if (checkInterval) clearInterval(checkInterval);
+        }
+        if (processingStream?.isFailed.value) {
+          status.value = "error";
+          if (checkInterval) clearInterval(checkInterval);
+        }
+      }, 500);
+    } else {
+      status.value = "uploaded";
+    }
+  } catch (err) {
+    status.value = "error";
+    emit("error", props.uploadFailedText);
+  }
+};
+</script>
+
+<template>
+  <UPopover
+    v-if="showPopover"
+    v-model:open="popoverOpen"
+    mode="click"
+    :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
+  >
+    <UButton
+      v-bind="$attrs"
+      :loading="isUploading"
+      :label="currentLabel"
+      :color="buttonColor"
+      :icon="buttonIcon"
+    >
+      <slot />
+    </UButton>
+    <template #content>
+      <div class="w-96 max-h-112 overflow-y-auto p-1">
+        <MLProcessingPipeline
+          :asset-id="uploadedAssetId"
+          @complete="status = 'ready'"
+          @failed="status = 'error'"
+        />
+      </div>
+    </template>
+  </UPopover>
+  <UButton
+    v-else
+    v-bind="$attrs"
+    :loading="isUploading"
+    :label="currentLabel"
+    @click="triggerFileSelect"
+  >
+    <slot />
+  </UButton>
+  <input ref="fileInput" type="file" class="hidden" :accept="acceptTypes" @change="onPick" />
+</template>

package/dist/runtime/components/MLUploader/ButtonUploader.vue.d.ts

@@ -0,0 +1,55 @@
+type __VLS_Props = {
+    resourceType: string;
+    collectionName?: string | null;
+    chunkUploader?: Record<string, any> | string;
+    label?: string;
+    uploadingLabel?: string;
+    uploadedLabel?: string;
+    processingLabel?: string;
+    readyLabel?: string;
+    errorLabel?: string;
+    fileTypeErrorText?: string;
+    fileTooLargeText?: string;
+    fileTooSmallText?: string;
+    uploadFailedText?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (message: string) => any;
+    progress: (percent: number) => any;
+    uploaded: (assetIds: string[]) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: ((message: string) => any) | undefined;
+    onProgress?: ((percent: number) => any) | undefined;
+    onUploaded?: ((assetIds: string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    label: string;
+    uploadingLabel: string;
+    uploadedLabel: string;
+    processingLabel: string;
+    readyLabel: string;
+    errorLabel: string;
+    fileTypeErrorText: string;
+    fileTooLargeText: string;
+    fileTooSmallText: string;
+    uploadFailedText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MLUploader/Item.d.vue.ts

@@ -0,0 +1,34 @@
+import type { ResourcePolicyResponse } from "../../index.js";
+type __VLS_Props = {
+    file: File;
+    resourceType: string;
+    collectionName?: string | null;
+    policy: ResourcePolicyResponse;
+    chunkUploader?: Record<string, any> | string;
+    noPreviewText?: string;
+    uploadedText?: string;
+    errorText?: string;
+    uploadingText?: string;
+    uploadFailedText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+    error: (message: string) => any;
+    progress: (percent: number) => any;
+    uploaded: (assetIds: string[]) => any;
+    canceled: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    onError?: ((message: string) => any) | undefined;
+    onProgress?: ((percent: number) => any) | undefined;
+    onUploaded?: ((assetIds: string[]) => any) | undefined;
+    onCanceled?: (() => any) | undefined;
+}>, {
+    uploadFailedText: string;
+    noPreviewText: string;
+    uploadedText: string;
+    errorText: string;
+    uploadingText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;