From f5c57c4a18e465feffe5ee4c822a76849d9169a2 Mon Sep 17 00:00:00 2001 From: Tejas Panchal Date: Mon, 23 Feb 2026 00:56:18 +0530 Subject: [PATCH 1/3] resolved episode list for responsive devices --- src/components/episodelist/Episodelist.jsx | 142 ++++++++++----------- src/pages/watch/Watch.jsx | 16 +++ 2 files changed, 82 insertions(+), 76 deletions(-) diff --git a/src/components/episodelist/Episodelist.jsx b/src/components/episodelist/Episodelist.jsx index 23f240a..57a4cbf 100644 --- a/src/components/episodelist/Episodelist.jsx +++ b/src/components/episodelist/Episodelist.jsx @@ -165,9 +165,8 @@ function Episodelist({ handleRangeSelect(item); setActiveRange(item); }} - className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${ - item === activeRange ? "bg-[#404040]" : "" - }`} + className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${item === activeRange ? "bg-[#404040]" : "" + }`} >

{item} @@ -183,7 +182,7 @@ function Episodelist({ )} - + {totalEpisodes > 100 && (

@@ -201,60 +200,18 @@ function Episodelist({
)}
- +
30 - ? "p-4 grid gap-2 max-[600px]:p-2 max-[600px]:gap-1.5" + - (totalEpisodes > 100 - ? " grid-cols-5" - : " grid-cols-5 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") + className={`${totalEpisodes > 30 + ? "p-4 grid grid-cols-5 gap-2 max-[600px]:p-2 max-[600px]:gap-1.5" : "" - }`} + }`} > {totalEpisodes > 30 ? episodes - .slice(selectedRange[0] - 1, selectedRange[1]) - .map((item, index) => { - const episodeNumber = item?.id.match(/ep=(\d+)/)?.[1]; - const isActive = - activeEpisodeId === episodeNumber || - currentEpisode === episodeNumber; - const isSearched = searchedEpisode === item?.id; - - return ( -
{ - if (episodeNumber) { - onEpisodeClick(episodeNumber); - setActiveEpisodeId(episodeNumber); - setSearchedEpisode(null); - } - }} - > - - {index + selectedRange[0]} - -
- ); - }) - : episodes?.map((item, index) => { + .slice(selectedRange[0] - 1, selectedRange[1]) + .map((item, index) => { const episodeNumber = item?.id.match(/ep=(\d+)/)?.[1]; const isActive = activeEpisodeId === episodeNumber || @@ -265,13 +222,17 @@ function Episodelist({
{ if (episodeNumber) { onEpisodeClick(episodeNumber); @@ -280,25 +241,54 @@ function Episodelist({ } }} > -

- {index + 1} -

-
-

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

- {isActive && ( - - )} -
+ + {index + selectedRange[0]} +
); - })} + }) + : episodes?.map((item, index) => { + const episodeNumber = item?.id.match(/ep=(\d+)/)?.[1]; + const isActive = + activeEpisodeId === episodeNumber || + currentEpisode === episodeNumber; + const isSearched = searchedEpisode === item?.id; + + return ( +
{ + if (episodeNumber) { + onEpisodeClick(episodeNumber); + setActiveEpisodeId(episodeNumber); + setSearchedEpisode(null); + } + }} + > +

+ {index + 1} +

+
+

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

+ {isActive && ( + + )} +
+
+ ); + })}
diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx index c61087d..9033d4d 100644 --- a/src/pages/watch/Watch.jsx +++ b/src/pages/watch/Watch.jsx @@ -288,6 +288,22 @@ export default function Watch() { + {/* Episode List (Mobile only) */} +
+ {!episodes ? ( +
+ +
+ ) : ( + + )} +
+ {/* Info Section */}
From ce3df78d8af5264c145a97cbcb243a97561316ef Mon Sep 17 00:00:00 2001 From: Tejas Panchal Date: Mon, 23 Feb 2026 00:58:46 +0530 Subject: [PATCH 2/3] made related anime to max width --- src/pages/watch/Watch.jsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx index 9033d4d..1824eab 100644 --- a/src/pages/watch/Watch.jsx +++ b/src/pages/watch/Watch.jsx @@ -289,7 +289,7 @@ export default function Watch() {
{/* Episode List (Mobile only) */} -
+
{!episodes ? (
@@ -354,7 +354,7 @@ export default function Watch() { {/* Seasons (Mobile only) */} {seasons?.length > 0 && ( -
+

More Seasons

{seasons.map((season, idx) => ( @@ -373,6 +373,14 @@ export default function Watch() {
)} + + {/* Related Anime (Mobile only) */} + {!animeInfoLoading && animeInfo?.related_data?.length > 0 && ( +
+

Related Anime

+ +
+ )}
{/* Right Column (Desktop Only) */} @@ -399,13 +407,7 @@ export default function Watch() { )}
- {/* Related Anime (Mobile only) */} - {!animeInfoLoading && animeInfo?.related_data?.length > 0 && ( -
-

Related Anime

- -
- )} +
From ca41ff55b09142a87e35aed0b3fc40dfaf8b40e8 Mon Sep 17 00:00:00 2001 From: Tejas Panchal Date: Mon, 23 Feb 2026 01:03:21 +0530 Subject: [PATCH 3/3] barn doors --- src/App.jsx | 2 +- src/components/splashscreen/SplashScreen.css | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e385f28..de5c9c1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -37,7 +37,7 @@ function App() { return ( -
+
{!isSplashScreen && }
diff --git a/src/components/splashscreen/SplashScreen.css b/src/components/splashscreen/SplashScreen.css index bc301d4..98c2856 100644 --- a/src/components/splashscreen/SplashScreen.css +++ b/src/components/splashscreen/SplashScreen.css @@ -34,14 +34,12 @@ html { @media (max-width: 768px) { .splash-container { - background-size: auto 100vh; background-position: center center; } } @media (max-width: 480px) { .splash-container { - background-size: auto 100%; padding: 0 15px; } }