[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter, Poppins } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { SidebarProvider } from "@/components/ui/sidebar" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) const poppins = Poppins({ weight: ["400", "500", "600", "700"], subsets: ["latin"], variable: "--font-poppins", }) export const metadata: Metadata = { title: "WeebWatcher - Your Ultimate Anime Streaming Platform", description: "Discover, watch, and track your favorite anime shows and movies all in one beautiful place", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 346 100% 58%; --primary-foreground: 355 100% 97%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 346 100% 58%; --radius: 0.75rem; } .dark { --background: 240 10% 4%; --foreground: 0 0% 98%; --card: 240 10% 6%; --card-foreground: 0 0% 98%; --popover: 240 10% 6%; --popover-foreground: 0 0% 98%; --primary: 346 100% 58%; --primary-foreground: 355 100% 97%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 346 100% 58%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .anime-card { @apply relative overflow-hidden rounded-xl transition-all duration-300 hover:shadow-[0_0_15px_rgba(255,56,96,0.5)]; } .anime-card-image { @apply transition-transform duration-500 ease-out; } .anime-card:hover .anime-card-image { @apply scale-110; } .anime-card-overlay { @apply absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-0 transition-opacity duration-300; } .anime-card:hover .anime-card-overlay { @apply opacity-100; } .anime-title-gradient { @apply bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent; } .hero-gradient { @apply bg-gradient-to-br from-primary/20 via-purple-500/10 to-background; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .glow-effect { box-shadow: 0 0 15px rgba(255, 56, 96, 0.5); } .text-glow { text-shadow: 0 0 10px rgba(255, 56, 96, 0.7); } .anime-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem; } @media (min-width: 640px) { .anime-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } @media (min-width: 1024px) { .anime-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-inter)"], heading: ["var(--font-poppins)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, "pulse-glow": { "0%, 100%": { boxShadow: "0 0 15px rgba(255, 56, 96, 0.5)", transform: "scale(1)", }, "50%": { boxShadow: "0 0 25px rgba(255, 56, 96, 0.8)", transform: "scale(1.05)", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", float: "float 6s ease-in-out infinite", "pulse-glow": "pulse-glow 3s ease-in-out infinite", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/anime-layout.tsx" "use client" import { type ReactNode, useEffect, useState } from "react" import { AnimeSidebar } from "@/components/anime-sidebar" import { Sidebar, SidebarInset } from "@/components/ui/sidebar" import { cn } from "@/lib/utils" import { Loader2 } from "lucide-react" interface AnimeLayoutProps { children: ReactNode } export function AnimeLayout({ children }: AnimeLayoutProps) { const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate loading data from Anime_Scraper const timer = setTimeout(() => { setIsLoading(false) }, 1000) return () => clearTimeout(timer) }, []) return (

{isLoading ? (

Loading your anime...

) : (

{children}

)}

) } [V0_FILE]typescriptreact:file="components/anime-sidebar.tsx" "use client" import * as React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Film, Home, ListFilter, Search, Star, TrendingUp, Tv2, History, Bookmark, Settings, Heart, Zap, Sparkles, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" import { Badge } from "@/components/ui/badge" export function AnimeSidebar() { const pathname = usePathname() const [searchQuery, setSearchQuery] = React.useState("") const mainNavItems = [ { name: "Home", href: "/", icon: Home }, { name: "Discover", href: "/discover", icon: Sparkles }, { name: "Trending", href: "/trending", icon: TrendingUp }, { name: "Top Rated", href: "/top-rated", icon: Star }, { name: "Seasonal", href: "/seasonal", icon: Zap, badge: "NEW" }, ] const genreNavItems = [ { name: "Action", href: "/genres/action" }, { name: "Adventure", href: "/genres/adventure" }, { name: "Comedy", href: "/genres/comedy" }, { name: "Drama", href: "/genres/drama" }, { name: "Fantasy", href: "/genres/fantasy" }, { name: "Horror", href: "/genres/horror" }, { name: "Romance", href: "/genres/romance" }, { name: "Sci-Fi", href: "/genres/sci-fi" }, { name: "Slice of Life", href: "/genres/slice-of-life" }, { name: "Supernatural", href: "/genres/supernatural" }, { name: "Mystery", href: "/genres/mystery" }, { name: "Psychological", href: "/genres/psychological" }, ] const typeNavItems = [ { name: "TV Series", href: "/types/tv", icon: Tv2 }, { name: "Movies", href: "/types/movies", icon: Film }, { name: "OVAs", href: "/types/ovas", icon: Film }, ] const libraryNavItems = [ { name: "Watch History", href: "/history", icon: History }, { name: "Favorites", href: "/favorites", icon: Heart }, { name: "Watchlist", href: "/watchlist", icon: Bookmark }, { name: "Settings", href: "/settings", icon: Settings }, ] return ( <>

Weeb Watcher

setSearchQuery(e.target.value)} />

