2.7.1

next.config.js

@@ -6,7 +6,7 @@ const nextConfig = {
 			protocol: 'https',
 			hostname: 'image.tmdb.org',
 			port: '',
-			pathname: '/t/p/w200/**',
+			pathname: '/**',
 		  },
 		  {
 			protocol: 'https',

package.json

@@ -1,6 +1,6 @@
 {
    "name": "debrid-media-manager",
-   "version": "2.7.0",
+   "version": "2.7.1",
    "private": false,
    "scripts": {
       "dev": "next dev",

src/components/poster.tsx

@@ -1,38 +1,52 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import axios from 'axios';
 import Image from 'next/image';
 import { getTmdbKey } from '@/utils/freekeys';
 
-const TMDBPoster = ({ imdbId }: Record<string, string>) => {
+const Poster = ({ imdbId }: Record<string, string>) => {
   const [posterUrl, setPosterUrl] = useState('');
+  const [imgLoaded, setImgLoaded] = useState(false);
+  const imgRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
       const response = await axios.get(`https://api.themoviedb.org/3/find/${imdbId}?api_key=${getTmdbKey()}&external_source=imdb_id`);
       const baseUrl = 'https://image.tmdb.org/t/p/w200';
-      if (response.data.movie_results.length > 0 && response.data.movie_results[0].poster_path) {
-        setPosterUrl(baseUrl + response.data.movie_results[0].poster_path);
-      } if (response.data.tv_results.length > 0 && response.data.tv_results[0].poster_path) {
-        setPosterUrl(baseUrl + response.data.tv_results[0].poster_path);
-      } else {
-        // If no poster_path, set a placeholder image URL
-        setPosterUrl(`https://picsum.photos/seed/${imdbId}/200/300`);
-      }
+      const posterPath = response.data.movie_results[0]?.poster_path || response.data.tv_results[0]?.poster_path;
+      if (!posterPath) setPosterUrl(`https://picsum.photos/seed/${imdbId}/200/300`);
+      else setPosterUrl(`${baseUrl}${posterPath}`);
     };
 
+    const imgObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          fetchData();
+          setImgLoaded(true);
+          observer.disconnect();
+        }
+      });
+    });
+
     try {
-      if (imdbId) fetchData();
-      else setPosterUrl(`https://picsum.photos/seed/${imdbId}/200/300`);
+      if (imdbId && imgRef.current) {
+        imgObserver.observe(imgRef.current);
+      } else {
+        setPosterUrl(`https://picsum.photos/seed/${imdbId}/200/300`);
+      }
     } catch (error: any) {
       setPosterUrl(`https://picsum.photos/seed/${imdbId}/200/300`);
     }
+
+    return () => {
+      imgObserver.disconnect();
+    };
   }, [imdbId]);
 
   return (
-    <div>
-      {posterUrl && <Image width={200} height={300} src={posterUrl} alt="Movie poster" />}
+    <div ref={imgRef}>
+      {imgLoaded && posterUrl && <Image width={200} height={300} src={posterUrl} alt="Movie poster" />}
     </div>
   );
 };
 
-export default TMDBPoster;
+export default Poster;

src/pages/api/moviesearch.ts

@@ -18,7 +18,7 @@ const handler: NextApiHandler = async (req, res) => {
             return;
         }
 
-        res.status(204).json({ results: [] });
+        res.status(204).json(null);
     } catch (error: any) {
         console.error('encountered a db issue', error);
         res.status(500).json({ errorMessage: error.message });

src/pages/api/tvsearch.ts

@@ -26,7 +26,7 @@ const handler: NextApiHandler = async (req, res) => {
 			return;
 		}
 
-		res.status(204).json({ results: [] });
+		res.status(204).json(null);
 	} catch (error: any) {
 		console.error('encountered a db issue', error);
 		res.status(500).json({ errorMessage: error.message });