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 ? ( + Dynamic video thumbnail + ) : ( + + )} ) 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 } +}