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

Merge pull request #4 from tejaspanchall/dev

Browse Source 
fine tuned
This commit is contained in:
Tejas Panchal
2026-02-19 11:59:30 +05:30
committed by GitHub
parent 27aae07c6d 9f91a9ae75
commit 3c18c1190c
16 changed files with 693 additions and 1220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/banner/Banner.jsx
View File

@@ -14,13 +14,14 @@ import "./Banner.css";
function Banner({ item, index }) { function Banner({ item, index }) {
const { language } = useLanguage(); const { language } = useLanguage();
return ( return (
<section className="spotlight w-full h-full relative rounded-2xl overflow-hidden"> <section className="spotlight w-full h-full relative rounded-md overflow-hidden">
<img <img
src={`${item.poster}`} src={`${item.poster}`}
alt={getSafeTitle(item.title, language, item.japanese_title)} alt={getSafeTitle(item.title, language, item.japanese_title)}
className="absolute inset-0 object-cover w-full h-full rounded-2xl" className="absolute inset-0 object-cover w-full h-full rounded-md"
draggable="false"
/> />
<div className="spotlight-overlay absolute inset-0 z-[1] rounded-2xl"></div> <div className="spotlight-overlay absolute inset-0 z-[1] rounded-md"></div>
<div className="absolute flex flex-col left-0 bottom-[40px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[20px] max-[300px]:w-full"> <div className="absolute flex flex-col left-0 bottom-[40px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[20px] max-[300px]:w-full">
<p className="text-[#ffbade] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]"> <p className="text-[#ffbade] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">

364
src/components/categorycard/CategoryCard.jsx
View File

@@ -11,6 +11,98 @@ import { Link, useNavigate } from "react-router-dom";
import getSafeTitle from "@/src/utils/getSafetitle"; import getSafeTitle from "@/src/utils/getSafetitle";
import "./CategoryCard.css"; import "./CategoryCard.css";
const AnimeCard = ({ item, navigate, path, language, isFirstRow = false }) => {
return (
<div
className={`flex flex-col ${!isFirstRow ? 'transition-transform duration-300 ease-in-out' : 'category-card-container'}`}
style={{ height: "fit-content" }}
>
<div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden rounded-lg shadow-lg group">
<div
className="inline-block bg-gray-900 absolute left-0 top-0 w-full h-full group hover:cursor-pointer"
onClick={() =>
navigate(
`${path === "top-upcoming"
? `/${item.id}`
: `/watch/${item.id}`
}`
)
}
>
<img
src={`${item.poster}`}
alt={getSafeTitle(item.title, language, item.japanese_title)}
className="block w-full h-full object-cover transition-all duration-500 ease-in-out group-hover:scale-105 group-hover:blur-sm"
loading="lazy"
/>
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<FontAwesomeIcon
icon={faPlay}
className="text-[50px] text-white drop-shadow-lg max-[450px]:text-[36px]"
/>
</div>
</div>
</div>
{(item.tvInfo?.rating === "18+" || item?.adultContent === true) && (
<div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
18+
</div>
)}
<div className={`absolute bottom-0 left-0 right-0 ${isFirstRow ? 'p-3 pb-2' : 'p-2'} bg-gradient-to-t from-black/80 via-black/50 to-transparent`}>
<div className={`flex items-center justify-start w-full ${isFirstRow ? 'space-x-1.5' : 'space-x-1 max-[478px]:space-x-0.5'} z-[100] flex-wrap gap-y-1.5`}>
{item.tvInfo?.sub && (
<div className={`flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] ${isFirstRow ? 'px-2 py-1' : 'px-1.5 py-0.5 max-[478px]:px-1'} text-white`}>
<FontAwesomeIcon icon={faClosedCaptioning} className={isFirstRow ? 'text-[11px]' : 'text-[10px]'} />
<p className={`${isFirstRow ? 'text-[11px]' : 'text-[10px]'} font-medium`}>{item.tvInfo.sub}</p>
</div>
)}
{item.tvInfo?.dub && (
<div className={`flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] ${isFirstRow ? 'px-2 py-1' : 'px-1.5 py-0.5 max-[478px]:px-1'} text-white`}>
<FontAwesomeIcon icon={faMicrophone} className={isFirstRow ? 'text-[11px]' : 'text-[10px]'} />
<p className={`${isFirstRow ? 'text-[11px]' : 'text-[10px]'} font-medium`}>{item.tvInfo.dub}</p>
</div>
)}
{item.tvInfo?.showType && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px] max-[478px]:hidden'} font-medium`}>
{item.tvInfo.showType.split(" ").shift()}
</div>
)}
{item.releaseDate && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px]'} font-medium`}>
{item.releaseDate}
</div>
)}
{!item.tvInfo?.showType && item.type && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px]'} font-medium`}>
{item.type}
</div>
)}
{(item.tvInfo?.duration || item.duration) && (
<div className={`bg-[#2a2a2a] text-white rounded-[2px] ${isFirstRow ? 'px-2 py-1 text-[11px]' : 'px-1.5 py-0.5 text-[10px] max-[478px]:hidden'} font-medium`}>
{item.tvInfo?.duration === "m" || item.tvInfo?.duration === "?" || item.duration === "m" || item.duration === "?"
? "N/A"
: item.tvInfo?.duration || item.duration || "N/A"}
</div>
)}
</div>
</div>
</div>
<Link
to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
>
{getSafeTitle(item.title, language, item.japanese_title)}
</Link>
{isFirstRow && item.description && (
<div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-3 max-[1200px]:hidden">
{item.description}
</div>
)}
</div>
);
};
const CategoryCard = React.memo( const CategoryCard = React.memo(
({ ({
label, label,
@@ -21,57 +113,38 @@ const CategoryCard = React.memo(
cardStyle, cardStyle,
path, path,
limit, limit,
gridClass,
}) => { }) => {
const { language } = useLanguage(); const { language } = useLanguage();
const navigate = useNavigate(); const navigate = useNavigate();
if (limit) { const displayData = limit ? data.slice(0, limit) : data;
data = data.slice(0, limit);
}
const [itemsToRender, setItemsToRender] = useState({ const [itemsToRender, setItemsToRender] = useState(() => {
firstRow: [], if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
remainingItems: [], return { firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) };
});
const getItemsToRender = useCallback(() => {
if (categoryPage) {
const firstRow =
window.innerWidth > 758 && data.length > 4 ? data.slice(0, 4) : [];
const remainingItems =
window.innerWidth > 758 && data.length > 4
? data.slice(4)
: data.slice(0);
return { firstRow, remainingItems };
} }
return { firstRow: [], remainingItems: data.slice(0) }; return { firstRow: [], remainingItems: displayData };
}, [categoryPage, data]); });
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
setItemsToRender(getItemsToRender()); if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
}; setItemsToRender({ firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) });
const newItems = getItemsToRender(); } else {
setItemsToRender((prev) => { setItemsToRender({ firstRow: [], remainingItems: displayData });
if (
JSON.stringify(prev.firstRow) !== JSON.stringify(newItems.firstRow) ||
JSON.stringify(prev.remainingItems) !==
JSON.stringify(newItems.remainingItems)
) {
return newItems;
} }
return prev; };
});
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
return () => { handleResize(); // Initial call to sync state
window.removeEventListener("resize", handleResize);
}; return () => window.removeEventListener("resize", handleResize);
}, [getItemsToRender]); }, [categoryPage, displayData]);
return ( return (
<div className={`w-full ${className}`}> <div className={`w-full ${className}`}>
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-4">
<h1 className="font-semibold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide"> <h1 className="font-semibold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide">
{label} {label}
</h1> </h1>
@@ -89,216 +162,29 @@ const CategoryCard = React.memo(
)} )}
</div> </div>
<> <>
{categoryPage && ( {categoryPage && itemsToRender.firstRow.length > 0 && (
<div <div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-2 max-[758px]:hidden">
className={`grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out ${categoryPage && itemsToRender.firstRow.length > 0
? "mt-8 max-[758px]:hidden"
: ""
}`}
>
{itemsToRender.firstRow.map((item, index) => ( {itemsToRender.firstRow.map((item, index) => (
<div <AnimeCard
key={index} key={index}
className="flex flex-col category-card-container" item={item}
style={{ height: "fit-content" }} navigate={navigate}
> path={path}
<div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden rounded-lg shadow-lg group"> language={language}
<div isFirstRow={true}
className="inline-block bg-gray-900 absolute left-0 top-0 w-full h-full group hover:cursor-pointer" />
onClick={() =>
navigate(
`${path === "top-upcoming"
? `/${item.id}`
: `/watch/${item.id}`
}`
)
}
>
<img
src={`${item.poster}`}
alt={getSafeTitle(item.title, language, item.japanese_title)}
className="block w-full h-full object-cover transition-all duration-500 ease-in-out group-hover:scale-105 group-hover:blur-sm"
/>
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<FontAwesomeIcon
icon={faPlay}
className="text-[50px] text-white drop-shadow-lg max-[450px]:text-[36px]"
/>
</div>
</div>
</div>
{(item.tvInfo?.rating === "18+" ||
item?.adultContent === true) && (
<div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
18+
</div>
)}
<div className="absolute bottom-0 left-0 right-0 p-3 pb-2 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
<div className="flex items-center justify-start w-full space-x-1.5 z-[100] flex-wrap gap-y-1.5">
{item.tvInfo?.sub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
<FontAwesomeIcon
icon={faClosedCaptioning}
className="text-[11px]"
/>
<p className="text-[11px] font-medium">
{item.tvInfo.sub}
</p>
</div>
)}
{item.tvInfo?.dub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[11px]"
/>
<p className="text-[11px] font-medium">
{item.tvInfo.dub}
</p>
</div>
)}
{item.tvInfo?.showType && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.tvInfo.showType.split(" ").shift()}
</div>
)}
{item.releaseDate && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.releaseDate}
</div>
)}
{!item.tvInfo?.showType && item.type && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.type}
</div>
)}
{(item.tvInfo?.duration || item.duration) && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
{item.tvInfo?.duration === "m" ||
item.tvInfo?.duration === "?" ||
item.duration === "m" ||
item.duration === "?"
? "N/A"
: item.tvInfo?.duration || item.duration || "N/A"}
</div>
)}
</div>
</div>
</div>
<Link
to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
>
{getSafeTitle(item.title, language, item.japanese_title)}
</Link>
{item.description && (
<div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-3 max-[1200px]:hidden">
{item.description}
</div>
)}
</div>
))} ))}
</div> </div>
)} )}
<div className={`grid ${cardStyle || 'grid-cols-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}> <div className={`grid ${gridClass || cardStyle || 'grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-2 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
{itemsToRender.remainingItems.map((item, index) => ( {itemsToRender.remainingItems.map((item, index) => (
<div <AnimeCard
key={index} key={index}
className="flex flex-col transition-transform duration-300 ease-in-out" item={item}
style={{ height: "fit-content" }} navigate={navigate}
> path={path}
<div className="w-full h-auto pb-[140%] relative inline-block overflow-hidden rounded-lg shadow-lg group"> language={language}
<div />
className="inline-block bg-gray-900 absolute left-0 top-0 w-full h-full group hover:cursor-pointer"
onClick={() =>
navigate(
`${path === "top-upcoming"
? `/${item.id}`
: `/watch/${item.id}`
}`
)
}
>
<img
src={`${item.poster}`}
alt={getSafeTitle(item.title, language, item.japanese_title)}
className="block w-full h-full object-cover transition-all duration-500 ease-in-out group-hover:scale-105 group-hover:blur-sm"
/>
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<FontAwesomeIcon
icon={faPlay}
className="text-[50px] text-white drop-shadow-lg max-[450px]:text-[36px]"
/>
</div>
</div>
</div>
{(item.tvInfo?.rating === "18+" ||
item?.adultContent === true) && (
<div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
18+
</div>
)}
<div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
<div className="flex items-center justify-start w-full space-x-1 max-[478px]:space-x-0.5 z-[100] flex-wrap gap-y-1">
{item.tvInfo?.sub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5 max-[478px]:py-0.5 max-[478px]:px-1">
<FontAwesomeIcon
icon={faClosedCaptioning}
className="text-[10px]"
/>
<p className="text-[10px] font-medium">
{item.tvInfo.sub}
</p>
</div>
)}
{item.tvInfo?.dub && (
<div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5 max-[478px]:py-0.5 max-[478px]:px-1">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[10px]"
/>
<p className="text-[10px] font-medium">
{item.tvInfo.dub}
</p>
</div>
)}
{item.tvInfo?.showType && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
{item.tvInfo.showType.split(" ").shift()}
</div>
)}
{item.releaseDate && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
{item.releaseDate}
</div>
)}
{!item.tvInfo?.showType && item.type && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
{item.type}
</div>
)}
{(item.tvInfo?.duration || item.duration) && (
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
{item.tvInfo?.duration === "m" ||
item.tvInfo?.duration === "?" ||
item.duration === "m" ||
item.duration === "?"
? "N/A"
: item.tvInfo?.duration || item.duration || "N/A"}
</div>
)}
</div>
</div>
</div>
<Link
to={`/${item.id}`}
className="text-white font-semibold mt-3 item-title hover:text-white hover:cursor-pointer line-clamp-1"
>
{getSafeTitle(item.title, language, item.japanese_title)}
</Link>
</div>
))} ))}
</div> </div>
</> </>

