matrimony
This commit is contained in:
meena committed
1 parent
cd880e10e5
commit
68f97c40dc
13 files changed
+700
-886
No files matched your search
@@ -2,113 +2,31 @@ import React, { useState, useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
import { Play, X, Heart, Share2, Eye, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import weddingImg1 from "../../assets/images/wedding6.jpeg";
|
||||
import weddingImg2 from "../../assets/images/wedding8.jpg";
|
||||
import weddingImg3 from "../../assets/images/wedding6.jpeg";
|
||||
import { Play, X, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
|
||||
const VideoSwiperGallery = () => {
|
||||
const VideoSwiperGallery = ({ videos }) => {
|
||||
const [selectedVideo, setSelectedVideo] = useState(null);
|
||||
const swiperRef = useRef(null);
|
||||
|
||||
// Video data with online sources
|
||||
const videos = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Priya & Rahul - Wedding Story',
|
||||
thumbnail: weddingImg1,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
||||
views: '2.4K',
|
||||
likes: '142',
|
||||
duration: '3:45'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Aisha - Profile Introduction',
|
||||
thumbnail: weddingImg2,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
|
||||
views: '1.8K',
|
||||
likes: '98',
|
||||
duration: '2:30'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Rohan - Life Journey',
|
||||
thumbnail: weddingImg3,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
|
||||
views: '3.2K',
|
||||
likes: '256',
|
||||
duration: '4:15'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Divya - Family Values',
|
||||
thumbnail: weddingImg1,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
|
||||
views: '1.5K',
|
||||
likes: '87',
|
||||
duration: '3:00'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Karthik & Meera - First Meet',
|
||||
thumbnail: weddingImg2,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
|
||||
views: '4.1K',
|
||||
likes: '312',
|
||||
duration: '5:20'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Sneha - Hobbies & Interests',
|
||||
thumbnail: weddingImg3,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
|
||||
views: '2.7K',
|
||||
likes: '178',
|
||||
duration: '2:45'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Arjun - Career & Dreams',
|
||||
thumbnail: weddingImg1,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
|
||||
views: '1.9K',
|
||||
likes: '134',
|
||||
duration: '3:30'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Lakshmi - Traditional Values',
|
||||
thumbnail: weddingImg2,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
|
||||
views: '3.5K',
|
||||
likes: '267',
|
||||
duration: '4:00'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Vikram - Adventure Life',
|
||||
thumbnail: weddingImg3,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
||||
views: '5.2K',
|
||||
likes: '423',
|
||||
duration: '4:30'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Anjali - Creative Journey',
|
||||
thumbnail: weddingImg1,
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
|
||||
views: '3.8K',
|
||||
likes: '289',
|
||||
duration: '3:15'
|
||||
const displayVideos = videos || [];
|
||||
|
||||
if (displayVideos.length === 0) return null;
|
||||
|
||||
const getEmbedUrl = (url) => {
|
||||
if (!url) return '';
|
||||
let embedUrl = url;
|
||||
if (url.includes('youtu.be/')) {
|
||||
embedUrl = url.replace('youtu.be/', 'www.youtube.com/embed/');
|
||||
} else if (url.includes('youtube.com/watch?v=')) {
|
||||
embedUrl = url.replace('youtube.com/watch?v=', 'youtube.com/embed/');
|
||||
}
|
||||
];
|
||||
return embedUrl.split('?')[0] + '?autoplay=1';
|
||||
};
|
||||
|
||||
const VideoCard = ({ video }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
@@ -129,12 +47,12 @@ const VideoSwiperGallery = () => {
|
||||
<div className="relative aspect-video">
|
||||
<img
|
||||
src={video.thumbnail}
|
||||
alt={video.title}
|
||||
alt="Video Thumbnail"
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-60 group-hover:opacity-80 transition-opacity" />
|
||||
<div className="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors" />
|
||||
|
||||
{/* Play Button */}
|
||||
<motion.div
|
||||
@@ -146,28 +64,6 @@ const VideoSwiperGallery = () => {
|
||||
<Play className="w-7 h-7 text-[#034E08] group-hover:text-white ml-1" fill="currentColor" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Duration Badge */}
|
||||
<div className="absolute top-2 right-2 bg-black/70 text-white text-xs font-semibold px-2 py-1 rounded">
|
||||
{video.duration}
|
||||
</div>
|
||||
|
||||
{/* Stats at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3">
|
||||
<h3 className="text-white font-semibold text-sm mb-2 line-clamp-2">
|
||||
{video.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 text-white/90 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>{video.views}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Heart className="w-3 h-3" />
|
||||
<span>{video.likes}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -202,36 +98,13 @@ const VideoSwiperGallery = () => {
|
||||
</button>
|
||||
|
||||
{/* Video Player */}
|
||||
<div className="bg-[#034E08] rounded-2xl overflow-y-scroll h-[100%] max-h-[480px] shadow-2xl">
|
||||
<video
|
||||
src={selectedVideo.videoUrl}
|
||||
controls
|
||||
autoPlay
|
||||
<div className="bg-black rounded-2xl overflow-hidden shadow-2xl">
|
||||
<iframe
|
||||
src={getEmbedUrl(selectedVideo.youtube_url)}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full aspect-video"
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
{/* Video Info */}
|
||||
<div className="bg-gray-900 p-6">
|
||||
<h2 className="text-white text-2xl font-bold mb-3">
|
||||
{selectedVideo.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-6 text-gray-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="w-5 h-5" />
|
||||
<span>{selectedVideo.views} views</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Heart className="w-5 h-5" />
|
||||
<span>{selectedVideo.likes} likes</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 ml-auto bg-[#034E08] hover:bg-green-700 text-white px-6 py-2 rounded-full transition-colors">
|
||||
<Share2 className="w-4 h-4" />
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
></iframe>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
@@ -290,7 +163,7 @@ const VideoSwiperGallery = () => {
|
||||
}}
|
||||
className="pb-16"
|
||||
>
|
||||
{videos.map((video) => (
|
||||
{displayVideos.map((video) => (
|
||||
<SwiperSlide key={video.id}>
|
||||
<VideoCard video={video} />
|
||||
</SwiperSlide>
|
||||
|
||||
Reference in new issue
Block a user