{mainNavItems.map((item) => ( {item.name} {item.badge && ( {item.badge} )} ))} My Library {libraryNavItems.map((item) => ( {item.name} ))} Types {typeNavItems.map((item) => ( {item.name} ))} Genres {genreNavItems.map((item) => ( {item.name} ))} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { AnimeLayout } from "@/components/anime-layout" import { HeroSection } from "@/components/hero-section" import { RecentlyAdded } from "@/components/recently-added" import { TopAnime } from "@/components/top-anime" import { TrendingAnime } from "@/components/trending-anime" import { SeasonalAnime } from "@/components/seasonal-anime" import { AnimeNews } from "@/components/anime-news" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { Play, Info, Star, Calendar, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" import { fetchFeaturedAnime } from "@/lib/anime-api" // This would normally come from the Anime_Scraper API const featuredAnime = [ { id: 1, title: "Attack on Titan: Final Season", description: "The war for Paradis zeroes in on Shiganshina just as Jaegerists have seized control. With the fate of the world hanging in the balance, Eren must make his move...", image: "/placeholder.svg?height=600&width=1200&text=Attack+on+Titan", rating: 9.8, year: 2023, episodes: 16, duration: "24 min", genres: ["Action", "Drama", "Fantasy"], }, { id: 2, title: "Demon Slayer: Entertainment District Arc", description: "Tanjiro and his friends join the Sound Hashira Tengen Uzui on a mission in Yoshiwara, where they encounter the demons Daki and Gyutaro.", image: "/placeholder.svg?height=600&width=1200&text=Demon+Slayer", rating: 9.6, year: 2022, episodes: 11, duration: "24 min", genres: ["Action", "Fantasy", "Adventure"], }, { id: 3, title: "Jujutsu Kaisen Season 2", description: "The past comes to light as Gojo and Geto work together with others to seal away a dangerous curse user. The Shibuya Incident begins...", image: "/placeholder.svg?height=600&width=1200&text=Jujutsu+Kaisen", rating: 9.7, year: 2023, episodes: 23, duration: "24 min", genres: ["Action", "Supernatural", "Horror"], }, ] export function HeroSection() { const [currentIndex, setCurrentIndex] = useState(0) const [isLoading, setIsLoading] = useState(true) const [featured, setFeatured] = useState(featuredAnime) useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const data = await fetchFeaturedAnime() if (data && data.length > 0) { setFeatured(data) } } catch (error) { console.error("Failed to fetch featured anime:", error) } finally { setIsLoading(false) } } loadData() // Auto-rotate featured anime const interval = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % featured.length) }, 8000) return () => clearInterval(interval) }, [featured.length]) const currentAnime = featured[currentIndex] return (

{currentAnime.title}

{currentAnime.rating}

{currentAnime.year}

{currentAnime.duration}

{currentAnime.genres.map((genre) => ( {genre} ))}

{currentAnime.description}

{featured.map((_, index) => (

) } [V0_FILE]typescriptreact:file="components/trending-anime.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Play, TrendingUp, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { fetchTrendingAnime } from "@/lib/anime-api" // This would normally come from the Anime_Scraper API const trendingAnime = [ { id: 1, title: "One Piece", image: "/placeholder.svg?height=300&width=200&text=One+Piece", rating: 9.5, episodes: 1080, trending: 1, }, { id: 2, title: "Frieren: Beyond Journey's End", image: "/placeholder.svg?height=300&width=200&text=Frieren", rating: 9.2, episodes: 28, trending: 2, }, { id: 3, title: "Solo Leveling", image: "/placeholder.svg?height=300&width=200&text=Solo+Leveling", rating: 9.0, episodes: 12, trending: 3, }, { id: 4, title: "Mushoku Tensei: Jobless Reincarnation", image: "/placeholder.svg?height=300&width=200&text=Mushoku+Tensei", rating: 8.9, episodes: 24, trending: 4, }, { id: 5, title: "Oshi no Ko", image: "/placeholder.svg?height=300&width=200&text=Oshi+no+Ko", rating: 9.1, episodes: 11, trending: 5, }, { id: 6, title: "Chainsaw Man", image: "/placeholder.svg?height=300&width=200&text=Chainsaw+Man", rating: 8.8, episodes: 12, trending: 6, }, ] export function TrendingAnime() { const [isLoading, setIsLoading] = useState(true) const [trending, setTrending] = useState(trendingAnime) useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const data = await fetchTrendingAnime() if (data && data.length > 0) { setTrending(data) } } catch (error) { console.error("Failed to fetch trending anime:", error) } finally { setIsLoading(false) } } // Simulate API call setTimeout(loadData, 1000) }, []) return (

Trending Now

{isLoading ? Array(6) .fill(0) .map((_, i) => (

)) : trending.map((anime) => (

{anime.trending}

{anime.title}

{anime.episodes} Episodes ★ {anime.rating}

))}

) } [V0_FILE]typescriptreact:file="components/recently-added.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Play, Clock, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Skeleton } from "@/components/ui/skeleton" import { fetchRecentEpisodes } from "@/lib/anime-api" // This would normally come from the Anime_Scraper API const recentlyAddedAnime = [ { id: 1, title: "One Piece", episode: "Episode 1080", image: "/placeholder.svg?height=300&width=500&text=One+Piece+1080", timeAgo: "3 hours ago", }, { id: 2, title: "My Hero Academia", episode: "Episode 138", image: "/placeholder.svg?height=300&width=500&text=My+Hero+Academia+138", timeAgo: "1 day ago", }, { id: 3, title: "Bleach: Thousand-Year Blood War", episode: "Episode 26", image: "/placeholder.svg?height=300&width=500&text=Bleach+26", timeAgo: "2 days ago", }, { id: 4, title: "Chainsaw Man", episode: "Episode 12", image: "/placeholder.svg?height=300&width=500&text=Chainsaw+Man+12", timeAgo: "3 days ago", }, ] export function RecentlyAdded() { const [isLoading, setIsLoading] = useState(true) const [recentEpisodes, setRecentEpisodes] = useState(recentlyAddedAnime) useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const data = await fetchRecentEpisodes() if (data && data.length > 0) { setRecentEpisodes(data) } } catch (error) { console.error("Failed to fetch recent episodes:", error) } finally { setIsLoading(false) } } // Simulate API call setTimeout(loadData, 1500) }, []) return (

