clapper / src /lib /hooks /useOpenFilePicker.ts
jbilcke-hf's picture
jbilcke-hf HF staff
first version of the video analyzer
5bd8810
raw
history blame
No virus
2.48 kB
import { useEffect, useState } from 'react'
import { useFilePicker } from 'use-file-picker'
import { parseFileName } from '@/services/io/parseFileName'
import { useIO } from '@/services/io/useIO'
const defaultSupportedExtensions = ['clap', 'txt', 'mp4', 'mp3']
export function useOpenFilePicker(
{
supportedExtensions = defaultSupportedExtensions,
}: {
supportedExtensions: string[]
} = {
supportedExtensions: defaultSupportedExtensions,
}
) {
const [isLoading, setIsLoading] = useState(false)
const openClapBlob = useIO((s) => s.openClapBlob)
const openScreenplay = useIO((s) => s.openScreenplay)
const openVideo = useIO((s) => s.openVideo)
const { openFilePicker, filesContent, loading } = useFilePicker({
accept: supportedExtensions.map((ext) => `.${ext}`),
readAs: 'ArrayBuffer',
})
const fileData = filesContent[0]
useEffect(() => {
const fn = async () => {
const input = `${fileData?.name || ''}`
if (!input) {
return
}
const { fileName, projectName, extension } = parseFileName(input)
if (!defaultSupportedExtensions.includes(extension)) {
console.error(`unsupported extension "${extension}"`)
return
}
const blob = new Blob([fileData.content])
if (extension === 'clap') {
try {
setIsLoading(true)
await openClapBlob(projectName, fileName, blob)
} catch (err) {
console.error('failed to load the Clap file:', err)
} finally {
setIsLoading(false)
}
} else if (extension === 'txt') {
try {
setIsLoading(true)
await openScreenplay(projectName, fileName, blob)
} catch (err) {
console.error('failed to load the Clap file:', err)
} finally {
setIsLoading(false)
}
} else if (extension === 'mp4') {
try {
setIsLoading(true)
await openVideo(projectName, fileName, blob)
} catch (err) {
console.error('failed to load the Clap file:', err)
} finally {
setIsLoading(false)
}
} else if (extension === 'mp3') {
alert('Initializing a project from a mp3 is not supported yet')
}
}
fn()
}, [
fileData?.name,
fileData?.content,
openClapBlob,
openScreenplay,
openVideo,
])
return {
openFilePicker,
filesContent,
fileData,
isLoading: loading || isLoading,
}
}