From df8ac7352df071e4cc5f84b5c6f433e9a7eaad83 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Fri, 4 Jul 2025 17:15:32 +0530
Subject: [PATCH] Add episodeThumbnail parameter to navigation and enhance
 StreamsScreen image handling

This update introduces the episodeThumbnail parameter in the navigation between MetadataScreen and StreamsScreen, allowing for improved image handling. The StreamsScreen now utilizes the episodeThumbnail for displaying images, with additional checks for URL validity, enhancing the user experience and ensuring more reliable image rendering.
---
 src/navigation/AppNavigator.tsx |  1 +
 src/screens/MetadataScreen.tsx  |  8 +++++++-
 src/screens/StreamsScreen.tsx   | 17 +++++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
index aaad6f6..8f1f1e6 100644
--- a/src/navigation/AppNavigator.tsx
+++ b/src/navigation/AppNavigator.tsx
@@ -59,6 +59,7 @@ export type RootStackParamList = {
     id: string; 
     type: string;
     episodeId?: string;
+    episodeThumbnail?: string;
   };
   VideoPlayer: { 
     id: string; 
diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx
index a91fcc5..e771f00 100644
--- a/src/screens/MetadataScreen.tsx
+++ b/src/screens/MetadataScreen.tsx
@@ -222,8 +222,14 @@ const MetadataScreen: React.FC = () => {
   }, [navigation, id, type, episodes, episodeId, watchProgressData.watchProgress]);
 
   const handleEpisodeSelect = useCallback((episode: Episode) => {
+    console.log('[MetadataScreen] Selected Episode:', JSON.stringify(episode, null, 2));
     const episodeId = episode.stremioId || `${id}:${episode.season_number}:${episode.episode_number}`;
-    navigation.navigate('Streams', { id, type, episodeId });
+    navigation.navigate('Streams', { 
+      id, 
+      type, 
+      episodeId,
+      episodeThumbnail: episode.still_path || undefined
+    });
   }, [navigation, id, type]);
 
   const handleBack = useCallback(() => navigation.goBack(), [navigation]);
diff --git a/src/screens/StreamsScreen.tsx b/src/screens/StreamsScreen.tsx
index c2f723b..ea89852 100644
--- a/src/screens/StreamsScreen.tsx
+++ b/src/screens/StreamsScreen.tsx
@@ -232,7 +232,7 @@ const ProviderFilter = memo(({
 export const StreamsScreen = () => {
   const route = useRoute<RouteProp<RootStackParamList, 'Streams'>>();
   const navigation = useNavigation<RootStackNavigationProp>();
-  const { id, type, episodeId } = route.params;
+  const { id, type, episodeId, episodeThumbnail } = route.params;
   const { settings } = useSettings();
   const { currentTheme } = useTheme();
   const { colors } = currentTheme;
@@ -255,6 +255,10 @@ export const StreamsScreen = () => {
     }
   }, []);
 
+  useEffect(() => {
+    console.log('[StreamsScreen] Received thumbnail from params:', episodeThumbnail);
+  }, [episodeThumbnail]);
+
   const {
     metadata,
     episodes,
@@ -904,12 +908,21 @@ export const StreamsScreen = () => {
   }, [selectedProvider, type, episodeStreams, groupedStreams]);
 
   const episodeImage = useMemo(() => {
+    if (episodeThumbnail) {
+      if (episodeThumbnail.startsWith('http')) {
+        return episodeThumbnail;
+      }
+      return tmdbService.getImageUrl(episodeThumbnail, 'original');
+    }
     if (!currentEpisode) return null;
     if (currentEpisode.still_path) {
+      if (currentEpisode.still_path.startsWith('http')) {
+        return currentEpisode.still_path;
+      }
       return tmdbService.getImageUrl(currentEpisode.still_path, 'original');
     }
     return metadata?.poster || null;
-  }, [currentEpisode, metadata]);
+  }, [currentEpisode, metadata, episodeThumbnail]);
 
   const isLoading = type === 'series' ? loadingEpisodeStreams : loadingStreams;
   const streams = type === 'series' ? episodeStreams : groupedStreams;