diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
index 22623251b..68010707d 100644
--- a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
+++ b/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 {scopedT('clickToEdit.text')}
+ const containsVariables =
+ block.content?.url?.includes('{{') && block.content.url.includes('}}')
switch (block.content.type) {
case VideoBubbleContentType.URL:
return (
-
+ {containsVariables ? (
+
+ ) : (
+
+ )}
)
case VideoBubbleContentType.VIMEO:
diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx
index 888afd705..728a268d0 100644
--- a/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx
+++ b/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'
-
-const vimeoRegex = /vimeo\.com\/(\d+)/
-const youtubeRegex = /youtube\.com\/(watch\?v=|shorts\/)(\w+)|youtu\.be\/(\w+)/
+import { parseVideoUrl } from '@typebot.io/lib/parseVideoUrl'
type Props = {
content?: VideoBubbleContent
@@ -34,19 +32,3 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
)
}
-
-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 }
-}
diff --git a/packages/bot-engine/executeGroup.ts b/packages/bot-engine/executeGroup.ts
index ce519fbab..06e5932d3 100644
--- a/packages/bot-engine/executeGroup.ts
+++ b/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)
}
diff --git a/packages/lib/parseVideoUrl.ts b/packages/lib/parseVideoUrl.ts
new file mode 100644
index 000000000..651538347
--- /dev/null
+++ b/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 }
+}