⚡ 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

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

@@ -4,9 +4,14 @@ import { createSignal, Match, onCleanup, onMount, Switch } from 'solid-js'
 import { clsx } from 'clsx'
 import {
   defaultVideoBubbleContent,
+  embedBaseUrls,
+  embeddableVideoTypes,
   VideoBubbleContentType,
 } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
-import { VideoBubbleBlock } from '@typebot.io/schemas'
+import {
+  EmbeddableVideoBubbleContentType,
+  VideoBubbleBlock,
+} from '@typebot.io/schemas'
 
 type Props = {
   content: VideoBubbleBlock['content']
@@ -23,8 +28,8 @@ export const VideoBubble = (props: Props) => {
   onMount(() => {
     const typingDuration =
       props.content?.type &&
-      [VideoBubbleContentType.VIMEO, VideoBubbleContentType.YOUTUBE].includes(
-        props.content?.type
+      embeddableVideoTypes.includes(
+        props.content?.type as EmbeddableVideoBubbleContentType
       )
         ? 2000
         : 100
@@ -50,6 +55,8 @@ export const VideoBubble = (props: Props) => {
             style={{
               width: isTyping() ? '64px' : '100%',
               height: isTyping() ? '32px' : '100%',
+              'max-width':
+                props.content?.maxWidth ?? defaultVideoBubbleContent.maxWidth,
             }}
           >
             {isTyping() && <TypingBubble />}
@@ -71,16 +78,19 @@ export const VideoBubble = (props: Props) => {
                 }
                 style={{
                   height: isTyping() ? (isMobile() ? '32px' : '36px') : 'auto',
+                  'aspect-ratio': props.content?.aspectRatio,
+                  'max-width':
+                    props.content?.maxWidth ??
+                    defaultVideoBubbleContent.maxWidth,
                 }}
               />
             </Match>
             <Match
               when={
                 props.content?.type &&
-                [
-                  VideoBubbleContentType.VIMEO,
-                  VideoBubbleContentType.YOUTUBE,
-                ].includes(props.content.type)
+                embeddableVideoTypes.includes(
+                  props.content.type as EmbeddableVideoBubbleContentType
+                )
               }
             >
               <div
@@ -93,17 +103,23 @@ export const VideoBubble = (props: Props) => {
                     ? isMobile()
                       ? '32px'
                       : '36px'
-                    : `${
+                    : !props.content?.aspectRatio
+                    ? `${
                         props.content?.height ??
                         defaultVideoBubbleContent.height
-                      }px`,
+                      }px`
+                    : undefined,
+                  'aspect-ratio': props.content?.aspectRatio,
+                  'max-width':
+                    props.content?.maxWidth ??
+                    defaultVideoBubbleContent.maxWidth,
                 }}
               >
                 <iframe
                   src={`${
-                    props.content?.type === VideoBubbleContentType.VIMEO
-                      ? 'https://player.vimeo.com/video'
-                      : 'https://www.youtube.com/embed'
+                    embedBaseUrls[
+                      props.content?.type as EmbeddableVideoBubbleContentType
+                    ]
                   }/${props.content?.id}`}
                   class={'w-full h-full'}
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"