@cliff-studio/sanity-plugin-bunny-input 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliff-studio/sanity-plugin-bunny-input",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Sanity Studio plugin for uploading videos to Bunny Stream",
   "license": "MIT",
   "author": "Cliff Studio",
@@ -17,6 +17,7 @@
   },
   "files": [
     "dist",
+    "src",
     "sanity.json",
     "v2-incompatible.js"
   ],

package/src/api.js

@@ -0,0 +1,270 @@
+const BUNNY_API_BASE = 'https://video.bunnycdn.com'
+
+/**
+ * Maps Bunny's numeric status to our string status
+ * @param {number} status
+ * @returns {'uploading' | 'processing' | 'ready' | 'error'}
+ */
+export function mapBunnyStatus(status) {
+  switch (status) {
+    case 0: // created
+    case 1: // uploaded
+      return 'uploading'
+    case 2: // processing
+    case 3: // transcoding
+      return 'processing'
+    case 4: // finished
+      return 'ready'
+    case 5: // error
+    default:
+      return 'error'
+  }
+}
+
+/**
+ * Get the thumbnail URL for a video
+ * @param {string} cdnHostname - The CDN hostname (e.g., 'vz-fbd37838-a6a.b-cdn.net')
+ * @param {string} videoId
+ * @returns {string}
+ */
+export function getThumbnailUrl(cdnHostname, videoId) {
+  return `https://${cdnHostname}/${videoId}/thumbnail.jpg`
+}
+
+/**
+ * Get the HLS playback URL for a video
+ * @param {string} cdnHostname - The CDN hostname (e.g., 'vz-fbd37838-a6a.b-cdn.net')
+ * @param {string} videoId
+ * @returns {string}
+ */
+export function getPlaybackUrl(cdnHostname, videoId) {
+  return `https://${cdnHostname}/${videoId}/playlist.m3u8`
+}
+
+/**
+ * Get the direct MP4 URL (if available)
+ * @param {string} cdnHostname - The CDN hostname (e.g., 'vz-fbd37838-a6a.b-cdn.net')
+ * @param {string} videoId
+ * @param {string} resolution
+ * @returns {string}
+ */
+export function getMp4Url(cdnHostname, videoId, resolution = '720p') {
+  return `https://${cdnHostname}/${videoId}/play_${resolution}.mp4`
+}
+
+function createHeaders(config, includeJsonContentType = false, useDirectApi = false) {
+  const headers = {
+    Accept: 'application/json',
+  }
+
+  if (includeJsonContentType) {
+    headers['Content-Type'] = 'application/json'
+  }
+
+  if (config.apiKey && (useDirectApi || !config.proxyEndpoint)) {
+    headers.AccessKey = config.apiKey
+  }
+
+  return headers
+}
+
+function getCollectionListUrl(config, searchTerm) {
+  if (config.proxyEndpoint && !config.apiKey) {
+    return `${config.proxyEndpoint}/collections?search=${encodeURIComponent(searchTerm)}`
+  }
+
+  return `${BUNNY_API_BASE}/library/${config.libraryId}/collections?search=${encodeURIComponent(
+    searchTerm
+  )}&page=1&itemsPerPage=100`
+}
+
+function getCreateCollectionUrl(config) {
+  if (config.proxyEndpoint && !config.apiKey) {
+    return `${config.proxyEndpoint}/collections`
+  }
+
+  return `${BUNNY_API_BASE}/library/${config.libraryId}/collections`
+}
+
+async function getCollectionList(config, searchTerm) {
+  const url = getCollectionListUrl(config, searchTerm)
+
+  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 collections: ${error}`)
+  }
+
+  const payload = await response.json()
+  return payload.items || []
+}
+
+/**
+ * Get or create a Bunny Stream collection by name
+ * @param {Object} config
+ * @param {string} collectionName
+ * @returns {Promise<{guid: string, name: string}>}
+ */
+export async function getOrCreateCollection(config, collectionName) {
+  const normalizedCollectionName = collectionName?.trim()
+
+  if (!normalizedCollectionName) {
+    throw new Error('Collection name cannot be empty')
+  }
+
+  const collections = await getCollectionList(config, normalizedCollectionName)
+  const existingCollection = collections.find(
+    (collection) => collection.name?.toLowerCase() === normalizedCollectionName.toLowerCase()
+  )
+
+  if (existingCollection) {
+    return existingCollection
+  }
+
+  const response = await fetch(getCreateCollectionUrl(config), {
+    method: 'POST',
+    headers: createHeaders(config, true, !config.proxyEndpoint || Boolean(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()
+}
+
+/**
+ * Create a new video object in Bunny Stream
+ * @param {Object} config
+ * @param {string} title
+ * @param {string} [collectionId]
+ * @returns {Promise<Object>}
+ */
+export async function createVideo(config, title, collectionId) {
+  const url = config.proxyEndpoint
+    ? `${config.proxyEndpoint}/create`
+    : `${BUNNY_API_BASE}/library/${config.libraryId}/videos`
+
+  const headers = createHeaders(config, true)
+
+  const 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()
+}
+
+/**
+ * Upload video file to Bunny Stream
+ * @param {Object} config
+ * @param {string} videoId
+ * @param {File} file
+ * @param {Function} onProgress
+ * @returns {Promise<Object>}
+ */
+export 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: true, 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')
+
+    if (!config.proxyEndpoint && config.apiKey) {
+      xhr.setRequestHeader('AccessKey', config.apiKey)
+    }
+
+    xhr.send(file)
+  })
+}
+
+/**
+ * Get video details from Bunny Stream
+ * @param {Object} config
+ * @param {string} videoId
+ * @returns {Promise<Object>}
+ */
+export async function getVideo(config, videoId) {
+  const url = config.proxyEndpoint
+    ? `${config.proxyEndpoint}/video/${videoId}`
+    : `${BUNNY_API_BASE}/library/${config.libraryId}/videos/${videoId}`
+
+  const headers = createHeaders(config)
+
+  const response = await fetch(url, {headers})
+
+  if (!response.ok) {
+    const error = await response.text()
+    throw new Error(`Failed to get video: ${error}`)
+  }
+
+  return response.json()
+}
+
+/**
+ * Delete a video from Bunny Stream
+ * @param {Object} config
+ * @param {string} videoId
+ * @returns {Promise<Object>}
+ */
+export async function deleteVideo(config, videoId) {
+  const url = config.proxyEndpoint
+    ? `${config.proxyEndpoint}/video/${videoId}`
+    : `${BUNNY_API_BASE}/library/${config.libraryId}/videos/${videoId}`
+
+  const headers = createHeaders(config)
+
+  const 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()
+}

package/src/components/BunnyInput.jsx

@@ -0,0 +1,278 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {set, unset} from 'sanity'
+import {Box, Button, Card, Flex, Spinner, Stack, Text} from '@sanity/ui'
+import {
+  createVideo,
+  uploadVideo,
+  getVideo,
+  deleteVideo,
+  getOrCreateCollection,
+  mapBunnyStatus,
+  getThumbnailUrl,
+  getPlaybackUrl,
+  getMp4Url,
+} from '../api'
+
+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 fileInputRef = useRef(null)
+  const pollIntervalRef = useRef(null)
+
+  // Poll for video status when processing
+  useEffect(() => {
+    if (value?.videoId && value?.status === 'processing') {
+      pollIntervalRef.current = window.setInterval(async () => {
+        try {
+          const videoData = await getVideo(config, value.videoId)
+          const status = mapBunnyStatus(videoData.status)
+
+          if (status === 'ready' || status === 'error') {
+            // Clear interval when done
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current)
+              pollIntervalRef.current = null
+            }
+
+            onChange(
+              set({
+                ...value,
+                status,
+                duration: videoData.length,
+                height: videoData.height ?? null,
+                width: videoData.width ?? null,
+                thumbnailUrl: getThumbnailUrl(config.cdnHostname, value.videoId),
+                playbackUrl: getPlaybackUrl(config.cdnHostname, value.videoId),
+                mp4Url: getMp4Url(config.cdnHostname, value.videoId),
+              })
+            )
+          }
+        } catch (err) {
+          console.error('Error polling video status:', err)
+        }
+      }, 5000) // Poll every 5 seconds
+    }
+
+    return () => {
+      if (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(true)
+      setUploadProgress(0)
+
+      try {
+        // Step 1: Create video object in Bunny
+        const title = file.name.replace(/\.[^/.]+$/, '') // Remove extension
+        let collectionId = config.collectionId
+        let 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)
+
+        // Update Sanity with initial data
+        onChange(
+          set({
+            _type: 'bunnyVideo',
+            videoId: created.guid,
+            libraryId: String(created.videoLibraryId),
+            title,
+            status: 'uploading',
+            ...(collectionId ? {collectionId} : {}),
+            ...(collectionName ? {collectionName} : {}),
+          })
+        )
+
+        // Step 2: Upload the actual file
+        await uploadVideo(config, created.guid, file, setUploadProgress)
+
+        // Step 3: Update status to processing
+        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(false)
+        setUploadProgress(0)
+      }
+    },
+    [config, onChange, value]
+  )
+
+  const handleInputChange = useCallback(
+    (e) => {
+      const file = e.target.files?.[0]
+      if (file) {
+        handleFileSelect(file)
+      }
+    },
+    [handleFileSelect]
+  )
+
+  const handleRemove = useCallback(async () => {
+    if (value?.videoId) {
+      try {
+        await deleteVideo(config, value.videoId)
+      } catch (err) {
+        // Log but don't block removal from Sanity
+        console.error('Error deleting from Bunny:', err)
+      }
+    }
+    onChange(unset())
+  }, [config, value, onChange])
+
+  // 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>
+              )}
+            </Stack>
+            <Button text="Remove" tone="critical" mode="ghost" onClick={handleRemove} />
+          </Flex>
+        </Stack>
+      </Card>
+    )
+  }
+
+  // Render processing state
+  if (value?.status === 'processing') {
+    return (
+      <Card padding={4} radius={2} shadow={1}>
+        <Flex direction="column" align="center" justify="center" gap={3}>
+          <Spinner />
+          <Text size={1}>Processing video...</Text>
+          <Text size={0} muted>
+            This may take a few minutes
+          </Text>
+        </Flex>
+      </Card>
+    )
+  }
+
+  // Render uploading state
+  if (isUploading) {
+    return (
+      <Card padding={4} radius={2} shadow={1}>
+        <Stack space={3}>
+          <Flex direction="column" align="center" justify="center" gap={2}>
+            <Spinner />
+            <Text size={1}>Uploading... {uploadProgress}%</Text>
+          </Flex>
+          <Box
+            style={{
+              height: '4px',
+              backgroundColor: '#e5e5e5',
+              borderRadius: '2px',
+              overflow: 'hidden',
+            }}
+          >
+            <Box
+              style={{
+                height: '100%',
+                width: `${uploadProgress}%`,
+                backgroundColor: '#2563eb',
+                transition: 'width 0.3s ease',
+              }}
+            />
+          </Box>
+        </Stack>
+      </Card>
+    )
+  }
+
+  // Render error state
+  if (error || value?.status === 'error') {
+    return (
+      <Stack space={3}>
+        <Card padding={3} radius={2} tone="critical">
+          <Text size={1}>Error: {error || value?.errorMessage}</Text>
+        </Card>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="video/*"
+          onChange={handleInputChange}
+        />
+      </Stack>
+    )
+  }
+
+  // Render file input
+  return (
+    <input
+      ref={fileInputRef}
+      type="file"
+      accept="video/*"
+      onChange={handleInputChange}
+    />
+  )
+}

package/src/components/BunnyPreview.jsx

@@ -0,0 +1,101 @@
+import {Box, Flex, Text} from '@sanity/ui'
+
+export function BunnyPreview(props) {
+  const {title, status, thumbnailUrl} = props
+
+  const statusColors = {
+    uploading: '#f59e0b',
+    processing: '#3b82f6',
+    ready: '#22c55e',
+    error: '#ef4444',
+  }
+
+  const statusLabels = {
+    uploading: 'Uploading',
+    processing: 'Processing',
+    ready: 'Ready',
+    error: 'Error',
+  }
+
+  return (
+    <Flex align="center" gap={3} padding={2}>
+      {thumbnailUrl ? (
+        <Box
+          style={{
+            width: 80,
+            height: 45,
+            borderRadius: 4,
+            overflow: 'hidden',
+            backgroundColor: '#000',
+            flexShrink: 0,
+          }}
+        >
+          <img
+            src={thumbnailUrl}
+            alt={title || 'Video thumbnail'}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+        </Box>
+      ) : (
+        <Box
+          style={{
+            width: 80,
+            height: 45,
+            borderRadius: 4,
+            backgroundColor: '#e5e5e5',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          <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}}
+          >
+            <polygon points="5 3 19 12 5 21 5 3" />
+          </svg>
+        </Box>
+      )}
+      <Flex direction="column" gap={1} style={{minWidth: 0}}>
+        <Text
+          size={1}
+          weight="semibold"
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {title || 'Untitled video'}
+        </Text>
+        {status && (
+          <Flex align="center" gap={2}>
+            <Box
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: '50%',
+                backgroundColor: statusColors[status] || '#9ca3af',
+              }}
+            />
+            <Text size={0} muted>
+              {statusLabels[status] || status}
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/index.js

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