diff --git a/src/screens/LogoSourceSettings.tsx b/src/screens/LogoSourceSettings.tsx index 1ae37e77..72017003 100644 --- a/src/screens/LogoSourceSettings.tsx +++ b/src/screens/LogoSourceSettings.tsx @@ -96,6 +96,33 @@ const LogoSourceSettings = () => { setSelectedTmdbLanguage(settings.tmdbLanguagePreference || 'en'); }, [settings.tmdbLanguagePreference]); + // Force reload settings from AsyncStorage when component mounts + useEffect(() => { + const loadSettingsFromStorage = async () => { + try { + const settingsJson = await AsyncStorage.getItem('app_settings'); + if (settingsJson) { + const storedSettings = JSON.parse(settingsJson); + + // Update local state to match stored settings + if (storedSettings.logoSourcePreference) { + setLogoSource(storedSettings.logoSourcePreference); + } + + if (storedSettings.tmdbLanguagePreference) { + setSelectedTmdbLanguage(storedSettings.tmdbLanguagePreference); + } + + logger.log('[LogoSourceSettings] Successfully loaded settings from AsyncStorage'); + } + } catch (error) { + logger.error('[LogoSourceSettings] Error loading settings from AsyncStorage:', error); + } + }; + + loadSettingsFromStorage(); + }, []); + // Selected example show const [selectedShow, setSelectedShow] = useState(EXAMPLE_SHOWS[0]); @@ -248,14 +275,40 @@ const LogoSourceSettings = () => { // Apply logo source setting and show confirmation const applyLogoSourceSetting = (source: 'metahub' | 'tmdb') => { + // Update local state first setLogoSource(source); + + // Update using the settings hook updateSetting('logoSourcePreference', source); - // Clear any cached logo data in storage + // Also save directly to AsyncStorage for extra assurance try { + // Get current settings + AsyncStorage.getItem('app_settings').then((settingsJson) => { + if (settingsJson) { + const currentSettings = JSON.parse(settingsJson); + // Update the logo source preference + const updatedSettings = { + ...currentSettings, + logoSourcePreference: source + }; + // Save back to AsyncStorage + AsyncStorage.setItem('app_settings', JSON.stringify(updatedSettings)) + .then(() => { + logger.log(`[LogoSourceSettings] Successfully saved logo source preference '${source}' to AsyncStorage`); + }) + .catch((error) => { + logger.error(`[LogoSourceSettings] Error saving logo source preference to AsyncStorage:`, error); + }); + } + }).catch((error) => { + logger.error(`[LogoSourceSettings] Error getting current settings:`, error); + }); + + // Clear any cached logo data AsyncStorage.removeItem('_last_logos_'); } catch (e) { - console.error('Error clearing logo cache:', e); + logger.error(`[LogoSourceSettings] Error in applyLogoSourceSetting:`, e); } // Show confirmation alert @@ -266,16 +319,59 @@ const LogoSourceSettings = () => { ); }; - // Apply TMDB language setting - const applyTmdbLanguageSetting = (languageCode: string) => { + // Handle TMDB language selection + const handleTmdbLanguageSelect = (languageCode: string) => { + // First set local state for immediate UI updates setSelectedTmdbLanguage(languageCode); + + // Update the preview logo if possible + if (tmdbLogosData) { + const selectedLogoData = tmdbLogosData.find(logo => logo.iso_639_1 === languageCode); + if (selectedLogoData) { + setTmdbLogo(`https://image.tmdb.org/t/p/original${selectedLogoData.file_path}`); + logger.log(`[LogoSourceSettings] Switched TMDB logo preview to language: ${languageCode}`); + } else { + logger.warn(`[LogoSourceSettings] Could not find logo data for selected language: ${languageCode}`); + } + } + + // Then persist the setting globally + saveLanguagePreference(languageCode); + }; + + // Save language preference with proper persistence + const saveLanguagePreference = (languageCode: string) => { + // First use the settings hook to update the setting updateSetting('tmdbLanguagePreference', languageCode); - // Clear any cached logo data in storage + // For extra assurance, also save directly to AsyncStorage try { + // Get current settings + AsyncStorage.getItem('app_settings').then((settingsJson) => { + if (settingsJson) { + const currentSettings = JSON.parse(settingsJson); + // Update the language preference + const updatedSettings = { + ...currentSettings, + tmdbLanguagePreference: languageCode + }; + // Save back to AsyncStorage + AsyncStorage.setItem('app_settings', JSON.stringify(updatedSettings)) + .then(() => { + logger.log(`[LogoSourceSettings] Successfully saved TMDB language preference '${languageCode}' to AsyncStorage`); + }) + .catch((error) => { + logger.error(`[LogoSourceSettings] Error saving TMDB language preference to AsyncStorage:`, error); + }); + } + }).catch((error) => { + logger.error(`[LogoSourceSettings] Error getting current settings:`, error); + }); + + // Clear any cached logo data AsyncStorage.removeItem('_last_logos_'); } catch (e) { - console.error('Error clearing logo cache:', e); + logger.error(`[LogoSourceSettings] Error in saveLanguagePreference:`, e); } // Show confirmation toast or feedback @@ -359,25 +455,6 @@ const LogoSourceSettings = () => { ); }; - // Handle TMDB language selection - const handleTmdbLanguageSelect = (languageCode: string) => { - // Update local state for the example - setSelectedTmdbLanguage(languageCode); - - if (tmdbLogosData) { - const selectedLogoData = tmdbLogosData.find(logo => logo.iso_639_1 === languageCode); - if (selectedLogoData) { - setTmdbLogo(`https://image.tmdb.org/t/p/original${selectedLogoData.file_path}`); - logger.log(`[LogoSourceSettings] Switched TMDB logo to language: ${languageCode}`); - } else { - logger.warn(`[LogoSourceSettings] Could not find logo data for selected language: ${languageCode}`); - } - } - - // Also update the app-wide setting - applyTmdbLanguageSetting(languageCode); - }; - return ( diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx index d2ba5a90..a6ca4d1a 100644 --- a/src/screens/MetadataScreen.tsx +++ b/src/screens/MetadataScreen.tsx @@ -287,6 +287,7 @@ const MetadataScreen = () => { let finalBanner: string | null = metadata.banner || metadata.poster; // Default fallback const preference = settings.logoSourcePreference || 'metahub'; + const preferredLanguage = settings.tmdbLanguagePreference || 'en'; const apiKey = '439c478a771f35c05022f9feabcca01c'; // Re-using API key // Extract IDs @@ -302,7 +303,7 @@ const MetadataScreen = () => { const currentImdbId = imdbId; const contentType = type === 'series' ? 'tv' : 'movie'; - logger.log(`[MetadataScreen] Fetching banner with preference: ${preference}, TMDB ID: ${currentTmdbId}, IMDB ID: ${currentImdbId}`); + logger.log(`[MetadataScreen] Fetching banner with preference: ${preference}, language: ${preferredLanguage}, TMDB ID: ${currentTmdbId}, IMDB ID: ${currentImdbId}`); try { if (preference === 'tmdb') { @@ -312,11 +313,34 @@ const MetadataScreen = () => { logger.log(`[MetadataScreen] Attempting TMDB banner fetch with ID: ${currentTmdbId}`); try { const endpoint = contentType === 'tv' ? 'tv' : 'movie'; - const response = await fetch(`https://api.themoviedb.org/3/${endpoint}/${currentTmdbId}/images?api_key=${apiKey}`); + const response = await fetch(`https://api.themoviedb.org/3/${endpoint}/${currentTmdbId}/images?api_key=${apiKey}&include_image_language=${preferredLanguage},en,null`); const imagesData = await response.json(); if (imagesData.backdrops && imagesData.backdrops.length > 0) { - const backdropPath = imagesData.backdrops[0].file_path; + // Try to find backdrop in preferred language first + let backdropPath = null; + + if (preferredLanguage !== 'en') { + const preferredBackdrop = imagesData.backdrops.find((backdrop: any) => backdrop.iso_639_1 === preferredLanguage); + if (preferredBackdrop) { + backdropPath = preferredBackdrop.file_path; + logger.log(`[MetadataScreen] Found ${preferredLanguage} backdrop for ID: ${currentTmdbId}`); + } + } + + // Fall back to English backdrop + if (!backdropPath) { + const englishBackdrop = imagesData.backdrops.find((backdrop: any) => backdrop.iso_639_1 === 'en'); + if (englishBackdrop) { + backdropPath = englishBackdrop.file_path; + logger.log(`[MetadataScreen] Found English backdrop for ID: ${currentTmdbId}`); + } else { + // Last resort: use the first backdrop + backdropPath = imagesData.backdrops[0].file_path; + logger.log(`[MetadataScreen] Using first available backdrop for ID: ${currentTmdbId}`); + } + } + tmdbBannerUrl = `https://image.tmdb.org/t/p/original${backdropPath}`; logger.log(`[MetadataScreen] Found TMDB banner via images endpoint: ${tmdbBannerUrl}`); } else {