28 lines
972 B
TypeScript
28 lines
972 B
TypeScript
import { memo, useEffect, useState } from 'react'
|
|
import { screenHeight, screenWidth } from '@/utils'
|
|
import { Block, VideoBox } from '@/@share/components'
|
|
|
|
const BACKGROUND_VIDEOS = [
|
|
'https://cdn.roasmax.cn/material/b46f380532e14cf58dd350dbacc7c34a.mp4',
|
|
'https://cdn.roasmax.cn/material/992e6c5d940c42feb71c27e556b754c0.mp4',
|
|
'https://cdn.roasmax.cn/material/e4947477843f4067be7c37569a33d17b.mp4',
|
|
]
|
|
|
|
type BannerProps = { bgVideo?: string }
|
|
const BannerSection = memo<BannerProps>(function Banner({ bgVideo }) {
|
|
const [bgUrl, setBgurl] = useState(() => BACKGROUND_VIDEOS[Math.floor(Math.random() * BACKGROUND_VIDEOS.length)])
|
|
|
|
useEffect(() => {
|
|
if (!bgVideo) return
|
|
setBgurl(bgVideo)
|
|
}, [bgVideo])
|
|
|
|
return (
|
|
<Block className="absolute inset-0 bottom-0 left-0 right-0 top-0 z-[0] overflow-hidden">
|
|
<VideoBox url={bgUrl} width={512} style={{ width: screenWidth, height: screenHeight }} />
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
export default BannerSection
|