dd4de582a9
<!-- 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
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { VideoBubbleBlock } from '@typebot.io/schemas'
|
|
import {
|
|
VideoBubbleContentType,
|
|
gumletRegex,
|
|
horizontalVideoSuggestionSize,
|
|
tiktokRegex,
|
|
verticalVideoSuggestionSize,
|
|
vimeoRegex,
|
|
youtubeRegex,
|
|
} from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
|
|
|
|
export const parseVideoUrl = (
|
|
url: string
|
|
): {
|
|
type: VideoBubbleContentType
|
|
url: string
|
|
id?: string
|
|
videoSizeSuggestion?: Pick<
|
|
NonNullable<VideoBubbleBlock['content']>,
|
|
'aspectRatio' | 'maxWidth'
|
|
>
|
|
} => {
|
|
if (youtubeRegex.test(url)) {
|
|
const match = url.match(youtubeRegex)
|
|
const id = match?.at(2) ?? match?.at(3)
|
|
const parsedUrl = match?.at(0) ?? url
|
|
if (!id) return { type: VideoBubbleContentType.URL, url: parsedUrl }
|
|
return {
|
|
type: VideoBubbleContentType.YOUTUBE,
|
|
url: parsedUrl,
|
|
id,
|
|
videoSizeSuggestion: url.includes('shorts')
|
|
? verticalVideoSuggestionSize
|
|
: horizontalVideoSuggestionSize,
|
|
}
|
|
}
|
|
if (vimeoRegex.test(url)) {
|
|
const match = url.match(vimeoRegex)
|
|
const id = match?.at(1)
|
|
const parsedUrl = match?.at(0) ?? url
|
|
if (!id) return { type: VideoBubbleContentType.URL, url: parsedUrl }
|
|
return {
|
|
type: VideoBubbleContentType.VIMEO,
|
|
url: parsedUrl,
|
|
id,
|
|
videoSizeSuggestion: horizontalVideoSuggestionSize,
|
|
}
|
|
}
|
|
if (tiktokRegex.test(url)) {
|
|
const match = url.match(tiktokRegex)
|
|
const id = url.match(tiktokRegex)?.at(1)
|
|
const parsedUrl = match?.at(0) ?? url
|
|
if (!id) return { type: VideoBubbleContentType.URL, url: parsedUrl }
|
|
return {
|
|
type: VideoBubbleContentType.TIKTOK,
|
|
url: parsedUrl,
|
|
id,
|
|
videoSizeSuggestion: verticalVideoSuggestionSize,
|
|
}
|
|
}
|
|
if (gumletRegex.test(url)) {
|
|
const match = url.match(gumletRegex)
|
|
const id = match?.at(1)
|
|
const parsedUrl = match?.at(0) ?? url
|
|
if (!id) return { type: VideoBubbleContentType.URL, url: parsedUrl }
|
|
return {
|
|
type: VideoBubbleContentType.GUMLET,
|
|
url: parsedUrl,
|
|
id,
|
|
videoSizeSuggestion: horizontalVideoSuggestionSize,
|
|
}
|
|
}
|
|
return { type: VideoBubbleContentType.URL, url }
|
|
}
|