41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { memo, useEffect, useState } from 'react'
|
|
import Svg, { Circle, Defs, Pattern, Rect } from 'react-native-svg'
|
|
|
|
import { Block, VideoBox } from '@/@share/components'
|
|
import { screenHeight, screenWidth } from '@/utils'
|
|
|
|
const BACKGROUND_VIDEOS = [
|
|
'https://cdn.roasmax.cn/material/f6986370d3eb4d07a839f2b8d2803e6b.webp',
|
|
'https://cdn.roasmax.cn/material/afdbd7aefe7546329519bbf4e5e0e22c.webp',
|
|
'https://cdn.roasmax.cn/material/e5d769a8cc88441eae9d317dd9c0ecc8.webp',
|
|
]
|
|
|
|
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 z-0 overflow-hidden">
|
|
<VideoBox style={{ width: screenWidth, height: screenHeight }} url={bgUrl} width={512} />
|
|
|
|
<Block className="absolute inset-0">
|
|
<Svg height="100%" preserveAspectRatio="none" viewBox="0 0 400 800" width="100%">
|
|
<Defs>
|
|
<Pattern height="15" id="dots" patternUnits="userSpaceOnUse" width="15" x="0" y="0">
|
|
<Circle cx="2" cy="2" fill="#ffff00" opacity="0.05" r="2" />
|
|
</Pattern>
|
|
</Defs>
|
|
<Rect fill="url(#dots)" height="100%" width="100%" x="0" y="0" />
|
|
</Svg>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
export default BannerSection
|