Recently Added

{isLoading ? Array(4) .fill(0) .map((_, i) => (

)) : recentEpisodes.map((anime) => (

{anime.timeAgo}

{anime.title}

{anime.episode}

))}

) } [V0_FILE]typescriptreact:file="components/seasonal-anime.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Zap, ChevronRight, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Skeleton } from "@/components/ui/skeleton" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { fetchSeasonalAnime } from "@/lib/anime-api" // This would normally come from the Anime_Scraper API const seasonalAnime = { winter: [ { id: 1, title: "Solo Leveling", image: "/placeholder.svg?height=300&width=200&text=Solo+Leveling", rating: 9.1, genres: ["Action", "Adventure", "Fantasy"], }, { id: 2, title: "Classroom of the Elite Season 3", image: "/placeholder.svg?height=300&width=200&text=Classroom+of+the+Elite", rating: 8.7, genres: ["Drama", "Psychological"], }, { id: 3, title: "Mashle: Magic and Muscles Season 2", image: "/placeholder.svg?height=300&width=200&text=Mashle", rating: 8.5, genres: ["Action", "Comedy", "Fantasy"], }, { id: 4, title: "The Apothecary Diaries", image: "/placeholder.svg?height=300&width=200&text=Apothecary+Diaries", rating: 8.9, genres: ["Drama", "Historical", "Mystery"], }, ], spring: [ { id: 5, title: "Demon Slayer: Hashira Training Arc", image: "/placeholder.svg?height=300&width=200&text=Demon+Slayer", rating: 9.3, genres: ["Action", "Fantasy"], }, { id: 6, title: "My Hero Academia Season 7", image: "/placeholder.svg?height=300&width=200&text=My+Hero+Academia", rating: 8.8, genres: ["Action", "Superhero"], }, ], summer: [], fall: [], } export function SeasonalAnime() { const [isLoading, setIsLoading] = useState(true) const [seasonal, setSeasonal] = useState(seasonalAnime) const [currentSeason, setCurrentSeason] = useState("winter") useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const data = await fetchSeasonalAnime() if (data) { setSeasonal(data) } } catch (error) { console.error("Failed to fetch seasonal anime:", error) } finally { setIsLoading(false) } } // Simulate API call setTimeout(loadData, 2000) }, []) return (

Seasonal Anime

