blsmedia/bot
2
0
Fork 0
Code Activity

⚡ (video) Add youtube shorts auto parsing

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-07-21 08:02:15 +02:00
parent 48f074cdf7
commit 1ebd528753
3 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/builder/package.json
View File

@ -65,7 +65,6 @@
"google-spreadsheet": "4.0.2",
"got": "12.6.0",
"immer": "10.0.2",
"js-video-url-parser": "0.5.1",
"jsonwebtoken": "9.0.1",
"micro": "10.0.1",
"micro-cors": "0.1.1",

38
apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx
View File

@ -1,11 +1,10 @@
import { Stack, Text } from '@chakra-ui/react'
import { VideoBubbleContent, VideoBubbleContentType } from '@typebot.io/schemas'
import urlParser from 'js-video-url-parser/lib/base'
import 'js-video-url-parser/lib/provider/vimeo'
import 'js-video-url-parser/lib/provider/youtube'
import { isDefined } from '@typebot.io/lib'
import { TextInput } from '@/components/inputs'
const vimeoRegex = /vimeo\.com\/(\d+)/
const youtubeRegex = /youtube\.com\/(watch\?v=|shorts\/)(\w+)/
type Props = {
content?: VideoBubbleContent
onSubmit: (content: VideoBubbleContent) => void
@ -13,14 +12,12 @@ type Props = {
export const VideoUploadContent = ({ content, onSubmit }: Props) => {
const handleUrlChange = (url: string) => {
const info = urlParser.parse(url)
return isDefined(info) && info.provider && info.id
? onSubmit({
type: info.provider as VideoBubbleContentType,
url,
id: info.id,
})
: onSubmit({ type: VideoBubbleContentType.URL, url })
const info = parseVideoUrl(url)
return onSubmit({
type: info.type,
url,
id: info.id,
})
}
return (
<Stack p="2">
@ -35,3 +32,20 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
</Stack>
)
}
const parseVideoUrl = (
url: string
): { type: VideoBubbleContentType; url: string; id?: string } => {
if (vimeoRegex.test(url)) {
const id = url.match(vimeoRegex)?.at(1)
if (!id) return { type: VideoBubbleContentType.URL, url }
return { type: VideoBubbleContentType.VIMEO, url, id }
}
if (youtubeRegex.test(url)) {
console.log(url.match(youtubeRegex)?.at(2))
const id = url.match(youtubeRegex)?.at(2)
if (!id) return { type: VideoBubbleContentType.URL, url }
return { type: VideoBubbleContentType.YOUTUBE, url, id }
}
return { type: VideoBubbleContentType.URL, url }
}

7
pnpm-lock.yaml generated
View File

@ -179,9 +179,6 @@ importers:
immer:
specifier: 10.0.2
version: 10.0.2
js-video-url-parser:
specifier: 0.5.1
version: 0.5.1
jsonwebtoken:
specifier: 9.0.1
version: 9.0.1
@ -17308,10 +17305,6 @@ packages:
/js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
/js-video-url-parser@0.5.1:
resolution: {integrity: sha512-/vwqT67k0AyIGMHAvSOt+n4JfrZWF7cPKgKswDO35yr27GfW4HtjpQVlTx6JLF45QuPm8mkzFHkZgFVnFm4x/w==}
dev: false
/js-yaml@3.13.1:
resolution: {integrity: sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==}
hasBin: true