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

watch page on progress

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-29 20:18:32 +05:30
parent b514546a0f
commit c0c1e93660
3 changed files with 270 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/episodelist/Episodelist.jsx
View File

@@ -138,20 +138,20 @@ function Episodelist({
return ( return (
<div className="relative flex flex-col w-full h-full max-[1200px]:max-h-[500px]"> <div className="relative flex flex-col w-full h-full max-[1200px]:max-h-[500px]">
<div className="sticky top-0 z-10 flex flex-col gap-y-[5px] justify-start px-3 py-4 bg-[#0D0D15]"> <div className="sticky top-0 z-10 flex flex-col gap-y-[5px] justify-start px-4 py-5 bg-[#1a1a1a] border-b border-[#2a2a2a]">
<h1 className="text-[13px] font-bold">List of episodes:</h1> <h1 className="text-[14px] font-semibold text-white mb-2">Episodes</h1>
{totalEpisodes > 100 && ( {totalEpisodes > 100 && (
<div className="w-full flex gap-x-4 items-center max-[1200px]:justify-between"> <div className="w-full flex gap-x-4 items-center max-[1200px]:justify-between">
<div className="min-w-fit flex text-[13px]"> <div className="min-w-fit flex text-[13px]">
<div <div
onClick={() => setShowDropDown((prev) => !prev)} onClick={() => setShowDropDown((prev) => !prev)}
className="text-white w-fit mt-1 text-[13px] relative cursor-pointer bg-[#0D0D15] flex justify-center items-center" className="text-gray-300 w-fit mt-1 text-[13px] relative cursor-pointer flex justify-center items-center hover:text-white transition-colors"
ref={dropDownRef} ref={dropDownRef}
> >
<FontAwesomeIcon icon={faList} /> <FontAwesomeIcon icon={faList} className="text-gray-400" />
<div className="w-fit flex justify-center items-center gap-x-2 ml-4"> <div className="w-fit flex justify-center items-center gap-x-2 ml-4">
<p className="text-white text-[12px]"> <p className="text-[12px]">
EPS:&nbsp;{selectedRange[0]}-{selectedRange[1]} {selectedRange[0]}-{selectedRange[1]}
</p> </p>
<FontAwesomeIcon <FontAwesomeIcon
icon={faAngleDown} icon={faAngleDown}
@@ -159,7 +159,7 @@ function Episodelist({
/> />
</div> </div>
{showDropDown && ( {showDropDown && (
<div className="absolute flex flex-col top-full mt-[10px] left-0 z-30 bg-white w-[150px] max-h-[200px] overflow-y-auto rounded-l-[8px]"> <div className="absolute flex flex-col top-full mt-[10px] left-0 z-30 bg-[#2a2a2a] w-[150px] max-h-[200px] overflow-y-auto rounded-lg border border-[#3a3a3a] shadow-lg">
{generateRangeOptions(totalEpisodes).map((item, index) => ( {generateRangeOptions(totalEpisodes).map((item, index) => (
<div <div
key={index} key={index}
@@ -167,14 +167,14 @@ function Episodelist({
handleRangeSelect(item); handleRangeSelect(item);
setActiveRange(item); setActiveRange(item);
}} }}
className={`hover:bg-gray-200 cursor-pointer text-black ${ className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${
item === activeRange ? "bg-[#EFF0F4]" : "" item === activeRange ? "bg-[#404040]" : ""
}`} }`}
> >
<p className="font-semibold text-[12px] p-3 flex justify-between items-center"> <p className="font-medium text-[12px] p-3 flex justify-between items-center text-gray-300 hover:text-white">
EPS:&nbsp;{item} {item}
{item === activeRange ? ( {item === activeRange ? (
<FontAwesomeIcon icon={faCheck} /> <FontAwesomeIcon icon={faCheck} className="text-white" />
) : null} ) : null}
</p> </p>
</div> </div>
@@ -183,26 +183,26 @@ function Episodelist({
)} )}
</div> </div>
</div> </div>
<div className="border-[1px] border-[#ffffff34] rounded-sm py-[4px] px-[8px] flex items-center gap-x-[10px]"> <div className="border border-[#3a3a3a] rounded-lg py-2 px-3 flex items-center gap-x-3 bg-[#2a2a2a] focus-within:border-gray-500 transition-colors">
<FontAwesomeIcon <FontAwesomeIcon
icon={faMagnifyingGlass} icon={faMagnifyingGlass}
className="text-[11px]" className="text-[12px] text-gray-400"
/> />
<input <input
type="text" type="text"
className="w-full bg-transparent focus:outline-none rounded-sm text-[13px] font-bold placeholder:text-[12px] placeholder:font-medium" className="w-full bg-transparent focus:outline-none rounded-sm text-[13px] text-white placeholder:text-gray-500"
placeholder="Number of Ep" placeholder="Go to episode..."
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
)} )}
</div> </div>
<div ref={listContainerRef} className="w-full h-full overflow-y-auto"> <div ref={listContainerRef} className="w-full h-full overflow-y-auto bg-[#1a1a1a]">
<div <div
className={`${ className={`${
totalEpisodes > 30 totalEpisodes > 30
? "p-3 grid grid-cols-5 gap-1 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5" ? "p-4 grid grid-cols-5 gap-2 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5"
: "" : ""
}`} }`}
> >
@@ -220,19 +220,19 @@ function Episodelist({
<div <div
key={item?.id} key={item?.id}
ref={isActive ? activeEpisodeRef : null} ref={isActive ? activeEpisodeRef : null}
className={`flex items-center justify-center rounded-[3px] h-[30px] text-[13.5px] font-medium cursor-pointer group ${ className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all ${
item?.filler item?.filler
? isActive ? isActive
? "bg-[#ffbade]" ? "bg-white text-black"
: "bg-gradient-to-r from-[#5a4944] to-[#645a4b]" : "bg-[#2a2a2a] text-gray-400"
: "" : ""
} md:hover:bg-[#67686F] } hover:bg-[#404040]
md:hover:text-white hover:text-white
${ ${
isActive isActive
? "bg-[#ffbade] text-black" ? "bg-white text-black ring-1 ring-white"
: "bg-[#35373D] text-gray-400" : "bg-[#2a2a2a] text-gray-400"
} ${isSearched ? "glow-animation" : ""} `} } ${isSearched ? "ring-2 ring-white" : ""}`}
onClick={() => { onClick={() => {
if (episodeNumber) { if (episodeNumber) {
onEpisodeClick(episodeNumber); onEpisodeClick(episodeNumber);
@@ -241,13 +241,7 @@ function Episodelist({
} }
}} }}
> >
<span <span className="transition-colors">
className={`${
item?.filler
? "text-white md:group-hover:text-[#ffbade]"
: ""
}`}
>
{index + selectedRange[0]} {index + selectedRange[0]}
</span> </span>
</div> </div>
@@ -264,13 +258,13 @@ function Episodelist({
<div <div
key={item?.id} key={item?.id}
ref={isActive ? activeEpisodeRef : null} ref={isActive ? activeEpisodeRef : null}
className={`w-full pl-5 pr-2 py-3 flex items-center justify-start gap-x-8 cursor-pointer ${ className={`w-full px-4 py-3 flex items-center justify-start gap-x-6 cursor-pointer transition-all ${
(index + 1) % 2 && !isActive (index + 1) % 2 && !isActive
? "bg-[#201F2D] text-gray-400" ? "bg-[#202020]"
: "bg-none" : "bg-[#1a1a1a]"
} group md:hover:bg-[#2B2A42] ${ } hover:bg-[#2a2a2a] ${
isActive ? "text-[#ffbade] bg-[#2B2A42]" : "" isActive ? "bg-[#2a2a2a]" : ""
} ${isSearched ? "glow-animation" : ""}`} } ${isSearched ? "ring-1 ring-white" : ""}`}
onClick={() => { onClick={() => {
if (episodeNumber) { if (episodeNumber) {
onEpisodeClick(episodeNumber); onEpisodeClick(episodeNumber);
@@ -279,15 +273,19 @@ function Episodelist({
} }
}} }}
> >
<p className="text-[14px] font-medium">{index + 1}</p> <p className={`text-[14px] font-medium ${isActive ? "text-white" : "text-gray-400"}`}>
{index + 1}
</p>
<div className="w-full flex items-center justify-between gap-x-[5px]"> <div className="w-full flex items-center justify-between gap-x-[5px]">
<h1 className="line-clamp-1 text-[15px] font-light group-hover:text-[#ffbade]"> <h1 className={`line-clamp-1 text-[14px] transition-colors ${
isActive ? "text-white font-medium" : "text-gray-400 font-normal"
}`}>
{language === "EN" ? item?.title : item?.japanese_title} {language === "EN" ? item?.title : item?.japanese_title}
</h1> </h1>
{isActive && ( {isActive && (
<FontAwesomeIcon <FontAwesomeIcon
icon={faCirclePlay} icon={faCirclePlay}
className="w-[20px] h-[20px] text-[#ffbade]" className="w-[18px] h-[18px] text-white"
/> />
)} )}
</div> </div>

26
src/components/servers/Servers.jsx
View File

@@ -54,17 +54,17 @@ function Servers({
localStorage.setItem("server_type", server.type); localStorage.setItem("server_type", server.type);
}; };
return ( return (
<div className="relative bg-[#11101A] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#14151A]"> <div className="relative bg-[#111111] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#151515]">
{serverLoading ? ( {serverLoading ? (
<div className="w-full h-full rounded-lg flex justify-center items-center max-[600px]:rounded-none"> <div className="w-full h-full rounded-lg flex justify-center items-center max-[600px]:rounded-none">
<BouncingLoader /> <BouncingLoader />
</div> </div>
) : servers ? ( ) : servers ? (
<div className="w-full h-full rounded-lg grid grid-cols-[minmax(0,30%),minmax(0,70%)] overflow-hidden max-[800px]:grid-cols-[minmax(0,40%),minmax(0,60%)] max-[600px]:flex max-[600px]:flex-col max-[600px]:rounded-none"> <div className="w-full h-full rounded-lg grid grid-cols-[minmax(0,30%),minmax(0,70%)] overflow-hidden max-[800px]:grid-cols-[minmax(0,40%),minmax(0,60%)] max-[600px]:flex max-[600px]:flex-col max-[600px]:rounded-none">
<div className="h-full bg-[#ffbade] px-6 text-black flex flex-col justify-center items-center gap-y-2 max-[600px]:bg-transparent max-[600px]:h-1/2 max-[600px]:text-white max-[600px]:mb-4"> <div className="h-full bg-[#e0e0e0] px-6 text-black flex flex-col justify-center items-center gap-y-2 max-[600px]:bg-transparent max-[600px]:h-1/2 max-[600px]:text-white max-[600px]:mb-4">
<p className="text-center leading-5 font-medium text-[14px]"> <p className="text-center leading-5 font-medium text-[14px]">
You are watching <br /> You are watching <br />
<span className="font-semibold max-[600px]:text-[#ffbade]"> <span className="font-semibold max-[600px]:text-[#e0e0e0]">
Episode {activeEpisodeNum} Episode {activeEpisodeNum}
</span> </span>
</p> </p>
@@ -73,7 +73,7 @@ function Servers({
beside. beside.
</p> </p>
</div> </div>
<div className="bg-[#201F31] flex flex-col max-[600px]:h-full"> <div className="bg-[#1f1f1f] flex flex-col max-[600px]:h-full">
{rawServers.length > 0 && ( {rawServers.length > 0 && (
<div <div
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${ className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
@@ -85,7 +85,7 @@ function Servers({
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<FontAwesomeIcon <FontAwesomeIcon
icon={faFile} icon={faFile}
className="text-[#ffbade] text-[13px]" className="text-[#e0e0e0] text-[13px]"
/> />
<p className="font-bold text-[14px]">RAW:</p> <p className="font-bold text-[14px]">RAW:</p>
</div> </div>
@@ -95,8 +95,8 @@ function Servers({
key={index} key={index}
className={`px-6 py-[5px] rounded-lg cursor-pointer ${ className={`px-6 py-[5px] rounded-lg cursor-pointer ${
activeServerId === item?.data_id activeServerId === item?.data_id
? "bg-[#ffbade] text-black" ? "bg-[#e0e0e0] text-black"
: "bg-[#373646] text-white" : "bg-[#373737] text-white"
} max-[700px]:px-3`} } max-[700px]:px-3`}
onClick={() => handleServerSelect(item)} onClick={() => handleServerSelect(item)}
> >
@@ -117,7 +117,7 @@ function Servers({
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<FontAwesomeIcon <FontAwesomeIcon
icon={faClosedCaptioning} icon={faClosedCaptioning}
className="text-[#ffbade] text-[13px]" className="text-[#e0e0e0] text-[13px]"
/> />
<p className="font-bold text-[14px]">SUB:</p> <p className="font-bold text-[14px]">SUB:</p>
</div> </div>
@@ -127,8 +127,8 @@ function Servers({
key={index} key={index}
className={`px-6 py-[5px] rounded-lg cursor-pointer ${ className={`px-6 py-[5px] rounded-lg cursor-pointer ${
activeServerId === item?.data_id activeServerId === item?.data_id
? "bg-[#ffbade] text-black" ? "bg-[#e0e0e0] text-black"
: "bg-[#373646] text-white" : "bg-[#373737] text-white"
} max-[700px]:px-3`} } max-[700px]:px-3`}
onClick={() => handleServerSelect(item)} onClick={() => handleServerSelect(item)}
> >
@@ -149,7 +149,7 @@ function Servers({
<div className="flex items-center gap-x-3"> <div className="flex items-center gap-x-3">
<FontAwesomeIcon <FontAwesomeIcon
icon={faMicrophone} icon={faMicrophone}
className="text-[#ffbade] text-[13px]" className="text-[#e0e0e0] text-[13px]"
/> />
<p className="font-bold text-[14px]">DUB:</p> <p className="font-bold text-[14px]">DUB:</p>
</div> </div>
@@ -159,8 +159,8 @@ function Servers({
key={index} key={index}
className={`px-6 py-[5px] rounded-lg cursor-pointer ${ className={`px-6 py-[5px] rounded-lg cursor-pointer ${
activeServerId === item?.data_id activeServerId === item?.data_id
? "bg-[#ffbade] text-black" ? "bg-[#e0e0e0] text-black"
: "bg-[#373646] text-white" : "bg-[#373737] text-white"
} max-[700px]:px-3`} } max-[700px]:px-3`}
onClick={() => handleServerSelect(item)} onClick={() => handleServerSelect(item)}
> >

519
src/pages/watch/Watch.jsx
View File

@@ -181,59 +181,15 @@ export default function Watch() {
]); ]);
}, [animeId, animeInfo]); }, [animeId, animeInfo]);
return ( return (
<div className="w-full h-fit flex flex-col justify-center items-center relative"> <div className="w-full min-h-screen bg-[#0a0a0a]">
<div className="w-full relative max-[1400px]:px-[30px] max-[1200px]:px-[80px] max-[1024px]:px-0"> <div className="w-full max-w-[1920px] mx-auto px-6 pt-[128px] pb-12 max-[1200px]:pt-[64px] max-[1024px]:px-4 max-md:pt-[50px]">
<img <div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col">
src={ {/* Left Column - Player, Controls, Servers */}
!animeInfoLoading <div className="flex flex-col w-full gap-6">
? `${animeInfo?.poster}` <div className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden">
: "https://i.postimg.cc/rFZnx5tQ/2-Kn-Kzog-md.webp" {/* Video Container */}
} <div className="w-full relative aspect-video bg-black">
alt={`${animeInfo?.title} Poster`} {!buffering ? (["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ?
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 ? (["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ?
<IframePlayer <IframePlayer
episodeId={episodeId} episodeId={episodeId}
servertype={activeServerType} servertype={activeServerType}
@@ -243,29 +199,29 @@ export default function Watch() {
episodes={episodes} episodes={episodes}
playNext={(id) => setEpisodeId(id)} playNext={(id) => setEpisodeId(id)}
autoNext={autoNext} autoNext={autoNext}
/>:<Player /> : <Player
streamUrl={streamUrl} streamUrl={streamUrl}
subtitles={subtitles} subtitles={subtitles}
intro={intro} intro={intro}
outro={outro} outro={outro}
serverName={activeServerName.toLowerCase()} serverName={activeServerName.toLowerCase()}
thumbnail={thumbnail} thumbnail={thumbnail}
autoSkipIntro={autoSkipIntro} autoSkipIntro={autoSkipIntro}
autoPlay={autoPlay} autoPlay={autoPlay}
autoNext={autoNext} autoNext={autoNext}
episodeId={episodeId} episodeId={episodeId}
episodes={episodes} episodes={episodes}
playNext={(id) => setEpisodeId(id)} playNext={(id) => setEpisodeId(id)}
animeInfo={animeInfo} animeInfo={animeInfo}
episodeNum={activeEpisodeNum} episodeNum={activeEpisodeNum}
streamInfo={streamInfo} streamInfo={streamInfo}
/> />
) : ( ) : (
<div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <div className="absolute inset-0 flex justify-center items-center bg-black">
<BouncingLoader /> <BouncingLoader />
</div> </div>
)} )}
<p className="text-center underline font-medium text-[15px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"> <p className="text-center underline font-medium text-[15px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none text-gray-300">
{!buffering && !activeServerType ? ( {!buffering && !activeServerType ? (
servers ? ( servers ? (
<> <>
@@ -284,255 +240,214 @@ export default function Watch() {
</p> </p>
</div> </div>
{!buffering && ( {/* Controls Section */}
<Watchcontrols <div className="bg-[#0f0f0f]">
autoPlay={autoPlay} {!buffering && (
setAutoPlay={setAutoPlay} <div className="border-b border-[#272727]">
autoSkipIntro={autoSkipIntro} <Watchcontrols
setAutoSkipIntro={setAutoSkipIntro} autoPlay={autoPlay}
autoNext={autoNext} setAutoPlay={setAutoPlay}
setAutoNext={setAutoNext} autoSkipIntro={autoSkipIntro}
episodes={episodes} setAutoSkipIntro={setAutoSkipIntro}
totalEpisodes={totalEpisodes} autoNext={autoNext}
episodeId={episodeId} setAutoNext={setAutoNext}
onButtonClick={(id) => setEpisodeId(id)} episodes={episodes}
/> totalEpisodes={totalEpisodes}
)} episodeId={episodeId}
<Servers onButtonClick={(id) => setEpisodeId(id)}
servers={servers} />
activeEpisodeNum={activeEpisodeNum} </div>
activeServerId={activeServerId} )}
setActiveServerId={setActiveServerId}
serverLoading={serverLoading} {/* Title and Server Selection */}
setActiveServerType={setActiveServerType} <div className="p-3">
activeServerType={activeServerType}
setActiveServerName={setActiveServerName} <div>
/> <Servers
{seasons?.length > 0 && ( servers={servers}
<div className="flex flex-col gap-y-2 bg-[#11101A] p-4"> activeEpisodeNum={activeEpisodeNum}
<h1 className="w-fit text-lg max-[478px]:text-[18px] font-semibold"> activeServerId={activeServerId}
Watch more seasons of this anime setActiveServerId={setActiveServerId}
</h1> serverLoading={serverLoading}
<div className="flex flex-wrap gap-4 max-[575px]:grid max-[575px]:grid-cols-3 max-[575px]:gap-3 max-[480px]:grid-cols-2"> setActiveServerType={setActiveServerType}
{seasons.map((season, index) => ( activeServerType={activeServerType}
<Link setActiveServerName={setActiveServerName}
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>
</div> </div>
)}
{nextEpisodeSchedule?.nextEpisodeSchedule && {/* Next Episode Schedule */}
showNextEpisodeSchedule && ( {nextEpisodeSchedule?.nextEpisodeSchedule && showNextEpisodeSchedule && (
<div className="p-4"> <div className="px-3 pb-3">
<div className="w-full px-4 rounded-md bg-[#0088CC] flex items-center justify-between gap-x-2"> <div className="w-full p-3 rounded-lg bg-[#272727] flex items-center justify-between">
<div className="w-full h-fit"> <div className="flex items-center gap-x-3">
<span className="text-[18px]">🚀</span> <span className="text-[18px]">🚀</span>
{" Estimated the next episode will come at "} <div>
<span className="text-[13.4px] font-medium"> <span className="text-gray-400 text-sm">Next episode estimated at</span>
{new Date( <span className="ml-2 text-white text-sm font-medium">
new Date( {new Date(
nextEpisodeSchedule.nextEpisodeSchedule new Date(nextEpisodeSchedule.nextEpisodeSchedule).getTime() -
).getTime() -
new Date().getTimezoneOffset() * 60000 new Date().getTimezoneOffset() * 60000
).toLocaleDateString("en-GB", { ).toLocaleDateString("en-GB", {
day: "2-digit", day: "2-digit",
month: "2-digit", month: "2-digit",
year: "numeric", year: "numeric",
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
second: "2-digit", second: "2-digit",
hour12: true, hour12: true,
})} })}
</span> </span>
</div>
</div> </div>
<span <button
className="text-[25px] h-fit font-extrabold text-[#80C4E6] mb-1 cursor-pointer" className="text-2xl text-gray-500 hover:text-white transition-colors"
onClick={() => setShowNextEpisodeSchedule(false)} onClick={() => setShowNextEpisodeSchedule(false)}
> >
× ×
</span> </button>
</div> </div>
</div> </div>
)} )}
</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"> {/* Anime Info Section */}
{animeInfo && animeInfo?.poster ? ( <div className="p-6 bg-[#141414] rounded-lg">
<img <div className="flex gap-x-6 max-[600px]:flex-col max-[600px]:gap-y-4">
src={`${animeInfo?.poster}`} {animeInfo && animeInfo?.poster ? (
alt="" <img
className="w-[100px] h-[150px] object-cover max-[500px]:w-[70px] max-[500px]:h-[90px]" src={`${animeInfo?.poster}`}
/> alt=""
) : ( className="w-[120px] h-[180px] object-cover rounded-md max-[600px]:w-full max-[600px]:h-[200px]"
<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" /> <Skeleton className="w-[120px] h-[180px] rounded-md" />
)} )}
<div className="flex w-fit items-center ml-1"> <div className="flex flex-col gap-y-4 flex-1">
{[ {animeInfo && animeInfo?.title ? (
animeInfo?.animeInfo?.tvInfo?.showType, <h1 className="text-[28px] font-medium text-white leading-tight">
animeInfo?.animeInfo?.tvInfo?.duration, {language ? animeInfo?.title : animeInfo?.japanese_title}
].map( </h1>
(item, index) => ) : (
item && ( <Skeleton className="w-[170px] h-[20px] rounded-xl" />
<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 className="flex flex-wrap gap-2">
{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">
{icon && <FontAwesomeIcon icon={icon} className="text-[12px]" />}
{text}
</span>
)
)
) : (
<Skeleton className="w-[70px] h-[20px] rounded-xl" />
)}
</div>
{animeInfo?.animeInfo?.Overview && (
<p className="text-[15px] text-gray-400 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"
onClick={() => setIsFullOverview(!isFullOverview)}
>
{isFullOverview ? "Show Less" : "Read More"}
</button>
</>
) : (
animeInfo?.animeInfo?.Overview
)}
</p>
)}
<Link
to={`/${animeId}`}
className="w-fit px-4 py-2 bg-[#2a2a2a] hover:bg-[#333] text-gray-300 hover:text-white rounded-md transition-all text-sm font-medium mt-2"
>
View Details
</Link>
</div> </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>
{/* Seasons Section */}
{seasons?.length > 0 && (
<div className="p-6 bg-[#141414] rounded-lg">
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
<div className="grid grid-cols-5 gap-4 max-[1200px]:grid-cols-4 max-[900px]:grid-cols-3 max-[600px]:grid-cols-2">
{seasons.map((season, index) => (
<Link
to={`/${season.id}`}
key={index}
className={`relative aspect-[2/3] rounded-lg overflow-hidden group ${
animeId === String(season.id) ? "ring-2 ring-white" : ""
}`}
>
<img
src={`${season.season_poster}`}
alt=""
className="w-full h-full object-cover transition-transform group-hover:scale-110"
/>
<div className="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center p-3 group-hover:bg-opacity-40 transition-all">
<p className="text-center text-sm font-medium">
{season.season}
</p>
</div>
</Link>
))}
</div>
</div>
)}
{/* Recommended Section */}
{animeInfo?.recommended_data.length > 0 && (
<div className="p-6 bg-[#141414] rounded-lg">
<h2 className="text-xl font-semibold mb-4 text-white">Recommended</h2>
<CategoryCard
data={animeInfo?.recommended_data}
limit={animeInfo?.recommended_data.length}
showViewMore={false}
/>
</div>
)}
{/* Related Anime Section */}
{animeInfo && animeInfo.related_data ? (
<div className="p-6 bg-[#141414] rounded-lg">
<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 />
</div>
)}
</div>
{/* Right Column - Episodes */}
<div className="episodes h-full 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>
</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://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.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> </div>
</div> </div>