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

Fixed Watch Page

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-30 22:44:49 +05:30
parent 2e21de2317
commit bb2e1190aa
3 changed files with 156 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -138,18 +138,18 @@ function Episodelist({
return ( return (
<div className="flex flex-col w-full h-full"> <div className="flex flex-col w-full h-full">
<div className="sticky top-0 z-10 flex items-center justify-between px-4 py-3 bg-[#1a1a1a] border-b border-[#2a2a2a]"> <div className="sticky top-0 z-10 flex items-center justify-between px-4 py-2.5 bg-[#1a1a1a] border-b border-[#2a2a2a] max-[600px]:px-2">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 max-[600px]:gap-2">
<h1 className="text-[14px] font-semibold text-white">Episodes</h1> <h1 className="text-[14px] font-semibold text-white max-[600px]:text-[13px]">Episodes</h1>
{totalEpisodes > 100 && ( {totalEpisodes > 100 && (
<div className="flex items-center"> <div className="flex items-center">
<div <div
onClick={() => setShowDropDown((prev) => !prev)} onClick={() => setShowDropDown((prev) => !prev)}
className="text-gray-300 relative cursor-pointer flex items-center gap-2 hover:text-white transition-colors" className="text-gray-300 relative cursor-pointer flex items-center gap-2 hover:text-white transition-colors max-[600px]:gap-1"
ref={dropDownRef} ref={dropDownRef}
> >
<FontAwesomeIcon icon={faList} className="text-gray-400" /> <FontAwesomeIcon icon={faList} className="text-gray-400" />
<p className="text-[12px]"> <p className="text-[12px] max-[600px]:text-[11px]">
{selectedRange[0]}-{selectedRange[1]} {selectedRange[0]}-{selectedRange[1]}
</p> </p>
<FontAwesomeIcon <FontAwesomeIcon
@@ -169,7 +169,7 @@ function Episodelist({
item === activeRange ? "bg-[#404040]" : "" item === activeRange ? "bg-[#404040]" : ""
}`} }`}
> >
<p className="font-medium text-[12px] p-3 flex justify-between items-center text-gray-300 hover:text-white"> <p className="font-medium text-[12px] p-2.5 flex justify-between items-center text-gray-300 hover:text-white max-[600px]:text-[11px] max-[600px]:p-2">
{item} {item}
{item === activeRange ? ( {item === activeRange ? (
<FontAwesomeIcon icon={faCheck} className="text-white" /> <FontAwesomeIcon icon={faCheck} className="text-white" />
@@ -185,15 +185,15 @@ function Episodelist({
</div> </div>
{totalEpisodes > 100 && ( {totalEpisodes > 100 && (
<div className="flex items-center min-w-[180px]"> <div className="flex items-center min-w-[180px] max-[600px]:min-w-[120px]">
<div className="w-full flex items-center gap-2 px-3 py-1.5 bg-[#2a2a2a] rounded-lg border border-[#3a3a3a] focus-within:border-gray-500 transition-colors"> <div className="w-full flex items-center gap-2 px-3 py-1.5 bg-[#2a2a2a] rounded-lg border border-[#3a3a3a] focus-within:border-gray-500 transition-colors max-[600px]:px-2 max-[600px]:py-1">
<FontAwesomeIcon <FontAwesomeIcon
icon={faMagnifyingGlass} icon={faMagnifyingGlass}
className="text-[12px] text-gray-400" className="text-[12px] text-gray-400"
/> />
<input <input
type="text" type="text"
className="w-full bg-transparent focus:outline-none text-[13px] text-white placeholder:text-gray-500" className="w-full bg-transparent focus:outline-none text-[13px] text-white placeholder:text-gray-500 max-[600px]:text-[12px]"
placeholder="Go to episode..." placeholder="Go to episode..."
onChange={handleChange} onChange={handleChange}
/> />
@@ -202,11 +202,14 @@ function Episodelist({
)} )}
</div> </div>
<div ref={listContainerRef} className="w-full flex-1 overflow-y-auto bg-[#1a1a1a]"> <div ref={listContainerRef} className="w-full flex-1 overflow-y-auto bg-[#1a1a1a] max-h-[calc(100vh-400px)] max-[1200px]:max-h-[400px]">
<div <div
className={`${ className={`${
totalEpisodes > 30 totalEpisodes > 30
? "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" ? "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")
: "" : ""
}`} }`}
> >
@@ -224,7 +227,7 @@ 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-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all ${ className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all max-[600px]:h-[30px] max-[600px]:text-[12px] ${
item?.filler item?.filler
? isActive ? isActive
? "bg-white text-black" ? "bg-white text-black"
@@ -262,7 +265,7 @@ function Episodelist({
<div <div
key={item?.id} key={item?.id}
ref={isActive ? activeEpisodeRef : null} ref={isActive ? activeEpisodeRef : null}
className={`w-full px-4 py-3 flex items-center justify-start gap-x-6 cursor-pointer transition-all ${ className={`w-full px-4 py-2.5 flex items-center justify-start gap-x-4 cursor-pointer transition-all max-[600px]:px-3 max-[600px]:py-2 max-[600px]:gap-x-3 ${
(index + 1) % 2 && !isActive (index + 1) % 2 && !isActive
? "bg-[#202020]" ? "bg-[#202020]"
: "bg-[#1a1a1a]" : "bg-[#1a1a1a]"
@@ -277,11 +280,11 @@ function Episodelist({
} }
}} }}
> >
<p className={`text-[14px] font-medium ${isActive ? "text-white" : "text-gray-400"}`}> <p className={`text-[14px] font-medium max-[600px]:text-[13px] ${isActive ? "text-white" : "text-gray-400"}`}>
{index + 1} {index + 1}
</p> </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-[14px] transition-colors ${ <h1 className={`line-clamp-1 text-[14px] transition-colors max-[600px]:text-[13px] ${
isActive ? "text-white font-medium" : "text-gray-400 font-normal" isActive ? "text-white font-medium" : "text-gray-400 font-normal"
}`}> }`}>
{language === "EN" ? item?.title : item?.japanese_title} {language === "EN" ? item?.title : item?.japanese_title}
@@ -289,7 +292,7 @@ function Episodelist({
{isActive && ( {isActive && (
<FontAwesomeIcon <FontAwesomeIcon
icon={faCirclePlay} icon={faCirclePlay}
className="w-[18px] h-[18px] text-white" className="w-[18px] h-[18px] text-white max-[600px]:w-[16px] max-[600px]:h-[16px]"
/> />
)} )}
</div> </div>

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

@@ -53,43 +53,43 @@ function Servers({
localStorage.setItem("server_name", server.serverName); localStorage.setItem("server_name", server.serverName);
localStorage.setItem("server_type", server.type); localStorage.setItem("server_type", server.type);
}; };
return ( return (
<div className="relative bg-[#111111] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#151515]"> <div className="relative bg-[#111111] p-4 w-full min-h-[100px] flex justify-center items-center max-[1200px]:bg-[#151515] max-[600px]:p-2">
{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 max-[600px]:gap-2">
<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"> <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-auto max-[600px]:text-white max-[600px]:py-1 max-[600px]:px-2">
<p className="text-center leading-5 font-medium text-[14px]"> <p className="text-center leading-5 font-medium text-[14px] max-[600px]:text-[13px] max-[600px]:mb-0">
You are watching <br /> You are watching{" "}
<span className="font-semibold max-[600px]:text-[#e0e0e0]"> <br className="max-[600px]:hidden" />
<span className="font-semibold max-[600px]:text-[#e0e0e0] max-[600px]:ml-1">
Episode {activeEpisodeNum} Episode {activeEpisodeNum}
</span> </span>
</p> </p>
<p className="leading-5 text-[14px] font-medium text-center"> <p className="leading-5 text-[14px] font-medium text-center max-[600px]:text-[12px] max-[600px]:hidden">
If the current server doesn&apos;t work, please try other servers If the current server doesn&apos;t work, please try other servers
beside. beside.
</p> </p>
</div> </div>
<div className="bg-[#1f1f1f] flex flex-col max-[600px]:h-full"> <div className="bg-[#1f1f1f] flex flex-col max-[600px]:rounded-lg max-[600px]:p-2">
{rawServers.length > 0 && ( {rawServers.length > 0 && (
<div <div className={`servers px-2 flex items-center flex-wrap gap-y-1 ml-2 max-[600px]:py-1.5 max-[600px]:px-1 max-[600px]:ml-0 ${
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${ dubServers.length === 0 || subServers.length === 0
dubServers.length === 0 || subServers.length === 0 ? "h-1/2"
? "h-1/2" : "h-full"
: "h-full" }`}>
}`} <div className="flex items-center gap-x-2 min-w-[65px]">
>
<div className="flex items-center gap-x-2">
<FontAwesomeIcon <FontAwesomeIcon
icon={faFile} icon={faFile}
className="text-[#e0e0e0] text-[13px]" className="text-[#e0e0e0] text-[13px]"
/> />
<p className="font-bold text-[14px]">RAW:</p> <p className="font-bold text-[14px] max-[600px]:text-[12px]">RAW:</p>
</div> </div>
<div className="flex gap-x-[7px] ml-8 flex-wrap"> <div className="flex gap-1.5 ml-2 flex-wrap max-[600px]:ml-0">
{rawServers.map((item, index) => ( {rawServers.map((item, index) => (
<div <div
key={index} key={index}
@@ -97,10 +97,10 @@ function Servers({
activeServerId === item?.data_id activeServerId === item?.data_id
? "bg-[#e0e0e0] text-black" ? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white" : "bg-[#373737] text-white"
} max-[700px]:px-3`} } max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
onClick={() => handleServerSelect(item)} onClick={() => handleServerSelect(item)}
> >
<p className="text-[13px] font-semibold"> <p className="text-[13px] font-semibold max-[600px]:text-[12px]">
{item.serverName} {item.serverName}
</p> </p>
</div> </div>
@@ -109,19 +109,17 @@ function Servers({
</div> </div>
)} )}
{subServers.length > 0 && ( {subServers.length > 0 && (
<div <div className={`servers px-2 flex items-center flex-wrap gap-y-1 ml-2 max-[600px]:py-1.5 max-[600px]:px-1 max-[600px]:ml-0 ${
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${ dubServers.length === 0 ? "h-1/2" : "h-full"
dubServers.length === 0 ? "h-1/2" : "h-full" }`}>
}`} <div className="flex items-center gap-x-2 min-w-[65px]">
>
<div className="flex items-center gap-x-2">
<FontAwesomeIcon <FontAwesomeIcon
icon={faClosedCaptioning} icon={faClosedCaptioning}
className="text-[#e0e0e0] text-[13px]" className="text-[#e0e0e0] text-[13px]"
/> />
<p className="font-bold text-[14px]">SUB:</p> <p className="font-bold text-[14px] max-[600px]:text-[12px]">SUB:</p>
</div> </div>
<div className="flex gap-x-[7px] ml-8 flex-wrap"> <div className="flex gap-1.5 ml-2 flex-wrap max-[600px]:ml-0">
{subServers.map((item, index) => ( {subServers.map((item, index) => (
<div <div
key={index} key={index}
@@ -129,10 +127,10 @@ function Servers({
activeServerId === item?.data_id activeServerId === item?.data_id
? "bg-[#e0e0e0] text-black" ? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white" : "bg-[#373737] text-white"
} max-[700px]:px-3`} } max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
onClick={() => handleServerSelect(item)} onClick={() => handleServerSelect(item)}
> >
<p className="text-[13px] font-semibold"> <p className="text-[13px] font-semibold max-[600px]:text-[12px]">
{item.serverName} {item.serverName}
</p> </p>
</div> </div>
@@ -141,19 +139,17 @@ function Servers({
</div> </div>
)} )}
{dubServers.length > 0 && ( {dubServers.length > 0 && (
<div <div className={`servers px-2 flex items-center flex-wrap gap-y-1 ml-2 max-[600px]:py-1.5 max-[600px]:px-1 max-[600px]:ml-0 ${
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${ subServers.length === 0 ? "h-1/2" : "h-full"
subServers.length === 0 ? "h-1/2 " : "h-full" }`}>
}`} <div className="flex items-center gap-x-2 min-w-[65px]">
>
<div className="flex items-center gap-x-3">
<FontAwesomeIcon <FontAwesomeIcon
icon={faMicrophone} icon={faMicrophone}
className="text-[#e0e0e0] text-[13px]" className="text-[#e0e0e0] text-[13px]"
/> />
<p className="font-bold text-[14px]">DUB:</p> <p className="font-bold text-[14px] max-[600px]:text-[12px]">DUB:</p>
</div> </div>
<div className="flex gap-x-[7px] ml-8 flex-wrap"> <div className="flex gap-1.5 ml-2 flex-wrap max-[600px]:ml-0">
{dubServers.map((item, index) => ( {dubServers.map((item, index) => (
<div <div
key={index} key={index}
@@ -161,10 +157,10 @@ function Servers({
activeServerId === item?.data_id activeServerId === item?.data_id
? "bg-[#e0e0e0] text-black" ? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white" : "bg-[#373737] text-white"
} max-[700px]:px-3`} } max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
onClick={() => handleServerSelect(item)} onClick={() => handleServerSelect(item)}
> >
<p className="text-[13px] font-semibold"> <p className="text-[13px] font-semibold max-[600px]:text-[12px]">
{item.serverName} {item.serverName}
</p> </p>
</div> </div>

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

@@ -226,7 +226,7 @@ export default function Watch() {
}, [animeId, animeInfo]); }, [animeId, animeInfo]);
return ( return (
<div className="w-full min-h-screen bg-[#0a0a0a]"> <div className="w-full min-h-screen bg-[#0a0a0a]">
<div className="w-full max-w-[1920px] mx-auto px-6 pt-[80px] pb-6 max-[1200px]:pt-[48px] max-[1024px]:px-4 max-md:pt-[32px]"> <div className="w-full max-w-[1920px] mx-auto pt-16 px-4 pb-6 w-full max-[1200px]:px-0">
<div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col"> <div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col">
{/* Left Column - Player, Controls, Servers */} {/* Left Column - Player, Controls, Servers */}
<div className="flex flex-col w-full gap-6"> <div className="flex flex-col w-full gap-6">
@@ -355,30 +355,102 @@ export default function Watch() {
</div> </div>
</div> </div>
{/* Mobile-only Seasons Section */}
{seasons?.length > 0 && (
<div className="hidden max-[1200px]:block p-6 bg-[#141414] rounded-lg">
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
<div className="grid grid-cols-2 gap-2">
{seasons.map((season, index) => (
<Link
to={`/${season.id}`}
key={index}
className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${
animeId === String(season.id)
? "ring-2 ring-white/40 shadow-lg shadow-white/10"
: ""
}`}
>
<img
src={season.season_poster}
alt={season.season}
className={`w-full h-full object-cover scale-150 ${
animeId === String(season.id)
? "opacity-50"
: "opacity-40 group-hover:opacity-50 transition-opacity"
}`}
/>
{/* Dots Pattern Overlay */}
<div
className="absolute inset-0 z-10"
style={{
backgroundImage: `url('data:image/svg+xml,<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.5" cy="1.5" r="0.5" fill="white" fill-opacity="0.25"/></svg>')`,
backgroundSize: '3px 3px'
}}
/>
{/* Dark Gradient Overlay */}
<div className={`absolute inset-0 z-20 bg-gradient-to-r ${
animeId === String(season.id)
? "from-black/50 to-transparent"
: "from-black/40 to-transparent"
}`} />
{/* Title Container */}
<div className="absolute inset-0 z-30 flex items-center justify-center">
<p className={`text-[14px] font-bold text-center px-2 transition-colors duration-300 ${
animeId === String(season.id)
? "text-white"
: "text-white/90 group-hover:text-white"
}`}>
{season.season}
</p>
</div>
</Link>
))}
</div>
</div>
)}
{/* Mobile-only Episodes Section */}
<div className="hidden max-[1200px]:block">
<div ref={episodesRef} className="episodes flex-shrink-0 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>
{/* Anime Info Section */} {/* Anime Info Section */}
<div className="p-6 bg-[#141414] rounded-lg"> <div className="p-6 bg-[#141414] rounded-lg max-[600px]:p-4">
<div className="flex gap-x-6 max-[600px]:flex-col max-[600px]:gap-y-4"> <div className="flex gap-x-6 max-[600px]:flex-row max-[600px]:gap-4">
{animeInfo && animeInfo?.poster ? ( {animeInfo && animeInfo?.poster ? (
<img <img
src={`${animeInfo?.poster}`} src={`${animeInfo?.poster}`}
alt="" alt=""
className="w-[120px] h-[180px] object-cover rounded-md max-[600px]:w-full max-[600px]:h-[200px]" className="w-[120px] h-[180px] object-cover rounded-md max-[600px]:w-[100px] max-[600px]:h-[150px]"
/> />
) : ( ) : (
<Skeleton className="w-[120px] h-[180px] rounded-md" /> <Skeleton className="w-[120px] h-[180px] rounded-md max-[600px]:w-[100px] max-[600px]:h-[150px]" />
)} )}
<div className="flex flex-col gap-y-4 flex-1"> <div className="flex flex-col gap-y-4 flex-1 max-[600px]:gap-y-2">
{animeInfo && animeInfo?.title ? ( {animeInfo && animeInfo?.title ? (
<Link <Link
to={`/${animeId}`} to={`/${animeId}`}
className="group" className="group"
> >
<h1 className="text-[28px] font-medium text-white leading-tight group-hover:text-gray-300 transition-colors"> <h1 className="text-[28px] font-medium text-white leading-tight group-hover:text-gray-300 transition-colors max-[600px]:text-[20px]">
{language ? animeInfo?.title : animeInfo?.japanese_title} {language ? animeInfo?.title : animeInfo?.japanese_title}
</h1> </h1>
<div className="flex items-center gap-1.5 mt-1 text-gray-400 text-sm group-hover:text-white transition-colors"> <div className="flex items-center gap-1.5 mt-1 text-gray-400 text-sm group-hover:text-white transition-colors max-[600px]:text-[12px] max-[600px]:mt-0.5">
<span>View Details</span> <span>View Details</span>
<svg className="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg className="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform max-[600px]:w-3 max-[600px]:h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg> </svg>
</div> </div>
@@ -386,13 +458,13 @@ export default function Watch() {
) : ( ) : (
<Skeleton className="w-[170px] h-[20px] rounded-xl" /> <Skeleton className="w-[170px] h-[20px] rounded-xl" />
)} )}
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2 max-[600px]:gap-1.5">
{animeInfo ? ( {animeInfo ? (
tags.map( tags.map(
({ condition, icon, text }, index) => ({ condition, icon, text }, index) =>
condition && ( condition && (
<span key={index} className="px-3 py-1 bg-[#1a1a1a] rounded-full text-sm flex items-center gap-x-1 text-gray-300"> <span key={index} className="px-3 py-1 bg-[#1a1a1a] rounded-full text-sm flex items-center gap-x-1 text-gray-300 max-[600px]:px-2 max-[600px]:py-0.5 max-[600px]:text-[11px]">
{icon && <FontAwesomeIcon icon={icon} className="text-[12px]" />} {icon && <FontAwesomeIcon icon={icon} className="text-[12px] max-[600px]:text-[10px]" />}
{text} {text}
</span> </span>
) )
@@ -402,14 +474,14 @@ export default function Watch() {
)} )}
</div> </div>
{animeInfo?.animeInfo?.Overview && ( {animeInfo?.animeInfo?.Overview && (
<p className="text-[15px] text-gray-400 leading-relaxed"> <p className="text-[15px] text-gray-400 leading-relaxed max-[600px]:text-[13px] max-[600px]:leading-normal">
{animeInfo?.animeInfo?.Overview.length > 270 ? ( {animeInfo?.animeInfo?.Overview.length > 270 ? (
<> <>
{isFullOverview {isFullOverview
? animeInfo?.animeInfo?.Overview ? animeInfo?.animeInfo?.Overview
: `${animeInfo?.animeInfo?.Overview.slice(0, 270)}...`} : `${animeInfo?.animeInfo?.Overview.slice(0, 270)}...`}
<button <button
className="ml-2 text-gray-300 hover:text-white transition-colors" className="ml-2 text-gray-300 hover:text-white transition-colors max-[600px]:text-[12px] max-[600px]:ml-1"
onClick={() => setIsFullOverview(!isFullOverview)} onClick={() => setIsFullOverview(!isFullOverview)}
> >
{isFullOverview ? "Show Less" : "Read More"} {isFullOverview ? "Show Less" : "Read More"}
@@ -424,9 +496,9 @@ export default function Watch() {
</div> </div>
</div> </div>
{/* Seasons Section */} {/* Desktop-only Seasons Section */}
{seasons?.length > 0 && ( {seasons?.length > 0 && (
<div className="p-6 bg-[#141414] rounded-lg"> <div className="p-6 bg-[#141414] rounded-lg max-[1200px]:hidden">
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2> <h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4"> <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
{seasons.map((season, index) => ( {seasons.map((season, index) => (
@@ -479,8 +551,8 @@ export default function Watch() {
)} )}
</div> </div>
{/* Right Column - Episodes and Related */} {/* Right Column - Episodes and Related (Desktop Only) */}
<div className="flex flex-col gap-6 h-full"> <div className="flex flex-col gap-6 h-full max-[1200px]:hidden">
{/* Episodes Section */} {/* Episodes Section */}
<div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden"> <div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden">
{!episodes ? ( {!episodes ? (
@@ -512,6 +584,17 @@ export default function Watch() {
</div> </div>
)} )}
</div> </div>
{/* Mobile-only Related Section */}
{animeInfo && animeInfo.related_data && (
<div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-6">
<h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
<Sidecard
data={animeInfo.related_data}
className="!mt-0"
/>
</div>
)}
</div> </div>
</div> </div>
</div> </div>