shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-18 06:11:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

episode container resolved

Browse Source
This commit is contained in:
Tejas Panchal
2026-02-19 11:57:30 +05:30
parent b1636ce8c4
commit 9f91a9ae75
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -83,7 +83,7 @@ export default function Watch() {
} = useWatchControl(); } = useWatchControl();
const videoContainerRef = useRef(null); const videoContainerRef = useRef(null);
const controlsRef = useRef(null); const playerRef = useRef(null);
const episodesRef = useRef(null); const episodesRef = useRef(null);
// Sync URL with episodeId // Sync URL with episodeId
@@ -116,20 +116,20 @@ export default function Watch() {
// Height adjustment logic // Height adjustment logic
const adjustHeight = useCallback(() => { const adjustHeight = useCallback(() => {
if (window.innerWidth > 1200) { if (window.innerWidth > 1200) {
if (videoContainerRef.current && controlsRef.current && episodesRef.current) { if (playerRef.current && episodesRef.current) {
const totalHeight = videoContainerRef.current.offsetHeight + controlsRef.current.offsetHeight; episodesRef.current.style.height = 'auto';
episodesRef.current.style.height = `${totalHeight}px`; episodesRef.current.style.maxHeight = `${playerRef.current.offsetHeight}px`;
} }
} else if (episodesRef.current) { } else if (episodesRef.current) {
episodesRef.current.style.height = 'auto'; episodesRef.current.style.height = 'auto';
episodesRef.current.style.maxHeight = 'none';
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
const resizeObserver = new ResizeObserver(adjustHeight); const resizeObserver = new ResizeObserver(adjustHeight);
if (videoContainerRef.current) resizeObserver.observe(videoContainerRef.current); if (playerRef.current) resizeObserver.observe(playerRef.current);
if (controlsRef.current) resizeObserver.observe(controlsRef.current);
window.addEventListener('resize', adjustHeight); window.addEventListener('resize', adjustHeight);
adjustHeight(); adjustHeight();
@@ -193,11 +193,11 @@ export default function Watch() {
<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 pt-20 pb-6 max-[1200px]:pt-16"> <div className="w-full max-w-[1920px] mx-auto pt-20 pb-6 max-[1200px]:pt-16">
<div className="grid grid-cols-[1fr_350px] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col px-4 lg:px-6"> <div className="grid grid-cols-[1fr_350px] items-start gap-6 w-full max-[1200px]:flex max-[1200px]:flex-col px-4 lg:px-6">
{/* Left Column */} {/* Left Column */}
<div className="flex flex-col w-full gap-6"> <div className="flex flex-col w-full gap-6">
<div className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden shadow-2xl"> <div ref={playerRef} className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden shadow-2xl">
<div ref={videoContainerRef} className="w-full relative aspect-video bg-black"> <div ref={videoContainerRef} className="w-full relative aspect-video bg-black">
{!buffering ? ( {!buffering ? (
["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ? ( ["hd-1", "hd-4"].includes(activeServerName.toLowerCase()) ? (
@@ -246,7 +246,7 @@ export default function Watch() {
<div className="bg-[#121212]"> <div className="bg-[#121212]">
{!buffering && ( {!buffering && (
<div ref={controlsRef}> <div>
<Watchcontrols <Watchcontrols
autoPlay={autoPlay} setAutoPlay={setAutoPlay} autoPlay={autoPlay} setAutoPlay={setAutoPlay}
autoSkipIntro={autoSkipIntro} setAutoSkipIntro={setAutoSkipIntro} autoSkipIntro={autoSkipIntro} setAutoSkipIntro={setAutoSkipIntro}
@@ -365,9 +365,10 @@ export default function Watch() {
{/* Right Column (Desktop Only) */} {/* Right Column (Desktop Only) */}
<div className="flex flex-col gap-6 max-[1200px]:hidden"> <div className="flex flex-col gap-6 max-[1200px]:hidden">
<div ref={episodesRef} className="episodes h-full bg-[#141414] rounded-xl overflow-hidden shadow-lg border border-white/5"> <div ref={episodesRef} className="episodes flex flex-col bg-[#141414] rounded-xl overflow-hidden shadow-lg border border-white/5">
{!episodes ? ( {!episodes ? (
<div className="h-full flex items-center justify-center"><BouncingLoader /></div> <div className="flex-1 flex items-center justify-center min-h-[400px]">
<BouncingLoader /></div>
) : ( ) : (
<Episodelist <Episodelist
episodes={episodes} episodes={episodes}