shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

resolved info and watch

Browse Source
This commit is contained in:
Tejas Panchal
2026-02-19 03:01:34 +05:30
parent 8732e1e9d3
commit b1636ce8c4
3 changed files with 477 additions and 886 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ui/InfoTag/InfoTag.jsx Normal file
View File

@@ -0,0 +1,18 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
const InfoTag = ({ icon, text, bgColor, className = "" }) => {
if (!text) return null;
return (
<div
className={`flex space-x-1 justify-center items-center px-2 sm:px-3 py-0.5 sm:py-1 text-white backdrop-blur-md font-medium text-[10px] sm:text-[13px] rounded-md sm:rounded-full transition-all duration-300 hover:bg-white/20 ${className}`}
style={bgColor ? { backgroundColor: bgColor } : {}}
>
{icon && <FontAwesomeIcon icon={icon} className="text-[10px] sm:text-[12px] mr-1" />}
<p className="text-[10px] sm:text-[12px]">{text}</p>
</div>
);
};
export default React.memo(InfoTag);

692
src/pages/animeInfo/AnimeInfo.jsx
View File

@@ -5,18 +5,16 @@ import {
faClosedCaptioning, faClosedCaptioning,
faMicrophone, faMicrophone,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "react"; import { useEffect, useState, useMemo } from "react";
import { Link, useNavigate, useParams } from "react-router-dom"; import { Link, useNavigate, useParams } from "react-router-dom";
import website_name from "@/src/config/website";
import CategoryCard from "@/src/components/categorycard/CategoryCard"; import CategoryCard from "@/src/components/categorycard/CategoryCard";
import Sidecard from "@/src/components/sidecard/Sidecard";
import Loader from "@/src/components/Loader/Loader"; import Loader from "@/src/components/Loader/Loader";
import Error from "@/src/components/error/Error"; import Error from "@/src/components/error/Error";
import { useLanguage } from "@/src/context/LanguageContext"; import { useLanguage } from "@/src/context/LanguageContext";
import { useHomeInfo } from "@/src/context/HomeInfoContext";
import Voiceactor from "@/src/components/voiceactor/Voiceactor"; import Voiceactor from "@/src/components/voiceactor/Voiceactor";
import getSafeTitle from "@/src/utils/getSafetitle"; import getSafeTitle from "@/src/utils/getSafetitle";
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import InfoTag from "@/src/components/ui/InfoTag/InfoTag";
import { import {
generateDescription, generateDescription,
generateKeywords, generateKeywords,
@@ -27,536 +25,356 @@ import {
optimizeTitle, optimizeTitle,
} from '@/src/utils/seo.utils'; } from '@/src/utils/seo.utils';
function InfoItem({ label, value, isProducer = true }) { const InfoItem = ({ label, value, isProducer = true }) => {
return ( if (!value) return null;
value && (
<div className="text-[11px] sm:text-[14px] font-medium transition-all duration-300"> const renderValue = () => {
<span className="text-gray-400">{`${label}: `}</span> if (Array.isArray(value)) {
<span className="font-light text-white/90"> return value.map((item, index) => (
{Array.isArray(value) ? ( <span key={index}>
value.map((item, index) => {isProducer ? (
isProducer ? (
<Link
to={`/producer/${item
.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "")
.split(" ")
.join("-")
.replace(/-+/g, "-")}`}
key={index}
className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
>
{item}
{index < value.length - 1 && ", "}
</Link>
) : (
<span key={index}>
{item}
{index < value.length - 1 && ", "}
</span>
)
)
) : isProducer ? (
<Link <Link
to={`/producer/${value to={`/producer/${item.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "").split(" ").join("-").replace(/-+/g, "-")}`}
.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "")
.split(" ")
.join("-")
.replace(/-+/g, "-")}`}
className="cursor-pointer transition-colors duration-300 hover:text-gray-300" className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
> >
{value} {item}
</Link> </Link>
) : ( ) : (
<span>{value}</span> item
)} )}
{index < value.length - 1 && ", "}
</span> </span>
</div> ));
) }
);
} if (isProducer) {
return (
<Link
to={`/producer/${value.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "").split(" ").join("-").replace(/-+/g, "-")}`}
className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
>
{value}
</Link>
);
}
return value;
};
function Tag({ bgColor, index, icon, text }) {
return ( return (
<div <div className="text-[11px] sm:text-[14px] font-medium transition-all duration-300">
className="flex space-x-1 justify-center items-center px-2 sm:px-3 py-0.5 sm:py-1 text-white backdrop-blur-md bg-white/10 font-medium text-[10px] sm:text-[13px] rounded-md sm:rounded-full transition-all duration-300 hover:bg-white/20" <span className="text-gray-400">{`${label}: `}</span>
> <span className="font-light text-white/90">{renderValue()}</span>
{icon && <FontAwesomeIcon icon={icon} className="text-[10px] sm:text-[12px] mr-1" />}
<p className="text-[10px] sm:text-[12px]">{text}</p>
</div> </div>
); );
} };
const Synopsis = ({ text, isFull, onToggle, isMobile = false }) => {
if (!text) return null;
const limit = isMobile ? 150 : 270;
const isTooLong = text.length > limit;
return (
<div className={`${isMobile ? 'text-xs' : 'text-sm lg:text-base'} text-gray-300 leading-relaxed max-w-3xl`}>
{isTooLong ? (
<>
{isFull ? text : (isMobile ? <div className="line-clamp-3">{text}</div> : `${text.slice(0, limit)}...`)}
<button
className="ml-2 text-white/70 hover:text-white transition-colors text-xs font-medium"
onClick={onToggle}
>
{isFull ? "Show Less" : "Read More"}
</button>
</>
) : text}
</div>
);
};
const TagsList = ({ tags }) => (
<div className="flex flex-wrap gap-1.5 sm:gap-2">
{tags.map((tag, index) => tag.condition && (
<InfoTag
key={index}
icon={tag.icon}
text={tag.text}
className={tag.bgColor === "#ffffff" ? "bg-white/10" : ""}
/>
))}
</div>
);
const DetailGrid = ({ info, isMobile = false }) => {
const items = [
{ label: "Japanese", value: info?.Japanese },
{ label: "Synonyms", value: info?.Synonyms },
{ label: "Aired", value: info?.Aired },
{ label: "Premiered", value: info?.Premiered },
{ label: "Duration", value: info?.Duration },
{ label: "Status", value: info?.Status },
{ label: "MAL Score", value: info?.["MAL Score"] },
];
return (
<div className={`grid grid-cols-2 gap-2 sm:gap-3 py-3 sm:py-4 px-3 sm:px-5 backdrop-blur-md bg-white/5 rounded-lg sm:rounded-xl ${isMobile ? 'text-xs' : ''}`}>
{items.map((item, index) => (
<InfoItem key={index} label={item.label} value={item.value} isProducer={false} />
))}
{info?.Genres && (
<div className="col-span-2 pt-2 sm:pt-3 border-t border-white/10">
<p className="text-gray-400 text-xs sm:text-sm mb-1.5 sm:mb-2">Genres</p>
<div className="flex flex-wrap gap-1 sm:gap-1.5">
{info.Genres.map((genre, index) => (
<Link
to={`/genre/${genre.split(" ").join("-")}`}
key={index}
className="px-2 sm:px-3 py-0.5 sm:py-1 text-[10px] sm:text-xs bg-white/5 rounded-md sm:rounded-lg hover:bg-white/10 transition-colors"
>
{genre}
</Link>
))}
</div>
</div>
)}
<div className="col-span-2 space-y-2 sm:space-y-3 pt-2 sm:pt-3 border-t border-white/10">
<InfoItem label="Studios" value={info?.Studios} />
<InfoItem label="Producers" value={info?.Producers} />
</div>
</div>
);
};
function AnimeInfo({ random = false }) { function AnimeInfo({ random = false }) {
const { language } = useLanguage(); const { language } = useLanguage();
const { id: paramId } = useParams(); const { id: paramId } = useParams();
const id = random ? null : paramId; const id = random ? null : paramId;
const { id: currentId } = useParams();
const navigate = useNavigate();
const [isFull, setIsFull] = useState(false); const [isFull, setIsFull] = useState(false);
const [animeInfo, setAnimeInfo] = useState(null); const [animeInfo, setAnimeInfo] = useState(null);
const [seasons, setSeasons] = useState(null); const [seasons, setSeasons] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const { homeInfo } = useHomeInfo();
const { id: currentId } = useParams();
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (id === "404-not-found-page") { if (id === "404-not-found-page") return;
console.log("404 got!");
return null; const fetchAnimeInfo = async () => {
} else { setLoading(true);
const fetchAnimeInfo = async () => { try {
setLoading(true); const data = await getAnimeInfo(id, random);
try { if (!data?.data) throw new Error("Anime not found");
const data = await getAnimeInfo(id, random); setSeasons(data?.seasons);
setSeasons(data?.seasons); setAnimeInfo(data.data);
setAnimeInfo(data.data); } catch (err) {
} catch (err) { console.error("Error fetching anime info:", err);
console.error("Error fetching anime info:", err); setError(err);
setError(err); } finally {
} finally { setLoading(false);
setLoading(false); }
} };
}; fetchAnimeInfo();
fetchAnimeInfo(); window.scrollTo({ top: 0, behavior: "smooth" });
window.scrollTo({ top: 0, behavior: "smooth" });
}
}, [id, random]); }, [id, random]);
const seoData = useMemo(() => {
if (!animeInfo) return null;
const { title, japanese_title, poster, animeInfo: info } = animeInfo;
const safeTitle = getSafeTitle(title, language, japanese_title);
return {
safeTitle,
title: optimizeTitle(`Watch ${safeTitle} Sub Dub Online Free`),
description: generateDescription(info?.Overview),
keywords: generateKeywords(animeInfo),
canonical: generateCanonicalUrl(`/${animeInfo.id}`),
ogImage: generateOGImage(poster),
structured: generateAnimeStructuredData(animeInfo),
breadcrumb: generateBreadcrumbStructuredData([
{ name: 'Home', url: '/' },
{ name: animeInfo.title, url: `/${animeInfo.id}` }
])
};
}, [animeInfo, language]);
const tags = useMemo(() => {
if (!animeInfo?.animeInfo?.tvInfo) return [];
const info = animeInfo.animeInfo;
return [
{ condition: info.tvInfo.rating, text: info.tvInfo.rating, bgColor: "#ffffff" },
{ condition: info.tvInfo.quality, text: info.tvInfo.quality, bgColor: "#FFBADE" },
{ condition: info.tvInfo.sub, text: info.tvInfo.sub, icon: faClosedCaptioning, bgColor: "#B0E3AF" },
{ condition: info.tvInfo.dub, text: info.tvInfo.dub, icon: faMicrophone, bgColor: "#B9E7FF" },
];
}, [animeInfo]);
if (loading) return <Loader type="animeInfo" />; if (loading) return <Loader type="animeInfo" />;
if (error) { if (error || (!animeInfo && !loading)) return <Error />;
return <Error />;
}
if (!animeInfo) { if (!animeInfo) {
navigate("/404-not-found-page"); navigate("/404-not-found-page");
return undefined; return null;
} }
const { title, japanese_title, poster, animeInfo: info } = animeInfo;
const safeTitle = getSafeTitle(title, language, japanese_title);
const displayTitle = safeTitle; // Use safeTitle as the display title
const pageTitle = optimizeTitle(`Watch ${displayTitle} Sub Dub Online Free`); const { poster, japanese_title, animeInfo: info } = animeInfo;
const pageDescription = generateDescription(info?.Overview); const isAiring = animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired";
const pageKeywords = generateKeywords(animeInfo);
const canonicalUrl = generateCanonicalUrl(`/${animeInfo.id}`);
const ogImage = generateOGImage(poster);
const animeStructuredData = generateAnimeStructuredData(animeInfo);
const breadcrumbData = generateBreadcrumbStructuredData([
{ name: 'Home', url: '/' },
{ name: animeInfo.title, url: `/${animeInfo.id}` }
]);
const tags = [
{
condition: info.tvInfo?.rating,
bgColor: "#ffffff",
text: info.tvInfo.rating,
},
{
condition: info.tvInfo?.quality,
bgColor: "#FFBADE",
text: info.tvInfo.quality,
},
{
condition: info.tvInfo?.sub,
icon: faClosedCaptioning,
bgColor: "#B0E3AF",
text: info.tvInfo.sub,
},
{
condition: info.tvInfo?.dub,
icon: faMicrophone,
bgColor: "#B9E7FF",
text: info.tvInfo.dub,
},
];
return ( return (
<> <>
<Helmet> <Helmet>
<title>{pageTitle}</title> <title>{seoData.title}</title>
<meta name="description" content={pageDescription} /> <meta name="description" content={seoData.description} />
<meta name="keywords" content={pageKeywords} /> <meta name="keywords" content={seoData.keywords} />
<link rel="canonical" href={canonicalUrl} /> <link rel="canonical" href={seoData.canonical} />
<meta property="og:title" content={seoData.title} />
<meta property="og:title" content={pageTitle} /> <meta property="og:description" content={seoData.description} />
<meta property="og:description" content={pageDescription} /> <meta property="og:image" content={seoData.ogImage} />
<meta property="og:image" content={ogImage} /> <meta property="og:url" content={seoData.canonical} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:type" content="video.tv_show" /> <meta property="og:type" content="video.tv_show" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={pageTitle} /> <meta name="twitter:title" content={seoData.title} />
<meta name="twitter:description" content={pageDescription} /> <meta name="twitter:description" content={seoData.description} />
<meta name="twitter:image" content={ogImage} /> <meta name="twitter:image" content={seoData.ogImage} />
<script type="application/ld+json">{JSON.stringify(seoData.structured)}</script>
<script type="application/ld+json"> <script type="application/ld+json">{JSON.stringify(seoData.breadcrumb)}</script>
{JSON.stringify(animeStructuredData)}
</script>
<script type="application/ld+json">
{JSON.stringify(breadcrumbData)}
</script>
</Helmet> </Helmet>
<div className="min-h-screen bg-[#0a0a0a] text-white"> <div className="min-h-screen bg-[#0a0a0a] text-white">
<div className="relative w-full overflow-hidden mt-[64px] max-md:mt-[50px]"> <div className="relative w-full overflow-hidden mt-[64px] max-md:mt-[50px]">
<div className="relative z-10 container mx-auto py-4 sm:py-6 lg:pt-4 lg:pb-8">
{/* Main Content */}
<div className="relative z-10 container mx-auto py-4 sm:py-6 lg:py-8">
{/* Mobile Layout */} {/* Mobile Layout */}
<div className="block md:hidden pt-4"> <div className="block md:hidden pt-4">
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
{/* Poster Section */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="relative w-[130px] xs:w-[150px] aspect-[2/3] rounded-xl overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.3)]"> <div className="relative w-[130px] xs:w-[150px] aspect-[2/3] rounded-xl overflow-hidden shadow-2xl">
<img <img src={poster} alt={seoData.safeTitle} className="w-full h-full object-cover" />
src={`${poster}`}
alt={`${safeTitle} Poster`}
className="w-full h-full object-cover"
/>
{animeInfo.adultContent && ( {animeInfo.adultContent && (
<div className="absolute top-2 left-2 px-2 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-md text-[10px] font-medium"> <div className="absolute top-2 left-2 px-2 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-md text-[10px] font-medium">18+</div>
18+
</div>
)} )}
</div> </div>
</div> </div>
{/* Basic Info Section */}
<div className="flex-1 min-w-0 space-y-2"> <div className="flex-1 min-w-0 space-y-2">
{/* Title */}
<div className="space-y-0.5"> <div className="space-y-0.5">
<h1 className="text-lg xs:text-xl font-bold tracking-tight truncate"> <h1 className="text-lg xs:text-xl font-bold tracking-tight truncate">{seoData.safeTitle}</h1>
{safeTitle}
</h1>
{language === "EN" && japanese_title && ( {language === "EN" && japanese_title && (
<p className="text-white/50 text-[11px] xs:text-xs truncate">JP Title: {japanese_title}</p> <p className="text-white/50 text-[11px] xs:text-xs truncate">JP: {japanese_title}</p>
)} )}
</div> </div>
<TagsList tags={tags} />
{/* Tags */} <Synopsis text={info?.Overview} isFull={isFull} onToggle={() => setIsFull(!isFull)} isMobile />
<div className="flex flex-wrap gap-1.5">
{tags.map(({ condition, icon, text }, index) =>
condition && (
<Tag
key={index}
index={index}
icon={icon}
text={text}
/>
)
)}
</div>
{/* Overview - Limited for mobile */}
{info?.Overview && (
<div className="text-gray-300 leading-relaxed text-xs">
{info.Overview.length > 150 ? (
<>
{isFull ? (
info.Overview
) : (
<div className="line-clamp-3">{info.Overview}</div>
)}
<button
className="mt-1 text-white/70 hover:text-white transition-colors text-[10px] font-medium"
onClick={() => setIsFull(!isFull)}
>
{isFull ? "Show Less" : "Read More"}
</button>
</>
) : (
info.Overview
)}
</div>
)}
</div> </div>
</div> </div>
{/* Watch Button - Full Width on Mobile */}
<div className="mt-6"> <div className="mt-6">
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? ( {isAiring ? (
<Link <Link to={`/watch/${animeInfo.id}`} className="flex justify-center items-center w-full px-4 py-3 bg-white/10 backdrop-blur-md rounded-lg text-white hover:bg-white/20 transition-all group">
to={`/watch/${animeInfo.id}`} <FontAwesomeIcon icon={faPlay} className="mr-2 text-xs group-hover:scale-110 transition-transform" />
className="flex justify-center items-center w-full px-4 py-3 bg-white/10 backdrop-blur-md rounded-lg text-white transition-all duration-300 hover:bg-white/20 group"
>
<FontAwesomeIcon
icon={faPlay}
className="mr-2 text-xs group-hover:text-white"
/>
<span className="font-medium text-sm">Watch Now</span> <span className="font-medium text-sm">Watch Now</span>
</Link> </Link>
) : ( ) : (
<div className="flex justify-center items-center w-full px-4 py-3 bg-gray-700/50 rounded-lg"> <div className="flex justify-center items-center w-full px-4 py-3 bg-gray-700/50 rounded-lg text-gray-400">
<span className="font-medium text-sm">Not released</span> <span className="font-medium text-sm">Not yet released</span>
</div> </div>
)} )}
</div> </div>
{/* Details Section - Full Width on Mobile */} <div className="mt-4">
<div className="mt-6 space-y-3 py-3 backdrop-blur-md bg-white/5 rounded-lg px-3 text-xs"> <DetailGrid info={info} isMobile />
<div className="grid grid-cols-2 gap-2">
{[
{ label: "Japanese", value: info?.Japanese },
{ label: "Synonyms", value: info?.Synonyms },
{ label: "Aired", value: info?.Aired },
{ label: "Premiered", value: info?.Premiered },
{ label: "Duration", value: info?.Duration },
{ label: "Status", value: info?.Status },
{ label: "MAL Score", value: info?.["MAL Score"] },
].map((item, index) => (
<InfoItem
key={index}
label={item.label}
value={item.value}
isProducer={false}
/>
))}
</div>
{/* Genres */}
{info?.Genres && (
<div className="pt-2 border-t border-white/10">
<p className="text-gray-400 text-xs mb-1.5">Genres</p>
<div className="flex flex-wrap gap-1">
{info.Genres.map((genre, index) => (
<Link
to={`/genre/${genre.split(" ").join("-")}`}
key={index}
className="px-2 py-0.5 text-[10px] bg-white/5 rounded-md hover:bg-white/10 transition-colors"
>
{genre}
</Link>
))}
</div>
</div>
)}
{/* Studios & Producers */}
<div className="space-y-2 pt-2 border-t border-white/10">
{[
{ label: "Studios", value: info?.Studios },
{ label: "Producers", value: info?.Producers },
].map((item, index) => (
<InfoItem
key={index}
label={item.label}
value={item.value}
/>
))}
</div>
</div> </div>
</div> </div>
{/* Desktop Layout - Existing Code */} {/* Desktop Layout */}
<div className="hidden md:block"> <div className="hidden md:block">
<div className="flex flex-row gap-6 lg:gap-10"> <div className="flex flex-row gap-6 lg:gap-10">
{/* Poster Section */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="relative w-[220px] lg:w-[260px] aspect-[2/3] rounded-2xl overflow-hidden shadow-[0_8px_32px_rgba(0,0,0,0.3)]"> <div className="relative w-[220px] lg:w-[260px] aspect-[2/3] rounded-2xl overflow-hidden shadow-2xl">
<img <img src={poster} alt={seoData.safeTitle} className="w-full h-full object-cover" />
src={`${poster}`}
alt={`${safeTitle} Poster`}
className="w-full h-full object-cover"
/>
{animeInfo.adultContent && ( {animeInfo.adultContent && (
<div className="absolute top-3 left-3 px-2.5 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-lg text-xs font-medium"> <div className="absolute top-3 left-3 px-2.5 py-0.5 bg-red-500/90 backdrop-blur-sm rounded-lg text-xs font-medium">18+</div>
18+
</div>
)} )}
</div> </div>
</div> </div>
{/* Info Section */}
<div className="flex-1 space-y-4 lg:space-y-5 min-w-0"> <div className="flex-1 space-y-4 lg:space-y-5 min-w-0">
{/* Title */}
<div className="space-y-1"> <div className="space-y-1">
<h1 className="text-3xl lg:text-4xl font-bold tracking-tight truncate"> <h1 className="text-3xl lg:text-4xl font-bold tracking-tight truncate">{seoData.safeTitle}</h1>
{safeTitle}
</h1>
{language === "EN" && japanese_title && ( {language === "EN" && japanese_title && (
<p className="text-white/50 text-sm lg:text-base truncate">JP Title: {japanese_title}</p> <p className="text-white/50 text-sm lg:text-base truncate">JP Title: {japanese_title}</p>
)} )}
</div> </div>
{/* Tags */} <TagsList tags={tags} />
<div className="flex flex-wrap gap-2"> <Synopsis text={info?.Overview} isFull={isFull} onToggle={() => setIsFull(!isFull)} />
{tags.map(({ condition, icon, text }, index) =>
condition && (
<Tag
key={index}
index={index}
icon={icon}
text={text}
/>
)
)}
</div>
{/* Overview */} {isAiring ? (
{info?.Overview && ( <Link to={`/watch/${animeInfo.id}`} className="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-md rounded-xl text-white hover:bg-white/20 hover:scale-[1.02] transition-all group">
<div className="text-gray-300 leading-relaxed max-w-3xl text-sm lg:text-base"> <FontAwesomeIcon icon={faPlay} className="mr-2 text-sm group-hover:scale-110 transition-transform" />
{info.Overview.length > 270 ? (
<>
{isFull
? info.Overview
: `${info.Overview.slice(0, 270)}...`}
<button
className="ml-2 text-white/70 hover:text-white transition-colors text-sm font-medium"
onClick={() => setIsFull(!isFull)}
>
{isFull ? "Show Less" : "Read More"}
</button>
</>
) : (
info.Overview
)}
</div>
)}
{/* Watch Button */}
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
<Link
to={`/watch/${animeInfo.id}`}
className="inline-flex items-center px-5 py-2.5 bg-white/10 backdrop-blur-md rounded-xl text-white transition-all duration-300 hover:bg-white/20 hover:scale-[1.02] group"
>
<FontAwesomeIcon
icon={faPlay}
className="mr-2 text-sm group-hover:text-white"
/>
<span className="font-medium">Watch Now</span> <span className="font-medium">Watch Now</span>
</Link> </Link>
) : ( ) : (
<div className="inline-flex items-center px-5 py-2.5 bg-gray-700/50 rounded-xl"> <div className="inline-flex items-center px-6 py-3 bg-gray-700/50 rounded-xl text-gray-400">
<span className="font-medium">Not released</span> <span className="font-medium">Not yet released</span>
</div> </div>
)} )}
{/* Details Section */} <DetailGrid info={info} />
<div className="space-y-4 py-4 backdrop-blur-md bg-white/5 rounded-xl px-5">
<div className="grid grid-cols-2 gap-3">
{[
{ label: "Japanese", value: info?.Japanese },
{ label: "Synonyms", value: info?.Synonyms },
{ label: "Aired", value: info?.Aired },
{ label: "Premiered", value: info?.Premiered },
{ label: "Duration", value: info?.Duration },
{ label: "Status", value: info?.Status },
{ label: "MAL Score", value: info?.["MAL Score"] },
].map((item, index) => (
<InfoItem
key={index}
label={item.label}
value={item.value}
isProducer={false}
/>
))}
</div>
{/* Genres */}
{info?.Genres && (
<div className="pt-3 border-t border-white/10">
<p className="text-gray-400 text-sm mb-2">Genres</p>
<div className="flex flex-wrap gap-1.5">
{info.Genres.map((genre, index) => (
<Link
to={`/genre/${genre.split(" ").join("-")}`}
key={index}
className="px-3 py-1 text-xs bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
>
{genre}
</Link>
))}
</div>
</div>
)}
{/* Studios & Producers */}
<div className="space-y-3 pt-3 border-t border-white/10">
{[
{ label: "Studios", value: info?.Studios },
{ label: "Producers", value: info?.Producers },
].map((item, index) => (
<InfoItem
key={index}
label={item.label}
value={item.value}
/>
))}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Seasons Section */} {/* Sections */}
{seasons?.length > 0 && ( <div className="container mx-auto space-y-8 pb-12">
<div className="container mx-auto pt-8"> {seasons?.length > 0 && (
<h2 className="text-2xl font-bold mb-6 sm:mb-8 px-1">More Seasons</h2> <div>
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4"> <h2 className="text-2xl font-bold mb-6 px-1">More Seasons</h2>
{seasons.map((season, index) => ( <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<Link {seasons.map((season, index) => (
to={`/${season.id}`} <Link
key={index} to={`/${season.id}`}
className={`relative w-full aspect-[3/1] sm:aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${currentId === String(season.id) key={index}
? "ring-2 ring-white/40 shadow-lg shadow-white/10" className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden group border-2 transition-all ${currentId === String(season.id) ? "border-white/40 shadow-lg" : "border-transparent"}`}
: "" >
}`} <img src={season.season_poster} alt={season.season} className={`w-full h-full object-cover scale-150 transition-opacity ${currentId === String(season.id) ? "opacity-50" : "opacity-40 group-hover:opacity-60"}`} />
> <div
<img className="absolute inset-0 z-10"
src={season.season_poster} style={{
alt={season.season} backgroundImage: `url('data:image/svg+xml,<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.5" cy="1.5" r="0.5" fill="white" fill-opacity="0.25"/></svg>')`,
className={`w-full h-full object-cover scale-150 ${currentId === String(season.id) backgroundSize: '3px 3px'
? "opacity-50" }}
: "opacity-40" />
}`} <div className="absolute inset-0 z-20 bg-gradient-to-r from-black/60 to-transparent" />
/> <div className="absolute inset-0 z-30 flex items-center justify-center">
{/* Dots Pattern Overlay */} <p className="text-sm sm:text-base font-bold text-center px-4">{season.season}</p>
<div </div>
className="absolute inset-0 z-10" </Link>
style={{ ))}
backgroundImage: `url('data:image/svg+xml,<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.5" cy="1.5" r="0.5" fill="white" fill-opacity="0.25"/></svg>')`, </div>
backgroundSize: '3px 3px'
}}
/>
{/* Dark Gradient Overlay */}
<div className={`absolute inset-0 z-20 bg-gradient-to-r ${currentId === String(season.id)
? "from-black/50 to-transparent"
: "from-black/40 to-transparent"
}`} />
{/* Title Container */}
<div className="absolute inset-0 z-30 flex items-center justify-center">
<p className={`text-[14px] sm:text-[16px] md:text-[18px] font-bold text-center px-2 sm:px-4 transition-colors duration-300 ${currentId === String(season.id)
? "text-white"
: "text-white/90 group-hover:text-white"
}`}>
{season.season}
</p>
</div>
</Link>
))}
</div> </div>
</div> )}
)}
{/* Voice Actors Section */} {animeInfo?.charactersVoiceActors?.length > 0 && (
{animeInfo?.charactersVoiceActors.length > 0 && ( <div className="pt-4">
<div className="container mx-auto pt-8"> <Voiceactor animeInfo={animeInfo} />
<Voiceactor animeInfo={animeInfo} /> </div>
</div> )}
)}
{/* Recommendations Section */} {animeInfo?.recommended_data?.length > 0 && (
{animeInfo.recommended_data.length > 0 && ( <div className="pt-4">
<div className="container mx-auto pt-8"> <CategoryCard
<CategoryCard label="Recommended for you"
label="Recommended for you" data={animeInfo.recommended_data}
data={animeInfo.recommended_data} limit={animeInfo.recommended_data.length}
limit={animeInfo.recommended_data.length} showViewMore={false}
showViewMore={false} gridClass="grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
gridClass="grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:gap-x-2" />
/> </div>
</div> )}
)} </div>
</div> </div>
</> </>
); );

653
src/pages/watch/Watch.jsx
View File

@@ -1,8 +1,7 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState, useMemo, useCallback } from "react";
import { useLocation, useParams, Link, useNavigate } from "react-router-dom"; import { useLocation, useParams, Link, useNavigate } from "react-router-dom";
import { useLanguage } from "@/src/context/LanguageContext"; import { useLanguage } from "@/src/context/LanguageContext";
import { useHomeInfo } from "@/src/context/HomeInfoContext";
import { useWatch } from "@/src/hooks/useWatch"; import { useWatch } from "@/src/hooks/useWatch";
import BouncingLoader from "@/src/components/ui/bouncingloader/Bouncingloader"; import BouncingLoader from "@/src/components/ui/bouncingloader/Bouncingloader";
import IframePlayer from "@/src/components/player/IframePlayer"; import IframePlayer from "@/src/components/player/IframePlayer";
@@ -12,6 +11,7 @@ import Sidecard from "@/src/components/sidecard/Sidecard";
import { import {
faClosedCaptioning, faClosedCaptioning,
faMicrophone, faMicrophone,
faPlay,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Servers from "@/src/components/servers/Servers"; import Servers from "@/src/components/servers/Servers";
@@ -22,6 +22,7 @@ import useWatchControl from "@/src/hooks/useWatchControl";
import Player from "@/src/components/player/Player"; import Player from "@/src/components/player/Player";
import getSafeTitle from "@/src/utils/getSafetitle"; import getSafeTitle from "@/src/utils/getSafetitle";
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import InfoTag from "@/src/components/ui/InfoTag/InfoTag";
import { import {
generateDescription, generateDescription,
generateKeywords, generateKeywords,
@@ -39,13 +40,11 @@ export default function Watch() {
const { id: animeId } = useParams(); const { id: animeId } = useParams();
const queryParams = new URLSearchParams(location.search); const queryParams = new URLSearchParams(location.search);
let initialEpisodeId = queryParams.get("ep"); let initialEpisodeId = queryParams.get("ep");
const [tags, setTags] = useState([]);
const { language } = useLanguage(); const { language } = useLanguage();
const { homeInfo } = useHomeInfo();
const isFirstSet = useRef(true); const isFirstSet = useRef(true);
const [showNextEpisodeSchedule, setShowNextEpisodeSchedule] = useState(true); const [showNextEpisodeSchedule, setShowNextEpisodeSchedule] = useState(true);
const { const {
// error,
buffering, buffering,
streamInfo, streamInfo,
streamUrl, streamUrl,
@@ -61,7 +60,6 @@ export default function Watch() {
thumbnail, thumbnail,
setIsFullOverview, setIsFullOverview,
activeEpisodeNum, activeEpisodeNum,
seasons,
episodeId, episodeId,
setEpisodeId, setEpisodeId,
activeServerId, activeServerId,
@@ -71,8 +69,10 @@ export default function Watch() {
activeServerType, activeServerType,
setActiveServerType, setActiveServerType,
activeServerName, activeServerName,
setActiveServerName setActiveServerName,
seasons
} = useWatch(animeId, initialEpisodeId); } = useWatch(animeId, initialEpisodeId);
const { const {
autoPlay, autoPlay,
setAutoPlay, setAutoPlay,
@@ -81,511 +81,280 @@ export default function Watch() {
autoNext, autoNext,
setAutoNext, setAutoNext,
} = useWatchControl(); } = useWatchControl();
const playerRef = useRef(null);
const videoContainerRef = useRef(null); const videoContainerRef = useRef(null);
const controlsRef = useRef(null); const controlsRef = useRef(null);
const episodesRef = useRef(null); const episodesRef = useRef(null);
// Sync URL with episodeId
useEffect(() => { useEffect(() => {
if (!episodes || episodes.length === 0) return; if (!episodes?.length) return;
const isValidEpisode = episodes.some(ep => { const currentEpNum = episodeId;
const epNumber = ep.id.split('ep=')[1]; const isValidEpisode = episodes.some(ep => ep.id.split('ep=')[1] === currentEpNum);
return epNumber === episodeId;
});
// If missing or invalid episodeId, fallback to first if (!currentEpNum || !isValidEpisode) {
if (!episodeId || !isValidEpisode) {
const fallbackId = episodes[0].id.match(/ep=(\d+)/)?.[1]; const fallbackId = episodes[0].id.match(/ep=(\d+)/)?.[1];
if (fallbackId && fallbackId !== episodeId) { if (fallbackId && fallbackId !== currentEpNum) setEpisodeId(fallbackId);
setEpisodeId(fallbackId);
}
return; return;
} }
const newUrl = `/watch/${animeId}?ep=${episodeId}`; const newUrl = `/watch/${animeId}?ep=${currentEpNum}`;
if (isFirstSet.current) { if (isFirstSet.current) {
navigate(newUrl, { replace: true }); navigate(newUrl, { replace: true });
isFirstSet.current = false; isFirstSet.current = false;
} else { } else {
navigate(newUrl); navigate(newUrl);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps }, [episodeId, animeId, navigate, episodes, setEpisodeId]);
}, [episodeId, animeId, navigate, episodes]);
// ... inside Watch component ...
// Update document title
// Redirect if no episodes // Redirect if no episodes
useEffect(() => { useEffect(() => {
if (totalEpisodes !== null && totalEpisodes === 0) { if (totalEpisodes === 0) navigate(`/${animeId}`);
navigate(`/${animeId}`); }, [animeId, totalEpisodes, navigate]);
// Height adjustment logic
const adjustHeight = useCallback(() => {
if (window.innerWidth > 1200) {
if (videoContainerRef.current && controlsRef.current && episodesRef.current) {
const totalHeight = videoContainerRef.current.offsetHeight + controlsRef.current.offsetHeight;
episodesRef.current.style.height = `${totalHeight}px`;
}
} else if (episodesRef.current) {
episodesRef.current.style.height = 'auto';
} }
}, [streamInfo, episodeId, animeId, totalEpisodes, navigate]); }, []);
useEffect(() => { useEffect(() => {
// Function to adjust the height of episodes list to match only video + controls const resizeObserver = new ResizeObserver(adjustHeight);
const adjustHeight = () => {
if (window.innerWidth > 1200) {
if (videoContainerRef.current && controlsRef.current && episodesRef.current) {
// Calculate combined height of video container and controls
const videoHeight = videoContainerRef.current.offsetHeight;
const controlsHeight = controlsRef.current.offsetHeight;
const totalHeight = videoHeight + controlsHeight;
// Apply the combined height to episodes container if (videoContainerRef.current) resizeObserver.observe(videoContainerRef.current);
episodesRef.current.style.height = `${totalHeight}px`; if (controlsRef.current) resizeObserver.observe(controlsRef.current);
}
} else {
if (episodesRef.current) {
episodesRef.current.style.height = 'auto';
}
}
};
// Initial adjustment with delay to ensure player is fully rendered
const initialTimer = setTimeout(() => {
adjustHeight();
}, 500);
// Set up resize listener
window.addEventListener('resize', adjustHeight); window.addEventListener('resize', adjustHeight);
adjustHeight();
// Create MutationObserver to monitor player changes
const observer = new MutationObserver(() => {
setTimeout(adjustHeight, 100);
});
// Start observing both video container and controls
if (videoContainerRef.current) {
observer.observe(videoContainerRef.current, {
attributes: true,
childList: true,
subtree: true
});
}
if (controlsRef.current) {
observer.observe(controlsRef.current, {
attributes: true,
childList: true,
subtree: true
});
}
// Set up additional interval for continuous adjustments
const intervalId = setInterval(adjustHeight, 1000);
// Clean up
return () => { return () => {
clearTimeout(initialTimer); resizeObserver.disconnect();
clearInterval(intervalId);
observer.disconnect();
window.removeEventListener('resize', adjustHeight); window.removeEventListener('resize', adjustHeight);
}; };
}, [buffering, activeServerType, activeServerName, episodeId, streamUrl, episodes]); }, [adjustHeight, buffering, animeInfoLoading]);
function Tag({ bgColor, index, icon, text }) { const seoData = useMemo(() => {
return ( if (!animeInfo) return null;
<div const safeT = getSafeTitle(animeInfo.title, language, animeInfo.japanese_title);
className={`flex space-x-1 justify-center items-center px-[4px] py-[1px] text-black font-semibold text-[13px] ${index === 0 ? "rounded-l-[4px]" : "rounded-none" return {
}`} safeTitle: safeT,
style={{ backgroundColor: bgColor }} pageTitle: optimizeTitle(`Watch ${safeT} Episode ${activeEpisodeNum} Sub Dub Online Free`),
> pageDescription: generateDescription(`Stream ${safeT} Episode ${activeEpisodeNum} in HD with English Sub and Dub. ${animeInfo.animeInfo?.Overview}`),
{icon && <FontAwesomeIcon icon={icon} className="text-[12px]" />} pageKeywords: `${generateKeywords(animeInfo)}, episode ${activeEpisodeNum}`,
<p className="text-[12px]">{text}</p> canonicalUrl: generateCanonicalUrl(`/watch/${animeId}?ep=${episodeId}`),
</div> ogImage: generateOGImage(animeInfo.poster),
); structured: generateAnimeStructuredData(animeInfo, { number: activeEpisodeNum, id: episodeId }),
} videoStructured: generateVideoStructuredData(animeInfo, { number: activeEpisodeNum, id: episodeId }, streamUrl),
breadcrumb: generateBreadcrumbStructuredData([
{ name: 'Home', url: '/' },
{ name: animeInfo.title, url: `/${animeId}` },
{ name: `Episode ${activeEpisodeNum}`, url: `/watch/${animeId}?ep=${episodeId}` }
])
};
}, [animeId, animeInfo, activeEpisodeNum, episodeId, language, streamUrl]);
useEffect(() => { const tags = useMemo(() => {
setTags([ const info = animeInfo?.animeInfo?.tvInfo;
{ if (!info) return [];
condition: animeInfo?.animeInfo?.tvInfo?.rating, return [
bgColor: "#ffffff", { condition: info.rating, text: info.rating, bgColor: "#ffffff" },
text: animeInfo?.animeInfo?.tvInfo?.rating, { condition: info.quality, text: info.quality, bgColor: "#FFBADE" },
}, { condition: info.sub, text: info.sub, icon: faClosedCaptioning, bgColor: "#B0E3AF" },
{ { condition: info.dub, text: info.dub, icon: faMicrophone, bgColor: "#B9E7FF" },
condition: animeInfo?.animeInfo?.tvInfo?.quality, ];
bgColor: "#FFBADE", }, [animeInfo]);
text: animeInfo?.animeInfo?.tvInfo?.quality,
},
{
condition: animeInfo?.animeInfo?.tvInfo?.sub,
icon: faClosedCaptioning,
bgColor: "#B0E3AF",
text: animeInfo?.animeInfo?.tvInfo?.sub,
},
{
condition: animeInfo?.animeInfo?.tvInfo?.dub,
icon: faMicrophone,
bgColor: "#B9E7FF",
text: animeInfo?.animeInfo?.tvInfo?.dub,
},
]);
}, [animeId, animeInfo]);
const safeTitle = animeInfo ? getSafeTitle(animeInfo.title, language, animeInfo.japanese_title) : '';
const pageTitle = animeInfo ? optimizeTitle(`Watch ${safeTitle} Episode ${activeEpisodeNum} Sub Dub Online Free`) : `${website_name} | Free anime streaming platform`;
const pageDescription = animeInfo ? generateDescription(`Stream ${safeTitle} Episode ${activeEpisodeNum} in HD with English Sub and Dub. ${animeInfo.animeInfo?.Overview}`) : '';
const pageKeywords = animeInfo ? generateKeywords(animeInfo) + `, episode ${activeEpisodeNum}` : '';
const canonicalUrl = generateCanonicalUrl(`/watch/${animeId}?ep=${episodeId}`);
const ogImage = animeInfo ? generateOGImage(animeInfo.poster) : '';
const animeStructuredData = animeInfo ? generateAnimeStructuredData(animeInfo, { number: activeEpisodeNum, id: episodeId }) : null;
const videoStructuredData = animeInfo ? generateVideoStructuredData(animeInfo, { number: activeEpisodeNum, id: episodeId }, streamUrl) : null;
const breadcrumbData = animeInfo ? generateBreadcrumbStructuredData([
{ name: 'Home', url: '/' },
{ name: animeInfo.title, url: `/${animeId}` },
{ name: `Episode ${activeEpisodeNum}`, url: `/watch/${animeId}?ep=${episodeId}` }
]) : null;
return ( return (
<> <>
<Helmet> {seoData && (
<title>{pageTitle}</title> <Helmet>
<meta name="description" content={pageDescription} /> <title>{seoData.pageTitle}</title>
<meta name="keywords" content={pageKeywords} /> <meta name="description" content={seoData.pageDescription} />
<link rel="canonical" href={canonicalUrl} /> <meta name="keywords" content={seoData.pageKeywords} />
<link rel="canonical" href={seoData.canonicalUrl} />
<meta property="og:title" content={seoData.pageTitle} />
<meta property="og:description" content={seoData.pageDescription} />
<meta property="og:image" content={seoData.ogImage} />
<meta property="og:url" content={seoData.canonicalUrl} />
<meta property="og:type" content="video.episode" />
<meta name="twitter:card" content="summary_large_image" />
<script type="application/ld+json">{JSON.stringify(seoData.structured)}</script>
<script type="application/ld+json">{JSON.stringify(seoData.videoStructured)}</script>
<script type="application/ld+json">{JSON.stringify(seoData.breadcrumb)}</script>
</Helmet>
)}
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={pageDescription} />
<meta property="og:image" content={ogImage} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:type" content="video.episode" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={pageTitle} />
<meta name="twitter:description" content={pageDescription} />
<meta name="twitter:image" content={ogImage} />
{animeStructuredData && (
<script type="application/ld+json">
{JSON.stringify(animeStructuredData)}
</script>
)}
{videoStructuredData && (
<script type="application/ld+json">
{JSON.stringify(videoStructuredData)}
</script>
)}
{breadcrumbData && (
<script type="application/ld+json">
{JSON.stringify(breadcrumbData)}
</script>
)}
</Helmet>
<div className="w-full min-h-screen bg-[#0a0a0a]"> <div className="w-full min-h-screen bg-[#0a0a0a]">
<div className="w-full max-w-[1920px] mx-auto pt-24 pb-6 max-[1200px]:pt-16"> <div className="w-full max-w-[1920px] mx-auto pt-20 pb-6 max-[1200px]:pt-16">
<div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col"> <div className="grid grid-cols-[1fr_350px] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col px-4 lg:px-6">
{/* Left Column - Player, Controls, Servers */}
{/* Left Column */}
<div className="flex flex-col w-full gap-6"> <div className="flex flex-col w-full gap-6">
<div ref={playerRef} className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden"> <div className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden shadow-2xl">
{/* Video Container */}
<div ref={videoContainerRef} className="w-full relative aspect-video bg-black"> <div ref={videoContainerRef} className="w-full relative aspect-video bg-black">
{!buffering ? (["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ? {!buffering ? (
<IframePlayer ["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ? (
episodeId={episodeId} <IframePlayer
servertype={activeServerType} episodeId={episodeId}
serverName={activeServerName} servertype={activeServerType}
animeInfo={animeInfo} serverName={activeServerName}
episodeNum={activeEpisodeNum} animeInfo={animeInfo}
episodes={episodes} episodeNum={activeEpisodeNum}
playNext={(id) => setEpisodeId(id)} episodes={episodes}
autoNext={autoNext} playNext={setEpisodeId}
/> : <Player autoNext={autoNext}
streamUrl={streamUrl} />
subtitles={subtitles} ) : (
intro={intro} <Player
outro={outro} streamUrl={streamUrl}
serverName={activeServerName.toLowerCase()} subtitles={subtitles}
thumbnail={thumbnail} intro={intro}
autoSkipIntro={autoSkipIntro} outro={outro}
autoPlay={autoPlay} serverName={activeServerName.toLowerCase()}
autoNext={autoNext} thumbnail={thumbnail}
episodeId={episodeId} autoSkipIntro={autoSkipIntro}
episodes={episodes} autoPlay={autoPlay}
playNext={(id) => setEpisodeId(id)} autoNext={autoNext}
animeInfo={animeInfo} episodeId={episodeId}
episodeNum={activeEpisodeNum} episodes={episodes}
streamInfo={streamInfo} playNext={setEpisodeId}
/> animeInfo={animeInfo}
episodeNum={activeEpisodeNum}
streamInfo={streamInfo}
/>
)
) : ( ) : (
<div className="absolute inset-0 flex justify-center items-center bg-black"> <div className="absolute inset-0 flex justify-center items-center bg-black">
<BouncingLoader /> <BouncingLoader />
</div> </div>
)} )}
<p className="text-center underline font-medium text-[15px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none text-gray-300"> {!buffering && !activeServerType && (
{!buffering && !activeServerType ? ( <div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm pointer-events-none">
servers ? ( <p className="text-center text-gray-300 font-medium p-4 max-w-sm">
<> Streaming server seems to be down. Please try another server or reload the page.
Probably this server is down, try other servers </p>
<br /> </div>
Either reload or try again after sometime )}
</>
) : (
<>
Probably streaming server is down
<br />
Either reload or try again after sometime
</>
)
) : null}
</p>
</div> </div>
{/* Controls Section */}
<div className="bg-[#121212]"> <div className="bg-[#121212]">
{!buffering && ( {!buffering && (
<div ref={controlsRef}> <div ref={controlsRef}>
<Watchcontrols <Watchcontrols
autoPlay={autoPlay} autoPlay={autoPlay} setAutoPlay={setAutoPlay}
setAutoPlay={setAutoPlay} autoSkipIntro={autoSkipIntro} setAutoSkipIntro={setAutoSkipIntro}
autoSkipIntro={autoSkipIntro} autoNext={autoNext} setAutoNext={setAutoNext}
setAutoSkipIntro={setAutoSkipIntro} episodes={episodes} totalEpisodes={totalEpisodes}
autoNext={autoNext} episodeId={episodeId} onButtonClick={setEpisodeId}
setAutoNext={setAutoNext}
episodes={episodes}
totalEpisodes={totalEpisodes}
episodeId={episodeId}
onButtonClick={(id) => setEpisodeId(id)}
/> />
</div> </div>
)} )}
{/* Title and Server Selection */}
<div className="px-3 py-2"> <div className="px-3 py-2">
<div> <Servers
<Servers servers={servers}
servers={servers} activeEpisodeNum={activeEpisodeNum}
activeEpisodeNum={activeEpisodeNum} activeServerId={activeServerId}
activeServerId={activeServerId} setActiveServerId={setActiveServerId}
setActiveServerId={setActiveServerId} serverLoading={serverLoading}
serverLoading={serverLoading} setActiveServerType={setActiveServerType}
setActiveServerType={setActiveServerType} activeServerType={activeServerType}
activeServerType={activeServerType} setActiveServerName={setActiveServerName}
setActiveServerName={setActiveServerName} />
/>
</div>
</div> </div>
{/* Next Episode Schedule */}
{nextEpisodeSchedule?.nextEpisodeSchedule && showNextEpisodeSchedule && ( {nextEpisodeSchedule?.nextEpisodeSchedule && showNextEpisodeSchedule && (
<div className="px-3 pb-3"> <div className="px-3 pb-3">
<div className="w-full p-3 rounded-lg bg-[#272727] flex items-center justify-between"> <div className="w-full p-3 rounded-lg bg-white/5 flex items-center justify-between border border-white/10">
<div className="flex items-center gap-x-3"> <div className="flex items-center gap-x-3">
<span className="text-[18px]">🚀</span> <span className="text-lg">🚀</span>
<div> <div className="text-xs sm:text-sm">
<span className="text-gray-400 text-sm">Next episode estimated at</span> <span className="text-gray-400">Next episode around: </span>
<span className="ml-2 text-white text-sm font-medium"> <span className="text-white font-medium">
{new Date( {new Date(nextEpisodeSchedule.nextEpisodeSchedule).toLocaleString("en-GB", {
new Date(nextEpisodeSchedule.nextEpisodeSchedule).getTime() - day: "2-digit", month: "2-digit", year: "numeric",
new Date().getTimezoneOffset() * 60000 hour: "2-digit", minute: "2-digit", hour12: true
).toLocaleDateString("en-GB", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: true,
})} })}
</span> </span>
</div> </div>
</div> </div>
<button <button onClick={() => setShowNextEpisodeSchedule(false)} className="text-2xl text-gray-500 hover:text-white transition-colors">×</button>
className="text-2xl text-gray-500 hover:text-white transition-colors"
onClick={() => setShowNextEpisodeSchedule(false)}
>
×
</button>
</div> </div>
</div> </div>
)} )}
</div> </div>
</div> </div>
{/* Mobile-only Seasons Section */} {/* Info Section */}
{seasons?.length > 0 && ( <div className="bg-[#141414] rounded-xl p-4 lg:p-6 shadow-lg border border-white/5">
<div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-4"> <div className="flex gap-4 sm:gap-6 flex-col sm:flex-row">
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2> <div className="flex-shrink-0 mx-auto sm:mx-0">
<div className="grid grid-cols-2 gap-2"> {animeInfo ? (
{seasons.map((season, index) => ( <img src={animeInfo.poster} alt={seoData?.safeTitle} className="w-[120px] aspect-[2/3] object-cover rounded-lg shadow-xl" />
<Link ) : <Skeleton className="w-[120px] h-[180px] rounded-lg" />}
to={`/${season.id}`}
key={index}
className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${animeId === String(season.id)
? "ring-2 ring-white/40 shadow-lg shadow-white/10"
: ""
}`}
>
<img
src={season.season_poster}
alt={season.season}
className={`w-full h-full object-cover scale-150 ${animeId === String(season.id)
? "opacity-50"
: "opacity-40 group-hover:opacity-50 transition-opacity"
}`}
/>
{/* Dots Pattern Overlay */}
<div
className="absolute inset-0 z-10"
style={{
backgroundImage: `url('data:image/svg+xml,<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.5" cy="1.5" r="0.5" fill="white" fill-opacity="0.25"/></svg>')`,
backgroundSize: '3px 3px'
}}
/>
{/* Dark Gradient Overlay */}
<div className={`absolute inset-0 z-20 bg-gradient-to-r ${animeId === String(season.id)
? "from-black/50 to-transparent"
: "from-black/40 to-transparent"
}`} />
{/* Title Container */}
<div className="absolute inset-0 z-30 flex items-center justify-center">
<p className={`text-[14px] font-bold text-center px-2 transition-colors duration-300 ${animeId === String(season.id)
? "text-white"
: "text-white/90 group-hover:text-white"
}`}>
{season.season}
</p>
</div>
</Link>
))}
</div> </div>
</div> <div className="flex flex-col gap-3 flex-1 min-w-0">
)} {animeInfo ? (
<Link to={`/${animeId}`} className="group inline-block">
{/* Mobile-only Episodes Section */} <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white leading-tight group-hover:text-blue-400 transition-colors truncate">
<div className="hidden max-[1200px]:block"> {seoData?.safeTitle}
<div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden">
{!episodes ? (
<div className="h-full flex items-center justify-center">
<BouncingLoader />
</div>
) : (
<Episodelist
episodes={episodes}
currentEpisode={episodeId}
onEpisodeClick={(id) => setEpisodeId(id)}
totalEpisodes={totalEpisodes}
/>
)}
</div>
</div>
{/* Anime Info Section */}
<div className="bg-[#141414] rounded-lg p-4">
<div className="flex gap-x-6 max-[600px]:flex-row max-[600px]:gap-4">
{animeInfo && animeInfo?.poster ? (
<img
src={`${animeInfo?.poster}`}
alt=""
className="w-[120px] h-[180px] object-cover rounded-md max-[600px]:w-[100px] max-[600px]:h-[150px]"
/>
) : (
<Skeleton className="w-[120px] h-[180px] rounded-md max-[600px]:w-[100px] max-[600px]:h-[150px]" />
)}
<div className="flex flex-col gap-y-4 flex-1 max-[600px]:gap-y-2">
{animeInfo && animeInfo?.title ? (
<Link
to={`/${animeId}`}
className="group"
>
<h1 className="text-[28px] font-medium text-white leading-tight group-hover:text-gray-300 transition-colors max-[600px]:text-[20px]">
{getSafeTitle(animeInfo.title, language, animeInfo.japanese_title)}
</h1> </h1>
<div className="flex items-center gap-1.5 mt-1 text-gray-400 text-sm group-hover:text-white transition-colors max-[600px]:text-[12px] max-[600px]:mt-0.5"> <div className="flex items-center gap-1.5 mt-1 text-gray-400 text-xs sm:text-sm">
<span>View Details</span> <span>View Details</span>
<svg className="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform max-[600px]:w-3 max-[600px]:h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <FontAwesomeIcon icon={faPlay} className="text-[10px] transform group-hover:translate-x-0.5 transition-transform" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div> </div>
</Link> </Link>
) : ( ) : <Skeleton className="w-48 h-8 rounded-lg" />}
<Skeleton className="w-[170px] h-[20px] rounded-xl" />
)} <div className="flex flex-wrap gap-1.5 sm:gap-2">
<div className="flex flex-wrap gap-2 max-[600px]:gap-1.5"> {tags.map((tag, idx) => tag.condition && (
{animeInfo ? ( <InfoTag
tags.map( key={idx}
({ condition, icon, text }, index) => icon={tag.icon}
condition && ( text={tag.text}
<span key={index} className="px-3 py-1 bg-[#1a1a1a] rounded-full text-sm flex items-center gap-x-1 text-gray-300 max-[600px]:px-2 max-[600px]:py-0.5 max-[600px]:text-[11px]"> className={tag.bgColor === "#ffffff" ? "bg-white/10" : ""}
{icon && <FontAwesomeIcon icon={icon} className="text-[12px] max-[600px]:text-[10px]" />} />
{text} ))}
</span>
)
)
) : (
<Skeleton className="w-[70px] h-[20px] rounded-xl" />
)}
</div> </div>
{animeInfo?.animeInfo?.Overview && ( {animeInfo?.animeInfo?.Overview && (
<p className="text-[15px] text-gray-400 leading-relaxed max-[600px]:text-[13px] max-[600px]:leading-normal"> <div className="text-sm sm:text-base text-gray-300 leading-relaxed">
{animeInfo?.animeInfo?.Overview.length > 270 ? ( {animeInfo.animeInfo.Overview.length > 270 ? (
<> <>
{isFullOverview {isFullOverview ? animeInfo.animeInfo.Overview : `${animeInfo.animeInfo.Overview.slice(0, 270)}...`}
? animeInfo?.animeInfo?.Overview <button onClick={() => setIsFullOverview(!isFullOverview)} className="ml-2 text-white font-medium hover:underline text-xs sm:text-sm">
: `${animeInfo?.animeInfo?.Overview.slice(0, 270)}...`}
<button
className="ml-2 text-gray-300 hover:text-white transition-colors max-[600px]:text-[12px] max-[600px]:ml-1"
onClick={() => setIsFullOverview(!isFullOverview)}
>
{isFullOverview ? "Show Less" : "Read More"} {isFullOverview ? "Show Less" : "Read More"}
</button> </button>
</> </>
) : ( ) : animeInfo.animeInfo.Overview}
animeInfo?.animeInfo?.Overview </div>
)}
</p>
)} )}
</div> </div>
</div> </div>
</div> </div>
{/* Desktop-only Seasons Section */} {/* Seasons (Mobile only) */}
{seasons?.length > 0 && ( {seasons?.length > 0 && (
<div className="bg-[#141414] rounded-lg p-4 max-[1200px]:hidden"> <div className="hidden max-[1200px]:block bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2> <h2 className="text-lg font-bold mb-4 text-white">More Seasons</h2>
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4"> <div className="grid grid-cols-2 gap-3">
{seasons.map((season, index) => ( {seasons.map((season, idx) => (
<Link <Link
to={`/${season.id}`} to={`/${season.id}`}
key={index} key={idx}
className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${animeId === String(season.id) className={`relative aspect-[3/1] rounded-lg overflow-hidden group border-2 transition-all ${animeId === String(season.id) ? "border-white/40 shadow-lg" : "border-transparent"}`}
? "ring-2 ring-white/40 shadow-lg shadow-white/10"
: ""
}`}
> >
<img <img src={season.season_poster} alt={season.season} className={`w-full h-full object-cover scale-150 transition-opacity ${animeId === String(season.id) ? "opacity-60" : "opacity-40 group-hover:opacity-60"}`} />
src={season.season_poster} <div className="absolute inset-0 bg-gradient-to-r from-black/80 to-transparent z-10" />
alt={season.season} <div className="absolute inset-0 flex items-center justify-center z-20 px-2">
className={`w-full h-full object-cover scale-150 ${animeId === String(season.id) <p className="text-xs font-bold text-white text-center line-clamp-2">{season.season}</p>
? "opacity-50"
: "opacity-40 group-hover:opacity-50 transition-opacity"
}`}
/>
{/* Dots Pattern Overlay */}
<div
className="absolute inset-0 z-10"
style={{
backgroundImage: `url('data:image/svg+xml,<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.5" cy="1.5" r="0.5" fill="white" fill-opacity="0.25"/></svg>')`,
backgroundSize: '3px 3px'
}}
/>
{/* Dark Gradient Overlay */}
<div className={`absolute inset-0 z-20 bg-gradient-to-r ${animeId === String(season.id)
? "from-black/50 to-transparent"
: "from-black/40 to-transparent"
}`} />
{/* Title Container */}
<div className="absolute inset-0 z-30 flex items-center justify-center">
<p className={`text-[14px] sm:text-[16px] font-bold text-center px-2 sm:px-4 transition-colors duration-300 ${animeId === String(season.id)
? "text-white"
: "text-white/90 group-hover:text-white"
}`}>
{season.season}
</p>
</div> </div>
</Link> </Link>
))} ))}
@@ -594,48 +363,34 @@ export default function Watch() {
)} )}
</div> </div>
{/* Right Column - Episodes and Related (Desktop Only) */} {/* Right Column (Desktop Only) */}
<div className="flex flex-col gap-6 h-full max-[1200px]:hidden"> <div className="flex flex-col gap-6 max-[1200px]:hidden">
{/* Episodes Section */} <div ref={episodesRef} className="episodes h-full bg-[#141414] rounded-xl overflow-hidden shadow-lg border border-white/5">
<div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden">
{!episodes ? ( {!episodes ? (
<div className="h-full flex items-center justify-center"> <div className="h-full flex items-center justify-center"><BouncingLoader /></div>
<BouncingLoader />
</div>
) : ( ) : (
<Episodelist <Episodelist
episodes={episodes} episodes={episodes}
currentEpisode={episodeId} currentEpisode={episodeId}
onEpisodeClick={(id) => setEpisodeId(id)} onEpisodeClick={setEpisodeId}
totalEpisodes={totalEpisodes} totalEpisodes={totalEpisodes}
/> />
)} )}
</div> </div>
{/* Related Anime Section */} {!animeInfoLoading && animeInfo?.related_data?.length > 0 && (
{animeInfoLoading ? ( <div className="bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
<div className="mt-6"> <h2 className="text-lg font-bold mb-4 text-white">Related Anime</h2>
<SidecardLoader /> <Sidecard data={animeInfo.related_data} className="!mt-0" />
</div>
) : animeInfo?.related_data?.length > 0 && (
<div className="bg-[#141414] rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
<Sidecard
data={animeInfo.related_data}
className="!mt-0"
/>
</div> </div>
)} )}
</div> </div>
{/* Mobile-only Related Section */} {/* Related Anime (Mobile only) */}
{!animeInfoLoading && animeInfo?.related_data?.length > 0 && ( {!animeInfoLoading && animeInfo?.related_data?.length > 0 && (
<div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-4"> <div className="hidden max-[1200px]:block bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
<h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2> <h2 className="text-lg font-bold mb-4 text-white">Related Anime</h2>
<Sidecard <Sidecard data={animeInfo.related_data} className="!mt-0" />
data={animeInfo.related_data}
className="!mt-0"
/>
</div> </div>
)} )}
</div> </div>