Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-03-11 17:45:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement AsyncStorage integration for logo source and TMDB language preferences in LogoSourceSettings

Browse source 
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.
This commit is contained in:
tapframe 2025-05-03 19:46:43 +05:30
parent d39f372359
commit 9753101ef1
2 changed files with 129 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
src/screens/LogoSourceSettings.tsx
View file

@ -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 (
<SafeAreaView style={[styles.container]}>
<StatusBar barStyle="light-content" />

30
src/screens/MetadataScreen.tsx
View file

@ -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 {