77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { Play } from 'lucide-react'
|
|
import Image from 'next/image'
|
|
|
|
interface VideoPlayerProps {
|
|
posterImage: string
|
|
videoUrl: string
|
|
title: string
|
|
className?: string
|
|
}
|
|
|
|
export function VideoPlayer({ posterImage, videoUrl, title, className = '' }: VideoPlayerProps) {
|
|
const [isPlaying, setIsPlaying] = useState(false)
|
|
|
|
const handlePlay = () => {
|
|
setIsPlaying(true)
|
|
}
|
|
|
|
return (
|
|
<div className={`onepage-media ${className}`}>
|
|
{!isPlaying ? (
|
|
<>
|
|
<Image
|
|
src={posterImage}
|
|
alt={title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<motion.div
|
|
className="onepage-play-overlay"
|
|
whileHover={{ backgroundColor: 'rgba(0,0,0,0.3)' }}
|
|
transition={{ duration: 0.3 }}
|
|
onClick={handlePlay}
|
|
>
|
|
<motion.div
|
|
className="onepage-play-btn"
|
|
whileHover={{ scale: 1.2 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
animate={{
|
|
boxShadow: [
|
|
'0 0 0 0 rgba(122,92,255,0.15)',
|
|
'0 0 0 20px rgba(122,92,255,0)',
|
|
'0 0 0 0 rgba(122,92,255,0)'
|
|
]
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
>
|
|
<Play className="w-6 h-6"/> Play {title}
|
|
</motion.div>
|
|
</motion.div>
|
|
</>
|
|
) : (
|
|
<iframe
|
|
src={videoUrl}
|
|
title={title}
|
|
className="w-full h-full"
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
border: 'none'
|
|
}}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
} |