fix: TvInfoPage data fetching and handling enhancements

package.json

@@ -21,8 +21,8 @@
     "framer-motion": "^11.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-loading-skeleton": "^3.4.0",
     "react-router-dom": "^6.23.1",
+    "styled-components": "^6.1.11",
     "swiper": "^11.1.4",
     "zustand": "^4.5.2"
   },

src/config/config.ts

@@ -0,0 +1,26 @@
+import defaultConfig from "./default.config.json";
+import overrideConfig from "./override.config.json";
+
+export interface AppConfig {
+  server_path: string;
+  movie_path: string;
+  tv_path: string;
+  season_path: string;
+  episode_path: string;
+  stream_path: string;
+  image_path: string;
+  optimization: boolean;
+}
+
+const APP_CONFIG: AppConfig = {
+  ...defaultConfig,
+  ...overrideConfig,
+};
+
+const APP_PATHS = {
+  movie: APP_CONFIG.server_path + "/" + APP_CONFIG.movie_path,
+  tv: APP_CONFIG.server_path + "/" + APP_CONFIG.tv_path,
+  image: APP_CONFIG.server_path + "/" + APP_CONFIG.image_path,
+};
+
+export { APP_CONFIG, APP_PATHS };

src/config/default.config.json

@@ -0,0 +1,10 @@
+{
+  "server_path": "http://localhost:3003",
+  "movie_path": "movie",
+  "tv_path": "tv",
+  "season_path": "season",
+  "episode_path": "episode",
+  "stream_path": "stream",
+  "image_path": "image",
+  "optimization": false
+}

src/config/override.config.json

@@ -0,0 +1,3 @@
+{
+  "optimization": false
+}

src/lib/components/Cards/EpisodeCard.tsx

@@ -1,13 +1,21 @@
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import Chip from "../Chip";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const EpisodeCard = ({ episode, index }: any) => {
   const [imageLoading, setImageLoading] = useState(true);
 
-  const imageLoaded = () => {
-    setImageLoading(false);
-  };
+  useEffect(() => {
+    const image = new Image();
+    image.onload = () => {
+      setImageLoading(false);
+    };
+    image.src = "https://image.tmdb.org/t/p/w1280" + episode.still_path;
+
+    return () => {
+      image.onload = null;
+    };
+  }, [episode.still_path]);
 
   return (
     <motion.div
@@ -22,31 +30,32 @@ const EpisodeCard = ({ episode, index }: any) => {
         delay: index * 0.05,
       }}
     >
-      <div className="aspect-video bg-zinc-700 rounded-2xl relative overflow-hidden">
+      <div className="aspect-video bg-neutral-600/20 rounded-2xl relative overflow-hidden flex justify-center items-center">
         <div className="absolute p-2 top-0 left-0 z-10">
           <Chip>
             S{episode.season_number}:E{episode.episode_number}
           </Chip>
         </div>
-        <motion.img
-          initial={{ opacity: 0 }}
-          variants={{
-            show: {
-              opacity: 1,
-              transition: {
-                delay: index * 0.05,
-              },
-            },
-            hide: {
-              opacity: 0,
-            },
-          }}
-          animate={imageLoading ? "hide" : "show"}
-          onLoad={imageLoaded}
-          className="w-full h-full object-cover z-0"
-          src={"https://image.tmdb.org/t/p/w1280" + episode.still_path}
-          alt=""
-        />
+        <AnimatePresence>
+          {!imageLoading ? (
+            <motion.img
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: 1,
+              }}
+              exit={{
+                opacity: 0,
+              }}
+              className="w-full h-full object-cover z-0"
+              src={"https://image.tmdb.org/t/p/w1280" + episode.still_path}
+              alt=""
+            />
+          ) : (
+            <motion.div className="text-xs uppercase text-center">
+              Image Not Found
+            </motion.div>
+          )}
+        </AnimatePresence>
         <div className="absolute top-0 left-0 w-full h-full border rounded-2xl border-zinc-400/20 transition-colors"></div>
       </div>
       <div>