⚡ (video) Add youtube shorts auto parsing

apps/builder/package.json

@@ -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",

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

@@ -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)
+    const info = parseVideoUrl(url)
-    return isDefined(info) && info.provider && info.id
+    return onSubmit({
-      ? onSubmit({
+      type: info.type,
-          type: info.provider as VideoBubbleContentType,
+      url,
-          url,
+      id: info.id,
-          id: info.id,
+    })
-        })
-      : onSubmit({ type: VideoBubbleContentType.URL, url })
   }
   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 }
+}

pnpm-lock.yaml

@@ -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