mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 13:51:44 +00:00
resolved info and watch
This commit is contained in:
Tejas Panchal
18
src/components/ui/InfoTag/InfoTag.jsx
Normal file
18
src/components/ui/InfoTag/InfoTag.jsx
Normal 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);
|
||||
@@ -5,18 +5,16 @@ import {
|
||||
faClosedCaptioning,
|
||||
faMicrophone,
|
||||
} 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 website_name from "@/src/config/website";
|
||||
import CategoryCard from "@/src/components/categorycard/CategoryCard";
|
||||
import Sidecard from "@/src/components/sidecard/Sidecard";
|
||||
import Loader from "@/src/components/Loader/Loader";
|
||||
import Error from "@/src/components/error/Error";
|
||||
import { useLanguage } from "@/src/context/LanguageContext";
|
||||
import { useHomeInfo } from "@/src/context/HomeInfoContext";
|
||||
import Voiceactor from "@/src/components/voiceactor/Voiceactor";
|
||||
import getSafeTitle from "@/src/utils/getSafetitle";
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import InfoTag from "@/src/components/ui/InfoTag/InfoTag";
|
||||
import {
|
||||
generateDescription,
|
||||
generateKeywords,
|
||||
@@ -27,536 +25,356 @@ import {
|
||||
optimizeTitle,
|
||||
} from '@/src/utils/seo.utils';
|
||||
|
||||
function InfoItem({ label, value, isProducer = true }) {
|
||||
return (
|
||||
value && (
|
||||
<div className="text-[11px] sm:text-[14px] font-medium transition-all duration-300">
|
||||
<span className="text-gray-400">{`${label}: `}</span>
|
||||
<span className="font-light text-white/90">
|
||||
{Array.isArray(value) ? (
|
||||
value.map((item, index) =>
|
||||
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 ? (
|
||||
const InfoItem = ({ label, value, isProducer = true }) => {
|
||||
if (!value) return null;
|
||||
|
||||
const renderValue = () => {
|
||||
if (Array.isArray(value)) {
|
||||
return value.map((item, index) => (
|
||||
<span key={index}>
|
||||
{isProducer ? (
|
||||
<Link
|
||||
to={`/producer/${value
|
||||
.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "")
|
||||
.split(" ")
|
||||
.join("-")
|
||||
.replace(/-+/g, "-")}`}
|
||||
to={`/producer/${item.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "").split(" ").join("-").replace(/-+/g, "-")}`}
|
||||
className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
|
||||
>
|
||||
{value}
|
||||
{item}
|
||||
</Link>
|
||||
) : (
|
||||
<span>{value}</span>
|
||||
item
|
||||
)}
|
||||
{index < value.length - 1 && ", "}
|
||||
</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 (
|
||||
<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 bg-white/10 font-medium text-[10px] sm:text-[13px] rounded-md sm:rounded-full transition-all duration-300 hover:bg-white/20"
|
||||
>
|
||||
{icon && <FontAwesomeIcon icon={icon} className="text-[10px] sm:text-[12px] mr-1" />}
|
||||
<p className="text-[10px] sm:text-[12px]">{text}</p>
|
||||
<div className="text-[11px] sm:text-[14px] font-medium transition-all duration-300">
|
||||
<span className="text-gray-400">{`${label}: `}</span>
|
||||
<span className="font-light text-white/90">{renderValue()}</span>
|
||||
</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 }) {
|
||||
const { language } = useLanguage();
|
||||
const { id: paramId } = useParams();
|
||||
const id = random ? null : paramId;
|
||||
const { id: currentId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [isFull, setIsFull] = useState(false);
|
||||
const [animeInfo, setAnimeInfo] = useState(null);
|
||||
const [seasons, setSeasons] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const { homeInfo } = useHomeInfo();
|
||||
const { id: currentId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (id === "404-not-found-page") {
|
||||
console.log("404 got!");
|
||||
return null;
|
||||
} else {
|
||||
const fetchAnimeInfo = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getAnimeInfo(id, random);
|
||||
setSeasons(data?.seasons);
|
||||
setAnimeInfo(data.data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching anime info:", err);
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchAnimeInfo();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
if (id === "404-not-found-page") return;
|
||||
|
||||
const fetchAnimeInfo = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getAnimeInfo(id, random);
|
||||
if (!data?.data) throw new Error("Anime not found");
|
||||
setSeasons(data?.seasons);
|
||||
setAnimeInfo(data.data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching anime info:", err);
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchAnimeInfo();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}, [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 (error) {
|
||||
return <Error />;
|
||||
}
|
||||
if (error || (!animeInfo && !loading)) return <Error />;
|
||||
if (!animeInfo) {
|
||||
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 pageDescription = generateDescription(info?.Overview);
|
||||
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,
|
||||
},
|
||||
];
|
||||
const { poster, japanese_title, animeInfo: info } = animeInfo;
|
||||
const isAiring = animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired";
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{pageTitle}</title>
|
||||
<meta name="description" content={pageDescription} />
|
||||
<meta name="keywords" content={pageKeywords} />
|
||||
<link rel="canonical" href={canonicalUrl} />
|
||||
|
||||
<meta property="og:title" content={pageTitle} />
|
||||
<meta property="og:description" content={pageDescription} />
|
||||
<meta property="og:image" content={ogImage} />
|
||||
<meta property="og:url" content={canonicalUrl} />
|
||||
<title>{seoData.title}</title>
|
||||
<meta name="description" content={seoData.description} />
|
||||
<meta name="keywords" content={seoData.keywords} />
|
||||
<link rel="canonical" href={seoData.canonical} />
|
||||
<meta property="og:title" content={seoData.title} />
|
||||
<meta property="og:description" content={seoData.description} />
|
||||
<meta property="og:image" content={seoData.ogImage} />
|
||||
<meta property="og:url" content={seoData.canonical} />
|
||||
<meta property="og:type" content="video.tv_show" />
|
||||
|
||||
<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} />
|
||||
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify(animeStructuredData)}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify(breadcrumbData)}
|
||||
</script>
|
||||
<meta name="twitter:title" content={seoData.title} />
|
||||
<meta name="twitter:description" content={seoData.description} />
|
||||
<meta name="twitter:image" content={seoData.ogImage} />
|
||||
<script type="application/ld+json">{JSON.stringify(seoData.structured)}</script>
|
||||
<script type="application/ld+json">{JSON.stringify(seoData.breadcrumb)}</script>
|
||||
</Helmet>
|
||||
|
||||
<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 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 */}
|
||||
<div className="block md:hidden pt-4">
|
||||
<div className="flex flex-row gap-4">
|
||||
{/* Poster Section */}
|
||||
<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)]">
|
||||
<img
|
||||
src={`${poster}`}
|
||||
alt={`${safeTitle} Poster`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="relative w-[130px] xs:w-[150px] aspect-[2/3] rounded-xl overflow-hidden shadow-2xl">
|
||||
<img src={poster} alt={seoData.safeTitle} className="w-full h-full object-cover" />
|
||||
{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">
|
||||
18+
|
||||
</div>
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Basic Info Section */}
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
{/* Title */}
|
||||
<div className="space-y-0.5">
|
||||
<h1 className="text-lg xs:text-xl font-bold tracking-tight truncate">
|
||||
{safeTitle}
|
||||
</h1>
|
||||
<h1 className="text-lg xs:text-xl font-bold tracking-tight truncate">{seoData.safeTitle}</h1>
|
||||
{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>
|
||||
|
||||
{/* Tags */}
|
||||
<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>
|
||||
)}
|
||||
<TagsList tags={tags} />
|
||||
<Synopsis text={info?.Overview} isFull={isFull} onToggle={() => setIsFull(!isFull)} isMobile />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Watch Button - Full Width on Mobile */}
|
||||
<div className="mt-6">
|
||||
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
|
||||
<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 transition-all duration-300 hover:bg-white/20 group"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlay}
|
||||
className="mr-2 text-xs group-hover:text-white"
|
||||
/>
|
||||
{isAiring ? (
|
||||
<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">
|
||||
<FontAwesomeIcon icon={faPlay} className="mr-2 text-xs group-hover:scale-110 transition-transform" />
|
||||
<span className="font-medium text-sm">Watch Now</span>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="flex justify-center items-center w-full px-4 py-3 bg-gray-700/50 rounded-lg">
|
||||
<span className="font-medium text-sm">Not released</span>
|
||||
<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 yet released</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Details Section - Full Width on Mobile */}
|
||||
<div className="mt-6 space-y-3 py-3 backdrop-blur-md bg-white/5 rounded-lg px-3 text-xs">
|
||||
<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 className="mt-4">
|
||||
<DetailGrid info={info} isMobile />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Existing Code */}
|
||||
{/* Desktop Layout */}
|
||||
<div className="hidden md:block">
|
||||
<div className="flex flex-row gap-6 lg:gap-10">
|
||||
{/* Poster Section */}
|
||||
<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)]">
|
||||
<img
|
||||
src={`${poster}`}
|
||||
alt={`${safeTitle} Poster`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="relative w-[220px] lg:w-[260px] aspect-[2/3] rounded-2xl overflow-hidden shadow-2xl">
|
||||
<img src={poster} alt={seoData.safeTitle} className="w-full h-full object-cover" />
|
||||
{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">
|
||||
18+
|
||||
</div>
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Section */}
|
||||
<div className="flex-1 space-y-4 lg:space-y-5 min-w-0">
|
||||
{/* Title */}
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-3xl lg:text-4xl font-bold tracking-tight truncate">
|
||||
{safeTitle}
|
||||
</h1>
|
||||
<h1 className="text-3xl lg:text-4xl font-bold tracking-tight truncate">{seoData.safeTitle}</h1>
|
||||
{language === "EN" && japanese_title && (
|
||||
<p className="text-white/50 text-sm lg:text-base truncate">JP Title: {japanese_title}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map(({ condition, icon, text }, index) =>
|
||||
condition && (
|
||||
<Tag
|
||||
key={index}
|
||||
index={index}
|
||||
icon={icon}
|
||||
text={text}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<TagsList tags={tags} />
|
||||
<Synopsis text={info?.Overview} isFull={isFull} onToggle={() => setIsFull(!isFull)} />
|
||||
|
||||
{/* Overview */}
|
||||
{info?.Overview && (
|
||||
<div className="text-gray-300 leading-relaxed max-w-3xl text-sm lg:text-base">
|
||||
{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"
|
||||
/>
|
||||
{isAiring ? (
|
||||
<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">
|
||||
<FontAwesomeIcon icon={faPlay} className="mr-2 text-sm group-hover:scale-110 transition-transform" />
|
||||
<span className="font-medium">Watch Now</span>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="inline-flex items-center px-5 py-2.5 bg-gray-700/50 rounded-xl">
|
||||
<span className="font-medium">Not released</span>
|
||||
<div className="inline-flex items-center px-6 py-3 bg-gray-700/50 rounded-xl text-gray-400">
|
||||
<span className="font-medium">Not yet released</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Details Section */}
|
||||
<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>
|
||||
<DetailGrid info={info} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Seasons Section */}
|
||||
{seasons?.length > 0 && (
|
||||
<div className="container mx-auto pt-8">
|
||||
<h2 className="text-2xl font-bold mb-6 sm:mb-8 px-1">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">
|
||||
{seasons.map((season, index) => (
|
||||
<Link
|
||||
to={`/${season.id}`}
|
||||
key={index}
|
||||
className={`relative w-full aspect-[3/1] sm:aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${currentId === 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 ${currentId === String(season.id)
|
||||
? "opacity-50"
|
||||
: "opacity-40"
|
||||
}`}
|
||||
/>
|
||||
{/* 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 ${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>
|
||||
))}
|
||||
{/* Sections */}
|
||||
<div className="container mx-auto space-y-8 pb-12">
|
||||
{seasons?.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6 px-1">More Seasons</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{seasons.map((season, index) => (
|
||||
<Link
|
||||
to={`/${season.id}`}
|
||||
key={index}
|
||||
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
|
||||
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'
|
||||
}}
|
||||
/>
|
||||
<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">
|
||||
<p className="text-sm sm:text-base font-bold text-center px-4">{season.season}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Voice Actors Section */}
|
||||
{animeInfo?.charactersVoiceActors.length > 0 && (
|
||||
<div className="container mx-auto pt-8">
|
||||
<Voiceactor animeInfo={animeInfo} />
|
||||
</div>
|
||||
)}
|
||||
{animeInfo?.charactersVoiceActors?.length > 0 && (
|
||||
<div className="pt-4">
|
||||
<Voiceactor animeInfo={animeInfo} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recommendations Section */}
|
||||
{animeInfo.recommended_data.length > 0 && (
|
||||
<div className="container mx-auto pt-8">
|
||||
<CategoryCard
|
||||
label="Recommended for you"
|
||||
data={animeInfo.recommended_data}
|
||||
limit={animeInfo.recommended_data.length}
|
||||
showViewMore={false}
|
||||
gridClass="grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:gap-x-2"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{animeInfo?.recommended_data?.length > 0 && (
|
||||
<div className="pt-4">
|
||||
<CategoryCard
|
||||
label="Recommended for you"
|
||||
data={animeInfo.recommended_data}
|
||||
limit={animeInfo.recommended_data.length}
|
||||
showViewMore={false}
|
||||
gridClass="grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/* 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 { useLanguage } from "@/src/context/LanguageContext";
|
||||
import { useHomeInfo } from "@/src/context/HomeInfoContext";
|
||||
import { useWatch } from "@/src/hooks/useWatch";
|
||||
import BouncingLoader from "@/src/components/ui/bouncingloader/Bouncingloader";
|
||||
import IframePlayer from "@/src/components/player/IframePlayer";
|
||||
@@ -12,6 +11,7 @@ import Sidecard from "@/src/components/sidecard/Sidecard";
|
||||
import {
|
||||
faClosedCaptioning,
|
||||
faMicrophone,
|
||||
faPlay,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
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 getSafeTitle from "@/src/utils/getSafetitle";
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import InfoTag from "@/src/components/ui/InfoTag/InfoTag";
|
||||
import {
|
||||
generateDescription,
|
||||
generateKeywords,
|
||||
@@ -39,13 +40,11 @@ export default function Watch() {
|
||||
const { id: animeId } = useParams();
|
||||
const queryParams = new URLSearchParams(location.search);
|
||||
let initialEpisodeId = queryParams.get("ep");
|
||||
const [tags, setTags] = useState([]);
|
||||
const { language } = useLanguage();
|
||||
const { homeInfo } = useHomeInfo();
|
||||
const isFirstSet = useRef(true);
|
||||
const [showNextEpisodeSchedule, setShowNextEpisodeSchedule] = useState(true);
|
||||
|
||||
const {
|
||||
// error,
|
||||
buffering,
|
||||
streamInfo,
|
||||
streamUrl,
|
||||
@@ -61,7 +60,6 @@ export default function Watch() {
|
||||
thumbnail,
|
||||
setIsFullOverview,
|
||||
activeEpisodeNum,
|
||||
seasons,
|
||||
episodeId,
|
||||
setEpisodeId,
|
||||
activeServerId,
|
||||
@@ -71,8 +69,10 @@ export default function Watch() {
|
||||
activeServerType,
|
||||
setActiveServerType,
|
||||
activeServerName,
|
||||
setActiveServerName
|
||||
setActiveServerName,
|
||||
seasons
|
||||
} = useWatch(animeId, initialEpisodeId);
|
||||
|
||||
const {
|
||||
autoPlay,
|
||||
setAutoPlay,
|
||||
@@ -81,511 +81,280 @@ export default function Watch() {
|
||||
autoNext,
|
||||
setAutoNext,
|
||||
} = useWatchControl();
|
||||
const playerRef = useRef(null);
|
||||
|
||||
const videoContainerRef = useRef(null);
|
||||
const controlsRef = useRef(null);
|
||||
const episodesRef = useRef(null);
|
||||
|
||||
// Sync URL with episodeId
|
||||
useEffect(() => {
|
||||
if (!episodes || episodes.length === 0) return;
|
||||
if (!episodes?.length) return;
|
||||
|
||||
const isValidEpisode = episodes.some(ep => {
|
||||
const epNumber = ep.id.split('ep=')[1];
|
||||
return epNumber === episodeId;
|
||||
});
|
||||
const currentEpNum = episodeId;
|
||||
const isValidEpisode = episodes.some(ep => ep.id.split('ep=')[1] === currentEpNum);
|
||||
|
||||
// If missing or invalid episodeId, fallback to first
|
||||
if (!episodeId || !isValidEpisode) {
|
||||
if (!currentEpNum || !isValidEpisode) {
|
||||
const fallbackId = episodes[0].id.match(/ep=(\d+)/)?.[1];
|
||||
if (fallbackId && fallbackId !== episodeId) {
|
||||
setEpisodeId(fallbackId);
|
||||
}
|
||||
if (fallbackId && fallbackId !== currentEpNum) setEpisodeId(fallbackId);
|
||||
return;
|
||||
}
|
||||
|
||||
const newUrl = `/watch/${animeId}?ep=${episodeId}`;
|
||||
const newUrl = `/watch/${animeId}?ep=${currentEpNum}`;
|
||||
if (isFirstSet.current) {
|
||||
navigate(newUrl, { replace: true });
|
||||
isFirstSet.current = false;
|
||||
} else {
|
||||
navigate(newUrl);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [episodeId, animeId, navigate, episodes]);
|
||||
|
||||
|
||||
|
||||
// ... inside Watch component ...
|
||||
// Update document title
|
||||
}, [episodeId, animeId, navigate, episodes, setEpisodeId]);
|
||||
|
||||
// Redirect if no episodes
|
||||
useEffect(() => {
|
||||
if (totalEpisodes !== null && totalEpisodes === 0) {
|
||||
navigate(`/${animeId}`);
|
||||
if (totalEpisodes === 0) 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(() => {
|
||||
// Function to adjust the height of episodes list to match only video + controls
|
||||
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;
|
||||
const resizeObserver = new ResizeObserver(adjustHeight);
|
||||
|
||||
// Apply the combined height to episodes container
|
||||
episodesRef.current.style.height = `${totalHeight}px`;
|
||||
}
|
||||
} else {
|
||||
if (episodesRef.current) {
|
||||
episodesRef.current.style.height = 'auto';
|
||||
}
|
||||
}
|
||||
};
|
||||
if (videoContainerRef.current) resizeObserver.observe(videoContainerRef.current);
|
||||
if (controlsRef.current) resizeObserver.observe(controlsRef.current);
|
||||
|
||||
// Initial adjustment with delay to ensure player is fully rendered
|
||||
const initialTimer = setTimeout(() => {
|
||||
adjustHeight();
|
||||
}, 500);
|
||||
|
||||
// Set up resize listener
|
||||
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 () => {
|
||||
clearTimeout(initialTimer);
|
||||
clearInterval(intervalId);
|
||||
observer.disconnect();
|
||||
resizeObserver.disconnect();
|
||||
window.removeEventListener('resize', adjustHeight);
|
||||
};
|
||||
}, [buffering, activeServerType, activeServerName, episodeId, streamUrl, episodes]);
|
||||
}, [adjustHeight, buffering, animeInfoLoading]);
|
||||
|
||||
function Tag({ bgColor, index, icon, text }) {
|
||||
return (
|
||||
<div
|
||||
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"
|
||||
}`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
{icon && <FontAwesomeIcon icon={icon} className="text-[12px]" />}
|
||||
<p className="text-[12px]">{text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const seoData = useMemo(() => {
|
||||
if (!animeInfo) return null;
|
||||
const safeT = getSafeTitle(animeInfo.title, language, animeInfo.japanese_title);
|
||||
return {
|
||||
safeTitle: safeT,
|
||||
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}`),
|
||||
pageKeywords: `${generateKeywords(animeInfo)}, episode ${activeEpisodeNum}`,
|
||||
canonicalUrl: generateCanonicalUrl(`/watch/${animeId}?ep=${episodeId}`),
|
||||
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(() => {
|
||||
setTags([
|
||||
{
|
||||
condition: animeInfo?.animeInfo?.tvInfo?.rating,
|
||||
bgColor: "#ffffff",
|
||||
text: animeInfo?.animeInfo?.tvInfo?.rating,
|
||||
},
|
||||
{
|
||||
condition: animeInfo?.animeInfo?.tvInfo?.quality,
|
||||
bgColor: "#FFBADE",
|
||||
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 tags = useMemo(() => {
|
||||
const info = animeInfo?.animeInfo?.tvInfo;
|
||||
if (!info) return [];
|
||||
return [
|
||||
{ condition: info.rating, text: info.rating, bgColor: "#ffffff" },
|
||||
{ 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" },
|
||||
];
|
||||
}, [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 (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{pageTitle}</title>
|
||||
<meta name="description" content={pageDescription} />
|
||||
<meta name="keywords" content={pageKeywords} />
|
||||
<link rel="canonical" href={canonicalUrl} />
|
||||
{seoData && (
|
||||
<Helmet>
|
||||
<title>{seoData.pageTitle}</title>
|
||||
<meta name="description" content={seoData.pageDescription} />
|
||||
<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 max-w-[1920px] mx-auto pt-24 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">
|
||||
{/* Left Column - Player, Controls, Servers */}
|
||||
<div className="w-full max-w-[1920px] mx-auto pt-20 pb-6 max-[1200px]:pt-16">
|
||||
<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 */}
|
||||
<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">
|
||||
{/* Video Container */}
|
||||
<div className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden shadow-2xl">
|
||||
<div ref={videoContainerRef} className="w-full relative aspect-video bg-black">
|
||||
{!buffering ? (["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ?
|
||||
<IframePlayer
|
||||
episodeId={episodeId}
|
||||
servertype={activeServerType}
|
||||
serverName={activeServerName}
|
||||
animeInfo={animeInfo}
|
||||
episodeNum={activeEpisodeNum}
|
||||
episodes={episodes}
|
||||
playNext={(id) => setEpisodeId(id)}
|
||||
autoNext={autoNext}
|
||||
/> : <Player
|
||||
streamUrl={streamUrl}
|
||||
subtitles={subtitles}
|
||||
intro={intro}
|
||||
outro={outro}
|
||||
serverName={activeServerName.toLowerCase()}
|
||||
thumbnail={thumbnail}
|
||||
autoSkipIntro={autoSkipIntro}
|
||||
autoPlay={autoPlay}
|
||||
autoNext={autoNext}
|
||||
episodeId={episodeId}
|
||||
episodes={episodes}
|
||||
playNext={(id) => setEpisodeId(id)}
|
||||
animeInfo={animeInfo}
|
||||
episodeNum={activeEpisodeNum}
|
||||
streamInfo={streamInfo}
|
||||
/>
|
||||
{!buffering ? (
|
||||
["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ? (
|
||||
<IframePlayer
|
||||
episodeId={episodeId}
|
||||
servertype={activeServerType}
|
||||
serverName={activeServerName}
|
||||
animeInfo={animeInfo}
|
||||
episodeNum={activeEpisodeNum}
|
||||
episodes={episodes}
|
||||
playNext={setEpisodeId}
|
||||
autoNext={autoNext}
|
||||
/>
|
||||
) : (
|
||||
<Player
|
||||
streamUrl={streamUrl}
|
||||
subtitles={subtitles}
|
||||
intro={intro}
|
||||
outro={outro}
|
||||
serverName={activeServerName.toLowerCase()}
|
||||
thumbnail={thumbnail}
|
||||
autoSkipIntro={autoSkipIntro}
|
||||
autoPlay={autoPlay}
|
||||
autoNext={autoNext}
|
||||
episodeId={episodeId}
|
||||
episodes={episodes}
|
||||
playNext={setEpisodeId}
|
||||
animeInfo={animeInfo}
|
||||
episodeNum={activeEpisodeNum}
|
||||
streamInfo={streamInfo}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="absolute inset-0 flex justify-center items-center bg-black">
|
||||
<BouncingLoader />
|
||||
</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 ? (
|
||||
servers ? (
|
||||
<>
|
||||
Probably this server is down, try other servers
|
||||
<br />
|
||||
Either reload or try again after sometime
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Probably streaming server is down
|
||||
<br />
|
||||
Either reload or try again after sometime
|
||||
</>
|
||||
)
|
||||
) : null}
|
||||
</p>
|
||||
{!buffering && !activeServerType && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm pointer-events-none">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Controls Section */}
|
||||
<div className="bg-[#121212]">
|
||||
{!buffering && (
|
||||
<div ref={controlsRef}>
|
||||
<Watchcontrols
|
||||
autoPlay={autoPlay}
|
||||
setAutoPlay={setAutoPlay}
|
||||
autoSkipIntro={autoSkipIntro}
|
||||
setAutoSkipIntro={setAutoSkipIntro}
|
||||
autoNext={autoNext}
|
||||
setAutoNext={setAutoNext}
|
||||
episodes={episodes}
|
||||
totalEpisodes={totalEpisodes}
|
||||
episodeId={episodeId}
|
||||
onButtonClick={(id) => setEpisodeId(id)}
|
||||
autoPlay={autoPlay} setAutoPlay={setAutoPlay}
|
||||
autoSkipIntro={autoSkipIntro} setAutoSkipIntro={setAutoSkipIntro}
|
||||
autoNext={autoNext} setAutoNext={setAutoNext}
|
||||
episodes={episodes} totalEpisodes={totalEpisodes}
|
||||
episodeId={episodeId} onButtonClick={setEpisodeId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title and Server Selection */}
|
||||
<div className="px-3 py-2">
|
||||
<div>
|
||||
<Servers
|
||||
servers={servers}
|
||||
activeEpisodeNum={activeEpisodeNum}
|
||||
activeServerId={activeServerId}
|
||||
setActiveServerId={setActiveServerId}
|
||||
serverLoading={serverLoading}
|
||||
setActiveServerType={setActiveServerType}
|
||||
activeServerType={activeServerType}
|
||||
setActiveServerName={setActiveServerName}
|
||||
/>
|
||||
</div>
|
||||
<Servers
|
||||
servers={servers}
|
||||
activeEpisodeNum={activeEpisodeNum}
|
||||
activeServerId={activeServerId}
|
||||
setActiveServerId={setActiveServerId}
|
||||
serverLoading={serverLoading}
|
||||
setActiveServerType={setActiveServerType}
|
||||
activeServerType={activeServerType}
|
||||
setActiveServerName={setActiveServerName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Next Episode Schedule */}
|
||||
{nextEpisodeSchedule?.nextEpisodeSchedule && showNextEpisodeSchedule && (
|
||||
<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">
|
||||
<span className="text-[18px]">🚀</span>
|
||||
<div>
|
||||
<span className="text-gray-400 text-sm">Next episode estimated at</span>
|
||||
<span className="ml-2 text-white text-sm font-medium">
|
||||
{new Date(
|
||||
new Date(nextEpisodeSchedule.nextEpisodeSchedule).getTime() -
|
||||
new Date().getTimezoneOffset() * 60000
|
||||
).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
hour12: true,
|
||||
<span className="text-lg">🚀</span>
|
||||
<div className="text-xs sm:text-sm">
|
||||
<span className="text-gray-400">Next episode around: </span>
|
||||
<span className="text-white font-medium">
|
||||
{new Date(nextEpisodeSchedule.nextEpisodeSchedule).toLocaleString("en-GB", {
|
||||
day: "2-digit", month: "2-digit", year: "numeric",
|
||||
hour: "2-digit", minute: "2-digit", hour12: true
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="text-2xl text-gray-500 hover:text-white transition-colors"
|
||||
onClick={() => setShowNextEpisodeSchedule(false)}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<button onClick={() => setShowNextEpisodeSchedule(false)} className="text-2xl text-gray-500 hover:text-white transition-colors">×</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile-only Seasons Section */}
|
||||
{seasons?.length > 0 && (
|
||||
<div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-4">
|
||||
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{seasons.map((season, index) => (
|
||||
<Link
|
||||
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>
|
||||
))}
|
||||
{/* Info Section */}
|
||||
<div className="bg-[#141414] rounded-xl p-4 lg:p-6 shadow-lg border border-white/5">
|
||||
<div className="flex gap-4 sm:gap-6 flex-col sm:flex-row">
|
||||
<div className="flex-shrink-0 mx-auto sm:mx-0">
|
||||
{animeInfo ? (
|
||||
<img src={animeInfo.poster} alt={seoData?.safeTitle} className="w-[120px] aspect-[2/3] object-cover rounded-lg shadow-xl" />
|
||||
) : <Skeleton className="w-[120px] h-[180px] rounded-lg" />}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile-only Episodes Section */}
|
||||
<div className="hidden max-[1200px]:block">
|
||||
<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)}
|
||||
<div className="flex flex-col gap-3 flex-1 min-w-0">
|
||||
{animeInfo ? (
|
||||
<Link to={`/${animeId}`} className="group inline-block">
|
||||
<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white leading-tight group-hover:text-blue-400 transition-colors truncate">
|
||||
{seoData?.safeTitle}
|
||||
</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>
|
||||
<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">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<FontAwesomeIcon icon={faPlay} className="text-[10px] transform group-hover:translate-x-0.5 transition-transform" />
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<Skeleton className="w-[170px] h-[20px] rounded-xl" />
|
||||
)}
|
||||
<div className="flex flex-wrap gap-2 max-[600px]:gap-1.5">
|
||||
{animeInfo ? (
|
||||
tags.map(
|
||||
({ condition, icon, text }, index) =>
|
||||
condition && (
|
||||
<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]">
|
||||
{icon && <FontAwesomeIcon icon={icon} className="text-[12px] max-[600px]:text-[10px]" />}
|
||||
{text}
|
||||
</span>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<Skeleton className="w-[70px] h-[20px] rounded-xl" />
|
||||
)}
|
||||
) : <Skeleton className="w-48 h-8 rounded-lg" />}
|
||||
|
||||
<div className="flex flex-wrap gap-1.5 sm:gap-2">
|
||||
{tags.map((tag, idx) => tag.condition && (
|
||||
<InfoTag
|
||||
key={idx}
|
||||
icon={tag.icon}
|
||||
text={tag.text}
|
||||
className={tag.bgColor === "#ffffff" ? "bg-white/10" : ""}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{animeInfo?.animeInfo?.Overview && (
|
||||
<p className="text-[15px] text-gray-400 leading-relaxed max-[600px]:text-[13px] max-[600px]:leading-normal">
|
||||
{animeInfo?.animeInfo?.Overview.length > 270 ? (
|
||||
<div className="text-sm sm:text-base text-gray-300 leading-relaxed">
|
||||
{animeInfo.animeInfo.Overview.length > 270 ? (
|
||||
<>
|
||||
{isFullOverview
|
||||
? animeInfo?.animeInfo?.Overview
|
||||
: `${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 ? animeInfo.animeInfo.Overview : `${animeInfo.animeInfo.Overview.slice(0, 270)}...`}
|
||||
<button onClick={() => setIsFullOverview(!isFullOverview)} className="ml-2 text-white font-medium hover:underline text-xs sm:text-sm">
|
||||
{isFullOverview ? "Show Less" : "Read More"}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
animeInfo?.animeInfo?.Overview
|
||||
)}
|
||||
</p>
|
||||
) : animeInfo.animeInfo.Overview}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop-only Seasons Section */}
|
||||
{/* Seasons (Mobile only) */}
|
||||
{seasons?.length > 0 && (
|
||||
<div className="bg-[#141414] rounded-lg p-4 max-[1200px]:hidden">
|
||||
<h2 className="text-xl font-semibold 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">
|
||||
{seasons.map((season, index) => (
|
||||
<div className="hidden max-[1200px]:block bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
|
||||
<h2 className="text-lg font-bold mb-4 text-white">More Seasons</h2>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{seasons.map((season, idx) => (
|
||||
<Link
|
||||
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"
|
||||
: ""
|
||||
}`}
|
||||
key={idx}
|
||||
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"}`}
|
||||
>
|
||||
<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] 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>
|
||||
<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"}`} />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/80 to-transparent z-10" />
|
||||
<div className="absolute inset-0 flex items-center justify-center z-20 px-2">
|
||||
<p className="text-xs font-bold text-white text-center line-clamp-2">{season.season}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
@@ -594,48 +363,34 @@ export default function Watch() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column - Episodes and Related (Desktop Only) */}
|
||||
<div className="flex flex-col gap-6 h-full max-[1200px]:hidden">
|
||||
{/* Episodes Section */}
|
||||
<div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden">
|
||||
{/* Right Column (Desktop Only) */}
|
||||
<div className="flex flex-col gap-6 max-[1200px]:hidden">
|
||||
<div ref={episodesRef} className="episodes h-full bg-[#141414] rounded-xl overflow-hidden shadow-lg border border-white/5">
|
||||
{!episodes ? (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<BouncingLoader />
|
||||
</div>
|
||||
<div className="h-full flex items-center justify-center"><BouncingLoader /></div>
|
||||
) : (
|
||||
<Episodelist
|
||||
episodes={episodes}
|
||||
currentEpisode={episodeId}
|
||||
onEpisodeClick={(id) => setEpisodeId(id)}
|
||||
onEpisodeClick={setEpisodeId}
|
||||
totalEpisodes={totalEpisodes}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Related Anime Section */}
|
||||
{animeInfoLoading ? (
|
||||
<div className="mt-6">
|
||||
<SidecardLoader />
|
||||
</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"
|
||||
/>
|
||||
{!animeInfoLoading && animeInfo?.related_data?.length > 0 && (
|
||||
<div className="bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
|
||||
<h2 className="text-lg font-bold mb-4 text-white">Related Anime</h2>
|
||||
<Sidecard data={animeInfo.related_data} className="!mt-0" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile-only Related Section */}
|
||||
{/* Related Anime (Mobile only) */}
|
||||
{!animeInfoLoading && animeInfo?.related_data?.length > 0 && (
|
||||
<div className="hidden max-[1200px]:block 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 className="hidden max-[1200px]:block bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
|
||||
<h2 className="text-lg font-bold mb-4 text-white">Related Anime</h2>
|
||||
<Sidecard data={animeInfo.related_data} className="!mt-0" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user