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 }) {
const { language } = useLanguage();
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
src={`${item.poster}`}
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">
<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 "./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(
({
label,
@@ -21,57 +113,38 @@ const CategoryCard = React.memo(
cardStyle,
path,
limit,
gridClass,
}) => {
const { language } = useLanguage();
const navigate = useNavigate();
if (limit) {
data = data.slice(0, limit);
}
const displayData = limit ? data.slice(0, limit) : data;
const [itemsToRender, setItemsToRender] = useState({
firstRow: [],
remainingItems: [],
});
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 };
const [itemsToRender, setItemsToRender] = useState(() => {
if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
return { firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) };
}
return { firstRow: [], remainingItems: data.slice(0) };
}, [categoryPage, data]);
return { firstRow: [], remainingItems: displayData };
});
useEffect(() => {
const handleResize = () => {
setItemsToRender(getItemsToRender());
};
const newItems = getItemsToRender();
setItemsToRender((prev) => {
if (
JSON.stringify(prev.firstRow) !== JSON.stringify(newItems.firstRow) ||
JSON.stringify(prev.remainingItems) !==
JSON.stringify(newItems.remainingItems)
) {
return newItems;
if (categoryPage && window.innerWidth > 758 && displayData.length > 4) {
setItemsToRender({ firstRow: displayData.slice(0, 4), remainingItems: displayData.slice(4) });
} else {
setItemsToRender({ firstRow: [], remainingItems: displayData });
}
return prev;
});
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [getItemsToRender]);
handleResize(); // Initial call to sync state
return () => window.removeEventListener("resize", handleResize);
}, [categoryPage, displayData]);
return (
<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">
{label}
</h1>
@@ -89,216 +162,29 @@ const CategoryCard = React.memo(
)}
</div>
<>
{categoryPage && (
<div
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"
: ""
}`}
>
{categoryPage && itemsToRender.firstRow.length > 0 && (
<div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-2 max-[758px]:hidden">
{itemsToRender.firstRow.map((item, index) => (
<div
<AnimeCard
key={index}
className="flex flex-col 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"
/>
<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>
item={item}
navigate={navigate}
path={path}
language={language}
isFirstRow={true}
/>
))}
</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) => (
<div
<AnimeCard
key={index}
className="flex flex-col transition-transform duration-300 ease-in-out"
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"
/>
<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>
item={item}
navigate={navigate}
path={path}
language={language}
/>
))}
</div>
</>

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

@@ -18,26 +18,24 @@ const ContinueWatching = () => {
useEffect(() => {
const data = JSON.parse(localStorage.getItem("continueWatching") || "[]");
setWatchList(data);
setWatchList(data.reverse());
}, []);
const memoizedWatchList = useMemo(() => watchList, [watchList]);
const removeFromWatchList = (episodeId) => {
setWatchList((prevList) => {
const updatedList = prevList.filter(
(item) => item.episodeId !== episodeId
);
localStorage.setItem("continueWatching", JSON.stringify(updatedList));
localStorage.setItem("continueWatching", JSON.stringify([...updatedList].reverse()));
return updatedList;
});
};
if (memoizedWatchList.length === 0) return null;
if (watchList.length === 0) return null;
return (
<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">
<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">
@@ -74,7 +72,7 @@ const ContinueWatching = () => {
prevEl: ".continue-btn-prev",
}}
>
{memoizedWatchList.slice().reverse().map((item, index) => (
{watchList.map((item, index) => (
<SwiperSlide
key={index}
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
files shown by the video providers.
</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>

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

@@ -6,27 +6,24 @@ function Genre({ data }) {
const scroll = (direction) => {
if (scrollContainerRef.current) {
const scrollAmount = direction === 'left' ? -300 : 300;
scrollContainerRef.current.scrollBy({
left: scrollAmount,
left: direction === 'left' ? -300 : 300,
behavior: 'smooth'
});
}
};
// Instant scroll on mount without animation
useEffect(() => {
if (scrollContainerRef.current) {
// Direct manipulation of scrollLeft for instant scroll
scrollContainerRef.current.scrollLeft = 300;
}
}, []);
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]">
{/* Content first for proper stacking */}
<div
<div
ref={scrollContainerRef}
className="absolute inset-0 overflow-x-auto no-scrollbar scroll-smooth"
style={{
@@ -51,7 +48,7 @@ function Genre({ data }) {
{/* Left button and gradient */}
<div className="relative z-20 flex items-center">
<button
<button
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"
>
@@ -68,7 +65,7 @@ function Genre({ data }) {
{/* Right button and gradient */}
<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>
<button
<button
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"
>

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

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

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

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

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

@@ -17,7 +17,8 @@ const Spotlight = ({ spotlights }) => {
spaceBetween={0}
slidesPerView={1}
loop={true}
allowTouchMove={false}
allowTouchMove={true}
grabCursor={true}
navigation={{
nextEl: ".button-next",
prevEl: ".button-prev",
@@ -31,7 +32,7 @@ const Spotlight = ({ spotlights }) => {
disableOnInteraction: false,
}}
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={{
"--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
"--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 { 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 tabs = [
@@ -24,7 +24,7 @@ function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, classNam
key={tab.id}
onClick={() => setActiveTab(tab.id)}
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-[#ffffff80] hover:text-white"
}
@@ -55,8 +55,9 @@ function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, classNam
<CategoryCard
data={activeTabData.data}
path={activeTabData.path}
limit={12}
limit={limit}
showViewMore={false}
cardStyle="grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3"
/>
</div>
);

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

@@ -50,7 +50,7 @@ function Topten({ data, className }) {
};
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">
<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">

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

@@ -12,12 +12,12 @@ const Trending = ({ trending, className }) => {
const { language } = useLanguage();
return (
<div className={`bg-[#141414] rounded-lg p-4 ${className}`}>
<div className="flex items-center gap-2 mb-4">
<div className={`bg-[#141414] rounded-lg py-4 px-1.5 ${className}`}>
<div className="flex items-center gap-2 mb-2">
<FontAwesomeIcon icon={faFire} className="text-white/90" />
<h2 className="text-xl font-semibold text-white">Trending Now</h2>
</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.map((item, index) => (
<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 Spotlight from "@/src/components/spotlight/Spotlight.jsx";
import Trending from "@/src/components/trending/Trending.jsx";
@@ -19,6 +20,14 @@ import {
function Home() {
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 (error) return <Error />;
if (!homeInfo) return <Error error="404" />;
@@ -63,26 +72,28 @@ function Home() {
</div>
<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>
<CategoryCard
label="Latest Episode"
data={homeInfo.latest_episode}
className="mt-[60px]"
className="mt-8"
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" />
<TabbedAnimeSection
topAiring={homeInfo.top_airing}
mostFavorite={homeInfo.most_favorite}
latestCompleted={homeInfo.latest_completed}
className="mt-8"
className="mt-4"
limit={itemLimit}
/>
</div>
<div className="w-full mt-[60px]">
<div className="w-full mt-8">
<Trending trending={homeInfo.trending} />
<Topten data={homeInfo.topten} className="mt-12" />
<Topten data={homeInfo.topten} className="mt-8" />
</div>
</div>
</div>

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

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

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

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