Winter 2024 Spring 2024 Summer 2024 Fall 2024 {Object.keys(seasonal).map((season) => ( {isLoading ? (

{Array(4) .fill(0) .map((_, i) => (

))}

) : seasonal[season].length > 0 ? (

{seasonal[season].map((anime) => (

{anime.genres.slice(0, 2).map((genre) => ( {genre} ))}

{anime.rating}

{anime.title}

))}

) : (

Coming soon...

)} ))}

) } [V0_FILE]typescriptreact:file="components/top-anime.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Star, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { fetchTopAnime } from "@/lib/anime-api" // This would normally come from the Anime_Scraper API const topAnime = [ { id: 1, title: "Fullmetal Alchemist: Brotherhood", rating: 9.9, image: "/placeholder.svg?height=300&width=200&text=FMAB", rank: 1, }, { id: 2, title: "Steins;Gate", rating: 9.8, image: "/placeholder.svg?height=300&width=200&text=Steins;Gate", rank: 2, }, { id: 3, title: "Hunter x Hunter", rating: 9.7, image: "/placeholder.svg?height=300&width=200&text=HxH", rank: 3, }, { id: 4, title: "Gintama", rating: 9.6, image: "/placeholder.svg?height=300&width=200&text=Gintama", rank: 4, }, { id: 5, title: "Attack on Titan", rating: 9.5, image: "/placeholder.svg?height=300&width=200&text=AoT", rank: 5, }, ] export function TopAnime() { const [isLoading, setIsLoading] = useState(true) const [top, setTop] = useState(topAnime) useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const data = await fetchTopAnime() if (data && data.length > 0) { setTop(data) } } catch (error) { console.error("Failed to fetch top anime:", error) } finally { setIsLoading(false) } } // Simulate API call setTimeout(loadData, 2500) }, []) return (

Top Rated Anime

{isLoading ? Array(5) .fill(0) .map((_, i) => (

)) : top.map((anime) => (

#{anime.rank}

{anime.title}

{anime.rating}

))}

) } [V0_FILE]typescriptreact:file="components/anime-news.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Newspaper, ChevronRight, Calendar } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Skeleton } from "@/components/ui/skeleton" import { fetchAnimeNews } from "@/lib/anime-api" // This would normally come from the Anime_Scraper API const animeNews = [ { id: 1, title: "Demon Slayer Season 4 Announces Release Date", summary: "The highly anticipated fourth season of Demon Slayer has officially announced its release date for Spring 2024.", image: "/placeholder.svg?height=200&width=350&text=Demon+Slayer+News", date: "2024-04-01", category: "Announcement", }, { id: 2, title: "One Piece Manga Enters Final Saga", summary: "Eiichiro Oda has confirmed that the One Piece manga has entered its final saga after 25 years of serialization.", image: "/placeholder.svg?height=200&width=350&text=One+Piece+News", date: "2024-03-28", category: "Manga", }, { id: 3, title: "Studio Ghibli Announces New Film", summary: "Legendary animation studio Ghibli has announced a new feature film directed by Hayao Miyazaki's son, Goro Miyazaki.", image: "/placeholder.svg?height=200&width=350&text=Ghibli+News", date: "2024-03-25", category: "Movie", }, ] export function AnimeNews() { const [isLoading, setIsLoading] = useState(true) const [news, setNews] = useState(animeNews) useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const data = await fetchAnimeNews() if (data && data.length > 0) { setNews(data) } } catch (error) { console.error("Failed to fetch anime news:", error) } finally { setIsLoading(false) } } // Simulate API call setTimeout(loadData, 3000) }, []) return (

Anime News

