From e1eb88c9baee9d86bbd99d5d4490f434d9158e8f Mon Sep 17 00:00:00 2001 From: tapframe Date: Sat, 3 May 2025 18:31:56 +0530 Subject: [PATCH] Implement logo fetching for Breaking Bad in LogoSourceSettings screen Enhance the LogoSourceSettings component to fetch and display logos for the TV show "Breaking Bad" from both TMDB and Metahub. Introduce loading states and error handling for logo retrieval, utilizing the TMDB API for dynamic logo fetching and providing fallback options. Update the UI to reflect the selected logo source preference, improving user experience and visual feedback during loading. --- src/screens/LogoSourceSettings.tsx | 166 ++++++++++++++++++++++++++--- 1 file changed, 153 insertions(+), 13 deletions(-) diff --git a/src/screens/LogoSourceSettings.tsx b/src/screens/LogoSourceSettings.tsx index 45b930e9..30bb1ab0 100644 --- a/src/screens/LogoSourceSettings.tsx +++ b/src/screens/LogoSourceSettings.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { View, Text, @@ -10,7 +10,8 @@ import { Image, Alert, StatusBar, - Platform + Platform, + ActivityIndicator } from 'react-native'; import { NavigationProp, useNavigation } from '@react-navigation/native'; import { MaterialIcons } from '@expo/vector-icons'; @@ -18,6 +19,11 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import { colors } from '../styles/colors'; import { useSettings } from '../hooks/useSettings'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { TMDBService } from '../services/tmdbService'; +import { logger } from '../utils/logger'; + +// TMDB API key - since the default key might be private in the service, we'll use our own +const TMDB_API_KEY = '439c478a771f35c05022f9feabcca01c'; const LogoSourceSettings = () => { const { settings, updateSetting } = useSettings(); @@ -28,6 +34,118 @@ const LogoSourceSettings = () => { const [logoSource, setLogoSource] = useState<'metahub' | 'tmdb'>( settings.logoSourcePreference || 'metahub' ); + + // Add state for example logos + const [tmdbLogo, setTmdbLogo] = useState(null); + const [metahubLogo, setMetahubLogo] = useState(null); + const [loadingLogos, setLoadingLogos] = useState(true); + + // Load example logos on mount + useEffect(() => { + const fetchExampleLogos = async () => { + setLoadingLogos(true); + + try { + const tmdbService = TMDBService.getInstance(); + + // Specifically search for Breaking Bad + const searchResults = await tmdbService.searchTVShow("Breaking Bad"); + + if (searchResults && searchResults.length > 0) { + // Get Breaking Bad (should be the first result) + const breakingBad = searchResults[0]; + const breakingBadId = breakingBad.id; + + logger.log(`[LogoSourceSettings] Found Breaking Bad with TMDB ID: ${breakingBadId}`); + + // Get the external IDs to get IMDB ID + const externalIds = await tmdbService.getShowExternalIds(breakingBadId); + + if (externalIds?.imdb_id) { + const imdbId = externalIds.imdb_id; + logger.log(`[LogoSourceSettings] Breaking Bad IMDB ID: ${imdbId}`); + + // Get TMDB logo using the images endpoint + try { + // Manually fetch images from TMDB API + const apiKey = TMDB_API_KEY; // Use the TMDB API key + const response = await fetch(`https://api.themoviedb.org/3/tv/${breakingBadId}/images?api_key=${apiKey}`); + const imagesData = await response.json(); + + if (imagesData.logos && imagesData.logos.length > 0) { + // Look for English logo first + let logoPath = null; + + // First try to find an English logo + const englishLogo = imagesData.logos.find((logo: { iso_639_1: string; file_path: string }) => + logo.iso_639_1 === 'en' + ); + if (englishLogo) { + logoPath = englishLogo.file_path; + } else if (imagesData.logos[0]) { + // Fallback to the first logo + logoPath = imagesData.logos[0].file_path; + } + + if (logoPath) { + const tmdbLogoUrl = `https://image.tmdb.org/t/p/original${logoPath}`; + setTmdbLogo(tmdbLogoUrl); + logger.log(`[LogoSourceSettings] Got Breaking Bad TMDB logo: ${tmdbLogoUrl}`); + } else { + // Fallback to hardcoded Breaking Bad TMDB logo + setTmdbLogo('https://image.tmdb.org/t/p/original/ggFHVNu6YYI5L9pCfOacjizRGt.png'); + logger.log(`[LogoSourceSettings] Using fallback Breaking Bad TMDB logo`); + } + } else { + // No logos found in the response + setTmdbLogo('https://image.tmdb.org/t/p/original/ggFHVNu6YYI5L9pCfOacjizRGt.png'); + logger.log(`[LogoSourceSettings] No logos found in TMDB response, using fallback`); + } + } catch (tmdbError) { + logger.error(`[LogoSourceSettings] Error fetching TMDB images:`, tmdbError); + // Fallback to hardcoded Breaking Bad TMDB logo + setTmdbLogo('https://image.tmdb.org/t/p/original/ggFHVNu6YYI5L9pCfOacjizRGt.png'); + } + + // Get Metahub logo + const metahubLogoUrl = `https://images.metahub.space/logo/medium/${imdbId}/img`; + + // Check if Metahub logo exists + try { + const metahubResponse = await fetch(metahubLogoUrl, { method: 'HEAD' }); + if (metahubResponse.ok) { + setMetahubLogo(metahubLogoUrl); + logger.log(`[LogoSourceSettings] Got Breaking Bad Metahub logo: ${metahubLogoUrl}`); + } else { + // Fallback to hardcoded Breaking Bad Metahub logo + setMetahubLogo('https://images.metahub.space/logo/medium/tt0903747/img'); + logger.log(`[LogoSourceSettings] Using fallback Breaking Bad Metahub logo`); + } + } catch (metahubErr) { + logger.error(`[LogoSourceSettings] Error checking Metahub logo:`, metahubErr); + // Fallback to hardcoded Breaking Bad Metahub logo + setMetahubLogo('https://images.metahub.space/logo/medium/tt0903747/img'); + } + } + } else { + logger.warn(`[LogoSourceSettings] Breaking Bad not found in search results`); + // Use hardcoded Breaking Bad logos + setTmdbLogo('https://image.tmdb.org/t/p/original/ggFHVNu6YYI5L9pCfOacjizRGt.png'); + setMetahubLogo('https://images.metahub.space/logo/medium/tt0903747/img'); + } + } catch (err) { + logger.error('[LogoSourceSettings] Error fetching Breaking Bad logos:', err); + + // Use hardcoded Breaking Bad logos + setTmdbLogo('https://image.tmdb.org/t/p/original/ggFHVNu6YYI5L9pCfOacjizRGt.png'); + setMetahubLogo('https://images.metahub.space/logo/medium/tt0903747/img'); + } finally { + setLoadingLogos(false); + } + }; + + fetchExampleLogos(); + }, []); // Apply setting and show confirmation const applyLogoSourceSetting = (source: 'metahub' | 'tmdb') => { @@ -54,6 +172,25 @@ const LogoSourceSettings = () => { navigation.goBack(); }; + // Render logo example with loading state + const renderLogoExample = (url: string | null, isLoading: boolean) => { + if (isLoading) { + return ( + + + + ); + } + + return ( + + ); + }; + return ( @@ -103,11 +240,8 @@ const LogoSourceSettings = () => { Example: - + {renderLogoExample(metahubLogo, loadingLogos)} + Breaking Bad logo from Metahub @@ -132,11 +266,8 @@ const LogoSourceSettings = () => { Example: - + {renderLogoExample(tmdbLogo, loadingLogos)} + Breaking Bad logo from TMDB @@ -235,9 +366,13 @@ const styles = StyleSheet.create({ exampleImage: { height: 60, width: '100%', - backgroundColor: 'rgba(0,0,0,0.3)', + backgroundColor: 'rgba(0,0,0,0.5)', borderRadius: 8, }, + loadingContainer: { + justifyContent: 'center', + alignItems: 'center', + }, infoBox: { margin: 16, padding: 16, @@ -251,6 +386,11 @@ const styles = StyleSheet.create({ fontSize: 14, lineHeight: 20, }, + logoSourceLabel: { + color: colors.mediumEmphasis, + fontSize: 12, + marginTop: 4, + }, }); export default LogoSourceSettings; \ No newline at end of file