From 9753101ef140552fabe5ac5a38786584a125ea20 Mon Sep 17 00:00:00 2001 From: tapframe Date: Sat, 3 May 2025 19:46:43 +0530 Subject: [PATCH] Implement AsyncStorage integration for logo source and TMDB language preferences in LogoSourceSettings Enhance the LogoSourceSettings component to load and persist user preferences for logo source and TMDB language using AsyncStorage. Update the applyLogoSourceSetting and saveLanguagePreference functions to ensure settings are synchronized with local storage, improving user experience and data consistency. Additionally, refine the MetadataScreen to utilize the selected language preference when fetching banners, ensuring accurate and localized content retrieval. --- src/screens/LogoSourceSettings.tsx | 127 +++++++++++++++++++++++------ src/screens/MetadataScreen.tsx | 30 ++++++- 2 files changed, 129 insertions(+), 28 deletions(-) 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 {