{isLoading ? Array(3) .fill(0) .map((_, i) => (

)) : news.map((item) => (

{item.category}

{new Date(item.date).toLocaleDateString()}

{item.title}

{item.summary}

))}

) } [V0_FILE]typescriptreact:file="lib/anime-api.ts" // This service integrates with the Anime_Scraper repository interface Anime { id: number title: string description?: string image: string rating?: number year?: number episodes?: number genres?: string[] status?: string duration?: string trending?: number rank?: number } interface Episode { id: number animeId: number number: number title: string thumbnail: string url: string timeAgo?: string } interface NewsItem { id: number title: string summary: string image: string date: string category: string } // Mock data - in a real app, this would be replaced with actual API calls to the Anime_Scraper const mockFeaturedAnime = [ { id: 1, title: "Attack on Titan: Final Season", description: "The war for Paradis zeroes in on Shiganshina just as Jaegerists have seized control. With the fate of the world hanging in the balance, Eren must make his move...", image: "/placeholder.svg?height=600&width=1200&text=Attack+on+Titan", rating: 9.8, year: 2023, episodes: 16, duration: "24 min", genres: ["Action", "Drama", "Fantasy"], }, { id: 2, title: "Demon Slayer: Entertainment District Arc", description: "Tanjiro and his friends join the Sound Hashira Tengen Uzui on a mission in Yoshiwara, where they encounter the demons Daki and Gyutaro.", image: "/placeholder.svg?height=600&width=1200&text=Demon+Slayer", rating: 9.6, year: 2022, episodes: 11, duration: "24 min", genres: ["Action", "Fantasy", "Adventure"], }, { id: 3, title: "Jujutsu Kaisen Season 2", description: "The past comes to light as Gojo and Geto work together with others to seal away a dangerous curse user. The Shibuya Incident begins...", image: "/placeholder.svg?height=600&width=1200&text=Jujutsu+Kaisen", rating: 9.7, year: 2023, episodes: 23, duration: "24 min", genres: ["Action", "Supernatural", "Horror"], }, ] const mockTrendingAnime = [ { id: 1, title: "One Piece", image: "/placeholder.svg?height=300&width=200&text=One+Piece", rating: 9.5, episodes: 1080, trending: 1, }, { id: 2, title: "Frieren: Beyond Journey's End", image: "/placeholder.svg?height=300&width=200&text=Frieren", rating: 9.2, episodes: 28, trending: 2, }, { id: 3, title: "Solo Leveling", image: "/placeholder.svg?height=300&width=200&text=Solo+Leveling", rating: 9.0, episodes: 12, trending: 3, }, { id: 4, title: "Mushoku Tensei: Jobless Reincarnation", image: "/placeholder.svg?height=300&width=200&text=Mushoku+Tensei", rating: 8.9, episodes: 24, trending: 4, }, { id: 5, title: "Oshi no Ko", image: "/placeholder.svg?height=300&width=200&text=Oshi+no+Ko", rating: 9.1, episodes: 11, trending: 5, }, { id: 6, title: "Chainsaw Man", image: "/placeholder.svg?height=300&width=200&text=Chainsaw+Man", rating: 8.8, episodes: 12, trending: 6, }, ] const mockRecentEpisodes = [ { id: 1, title: "One Piece", episode: "Episode 1080", image: "/placeholder.svg?height=300&width=500&text=One+Piece+1080", timeAgo: "3 hours ago", }, { id: 2, title: "My Hero Academia", episode: "Episode 138", image: "/placeholder.svg?height=300&width=500&text=My+Hero+Academia+138", timeAgo: "1 day ago", }, { id: 3, title: "Bleach: Thousand-Year Blood War", episode: "Episode 26", image: "/placeholder.svg?height=300&width=500&text=Bleach+26", timeAgo: "2 days ago", }, { id: 4, title: "Chainsaw Man", episode: "Episode 12", image: "/placeholder.svg?height=300&width=500&text=Chainsaw+Man+12", timeAgo: "3 days ago", }, ] const mockTopAnime = [ { id: 1, title: "Fullmetal Alchemist: Brotherhood", rating: 9.9, image: "/placeholder.svg?height=300&width=200&text=FMAB", rank: 1, }, { id: 2, title: "Steins;Gate", rating: 9.8, image: "/placeholder.svg?height=300&width=200&text=Steins;Gate", rank: 2, }, { id: 3, title: "Hunter x Hunter", rating: 9.7, image: "/placeholder.svg?height=300&width=200&text=HxH", rank: 3, }, { id: 4, title: "Gintama", rating: 9.6, image: "/placeholder.svg?height=300&width=200&text=Gintama", rank: 4, }, { id: 5, title: "Attack on Titan", rating: 9.5, image: "/placeholder.svg?height=300&width=200&text=AoT", rank: 5, }, ] const mockSeasonalAnime = { winter: [ { id: 1, title: "Solo Leveling", image: "/placeholder.svg?height=300&width=200&text=Solo+Leveling", rating: 9.1, genres: ["Action", "Adventure", "Fantasy"], }, { id: 2, title: "Classroom of the Elite Season 3", image: "/placeholder.svg?height=300&width=200&text=Classroom+of+the+Elite", rating: 8.7, genres: ["Drama", "Psychological"], }, { id: 3, title: "Mashle: Magic and Muscles Season 2", image: "/placeholder.svg?height=300&width=200&text=Mashle", rating: 8.5, genres: ["Action", "Comedy", "Fantasy"], }, { id: 4, title: "The Apothecary Diaries", image: "/placeholder.svg?height=300&width=200&text=Apothecary+Diaries", rating: 8.9, genres: ["Drama", "Historical", "Mystery"], }, ], spring: [ { id: 5, title: "Demon Slayer: Hashira Training Arc", image: "/placeholder.svg?height=300&width=200&text=Demon+Slayer", rating: 9.3, genres: ["Action", "Fantasy"], }, { id: 6, title: "My Hero Academia Season 7", image: "/placeholder.svg?height=300&width=200&text=My+Hero+Academia", rating: 8.8, genres: ["Action", "Superhero"], }, ], summer: [], fall: [], } const mockAnimeNews = [ { id: 1, title: "Demon Slayer Season 4 Announces Release Date", summary: "The highly anticipated fourth season of Demon Slayer has officially announced its release date for Spring 2024.", image: "/placeholder.svg?height=200&width=350&text=Demon+Slayer+News", date: "2024-04-01", category: "Announcement", }, { id: 2, title: "One Piece Manga Enters Final Saga", summary: "Eiichiro Oda has confirmed that the One Piece manga has entered its final saga after 25 years of serialization.", image: "/placeholder.svg?height=200&width=350&text=One+Piece+News", date: "2024-03-28", category: "Manga", }, { id: 3, title: "Studio Ghibli Announces New Film", summary: "Legendary animation studio Ghibli has announced a new feature film directed by Hayao Miyazaki's son, Goro Miyazaki.", image: "/placeholder.svg?height=200&width=350&text=Ghibli+News", date: "2024-03-25", category: "Movie", }, ] // Integration with Anime_Scraper // In a real implementation, these functions would use the Anime_Scraper to fetch data export async function fetchFeaturedAnime(): Promise { // This would use the Anime_Scraper to fetch featured anime // For now, we'll return mock data return new Promise((resolve) => { setTimeout(() => resolve(mockFeaturedAnime), 500) }) } export async function fetchTrendingAnime(): Promise { // This would use the Anime_Scraper to fetch trending anime return new Promise((resolve) => { setTimeout(() => resolve(mockTrendingAnime), 500) }) } export async function fetchRecentEpisodes(): Promise { // This would use the Anime_Scraper to fetch recent episodes return new Promise((resolve) => { setTimeout(() => resolve(mockRecentEpisodes), 500) }) } export async function fetchTopAnime(): Promise { // This would use the Anime_Scraper to fetch top anime return new Promise((resolve) => { setTimeout(() => resolve(mockTopAnime), 500) }) } export async function fetchSeasonalAnime(): Promise { // This would use the Anime_Scraper to fetch seasonal anime return new Promise((resolve) => { setTimeout(() => resolve(mockSeasonalAnime), 500) }) } export async function fetchAnimeNews(): Promise { // This would use the Anime_Scraper to fetch anime news return new Promise((resolve) => { setTimeout(() => resolve(mockAnimeNews), 500) }) } export async function searchAnime(query: string): Promise { // This would use the Anime_Scraper to search for anime console.log(`Searching for: ${query}`) return new Promise((resolve) => { setTimeout(() => resolve([]), 500) }) } export async function getAnimeDetails(id: number): Promise { // This would use the Anime_Scraper to get anime details return new Promise((resolve) => { setTimeout(() => { const anime = mockFeaturedAnime.find((a) => a.id === id) || mockTrendingAnime.find((a) => a.id === id) || mockTopAnime.find((a) => a.id === id) resolve(anime || null) }, 500) }) } export async function getAnimeEpisodes(id: number): Promise { // This would use the Anime_Scraper to get anime episodes return new Promise((resolve) => { setTimeout(() => resolve([]), 500) }) } export async function getEpisodeStreamUrl(animeId: number, episodeId: number): Promise { // This would use the Anime_Scraper to get the streaming URL for an episode return new Promise((resolve) => { setTimeout(() => resolve(null), 500) }) } [V0_FILE]typescriptreact:file="app/anime/[id]/page.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Play, Star, Calendar, Clock, List, Share2, Bookmark, ChevronLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Skeleton } from "@/components/ui/skeleton" import { AnimeLayout } from "@/components/anime-layout" import { getAnimeDetails, getAnimeEpisodes } from "@/lib/anime-api" // This would normally come from the Anime_Scraper API const animeDetails = { id: 1, title: "Attack on Titan: Final Season", description: "The war for Paradis zeroes in on Shiganshina just as Jaegerists have seized control. Eren's extreme ideologies have led to the deterioration of his relationships with his friends and family. Against a backdrop of a world at war, Eren unleashes the Attack Titan for what may be the final time.", image: "/placeholder.svg?height=600&width=400&text=AoT+Poster", cover: "/placeholder.svg?height=400&width=1200&text=Attack+on+Titan+Cover", rating: 9.8, year: 2023, episodes: 16, status: "Completed", genres: ["Action", "Drama", "Fantasy", "Military"], duration: "24 min per ep", studio: "MAPPA", nextAiringEpisode: null, } const episodes = Array.from({ length: 16 }, (_, i) => ({ id: i + 1, number: i + 1, title: `Episode ${i + 1}`, thumbnail: "/placeholder.svg?height=180&width=320&text=Episode+" + (i + 1), date: "2023-01-" + (i + 10), })) export default function AnimePage({ params }: { params: { id: string } }) { const [anime, setAnime] = useState(animeDetails) const [animeEpisodes, setAnimeEpisodes] = useState(episodes) const [isLoading, setIsLoading] = useState(true) const [isBookmarked, setIsBookmarked] = useState(false) useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const animeData = await getAnimeDetails(Number.parseInt(params.id)) const episodesData = await getAnimeEpisodes(Number.parseInt(params.id)) if (animeData) { setAnime(animeData) } if (episodesData && episodesData.length > 0) { setAnimeEpisodes(episodesData) } } catch (error) { console.error("Failed to fetch anime details:", error) } finally { setIsLoading(false) } } // Simulate API call setTimeout(loadData, 1000) }, [params.id]) const toggleBookmark = () => { setIsBookmarked(!isBookmarked) } return (

