@cliff-studio/sanity-plugin-bunny-input 2.0.0 → 2.0.1

package/dist/index.js

@@ -1,5 +1,860 @@
-import "sanity";
-import { bunnyInput, getMp4Url, getPlaybackUrl, getThumbnailUrl } from "./_chunks-es/index.js";
+import { set, unset, defineType, defineField, definePlugin } from "sanity";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Dialog, Box, TextInput, Card, Text, Flex, Spinner, Grid, Stack, Button } from "@sanity/ui";
+import { UploadIcon } from "@sanity/icons/Upload";
+import { SearchIcon } from "@sanity/icons/Search";
+import { VideoIcon } from "@sanity/icons/Video";
+const BUNNY_API_BASE = "https://video.bunnycdn.com";
+function mapBunnyStatus(status) {
+  switch (status) {
+    case 0:
+    // created
+    case 1:
+      return "uploading";
+    case 2:
+    // processing
+    case 3:
+      return "processing";
+    case 4:
+      return "ready";
+    case 5:
+    // error
+    default:
+      return "error";
+  }
+}
+function getThumbnailUrl(cdnHostname, videoId) {
+  return `https://${cdnHostname}/${videoId}/thumbnail.jpg`;
+}
+function getPlaybackUrl(cdnHostname, videoId) {
+  return `https://${cdnHostname}/${videoId}/playlist.m3u8`;
+}
+function getMp4Url(cdnHostname, videoId, availableResolutions = "") {
+  const parsedResolutions = (availableResolutions || "").split(",").map((s) => Number.parseInt(String(s.trim()).replace(/p$/i, ""), 10)).filter((n) => Number.isFinite(n)), bestResolution = parsedResolutions.length ? Math.max(...parsedResolutions) : 720;
+  return `https://${cdnHostname}/${videoId}/play_${bestResolution}p.mp4`;
+}
+function createHeaders(config, includeJsonContentType = !1, useDirectApi = !1) {
+  const headers = {
+    Accept: "application/json"
+  };
+  return includeJsonContentType && (headers["Content-Type"] = "application/json"), config.apiKey && (useDirectApi || !config.proxyEndpoint) && (headers.AccessKey = config.apiKey), headers;
+}
+function getCollectionListUrl(config, searchTerm) {
+  return config.proxyEndpoint && !config.apiKey ? `${config.proxyEndpoint}/collections?search=${encodeURIComponent(searchTerm)}` : `${BUNNY_API_BASE}/library/${config.libraryId}/collections?search=${encodeURIComponent(
+    searchTerm
+  )}&page=1&itemsPerPage=100`;
+}
+function getCreateCollectionUrl(config) {
+  return config.proxyEndpoint && !config.apiKey ? `${config.proxyEndpoint}/collections` : `${BUNNY_API_BASE}/library/${config.libraryId}/collections`;
+}
+async function getCollectionList(config, searchTerm) {
+  const url = getCollectionListUrl(config, searchTerm), response = await fetch(url, {
+    headers: createHeaders(config, !1, !config.proxyEndpoint || !!config.apiKey)
+  });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Failed to list collections: ${error}`);
+  }
+  return (await response.json()).items || [];
+}
+async function getOrCreateCollection(config, collectionName) {
+  const normalizedCollectionName = collectionName?.trim();
+  if (!normalizedCollectionName)
+    throw new Error("Collection name cannot be empty");
+  const existingCollection = (await getCollectionList(config, normalizedCollectionName)).find(
+    (collection) => collection.name?.toLowerCase() === normalizedCollectionName.toLowerCase()
+  );
+  if (existingCollection)
+    return existingCollection;
+  const response = await fetch(getCreateCollectionUrl(config), {
+    method: "POST",
+    headers: createHeaders(config, !0, !config.proxyEndpoint || !!config.apiKey),
+    body: JSON.stringify({ name: normalizedCollectionName })
+  });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Failed to create collection: ${error}`);
+  }
+  return response.json();
+}
+async function createVideo(config, title, collectionId) {
+  const url = config.proxyEndpoint ? `${config.proxyEndpoint}/create` : `${BUNNY_API_BASE}/library/${config.libraryId}/videos`, headers = createHeaders(config, !0), response = await fetch(url, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      title,
+      ...collectionId ? { collectionId } : {}
+    })
+  });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Failed to create video: ${error}`);
+  }
+  return response.json();
+}
+async function uploadVideo(config, videoId, file, onProgress) {
+  const url = config.proxyEndpoint ? `${config.proxyEndpoint}/upload/${videoId}` : `${BUNNY_API_BASE}/library/${config.libraryId}/videos/${videoId}`;
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener("progress", (event) => {
+      if (event.lengthComputable && onProgress) {
+        const progress = Math.round(event.loaded / event.total * 100);
+        onProgress(progress);
+      }
+    }), xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300)
+        try {
+          const response = JSON.parse(xhr.responseText);
+          resolve(response);
+        } catch {
+          resolve({ success: !0, message: "OK" });
+        }
+      else
+        reject(new Error(`Upload failed: ${xhr.statusText}`));
+    }), xhr.addEventListener("error", () => {
+      reject(new Error("Upload failed: Network error"));
+    }), xhr.open("PUT", url), xhr.setRequestHeader("Accept", "application/json"), !config.proxyEndpoint && config.apiKey && xhr.setRequestHeader("AccessKey", config.apiKey), xhr.send(file);
+  });
+}
+async function getVideo(config, videoId) {
+  const url = config.proxyEndpoint ? `${config.proxyEndpoint}/video/${videoId}` : `${BUNNY_API_BASE}/library/${config.libraryId}/videos/${videoId}`, headers = createHeaders(config), response = await fetch(url, { headers });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Failed to get video: ${error}`);
+  }
+  return response.json();
+}
+async function listVideos(config, { collectionId, search = "", page = 1, itemsPerPage = 50 } = {}) {
+  const params = new URLSearchParams({
+    page: String(page),
+    itemsPerPage: String(itemsPerPage),
+    orderBy: "date"
+  });
+  collectionId && params.set("collection", collectionId), search && params.set("search", search);
+  const url = config.proxyEndpoint ? `${config.proxyEndpoint}/videos?${params}` : `${BUNNY_API_BASE}/library/${config.libraryId}/videos?${params}`, response = await fetch(url, {
+    headers: createHeaders(config, !1, !config.proxyEndpoint || !!config.apiKey)
+  });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Failed to list videos: ${error}`);
+  }
+  const payload = await response.json();
+  return {
+    items: payload.items || [],
+    totalItems: payload.totalItems ?? 0,
+    currentPage: payload.currentPage ?? page,
+    itemsPerPage: payload.itemsPerPage ?? itemsPerPage
+  };
+}
+async function deleteVideo(config, videoId) {
+  const url = config.proxyEndpoint ? `${config.proxyEndpoint}/video/${videoId}` : `${BUNNY_API_BASE}/library/${config.libraryId}/videos/${videoId}`, headers = createHeaders(config), response = await fetch(url, {
+    method: "DELETE",
+    headers
+  });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`Failed to delete video: ${error}`);
+  }
+  return response.json();
+}
+const ITEMS_PER_PAGE = 48;
+function BunnyBrowserModal({ config, collectionId: collectionIdProp, onSelect, onClose }) {
+  const [videos, setVideos] = useState([]), [search, setSearch] = useState(""), [page, setPage] = useState(1), [totalItems, setTotalItems] = useState(0), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), [resolvedCollectionId, setResolvedCollectionId] = useState(collectionIdProp || null), searchTimeoutRef = useRef(null), fetchVideos = useCallback(
+    async (searchTerm, pageNum, collId) => {
+      setIsLoading(!0), setError(null);
+      try {
+        const result = await listVideos(config, {
+          collectionId: collId,
+          search: searchTerm,
+          page: pageNum,
+          itemsPerPage: ITEMS_PER_PAGE
+        });
+        setVideos(result.items), setTotalItems(result.totalItems);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load videos");
+      } finally {
+        setIsLoading(!1);
+      }
+    },
+    [config]
+  );
+  useEffect(() => {
+    async function init() {
+      let collId = collectionIdProp || null;
+      if (!collId && config.collectionName)
+        try {
+          collId = (await getOrCreateCollection(config, config.collectionName)).guid, setResolvedCollectionId(collId);
+        } catch (err) {
+          console.warn("Could not resolve collection, browsing full library:", err);
+        }
+      fetchVideos("", 1, collId);
+    }
+    init();
+  }, []);
+  const handleSearchChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      setSearch(value), setPage(1), searchTimeoutRef.current && clearTimeout(searchTimeoutRef.current), searchTimeoutRef.current = setTimeout(() => {
+        fetchVideos(value, 1, resolvedCollectionId);
+      }, 400);
+    },
+    [fetchVideos, resolvedCollectionId]
+  ), handlePageChange = useCallback(
+    (newPage) => {
+      setPage(newPage), fetchVideos(search, newPage, resolvedCollectionId);
+    },
+    [fetchVideos, search, resolvedCollectionId]
+  ), handleSelect = useCallback(
+    (video) => {
+      if (mapBunnyStatus(video.status) !== "ready") return;
+      const width = Number(video.width), height = Number(video.height), hasDims = Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0, ratio = hasDims ? Number((width / height).toFixed(6)) : null, orientation = hasDims ? width > height ? "landscape" : width < height ? "portrait" : "square" : null;
+      onSelect({
+        _type: "bunnyVideo",
+        videoId: video.guid,
+        libraryId: String(video.videoLibraryId),
+        title: video.title,
+        status: "ready",
+        duration: video.length,
+        width: hasDims ? width : null,
+        height: hasDims ? height : null,
+        ratio,
+        orientation,
+        thumbnailUrl: getThumbnailUrl(config.cdnHostname, video.guid),
+        playbackUrl: getPlaybackUrl(config.cdnHostname, video.guid),
+        mp4Url: getMp4Url(config.cdnHostname, video.guid, video.availableResolutions),
+        ...resolvedCollectionId ? { collectionId: resolvedCollectionId } : {},
+        ...video.collectionId ? { collectionId: video.collectionId } : {}
+      });
+    },
+    [config, resolvedCollectionId, onSelect]
+  ), totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      header: "Browse videos",
+      id: "bunny-browser-modal",
+      onClose,
+      width: 3,
+      children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
+        /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            icon: SearchIcon,
+            placeholder: "Search videos\u2026",
+            value: search,
+            onChange: handleSearchChange
+          }
+        ) }),
+        error && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", marginBottom: 4, children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
+        isLoading ? /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", padding: 6, children: /* @__PURE__ */ jsx(Spinner, {}) }) : videos.length === 0 ? /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", padding: 6, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: search ? "No videos found matching your search" : "No videos in this collection" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Grid, { columns: [2, 2, 3, 4], gap: 3, children: videos.map((video) => {
+            const status = mapBunnyStatus(video.status), isReady = status === "ready", thumbUrl = getThumbnailUrl(config.cdnHostname, video.guid);
+            return /* @__PURE__ */ jsxs(
+              Card,
+              {
+                radius: 2,
+                shadow: 1,
+                style: {
+                  cursor: isReady ? "pointer" : "not-allowed",
+                  opacity: isReady ? 1 : 0.5
+                },
+                onClick: () => isReady && handleSelect(video),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      style: {
+                        position: "relative",
+                        paddingBottom: "56.25%",
+                        backgroundColor: "#111",
+                        borderRadius: "2px",
+                        overflow: "hidden"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: thumbUrl,
+                            alt: video.title || "Video thumbnail",
+                            style: {
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              width: "100%",
+                              height: "100%",
+                              objectFit: "cover"
+                            }
+                          }
+                        ),
+                        !isReady && /* @__PURE__ */ jsx(
+                          Flex,
+                          {
+                            align: "center",
+                            justify: "center",
+                            style: {
+                              position: "absolute",
+                              inset: 0,
+                              backgroundColor: "rgba(0,0,0,0.5)"
+                            },
+                            children: /* @__PURE__ */ jsx(Text, { size: 0, style: { color: "#fff" }, children: status === "processing" ? "Processing\u2026" : status })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+                    /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: video.title || "Untitled" }),
+                    video.length > 0 && /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+                      Math.floor(video.length / 60),
+                      ":",
+                      String(Math.floor(video.length % 60)).padStart(2, "0")
+                    ] })
+                  ] }) })
+                ]
+              },
+              video.guid
+            );
+          }) }),
+          totalPages > 1 && /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "center", gap: 2, marginTop: 4, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                text: "Previous",
+                mode: "ghost",
+                disabled: page <= 1,
+                onClick: () => handlePageChange(page - 1)
+              }
+            ),
+            /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+              "Page ",
+              page,
+              " of ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                text: "Next",
+                mode: "ghost",
+                disabled: page >= totalPages,
+                onClick: () => handlePageChange(page + 1)
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function BunnyInput(props) {
+  const { value, onChange, config } = props, [uploadProgress, setUploadProgress] = useState(0), [isUploading, setIsUploading] = useState(!1), [error, setError] = useState(null), [isBrowserOpen, setIsBrowserOpen] = useState(!1), fileInputRef = useRef(null), pollIntervalRef = useRef(null);
+  useEffect(() => (value?.videoId && value?.status === "processing" && (pollIntervalRef.current = window.setInterval(async () => {
+    try {
+      const videoData = await getVideo(config, value.videoId), status = mapBunnyStatus(videoData.status);
+      if (status === "ready" || status === "error") {
+        pollIntervalRef.current && (clearInterval(pollIntervalRef.current), pollIntervalRef.current = null);
+        const width = Number(videoData.width), height = Number(videoData.height), hasDims = Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0, ratio = hasDims ? Number((width / height).toFixed(6)) : null, orientation = hasDims ? width > height ? "landscape" : width < height ? "portrait" : "square" : null;
+        onChange(
+          set({
+            ...value,
+            status,
+            duration: videoData.length,
+            height: hasDims ? height : null,
+            width: hasDims ? width : null,
+            ratio,
+            orientation,
+            thumbnailUrl: getThumbnailUrl(config.cdnHostname, value.videoId),
+            playbackUrl: getPlaybackUrl(config.cdnHostname, value.videoId),
+            mp4Url: getMp4Url(
+              config.cdnHostname,
+              value.videoId,
+              videoData.availableResolutions
+            )
+          })
+        );
+      }
+    } catch (err) {
+      console.error("Error polling video status:", err);
+    }
+  }, 5e3)), () => {
+    pollIntervalRef.current && clearInterval(pollIntervalRef.current);
+  }), [value?.videoId, value?.status, config, onChange, value]);
+  const handleFileSelect = useCallback(
+    async (file) => {
+      if (!file.type.startsWith("video/")) {
+        setError("Please select a video file");
+        return;
+      }
+      setError(null), setIsUploading(!0), setUploadProgress(0);
+      try {
+        const title = file.name.replace(/\.[^/.]+$/, "");
+        let collectionId = config.collectionId, collectionName = config.collectionName;
+        if (!collectionId && collectionName) {
+          const collection = await getOrCreateCollection(config, collectionName);
+          collectionId = collection.guid, collectionName = collection.name;
+        }
+        const created = await createVideo(config, title, collectionId);
+        onChange(
+          set({
+            _type: "bunnyVideo",
+            videoId: created.guid,
+            libraryId: String(created.videoLibraryId),
+            title,
+            status: "uploading",
+            ...collectionId ? { collectionId } : {},
+            ...collectionName ? { collectionName } : {}
+          })
+        ), await uploadVideo(config, created.guid, file, setUploadProgress), onChange(
+          set({
+            _type: "bunnyVideo",
+            videoId: created.guid,
+            libraryId: String(created.videoLibraryId),
+            title,
+            status: "processing",
+            ...collectionId ? { collectionId } : {},
+            ...collectionName ? { collectionName } : {}
+          })
+        );
+      } catch (err) {
+        console.error("Upload error:", err), setError(err instanceof Error ? err.message : "Upload failed"), onChange(
+          set({
+            ...value,
+            status: "error",
+            errorMessage: err instanceof Error ? err.message : "Upload failed"
+          })
+        );
+      } finally {
+        setIsUploading(!1), setUploadProgress(0);
+      }
+    },
+    [config, onChange, value]
+  ), handleInputChange = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      file && handleFileSelect(file);
+    },
+    [handleFileSelect]
+  ), handleBrowseSelect = useCallback(
+    (videoData) => {
+      setIsBrowserOpen(!1), onChange(set(videoData));
+    },
+    [onChange]
+  ), handleRemove = useCallback(async () => {
+    if (value?.videoId)
+      try {
+        await deleteVideo(config, value.videoId);
+      } catch (err) {
+        console.error("Error deleting from Bunny:", err);
+      }
+    onChange(unset());
+  }, [config, value, onChange]);
+  return value?.videoId && value?.status === "ready" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            position: "relative",
+            paddingBottom: "56.25%",
+            backgroundColor: "#000",
+            borderRadius: "4px",
+            overflow: "hidden"
+          },
+          children: value.thumbnailUrl && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: value.thumbnailUrl,
+              alt: value.title || "Video thumbnail",
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "contain"
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: value.title }),
+          value.duration && /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+            Math.floor(value.duration / 60),
+            ":",
+            String(Math.floor(value.duration % 60)).padStart(2, "0")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Browse",
+              mode: "ghost",
+              onClick: () => setIsBrowserOpen(!0)
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { text: "Remove", tone: "critical", mode: "ghost", onClick: handleRemove })
+        ] })
+      ] })
+    ] }) }),
+    isBrowserOpen && /* @__PURE__ */ jsx(
+      BunnyBrowserModal,
+      {
+        config,
+        collectionId: value.collectionId || config.collectionId,
+        onSelect: handleBrowseSelect,
+        onClose: () => setIsBrowserOpen(!1)
+      }
+    )
+  ] }) : value?.status === "processing" ? /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", justify: "center", gap: 3, children: [
+    /* @__PURE__ */ jsx(Spinner, {}),
+    /* @__PURE__ */ jsx(Text, { size: 1, children: "Processing video..." }),
+    /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: "This may take a few minutes" })
+  ] }) }) : isUploading ? /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", justify: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+        "Uploading... ",
+        uploadProgress,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          height: "4px",
+          backgroundColor: "#e5e5e5",
+          borderRadius: "2px",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              height: "100%",
+              width: `${uploadProgress}%`,
+              backgroundColor: "#2563eb",
+              transition: "width 0.3s ease"
+            }
+          }
+        )
+      }
+    )
+  ] }) }) : error || value?.status === "error" ? /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "critical", children: /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+      "Error: ",
+      error || value?.errorMessage
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "video/*",
+        onChange: handleInputChange
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { padding: 1 }, children: /* @__PURE__ */ jsx(Card, { tone: "inherit", border: !0, paddingX: 3, paddingY: 2, radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, justify: "space-between", children: [
+      /* @__PURE__ */ jsxs(Flex, { flex: 1, align: "center", gap: 3, children: [
+        /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: /* @__PURE__ */ jsx(VideoIcon, {}) }),
+        /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Drag or paste video here" })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, children: [
+        /* @__PURE__ */ jsxs("label", { style: { display: "contents" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              as: "span",
+              icon: UploadIcon,
+              text: "Upload",
+              mode: "bleed",
+              padding: 2,
+              style: { cursor: "pointer" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "video/*",
+              onChange: handleInputChange,
+              style: {
+                position: "absolute",
+                width: "1px",
+                height: "1px",
+                overflow: "hidden",
+                opacity: 0
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: SearchIcon,
+            text: "Select",
+            mode: "bleed",
+            padding: 2,
+            onClick: () => setIsBrowserOpen(!0)
+          }
+        )
+      ] })
+    ] }) }) }),
+    isBrowserOpen && /* @__PURE__ */ jsx(
+      BunnyBrowserModal,
+      {
+        config,
+        collectionId: config.collectionId,
+        onSelect: handleBrowseSelect,
+        onClose: () => setIsBrowserOpen(!1)
+      }
+    )
+  ] });
+}
+function BunnyPreview(props) {
+  const { title, status, thumbnailUrl } = props, statusColors = {
+    uploading: "#f59e0b",
+    processing: "#3b82f6",
+    ready: "#22c55e",
+    error: "#ef4444"
+  }, statusLabels = {
+    uploading: "Uploading",
+    processing: "Processing",
+    ready: "Ready",
+    error: "Error"
+  };
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, padding: 2, children: [
+    thumbnailUrl ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          width: 80,
+          height: 45,
+          borderRadius: 4,
+          overflow: "hidden",
+          backgroundColor: "#000",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: thumbnailUrl,
+            alt: title || "Video thumbnail",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          width: 80,
+          height: 45,
+          borderRadius: 4,
+          backgroundColor: "#e5e5e5",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: { opacity: 0.4 },
+            children: /* @__PURE__ */ jsx("polygon", { points: "5 3 19 12 5 21 5 3" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, style: { minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: 1,
+          weight: "semibold",
+          style: {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: title || "Untitled video"
+        }
+      ),
+      status && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              backgroundColor: statusColors[status] || "#9ca3af"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: statusLabels[status] || status })
+      ] })
+    ] })
+  ] });
+}
+const createBunnyVideoSchema = (config) => defineType({
+  type: "object",
+  title: "Bunny Video",
+  name: "bunnyVideo",
+  fields: [
+    defineField({
+      type: "string",
+      title: "Video ID",
+      name: "videoId",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Library ID",
+      name: "libraryId",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Collection ID",
+      name: "collectionId",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Collection name",
+      name: "collectionName",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Title",
+      name: "title"
+    }),
+    defineField({
+      type: "string",
+      title: "Status",
+      name: "status",
+      options: {
+        list: [
+          { title: "Uploading", value: "uploading" },
+          { title: "Processing", value: "processing" },
+          { title: "Ready", value: "ready" },
+          { title: "Error", value: "error" }
+        ]
+      },
+      readOnly: !0
+    }),
+    defineField({
+      type: "number",
+      title: "Video width",
+      name: "width",
+      readOnly: !0
+    }),
+    defineField({
+      type: "number",
+      title: "Video height",
+      name: "height",
+      readOnly: !0
+    }),
+    defineField({
+      type: "number",
+      title: "Video ratio",
+      name: "ratio",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Orientation",
+      name: "orientation",
+      options: {
+        list: [
+          { title: "Landscape", value: "landscape" },
+          { title: "Portrait", value: "portrait" },
+          { title: "Square", value: "square" }
+        ]
+      },
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Thumbnail URL",
+      name: "thumbnailUrl",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Playback URL",
+      name: "playbackUrl",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "MP4 URL",
+      name: "mp4Url",
+      readOnly: !0
+    }),
+    defineField({
+      type: "number",
+      title: "Duration (seconds)",
+      name: "duration",
+      readOnly: !0
+    }),
+    defineField({
+      type: "string",
+      title: "Error Message",
+      name: "errorMessage",
+      readOnly: !0,
+      hidden: !0
+    })
+  ],
+  components: {
+    input: (props) => BunnyInput({ ...props, config }),
+    preview: BunnyPreview
+  },
+  preview: {
+    select: {
+      title: "title",
+      status: "status",
+      thumbnailUrl: "thumbnailUrl"
+    }
+  }
+}), bunnyInput = definePlugin((config) => {
+  if (!config.libraryId)
+    throw new Error("sanity-plugin-bunny-input: libraryId is required");
+  if (!config.cdnHostname)
+    throw new Error("sanity-plugin-bunny-input: cdnHostname is required (e.g., vz-abc123-xyz.b-cdn.net)");
+  if (!config.apiKey && !config.proxyEndpoint)
+    throw new Error("sanity-plugin-bunny-input: Either apiKey or proxyEndpoint is required");
+  const normalizedCollectionName = typeof config.collectionName == "string" ? config.collectionName.trim() : void 0, pluginConfig = {
+    ...config,
+    ...normalizedCollectionName ? { collectionName: normalizedCollectionName } : {}
+  };
+  return {
+    name: "sanity-plugin-bunny-input",
+    schema: {
+      types: [createBunnyVideoSchema(pluginConfig)]
+    }
+  };
+});
 export {
   bunnyInput,
   getMp4Url,