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 (
<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="flex items-center gap-4">
<h1 className="text-[14px] font-semibold text-white">Episodes</h1>
<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 max-[600px]:gap-2">
<h1 className="text-[14px] font-semibold text-white max-[600px]:text-[13px]">Episodes</h1>
{totalEpisodes > 100 && (
<div className="flex items-center">
<div
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}
>
<FontAwesomeIcon icon={faList} className="text-gray-400" />
<p className="text-[12px]">
<p className="text-[12px] max-[600px]:text-[11px]">
{selectedRange[0]}-{selectedRange[1]}
</p>
<FontAwesomeIcon
@@ -169,7 +169,7 @@ function Episodelist({
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 === activeRange ? (
<FontAwesomeIcon icon={faCheck} className="text-white" />
@@ -185,15 +185,15 @@ function Episodelist({
</div>
{totalEpisodes > 100 && (
<div className="flex items-center min-w-[180px]">
<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="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 max-[600px]:px-2 max-[600px]:py-1">
<FontAwesomeIcon
icon={faMagnifyingGlass}
className="text-[12px] text-gray-400"
/>
<input
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..."
onChange={handleChange}
/>
@@ -202,11 +202,14 @@ function Episodelist({
)}
</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
className={`${
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
key={item?.id}
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
? isActive
? "bg-white text-black"
@@ -262,7 +265,7 @@ function Episodelist({
<div
key={item?.id}
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
? "bg-[#202020]"
: "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}
</p>
<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"
}`}>
{language === "EN" ? item?.title : item?.japanese_title}
@@ -289,7 +292,7 @@ function Episodelist({
{isActive && (
<FontAwesomeIcon
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>

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

@@ -53,43 +53,43 @@ function Servers({
localStorage.setItem("server_name", server.serverName);
localStorage.setItem("server_type", server.type);
};
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 ? (
<div className="w-full h-full rounded-lg flex justify-center items-center max-[600px]:rounded-none">
<BouncingLoader />
</div>
) : 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="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]">
You are watching <br />
<span className="font-semibold max-[600px]:text-[#e0e0e0]">
<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-auto max-[600px]:text-white max-[600px]:py-1 max-[600px]:px-2">
<p className="text-center leading-5 font-medium text-[14px] max-[600px]:text-[13px] max-[600px]:mb-0">
You are watching{" "}
<br className="max-[600px]:hidden" />
<span className="font-semibold max-[600px]:text-[#e0e0e0] max-[600px]:ml-1">
Episode {activeEpisodeNum}
</span>
</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
beside.
</p>
</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 && (
<div
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
<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 ${
dubServers.length === 0 || subServers.length === 0
? "h-1/2"
: "h-full"
}`}
>
<div className="flex items-center gap-x-2">
}`}>
<div className="flex items-center gap-x-2 min-w-[65px]">
<FontAwesomeIcon
icon={faFile}
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 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) => (
<div
key={index}
@@ -97,10 +97,10 @@ function Servers({
activeServerId === item?.data_id
? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white"
} max-[700px]:px-3`}
} max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
onClick={() => handleServerSelect(item)}
>
<p className="text-[13px] font-semibold">
<p className="text-[13px] font-semibold max-[600px]:text-[12px]">
{item.serverName}
</p>
</div>
@@ -109,19 +109,17 @@ function Servers({
</div>
)}
{subServers.length > 0 && (
<div
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
<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 ${
dubServers.length === 0 ? "h-1/2" : "h-full"
}`}
>
<div className="flex items-center gap-x-2">
}`}>
<div className="flex items-center gap-x-2 min-w-[65px]">
<FontAwesomeIcon
icon={faClosedCaptioning}
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 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) => (
<div
key={index}
@@ -129,10 +127,10 @@ function Servers({
activeServerId === item?.data_id
? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white"
} max-[700px]:px-3`}
} max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
onClick={() => handleServerSelect(item)}
>
<p className="text-[13px] font-semibold">
<p className="text-[13px] font-semibold max-[600px]:text-[12px]">
{item.serverName}
</p>
</div>
@@ -141,19 +139,17 @@ function Servers({
</div>
)}
{dubServers.length > 0 && (
<div
className={`servers px-2 flex items-center flex-wrap ml-2 max-[600px]:py-2 ${
<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 ${
subServers.length === 0 ? "h-1/2" : "h-full"
}`}
>
<div className="flex items-center gap-x-3">
}`}>
<div className="flex items-center gap-x-2 min-w-[65px]">
<FontAwesomeIcon
icon={faMicrophone}
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 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) => (
<div
key={index}
@@ -161,10 +157,10 @@ function Servers({
activeServerId === item?.data_id
? "bg-[#e0e0e0] text-black"
: "bg-[#373737] text-white"
} max-[700px]:px-3`}
} max-[700px]:px-3 max-[600px]:px-2 max-[600px]:py-1`}
onClick={() => handleServerSelect(item)}
>
<p className="text-[13px] font-semibold">
<p className="text-[13px] font-semibold max-[600px]:text-[12px]">
{item.serverName}
</p>
</div>

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

@@ -226,7 +226,7 @@ export default function Watch() {
}, [animeId, animeInfo]);
return (
<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">
{/* Left Column - Player, Controls, Servers */}
<div className="flex flex-col w-full gap-6">
@@ -355,30 +355,102 @@ export default function Watch() {
</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 */}
<div className="p-6 bg-[#141414] rounded-lg">
<div className="flex gap-x-6 max-[600px]:flex-col max-[600px]:gap-y-4">
<div className="p-6 bg-[#141414] rounded-lg max-[600px]:p-4">
<div className="flex gap-x-6 max-[600px]:flex-row max-[600px]:gap-4">
{animeInfo && animeInfo?.poster ? (
<img
src={`${animeInfo?.poster}`}
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 ? (
<Link
to={`/${animeId}`}
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}
</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>
<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" />
</svg>
</div>
@@ -386,13 +458,13 @@ export default function Watch() {
) : (
<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 ? (
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]" />}
<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] max-[600px]:text-[10px]" />}
{text}
</span>
)
@@ -402,14 +474,14 @@ export default function Watch() {
)}
</div>
{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 ? (
<>
{isFullOverview
? animeInfo?.animeInfo?.Overview
: `${animeInfo?.animeInfo?.Overview.slice(0, 270)}...`}
<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)}
>
{isFullOverview ? "Show Less" : "Read More"}
@@ -424,9 +496,9 @@ export default function Watch() {
</div>
</div>
{/* Seasons Section */}
{/* Desktop-only Seasons Section */}
{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>
<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) => (
@@ -479,8 +551,8 @@ export default function Watch() {
)}
</div>
{/* Right Column - Episodes and Related */}
<div className="flex flex-col gap-6 h-full">
{/* Right Column - Episodes and Related (Desktop Only) */}
<div className="flex flex-col gap-6 h-full max-[1200px]:hidden">
{/* Episodes Section */}
<div ref={episodesRef} className="episodes flex-shrink-0 bg-[#141414] rounded-lg overflow-hidden">
{!episodes ? (
@@ -512,6 +584,17 @@ export default function Watch() {
</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>