mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 22:01:45 +00:00
Fixed Watch Page
This commit is contained in:
Tejas Panchal
@@ -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>
|
||||
|
||||
@@ -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'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 ${
|
||||
dubServers.length === 0 || subServers.length === 0
|
||||
? "h-1/2"
|
||||
: "h-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-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 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 ${
|
||||
dubServers.length === 0 ? "h-1/2" : "h-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-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 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 ${
|
||||
subServers.length === 0 ? "h-1/2 " : "h-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<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-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>
|
||||
|
||||
Reference in New Issue
Block a user