@kimjansheden/payload-video-processor 0.1.1

package/dist/admin/VideoField.cjs

@@ -0,0 +1,737 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@payloadcms/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+if (typeof document !== "undefined") {
+  void import('../styles-GMHOOV63.css');
+}
+var isVideoVariantFieldConfig = (value) => {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value;
+  return typeof candidate.enqueuePath === "string" && typeof candidate.statusPath === "string" && typeof candidate.replaceOriginalPath === "string" && typeof candidate.removeVariantPath === "string" && typeof candidate.collectionSlug === "string" && typeof candidate.queueName === "string" && Boolean(candidate.presets) && typeof candidate.presets === "object";
+};
+var DEFAULT_CROP = {
+  x: 0,
+  y: 0,
+  width: 1,
+  height: 1
+};
+var resolveApiBase = (enqueuePath) => enqueuePath.replace(/\/video-queue\/enqueue$/, "");
+var formatProgress = (value) => {
+  if (typeof value !== "number") return "0%";
+  return `${Math.round(value)}%`;
+};
+var readVariantPreset = (variant) => {
+  if (!variant || typeof variant !== "object") return void 0;
+  if (typeof variant.preset === "string" && variant.preset.trim().length > 0) {
+    return variant.preset.trim();
+  }
+  return void 0;
+};
+var readVariantId = (variant) => {
+  const rawId = variant?.id;
+  if (typeof rawId === "string" && rawId.trim().length > 0) {
+    return rawId.trim();
+  }
+  return void 0;
+};
+var resolveVariantIdentifier = (variant, fallback) => {
+  return readVariantId(variant) ?? readVariantPreset(variant) ?? fallback ?? "variant";
+};
+var formatBytes = (value) => {
+  if (!value || Number.isNaN(value)) return "-";
+  const units = ["B", "KB", "MB", "GB"];
+  let size = value;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+};
+var formatSeconds = (value) => {
+  if (!value || Number.isNaN(value)) return "-";
+  if (value < 60) {
+    return `${value.toFixed(1)} s`;
+  }
+  const minutes = Math.floor(value / 60);
+  const seconds = Math.round(value % 60);
+  return `${minutes} min ${seconds}s`;
+};
+var VideoField = (props) => {
+  const { useEffect, useMemo, useState, useCallback } = React__default.default;
+  const { field } = props;
+  const { id } = ui.useDocumentInfo();
+  const custom = field.custom ?? (isVideoVariantFieldConfig(props) ? props : void 0);
+  const presets = custom?.presets ?? {};
+  const apiBase = useMemo(
+    () => custom ? resolveApiBase(custom.enqueuePath) : "/api",
+    [custom]
+  );
+  const presetNames = useMemo(() => Object.keys(presets), [presets]);
+  const docId = useMemo(() => {
+    if (typeof id === "undefined" || id === null) return null;
+    const value = String(id);
+    if (!value || value === "create") return null;
+    return value;
+  }, [id]);
+  const [EasyCrop, setEasyCrop] = useState(
+    null
+  );
+  useEffect(() => {
+    if (typeof window !== "undefined" && !EasyCrop) {
+      import('react-easy-crop').then((module) => {
+        setEasyCrop(() => module.default);
+      });
+    }
+  }, [EasyCrop]);
+  const [selectedPreset, setSelectedPreset] = useState(
+    presetNames[0]
+  );
+  const [docData, setDocData] = useState(null);
+  const [loadingDoc, setLoadingDoc] = useState(false);
+  const [error, setError] = useState(null);
+  const [message, setMessage] = useState(null);
+  const [jobStatus, setJobStatus] = useState(null);
+  const [pollingJobId, setPollingJobId] = useState(null);
+  const [variants, setVariants] = useState([]);
+  const [previewKey, setPreviewKey] = useState(null);
+  const [replaceLoading, setReplaceLoading] = useState(null);
+  const [deleteLoading, setDeleteLoading] = useState(null);
+  const [cropState, setCropState] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [cropSelection, setCropSelection] = useState(DEFAULT_CROP);
+  const messageClassName = message?.type === "error" ? "bg-rose-50 text-rose-700" : message?.type === "info" ? "bg-slate-50 text-slate-700" : "bg-emerald-50 text-emerald-700";
+  const sendEnqueueRequest = useCallback(
+    async ({
+      documentId,
+      presetName,
+      crop
+    }) => {
+      if (!custom) {
+        throw new Error("Video plugin is not configured.");
+      }
+      const response = await fetch(custom.enqueuePath, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          collection: custom.collectionSlug,
+          id: documentId,
+          preset: presetName,
+          crop
+        })
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        throw new Error(
+          payload?.error ?? `Request failed (${response.status})`
+        );
+      }
+      return await response.json();
+    },
+    [custom]
+  );
+  const sendRemoveVariantRequest = useCallback(
+    async ({
+      documentId,
+      preset: preset2,
+      variantId,
+      variantIndex
+    }) => {
+      if (!custom) {
+        throw new Error("Video plugin is not configured.");
+      }
+      const response = await fetch(custom.removeVariantPath, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          collection: custom.collectionSlug,
+          id: documentId,
+          preset: preset2,
+          variantId,
+          variantIndex
+        })
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        throw new Error(
+          payload?.error ?? `Request failed (${response.status})`
+        );
+      }
+      return await response.json();
+    },
+    [custom]
+  );
+  const sendReplaceOriginalRequest = useCallback(
+    async ({ documentId, preset: preset2 }) => {
+      if (!custom) {
+        throw new Error("Video plugin is not configured.");
+      }
+      const response = await fetch(custom.replaceOriginalPath, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          collection: custom.collectionSlug,
+          id: documentId,
+          preset: preset2
+        })
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        throw new Error(
+          payload?.error ?? `Request failed (${response.status})`
+        );
+      }
+      return await response.json();
+    },
+    [custom]
+  );
+  const bridgeEnqueue = useCallback(
+    async ({ mediaId, preset: preset2, crop }) => {
+      if (!mediaId) {
+        throw new Error("A media id is required to enqueue transcoding.");
+      }
+      if (!preset2) {
+        throw new Error("A preset name is required to enqueue transcoding.");
+      }
+      const job = await sendEnqueueRequest({
+        documentId: mediaId,
+        presetName: preset2,
+        crop
+      });
+      const jobId = typeof job.id === "string" || typeof job.id === "number" ? String(job.id) : "";
+      if (!jobId) {
+        throw new Error("Unable to determine job id returned by the server.");
+      }
+      return { jobId };
+    },
+    [sendEnqueueRequest]
+  );
+  const bridgeRemoveVariant = useCallback(
+    async ({
+      mediaId,
+      preset: preset2,
+      variantId,
+      variantIndex
+    }) => {
+      if (!mediaId) {
+        throw new Error("A media id is required to remove a variant.");
+      }
+      const payload = await sendRemoveVariantRequest({
+        documentId: mediaId,
+        preset: preset2,
+        variantId,
+        variantIndex
+      });
+      if (docId === mediaId) {
+        const nextDoc = payload?.doc;
+        if (nextDoc && typeof nextDoc === "object") {
+          setDocData(nextDoc);
+          const docVariants = Array.isArray(nextDoc?.variants) ? nextDoc.variants : [];
+          setVariants(docVariants);
+        } else {
+          setVariants(
+            (current) => current.filter((variant, index) => {
+              if (typeof variantIndex === "number" && variantIndex === index) {
+                return false;
+              }
+              if (variantId && readVariantId(variant) === variantId) {
+                return false;
+              }
+              if (preset2 && readVariantPreset(variant) === preset2) {
+                return false;
+              }
+              return true;
+            })
+          );
+        }
+      }
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("payload-video-plugin:change"));
+      }
+    },
+    [docId, sendRemoveVariantRequest]
+  );
+  const bridgeReplaceOriginal = useCallback(
+    async ({ mediaId, preset: preset2 }) => {
+      if (!mediaId) {
+        throw new Error("A media id is required to replace the original.");
+      }
+      const payload = await sendReplaceOriginalRequest({
+        documentId: mediaId,
+        preset: preset2
+      });
+      if (docId === mediaId) {
+        const nextDoc = payload?.doc;
+        if (nextDoc && typeof nextDoc === "object") {
+          setDocData(nextDoc);
+          const docVariants = Array.isArray(nextDoc?.variants) ? nextDoc.variants : [];
+          setVariants(docVariants);
+        }
+      }
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("payload-video-plugin:change"));
+      }
+    },
+    [docId, sendReplaceOriginalRequest]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || !custom) {
+      return;
+    }
+    const bridge = {
+      presets: presetNames,
+      enqueueTranscode: async (args) => {
+        const cropArg = args.crop;
+        const presetConfig = presets[args.preset];
+        const allowCrop = Boolean(presetConfig?.enableCrop);
+        return bridgeEnqueue({
+          mediaId: args.mediaId,
+          preset: args.preset,
+          crop: allowCrop ? cropArg : void 0
+        });
+      },
+      removeVariant: async (args) => bridgeRemoveVariant({
+        mediaId: args.mediaId,
+        preset: args.preset,
+        variantId: args.variantId,
+        variantIndex: args.variantIndex
+      }),
+      replaceOriginal: async (args) => bridgeReplaceOriginal({
+        mediaId: args.mediaId,
+        preset: args.preset
+      })
+    };
+    window.__PAYLOAD_VIDEO_PLUGIN__ = bridge;
+    window.dispatchEvent(new CustomEvent("payload-video-plugin:change"));
+    return () => {
+      if (window.__PAYLOAD_VIDEO_PLUGIN__?.enqueueTranscode === bridge.enqueueTranscode) {
+        delete window.__PAYLOAD_VIDEO_PLUGIN__;
+        window.dispatchEvent(new CustomEvent("payload-video-plugin:change"));
+      }
+    };
+  }, [
+    bridgeEnqueue,
+    bridgeRemoveVariant,
+    bridgeReplaceOriginal,
+    custom,
+    presetNames,
+    presets
+  ]);
+  useEffect(() => {
+    if (presetNames.length > 0 && !selectedPreset) {
+      setSelectedPreset(presetNames[0]);
+    }
+  }, [presetNames, selectedPreset]);
+  useEffect(() => {
+    if (!docId || !custom) {
+      setDocData(null);
+      setVariants([]);
+      setMessage(null);
+      return;
+    }
+    let cancelled = false;
+    const fetchDocument = async () => {
+      try {
+        setLoadingDoc(true);
+        setError(null);
+        setMessage(null);
+        const response = await fetch(
+          `${apiBase}/${custom.collectionSlug}/${docId}`,
+          {
+            credentials: "include"
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`Failed to load document (${response.status})`);
+        }
+        const payload = await response.json();
+        if (!cancelled) {
+          const nextDoc = payload.doc ?? payload;
+          setDocData(nextDoc);
+          const docVariants = Array.isArray(nextDoc?.variants) ? nextDoc.variants : [];
+          setVariants(docVariants);
+        }
+      } catch (fetchError) {
+        if (!cancelled) {
+          setError(
+            fetchError instanceof Error ? fetchError.message : "Failed to load document data."
+          );
+        }
+      } finally {
+        if (!cancelled) {
+          setLoadingDoc(false);
+        }
+      }
+    };
+    void fetchDocument();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBase, custom, docId, jobStatus?.state]);
+  const enqueue = useCallback(async () => {
+    if (!custom || !docId || !selectedPreset) return;
+    try {
+      setError(null);
+      const allowCrop = Boolean(presets[selectedPreset]?.enableCrop);
+      const data = await sendEnqueueRequest({
+        documentId: docId,
+        presetName: selectedPreset,
+        crop: allowCrop ? cropSelection : void 0
+      });
+      setJobStatus(data);
+      setPollingJobId(String(data.id));
+    } catch (enqueueError) {
+      setError(
+        enqueueError instanceof Error ? enqueueError.message : "Failed to enqueue job."
+      );
+    }
+  }, [
+    custom,
+    cropSelection,
+    docId,
+    presets,
+    selectedPreset,
+    sendEnqueueRequest
+  ]);
+  useEffect(() => {
+    if (!pollingJobId || !custom) return;
+    let active = true;
+    const interval = window.setInterval(async () => {
+      try {
+        const response = await fetch(`${custom.statusPath}/${pollingJobId}`, {
+          credentials: "include"
+        });
+        if (!response.ok) {
+          if (response.status === 404) {
+            if (active) {
+              setJobStatus(null);
+              setPollingJobId(null);
+            }
+            return;
+          }
+          throw new Error(`Status request failed (${response.status})`);
+        }
+        const payload = await response.json();
+        if (active) {
+          setJobStatus(payload);
+          if (payload.state === "completed" || payload.state === "failed") {
+            setPollingJobId(null);
+          }
+        }
+      } catch (statusError) {
+        if (active) {
+          setPollingJobId(null);
+          setError(
+            statusError instanceof Error ? statusError.message : "Status polling failed."
+          );
+        }
+      }
+    }, 1500);
+    return () => {
+      active = false;
+      window.clearInterval(interval);
+    };
+  }, [custom, pollingJobId]);
+  const preset = selectedPreset ? presets[selectedPreset] : void 0;
+  const cropEnabled = Boolean(preset?.enableCrop);
+  useEffect(() => {
+    if (!cropEnabled) {
+      setCropSelection(DEFAULT_CROP);
+      setCropState({ x: 0, y: 0 });
+      setZoom(1);
+    }
+  }, [cropEnabled]);
+  const handleCropComplete = useCallback(
+    (area) => {
+      setCropSelection({
+        width: area.width / 100,
+        height: area.height / 100,
+        x: area.x / 100,
+        y: area.y / 100
+      });
+    },
+    []
+  );
+  const handleTogglePreview = useCallback((key) => {
+    setPreviewKey((current) => current === key ? null : key);
+  }, []);
+  const handleReplaceOriginalVariant = useCallback(
+    async (variant) => {
+      if (!docId) {
+        setError("Document id is missing; save before replacing the original.");
+        return;
+      }
+      const preset2 = readVariantPreset(variant);
+      const identifier = resolveVariantIdentifier(variant, preset2 ?? "variant");
+      if (typeof window !== "undefined") {
+        const confirmation = window.confirm(
+          `Replace the original file with variant "${identifier}"?`
+        );
+        if (!confirmation) {
+          return;
+        }
+      }
+      setError(null);
+      setMessage(null);
+      setReplaceLoading(identifier);
+      try {
+        const payload = await sendReplaceOriginalRequest({
+          documentId: docId,
+          preset: preset2
+        });
+        const updatedDoc = payload?.doc;
+        if (updatedDoc && typeof updatedDoc === "object") {
+          setDocData(updatedDoc);
+          const docVariants = Array.isArray(updatedDoc?.variants) ? updatedDoc.variants : [];
+          setVariants(docVariants);
+        } else {
+          setVariants(
+            (current) => current.filter(
+              (candidate) => readVariantPreset(candidate) !== readVariantPreset(variant)
+            )
+          );
+        }
+        setPreviewKey((current) => current === identifier ? null : current);
+        setMessage({ type: "success", text: "Original video replaced." });
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(new CustomEvent("payload-video-plugin:change"));
+        }
+      } catch (replaceError) {
+        setError(
+          replaceError instanceof Error ? replaceError.message : "Failed to replace the original video."
+        );
+      } finally {
+        setReplaceLoading(null);
+      }
+    },
+    [docId, sendReplaceOriginalRequest]
+  );
+  const handleRemoveVariant = useCallback(
+    async (variant, index) => {
+      if (!docId) {
+        setError("Document id is missing; save before removing variants.");
+        return;
+      }
+      const fallbackIdentifier = `variant-${index + 1}`;
+      const identifier = resolveVariantIdentifier(variant, fallbackIdentifier);
+      if (typeof window !== "undefined") {
+        const confirmation = window.confirm(
+          `Remove variant "${identifier}"? This cannot be undone.`
+        );
+        if (!confirmation) {
+          return;
+        }
+      }
+      setError(null);
+      setMessage(null);
+      setDeleteLoading(identifier);
+      try {
+        const payload = await sendRemoveVariantRequest({
+          documentId: docId,
+          preset: readVariantPreset(variant),
+          variantId: readVariantId(variant),
+          variantIndex: index
+        });
+        const updatedDoc = payload?.doc;
+        if (updatedDoc && typeof updatedDoc === "object") {
+          setDocData(updatedDoc);
+          const docVariants = Array.isArray(updatedDoc?.variants) ? updatedDoc.variants : [];
+          setVariants(docVariants);
+        } else {
+          setVariants(
+            (current) => current.filter(
+              (_candidate, candidateIndex) => candidateIndex !== index
+            )
+          );
+        }
+        setPreviewKey((current) => current === identifier ? null : current);
+        setMessage({ type: "success", text: "Variant removed." });
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(new CustomEvent("payload-video-plugin:change"));
+        }
+      } catch (removeError) {
+        setError(
+          removeError instanceof Error ? removeError.message : "Failed to remove variant."
+        );
+      } finally {
+        setDeleteLoading(null);
+      }
+    },
+    [docId, sendRemoveVariantRequest]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-slate-200 bg-white/60 p-4 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-slate-700", children: field.label ?? "Video processor" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col text-xs font-medium text-slate-600", children: [
+          "Preset",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              className: "mt-1 w-48 rounded-lg border border-slate-300 bg-white px-2 py-1 text-sm focus:border-slate-500 focus:outline-none",
+              value: selectedPreset ?? "",
+              onChange: (event) => setSelectedPreset(event.target.value),
+              children: presetNames.map((name) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: name, children: presets[name]?.label ?? name }, name))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:bg-slate-400",
+            type: "button",
+            disabled: !docId || !selectedPreset,
+            onClick: enqueue,
+            children: "Enqueue variant"
+          }
+        ),
+        jobStatus ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-slate-600", children: [
+          "Job ",
+          jobStatus.id,
+          ": ",
+          jobStatus.state,
+          " \xB7",
+          " ",
+          formatProgress(jobStatus.progress)
+        ] }) : null,
+        custom?.queueName ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-slate-400", children: [
+          "Queue: ",
+          custom.queueName
+        ] }) : null
+      ] }),
+      !docId ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700", children: "Save the document before enqueuing video variants." }) : null,
+      error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-lg bg-rose-50 px-3 py-2 text-xs text-rose-700", children: error }) : null,
+      message ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: `rounded-lg px-3 py-2 text-xs ${messageClassName}`, children: message.text }) : null
+    ] }),
+    cropEnabled && docData?.url ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: "Crop" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video-crop-wrapper", children: EasyCrop ? /* @__PURE__ */ jsxRuntime.jsx(
+        EasyCrop,
+        {
+          video: docData.url,
+          crop: cropState,
+          zoom,
+          aspect: void 0,
+          onCropChange: setCropState,
+          onZoomChange: setZoom,
+          onCropComplete: handleCropComplete,
+          objectFit: "contain",
+          showGrid: true
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading cropper..." }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-xs text-slate-600", children: [
+        "Zoom",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "range",
+            min: 1,
+            max: 3,
+            step: 0.1,
+            value: zoom,
+            onChange: (event) => setZoom(Number(event.target.value)),
+            className: "w-48"
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-xs text-slate-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold uppercase tracking-wide text-slate-500", children: "Variants" }),
+      loadingDoc ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-500", children: "Loading document metadata\u2026" }) : null,
+      variants.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-lg bg-slate-100 px-3 py-2 text-xs text-slate-600", children: "No variants available yet. Enqueue a preset to generate a new version of the video." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: variants.map((variant, index) => {
+        const presetName = readVariantPreset(variant) ?? `Variant ${index + 1}`;
+        const identifier = resolveVariantIdentifier(
+          variant,
+          `variant-${index + 1}`
+        );
+        const url = typeof variant.url === "string" ? variant.url : void 0;
+        const previewing = previewKey === identifier;
+        const replacing = replaceLoading === identifier;
+        const deleting = deleteLoading === identifier;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-col gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-slate-700", children: presetName }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-slate-500", children: [
+                    formatBytes(variant.size),
+                    " \xB7",
+                    " ",
+                    formatSeconds(variant.duration)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  url ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      className: "rounded-lg border border-slate-300 px-3 py-1 text-xs font-medium text-slate-700 transition hover:border-slate-400 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-60",
+                      type: "button",
+                      onClick: () => handleTogglePreview(identifier),
+                      disabled: replacing || deleting,
+                      children: previewing ? "Close preview" : "Preview"
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      className: "rounded-lg bg-slate-900 px-3 py-1 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:bg-slate-400",
+                      type: "button",
+                      onClick: () => void handleReplaceOriginalVariant(variant),
+                      disabled: replacing || deleting,
+                      children: replacing ? "Replacing\u2026" : "Replace original"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      className: "rounded-lg border border-rose-300 px-3 py-1 text-xs font-semibold text-rose-700 transition hover:border-rose-400 hover:text-rose-900 disabled:cursor-not-allowed disabled:opacity-60",
+                      type: "button",
+                      onClick: () => void handleRemoveVariant(variant, index),
+                      disabled: deleting || replacing,
+                      children: deleting ? "Deleting\u2026" : "Delete"
+                    }
+                  )
+                ] })
+              ] }),
+              previewing && url ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border border-slate-200", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "video",
+                {
+                  className: "w-full bg-black",
+                  controls: true,
+                  preload: "metadata",
+                  src: url
+                }
+              ) }) : null
+            ]
+          },
+          `${identifier}-${index}`
+        );
+      }) })
+    ] })
+  ] });
+};
+var VideoField_default = VideoField;
+
+module.exports = VideoField_default;
+//# sourceMappingURL=VideoField.cjs.map
+//# sourceMappingURL=VideoField.cjs.map