⚡ Add more video supports (#1023)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
	- Introduced a new layout option for the TextInput component.
- Added support for GUMLET and TIKTOK video content types in
VideoBubbleContent.
- Enhanced VideoUploadContent to handle new properties like aspectRatio
and maxWidth.
- Updated VideoBubble to include aspect-ratio and max-width styles based
on content properties.
- **Refactor**
- Changed the extension used for internationalization (i18n) in the VS
Code environment.
	- Modified how environment variables are accessed in tolgee.tsx.
- Updated parseVideoUrl function to include a new property
videoSizeSuggestion.
- **Chores**
- Updated the tolgeeEnv object in env.ts and added a new optional
parameter to the getRuntimeVariable function.
- Expanded video handling capabilities by introducing new video content
types and associated regular expressions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Closes #978 #936 #926

apps/builder/src/components/inputs/TextInput.tsx

@@ -8,6 +8,7 @@ import {
   HStack,
   Input as ChakraInput,
   InputProps,
+  Stack,
 } from '@chakra-ui/react'
 import { Variable } from '@typebot.io/schemas'
 import React, {
@@ -33,6 +34,7 @@ export type TextInputProps = {
   isRequired?: boolean
   placeholder?: string
   isDisabled?: boolean
+  direction?: 'row' | 'column'
 } & Pick<
   InputProps,
   | 'autoComplete'
@@ -63,6 +65,7 @@ export const TextInput = forwardRef(function TextInput(
     onKeyUp,
     size,
     maxWidth,
+    direction = 'column',
   }: TextInputProps,
   ref
 ) {
@@ -134,9 +137,15 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <FormControl isRequired={isRequired}>
+    <FormControl
+      isRequired={isRequired}
+      as={direction === 'column' ? Stack : HStack}
+      justifyContent="space-between"
+      width={label ? 'full' : 'auto'}
+      spacing={direction === 'column' ? 2 : 3}
+    >
       {label && (
-        <FormLabel>
+        <FormLabel display="flex" flexShrink={0} gap="1" mb="0" mr="0">
           {label}{' '}
           {moreInfoTooltip && (
             <MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>

apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx

@@ -1,7 +1,10 @@
 import { useTranslate } from '@tolgee/react'
 import { Box, Text, Image } from '@chakra-ui/react'
 import { VideoBubbleBlock } from '@typebot.io/schemas'
-import { VideoBubbleContentType } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
+import {
+  VideoBubbleContentType,
+  embedBaseUrls,
+} from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
 
 type Props = {
   block: VideoBubbleBlock
@@ -45,17 +48,32 @@ export const VideoBubbleContent = ({ block }: Props) => {
           )}
         </Box>
       )
+    case VideoBubbleContentType.GUMLET:
     case VideoBubbleContentType.VIMEO:
     case VideoBubbleContentType.YOUTUBE: {
-      const baseUrl =
-        block.content.type === VideoBubbleContentType.VIMEO
-          ? 'https://player.vimeo.com/video'
-          : 'https://www.youtube.com/embed'
+      const baseUrl = embedBaseUrls[block.content.type]
       return (
         <Box w="full" h="120px" pos="relative">
           <iframe
             src={`${baseUrl}/${block.content.id}`}
-            allowFullScreen
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              left: '0',
+              top: '0',
+              borderRadius: '10px',
+              pointerEvents: 'none',
+            }}
+          />
+        </Box>
+      )
+    }
+    case VideoBubbleContentType.TIKTOK: {
+      return (
+        <Box w="full" h="300px" pos="relative">
+          <iframe
+            src={`https://www.tiktok.com/embed/v2/${block.content.id}`}
             style={{
               width: '100%',
               height: '100%',

apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx

@@ -1,12 +1,9 @@
 import { Stack, Text } from '@chakra-ui/react'
-import { VariableString, VideoBubbleBlock } from '@typebot.io/schemas'
-import { NumberInput, TextInput } from '@/components/inputs'
+import { VideoBubbleBlock } from '@typebot.io/schemas'
+import { TextInput } from '@/components/inputs'
 import { useTranslate } from '@tolgee/react'
 import { parseVideoUrl } from '@typebot.io/lib/parseVideoUrl'
-import {
-  VideoBubbleContentType,
-  defaultVideoBubbleContent,
-} from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
+import { defaultVideoBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
 
 type Props = {
   content?: VideoBubbleBlock['content']
@@ -16,42 +13,69 @@ type Props = {
 export const VideoUploadContent = ({ content, onSubmit }: Props) => {
   const { t } = useTranslate()
   const updateUrl = (url: string) => {
-    const info = parseVideoUrl(url)
-    return onSubmit({
-      type: info.type,
-      url,
-      id: info.id,
-    })
-  }
-  const updateHeight = (height?: number | VariableString) => {
+    const {
+      type,
+      url: matchedUrl,
+      id,
+      videoSizeSuggestion,
+    } = parseVideoUrl(url)
     return onSubmit({
       ...content,
-      height,
+      type,
+      url: matchedUrl,
+      id,
+      ...(!content?.aspectRatio && !content?.maxWidth
+        ? videoSizeSuggestion
+        : {}),
     })
   }
+  const updateAspectRatio = (aspectRatio?: string) => {
+    return onSubmit({
+      ...content,
+      aspectRatio,
+    })
+  }
+
+  const updateMaxWidth = (maxWidth?: string) => {
+    return onSubmit({
+      ...content,
+      maxWidth,
+    })
+  }
+
   return (
     <Stack p="2" spacing={4}>
       <Stack>
         <TextInput
-          placeholder={t(
-            'editor.blocks.bubbles.video.settings.worksWith.placeholder'
-          )}
+          placeholder={t('video.urlInput.placeholder')}
           defaultValue={content?.url ?? ''}
           onChange={updateUrl}
         />
-        <Text fontSize="sm" color="gray.400" textAlign="center">
-          {t('editor.blocks.bubbles.video.settings.worksWith.text')}
+        <Text fontSize="xs" color="gray.400" textAlign="center">
+          {t('video.urlInput.helperText')}
         </Text>
       </Stack>
-
-      {content?.type !== VideoBubbleContentType.URL && (
-        <NumberInput
-          label="Height:"
-          defaultValue={content?.height ?? defaultVideoBubbleContent.height}
-          onValueChange={updateHeight}
-          suffix={t('editor.blocks.bubbles.video.settings.numberInput.unit')}
-          width="150px"
-        />
+      {content?.url && (
+        <Stack>
+          <TextInput
+            label={t('video.aspectRatioInput.label')}
+            moreInfoTooltip={t('video.aspectRatioInput.moreInfoTooltip')}
+            defaultValue={
+              content?.aspectRatio ?? defaultVideoBubbleContent.aspectRatio
+            }
+            onChange={updateAspectRatio}
+            direction="row"
+          />
+          <TextInput
+            label={t('video.maxWidthInput.label')}
+            moreInfoTooltip={t('video.maxWidthInput.moreInfoTooltip')}
+            defaultValue={
+              content?.maxWidth ?? defaultVideoBubbleContent.maxWidth
+            }
+            onChange={updateMaxWidth}
+            direction="row"
+          />
+        </Stack>
       )}
     </Stack>
   )

apps/builder/src/lib/tolgee.tsx

@@ -5,13 +5,14 @@ import fr from '../../public/locales/fr.json'
 import de from '../../public/locales/de.json'
 import pt from '../../public/locales/pt.json'
 import ptBR from '../../public/locales/pt-BR.json'
+import { env } from '@typebot.io/env'
 
 export const tolgee = Tolgee()
   .use(DevTools())
   .use(FormatIcu())
   .init({
-    apiKey: process.env.NEXT_PUBLIC_TOLGEE_API_KEY,
-    apiUrl: process.env.NEXT_PUBLIC_TOLGEE_API_URL,
+    apiKey: env.NEXT_PUBLIC_TOLGEE_API_KEY,
+    apiUrl: env.NEXT_PUBLIC_TOLGEE_API_URL,
     defaultLanguage: 'en',
     availableLanguages: ['en', 'fr', 'de', 'pt', 'pt-BR'],
     fallbackLanguage: 'en',