blsmedia/bot
2
0
Fork 0
Code Issues Activity

✨ Implement Pexels videos option to media popover (#1636)

Browse Source 
Closes #1575 

Note: Need to create a new environment variable named
`NEXT_PUBLIC_PEXELS_API_KEY` to store the API Key obtained from Pexels!


https://github.com/user-attachments/assets/4250f799-0bd7-48e9-b9a8-4bc188ad7704

---------

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Co-authored-by: younesbenallal <younes.benallal.06@gmail.com>
This commit is contained in:
Abhirup Basu
2024-07-22 23:11:01 +05:30
committed by GitHub
parent 94ca8ac39f
commit 09277c264c
10 changed files with 507 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,46 @@
import { Stack, Text } from '@chakra-ui/react'
import { Button, HStack, Stack } from '@chakra-ui/react'
import { VideoBubbleBlock } from '@typebot.io/schemas'
import { TextInput } from '@/components/inputs'
import { useTranslate } from '@tolgee/react'
import { parseVideoUrl } from '@typebot.io/schemas/features/blocks/bubbles/video/helpers'
import { defaultVideoBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { useState } from 'react'
import { PexelsPicker } from '@/components/VideoUploadContent/PexelsPicker'
import { VideoLinkEmbedContent } from '@/components/VideoUploadContent/VideoLinkEmbedContent'
type Tabs = 'link' | 'pexels'
type Props = {
content?: VideoBubbleBlock['content']
onSubmit: (content: VideoBubbleBlock['content']) => void
}
initialTab?: Tabs
} & (
| {
includedTabs?: Tabs[]
}
| {
excludedTabs?: Tabs[]
}
)
const defaultDisplayedTabs: Tabs[] = ['link', 'pexels']
export const VideoUploadContent = ({
content,
onSubmit,
initialTab,
...props
}: Props) => {
const includedTabs =
'includedTabs' in props
? props.includedTabs ?? defaultDisplayedTabs
: defaultDisplayedTabs
const excludedTabs = 'excludedTabs' in props ? props.excludedTabs ?? [] : []
const displayedTabs = defaultDisplayedTabs.filter(
(tab) => !excludedTabs.includes(tab) && includedTabs.includes(tab)
)
const [currentTab, setCurrentTab] = useState<Tabs>(
initialTab ?? displayedTabs[0]
)
export const VideoUploadContent = ({ content, onSubmit }: Props) => {
const { t } = useTranslate()
const updateUrl = (url: string) => {
const {
type,
@@ -20,6 +48,10 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
id,
videoSizeSuggestion,
} = parseVideoUrl(url)
if (currentTab !== 'link') {
// Allow user to update video settings after selection
setCurrentTab('link')
}
return onSubmit({
...content,
type,
@@ -30,94 +62,40 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
: {}),
})
}
const updateAspectRatio = (aspectRatio?: string) => {
return onSubmit({
...content,
aspectRatio,
})
}
const updateMaxWidth = (maxWidth?: string) => {
return onSubmit({
...content,
maxWidth,
})
}
const updateAutoPlay = (isAutoplayEnabled: boolean) => {
return onSubmit({ ...content, isAutoplayEnabled })
}
const updateControlsDisplay = (areControlsDisplayed: boolean) => {
if (areControlsDisplayed === false) {
// Make sure autoplay is enabled when video controls are disabled
return onSubmit({
...content,
isAutoplayEnabled: true,
areControlsDisplayed,
})
}
return onSubmit({ ...content, areControlsDisplayed })
}
return (
<Stack p="2" spacing={4}>
<Stack>
<TextInput
placeholder={t('video.urlInput.placeholder')}
defaultValue={content?.url ?? ''}
onChange={updateUrl}
<Stack>
<HStack>
{displayedTabs.includes('link') && (
<Button
variant={currentTab === 'link' ? 'solid' : 'ghost'}
onClick={() => setCurrentTab('link')}
size="sm"
>
Link
</Button>
)}
{displayedTabs.includes('pexels') && (
<Button
variant={currentTab === 'pexels' ? 'solid' : 'ghost'}
onClick={() => setCurrentTab('pexels')}
size="sm"
>
Pexels
</Button>
)}
</HStack>
{/* Body content to be displayed below conditionally based on currentTab */}
{currentTab === 'link' && (
<VideoLinkEmbedContent
content={content}
updateUrl={updateUrl}
onSubmit={onSubmit}
/>
<Text fontSize="xs" color="gray.400" textAlign="center">
{t('video.urlInput.helperText')}
</Text>
</Stack>
{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>
)}
{content?.url && content?.type === 'url' && (
<Stack>
<SwitchWithLabel
label={'Display controls'}
initialValue={
content?.areControlsDisplayed ??
defaultVideoBubbleContent.areControlsDisplayed
}
onCheckChange={updateControlsDisplay}
/>
<SwitchWithLabel
label={t('editor.blocks.bubbles.audio.settings.autoplay.label')}
initialValue={
content?.isAutoplayEnabled ??
defaultVideoBubbleContent.isAutoplayEnabled
}
isChecked={
content?.isAutoplayEnabled ??
defaultVideoBubbleContent.isAutoplayEnabled
}
isDisabled={content?.areControlsDisplayed === false}
onCheckChange={() => updateAutoPlay(!content.isAutoplayEnabled)}
/>
</Stack>
{currentTab === 'pexels' && (
<PexelsPicker videoSize="medium" onVideoSelect={updateUrl} />
)}
</Stack>
)