🚸 (videoBubble) Reparse variable video URL to correctly detect provider

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

@@ -1,5 +1,5 @@
 import { useScopedI18n } from '@/locales'
-import { Box, Text } from '@chakra-ui/react'
+import { Box, Text, Image } from '@chakra-ui/react'
 import { VideoBubbleBlock, VideoBubbleContentType } from '@typebot.io/schemas'
 
 type Props = {
@@ -10,24 +10,34 @@ export const VideoBubbleContent = ({ block }: Props) => {
   const scopedT = useScopedI18n('editor.blocks.bubbles.video.node')
   if (!block.content?.url || !block.content.type)
     return <Text color="gray.500">{scopedT('clickToEdit.text')}</Text>
+  const containsVariables =
+    block.content?.url?.includes('{{') && block.content.url.includes('}}')
   switch (block.content.type) {
     case VideoBubbleContentType.URL:
       return (
         <Box w="full" h="120px" pos="relative">
-          <video
+          {containsVariables ? (
-            key={block.content.url}
+            <Image
-            controls
+              src="/images/dynamic-image.png"
-            style={{
+              alt="Dynamic video thumbnail"
-              width: '100%',
+              rounded="md"
-              height: '100%',
+            />
-              position: 'absolute',
+          ) : (
-              left: '0',
+            <video
-              top: '0',
+              key={block.content.url}
-              borderRadius: '10px',
+              controls
-            }}
+              style={{
-          >
+                width: '100%',
-            <source src={block.content.url} />
+                height: '100%',
-          </video>
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                borderRadius: '10px',
+              }}
+            >
+              <source src={block.content.url} />
+            </video>
+          )}
         </Box>
       )
     case VideoBubbleContentType.VIMEO:

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

@@ -1,10 +1,8 @@
 import { Stack, Text } from '@chakra-ui/react'
-import { VideoBubbleContent, VideoBubbleContentType } from '@typebot.io/schemas'
+import { VideoBubbleContent } from '@typebot.io/schemas'
 import { TextInput } from '@/components/inputs'
 import { useScopedI18n } from '@/locales'
-
+import { parseVideoUrl } from '@typebot.io/lib/parseVideoUrl'
-const vimeoRegex = /vimeo\.com\/(\d+)/
-const youtubeRegex = /youtube\.com\/(watch\?v=|shorts\/)(\w+)|youtu\.be\/(\w+)/
 
 type Props = {
   content?: VideoBubbleContent
@@ -34,19 +32,3 @@ 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)) {
-    const id = url.match(youtubeRegex)?.at(2) ?? url.match(youtubeRegex)?.at(3)
-    if (!id) return { type: VideoBubbleContentType.URL, url }
-    return { type: VideoBubbleContentType.YOUTUBE, url, id }
-  }
-  return { type: VideoBubbleContentType.URL, url }
-}

packages/bot-engine/executeGroup.ts

@@ -25,6 +25,7 @@ import { injectVariableValuesInPictureChoiceBlock } from './blocks/inputs/pictur
 import { getPrefilledInputValue } from './getPrefilledValue'
 import { parseDateInput } from './blocks/inputs/date/parseDateInput'
 import { deepParseVariables } from './variables/deepParseVariables'
+import { parseVideoUrl } from '@typebot.io/lib/parseVideoUrl'
 
 export const executeGroup =
   (
@@ -176,6 +177,13 @@ const parseBubbleBlock =
           },
         }
       }
+      case BubbleBlockType.VIDEO: {
+        const parsedContent = deepParseVariables(variables)(block.content)
+        return {
+          ...block,
+          content: parsedContent.url ? parseVideoUrl(parsedContent.url) : {},
+        }
+      }
       default:
         return deepParseVariables(variables)(block)
     }

packages/lib/parseVideoUrl.ts

@@ -0,0 +1,20 @@
+import { VideoBubbleContentType } from '@typebot.io/schemas/features/blocks/bubbles/video/enums'
+
+const vimeoRegex = /vimeo\.com\/(\d+)/
+const youtubeRegex = /youtube\.com\/(watch\?v=|shorts\/)(\w+)|youtu\.be\/(\w+)/
+
+export 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)) {
+    const id = url.match(youtubeRegex)?.at(2) ?? url.match(youtubeRegex)?.at(3)
+    if (!id) return { type: VideoBubbleContentType.URL, url }
+    return { type: VideoBubbleContentType.YOUTUBE, url, id }
+  }
+  return { type: VideoBubbleContentType.URL, url }
+}