diff --git a/src/screens/TMDBSettingsScreen.tsx b/src/screens/TMDBSettingsScreen.tsx index e0e0c74..b6bc446 100644 --- a/src/screens/TMDBSettingsScreen.tsx +++ b/src/screens/TMDBSettingsScreen.tsx @@ -506,91 +506,211 @@ const TMDBSettingsScreen = () => { setLanguagePickerVisible(false)} > - - - - Select Language - - - - - setLanguageSearch('')} style={{ marginLeft: 8, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 10, backgroundColor: currentTheme.colors.elevation1 }}> - Clear - - - {/* Most used quick chips */} - - {['en','ar','es','fr','de','tr'].map(code => ( - { updateSetting('tmdbLanguagePreference', code); setLanguagePickerVisible(false); }} style={{ paddingHorizontal: 10, paddingVertical: 6, backgroundColor: settings.tmdbLanguagePreference === code ? currentTheme.colors.primary : currentTheme.colors.elevation1, borderRadius: 999, marginRight: 8 }}> - {code.toUpperCase()} - - ))} - - - {[ - { code: 'en', label: 'English' }, - { code: 'ar', label: 'Arabic' }, - { code: 'es', label: 'Spanish' }, - { code: 'fr', label: 'French' }, - { code: 'de', label: 'German' }, - { code: 'it', label: 'Italian' }, - { code: 'pt', label: 'Portuguese' }, - { code: 'ru', label: 'Russian' }, - { code: 'tr', label: 'Turkish' }, - { code: 'ja', label: 'Japanese' }, - { code: 'ko', label: 'Korean' }, - { code: 'zh', label: 'Chinese' }, - { code: 'hi', label: 'Hindi' }, - { code: 'he', label: 'Hebrew' }, - { code: 'id', label: 'Indonesian' }, - { code: 'nl', label: 'Dutch' }, - { code: 'sv', label: 'Swedish' }, - { code: 'no', label: 'Norwegian' }, - { code: 'da', label: 'Danish' }, - { code: 'fi', label: 'Finnish' }, - { code: 'pl', label: 'Polish' }, - { code: 'cs', label: 'Czech' }, - { code: 'ro', label: 'Romanian' }, - { code: 'uk', label: 'Ukrainian' }, - { code: 'vi', label: 'Vietnamese' }, - { code: 'th', label: 'Thai' }, - ] - .filter(({ label, code }) => - (languageSearch || '').length === 0 || - label.toLowerCase().includes(languageSearch.toLowerCase()) || code.toLowerCase().includes(languageSearch.toLowerCase()) - ) - .map(({ code, label }) => ( - { updateSetting('tmdbLanguagePreference', code); setLanguagePickerVisible(false); }} - style={{ paddingVertical: 12, paddingHorizontal: 6, borderRadius: 10, backgroundColor: settings.tmdbLanguagePreference === code ? currentTheme.colors.elevation1 : 'transparent', marginBottom: 4 }} - activeOpacity={0.8} - > - - - {label} ({code.toUpperCase()}) - - {settings.tmdbLanguagePreference === code && ( - + setLanguagePickerVisible(false)}> + + + + {/* Header */} + + + Choose Language + Select your preferred language for TMDb content + + + {/* Search Section */} + + + + + {languageSearch.length > 0 && ( + setLanguageSearch('')} style={styles.searchClearButton}> + + )} - - ))} - - setLanguagePickerVisible(false)} style={{ marginTop: 12, paddingVertical: 12, alignItems: 'center', borderRadius: 10, backgroundColor: currentTheme.colors.primary }}> - Done - + + + {/* Popular Languages */} + {languageSearch.length === 0 && ( + + Popular + + {[ + { code: 'en', label: 'EN' }, + { code: 'ar', label: 'AR' }, + { code: 'es', label: 'ES' }, + { code: 'fr', label: 'FR' }, + { code: 'de', label: 'DE' }, + { code: 'tr', label: 'TR' }, + ].map(({ code, label }) => ( + { updateSetting('tmdbLanguagePreference', code); setLanguagePickerVisible(false); }} + style={[ + styles.popularChip, + settings.tmdbLanguagePreference === code && styles.selectedChip, + { + backgroundColor: settings.tmdbLanguagePreference === code ? currentTheme.colors.primary : currentTheme.colors.elevation1, + borderColor: settings.tmdbLanguagePreference === code ? currentTheme.colors.primary : 'rgba(255,255,255,0.1)', + } + ]} + > + + {label} + + + ))} + + + )} + + {/* All Languages */} + + 0 && styles.searchResultsTitle, + { color: languageSearch.length > 0 ? currentTheme.colors.text : currentTheme.colors.mediumEmphasis } + ]}> + {languageSearch.length > 0 ? 'Search Results' : 'All Languages'} + + + + {(() => { + const languages = [ + { code: 'en', label: 'English', native: 'English' }, + { code: 'ar', label: 'العربية', native: 'Arabic' }, + { code: 'es', label: 'Español', native: 'Spanish' }, + { code: 'fr', label: 'Français', native: 'French' }, + { code: 'de', label: 'Deutsch', native: 'German' }, + { code: 'it', label: 'Italiano', native: 'Italian' }, + { code: 'pt', label: 'Português', native: 'Portuguese' }, + { code: 'ru', label: 'Русский', native: 'Russian' }, + { code: 'tr', label: 'Türkçe', native: 'Turkish' }, + { code: 'ja', label: '日本語', native: 'Japanese' }, + { code: 'ko', label: '한국어', native: 'Korean' }, + { code: 'zh', label: '中文', native: 'Chinese' }, + { code: 'hi', label: 'हिन्दी', native: 'Hindi' }, + { code: 'he', label: 'עברית', native: 'Hebrew' }, + { code: 'id', label: 'Bahasa Indonesia', native: 'Indonesian' }, + { code: 'nl', label: 'Nederlands', native: 'Dutch' }, + { code: 'sv', label: 'Svenska', native: 'Swedish' }, + { code: 'no', label: 'Norsk', native: 'Norwegian' }, + { code: 'da', label: 'Dansk', native: 'Danish' }, + { code: 'fi', label: 'Suomi', native: 'Finnish' }, + { code: 'pl', label: 'Polski', native: 'Polish' }, + { code: 'cs', label: 'Čeština', native: 'Czech' }, + { code: 'ro', label: 'Română', native: 'Romanian' }, + { code: 'uk', label: 'Українська', native: 'Ukrainian' }, + { code: 'vi', label: 'Tiếng Việt', native: 'Vietnamese' }, + { code: 'th', label: 'ไทย', native: 'Thai' }, + ]; + + const filteredLanguages = languages.filter(({ label, code, native }) => + (languageSearch || '').length === 0 || + label.toLowerCase().includes(languageSearch.toLowerCase()) || + native.toLowerCase().includes(languageSearch.toLowerCase()) || + code.toLowerCase().includes(languageSearch.toLowerCase()) + ); + + return ( + <> + {filteredLanguages.map(({ code, label, native }) => ( + { updateSetting('tmdbLanguagePreference', code); setLanguagePickerVisible(false); }} + style={[ + styles.languageItem, + settings.tmdbLanguagePreference === code && styles.selectedLanguageItem + ]} + activeOpacity={0.7} + > + + + + {native} + + + {label} • {code.toUpperCase()} + + + {settings.tmdbLanguagePreference === code && ( + + + + )} + + + ))} + {languageSearch.length > 0 && filteredLanguages.length === 0 && ( + + + + No languages found for "{languageSearch}" + + setLanguageSearch('')} + style={[styles.clearSearchButton, { backgroundColor: currentTheme.colors.elevation1 }]} + > + Clear search + + + )} + + ); + })()} + + + + {/* Footer Actions */} + + setLanguagePickerVisible(false)} + style={styles.cancelButton} + > + Cancel + + setLanguagePickerVisible(false)} + style={[styles.doneButton, { backgroundColor: currentTheme.colors.primary }]} + > + Done + + + + - +