import React, { useState, useRef, useEffect } from 'react';
import { Header } from './components/Header';
import { VideoCard } from './components/VideoCard';
import { MOCK_VIDEOS, KEYWORDS, NEW_MOVIES, TRENDING_SONGS } from './constants';
import { ChevronRight, Loader2, Star, TrendingUp, Play, Music, Heart, Share2, MoreVertical, Download, Clock, MoreHorizontal, Home, Grid, Film, Globe, Flame, Zap, Facebook, Instagram, ShoppingBag, Chrome, Link, Clipboard, Compass, User } from 'lucide-react';
import { VideoData } from './types';
const App: React.FC = () => {
const [displayedVideos, setDisplayedVideos] = useState(MOCK_VIDEOS);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const observerTarget = useRef(null);
const [activeTab, setActiveTab] = useState('home');
const loadMoreVideos = () => {
setIsLoadingMore(true);
// Simulate API delay
setTimeout(() => {
const newVideos = MOCK_VIDEOS.map(v => ({
...v,
id: `${v.id}-${Date.now()}-${Math.random()}` // Ensure unique ID
}));
setDisplayedVideos(prev => [...prev, ...newVideos]);
setIsLoadingMore(false);
}, 1500);
};
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && !isLoadingMore) {
loadMoreVideos();
}
},
{ threshold: 0.1 }
);
if (observerTarget.current) {
observer.observe(observerTarget.current);
}
return () => {
if (observerTarget.current) {
observer.unobserve(observerTarget.current);
}
};
}, [isLoadingMore]);
const renderNewMoviesShelf = (index: number) => (
{/* 1. Keywords Pill Scroll */}
{/* 2. Featured Now (Hero) - Added Logo */}
{/* 3. Social Media Downloader */}
{/* Background decor */}
{/* 4. Dynamic Video Feed */}
{/* Modern Neumorphic Bottom Navigation */}
{/* Red decorative elements */}
);
const renderTrendingSongsShelf = (index: number) => {
return (
New Releases
Fresh from the box office
{NEW_MOVIES.map((movie) => (
{/* Hover Overlay */}
{movie.title}
{movie.genre}
{/* Section Header - Top Hindi Hits (Above Trending Songs) */}
);
}
const NAV_ITEMS = [
{ id: 'explore', icon: Compass, label: 'Explore' },
{ id: 'songs', icon: Music, label: 'Songs' },
{ id: 'home', icon: Home, label: 'Home' },
{ id: 'movies', icon: Film, label: 'Movies' },
{ id: 'profile', icon: User, label: 'Profile' },
];
return (
Top Hindi Hits
{/* Clean Look - No background image glow */}
{/* Inner Header: Trending Song */}
{/* Vertical Song List */}
Trending Song
Weekly Top 10
India
{TRENDING_SONGS.slice(0, 4).map((song, idx) => (
))}
{idx + 1}
{/* Album Cover */}
{/* Right Icon */}
{song.title}
{song.artist}
{song.duration}
{KEYWORDS.map((kw, i) => (
))}
Featured Now
{MOCK_VIDEOS.map((video) => (
))}
NEW
{video.duration}
{video.title}
{/* Header */}
Free Social Media Downloader
Paste a link to download videos instantly
{[
{ id: 'fb', icon: Facebook, name: 'Facebook', color: 'bg-[#1877F2]', text: 'text-white' },
{ id: 'google', icon: Chrome, name: 'Google', color: 'bg-white', text: 'text-gray-700', border: true },
{ id: 'insta', icon: Instagram, name: 'Instagram', color: 'bg-gradient-to-tr from-[#fdf497] via-[#fd5949] to-[#d6249f]', text: 'text-white' },
{ id: 'flip', icon: ShoppingBag, name: 'Flipkart', color: 'bg-[#2874F0]', text: 'text-white' }
].map((item) => (
{/* Input Bar */}
Trending For You
{displayedVideos.map((video, idx) => {
const itemNumber = idx + 1;
const shouldRenderShelf = itemNumber % 5 === 0;
let ShelfComponent = null;
if (shouldRenderShelf) {
const setNumber = itemNumber / 5;
if (setNumber % 2 !== 0) {
ShelfComponent = renderTrendingSongsShelf(idx);
} else {
ShelfComponent = renderNewMoviesShelf(idx);
}
}
return (
);
})}
{isLoadingMore && (
{/* Background Bar with Soft Curve - Removed soft shadow as requested */}
{/* Left Items */}
{NAV_ITEMS.slice(0, 2).map((item) => (
))}
{/* Spacer for Center Button */}
{/* Right Items */}
{NAV_ITEMS.slice(3, 5).map((item) => (