⚡ 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/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>
   )