From 12379b9e346a43623f0776e8f9578a87f32cc924 Mon Sep 17 00:00:00 2001 From: tapframe Date: Sat, 3 May 2025 22:08:04 +0530 Subject: [PATCH] Refactor LogoSourceSettings to integrate theme context and enhance styling Update the LogoSourceSettings component to utilize the new ThemeContext for dynamic theming, improving visual consistency. Refactor styles into a dedicated function to adapt to the current theme colors, enhancing the overall user experience. This change streamlines the component's layout and ensures a cohesive interface across different themes. --- src/screens/CatalogScreen.tsx | 234 +++++++++---------- src/screens/CatalogSettingsScreen.tsx | 316 +++++++++++++------------- 2 files changed, 279 insertions(+), 271 deletions(-) diff --git a/src/screens/CatalogScreen.tsx b/src/screens/CatalogScreen.tsx index eafb36e7..597ce7c5 100644 --- a/src/screens/CatalogScreen.tsx +++ b/src/screens/CatalogScreen.tsx @@ -16,7 +16,7 @@ import { RouteProp } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; import { RootStackParamList } from '../navigation/AppNavigator'; import { Meta, stremioService } from '../services/stremioService'; -import { colors } from '../styles'; +import { useTheme } from '../contexts/ThemeContext'; import { Image } from 'expo-image'; import { MaterialIcons } from '@expo/vector-icons'; import { logger } from '../utils/logger'; @@ -45,6 +45,120 @@ const NUM_COLUMNS = 3; const ITEM_MARGIN = SPACING.sm; const ITEM_WIDTH = (width - (SPACING.lg * 2) - (ITEM_MARGIN * 2 * NUM_COLUMNS)) / NUM_COLUMNS; +// Create a styles creator function that accepts the theme colors +const createStyles = (colors: any) => StyleSheet.create({ + container: { + flex: 1, + backgroundColor: colors.darkBackground, + }, + header: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8, + }, + backButton: { + flexDirection: 'row', + alignItems: 'center', + padding: 8, + }, + backText: { + fontSize: 17, + fontWeight: '400', + color: colors.primary, + }, + headerTitle: { + fontSize: 34, + fontWeight: '700', + color: colors.white, + paddingHorizontal: 16, + paddingBottom: 16, + paddingTop: 8, + }, + list: { + padding: SPACING.lg, + paddingTop: SPACING.sm, + }, + columnWrapper: { + justifyContent: 'space-between', + }, + item: { + width: ITEM_WIDTH, + marginBottom: SPACING.lg, + borderRadius: 12, + overflow: 'hidden', + backgroundColor: colors.elevation2, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.1, + shadowRadius: 4, + elevation: 2, + }, + poster: { + width: '100%', + aspectRatio: 2/3, + borderTopLeftRadius: 12, + borderTopRightRadius: 12, + backgroundColor: colors.elevation3, + }, + itemContent: { + padding: SPACING.sm, + }, + title: { + fontSize: 14, + fontWeight: '600', + color: colors.white, + lineHeight: 18, + }, + releaseInfo: { + fontSize: 12, + marginTop: SPACING.xs, + color: colors.mediumGray, + }, + footer: { + padding: SPACING.lg, + alignItems: 'center', + }, + button: { + marginTop: SPACING.md, + paddingVertical: SPACING.md, + paddingHorizontal: SPACING.xl, + backgroundColor: colors.primary, + borderRadius: 8, + elevation: 2, + }, + buttonText: { + color: colors.white, + fontWeight: '600', + fontSize: 16, + }, + centered: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + padding: SPACING.xl, + }, + emptyText: { + color: colors.white, + fontSize: 16, + textAlign: 'center', + marginTop: SPACING.md, + marginBottom: SPACING.sm, + }, + errorText: { + color: colors.white, + fontSize: 16, + textAlign: 'center', + marginTop: SPACING.md, + marginBottom: SPACING.sm, + }, + loadingText: { + color: colors.white, + fontSize: 16, + marginTop: SPACING.lg, + } +}); + const CatalogScreen: React.FC = ({ route, navigation }) => { const { addonId, type, id, name: originalName, genreFilter } = route.params; const [items, setItems] = useState([]); @@ -54,6 +168,9 @@ const CatalogScreen: React.FC = ({ route, navigation }) => { const [hasMore, setHasMore] = useState(true); const [error, setError] = useState(null); const [dataSource, setDataSource] = useState(DataSource.STREMIO_ADDONS); + const { currentTheme } = useTheme(); + const colors = currentTheme.colors; + const styles = createStyles(colors); const isDarkMode = true; const { getCustomName, isLoadingCustomNames } = useCustomCatalogNames(); @@ -326,7 +443,7 @@ const CatalogScreen: React.FC = ({ route, navigation }) => { ); - }, [navigation]); + }, [navigation, styles]); const renderEmptyState = () => ( @@ -451,117 +568,4 @@ const CatalogScreen: React.FC = ({ route, navigation }) => { ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: colors.darkBackground, - }, - header: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 16, - paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8, - }, - backButton: { - flexDirection: 'row', - alignItems: 'center', - padding: 8, - }, - backText: { - fontSize: 17, - fontWeight: '400', - color: colors.primary, - }, - headerTitle: { - fontSize: 34, - fontWeight: '700', - color: colors.white, - paddingHorizontal: 16, - paddingBottom: 16, - paddingTop: 8, - }, - list: { - padding: SPACING.lg, - paddingTop: SPACING.sm, - }, - columnWrapper: { - justifyContent: 'space-between', - }, - item: { - width: ITEM_WIDTH, - marginBottom: SPACING.lg, - borderRadius: 12, - overflow: 'hidden', - backgroundColor: colors.elevation2, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.1, - shadowRadius: 4, - elevation: 2, - }, - poster: { - width: '100%', - aspectRatio: 2/3, - borderTopLeftRadius: 12, - borderTopRightRadius: 12, - backgroundColor: colors.elevation3, - }, - itemContent: { - padding: SPACING.sm, - }, - title: { - fontSize: 14, - fontWeight: '600', - color: colors.white, - lineHeight: 18, - }, - releaseInfo: { - fontSize: 12, - marginTop: SPACING.xs, - color: colors.mediumGray, - }, - footer: { - padding: SPACING.lg, - alignItems: 'center', - }, - button: { - marginTop: SPACING.md, - paddingVertical: SPACING.md, - paddingHorizontal: SPACING.xl, - backgroundColor: colors.primary, - borderRadius: 8, - elevation: 2, - }, - buttonText: { - color: colors.white, - fontWeight: '600', - fontSize: 16, - }, - centered: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - padding: SPACING.xl, - }, - emptyText: { - color: colors.white, - fontSize: 16, - textAlign: 'center', - marginTop: SPACING.md, - marginBottom: SPACING.sm, - }, - errorText: { - color: colors.white, - fontSize: 16, - textAlign: 'center', - marginTop: SPACING.md, - marginBottom: SPACING.sm, - }, - loadingText: { - color: colors.white, - fontSize: 16, - marginTop: SPACING.lg, - } -}); - export default CatalogScreen; \ No newline at end of file diff --git a/src/screens/CatalogSettingsScreen.tsx b/src/screens/CatalogSettingsScreen.tsx index 17655840..de053a91 100644 --- a/src/screens/CatalogSettingsScreen.tsx +++ b/src/screens/CatalogSettingsScreen.tsx @@ -18,7 +18,7 @@ import { } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { useNavigation } from '@react-navigation/native'; -import { colors } from '../styles'; +import { useTheme } from '../contexts/ThemeContext'; import { stremioService } from '../services/stremioService'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import { useCatalogContext } from '../contexts/CatalogContext'; @@ -52,12 +52,171 @@ const CATALOG_SETTINGS_KEY = 'catalog_settings'; const CATALOG_CUSTOM_NAMES_KEY = 'catalog_custom_names'; const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0; +// Create a styles creator function that accepts the theme colors +const createStyles = (colors: any) => StyleSheet.create({ + container: { + flex: 1, + backgroundColor: colors.darkBackground, + }, + loadingContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + header: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8, + }, + backButton: { + flexDirection: 'row', + alignItems: 'center', + padding: 8, + }, + backText: { + fontSize: 17, + fontWeight: '400', + color: colors.primary, + }, + headerTitle: { + fontSize: 34, + fontWeight: '700', + color: colors.white, + paddingHorizontal: 16, + paddingBottom: 16, + paddingTop: 8, + }, + scrollView: { + flex: 1, + }, + scrollContent: { + paddingBottom: 32, + }, + addonSection: { + marginBottom: 24, + }, + addonTitle: { + fontSize: 13, + fontWeight: '600', + color: colors.mediumGray, + marginHorizontal: 16, + marginBottom: 8, + letterSpacing: 0.8, + }, + card: { + marginHorizontal: 16, + borderRadius: 12, + overflow: 'hidden', + backgroundColor: colors.elevation2, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.1, + shadowRadius: 4, + elevation: 2, + }, + groupHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingVertical: 12, + paddingHorizontal: 16, + borderBottomWidth: 0.5, + borderBottomColor: 'rgba(255, 255, 255, 0.1)', + }, + groupTitle: { + fontSize: 17, + fontWeight: '600', + color: colors.white, + }, + groupHeaderRight: { + flexDirection: 'row', + alignItems: 'center', + }, + enabledCount: { + fontSize: 15, + color: colors.mediumGray, + marginRight: 8, + }, + catalogItem: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingVertical: 12, + paddingHorizontal: 16, + borderBottomWidth: 0.5, + borderBottomColor: 'rgba(255, 255, 255, 0.1)', + // Ensure last item doesn't have border if needed (check logic) + }, + catalogItemPressed: { + backgroundColor: 'rgba(255, 255, 255, 0.05)', // Subtle feedback for press + }, + catalogInfo: { + flex: 1, + marginRight: 8, // Add space before switch + }, + catalogName: { + fontSize: 15, + color: colors.white, + marginBottom: 2, + }, + catalogType: { + fontSize: 13, + color: colors.mediumGray, + }, + + // Modal Styles + modalOverlay: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.6)', + }, + modalContent: { + backgroundColor: Platform.OS === 'ios' ? undefined : colors.elevation3, + borderRadius: 14, + padding: 20, + width: '85%', + shadowColor: '#000', + shadowOffset: { width: 0, height: 4 }, + shadowOpacity: 0.3, + shadowRadius: 10, + elevation: 10, + overflow: 'hidden', + }, + modalTitle: { + fontSize: 18, + fontWeight: '600', + color: colors.white, + marginBottom: 15, + textAlign: 'center', + }, + modalInput: { + backgroundColor: colors.elevation1, // Darker input background + color: colors.white, + borderRadius: 8, + paddingHorizontal: 12, + paddingVertical: 10, + fontSize: 16, + marginBottom: 20, + borderWidth: 1, + borderColor: colors.border, + }, + modalButtons: { + flexDirection: 'row', + justifyContent: 'space-around', // Adjust as needed (e.g., 'flex-end') + }, +}); + const CatalogSettingsScreen = () => { const [loading, setLoading] = useState(true); const [settings, setSettings] = useState([]); const [groupedSettings, setGroupedSettings] = useState({}); const navigation = useNavigation(); const { refreshCatalogs } = useCatalogContext(); + const { currentTheme } = useTheme(); + const colors = currentTheme.colors; + const styles = createStyles(colors); const isDarkMode = true; // Force dark mode // Modal State @@ -390,159 +549,4 @@ const CatalogSettingsScreen = () => { ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: colors.darkBackground, - }, - loadingContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - header: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 16, - paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8, - }, - backButton: { - flexDirection: 'row', - alignItems: 'center', - padding: 8, - }, - backText: { - fontSize: 17, - fontWeight: '400', - color: colors.primary, - }, - headerTitle: { - fontSize: 34, - fontWeight: '700', - color: colors.white, - paddingHorizontal: 16, - paddingBottom: 16, - paddingTop: 8, - }, - scrollView: { - flex: 1, - }, - scrollContent: { - paddingBottom: 32, - }, - addonSection: { - marginBottom: 24, - }, - addonTitle: { - fontSize: 13, - fontWeight: '600', - color: colors.mediumGray, - marginHorizontal: 16, - marginBottom: 8, - letterSpacing: 0.8, - }, - card: { - marginHorizontal: 16, - borderRadius: 12, - overflow: 'hidden', - backgroundColor: colors.elevation2, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.1, - shadowRadius: 4, - elevation: 2, - }, - groupHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingVertical: 12, - paddingHorizontal: 16, - borderBottomWidth: 0.5, - borderBottomColor: 'rgba(255, 255, 255, 0.1)', - }, - groupTitle: { - fontSize: 17, - fontWeight: '600', - color: colors.white, - }, - groupHeaderRight: { - flexDirection: 'row', - alignItems: 'center', - }, - enabledCount: { - fontSize: 15, - color: colors.mediumGray, - marginRight: 8, - }, - catalogItem: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingVertical: 12, - paddingHorizontal: 16, - borderBottomWidth: 0.5, - borderBottomColor: 'rgba(255, 255, 255, 0.1)', - // Ensure last item doesn't have border if needed (check logic) - }, - catalogItemPressed: { - backgroundColor: 'rgba(255, 255, 255, 0.05)', // Subtle feedback for press - }, - catalogInfo: { - flex: 1, - marginRight: 8, // Add space before switch - }, - catalogName: { - fontSize: 15, - color: colors.white, - marginBottom: 2, - }, - catalogType: { - fontSize: 13, - color: colors.mediumGray, - }, - - // Modal Styles - modalOverlay: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: 'rgba(0, 0, 0, 0.6)', - }, - modalContent: { - backgroundColor: Platform.OS === 'ios' ? undefined : colors.elevation3, - borderRadius: 14, - padding: 20, - width: '85%', - shadowColor: '#000', - shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.3, - shadowRadius: 10, - elevation: 10, - overflow: 'hidden', - }, - modalTitle: { - fontSize: 18, - fontWeight: '600', - color: colors.white, - marginBottom: 15, - textAlign: 'center', - }, - modalInput: { - backgroundColor: colors.elevation1, // Darker input background - color: colors.white, - borderRadius: 8, - paddingHorizontal: 12, - paddingVertical: 10, - fontSize: 16, - marginBottom: 20, - borderWidth: 1, - borderColor: colors.border, - }, - modalButtons: { - flexDirection: 'row', - justifyContent: 'space-around', // Adjust as needed (e.g., 'flex-end') - }, -}); - export default CatalogSettingsScreen; \ No newline at end of file