mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 22:01:45 +00:00
Landing page
This commit is contained in:
Tejas Panchal
82
src/pages/Home/Home.jsx
Normal file
82
src/pages/Home/Home.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import website_name from "@/src/config/website.js";
|
||||
import Spotlight from "@/src/components/spotlight/Spotlight.jsx";
|
||||
import Trending from "@/src/components/trending/Trending.jsx";
|
||||
import Cart from "@/src/components/cart/Cart.jsx";
|
||||
import CategoryCard from "@/src/components/categorycard/CategoryCard.jsx";
|
||||
import Genre from "@/src/components/genres/Genre.jsx";
|
||||
import Topten from "@/src/components/topten/Topten.jsx";
|
||||
import Loader from "@/src/components/Loader/Loader.jsx";
|
||||
import Error from "@/src/components/error/Error.jsx";
|
||||
import { useHomeInfo } from "@/src/context/HomeInfoContext.jsx";
|
||||
import Schedule from "@/src/components/schedule/Schedule";
|
||||
import ContinueWatching from "@/src/components/continue/ContinueWatching";
|
||||
|
||||
function Home() {
|
||||
const { homeInfo, homeInfoLoading, error } = useHomeInfo();
|
||||
if (homeInfoLoading) return <Loader type="home" />;
|
||||
if (error) return <Error />;
|
||||
if (!homeInfo) return <Error error="404" />;
|
||||
return (
|
||||
<>
|
||||
<div className="px-4 w-full max-[1200px]:px-0">
|
||||
<Spotlight spotlights={homeInfo.spotlights} />
|
||||
<ContinueWatching />
|
||||
<Trending trending={homeInfo.trending} />
|
||||
<div className="mt-10 flex gap-6 max-[1200px]:px-4 max-[1200px]:grid max-[1200px]:grid-cols-2 max-[1200px]:mt-12 max-[1200px]:gap-y-10 max-[680px]:grid-cols-1">
|
||||
<Cart
|
||||
label="Top Airing"
|
||||
data={homeInfo.top_airing}
|
||||
path="top-airing"
|
||||
/>
|
||||
<Cart
|
||||
label="Most Popular"
|
||||
data={homeInfo.most_popular}
|
||||
path="most-popular"
|
||||
/>
|
||||
<Cart
|
||||
label="Most Favorite"
|
||||
data={homeInfo.most_favorite}
|
||||
path="most-favorite"
|
||||
/>
|
||||
<Cart
|
||||
label="Latest Completed"
|
||||
data={homeInfo.latest_completed}
|
||||
path="completed"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-4">
|
||||
<div>
|
||||
<CategoryCard
|
||||
label="Latest Episode"
|
||||
data={homeInfo.latest_episode}
|
||||
className={"mt-[60px]"}
|
||||
path="recently-updated"
|
||||
limit={12}
|
||||
/>
|
||||
<CategoryCard
|
||||
label={`New On ${website_name}`}
|
||||
data={homeInfo.recently_added}
|
||||
className={"mt-[60px]"}
|
||||
path="recently-added"
|
||||
limit={12}
|
||||
/>
|
||||
<Schedule />
|
||||
<CategoryCard
|
||||
label="Top Upcoming"
|
||||
data={homeInfo.top_upcoming}
|
||||
className={"mt-[30px]"}
|
||||
path="top-upcoming"
|
||||
limit={12}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full mt-[60px]">
|
||||
<Genre data={homeInfo.genres} />
|
||||
<Topten data={homeInfo.topten} className={"mt-12"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
118
src/pages/a2z/AtoZ.jsx
Normal file
118
src/pages/a2z/AtoZ.jsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams, Link } from "react-router-dom";
|
||||
import getCategoryInfo from "@/src/utils/getCategoryInfo.utils";
|
||||
import CategoryCard from "@/src/components/categorycard/CategoryCard";
|
||||
import Loader from "@/src/components/Loader/Loader";
|
||||
import Error from "@/src/components/error/Error";
|
||||
import PageSlider from "@/src/components/pageslider/PageSlider";
|
||||
|
||||
function AtoZ({ path }) {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [categoryInfo, setCategoryInfo] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
const page = parseInt(searchParams.get("page")) || 1;
|
||||
const currentLetter = path.split("/").pop() || "";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAtoZInfo = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getCategoryInfo(path, page);
|
||||
setCategoryInfo(data.data);
|
||||
setTotalPages(data.totalPages);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
setLoading(false);
|
||||
console.error("Error fetching category info:", err);
|
||||
}
|
||||
};
|
||||
fetchAtoZInfo();
|
||||
window.scrollTo(0, 0);
|
||||
}, [path, page]);
|
||||
|
||||
if (loading) return <Loader type="AtoZ" />;
|
||||
if (error) {
|
||||
return <Error />;
|
||||
}
|
||||
if (!categoryInfo) {
|
||||
return null;
|
||||
}
|
||||
const handlePageChange = (newPage) => {
|
||||
setSearchParams({ page: newPage });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
|
||||
<ul className="flex gap-x-2 mt-[50px] items-center w-fit max-[1200px]:hidden">
|
||||
<li className="flex gap-x-3 items-center">
|
||||
<Link to="/home" className="text-white hover:text-[#FFBADE] text-[17px]">
|
||||
Home
|
||||
</Link>
|
||||
<div className="dot mt-[1px] bg-white"></div>
|
||||
</li>
|
||||
<li className="font-light">A-Z List</li>
|
||||
</ul>
|
||||
<div className="flex flex-col gap-y-5 mt-6">
|
||||
<h1 className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px]">
|
||||
Sort By Letters
|
||||
</h1>
|
||||
<div className="flex gap-x-[7px] flex-wrap justify-start gap-y-2 max-md:justify-start">
|
||||
{[
|
||||
"All",
|
||||
"#",
|
||||
"0-9",
|
||||
...Array.from({ length: 26 }, (_, i) =>
|
||||
String.fromCharCode(65 + i)
|
||||
),
|
||||
].map((item, index) => {
|
||||
const linkPath =
|
||||
item.toLowerCase() === "all"
|
||||
? ""
|
||||
: item === "#"
|
||||
? "other"
|
||||
: item;
|
||||
const isActive =
|
||||
(currentLetter === "az-list" && item.toLowerCase() === "all") ||
|
||||
(currentLetter === "other" && item === "#") ||
|
||||
currentLetter === item.toLowerCase();
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/az-list/${linkPath}`}
|
||||
key={index}
|
||||
className={`text-md bg-[#373646] py-1 px-4 rounded-md font-bold hover:text-black hover:bg-[#FFBADE] hover:cursor-pointer transition-all ease-out ${
|
||||
isActive ? "text-black bg-[#FFBADE]" : ""
|
||||
}`}
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-col gap-y-8">
|
||||
<div>
|
||||
{categoryInfo && categoryInfo.length > 0 && (
|
||||
<CategoryCard
|
||||
data={categoryInfo}
|
||||
limit={categoryInfo.length}
|
||||
showViewMore={false}
|
||||
className="mt-0"
|
||||
cardStyle="max-[1400px]:h-[35vw]"
|
||||
/>
|
||||
)}
|
||||
<PageSlider
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
handlePageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AtoZ;
|
||||
416
src/pages/animeInfo/AnimeInfo.jsx
Normal file
416
src/pages/animeInfo/AnimeInfo.jsx
Normal file
@@ -0,0 +1,416 @@
|
||||
import getAnimeInfo from "@/src/utils/getAnimeInfo.utils";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faPlay,
|
||||
faClosedCaptioning,
|
||||
faMicrophone,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { useEffect, useState } 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";
|
||||
|
||||
function InfoItem({ label, value, isProducer = true }) {
|
||||
return (
|
||||
value && (
|
||||
<div className="text-[14px] font-bold">
|
||||
{`${label}: `}
|
||||
<span className="font-light">
|
||||
{Array.isArray(value) ? (
|
||||
value.map((item, index) =>
|
||||
isProducer ? (
|
||||
<Link
|
||||
to={`/producer/${item
|
||||
.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "")
|
||||
.split(" ")
|
||||
.join("-")
|
||||
.replace(/-+/g, "-")}`}
|
||||
key={index}
|
||||
className="cursor-pointer hover:text-[#ffbade]"
|
||||
>
|
||||
{item}
|
||||
{index < value.length - 1 && ", "}
|
||||
</Link>
|
||||
) : (
|
||||
<span key={index} className="cursor-pointer">
|
||||
{item}
|
||||
</span>
|
||||
)
|
||||
)
|
||||
) : isProducer ? (
|
||||
<Link
|
||||
to={`/producer/${value
|
||||
.replace(/[&'"^%$#@!()+=<>:;,.?/\\|{}[\]`~*_]/g, "")
|
||||
.split(" ")
|
||||
.join("-")
|
||||
.replace(/-+/g, "-")}`}
|
||||
className="cursor-pointer hover:text-[#ffbade]"
|
||||
>
|
||||
{value}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="cursor-pointer">{value}</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function Tag({ bgColor, index, icon, text }) {
|
||||
return (
|
||||
<div
|
||||
className={`flex space-x-1 justify-center items-center px-[4px] py-[1px] text-black font-bold 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>
|
||||
);
|
||||
}
|
||||
|
||||
function AnimeInfo({ random = false }) {
|
||||
const { language } = useLanguage();
|
||||
const { id: paramId } = useParams();
|
||||
const id = random ? null : paramId;
|
||||
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" });
|
||||
}
|
||||
}, [id, random]);
|
||||
useEffect(() => {
|
||||
if (animeInfo && location.pathname === `/${animeInfo.id}`) {
|
||||
document.title = `Watch ${animeInfo.title} English Sub/Dub online Free on ${website_name}`;
|
||||
}
|
||||
return () => {
|
||||
document.title = `${website_name} | Free anime streaming platform`;
|
||||
};
|
||||
}, [animeInfo]);
|
||||
if (loading) return <Loader type="animeInfo" />;
|
||||
if (error) {
|
||||
return <Error />;
|
||||
}
|
||||
if (!animeInfo) {
|
||||
navigate("/404-not-found-page");
|
||||
return undefined;
|
||||
}
|
||||
const { title, japanese_title, poster, animeInfo: info } = animeInfo;
|
||||
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 (
|
||||
<>
|
||||
<div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden text-white mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]">
|
||||
<img
|
||||
src={`https://wsrv.nl/?url=${poster}`}
|
||||
alt={`${title} Poster`}
|
||||
className="absolute inset-0 object-cover w-full h-full filter grayscale blur-lg z-[-900]"
|
||||
/>
|
||||
<div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center">
|
||||
<div className="relative w-[180px] h-[270px] max-[575px]:w-[140px] max-[575px]:h-[200px] flex-shrink-0">
|
||||
<img
|
||||
src={`https://wsrv.nl/?url=${poster}`}
|
||||
alt={`${title} Poster`}
|
||||
className="w-full h-full object-cover object-center flex-shrink-0"
|
||||
/>
|
||||
{animeInfo.adultContent && (
|
||||
<div className="text-white px-2 rounded-md bg-[#FF5700] absolute top-2 left-2 flex items-center justify-center text-[14px] font-bold">
|
||||
18+
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col ml-4 gap-y-5 max-[575px]:items-center max-[575px]:justify-center max-[575px]:mt-6 max-[1200px]:ml-0">
|
||||
<ul className="flex gap-x-2 items-center w-fit max-[1200px]:hidden">
|
||||
{[
|
||||
["Home", "home"],
|
||||
[info.tvInfo?.showType, info.tvInfo?.showType],
|
||||
].map(([text, link], index) => (
|
||||
<li key={index} className="flex gap-x-3 items-center">
|
||||
<Link
|
||||
to={`/${link}`}
|
||||
className="text-white hover:text-[#FFBADE] text-[15px] font-semibold"
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
<div className="dot mt-[1px] bg-white"></div>
|
||||
</li>
|
||||
))}
|
||||
<p className="font-light text-[15px] text-gray-300 line-clamp-1 max-[575px]:leading-5">
|
||||
{language === "EN" ? title : japanese_title}
|
||||
</p>
|
||||
</ul>
|
||||
<h1 className="text-4xl font-semibold max-[1200px]:text-3xl max-[575px]:text-2xl max-[575px]:text-center max-[575px]:leading-7">
|
||||
{language === "EN" ? title : japanese_title}
|
||||
</h1>
|
||||
<div className="flex flex-wrap w-fit gap-x-[2px] mt-3 max-[575px]:mx-auto max-[575px]:mt-0 gap-y-[3px] max-[320px]:justify-center">
|
||||
{tags.map(
|
||||
({ condition, icon, bgColor, text }, index) =>
|
||||
condition && (
|
||||
<Tag
|
||||
key={index}
|
||||
index={index}
|
||||
bgColor={bgColor}
|
||||
icon={icon}
|
||||
text={text}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div className="flex w-fit items-center ml-1">
|
||||
{[info.tvInfo?.showType, info.tvInfo?.duration].map(
|
||||
(item, index) =>
|
||||
item && (
|
||||
<div
|
||||
key={index}
|
||||
className="px-1 h-fit flex items-center gap-x-2 w-fit"
|
||||
>
|
||||
<div className="dot mt-[2px]"></div>
|
||||
<p className="text-[14px]">{item}</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
|
||||
<Link
|
||||
to={`/watch/${animeInfo.id}`}
|
||||
className="flex gap-x-2 px-6 py-2 bg-[#FFBADE] w-fit text-black items-center rounded-3xl mt-5"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlay}
|
||||
className="text-[14px] mt-[1px]"
|
||||
/>
|
||||
<p className="text-lg font-medium">Watch Now</p>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="flex gap-x-2 px-6 py-2 bg-[#FFBADE] w-fit text-black items-center rounded-3xl mt-5">
|
||||
<p className="text-lg font-medium">Not released</p>
|
||||
</div>
|
||||
)}
|
||||
{info?.Overview && (
|
||||
<div className="text-[14px] mt-2 max-[575px]:hidden">
|
||||
{info.Overview.length > 270 ? (
|
||||
<>
|
||||
{isFull
|
||||
? info.Overview
|
||||
: `${info.Overview.slice(0, 270)}...`}
|
||||
<span
|
||||
className="text-[13px] font-bold hover:cursor-pointer"
|
||||
onClick={() => setIsFull(!isFull)}
|
||||
>
|
||||
{isFull ? "- Less" : "+ More"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
info.Overview
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-[14px] max-[575px]:hidden">
|
||||
{`${website_name} is the best site to watch `}
|
||||
<span className="font-bold">{title}</span>
|
||||
{` SUB online, or you can even watch `}
|
||||
<span className="font-bold">{title}</span>
|
||||
{` DUB in HD quality.`}
|
||||
</p>
|
||||
<div className="flex gap-x-4 items-center mt-4 max-[575px]:w-full max-[575px]:justify-center max-[320px]:hidden">
|
||||
<img
|
||||
src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
|
||||
alt="Share Anime"
|
||||
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px]"
|
||||
/>
|
||||
<div className="flex flex-col w-fit">
|
||||
<p className="text-[15px] font-bold text-[#FFBADE]">
|
||||
Share Anime
|
||||
</p>
|
||||
<p className="text-[16px] text-white">to your friends</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#4c4b57c3] flex items-center px-8 max-[1200px]:py-10 max-[1200px]:bg-[#363544e0] max-[575px]:p-4">
|
||||
<div className="w-full flex flex-col h-fit gap-y-3">
|
||||
{info?.Overview && (
|
||||
<div className="custom-xl:hidden max-h-[150px] overflow-hidden">
|
||||
<p className="text-[13px] font-bold">Overview:</p>
|
||||
<div className="max-h-[110px] mt-2 overflow-y-scroll">
|
||||
<p className="text-[14px] font-light">{info.Overview}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{[
|
||||
{ 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(({ label, value }, index) => (
|
||||
<InfoItem
|
||||
key={index}
|
||||
label={label}
|
||||
value={value}
|
||||
isProducer={false}
|
||||
/>
|
||||
))}
|
||||
{info?.Genres && (
|
||||
<div className="flex gap-x-2 py-2 custom-xl:border-t custom-xl:border-b custom-xl:border-white/20 max-[1200px]:border-none">
|
||||
<p>Genres:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{info.Genres.map((genre, index) => (
|
||||
<Link
|
||||
to={`/genre/${genre.split(" ").join("-")}`}
|
||||
key={index}
|
||||
className="text-[14px] font-semibold px-2 py-[1px] border border-gray-400 rounded-2xl hover:text-[#ffbade]"
|
||||
>
|
||||
{genre}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{[
|
||||
{ label: "Studios", value: info?.Studios },
|
||||
{ label: "Producers", value: info?.Producers },
|
||||
].map(({ label, value }, index) => (
|
||||
<InfoItem key={index} label={label} value={value} />
|
||||
))}
|
||||
<p className="text-[14px] mt-4 custom-xl:hidden">
|
||||
{`${website_name} is the best site to watch `}
|
||||
<span className="font-bold">{title}</span>
|
||||
{` SUB online, or you can even watch `}
|
||||
<span className="font-bold">{title}</span>
|
||||
{` DUB in HD quality.`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col">
|
||||
<div>
|
||||
{seasons?.length > 0 && (
|
||||
<div className="flex flex-col gap-y-7 mt-8">
|
||||
<h1 className="w-fit text-2xl text-[#ffbade] max-[478px]:text-[18px] font-bold">
|
||||
More Seasons
|
||||
</h1>
|
||||
<div className="flex flex-wrap gap-4 max-[575px]:grid max-[575px]:grid-cols-3 max-[575px]:gap-3 max-[480px]:grid-cols-2">
|
||||
{seasons.map((season, index) => (
|
||||
<Link
|
||||
to={`/${season.id}`}
|
||||
key={index}
|
||||
className={`relative w-[20%] h-[60px] rounded-lg overflow-hidden cursor-pointer group ${
|
||||
currentId === String(season.id)
|
||||
? "border border-[#ffbade]"
|
||||
: ""
|
||||
} max-[1200px]:w-[140px] max-[575px]:w-full`}
|
||||
>
|
||||
<p
|
||||
className={`text-[13px] text-center font-bold absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full px-2 z-30 line-clamp-2 group-hover:text-[#ffbade] ${
|
||||
currentId === String(season.id)
|
||||
? "text-[#ffbade]"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{season.season}
|
||||
</p>
|
||||
<div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div>
|
||||
<img
|
||||
src={season.season_poster}
|
||||
alt=""
|
||||
className="w-full h-full object-cover blur-[3px] opacity-50"
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{animeInfo?.charactersVoiceActors.length > 0 && (
|
||||
<Voiceactor animeInfo={animeInfo} />
|
||||
)}
|
||||
{animeInfo.recommended_data.length > 0 && (
|
||||
<CategoryCard
|
||||
label="Recommended for you"
|
||||
data={animeInfo.recommended_data}
|
||||
limit={animeInfo.recommended_data.length}
|
||||
showViewMore={false}
|
||||
className={"mt-8"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{animeInfo.related_data.length > 0 && (
|
||||
<Sidecard
|
||||
label="Related Anime"
|
||||
data={animeInfo.related_data}
|
||||
className="mt-8"
|
||||
/>
|
||||
)}
|
||||
{homeInfo && homeInfo.most_popular && (
|
||||
<Sidecard
|
||||
label="Most Popular"
|
||||
data={homeInfo.most_popular.slice(0, 10)}
|
||||
className="mt-[40px]"
|
||||
limit={10}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnimeInfo;
|
||||
111
src/pages/category/Category.jsx
Normal file
111
src/pages/category/Category.jsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import getCategoryInfo from "@/src/utils/getCategoryInfo.utils";
|
||||
import CategoryCard from "@/src/components/categorycard/CategoryCard";
|
||||
import Genre from "@/src/components/genres/Genre";
|
||||
import Topten from "@/src/components/topten/Topten";
|
||||
import Loader from "@/src/components/Loader/Loader";
|
||||
import Error from "@/src/components/error/Error";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useHomeInfo } from "@/src/context/HomeInfoContext";
|
||||
import PageSlider from "@/src/components/pageslider/PageSlider";
|
||||
import SidecardLoader from "@/src/components/Loader/Sidecard.loader";
|
||||
|
||||
function Category({ path, label }) {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [categoryInfo, setCategoryInfo] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
const page = parseInt(searchParams.get("page")) || 1;
|
||||
const { homeInfo, homeInfoLoading } = useHomeInfo();
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
const fetchCategoryInfo = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getCategoryInfo(path, page);
|
||||
setCategoryInfo(data.data);
|
||||
setTotalPages(data.totalPages);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
console.error("Error fetching category info:", err);
|
||||
}
|
||||
};
|
||||
fetchCategoryInfo();
|
||||
window.scrollTo(0, 0);
|
||||
}, [path, page]);
|
||||
if (loading) return <Loader type="category" />;
|
||||
if (error) {
|
||||
navigate("/error-page");
|
||||
return <Error />;
|
||||
}
|
||||
if (!categoryInfo) {
|
||||
navigate("/404-not-found-page");
|
||||
return null;
|
||||
}
|
||||
const handlePageChange = (newPage) => {
|
||||
setSearchParams({ page: newPage });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
|
||||
<div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
|
||||
<img
|
||||
src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
|
||||
alt="Share Anime"
|
||||
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
|
||||
/>
|
||||
<div className="flex flex-col w-fit">
|
||||
<p className="text-[15px] font-bold text-[#FFBADE]">Share Anime</p>
|
||||
<p className="text-[16px] text-white">to your friends</p>
|
||||
</div>
|
||||
</div>
|
||||
{categoryInfo ? (
|
||||
<div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
|
||||
{page > totalPages ? (
|
||||
<p className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6">
|
||||
You came a long way, go back <br className="max-[300px]:hidden" />
|
||||
nothing is here
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
{categoryInfo && categoryInfo.length > 0 && (
|
||||
<CategoryCard
|
||||
label={label.split("/").pop()}
|
||||
data={categoryInfo}
|
||||
showViewMore={false}
|
||||
className={"mt-0"}
|
||||
categoryPage={true}
|
||||
path={path}
|
||||
/>
|
||||
)}
|
||||
<PageSlider
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
handlePageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full flex flex-col gap-y-10">
|
||||
{homeInfoLoading ? (
|
||||
<SidecardLoader />
|
||||
) : (
|
||||
<>
|
||||
{homeInfo && homeInfo.topten && (
|
||||
<Topten data={homeInfo.topten} className="mt-0" />
|
||||
)}
|
||||
{homeInfo?.genres && <Genre data={homeInfo.genres} />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Error />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Category;
|
||||
74
src/pages/search/Search.jsx
Normal file
74
src/pages/search/Search.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import CategoryCard from '@/src/components/categorycard/CategoryCard';
|
||||
import Genre from '@/src/components/genres/Genre';
|
||||
import CategoryCardLoader from '@/src/components/Loader/CategoryCard.loader';
|
||||
import SidecardLoader from '@/src/components/Loader/Sidecard.loader';
|
||||
import PageSlider from '@/src/components/pageslider/PageSlider';
|
||||
import Sidecard from '@/src/components/sidecard/Sidecard';
|
||||
import { useHomeInfo } from '@/src/context/HomeInfoContext';
|
||||
import getSearch from '@/src/utils/getSearch.utils';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
|
||||
function Search() {
|
||||
const { homeInfo, homeInfoLoading } = useHomeInfo();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const keyword = searchParams.get("keyword");
|
||||
const page = parseInt(searchParams.get("page"), 10) || 1;
|
||||
const [searchData, setSearchData] = useState(null);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSearch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getSearch(keyword,page);
|
||||
setSearchData(data.data);
|
||||
setTotalPages(data.totalPage);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching anime info:", err);
|
||||
setError(err);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchSearch();
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}, [keyword, page]);
|
||||
|
||||
const handlePageChange = (newPage) => {
|
||||
setSearchParams({ keyword, page: newPage });
|
||||
};
|
||||
return (
|
||||
<div className='w-full px-4 mt-[128px] grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10 max-custom-md:mt-[80px] max-[478px]:mt-[60px]'>
|
||||
{loading ? (
|
||||
<CategoryCardLoader className={"max-[478px]:mt-2"} />
|
||||
) : page > totalPages ? <p className='font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6'>You came a long way, go back <br className='max-[300px]:hidden' />nothing is here</p> : searchData && searchData.length > 0 ? (
|
||||
<div>
|
||||
<CategoryCard
|
||||
label={`Search results for: ${keyword}`}
|
||||
data={searchData}
|
||||
showViewMore={false}
|
||||
className={"mt-0"}
|
||||
/>
|
||||
<PageSlider page={page} totalPages={totalPages} handlePageChange={handlePageChange} />
|
||||
</div>
|
||||
) : error ? <p className='font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px]'>Couldn't get search result please try again</p> : (
|
||||
<h1 className='font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px]'>{`Search results for: ${keyword}`}</h1>
|
||||
)}
|
||||
<div className="w-full flex flex-col gap-y-10">
|
||||
{homeInfoLoading ? (
|
||||
<SidecardLoader />
|
||||
) : (
|
||||
<>
|
||||
{homeInfo?.most_popular && <Sidecard data={homeInfo.most_popular} className="mt-0" label="Most Popular" />}
|
||||
{homeInfo?.genres && <Genre data={homeInfo.genres} />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Search;
|
||||
541
src/pages/watch/Watch.jsx
Normal file
541
src/pages/watch/Watch.jsx
Normal file
@@ -0,0 +1,541 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import { useEffect, useRef, useState } 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";
|
||||
import Episodelist from "@/src/components/episodelist/Episodelist";
|
||||
import website_name from "@/src/config/website";
|
||||
import Sidecard from "@/src/components/sidecard/Sidecard";
|
||||
import CategoryCard from "@/src/components/categorycard/CategoryCard";
|
||||
import {
|
||||
faClosedCaptioning,
|
||||
faMicrophone,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import Servers from "@/src/components/servers/Servers";
|
||||
import CategoryCardLoader from "@/src/components/Loader/CategoryCard.loader";
|
||||
import { Skeleton } from "@/src/components/ui/Skeleton/Skeleton";
|
||||
import SidecardLoader from "@/src/components/Loader/Sidecard.loader";
|
||||
import Voiceactor from "@/src/components/voiceactor/Voiceactor";
|
||||
import Watchcontrols from "@/src/components/watchcontrols/Watchcontrols";
|
||||
import useWatchControl from "@/src/hooks/useWatchControl";
|
||||
import Player from "@/src/components/player/Player";
|
||||
|
||||
export default function Watch() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
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,
|
||||
animeInfo,
|
||||
episodes,
|
||||
nextEpisodeSchedule,
|
||||
animeInfoLoading,
|
||||
totalEpisodes,
|
||||
isFullOverview,
|
||||
intro,
|
||||
outro,
|
||||
subtitles,
|
||||
thumbnail,
|
||||
setIsFullOverview,
|
||||
activeEpisodeNum,
|
||||
seasons,
|
||||
episodeId,
|
||||
setEpisodeId,
|
||||
activeServerId,
|
||||
setActiveServerId,
|
||||
servers,
|
||||
serverLoading,
|
||||
activeServerType,
|
||||
setActiveServerType,
|
||||
activeServerName,
|
||||
setActiveServerName
|
||||
} = useWatch(animeId, initialEpisodeId);
|
||||
const {
|
||||
autoPlay,
|
||||
setAutoPlay,
|
||||
autoSkipIntro,
|
||||
setAutoSkipIntro,
|
||||
autoNext,
|
||||
setAutoNext,
|
||||
} = useWatchControl();
|
||||
|
||||
useEffect(() => {
|
||||
if (!episodes || episodes.length === 0) return;
|
||||
|
||||
const isValidEpisode = episodes.some(ep => {
|
||||
const epNumber = ep.id.split('ep=')[1];
|
||||
return epNumber === episodeId;
|
||||
});
|
||||
|
||||
// If missing or invalid episodeId, fallback to first
|
||||
if (!episodeId || !isValidEpisode) {
|
||||
const fallbackId = episodes[0].id.match(/ep=(\d+)/)?.[1];
|
||||
if (fallbackId && fallbackId !== episodeId) {
|
||||
setEpisodeId(fallbackId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const newUrl = `/watch/${animeId}?ep=${episodeId}`;
|
||||
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]);
|
||||
|
||||
// Update document title
|
||||
useEffect(() => {
|
||||
if (animeInfo) {
|
||||
document.title = `Watch ${animeInfo.title} English Sub/Dub online Free on ${website_name}`;
|
||||
}
|
||||
return () => {
|
||||
document.title = `${website_name} | Free anime streaming platform`;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [animeId]);
|
||||
|
||||
// Redirect if no episodes
|
||||
useEffect(() => {
|
||||
if (totalEpisodes !== null && totalEpisodes === 0) {
|
||||
navigate(`/${animeId}`);
|
||||
}
|
||||
}, [streamInfo, episodeId, animeId, totalEpisodes, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
const adjustHeight = () => {
|
||||
if (window.innerWidth > 1200) {
|
||||
const player = document.querySelector(".player");
|
||||
const episodes = document.querySelector(".episodes");
|
||||
if (player && episodes) {
|
||||
episodes.style.height = `${player.clientHeight}px`;
|
||||
}
|
||||
} else {
|
||||
const episodes = document.querySelector(".episodes");
|
||||
if (episodes) {
|
||||
episodes.style.height = "auto";
|
||||
}
|
||||
}
|
||||
};
|
||||
adjustHeight();
|
||||
window.addEventListener("resize", adjustHeight);
|
||||
return () => {
|
||||
window.removeEventListener("resize", adjustHeight);
|
||||
};
|
||||
});
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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]);
|
||||
return (
|
||||
<div className="w-full h-fit flex flex-col justify-center items-center relative">
|
||||
<div className="w-full relative max-[1400px]:px-[30px] max-[1200px]:px-[80px] max-[1024px]:px-0">
|
||||
<img
|
||||
src={
|
||||
!animeInfoLoading
|
||||
? `https://wsrv.nl/?url=${animeInfo?.poster}`
|
||||
: "https://i.postimg.cc/rFZnx5tQ/2-Kn-Kzog-md.webp"
|
||||
}
|
||||
alt={`${animeInfo?.title} Poster`}
|
||||
className="absolute inset-0 w-full h-full object-cover filter grayscale z-[-900]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#3a3948] bg-opacity-80 backdrop-blur-md z-[-800]"></div>
|
||||
<div className="relative z-10 px-4 pb-[50px] grid grid-cols-[minmax(0,75%),minmax(0,25%)] w-full h-full mt-[128px] max-[1400px]:flex max-[1400px]:flex-col max-[1200px]:mt-[64px] max-[1024px]:px-0 max-md:mt-[50px]">
|
||||
{animeInfo && (
|
||||
<ul className="flex absolute left-4 top-[-40px] gap-x-2 items-center w-fit max-[1200px]:hidden">
|
||||
{[
|
||||
["Home", "home"],
|
||||
[animeInfo?.showType, animeInfo?.showType],
|
||||
].map(([text, link], index) => (
|
||||
<li key={index} className="flex gap-x-3 items-center">
|
||||
<Link
|
||||
to={`/${link}`}
|
||||
className="text-white hover:text-[#FFBADE] text-[15px] font-semibold"
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
<div className="dot mt-[1px] bg-white"></div>
|
||||
</li>
|
||||
))}
|
||||
<p className="font-light text-[15px] text-gray-300 line-clamp-1 max-[575px]:leading-5">
|
||||
Watching{" "}
|
||||
{language === "EN"
|
||||
? animeInfo?.title
|
||||
: animeInfo?.japanese_title}
|
||||
</p>
|
||||
</ul>
|
||||
)}
|
||||
<div className="flex w-full min-h-fit max-[1200px]:flex-col-reverse">
|
||||
<div className="episodes w-[35%] bg-[#191826] flex justify-center items-center max-[1400px]:w-[380px] max-[1200px]:w-full max-[1200px]:h-full max-[1200px]:min-h-[100px]">
|
||||
{!episodes ? (
|
||||
<BouncingLoader />
|
||||
) : (
|
||||
<Episodelist
|
||||
episodes={episodes}
|
||||
currentEpisode={episodeId}
|
||||
onEpisodeClick={(id) => setEpisodeId(id)}
|
||||
totalEpisodes={totalEpisodes}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="player w-full h-fit bg-black flex flex-col">
|
||||
<div className="w-full relative h-[480px] max-[1400px]:h-[40vw] max-[1200px]:h-[48vw] max-[1024px]:h-[58vw] max-[600px]:h-[65vw]">
|
||||
{!buffering ? (( activeServerName.toLowerCase()==="hd-1" || activeServerName.toLowerCase()==="hd-2" || activeServerName.toLowerCase()==="hd-3" || activeServerName.toLowerCase()==="hd-4") ?
|
||||
<IframePlayer
|
||||
animeId={animeId}
|
||||
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}
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50">
|
||||
<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">
|
||||
{!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>
|
||||
</div>
|
||||
|
||||
{!buffering && (
|
||||
<Watchcontrols
|
||||
autoPlay={autoPlay}
|
||||
setAutoPlay={setAutoPlay}
|
||||
autoSkipIntro={autoSkipIntro}
|
||||
setAutoSkipIntro={setAutoSkipIntro}
|
||||
autoNext={autoNext}
|
||||
setAutoNext={setAutoNext}
|
||||
episodes={episodes}
|
||||
totalEpisodes={totalEpisodes}
|
||||
episodeId={episodeId}
|
||||
onButtonClick={(id) => setEpisodeId(id)}
|
||||
/>
|
||||
)}
|
||||
<Servers
|
||||
servers={servers}
|
||||
activeEpisodeNum={activeEpisodeNum}
|
||||
activeServerId={activeServerId}
|
||||
setActiveServerId={setActiveServerId}
|
||||
serverLoading={serverLoading}
|
||||
setActiveServerType={setActiveServerType}
|
||||
activeServerType={activeServerType}
|
||||
setActiveServerName={setActiveServerName}
|
||||
/>
|
||||
{seasons?.length > 0 && (
|
||||
<div className="flex flex-col gap-y-2 bg-[#11101A] p-4">
|
||||
<h1 className="w-fit text-lg max-[478px]:text-[18px] font-semibold">
|
||||
Watch more seasons of this anime
|
||||
</h1>
|
||||
<div className="flex flex-wrap gap-4 max-[575px]:grid max-[575px]:grid-cols-3 max-[575px]:gap-3 max-[480px]:grid-cols-2">
|
||||
{seasons.map((season, index) => (
|
||||
<Link
|
||||
to={`/${season.id}`}
|
||||
key={index}
|
||||
className={`relative w-[20%] h-[60px] rounded-lg overflow-hidden cursor-pointer group ${
|
||||
animeId === String(season.id)
|
||||
? "border border-[#ffbade]"
|
||||
: ""
|
||||
} max-[1200px]:w-[140px] max-[575px]:w-full`}
|
||||
>
|
||||
<p
|
||||
className={`text-[13px] text-center font-bold absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full px-2 z-30 line-clamp-2 group-hover:text-[#ffbade] ${
|
||||
animeId === String(season.id)
|
||||
? "text-[#ffbade]"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{season.season}
|
||||
</p>
|
||||
<div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div>
|
||||
<img
|
||||
src={`https://wsrv.nl/?url=${season.season_poster}`}
|
||||
alt=""
|
||||
className="w-full h-full object-cover blur-[3px] opacity-50"
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{nextEpisodeSchedule?.nextEpisodeSchedule &&
|
||||
showNextEpisodeSchedule && (
|
||||
<div className="p-4">
|
||||
<div className="w-full px-4 rounded-md bg-[#0088CC] flex items-center justify-between gap-x-2">
|
||||
<div className="w-full h-fit">
|
||||
<span className="text-[18px]">🚀</span>
|
||||
{" Estimated the next episode will come at "}
|
||||
<span className="text-[13.4px] 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>
|
||||
</div>
|
||||
<span
|
||||
className="text-[25px] h-fit font-extrabold text-[#80C4E6] mb-1 cursor-pointer"
|
||||
onClick={() => setShowNextEpisodeSchedule(false)}
|
||||
>
|
||||
×
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-4 items-start ml-8 max-[1400px]:ml-0 max-[1400px]:mt-10 max-[1400px]:flex-row max-[1400px]:gap-x-6 max-[1024px]:px-[30px] max-[1024px]:mt-8 max-[500px]:mt-4 max-[500px]:px-4">
|
||||
{animeInfo && animeInfo?.poster ? (
|
||||
<img
|
||||
src={`https://wsrv.nl/?url=${animeInfo?.poster}`}
|
||||
alt=""
|
||||
className="w-[100px] h-[150px] object-cover max-[500px]:w-[70px] max-[500px]:h-[90px]"
|
||||
/>
|
||||
) : (
|
||||
<Skeleton className="w-[100px] h-[150px] rounded-none" />
|
||||
)}
|
||||
<div className="flex flex-col gap-y-4 justify-start">
|
||||
{animeInfo && animeInfo?.title ? (
|
||||
<p className="text-[26px] font-medium leading-6 max-[500px]:text-[18px]">
|
||||
{language ? animeInfo?.title : animeInfo?.japanese_title}
|
||||
</p>
|
||||
) : (
|
||||
<Skeleton className="w-[170px] h-[20px] rounded-xl" />
|
||||
)}
|
||||
<div className="flex flex-wrap w-fit gap-x-[2px] gap-y-[3px]">
|
||||
{animeInfo ? (
|
||||
tags.map(
|
||||
({ condition, icon, bgColor, text }, index) =>
|
||||
condition && (
|
||||
<Tag
|
||||
key={index}
|
||||
index={index}
|
||||
bgColor={bgColor}
|
||||
icon={icon}
|
||||
text={text}
|
||||
/>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<Skeleton className="w-[70px] h-[20px] rounded-xl" />
|
||||
)}
|
||||
<div className="flex w-fit items-center ml-1">
|
||||
{[
|
||||
animeInfo?.animeInfo?.tvInfo?.showType,
|
||||
animeInfo?.animeInfo?.tvInfo?.duration,
|
||||
].map(
|
||||
(item, index) =>
|
||||
item && (
|
||||
<div
|
||||
key={index}
|
||||
className="px-1 h-fit flex items-center gap-x-2 w-fit"
|
||||
>
|
||||
<div className="dot mt-[2px]"></div>
|
||||
<p className="text-[14px]">{item}</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{animeInfo ? (
|
||||
animeInfo?.animeInfo?.Overview && (
|
||||
<div className="max-h-[150px] overflow-hidden">
|
||||
<div className="max-h-[110px] mt-2 overflow-y-auto">
|
||||
<p className="text-[14px] font-[400]">
|
||||
{animeInfo?.animeInfo?.Overview.length > 270 ? (
|
||||
<>
|
||||
{isFullOverview
|
||||
? animeInfo?.animeInfo?.Overview
|
||||
: `${animeInfo?.animeInfo?.Overview.slice(
|
||||
0,
|
||||
270
|
||||
)}...`}
|
||||
<span
|
||||
className="text-[13px] font-bold hover:cursor-pointer"
|
||||
onClick={() => setIsFullOverview(!isFullOverview)}
|
||||
>
|
||||
{isFullOverview ? "- Less" : "+ More"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
animeInfo?.animeInfo?.Overview
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<Skeleton className="w-[200px] h-[10px] rounded-xl" />
|
||||
<Skeleton className="w-[160px] h-[10px] rounded-xl" />
|
||||
<Skeleton className="w-[100px] h-[10px] rounded-xl" />
|
||||
<Skeleton className="w-[80px] h-[10px] rounded-xl" />
|
||||
</div>
|
||||
)}
|
||||
<p className="text-[14px] max-[575px]:hidden">
|
||||
{`${website_name} is the best site to watch `}
|
||||
<span className="font-bold">
|
||||
{language ? animeInfo?.title : animeInfo?.japanese_title}
|
||||
</span>
|
||||
{` SUB online, or you can even watch `}
|
||||
<span className="font-bold">
|
||||
{language ? animeInfo?.title : animeInfo?.japanese_title}
|
||||
</span>
|
||||
{` DUB in HD quality.`}
|
||||
</p>
|
||||
<Link
|
||||
to={`/${animeId}`}
|
||||
className="w-fit text-[13px] bg-white rounded-[12px] px-[10px] py-1 text-black"
|
||||
>
|
||||
View detail
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
|
||||
<img
|
||||
src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
|
||||
alt="Share Anime"
|
||||
className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
|
||||
/>
|
||||
<div className="flex flex-col w-fit">
|
||||
<p className="text-[15px] font-bold text-[#FFBADE]">Share Anime</p>
|
||||
<p className="text-[16px] text-white">to your friends</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col">
|
||||
<div className="mt-[15px] flex flex-col gap-y-7">
|
||||
{animeInfo?.charactersVoiceActors.length > 0 && (
|
||||
<Voiceactor animeInfo={animeInfo} className="!mt-0" />
|
||||
)}
|
||||
{animeInfo?.recommended_data.length > 0 ? (
|
||||
<CategoryCard
|
||||
label="Recommended for you"
|
||||
data={animeInfo?.recommended_data}
|
||||
limit={animeInfo?.recommended_data.length}
|
||||
showViewMore={false}
|
||||
/>
|
||||
) : (
|
||||
<CategoryCardLoader className={"mt-[15px]"} />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{animeInfo && animeInfo.related_data ? (
|
||||
<Sidecard
|
||||
label="Related Anime"
|
||||
data={animeInfo.related_data}
|
||||
className="mt-[15px]"
|
||||
/>
|
||||
) : (
|
||||
<SidecardLoader className={"mt-[25px]"} />
|
||||
)}
|
||||
{homeInfo && homeInfo.most_popular && (
|
||||
<Sidecard
|
||||
label="Most Popular"
|
||||
data={homeInfo.most_popular.slice(0, 10)}
|
||||
className="mt-[15px]"
|
||||
limit={10}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user