⚡ (video) Allow changing video height when resolved to an iframe

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 (
-    <Stack p="2">
-      <TextInput
-        placeholder={scopedT('worksWith.placeholder')}
-        defaultValue={content?.url ?? ''}
-        onChange={handleUrlChange}
-      />
-      <Text fontSize="sm" color="gray.400" textAlign="center">
-        {scopedT('worksWith.text')}
-      </Text>
+    <Stack p="2" spacing={4}>
+      <Stack>
+        <TextInput
+          placeholder={scopedT('worksWith.placeholder')}
+          defaultValue={content?.url ?? ''}
+          onChange={updateUrl}
+        />
+        <Text fontSize="sm" color="gray.400" textAlign="center">
+          {scopedT('worksWith.text')}
+        </Text>
+      </Stack>
+
+      {content?.type !== VideoBubbleContentType.URL && (
+        <NumberInput
+          label="Height:"
+          defaultValue={content?.height ?? 400}
+          onValueChange={updateHeight}
+          suffix={scopedT('numberInput.unit')}
+          width="150px"
+        />
+      )}
     </Stack>
   )
 }

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',

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',

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',

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',

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',

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:

packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -39,9 +39,9 @@ export const VideoBubble = (props: Props) => {
   })
 
   return (
-    <div class="flex flex-col animate-fade-in" ref={ref}>
+    <div class="flex flex-col w-full animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden">
+        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
@@ -86,7 +86,11 @@ export const VideoBubble = (props: Props) => {
                   isTyping() ? 'opacity-0' : 'opacity-100 p-4'
                 )}
                 style={{
-                  height: isTyping() ? (isMobile() ? '32px' : '36px') : '200px',
+                  height: isTyping()
+                    ? isMobile()
+                      ? '32px'
+                      : '36px'
+                    : `${props.content.height ?? '400'}px`,
                 }}
               >
                 <iframe

packages/schemas/features/blocks/bubbles/video/schemas.ts

@@ -2,11 +2,13 @@ import { z } from 'zod'
 import { blockBaseSchema } from '../../baseSchemas'
 import { BubbleBlockType } from '../enums'
 import { VideoBubbleContentType } from './enums'
+import { variableStringSchema } from '../../../utils'
 
 export const videoBubbleContentSchema = z.object({
   url: z.string().optional(),
   id: z.string().optional(),
   type: z.nativeEnum(VideoBubbleContentType).optional(),
+  height: z.number().or(variableStringSchema).optional(),
 })
 
 export const videoBubbleBlockSchema = blockBaseSchema.merge(