Refactor logo fetching logic in useMetadata and MetadataScreen; remove direct TMDB logo fetching from useMetadata, and implement a fallback mechanism in MetadataScreen to first attempt fetching logos from Metahub before falling back to TMDB. Enhance logging for better debugging and maintainability.

src/hooks/useMetadata.ts

@@ -368,18 +368,6 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
                 logger.error('Failed to fetch credits for movie:', error);
               }
               
-              // Fetch movie logo from TMDB
-              try {
-                const logoUrl = await tmdbService.getMovieImages(tmdbId);
-                if (logoUrl) {
-                  formattedMovie.logo = logoUrl;
-                  logger.log(`Successfully fetched logo for movie ${tmdbId} from TMDB`);
-                }
-              } catch (error) {
-                logger.error('Failed to fetch logo from TMDB:', error);
-                // Continue with execution, logo is optional
-              }
-              
               setMetadata(formattedMovie);
               cacheService.setMetadata(id, type, formattedMovie);
               const isInLib = catalogService.getLibraryItems().some(item => item.id === id);
@@ -496,40 +484,10 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
         setInLibrary(isInLib);
         cacheService.setMetadata(id, type, content.value);
 
-        // Fetch and add logo from TMDB
+        // Set the final metadata state without fetching logo (this will be handled by MetadataScreen)
-        let finalMetadata = { ...content.value };
+        setMetadata(content.value);
-        try {
+        // Update cache
-          // Get TMDB ID if not already set
+        cacheService.setMetadata(id, type, content.value);
-          const contentTmdbId = await tmdbService.extractTMDBIdFromStremioId(id);
-          if (contentTmdbId) {
-            // Determine content type for TMDB API (movie or tv)
-            const tmdbType = type === 'series' ? 'tv' : 'movie';
-            // Fetch logo from TMDB
-            const logoUrl = await tmdbService.getContentLogo(tmdbType, contentTmdbId);
-            if (logoUrl) {
-              // Update metadata with logo
-              finalMetadata.logo = logoUrl;
-              logger.log(`[useMetadata] Successfully fetched and set logo from TMDB for ${id}`);
-            } else {
-              // If TMDB has no logo, ensure logo property is null/undefined
-              finalMetadata.logo = undefined;
-              logger.log(`[useMetadata] No logo found on TMDB for ${id}. Setting logo to undefined.`);
-            }
-          } else {
-            // If we couldn't get a TMDB ID, ensure logo is null/undefined
-             finalMetadata.logo = undefined;
-             logger.log(`[useMetadata] Could not determine TMDB ID for ${id}. Setting logo to undefined.`);
-          }
-        } catch (error) {
-          logger.error(`[useMetadata] Error fetching logo from TMDB for ${id}:`, error);
-          // Ensure logo is null/undefined on error
-           finalMetadata.logo = undefined;
-        }
-        
-        // Set the final metadata state
-        setMetadata(finalMetadata);
-        // Update cache with final metadata (including potentially nulled logo)
-        cacheService.setMetadata(id, type, finalMetadata);
 
         if (type === 'series') {
           // Load series data in parallel with other data

src/screens/MetadataScreen.tsx

@@ -259,29 +259,78 @@ const MetadataScreen = () => {
 
   // Fetch logo immediately for TMDB content
   useEffect(() => {
-    if (metadata && id.startsWith('tmdb:') && !metadata.logo) {
+    if (metadata && !metadata.logo) {
       const fetchLogo = async () => {
         try {
-          const tmdbId = id.split(':')[1];
+          // First try to get logo from Metahub
-          const tmdbType = type === 'series' ? 'tv' : 'movie';
+          const metahubUrl = `https://images.metahub.space/logo/medium/${imdbId}/img`;
-          const logoUrl = await TMDBService.getInstance().getContentLogo(tmdbType, tmdbId);
           
-          if (logoUrl) {
+          logger.log(`[MetadataScreen] Attempting to fetch logo from Metahub for ${imdbId}`);
-            // Update metadata with logo
+          
-            setMetadata(prevMetadata => ({
+          // Test if Metahub logo exists with a HEAD request
-              ...prevMetadata!,
+          try {
-              logo: logoUrl
+            const response = await fetch(metahubUrl, { method: 'HEAD' });
-            }));
+            if (response.ok) {
-            logger.log(`Successfully fetched logo for ${type} ${tmdbId} from TMDB on MetadataScreen`);
+              logger.log(`[MetadataScreen] Successfully fetched logo from Metahub:
+                - Content ID: ${id}
+                - Content Type: ${type}
+                - Logo URL: ${metahubUrl}
+              `);
+              
+              // Update metadata with Metahub logo
+              setMetadata(prevMetadata => ({
+                ...prevMetadata!,
+                logo: metahubUrl
+              }));
+              return; // Exit if Metahub logo was found
+            }
+          } catch (metahubError) {
+            logger.warn(`[MetadataScreen] Failed to fetch logo from Metahub:`, metahubError);
+          }
+
+          // If Metahub fails, try TMDB as fallback
+          if (id.startsWith('tmdb:')) {
+            const tmdbId = id.split(':')[1];
+            const tmdbType = type === 'series' ? 'tv' : 'movie';
+            
+            logger.log(`[MetadataScreen] Attempting to fetch logo from TMDB as fallback for ${tmdbType} (ID: ${tmdbId})`);
+            
+            const logoUrl = await TMDBService.getInstance().getContentLogo(tmdbType, tmdbId);
+            
+            if (logoUrl) {
+              logger.log(`[MetadataScreen] Successfully fetched fallback logo from TMDB:
+                - Content Type: ${tmdbType}
+                - TMDB ID: ${tmdbId}
+                - Logo URL: ${logoUrl}
+              `);
+              
+              // Update metadata with TMDB logo
+              setMetadata(prevMetadata => ({
+                ...prevMetadata!,
+                logo: logoUrl
+              }));
+            } else {
+              logger.warn(`[MetadataScreen] No logo found from either Metahub or TMDB for ${type} (ID: ${id})`);
+            }
           }
         } catch (error) {
-          logger.error('Failed to fetch logo in MetadataScreen:', error);
+          logger.error('[MetadataScreen] Failed to fetch logo from all sources:', {
+            error,
+            contentId: id,
+            contentType: type
+          });
         }
       };
       
       fetchLogo();
+    } else if (metadata?.logo) {
+      logger.log(`[MetadataScreen] Using existing logo from metadata:
+        - Content ID: ${id}
+        - Content Type: ${type}
+        - Logo URL: ${metadata.logo}
+      `);
     }
-  }, [id, type, metadata, setMetadata]);
+  }, [id, type, metadata, setMetadata, imdbId]);
 
   // Function to get episode details from episodeId
   const getEpisodeDetails = useCallback((episodeId: string): { seasonNumber: string; episodeNumber: string; episodeName: string } | null => {