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