⚡ 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/schemas/features/blocks/bubbles/video/constants.ts

@@ -2,8 +2,49 @@ export enum VideoBubbleContentType {
   URL = 'url',
   YOUTUBE = 'youtube',
   VIMEO = 'vimeo',
+  TIKTOK = 'tiktok',
+  GUMLET = 'gumlet',
 }
 
+export const embeddableVideoTypes = [
+  VideoBubbleContentType.YOUTUBE,
+  VideoBubbleContentType.VIMEO,
+  VideoBubbleContentType.TIKTOK,
+  VideoBubbleContentType.GUMLET,
+] as const
+
 export const defaultVideoBubbleContent = {
   height: 400,
+  aspectRatio: '16/9',
+  maxWidth: '100%',
+} as const
+
+export const horizontalVideoSuggestionSize = {
+  aspectRatio: '16/9',
+  maxWidth: '100%',
+}
+
+export const verticalVideoSuggestionSize = {
+  aspectRatio: '9/16',
+  maxWidth: '400px',
+}
+
+const youtubeBaseUrl = 'https://www.youtube.com/embed'
+export const youtubeRegex =
+  /youtube\.com\/(watch\?v=|shorts\/)([\w-]+)|youtu\.be\/([\w-]+)/
+
+const vimeoBaseUrl = 'https://player.vimeo.com/video'
+export const vimeoRegex = /vimeo\.com\/(\d+)/
+
+const tiktokBaseUrl = 'https://www.tiktok.com/embed/v2'
+export const tiktokRegex = /tiktok\.com\/@[\w-]+\/video\/(\d+)/
+
+const gumletBaseUrl = 'https://play.gumlet.io/embed'
+export const gumletRegex = /gumlet\.com\/watch\/(\w+)/
+
+export const embedBaseUrls = {
+  [VideoBubbleContentType.VIMEO]: vimeoBaseUrl,
+  [VideoBubbleContentType.YOUTUBE]: youtubeBaseUrl,
+  [VideoBubbleContentType.TIKTOK]: tiktokBaseUrl,
+  [VideoBubbleContentType.GUMLET]: gumletBaseUrl,
 } as const

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

@@ -9,6 +9,8 @@ export const videoBubbleContentSchema = z.object({
   id: z.string().optional(),
   type: z.nativeEnum(VideoBubbleContentType).optional(),
   height: z.number().or(variableStringSchema).optional(),
+  aspectRatio: z.string().optional(),
+  maxWidth: z.string().optional(),
 })
 
 export const videoBubbleBlockSchema = blockBaseSchema.merge(
@@ -19,3 +21,7 @@ export const videoBubbleBlockSchema = blockBaseSchema.merge(
 )
 
 export type VideoBubbleBlock = z.infer<typeof videoBubbleBlockSchema>
+export type EmbeddableVideoBubbleContentType = Exclude<
+  VideoBubbleContentType,
+  VideoBubbleContentType.URL
+>