{isLoading ? (

) : ( <>

{anime.title}

{anime.rating}

{anime.year}

{anime.duration}

{anime.episodes} Episodes

{anime.status}

{anime.genres && anime.genres.map((genre: string) => ( {genre} ))}

Overview Episodes Characters Related

Synopsis

{anime.description}

Information

Studio: {anime.studio}
Status: {anime.status}
Year: {anime.year}
Episodes: {anime.episodes}
Duration: {anime.duration}
Next Episode: {anime.nextAiringEpisode}

{animeEpisodes.map((episode) => (

{episode.title}

{episode.date}

))}

{Array.from({ length: 10 }).map((_, i) => (

Character {i + 1}

Voice Actor {i + 1}

))}

{Array.from({ length: 5 }).map((_, i) => (

Related Anime {i + 1}

TV Series • 2023

))}

)}

) } [V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" import type React from "react" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return

} export { Skeleton } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="app/watch/[animeId]/[episodeId]/page.tsx" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import Link from "next/link" import { ChevronLeft, ChevronRight, List, Maximize, Minimize, Volume2, VolumeX, Play, Pause, Settings, SkipBack, SkipForward, } from "lucide-react" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Skeleton } from "@/components/ui/skeleton" import { Slider } from "@/components/ui/slider" import { AnimeLayout } from "@/components/anime-layout" import { getAnimeDetails, getAnimeEpisodes, getEpisodeStreamUrl } from "@/lib/anime-api" export default function WatchPage({ params }: { params: { animeId: string; episodeId: string } }) { const [isLoading, setIsLoading] = useState(true) const [isPlaying, setIsPlaying] = useState(false) const [isFullscreen, setIsFullscreen] = useState(false) const [isMuted, setIsMuted] = useState(false) const [volume, setVolume] = useState(80) const [currentTime, setCurrentTime] = useState(0) const [duration, setDuration] = useState(0) const [showControls, setShowControls] = useState(true) const [animeDetails, setAnimeDetails] = useState(null) const [episodes, setEpisodes] = useState([]) const [episodeDetails, setEpisodeDetails] = useState(null) const [streamUrl, setStreamUrl] = useState(null) const videoRef = useRef(null) const videoContainerRef = useRef(null) const controlsTimeoutRef = useRef(null) const currentEpisodeNumber = Number.parseInt(params.episodeId) const prevEpisode = currentEpisodeNumber > 1 ? currentEpisodeNumber - 1 : null const nextEpisode = episodes.length > 0 ? episodes.find((ep) => ep.number > currentEpisodeNumber)?.number || null : null useEffect(() => { const loadData = async () => { try { // In a real implementation, this would fetch data from the Anime_Scraper const anime = await getAnimeDetails(Number.parseInt(params.animeId)) const allEpisodes = await getAnimeEpisodes(Number.parseInt(params.animeId)) const streamingUrl = await getEpisodeStreamUrl( Number.parseInt(params.animeId), Number.parseInt(params.episodeId), ) if (anime) { setAnimeDetails(anime) } if (allEpisodes && allEpisodes.length > 0) { setEpisodes(allEpisodes) const currentEp = allEpisodes.find((ep) => ep.number === Number.parseInt(params.episodeId)) if (currentEp) { setEpisodeDetails(currentEp) } else { // If episode not found, create a mock one setEpisodeDetails({ id: Number.parseInt(params.episodeId), animeId: Number.parseInt(params.animeId), number: Number.parseInt(params.episodeId), title: `Episode ${params.episodeId}`, thumbnail: `/placeholder.svg?height=720&width=1280&text=Episode+${params.episodeId}`, }) } } else { // Create mock episodes if none returned const mockEpisodes = Array.from({ length: 16 }, (_, i) => ({ id: i + 1, animeId: Number.parseInt(params.animeId), number: i + 1, title: `Episode ${i + 1}`, thumbnail: `/placeholder.svg?height=180&width=320&text=Episode+${i + 1}`, })) setEpisodes(mockEpisodes) setEpisodeDetails(mockEpisodes.find((ep) => ep.number === Number.parseInt(params.episodeId))) } if (streamingUrl) { setStreamUrl(streamingUrl) } } catch (error) { console.error("Failed to fetch watch data:", error) } finally { setIsLoading(false) } } // Simulate API call setTimeout(loadData, 1000) // Set up control hiding const hideControls = () => { if (isPlaying) { setShowControls(false) } } const resetControlsTimeout = () => { if (controlsTimeoutRef.current) { clearTimeout(controlsTimeoutRef.current) } setShowControls(true) controlsTimeoutRef.current = setTimeout(hideControls, 3000) } document.addEventListener("mousemove", resetControlsTimeout) return () => { document.removeEventListener("mousemove", resetControlsTimeout) if (controlsTimeoutRef.current) { clearTimeout(controlsTimeoutRef.current) } } }, [params.animeId, params.episodeId]) const togglePlay = async () => { if (videoRef.current) { try { if (isPlaying) { videoRef.current.pause() } else { // Play returns a promise that needs to be properly handled await videoRef.current.play() } setIsPlaying(!isPlaying) } catch (error) { console.error("Error toggling play state:", error) // Make sure UI state matches actual video state setIsPlaying(false) } } } const toggleFullscreen = () => { if (videoContainerRef.current) { if (!document.fullscreenElement) { videoContainerRef.current .requestFullscreen() .catch((err) => console.error(`Error attempting to enable fullscreen: ${err.message}`)) } else { document.exitFullscreen() } setIsFullscreen(!isFullscreen) } } const toggleMute = () => { if (videoRef.current) { videoRef.current.muted = !isMuted setIsMuted(!isMuted) } } const handleVolumeChange = (value: number[]) => { const newVolume = value[0] setVolume(newVolume) if (videoRef.current) { videoRef.current.volume = newVolume / 100 } if (newVolume === 0) { setIsMuted(true) } else if (isMuted) { setIsMuted(false) } } const handleTimeUpdate = () => { if (videoRef.current) { setCurrentTime(videoRef.current.currentTime) setDuration(videoRef.current.duration) } } const handleSeek = (value: number[]) => { const seekTime = value[0] setCurrentTime(seekTime) if (videoRef.current) { videoRef.current.currentTime = seekTime } } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = Math.floor(seconds % 60) return `${mins}:${secs < 10 ? "0" : ""}${secs}` } const skipForward = () => { if (videoRef.current) { const newTime = Math.min(videoRef.current.currentTime + 10, videoRef.current.duration || 0) videoRef.current.currentTime = newTime setCurrentTime(newTime) } } const skipBackward = () => { if (videoRef.current) { const newTime = Math.max(videoRef.current.currentTime - 10, 0) videoRef.current.currentTime = newTime setCurrentTime(newTime) } } return (

{isLoading ? ( ) : (

setShowControls(true)} >

{showControls && (

{animeDetails?.title}

Episode {episodeDetails?.number}: {episodeDetails?.title}

{formatTime(currentTime)} {formatTime(duration || 0)}

)}

All Episodes

{isLoading ? (

{Array(4) .fill(0) .map((_, i) => ( ))}

) : (

{episodes.map((episode) => (

{episode.number === currentEpisodeNumber ? (

Currently Watching

) : (

)}

{episode.title}

))}

)}

) }

About

Tags

Share

More from topganirudhsharma-3395

More Templates Like This

About

Tags

Share

About

Tags

Share

More from topganirudhsharma-3395

More Templates Like This