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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliff-studio/sanity-plugin-bunny-input",
-  "version": "1.0.9",
+  "version": "1.2.0",
   "description": "Sanity Studio plugin for uploading videos to Bunny Stream",
   "license": "MIT",
   "author": "Cliff Studio",
@@ -28,7 +28,7 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "sanity": "^3.0.0 || ^5.0.0",
+    "sanity": "^3.0.0 || ^5.0.0 || ^6.0.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {

package/src/api.js

@@ -250,6 +250,48 @@ export async function getVideo(config, videoId) {
   return response.json()
 }
 
+/**
+ * List videos in a collection (or entire library if no collectionId)
+ * @param {Object} config
+ * @param {Object} options
+ * @param {string} [options.collectionId]
+ * @param {string} [options.search]
+ * @param {number} [options.page]
+ * @param {number} [options.itemsPerPage]
+ * @returns {Promise<{items: Array, totalItems: number, currentPage: number, itemsPerPage: number}>}
+ */
+export async function listVideos(config, {collectionId, search = '', page = 1, itemsPerPage = 50} = {}) {
+  const params = new URLSearchParams({
+    page: String(page),
+    itemsPerPage: String(itemsPerPage),
+    orderBy: 'date',
+  })
+
+  if (collectionId) params.set('collection', collectionId)
+  if (search) params.set('search', search)
+
+  const url = config.proxyEndpoint
+    ? `${config.proxyEndpoint}/videos?${params}`
+    : `${BUNNY_API_BASE}/library/${config.libraryId}/videos?${params}`
+
+  const response = await fetch(url, {
+    headers: createHeaders(config, false, !config.proxyEndpoint || Boolean(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,
+  }
+}
+
 /**
  * Delete a video from Bunny Stream
  * @param {Object} config

package/src/components/BunnyBrowserModal.jsx

@@ -0,0 +1,254 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {Box, Button, Card, Dialog, Flex, Grid, Spinner, Stack, Text, TextInput} from '@sanity/ui'
+import {SearchIcon} from '@sanity/icons'
+import {listVideos, getThumbnailUrl, getPlaybackUrl, getMp4Url, mapBunnyStatus, getOrCreateCollection} from '../api'
+
+const ITEMS_PER_PAGE = 48
+
+export function BunnyBrowserModal({config, collectionId: collectionIdProp, onSelect, onClose}) {
+  const [videos, setVideos] = useState([])
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState(1)
+  const [totalItems, setTotalItems] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState(null)
+  // Resolved collection ID (may come from prop or be looked up from collectionName)
+  const [resolvedCollectionId, setResolvedCollectionId] = useState(collectionIdProp || null)
+  const searchTimeoutRef = useRef(null)
+
+  const fetchVideos = useCallback(
+    async (searchTerm, pageNum, collId) => {
+      setIsLoading(true)
+      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(false)
+      }
+    },
+    [config]
+  )
+
+  // Resolve collectionId from collectionName if needed, then fetch
+  useEffect(() => {
+    async function init() {
+      let collId = collectionIdProp || null
+
+      if (!collId && config.collectionName) {
+        try {
+          const collection = await getOrCreateCollection(config, config.collectionName)
+          collId = collection.guid
+          setResolvedCollectionId(collId)
+        } catch (err) {
+          // Fall back to browsing entire library if collection lookup fails
+          console.warn('Could not resolve collection, browsing full library:', err)
+        }
+      }
+
+      fetchVideos('', 1, collId)
+    }
+    init()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSearchChange = useCallback(
+    (e) => {
+      const value = e.target.value
+      setSearch(value)
+      setPage(1)
+      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current)
+      searchTimeoutRef.current = setTimeout(() => {
+        fetchVideos(value, 1, resolvedCollectionId)
+      }, 400)
+    },
+    [fetchVideos, resolvedCollectionId]
+  )
+
+  const handlePageChange = useCallback(
+    (newPage) => {
+      setPage(newPage)
+      fetchVideos(search, newPage, resolvedCollectionId)
+    },
+    [fetchVideos, search, resolvedCollectionId]
+  )
+
+  const handleSelect = useCallback(
+    (video) => {
+      const videoStatus = mapBunnyStatus(video.status)
+      if (videoStatus !== 'ready') return
+
+      const width = Number(video.width)
+      const height = Number(video.height)
+      const hasDims = Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0
+      const ratio = hasDims ? Number((width / height).toFixed(6)) : null
+      const 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]
+  )
+
+  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE)
+
+  return (
+    <Dialog
+      header="Browse videos"
+      id="bunny-browser-modal"
+      onClose={onClose}
+      width={3}
+    >
+      <Box padding={4}>
+        <Box marginBottom={4}>
+          <TextInput
+            icon={SearchIcon}
+            placeholder="Search videos…"
+            value={search}
+            onChange={handleSearchChange}
+          />
+        </Box>
+
+        {error && (
+          <Card padding={3} radius={2} tone="critical" marginBottom={4}>
+            <Text size={1}>{error}</Text>
+          </Card>
+        )}
+
+        {isLoading ? (
+          <Flex align="center" justify="center" padding={6}>
+            <Spinner />
+          </Flex>
+        ) : videos.length === 0 ? (
+          <Flex align="center" justify="center" padding={6}>
+            <Text muted size={1}>
+              {search ? 'No videos found matching your search' : 'No videos in this collection'}
+            </Text>
+          </Flex>
+        ) : (
+          <>
+            <Grid columns={[2, 2, 3, 4]} gap={3}>
+              {videos.map((video) => {
+                const status = mapBunnyStatus(video.status)
+                const isReady = status === 'ready'
+                const thumbUrl = getThumbnailUrl(config.cdnHostname, video.guid)
+
+                return (
+                  <Card
+                    key={video.guid}
+                    radius={2}
+                    shadow={1}
+                    style={{
+                      cursor: isReady ? 'pointer' : 'not-allowed',
+                      opacity: isReady ? 1 : 0.5,
+                    }}
+                    onClick={() => isReady && handleSelect(video)}
+                  >
+                    <Box
+                      style={{
+                        position: 'relative',
+                        paddingBottom: '56.25%',
+                        backgroundColor: '#111',
+                        borderRadius: '2px',
+                        overflow: 'hidden',
+                      }}
+                    >
+                      <img
+                        src={thumbUrl}
+                        alt={video.title || 'Video thumbnail'}
+                        style={{
+                          position: 'absolute',
+                          top: 0,
+                          left: 0,
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                        }}
+                      />
+                      {!isReady && (
+                        <Flex
+                          align="center"
+                          justify="center"
+                          style={{
+                            position: 'absolute',
+                            inset: 0,
+                            backgroundColor: 'rgba(0,0,0,0.5)',
+                          }}
+                        >
+                          <Text size={0} style={{color: '#fff'}}>
+                            {status === 'processing' ? 'Processing…' : status}
+                          </Text>
+                        </Flex>
+                      )}
+                    </Box>
+                    <Box padding={3}>
+                      <Stack space={2}>
+                        <Text size={1} weight="semibold">
+                          {video.title || 'Untitled'}
+                        </Text>
+                        {video.length > 0 && (
+                          <Text size={1} muted>
+                            {Math.floor(video.length / 60)}:
+                            {String(Math.floor(video.length % 60)).padStart(2, '0')}
+                          </Text>
+                        )}
+                      </Stack>
+                    </Box>
+                  </Card>
+                )
+              })}
+            </Grid>
+
+            {totalPages > 1 && (
+              <Flex align="center" justify="center" gap={2} marginTop={4}>
+                <Button
+                  text="Previous"
+                  mode="ghost"
+                  disabled={page <= 1}
+                  onClick={() => handlePageChange(page - 1)}
+                />
+                <Text size={1} muted>
+                  Page {page} of {totalPages}
+                </Text>
+                <Button
+                  text="Next"
+                  mode="ghost"
+                  disabled={page >= totalPages}
+                  onClick={() => handlePageChange(page + 1)}
+                />
+              </Flex>
+            )}
+          </>
+        )}
+      </Box>
+    </Dialog>
+  )
+}

package/src/components/BunnyInput.jsx

@@ -1,6 +1,7 @@
 import {useCallback, useEffect, useRef, useState} from 'react'
 import {set, unset} from 'sanity'
 import {Box, Button, Card, Flex, Spinner, Stack, Text} from '@sanity/ui'
+import {UploadIcon, SearchIcon, VideoIcon} from '@sanity/icons'
 import {
   createVideo,
   uploadVideo,
@@ -12,12 +13,14 @@ import {
   getPlaybackUrl,
   getMp4Url,
 } from '../api'
+import {BunnyBrowserModal} from './BunnyBrowserModal'
 
 export function BunnyInput(props) {
   const {value, onChange, config} = props
   const [uploadProgress, setUploadProgress] = useState(0)
   const [isUploading, setIsUploading] = useState(false)
   const [error, setError] = useState(null)
+  const [isBrowserOpen, setIsBrowserOpen] = useState(false)
   const fileInputRef = useRef(null)
   const pollIntervalRef = useRef(null)
 
@@ -162,6 +165,14 @@ export function BunnyInput(props) {
     [handleFileSelect]
   )
 
+  const handleBrowseSelect = useCallback(
+    (videoData) => {
+      setIsBrowserOpen(false)
+      onChange(set(videoData))
+    },
+    [onChange]
+  )
+
   const handleRemove = useCallback(async () => {
     if (value?.videoId) {
       try {
@@ -177,48 +188,65 @@ export function BunnyInput(props) {
   // Render video preview if we have one
   if (value?.videoId && value?.status === 'ready') {
     return (
-      <Card padding={3} radius={2} shadow={1}>
-        <Stack space={3}>
-          <Box
-            style={{
-              position: 'relative',
-              paddingBottom: '56.25%',
-              backgroundColor: '#000',
-              borderRadius: '4px',
-              overflow: 'hidden',
-            }}
-          >
-            {value.thumbnailUrl && (
-              <img
-                src={value.thumbnailUrl}
-                alt={value.title || 'Video thumbnail'}
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'contain',
-                }}
-              />
-            )}
-          </Box>
-          <Flex justify="space-between" align="center">
-            <Stack space={2}>
-              <Text size={1} weight="semibold">
-                {value.title}
-              </Text>
-              {value.duration && (
-                <Text size={1} muted>
-                  {Math.floor(value.duration / 60)}:
-                  {String(Math.floor(value.duration % 60)).padStart(2, '0')}
-                </Text>
+      <>
+        <Card padding={3} radius={2} shadow={1}>
+          <Stack space={3}>
+            <Box
+              style={{
+                position: 'relative',
+                paddingBottom: '56.25%',
+                backgroundColor: '#000',
+                borderRadius: '4px',
+                overflow: 'hidden',
+              }}
+            >
+              {value.thumbnailUrl && (
+                <img
+                  src={value.thumbnailUrl}
+                  alt={value.title || 'Video thumbnail'}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                  }}
+                />
               )}
-            </Stack>
-            <Button text="Remove" tone="critical" mode="ghost" onClick={handleRemove} />
-          </Flex>
-        </Stack>
-      </Card>
+            </Box>
+            <Flex justify="space-between" align="center">
+              <Stack space={2}>
+                <Text size={1} weight="semibold">
+                  {value.title}
+                </Text>
+                {value.duration && (
+                  <Text size={1} muted>
+                    {Math.floor(value.duration / 60)}:
+                    {String(Math.floor(value.duration % 60)).padStart(2, '0')}
+                  </Text>
+                )}
+              </Stack>
+              <Flex gap={2}>
+                <Button
+                  text="Browse"
+                  mode="ghost"
+                  onClick={() => setIsBrowserOpen(true)}
+                />
+                <Button text="Remove" tone="critical" mode="ghost" onClick={handleRemove} />
+              </Flex>
+            </Flex>
+          </Stack>
+        </Card>
+        {isBrowserOpen && (
+          <BunnyBrowserModal
+            config={config}
+            collectionId={value.collectionId || config.collectionId}
+            onSelect={handleBrowseSelect}
+            onClose={() => setIsBrowserOpen(false)}
+          />
+        )}
+      </>
     )
   }
 
@@ -285,13 +313,59 @@ export function BunnyInput(props) {
     )
   }
 
-  // Render file input
+  // Render file input + browse option
   return (
-    <input
-      ref={fileInputRef}
-      type="file"
-      accept="video/*"
-      onChange={handleInputChange}
-    />
+    <>
+      <div style={{padding: 1}}>
+        <Card tone="inherit" border paddingX={3} paddingY={2} radius={2}>
+          <Flex align="center" gap={4} justify="space-between">
+            <Flex flex={1} align="center" gap={3}>
+              <Text size={1} muted><VideoIcon /></Text>
+              <Text size={1} muted>Drag or paste video here</Text>
+            </Flex>
+            <Flex align="center" gap={1}>
+              <label style={{display: 'contents'}}>
+                <Button
+                  as="span"
+                  icon={UploadIcon}
+                  text="Upload"
+                  mode="bleed"
+                  padding={2}
+                  style={{cursor: 'pointer'}}
+                />
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="video/*"
+                  onChange={handleInputChange}
+                  style={{
+                    position: 'absolute',
+                    width: '1px',
+                    height: '1px',
+                    overflow: 'hidden',
+                    opacity: 0,
+                  }}
+                />
+              </label>
+              <Button
+                icon={SearchIcon}
+                text="Select"
+                mode="bleed"
+                padding={2}
+                onClick={() => setIsBrowserOpen(true)}
+              />
+            </Flex>
+          </Flex>
+        </Card>
+      </div>
+      {isBrowserOpen && (
+        <BunnyBrowserModal
+          config={config}
+          collectionId={config.collectionId}
+          onSelect={handleBrowseSelect}
+          onClose={() => setIsBrowserOpen(false)}
+        />
+      )}
+    </>
   )
 }

package/src/components/index.js

@@ -1,2 +1,3 @@
 export {BunnyInput} from './BunnyInput'
 export {BunnyPreview} from './BunnyPreview'
+export {BunnyBrowserModal} from './BunnyBrowserModal'

package/src/schema.js

@@ -69,6 +69,19 @@ export const createBunnyVideoSchema = (config) => {
 				name: 'ratio',
 				readOnly: true,
 			}),
+			defineField({
+				type: 'string',
+				title: 'Orientation',
+				name: 'orientation',
+				options: {
+					list: [
+						{title: 'Landscape', value: 'landscape'},
+						{title: 'Portrait', value: 'portrait'},
+						{title: 'Square', value: 'square'},
+					],
+				},
+				readOnly: true,
+			}),
 			defineField({
 				type: 'string',
 				title: 'Thumbnail URL',