ESlint patch

frontend/app/watch/tvshow/[title]/[season]/[episode]/page.tsx

@@ -5,54 +5,60 @@ import TvShowPlayer from '@/components/tvshow/TvShowPlayerv2';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { getTvShowMetadata } from '@/lib/lb';
+
+interface TvShow {
+    name: string;
+    image: string;
+    translations?: any;
+    year?: number;
+    genres?: any[];
+    score?: number;
+    contentRatings?: any[];
+    characters?: any;
+    artworks?: any[];
+    file_structure?: any;
+}
+
+interface FileStructure {
+    contents?: any[];
+}
+
+
 const TvShowPlayerPage = () => {
-    // Assuming you get the movie title from the route params
     const router = useRouter();
     const { title, season, episode } = useParams();
     const videoTitle = Array.isArray(title) ? title[0] : title;
     const decodedTitle = decodeURIComponent(videoTitle);
+
+    // State hooks, they should be outside the conditional logic
+    const [tvshow, setTvShow] = useState<TvShow | null>(null);
+    const [fileStructure, setFileStructure] = useState<FileStructure>({});
+
     const handleClose = () => {
         router.back();
     };
 
+    // Early return if title, season, or episode is missing
     if (!title || !season || !episode) {
         return <div>tvshow title, season or episode is missing.</div>;
     }
-        interface TvShow {
-            name: string;
-            image: string;
-            translations?: any;
-            year?: number;
-            genres?: any[];
-            score?: number;
-            contentRatings?: any[];
-            characters?: any;
-            artworks?: any[];
-            file_structure?: any;
-        }
-    
-        interface FileStructure {
-            contents?: any[];
-        }
-    
-        const [tvshow, setTvShow] = useState<TvShow | null>(null);
-        const [fileStructure, setFileStructure] = useState<FileStructure>({});
-    
-        useEffect(() => {
-            async function fetchMovie() {
-                try {
-                    const data = await getTvShowMetadata(decodedTitle);
-                    setTvShow(data.data);
-                    setFileStructure(data.file_structure);
-                } catch (error) {
-                    console.error('Failed to fetch movie details', error);
-                }
+
+    useEffect(() => {
+        async function fetchTvShow() {
+            try {
+                const data = await getTvShowMetadata(decodedTitle);
+                setTvShow(data.data);
+                setFileStructure(data.file_structure);
+            } catch (error) {
+                console.error('Failed to fetch TV show details', error);
             }
-            fetchMovie();
-        }, [decodedTitle]);
+        }
+        fetchTvShow();
+    }, [decodedTitle]);
+
     return (
         <TvShowPlayer
-            videoTitle={decodeURIComponent(videoTitle) as string}
+            videoTitle={decodedTitle}
             season={season as string}
             episode={episode as string}
             fileStructure={fileStructure}