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 728a268d0..077f8389d 100644 --- a/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx +++ b/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx @@ -1,6 +1,10 @@ import { Stack, Text } from '@chakra-ui/react' -import { VideoBubbleContent } from '@typebot.io/schemas' -import { TextInput } from '@/components/inputs' +import { + VariableString, + VideoBubbleContent, + VideoBubbleContentType, +} from '@typebot.io/schemas' +import { NumberInput, TextInput } from '@/components/inputs' import { useScopedI18n } from '@/locales' import { parseVideoUrl } from '@typebot.io/lib/parseVideoUrl' @@ -11,7 +15,7 @@ type Props = { export const VideoUploadContent = ({ content, onSubmit }: Props) => { const scopedT = useScopedI18n('editor.blocks.bubbles.video.settings') - const handleUrlChange = (url: string) => { + const updateUrl = (url: string) => { const info = parseVideoUrl(url) return onSubmit({ type: info.type, @@ -19,16 +23,34 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => { id: info.id, }) } + const updateHeight = (height?: number | VariableString) => { + return onSubmit({ + ...content, + height, + }) + } return ( - - - - {scopedT('worksWith.text')} - + + + + + {scopedT('worksWith.text')} + + + + {content?.type !== VideoBubbleContentType.URL && ( + + )} ) } diff --git a/apps/builder/src/locales/de.ts b/apps/builder/src/locales/de.ts index 8a309a5f8..d2a9f6e38 100644 --- a/apps/builder/src/locales/de.ts +++ b/apps/builder/src/locales/de.ts @@ -322,6 +322,7 @@ export default { 'Funktioniert mit YouTube, Vimeo und anderen', 'editor.blocks.bubbles.video.settings.worksWith.placeholder': 'Füge den Videolink ein...', + 'editor.blocks.bubbles.video.settings.numberInput.unit': 'px', 'editor.blocks.bubbles.textEditor.plate.label': 'Texteditor', 'editor.blocks.bubbles.textEditor.searchVariable.placeholder': 'Nach einer Variable suchen', diff --git a/apps/builder/src/locales/en.ts b/apps/builder/src/locales/en.ts index fe351ae93..41ed130ed 100644 --- a/apps/builder/src/locales/en.ts +++ b/apps/builder/src/locales/en.ts @@ -311,6 +311,7 @@ export default { 'Works with Youtube, Vimeo and others', 'editor.blocks.bubbles.video.settings.worksWith.placeholder': 'Paste the video link...', + 'editor.blocks.bubbles.video.settings.numberInput.unit': 'px', 'editor.blocks.bubbles.textEditor.plate.label': 'Text editor', 'editor.blocks.bubbles.textEditor.searchVariable.placeholder': 'Search for a variable', diff --git a/apps/builder/src/locales/fr.ts b/apps/builder/src/locales/fr.ts index 28a7ee9a9..ad70a2ad0 100644 --- a/apps/builder/src/locales/fr.ts +++ b/apps/builder/src/locales/fr.ts @@ -325,6 +325,7 @@ export default { 'Fonctionne avec Youtube, Vimeo et autres', 'editor.blocks.bubbles.video.settings.worksWith.placeholder': 'Collez le lien de la vidéo...', + 'editor.blocks.bubbles.video.settings.numberInput.unit': 'px', 'editor.blocks.bubbles.textEditor.plate.label': 'Éditeur de texte', 'editor.blocks.bubbles.textEditor.searchVariable.placeholder': 'Rechercher une variable', diff --git a/apps/builder/src/locales/pt-BR.ts b/apps/builder/src/locales/pt-BR.ts index 7c3adb533..4a4397416 100644 --- a/apps/builder/src/locales/pt-BR.ts +++ b/apps/builder/src/locales/pt-BR.ts @@ -321,6 +321,7 @@ export default { 'Compatível com Youtube, Vimeo e outros', 'editor.blocks.bubbles.video.settings.worksWith.placeholder': 'Colar o link do vídeo...', + 'editor.blocks.bubbles.video.settings.numberInput.unit': 'px', 'editor.blocks.bubbles.textEditor.plate.label': 'Editor de texto', 'editor.blocks.bubbles.textEditor.searchVariable.placeholder': 'Pesquisar uma variável', diff --git a/apps/builder/src/locales/pt.ts b/apps/builder/src/locales/pt.ts index 6e502dcd1..4829d3b2b 100644 --- a/apps/builder/src/locales/pt.ts +++ b/apps/builder/src/locales/pt.ts @@ -322,6 +322,7 @@ export default { 'Compatível com Youtube, Vimeo e outros', 'editor.blocks.bubbles.video.settings.worksWith.placeholder': 'Colar o link do vídeo...', + 'editor.blocks.bubbles.video.settings.numberInput.unit': 'px', 'editor.blocks.bubbles.textEditor.plate.label': 'Editor de texto', 'editor.blocks.bubbles.textEditor.searchVariable.placeholder': 'Pesquisar uma variável', diff --git a/packages/bot-engine/parseBubbleBlock.ts b/packages/bot-engine/parseBubbleBlock.ts index 348b0e921..ca8bcb0b4 100644 --- a/packages/bot-engine/parseBubbleBlock.ts +++ b/packages/bot-engine/parseBubbleBlock.ts @@ -60,7 +60,13 @@ export const parseBubbleBlock = ( const parsedContent = deepParseVariables(variables)(block.content) return { ...block, - content: parsedContent.url ? parseVideoUrl(parsedContent.url) : {}, + content: { + ...(parsedContent.url ? parseVideoUrl(parsedContent.url) : {}), + height: + typeof parsedContent.height === 'string' + ? parseFloat(parsedContent.height) + : parsedContent.height, + }, } } default: diff --git a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx index d16303fe2..981b4e66b 100644 --- a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx +++ b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx @@ -39,9 +39,9 @@ export const VideoBubble = (props: Props) => { }) return ( -
+
-
+
{ isTyping() ? 'opacity-0' : 'opacity-100 p-4' )} style={{ - height: isTyping() ? (isMobile() ? '32px' : '36px') : '200px', + height: isTyping() + ? isMobile() + ? '32px' + : '36px' + : `${props.content.height ?? '400'}px`, }} >