mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-18 06:11:45 +00:00
542 lines
22 KiB
JavaScript
542 lines
22 KiB
JavaScript
/* 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
|
||
? `${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={`${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={`${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>
|
||
);
|
||
}
|