From c0c1e93660b919f808cea829ded51a14ebc14153 Mon Sep 17 00:00:00 2001 From: Tejas Panchal Date: Tue, 29 Jul 2025 20:18:32 +0530 Subject: [PATCH] watch page on progress --- src/components/episodelist/Episodelist.jsx | 82 ++-- src/components/servers/Servers.jsx | 26 +- src/pages/watch/Watch.jsx | 519 +++++++++------------ 3 files changed, 270 insertions(+), 357 deletions(-) diff --git a/src/components/episodelist/Episodelist.jsx b/src/components/episodelist/Episodelist.jsx index cc86327..00f50d6 100644 --- a/src/components/episodelist/Episodelist.jsx +++ b/src/components/episodelist/Episodelist.jsx @@ -138,20 +138,20 @@ function Episodelist({ return (
-
-

List of episodes:

+
+

Episodes

{totalEpisodes > 100 && (
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} > - +
-

- EPS: {selectedRange[0]}-{selectedRange[1]} +

+ {selectedRange[0]}-{selectedRange[1]}

{showDropDown && ( -
+
{generateRangeOptions(totalEpisodes).map((item, index) => (
-

- EPS: {item} +

+ {item} {item === activeRange ? ( - + ) : null}

@@ -183,26 +183,26 @@ function Episodelist({ )}
-
+
)}
-
+
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({
{ if (episodeNumber) { onEpisodeClick(episodeNumber); @@ -241,13 +241,7 @@ function Episodelist({ } }} > - + {index + selectedRange[0]}
@@ -264,13 +258,13 @@ function Episodelist({
{ if (episodeNumber) { onEpisodeClick(episodeNumber); @@ -279,15 +273,19 @@ function Episodelist({ } }} > -

{index + 1}

+

+ {index + 1} +

-

+

{language === "EN" ? item?.title : item?.japanese_title}

{isActive && ( )}
diff --git a/src/components/servers/Servers.jsx b/src/components/servers/Servers.jsx index 39f82bd..3b3e522 100644 --- a/src/components/servers/Servers.jsx +++ b/src/components/servers/Servers.jsx @@ -54,17 +54,17 @@ function Servers({ localStorage.setItem("server_type", server.type); }; return ( -
+
{serverLoading ? (
) : servers ? (
-
+

You are watching
- + Episode {activeEpisodeNum}

@@ -73,7 +73,7 @@ function Servers({ beside.

-
+
{rawServers.length > 0 && (

RAW:

@@ -95,8 +95,8 @@ function Servers({ key={index} className={`px-6 py-[5px] rounded-lg cursor-pointer ${ activeServerId === item?.data_id - ? "bg-[#ffbade] text-black" - : "bg-[#373646] text-white" + ? "bg-[#e0e0e0] text-black" + : "bg-[#373737] text-white" } max-[700px]:px-3`} onClick={() => handleServerSelect(item)} > @@ -117,7 +117,7 @@ function Servers({

SUB:

@@ -127,8 +127,8 @@ function Servers({ key={index} className={`px-6 py-[5px] rounded-lg cursor-pointer ${ activeServerId === item?.data_id - ? "bg-[#ffbade] text-black" - : "bg-[#373646] text-white" + ? "bg-[#e0e0e0] text-black" + : "bg-[#373737] text-white" } max-[700px]:px-3`} onClick={() => handleServerSelect(item)} > @@ -149,7 +149,7 @@ function Servers({

DUB:

@@ -159,8 +159,8 @@ function Servers({ key={index} className={`px-6 py-[5px] rounded-lg cursor-pointer ${ activeServerId === item?.data_id - ? "bg-[#ffbade] text-black" - : "bg-[#373646] text-white" + ? "bg-[#e0e0e0] text-black" + : "bg-[#373737] text-white" } max-[700px]:px-3`} onClick={() => handleServerSelect(item)} > diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx index ec587d0..4433730 100644 --- a/src/pages/watch/Watch.jsx +++ b/src/pages/watch/Watch.jsx @@ -181,59 +181,15 @@ export default function Watch() { ]); }, [animeId, animeInfo]); return ( -
-
- {`${animeInfo?.title} -
-
- {animeInfo && ( -
    - {[ - ["Home", "home"], - [animeInfo?.showType, animeInfo?.showType], - ].map(([text, link], index) => ( -
  • - - {text} - -
    -
    • - ))} -

    - Watching{" "} - {language === "EN" - ? animeInfo?.title - : animeInfo?.japanese_title} -

    -
- )} -
-
- {!episodes ? ( - - ) : ( - setEpisodeId(id)} - totalEpisodes={totalEpisodes} - /> - )} -
-
-
- {!buffering ? (["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ? +
+
+
+ {/* Left Column - Player, Controls, Servers */} +
+
+ {/* Video Container */} +
+ {!buffering ? (["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ? setEpisodeId(id)} autoNext={autoNext} - />: setEpisodeId(id)} - animeInfo={animeInfo} - episodeNum={activeEpisodeNum} - streamInfo={streamInfo} - /> + /> : setEpisodeId(id)} + animeInfo={animeInfo} + episodeNum={activeEpisodeNum} + streamInfo={streamInfo} + /> ) : ( -
+
)} -

+

{!buffering && !activeServerType ? ( servers ? ( <> @@ -284,255 +240,214 @@ export default function Watch() {

- {!buffering && ( - setEpisodeId(id)} - /> - )} - - {seasons?.length > 0 && ( -
-

- Watch more seasons of this anime -

-
- {seasons.map((season, index) => ( - -

- {season.season} -

-
- - - ))} + {/* Controls Section */} +
+ {!buffering && ( +
+ setEpisodeId(id)} + /> +
+ )} + + {/* Title and Server Selection */} +
+ +
+
- )} - {nextEpisodeSchedule?.nextEpisodeSchedule && - showNextEpisodeSchedule && ( -
-
-
+ + {/* Next Episode Schedule */} + {nextEpisodeSchedule?.nextEpisodeSchedule && showNextEpisodeSchedule && ( +
+
+
🚀 - {" Estimated the next episode will come at "} - - {new Date( - new Date( - nextEpisodeSchedule.nextEpisodeSchedule - ).getTime() - +
+ Next episode estimated at + + {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, - })} - + ).toLocaleDateString("en-GB", { + day: "2-digit", + month: "2-digit", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: true, + })} + +
- setShowNextEpisodeSchedule(false)} > × - +
)} +
-
-
- {animeInfo && animeInfo?.poster ? ( - - ) : ( - - )} -
- {animeInfo && animeInfo?.title ? ( -

- {language ? animeInfo?.title : animeInfo?.japanese_title} -

- ) : ( - - )} -
- {animeInfo ? ( - tags.map( - ({ condition, icon, bgColor, text }, index) => - condition && ( - - ) - ) + + {/* Anime Info Section */} +
+
+ {animeInfo && animeInfo?.poster ? ( + ) : ( - + )} -
- {[ - animeInfo?.animeInfo?.tvInfo?.showType, - animeInfo?.animeInfo?.tvInfo?.duration, - ].map( - (item, index) => - item && ( -
-
-

{item}

-
- ) +
+ {animeInfo && animeInfo?.title ? ( +

+ {language ? animeInfo?.title : animeInfo?.japanese_title} +

+ ) : ( + )} +
+ {animeInfo ? ( + tags.map( + ({ condition, icon, text }, index) => + condition && ( + + {icon && } + {text} + + ) + ) + ) : ( + + )} +
+ {animeInfo?.animeInfo?.Overview && ( +

+ {animeInfo?.animeInfo?.Overview.length > 270 ? ( + <> + {isFullOverview + ? animeInfo?.animeInfo?.Overview + : `${animeInfo?.animeInfo?.Overview.slice(0, 270)}...`} + + + ) : ( + animeInfo?.animeInfo?.Overview + )} +

+ )} + + View Details +
- {animeInfo ? ( - animeInfo?.animeInfo?.Overview && ( -
-
-

- {animeInfo?.animeInfo?.Overview.length > 270 ? ( - <> - {isFullOverview - ? animeInfo?.animeInfo?.Overview - : `${animeInfo?.animeInfo?.Overview.slice( - 0, - 270 - )}...`} - setIsFullOverview(!isFullOverview)} - > - {isFullOverview ? "- Less" : "+ More"} - - - ) : ( - animeInfo?.animeInfo?.Overview - )} -

-
-
- ) - ) : ( -
- - - - -
- )} -

- {`${website_name} is the best site to watch `} - - {language ? animeInfo?.title : animeInfo?.japanese_title} - - {` SUB online, or you can even watch `} - - {language ? animeInfo?.title : animeInfo?.japanese_title} - - {` DUB in HD quality.`} -

- - View detail -
+ + {/* Seasons Section */} + {seasons?.length > 0 && ( +
+

More Seasons

+
+ {seasons.map((season, index) => ( + + +
+

+ {season.season} +

+
+ + ))} +
+
+ )} + + {/* Recommended Section */} + {animeInfo?.recommended_data.length > 0 && ( +
+

Recommended

+ +
+ )} + + {/* Related Anime Section */} + {animeInfo && animeInfo.related_data ? ( +
+

Related Anime

+ +
+ ) : ( +
+ +
+ )} +
+ + {/* Right Column - Episodes */} +
+ {!episodes ? ( +
+ +
+ ) : ( + setEpisodeId(id)} + totalEpisodes={totalEpisodes} + /> + )}
-
-
-
- Share Anime -
-

Share Anime

-

to your friends

-
-
-
-
- {animeInfo?.charactersVoiceActors.length > 0 && ( - - )} - {animeInfo?.recommended_data.length > 0 ? ( - - ) : ( - - )} -
-
- {animeInfo && animeInfo.related_data ? ( - - ) : ( - - )} - {homeInfo && homeInfo.most_popular && ( - - )}