@cliff-studio/sanity-plugin-bunny-input 1.1.0 → 1.2.0

package/dist/_chunks-es/index.js

@@ -1,7 +1,7 @@
 import { set, unset, defineType, defineField, definePlugin } from "sanity";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as r from "react";
-import r__default, { createElement, forwardRef, useLayoutEffect, createContext, useRef, useEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, useState, Fragment as Fragment$1, Component, useImperativeHandle, lazy, memo as memo$1, cloneElement, Suspense, useSyncExternalStore, useDebugValue, useReducer } from "react";
+import r__default, { createElement, forwardRef, useLayoutEffect, createContext, useRef, useEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, useState, Fragment as Fragment$1, Component, useImperativeHandle, useDebugValue, useSyncExternalStore, lazy, memo as memo$1, cloneElement, Suspense, useReducer } from "react";
 const COLOR_HUES = [
   "gray",
   "blue",
@@ -5096,6 +5096,29 @@ const CheckmarkIcon = /* @__PURE__ */ forwardRef(function(props, ref) {
       children: /* @__PURE__ */ jsx("path", { d: "M5 12.5H20", stroke: "currentColor", strokeWidth: 1.2, strokeLinejoin: "round" })
     }
   );
+}), SearchIcon = /* @__PURE__ */ forwardRef(function(props, ref) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-sanity-icon": "search",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      ref,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M15.0355 15.0355L20 20M16.5 11.5C16.5 14.2614 14.2614 16.5 11.5 16.5C8.73858 16.5 6.5 14.2614 6.5 11.5C6.5 8.73858 8.73858 6.5 11.5 6.5C14.2614 6.5 16.5 8.73858 16.5 11.5Z",
+          stroke: "currentColor",
+          strokeWidth: 1.2,
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
 }), SpinnerIcon = /* @__PURE__ */ forwardRef(function(props, ref) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -5142,6 +5165,75 @@ const CheckmarkIcon = /* @__PURE__ */ forwardRef(function(props, ref) {
       )
     }
   );
+}), UploadIcon = /* @__PURE__ */ forwardRef(function(props, ref) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-sanity-icon": "upload",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12.5 6V15.5M5.5 15.5H19.5V19.5H5.5V15.5Z",
+            stroke: "currentColor",
+            strokeWidth: 1.2,
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M7.5 11L12.5 6L17.5 11",
+            stroke: "currentColor",
+            strokeWidth: 1.2,
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}), VideoIcon = /* @__PURE__ */ forwardRef(function(props, ref) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-sanity-icon": "video",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M19.5 18.5H5.5V6.5H19.5V18.5Z",
+            stroke: "currentColor",
+            strokeWidth: 1.2,
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M11.5 14.5V10.5L14.5 12.5L11.5 14.5Z",
+            fill: "currentColor",
+            stroke: "currentColor",
+            strokeWidth: 1.2,
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
 }), sides = ["top", "right", "bottom", "left"], alignments = ["start", "end"], placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []), min = Math.min, max = Math.max, round = Math.round, floor = Math.floor, createCoords = (v2) => ({
   x: v2,
   y: v2
@@ -18588,6 +18680,28 @@ async function getVideo(config, videoId) {
   }
   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",
@@ -18599,8 +18713,197 @@ async function deleteVideo(config, videoId) {
   }
   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), fileInputRef = useRef(null), pollIntervalRef = useRef(null);
+  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);
@@ -18687,6 +18990,11 @@ function BunnyInput(props) {
       file && handleFileSelect(file);
     },
     [handleFileSelect]
+  ), handleBrowseSelect = useCallback(
+    (videoData) => {
+      setIsBrowserOpen(!1), onChange(set(videoData));
+    },
+    [onChange]
   ), handleRemove = useCallback(async () => {
     if (value?.videoId)
       try {
@@ -18696,46 +19004,67 @@ function BunnyInput(props) {
       }
     onChange(unset());
   }, [config, value, onChange]);
-  return value?.videoId && value?.status === "ready" ? /* @__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"
+  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, { 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 })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx(Button, { text: "Remove", tone: "critical", mode: "ghost", onClick: handleRemove })
-    ] })
-  ] }) }) : 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: [
+      ] })
+    ] }) }),
+    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" })
@@ -18784,15 +19113,64 @@ function BunnyInput(props) {
         onChange: handleInputChange
       }
     )
-  ] }) : /* @__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 = {
@@ -18958,6 +19336,19 @@ const createBunnyVideoSchema = (config) => defineType({
       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",