diff --git a/src/components/home/ContentItem.tsx b/src/components/home/ContentItem.tsx index 6673ab13..be5bf6fc 100644 --- a/src/components/home/ContentItem.tsx +++ b/src/components/home/ContentItem.tsx @@ -3,6 +3,7 @@ import { View, TouchableOpacity, ActivityIndicator, StyleSheet, Dimensions, Plat import { Image as ExpoImage } from 'expo-image'; import { MaterialIcons } from '@expo/vector-icons'; import { useTheme } from '../../contexts/ThemeContext'; +import { useSettings } from '../../hooks/useSettings'; import { catalogService, StreamingContent } from '../../services/catalogService'; import { DropUpMenu } from './DropUpMenu'; @@ -63,6 +64,18 @@ const ContentItem = ({ item, onPress }: ContentItemProps) => { const [shouldLoadImage, setShouldLoadImage] = useState(false); const [retryCount, setRetryCount] = useState(0); const { currentTheme } = useTheme(); + const { settings } = useSettings(); + const posterRadius = typeof settings.posterBorderRadius === 'number' ? settings.posterBorderRadius : 12; + const posterWidth = React.useMemo(() => { + switch (settings.posterSize) { + case 'small': + return Math.max(100, Math.min(POSTER_WIDTH - 10, POSTER_WIDTH)); + case 'large': + return Math.min(POSTER_WIDTH + 20, POSTER_WIDTH + 30); + default: + return POSTER_WIDTH; + } + }, [settings.posterSize]); // Intersection observer simulation for lazy loading const itemRef = useRef(null); @@ -135,20 +148,20 @@ const ContentItem = ({ item, onPress }: ContentItemProps) => { return ( <> - + - + {/* Only load image when shouldLoadImage is true (lazy loading) */} {shouldLoadImage && item.poster ? ( { /> ) : ( // Show placeholder until lazy load triggers - + {item.name.substring(0, 20)}... @@ -198,9 +211,11 @@ const ContentItem = ({ item, onPress }: ContentItemProps) => { )} - - {item.name} - + {settings.showPosterTitles && ( + + {item.name} + + )} { )} + + Posters + + Show Titles + handleUpdateSetting('showPosterTitles', value)} + /> + + + Poster Size + handleUpdateSetting('posterSize', val as any)} + /> + + + + Poster Corners + handleUpdateSetting('posterBorderRadius', Number(val) as any)} + /> + + + @@ -385,6 +413,7 @@ const styles = StyleSheet.create({ }, sectionHeader: { paddingHorizontal: 16, + marginHorizontal: 16, paddingTop: 20, paddingBottom: 8, }, @@ -395,6 +424,8 @@ const styles = StyleSheet.create({ }, card: { marginHorizontal: 16, + marginTop: 12, + marginBottom: 12, borderRadius: 12, overflow: 'hidden', shadowColor: '#000', @@ -515,6 +546,7 @@ const styles = StyleSheet.create({ segmentCard: { marginHorizontal: 16, marginTop: 12, + marginBottom: 12, padding: 16, borderRadius: 12, backgroundColor: 'rgba(255,255,255,0.05)' @@ -539,6 +571,32 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'space-between', }, + settingsRow: { + paddingHorizontal: 16, + paddingVertical: 12, + gap: 8, + }, + settingsRowInline: { + paddingHorizontal: 16, + paddingVertical: 12, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + rowLabel: { + fontSize: 14, + fontWeight: '600', + marginBottom: 4, + opacity: 0.9, + }, + cardHeader: { + fontSize: 12, + fontWeight: '700', + letterSpacing: 0.6, + paddingHorizontal: 16, + paddingTop: 12, + opacity: 0.9, + }, savedIndicator: { position: 'absolute', top: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 60 : 90,