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 aaad6f61..8f1f1e66 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 a91fcc51..e771f007 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 c2f723b6..ea898528 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;