52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Box, Text } from '@chakra-ui/react'
|
|
import { VideoBubbleStep, VideoBubbleContentType } from 'models'
|
|
|
|
export const VideoStepNodeContent = ({ step }: { step: VideoBubbleStep }) => {
|
|
if (!step.content?.url || !step.content.type)
|
|
return <Text color="gray.500">Click to edit...</Text>
|
|
switch (step.content.type) {
|
|
case VideoBubbleContentType.URL:
|
|
return (
|
|
<Box w="full" h="120px" pos="relative">
|
|
<video
|
|
key={step.content.url}
|
|
controls
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
position: 'absolute',
|
|
left: '0',
|
|
top: '0',
|
|
borderRadius: '10px',
|
|
}}
|
|
>
|
|
<source src={step.content.url} />
|
|
</video>
|
|
</Box>
|
|
)
|
|
case VideoBubbleContentType.VIMEO:
|
|
case VideoBubbleContentType.YOUTUBE: {
|
|
const baseUrl =
|
|
step.content.type === VideoBubbleContentType.VIMEO
|
|
? 'https://player.vimeo.com/video'
|
|
: 'https://www.youtube.com/embed'
|
|
return (
|
|
<Box w="full" h="120px" pos="relative">
|
|
<iframe
|
|
src={`${baseUrl}/${step.content.id}`}
|
|
allowFullScreen
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
position: 'absolute',
|
|
left: '0',
|
|
top: '0',
|
|
borderRadius: '10px',
|
|
}}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|
|
}
|
|
}
|