MVp

components/VideoPlayer.tsx

@@ -0,0 +1,77 @@
+'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>
+  )
+}