feat: field options

marco-land · Apr 18, 2024 · 6041b1c · 6041b1c
1 parent 157247b
commit 6041b1c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -48,9 +48,17 @@ defineField({
   title: 'Vimeo',
   name: 'vimeo',
   type: 'vimeo',
+  // Optional: Extend the default fields, see below for more information
+  options: {
+    fields: ['metadata'],
+  },
 })
 ```
 
+## Options
+
+By default the plugin stores the fields `name`, `pictures`, `files` and `play`, but you can extend (not overwrite) the fields through the options. Please be sure to add fields as an array of strings. See the [vimeo response documentation](https://developer.vimeo.com/api/reference/response/video) for a list of available fields.
+
 ## License
 
 [MIT](LICENSE) © Marco Land

diff --git a/src/components/DataFetcher.tsx b/src/components/DataFetcher.tsx
@@ -5,11 +5,18 @@ import {SyncIcon} from '@sanity/icons'
 
 const DataFetcher = (props) => {
   // eslint-disable-next-line react/prop-types
-  const {accessToken, onSuccess} = props
+  const {accessToken, onSuccess, fields} = props
   const [vimeoId, setVimeoId] = useState('')
   const [isFetching, setIsFetching] = useState(false)
   const [errorMsg, setErrorMsg] = useState('')
 
+  let vimeoFields
+  let url = `https://api.vimeo.com/videos/${vimeoId}?fields=name,play,pictures,files`
+  if (fields?.length) {
+    vimeoFields = fields?.join(',')
+    url += `,${vimeoFields}`
+  }
+
   const handleChange = (event) => {
     setVimeoId(event.target.value)
   }
@@ -22,10 +29,7 @@ const DataFetcher = (props) => {
       },
     }
     try {
-      const response = await fetch(
-        `https://api.vimeo.com/videos/${vimeoId}?fields=play,pictures,files,name`,
-        options,
-      )
+      const response = await fetch(url, options)
       const data = await response.json()
       if (data?.name) {
         setErrorMsg('')

diff --git a/src/components/VideoInput.tsx b/src/components/VideoInput.tsx
@@ -11,7 +11,9 @@ export interface InputProps extends VimeoFieldInput {
 }
 
 export const VideoInput = (config: Config, props: InputProps) => {
+  const {fields} = props?.schemaType?.options
   const {accessToken} = config
+
   const {onChange, value} = props
   const handleReset = () => {
     onChange(unset())
@@ -29,7 +31,7 @@ export const VideoInput = (config: Config, props: InputProps) => {
 
   return (
     <Card>
-      {!value && <DataFetcher accessToken={accessToken} onSuccess={setVimeoData} />}
+      {!value && <DataFetcher accessToken={accessToken} onSuccess={setVimeoData} fields={fields} />}
       <div>{value?.error}</div>
       {value?.pictures?.sizes?.length && (
         <Stack space={4}>
@@ -57,28 +59,6 @@ export const VideoInput = (config: Config, props: InputProps) => {
             </Text>
             <TextInput fontSize={2} padding={3} readOnly value={value?.name} />
           </Stack>
-          <Stack space={3}>
-            <Text size={1} weight="semibold">
-              Files
-            </Text>
-            <TextInput
-              fontSize={2}
-              padding={3}
-              readOnly
-              value={value?.files?.map((file) => file?.rendition)?.join(', ')}
-            />
-          </Stack>
-          <Stack space={3}>
-            <Text size={1} weight="semibold">
-              Play (progressive)
-            </Text>
-            <TextInput
-              fontSize={2}
-              padding={3}
-              readOnly
-              value={value?.play?.progressive?.map((file) => file?.rendition)?.join(', ')}
-            />
-          </Stack>
           <Inline space={[2]}>
             <Button
               text="Reset"