12
src/components/continue/ContinueWatching.jsx
View File

@@ -18,26 +18,24 @@ const ContinueWatching = () => {
useEffect(() => { useEffect(() => {
const data = JSON.parse(localStorage.getItem("continueWatching") || "[]"); const data = JSON.parse(localStorage.getItem("continueWatching") || "[]");
setWatchList(data); setWatchList(data.reverse());
}, []); }, []);
const memoizedWatchList = useMemo(() => watchList, [watchList]);
const removeFromWatchList = (episodeId) => { const removeFromWatchList = (episodeId) => {
setWatchList((prevList) => { setWatchList((prevList) => {
const updatedList = prevList.filter( const updatedList = prevList.filter(
(item) => item.episodeId !== episodeId (item) => item.episodeId !== episodeId
); );
localStorage.setItem("continueWatching", JSON.stringify(updatedList)); localStorage.setItem("continueWatching", JSON.stringify([...updatedList].reverse()));
return updatedList; return updatedList;
}); });
}; };
if (memoizedWatchList.length === 0) return null; if (watchList.length === 0) return null;
return ( return (
<div className="mt-8"> <div className="mt-8">
<div className="flex items-center justify-between max-md:pl-4 mb-6"> <div className="flex items-center justify-between max-md:pl-4 mb-3">
<div className="flex items-center gap-x-3 justify-center"> <div className="flex items-center gap-x-3 justify-center">
<FaHistory className="text-gray-200 text-xl" /> <FaHistory className="text-gray-200 text-xl" />
<h1 className="text-gray-200 text-2xl font-bold tracking-tight max-[450px]:text-xl max-[450px]:mb-1 max-[350px]:text-lg"> <h1 className="text-gray-200 text-2xl font-bold tracking-tight max-[450px]:text-xl max-[450px]:mb-1 max-[350px]:text-lg">
@@ -74,7 +72,7 @@ const ContinueWatching = () => {
prevEl: ".continue-btn-prev", prevEl: ".continue-btn-prev",
}} }}
> >
{memoizedWatchList.slice().reverse().map((item, index) => ( {watchList.map((item, index) => (
<SwiperSlide <SwiperSlide
key={index} key={index}
className="text-center flex justify-center items-center" className="text-center flex justify-center items-center"

2
src/components/footer/Footer.jsx
View File

@@ -86,7 +86,7 @@ function Footer() {
hosts and providers. {website_name} is not responsible for any media hosts and providers. {website_name} is not responsible for any media
files shown by the video providers. files shown by the video providers.
</p> </p>
<p>© {website_name}. All rights reserved.</p> <p>© 2026 <a href="https://justanime.site" className="hover:text-white/60 underline transition-colors">{website_name}</a>. All rights reserved.</p>
</div> </div>
</div> </div>
</div> </div>

13
src/components/genres/Genre.jsx
View File

@@ -6,27 +6,24 @@ function Genre({ data }) {
const scroll = (direction) => { const scroll = (direction) => {
if (scrollContainerRef.current) { if (scrollContainerRef.current) {
const scrollAmount = direction === 'left' ? -300 : 300;
scrollContainerRef.current.scrollBy({ scrollContainerRef.current.scrollBy({
left: scrollAmount, left: direction === 'left' ? -300 : 300,
behavior: 'smooth' behavior: 'smooth'
}); });
} }
}; };
// Instant scroll on mount without animation
useEffect(() => { useEffect(() => {
if (scrollContainerRef.current) { if (scrollContainerRef.current) {
// Direct manipulation of scrollLeft for instant scroll
scrollContainerRef.current.scrollLeft = 300; scrollContainerRef.current.scrollLeft = 300;
} }
}, []); }, []);
return ( return (
<div className="relative pt-[20px] max-sm:pt-[15px]"> <div className="relative pt-2 max-sm:pt-[15px]">
<div className="relative flex items-center min-h-[32px] max-sm:min-h-[28px]"> <div className="relative flex items-center min-h-[32px] max-sm:min-h-[28px]">
{/* Content first for proper stacking */} {/* Content first for proper stacking */}
<div <div
ref={scrollContainerRef} ref={scrollContainerRef}
className="absolute inset-0 overflow-x-auto no-scrollbar scroll-smooth" className="absolute inset-0 overflow-x-auto no-scrollbar scroll-smooth"
style={{ style={{
@@ -51,7 +48,7 @@ function Genre({ data }) {
{/* Left button and gradient */} {/* Left button and gradient */}
<div className="relative z-20 flex items-center"> <div className="relative z-20 flex items-center">
<button <button
onClick={() => scroll('left')} onClick={() => scroll('left')}
className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95" className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95"
> >
@@ -68,7 +65,7 @@ function Genre({ data }) {
{/* Right button and gradient */} {/* Right button and gradient */}
<div className="relative z-20 flex items-center"> <div className="relative z-20 flex items-center">
<div className="h-8 max-sm:h-7 w-20 max-sm:w-12 bg-gradient-to-l from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent max-sm:from-[#0a0a0a]/60 max-sm:via-[#0a0a0a]/40 pointer-events-none"></div> <div className="h-8 max-sm:h-7 w-20 max-sm:w-12 bg-gradient-to-l from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent max-sm:from-[#0a0a0a]/60 max-sm:via-[#0a0a0a]/40 pointer-events-none"></div>
<button <button
onClick={() => scroll('right')} onClick={() => scroll('right')}
className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95" className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95"
> >

61
src/components/schedule/Schedule.jsx
View File

@@ -24,39 +24,28 @@ const Schedule = () => {
const month = currentDate.getMonth(); const month = currentDate.getMonth();
const monthName = currentDate.toLocaleString("default", { month: "short" }); const monthName = currentDate.toLocaleString("default", { month: "short" });
const daysInMonth = new Date(year, month + 1, 0).getDate(); const daysInMonth = new Date(year, month + 1, 0).getDate();
const GMTOffset = `GMT ${ const GMTOffset = `GMT ${new Date().getTimezoneOffset() <= 0 ? "+" : "-"}${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart(2, "0")}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, "0")}`;
new Date().getTimezoneOffset() > 0 ? "-" : "+"
}${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart(
2,
"0"
)}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, "0")}`;
const months = [];
useEffect(() => { useEffect(() => {
const monthsArr = [];
for (let day = 1; day <= daysInMonth; day++) { for (let day = 1; day <= daysInMonth; day++) {
const date = new Date(year, month, day); const date = new Date(year, month, day);
const dayname = date.toLocaleString("default", { weekday: "short" }); monthsArr.push({
const yearr = date.getFullYear(); day,
const monthh = String(date.getMonth() + 1).padStart(2, "0"); monthName: date.toLocaleString("default", { month: "short" }),
const dayy = String(date.getDate()).padStart(2, "0"); dayname: date.toLocaleString("default", { weekday: "short" }),
const fulldate = `${yearr}-${monthh}-${dayy}`; fulldate: date.toISOString().split('T')[0]
months.push({ day, monthName, dayname, fulldate }); });
} }
setDates(months); setDates(monthsArr);
const timer = setInterval(() => {
setCurrentTime(new Date()); const timer = setInterval(() => setCurrentTime(new Date()), 1000);
}, 1000);
return () => clearInterval(timer); return () => clearInterval(timer);
}, []); }, [year, month, daysInMonth]);
useEffect(() => { useEffect(() => {
const todayIndex = dates.findIndex( const today = new Date().toISOString().split('T')[0];
(date) => const todayIndex = dates.findIndex((date) => date.fulldate === today);
date.fulldate ===
`${currentDate.getFullYear()}-${String(
currentDate.getMonth() + 1
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(2, "0")}`
);
if (todayIndex !== -1) { if (todayIndex !== -1) {
setCurrentActiveIndex(todayIndex); setCurrentActiveIndex(todayIndex);
@@ -150,21 +139,19 @@ const Schedule = () => {
<div <div
ref={(el) => (cardRefs.current[index] = el)} ref={(el) => (cardRefs.current[index] = el)}
onClick={() => toggleActive(index)} onClick={() => toggleActive(index)}
className={`h-[60px] flex flex-col justify-center items-center w-full text-center rounded-lg cursor-pointer transition-all duration-200 ${ className={`h-[60px] flex flex-col justify-center items-center w-full text-center rounded-lg cursor-pointer transition-all duration-200 ${currentActiveIndex === index
currentActiveIndex === index ? "bg-white text-black"
? "bg-white text-black" : "bg-zinc-800 text-white hover:bg-zinc-700"
: "bg-zinc-800 text-white hover:bg-zinc-700" }`}
}`}
> >
<div className="text-[16px] font-bold max-[400px]:text-[14px] max-[350px]:text-[12px]"> <div className="text-[16px] font-bold max-[400px]:text-[14px] max-[350px]:text-[12px]">
{date.dayname} {date.dayname}
</div> </div>
<div <div
className={`text-[13px] max-[400px]:text-[11px] ${ className={`text-[13px] max-[400px]:text-[11px] ${currentActiveIndex === index
currentActiveIndex === index ? "text-zinc-800"
? "text-zinc-800" : "text-zinc-400"
: "text-zinc-400" } max-[350px]:text-[10px]`}
} max-[350px]:text-[10px]`}
> >
{date.monthName} {date.day} {date.monthName} {date.day}
</div> </div>
@@ -197,8 +184,8 @@ const Schedule = () => {
{(showAll {(showAll
? scheduleData ? scheduleData
: Array.isArray(scheduleData) : Array.isArray(scheduleData)
? scheduleData.slice(0, 7) ? scheduleData.slice(0, 7)
: [] : []
).map((item, idx) => ( ).map((item, idx) => (
<Link <Link
to={`/${item.id}`} to={`/${item.id}`}

34
src/components/splashscreen/SplashScreen.css
View File

@@ -19,20 +19,17 @@ html {
/* Container and background */ /* Container and background */
.splash-container { .splash-container {
min-height: 100vh; min-height: 100vh;
width: 100vw; width: 100%;
position: fixed; position: relative;
background: url('/splash.jpg'); background: url('/splash.jpg');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; background-size: cover;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
padding: 0 30px; padding: 0 30px;
overflow: auto;
margin: 0; margin: 0;
left: 0;
top: 0;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -73,7 +70,8 @@ html {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 140px; padding-top: 120px;
padding-bottom: 50px;
} }
/* Logo */ /* Logo */
@@ -82,7 +80,7 @@ html {
} }
.logo { .logo {
height: 75px; height: 65px;
width: auto; width: auto;
} }
@@ -96,12 +94,12 @@ html {
.search-input { .search-input {
width: 100%; width: 100%;
padding: 14px 48px 14px 20px; padding: 12px 42px 12px 18px;
background: rgba(17, 17, 17, 0.75); background: rgba(17, 17, 17, 0.75);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px; border-radius: 8px;
color: white; color: white;
font-size: 16px; font-size: 15px;
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.2s;
} }
@@ -136,7 +134,7 @@ html {
.enter-button { .enter-button {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
color: black; color: black;
padding: 14px 28px; padding: 12px 24px;
border-radius: 8px; border-radius: 8px;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
@@ -175,10 +173,10 @@ html {
} }
.faq-title { .faq-title {
font-size: 32px; font-size: 28px;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 30px;
color: white; color: white;
} }
@@ -197,14 +195,14 @@ html {
.faq-question { .faq-question {
width: 100%; width: 100%;
padding: 18px 24px; padding: 16px 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: none; background: none;
border: none; border: none;
color: white; color: white;
font-size: 17px; font-size: 16px;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -226,10 +224,10 @@ html {
} }
.faq-answer { .faq-answer {
padding: 0 24px 18px; padding: 0 20px 16px;
color: #999; color: #999;
line-height: 1.6; line-height: 1.6;
font-size: 15px; font-size: 14px;
} }
/* Responsive adjustments */ /* Responsive adjustments */
@@ -335,4 +333,4 @@ html {
font-size: 20px; font-size: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }

5
src/components/spotlight/Spotlight.jsx
View File

@@ -17,7 +17,8 @@ const Spotlight = ({ spotlights }) => {
spaceBetween={0} spaceBetween={0}
slidesPerView={1} slidesPerView={1}
loop={true} loop={true}
allowTouchMove={false} allowTouchMove={true}
grabCursor={true}
navigation={{ navigation={{
nextEl: ".button-next", nextEl: ".button-next",
prevEl: ".button-prev", prevEl: ".button-prev",
@@ -31,7 +32,7 @@ const Spotlight = ({ spotlights }) => {
disableOnInteraction: false, disableOnInteraction: false,
}} }}
modules={[Navigation, Autoplay, Pagination]} modules={[Navigation, Autoplay, Pagination]}
className="h-[450px] max-[1390px]:h-full rounded-2xl overflow-hidden relative" className="h-[450px] max-[1390px]:h-full rounded-md overflow-hidden relative"
style={{ style={{
"--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)", "--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
"--swiper-pagination-bullet-inactive-opacity": "1", "--swiper-pagination-bullet-inactive-opacity": "1",

7
src/components/tabbed-anime/TabbedAnimeSection.jsx
View File

@@ -4,7 +4,7 @@ import CategoryCard from "@/src/components/categorycard/CategoryCard.jsx";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { FaChevronRight } from "react-icons/fa"; import { FaChevronRight } from "react-icons/fa";
function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, className = "" }) { function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, className = "", limit = 10 }) {
const [activeTab, setActiveTab] = useState("airing"); const [activeTab, setActiveTab] = useState("airing");
const tabs = [ const tabs = [
@@ -24,7 +24,7 @@ function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, classNam
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={`relative px-6 py-4 text-[15px] font-medium transition-all duration-300 className={`relative px-6 py-4 text-[15px] font-medium transition-all duration-300
${activeTab === tab.id ${activeTab === tab.id
? "text-white after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-primary after:rounded-t-full" ? "text-white after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-primary after:rounded-t-full"
: "text-[#ffffff80] hover:text-white" : "text-[#ffffff80] hover:text-white"
} }
@@ -55,8 +55,9 @@ function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, classNam
<CategoryCard <CategoryCard
data={activeTabData.data} data={activeTabData.data}
path={activeTabData.path} path={activeTabData.path}
limit={12} limit={limit}
showViewMore={false} showViewMore={false}
cardStyle="grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3"
/> />
</div> </div>
); );

2
src/components/topten/Topten.jsx
View File

@@ -50,7 +50,7 @@ function Topten({ data, className }) {
}; };
return ( return (
<div className={`flex flex-col space-y-4 ${className}`}> <div className={`flex flex-col space-y-2 ${className}`}>
<div className="flex justify-between items-center max-[350px]:flex-col max-[350px]:gap-y-2 max-[350px]:items-start"> <div className="flex justify-between items-center max-[350px]:flex-col max-[350px]:gap-y-2 max-[350px]:items-start">
<h1 className="font-bold text-2xl text-white tracking-tight">Top 10</h1> <h1 className="font-bold text-2xl text-white tracking-tight">Top 10</h1>
<ul className="flex justify-between w-fit bg-[#1a1a1a] rounded-lg overflow-hidden shadow-lg"> <ul className="flex justify-between w-fit bg-[#1a1a1a] rounded-lg overflow-hidden shadow-lg">

6
src/components/trending/Trending.jsx
View File

@@ -12,12 +12,12 @@ const Trending = ({ trending, className }) => {
const { language } = useLanguage(); const { language } = useLanguage();
return ( return (
<div className={`bg-[#141414] rounded-lg p-4 ${className}`}> <div className={`bg-[#141414] rounded-lg py-4 px-1.5 ${className}`}>
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-2">
<FontAwesomeIcon icon={faFire} className="text-white/90" /> <FontAwesomeIcon icon={faFire} className="text-white/90" />
<h2 className="text-xl font-semibold text-white">Trending Now</h2> <h2 className="text-xl font-semibold text-white">Trending Now</h2>
</div> </div>
<div className="flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded"> <div className={`flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded`}>
{trending && {trending &&
trending.map((item, index) => ( trending.map((item, index) => (
<div key={index} className="group"> <div key={index} className="group">

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);

23
src/pages/Home/Home.jsx
View File

@@ -1,3 +1,4 @@
import { useState, useEffect } from "react";
import website_name from "@/src/config/website.js"; import website_name from "@/src/config/website.js";
import Spotlight from "@/src/components/spotlight/Spotlight.jsx"; import Spotlight from "@/src/components/spotlight/Spotlight.jsx";
import Trending from "@/src/components/trending/Trending.jsx"; import Trending from "@/src/components/trending/Trending.jsx";
@@ -19,6 +20,14 @@ import {
function Home() { function Home() {
const { homeInfo, homeInfoLoading, error } = useHomeInfo(); const { homeInfo, homeInfoLoading, error } = useHomeInfo();
const [itemLimit, setItemLimit] = useState(() => (window.innerWidth > 1400 ? 10 : 12));
useEffect(() => {
const handleResize = () => setItemLimit(window.innerWidth > 1400 ? 10 : 12);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
if (homeInfoLoading) return <Loader type="home" />; if (homeInfoLoading) return <Loader type="home" />;
if (error) return <Error />; if (error) return <Error />;
if (!homeInfo) return <Error error="404" />; if (!homeInfo) return <Error error="404" />;
@@ -63,26 +72,28 @@ function Home() {
</div> </div>
<ContinueWatching /> <ContinueWatching />
<div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col"> <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-4 max-[1200px]:flex flex-col">
<div> <div>
<CategoryCard <CategoryCard
label="Latest Episode" label="Latest Episode"
data={homeInfo.latest_episode} data={homeInfo.latest_episode}
className="mt-[60px]" className="mt-8"
path="recently-updated" path="recently-updated"
limit={12} limit={itemLimit}
cardStyle="grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3"
/> />
<Schedule className="mt-8" /> <Schedule className="mt-8" />
<TabbedAnimeSection <TabbedAnimeSection
topAiring={homeInfo.top_airing} topAiring={homeInfo.top_airing}
mostFavorite={homeInfo.most_favorite} mostFavorite={homeInfo.most_favorite}
latestCompleted={homeInfo.latest_completed} latestCompleted={homeInfo.latest_completed}
className="mt-8" className="mt-4"
limit={itemLimit}
/> />
</div> </div>
<div className="w-full mt-[60px]"> <div className="w-full mt-8">
<Trending trending={homeInfo.trending} /> <Trending trending={homeInfo.trending} />
<Topten data={homeInfo.topten} className="mt-12" /> <Topten data={homeInfo.topten} className="mt-8" />
</div> </div>
</div> </div>
</div> </div>

697
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,535 +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="relative w-full overflow-hidden mt-[74px] max-md:mt-[60px]">
{/* Main Content */} <div className="min-h-screen bg-[#0a0a0a] text-white">
<div className="relative z-10 container mx-auto py-4 sm:py-6 lg:py-12"> <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">
{/* Mobile Layout */} {/* Mobile Layout */}
<div className="block md:hidden"> <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 py-8 sm:py-12"> {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 py-12"> <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 py-12"> <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"
/> />
</div> </div>
)} )}
</div>
</div> </div>
</> </>
); );

2
src/pages/search/Search.jsx
View File

@@ -43,7 +43,7 @@ function Search() {
setSearchParams({ keyword, page: newPage }); setSearchParams({ keyword, page: newPage });
}; };
const searchGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2"; const searchGridClass = "grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:gap-x-2";
const { title, description, keywords } = generateSearchMeta(keyword); const { title, description, keywords } = generateSearchMeta(keyword);
const canonicalUrl = generateCanonicalUrl(`/search?keyword=${keyword || ''}${page > 1 ? `&page=${page}` : ''}`); const canonicalUrl = generateCanonicalUrl(`/search?keyword=${keyword || ''}${page > 1 ? `&page=${page}` : ''}`);

660
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 playerRef = 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 (playerRef.current && episodesRef.current) {
episodesRef.current.style.height = 'auto';
episodesRef.current.style.maxHeight = `${playerRef.current.offsetHeight}px`;
}
} else if (episodesRef.current) {
episodesRef.current.style.height = 'auto';
episodesRef.current.style.maxHeight = 'none';
} }
}, [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 (playerRef.current) resizeObserver.observe(playerRef.current);
episodesRef.current.style.height = `${totalHeight}px`;
}
} 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-16 pb-6 w-full max-[1200px]:pt-12"> <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] items-start gap-6 w-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 ref={playerRef} 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>
<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,35 @@ 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 flex flex-col 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="flex-1 flex items-center justify-center min-h-[400px]">
<BouncingLoader /> <BouncingLoader /></div>
</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 && (
{animeInfo && animeInfo.related_data ? ( <div className="bg-[#141414] rounded-xl p-4 shadow-lg border border-white/5">
<div className="bg-[#141414] rounded-lg p-4"> <h2 className="text-lg font-bold mb-4 text-white">Related Anime</h2>
<h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2> <Sidecard data={animeInfo.related_data} className="!mt-0" />
<Sidecard
data={animeInfo.related_data}
className="!mt-0"
/>
</div>
) : (
<div className="mt-6">
<SidecardLoader />
</div> </div>
)} )}
</div> </div>
{/* Mobile-only Related Section */} {/* Related Anime (Mobile only) */}
{animeInfo && animeInfo.related_data && ( {!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>