Creepso/NuvioStreaming_backup_24-10-25
1
0
Fork 0
Code Issues 53 Pull requests Projects Releases 32 Packages Wiki Activity Actions

homescreen imrpovements for tablet screens

Browse source
This commit is contained in:
tapframe 2025-10-19 20:07:21 +05:30
parent f7c0c670d7
commit 0b764412b2
3 changed files with 194 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/components/home/CatalogSection.tsx
View file

@ -16,6 +16,26 @@ interface CatalogSectionProps {
const { width } = Dimensions.get('window'); const { width } = Dimensions.get('window');
// Enhanced responsive breakpoints
const BREAKPOINTS = {
phone: 0,
tablet: 768,
largeTablet: 1024,
tv: 1440,
};
const getDeviceType = (deviceWidth: number) => {
if (deviceWidth >= BREAKPOINTS.tv) return 'tv';
if (deviceWidth >= BREAKPOINTS.largeTablet) return 'largeTablet';
if (deviceWidth >= BREAKPOINTS.tablet) return 'tablet';
return 'phone';
};
const deviceType = getDeviceType(width);
const isTablet = deviceType === 'tablet';
const isLargeTablet = deviceType === 'largeTablet';
const isTV = deviceType === 'tv';
// Dynamic poster calculation based on screen width - show 1/4 of next poster // Dynamic poster calculation based on screen width - show 1/4 of next poster
const calculatePosterLayout = (screenWidth: number) => { const calculatePosterLayout = (screenWidth: number) => {
const MIN_POSTER_WIDTH = 100; // Reduced minimum for more posters const MIN_POSTER_WIDTH = 100; // Reduced minimum for more posters
@ -70,8 +90,9 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => {
); );
}, [handleContentPress]); }, [handleContentPress]);
// Memoize the ItemSeparatorComponent to prevent re-creation // Memoize the ItemSeparatorComponent to prevent re-creation (responsive spacing)
const ItemSeparator = useCallback(() => <View style={{ width: 8 }} />, []); const separatorWidth = isTV ? 12 : isLargeTablet ? 10 : isTablet ? 8 : 8;
const ItemSeparator = useCallback(() => <View style={{ width: separatorWidth }} />, [separatorWidth]);
// Memoize the keyExtractor to prevent re-creation // Memoize the keyExtractor to prevent re-creation
const keyExtractor = useCallback((item: StreamingContent) => `${item.id}-${item.type}`, []); const keyExtractor = useCallback((item: StreamingContent) => `${item.id}-${item.type}`, []);
@ -81,10 +102,33 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => {
style={styles.catalogContainer} style={styles.catalogContainer}
entering={FadeIn.duration(400)} entering={FadeIn.duration(400)}
> >
<View style={styles.catalogHeader}> <View style={[
styles.catalogHeader,
{ paddingHorizontal: isTV ? 32 : isLargeTablet ? 28 : isTablet ? 24 : 16 }
]}>
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
<Text style={[styles.catalogTitle, { color: currentTheme.colors.text }]} numberOfLines={1}>{catalog.name}</Text> <Text
<View style={[styles.titleUnderline, { backgroundColor: currentTheme.colors.primary }]} /> style={[
styles.catalogTitle,
{
color: currentTheme.colors.text,
fontSize: isTV ? 28 : isLargeTablet ? 26 : isTablet ? 24 : 22,
}
]}
numberOfLines={1}
>
{catalog.name}
</Text>
<View
style={[
styles.titleUnderline,
{
backgroundColor: currentTheme.colors.primary,
width: isTV ? 64 : isLargeTablet ? 56 : isTablet ? 48 : 40,
height: isTV ? 4 : isLargeTablet ? 3 : 3,
}
]}
/>
</View> </View>
<TouchableOpacity <TouchableOpacity
onPress={() => onPress={() =>
@ -94,10 +138,28 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => {
addonId: catalog.addon addonId: catalog.addon
}) })
} }
style={styles.viewAllButton} style={[
styles.viewAllButton,
{
paddingVertical: isTV ? 10 : isLargeTablet ? 9 : isTablet ? 8 : 8,
paddingHorizontal: isTV ? 12 : isLargeTablet ? 11 : isTablet ? 10 : 10,
borderRadius: isTV ? 22 : isLargeTablet ? 20 : isTablet ? 20 : 20,
}
]}
> >
<Text style={[styles.viewAllText, { color: currentTheme.colors.textMuted }]}>View All</Text> <Text style={[
<MaterialIcons name="chevron-right" size={20} color={currentTheme.colors.textMuted} /> styles.viewAllText,
{
color: currentTheme.colors.textMuted,
fontSize: isTV ? 16 : isLargeTablet ? 15 : isTablet ? 14 : 14,
marginRight: isTV ? 6 : isLargeTablet ? 5 : 4,
}
]}>View All</Text>
<MaterialIcons
name="chevron-right"
size={isTV ? 24 : isLargeTablet ? 22 : isTablet ? 20 : 20}
color={currentTheme.colors.textMuted}
/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -107,7 +169,13 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => {
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
horizontal horizontal
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
contentContainerStyle={StyleSheet.flatten([styles.catalogList, { paddingRight: 16 - posterLayout.partialPosterWidth }])} contentContainerStyle={StyleSheet.flatten([
styles.catalogList,
{
paddingHorizontal: isTV ? 32 : isLargeTablet ? 28 : isTablet ? 24 : 16,
paddingRight: (isTV ? 32 : isLargeTablet ? 28 : isTablet ? 24 : 16) - posterLayout.partialPosterWidth,
}
])}
ItemSeparatorComponent={ItemSeparator} ItemSeparatorComponent={ItemSeparator}
onEndReachedThreshold={0.7} onEndReachedThreshold={0.7}
onEndReached={() => {}} onEndReached={() => {}}
@ -126,7 +194,6 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 16,
marginBottom: 16, marginBottom: 16,
}, },
titleContainer: { titleContainer: {
@ -135,7 +202,7 @@ const styles = StyleSheet.create({
marginRight: 16, marginRight: 16,
}, },
catalogTitle: { catalogTitle: {
fontSize: 24, fontSize: 24, // will be overridden responsively
fontWeight: '800', fontWeight: '800',
letterSpacing: 0.5, letterSpacing: 0.5,
marginBottom: 4, marginBottom: 4,
@ -144,26 +211,26 @@ const styles = StyleSheet.create({
position: 'absolute', position: 'absolute',
bottom: -2, bottom: -2,
left: 0, left: 0,
width: 40, width: 40, // overridden responsively
height: 3, height: 3, // overridden responsively
borderRadius: 2, borderRadius: 2,
opacity: 0.8, opacity: 0.8,
}, },
viewAllButton: { viewAllButton: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingVertical: 8, paddingVertical: 8, // overridden responsively
paddingHorizontal: 10, paddingHorizontal: 10, // overridden responsively
borderRadius: 20, borderRadius: 20, // overridden responsively
backgroundColor: 'rgba(255,255,255,0.1)', backgroundColor: 'rgba(255,255,255,0.1)',
}, },
viewAllText: { viewAllText: {
fontSize: 14, fontSize: 14, // overridden responsively
fontWeight: '600', fontWeight: '600',
marginRight: 4, marginRight: 4, // overridden responsively
}, },
catalogList: { catalogList: {
paddingHorizontal: 16, // padding will be applied responsively in JSX
}, },
}); });

58
src/components/home/ContentItem.tsx
View file

@ -23,21 +23,39 @@ interface ContentItemProps {
const { width } = Dimensions.get('window'); const { width } = Dimensions.get('window');
// Enhanced responsive breakpoints
const BREAKPOINTS = {
phone: 0,
tablet: 768,
largeTablet: 1024,
tv: 1440,
};
const getDeviceType = (screenWidth: number) => {
if (screenWidth >= BREAKPOINTS.tv) return 'tv';
if (screenWidth >= BREAKPOINTS.largeTablet) return 'largeTablet';
if (screenWidth >= BREAKPOINTS.tablet) return 'tablet';
return 'phone';
};
// Dynamic poster calculation based on screen width - show 1/4 of next poster // Dynamic poster calculation based on screen width - show 1/4 of next poster
const calculatePosterLayout = (screenWidth: number) => { const calculatePosterLayout = (screenWidth: number) => {
// Detect if device is a tablet (width >= 768px is common tablet breakpoint) const deviceType = getDeviceType(screenWidth);
const isTablet = screenWidth >= 768;
// Responsive sizing based on device type
const MIN_POSTER_WIDTH = isTablet ? 140 : 100; // Bigger minimum for tablets const MIN_POSTER_WIDTH = deviceType === 'tv' ? 180 : deviceType === 'largeTablet' ? 160 : deviceType === 'tablet' ? 140 : 100;
const MAX_POSTER_WIDTH = isTablet ? 180 : 130; // Bigger maximum for tablets const MAX_POSTER_WIDTH = deviceType === 'tv' ? 220 : deviceType === 'largeTablet' ? 200 : deviceType === 'tablet' ? 180 : 130;
const LEFT_PADDING = 16; // Left padding const LEFT_PADDING = deviceType === 'tv' ? 32 : deviceType === 'largeTablet' ? 28 : deviceType === 'tablet' ? 24 : 16;
const SPACING = 8; // Space between posters const SPACING = deviceType === 'tv' ? 12 : deviceType === 'largeTablet' ? 10 : deviceType === 'tablet' ? 8 : 8;
// Calculate available width for posters (reserve space for left padding) // Calculate available width for posters (reserve space for left padding)
const availableWidth = screenWidth - LEFT_PADDING; const availableWidth = screenWidth - LEFT_PADDING;
// Try different numbers of full posters to find the best fit // Try different numbers of full posters to find the best fit
let bestLayout = { numFullPosters: 3, posterWidth: isTablet ? 160 : 120 }; let bestLayout = {
numFullPosters: 3,
posterWidth: deviceType === 'tv' ? 200 : deviceType === 'largeTablet' ? 180 : deviceType === 'tablet' ? 160 : 120
};
for (let n = 3; n <= 6; n++) { for (let n = 3; n <= 6; n++) {
// Calculate poster width needed for N full posters + 0.25 partial poster // Calculate poster width needed for N full posters + 0.25 partial poster
@ -104,15 +122,18 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
const posterRadius = typeof settings.posterBorderRadius === 'number' ? settings.posterBorderRadius : 12; const posterRadius = typeof settings.posterBorderRadius === 'number' ? settings.posterBorderRadius : 12;
// Memoize poster width calculation to avoid recalculating on every render // Memoize poster width calculation to avoid recalculating on every render
const posterWidth = React.useMemo(() => { const posterWidth = React.useMemo(() => {
const deviceType = getDeviceType(width);
const sizeMultiplier = deviceType === 'tv' ? 1.2 : deviceType === 'largeTablet' ? 1.1 : deviceType === 'tablet' ? 1.0 : 0.9;
switch (settings.posterSize) { switch (settings.posterSize) {
case 'small': case 'small':
return Math.max(100, Math.min(POSTER_WIDTH - 10, POSTER_WIDTH)); return Math.max(100, Math.min(POSTER_WIDTH - 10, POSTER_WIDTH)) * sizeMultiplier;
case 'large': case 'large':
return Math.min(POSTER_WIDTH + 20, POSTER_WIDTH + 30); return Math.min(POSTER_WIDTH + 20, POSTER_WIDTH + 30) * sizeMultiplier;
default: default:
return POSTER_WIDTH; return POSTER_WIDTH * sizeMultiplier;
} }
}, [settings.posterSize]); }, [settings.posterSize, width]);
// Intersection observer simulation for lazy loading // Intersection observer simulation for lazy loading
const itemRef = useRef<View>(null); const itemRef = useRef<View>(null);
@ -322,7 +343,16 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
</View> </View>
</TouchableOpacity> </TouchableOpacity>
{settings.showPosterTitles && ( {settings.showPosterTitles && (
<Text style={[styles.title, { color: currentTheme.colors.text }]} numberOfLines={2}> <Text
style={[
styles.title,
{
color: currentTheme.colors.text,
fontSize: getDeviceType(width) === 'tv' ? 16 : getDeviceType(width) === 'largeTablet' ? 15 : getDeviceType(width) === 'tablet' ? 14 : 13
}
]}
numberOfLines={2}
>
{item.name} {item.name}
</Text> </Text>
)} )}
@ -409,7 +439,7 @@ const styles = StyleSheet.create({
padding: 2, padding: 2,
}, },
title: { title: {
fontSize: 13, fontSize: 13, // Will be overridden responsively
fontWeight: '500', fontWeight: '500',
marginTop: 4, marginTop: 4,
textAlign: 'center', textAlign: 'center',

78
src/screens/SearchScreen.tsx
View file

@ -45,14 +45,33 @@ import { useTheme } from '../contexts/ThemeContext';
import LoadingSpinner from '../components/common/LoadingSpinner'; import LoadingSpinner from '../components/common/LoadingSpinner';
const { width, height } = Dimensions.get('window'); const { width, height } = Dimensions.get('window');
const isTablet = width >= 768;
// Enhanced responsive breakpoints
const BREAKPOINTS = {
phone: 0,
tablet: 768,
largeTablet: 1024,
tv: 1440,
};
const getDeviceType = (deviceWidth: number) => {
if (deviceWidth >= BREAKPOINTS.tv) return 'tv';
if (deviceWidth >= BREAKPOINTS.largeTablet) return 'largeTablet';
if (deviceWidth >= BREAKPOINTS.tablet) return 'tablet';
return 'phone';
};
const deviceType = getDeviceType(width);
const isTablet = deviceType === 'tablet';
const isLargeTablet = deviceType === 'largeTablet';
const isTV = deviceType === 'tv';
const TAB_BAR_HEIGHT = 85; const TAB_BAR_HEIGHT = 85;
// Tablet-optimized poster sizes // Responsive poster sizes
const HORIZONTAL_ITEM_WIDTH = isTablet ? width * 0.18 : width * 0.3; const HORIZONTAL_ITEM_WIDTH = isTV ? width * 0.14 : isLargeTablet ? width * 0.16 : isTablet ? width * 0.18 : width * 0.3;
const HORIZONTAL_POSTER_HEIGHT = HORIZONTAL_ITEM_WIDTH * 1.5; const HORIZONTAL_POSTER_HEIGHT = HORIZONTAL_ITEM_WIDTH * 1.5;
const POSTER_WIDTH = isTablet ? 70 : 90; const POSTER_WIDTH = isTV ? 90 : isLargeTablet ? 80 : isTablet ? 70 : 90;
const POSTER_HEIGHT = isTablet ? 105 : 135; const POSTER_HEIGHT = POSTER_WIDTH * 1.5;
const RECENT_SEARCHES_KEY = 'recent_searches'; const RECENT_SEARCHES_KEY = 'recent_searches';
const MAX_RECENT_SEARCHES = 10; const MAX_RECENT_SEARCHES = 10;
@ -597,13 +616,20 @@ const SearchScreen = () => {
)} )}
</View> </View>
<Text <Text
style={[styles.horizontalItemTitle, { color: currentTheme.colors.white }]} style={[
styles.horizontalItemTitle,
{
color: currentTheme.colors.white,
fontSize: isTV ? 14 : isLargeTablet ? 13 : isTablet ? 12 : 14,
lineHeight: isTV ? 18 : isLargeTablet ? 17 : isTablet ? 16 : 18,
}
]}
numberOfLines={2} numberOfLines={2}
> >
{item.name} {item.name}
</Text> </Text>
{item.year && ( {item.year && (
<Text style={[styles.yearText, { color: currentTheme.colors.mediumGray }]}> <Text style={[styles.yearText, { color: currentTheme.colors.mediumGray, fontSize: isTV ? 12 : isLargeTablet ? 11 : isTablet ? 10 : 12 }]}>
{item.year} {item.year}
</Text> </Text>
)} )}
@ -652,8 +678,16 @@ const SearchScreen = () => {
{/* Movies */} {/* Movies */}
{movieResults.length > 0 && ( {movieResults.length > 0 && (
<Animated.View style={styles.carouselContainer} entering={FadeIn.duration(300)}> <Animated.View style={[styles.carouselContainer, { marginBottom: isTV ? 40 : isLargeTablet ? 36 : isTablet ? 32 : 24 }]} entering={FadeIn.duration(300)}>
<Text style={[styles.carouselSubtitle, { color: currentTheme.colors.lightGray }]}> <Text style={[
styles.carouselSubtitle,
{
color: currentTheme.colors.lightGray,
fontSize: isTV ? 18 : isLargeTablet ? 17 : isTablet ? 16 : 14,
marginBottom: isTV ? 14 : isLargeTablet ? 13 : isTablet ? 12 : 8,
paddingHorizontal: isTV ? 24 : isLargeTablet ? 20 : isTablet ? 16 : 16
}
]}>
Movies ({movieResults.length}) Movies ({movieResults.length})
</Text> </Text>
<FlatList <FlatList
@ -678,8 +712,16 @@ const SearchScreen = () => {
{/* TV Shows */} {/* TV Shows */}
{seriesResults.length > 0 && ( {seriesResults.length > 0 && (
<Animated.View style={styles.carouselContainer} entering={FadeIn.duration(300)}> <Animated.View style={[styles.carouselContainer, { marginBottom: isTV ? 40 : isLargeTablet ? 36 : isTablet ? 32 : 24 }]} entering={FadeIn.duration(300)}>
<Text style={[styles.carouselSubtitle, { color: currentTheme.colors.lightGray }]}> <Text style={[
styles.carouselSubtitle,
{
color: currentTheme.colors.lightGray,
fontSize: isTV ? 18 : isLargeTablet ? 17 : isTablet ? 16 : 14,
marginBottom: isTV ? 14 : isLargeTablet ? 13 : isTablet ? 12 : 8,
paddingHorizontal: isTV ? 24 : isLargeTablet ? 20 : isTablet ? 16 : 16
}
]}>
TV Shows ({seriesResults.length}) TV Shows ({seriesResults.length})
</Text> </Text>
<FlatList <FlatList
@ -704,8 +746,16 @@ const SearchScreen = () => {
{/* Other types */} {/* Other types */}
{otherResults.length > 0 && ( {otherResults.length > 0 && (
<Animated.View style={styles.carouselContainer} entering={FadeIn.duration(300)}> <Animated.View style={[styles.carouselContainer, { marginBottom: isTV ? 40 : isLargeTablet ? 36 : isTablet ? 32 : 24 }]} entering={FadeIn.duration(300)}>
<Text style={[styles.carouselSubtitle, { color: currentTheme.colors.lightGray }]}> <Text style={[
styles.carouselSubtitle,
{
color: currentTheme.colors.lightGray,
fontSize: isTV ? 18 : isLargeTablet ? 17 : isTablet ? 16 : 14,
marginBottom: isTV ? 14 : isLargeTablet ? 13 : isTablet ? 12 : 8,
paddingHorizontal: isTV ? 24 : isLargeTablet ? 20 : isTablet ? 16 : 16
}
]}>
{otherResults[0].type.charAt(0).toUpperCase() + otherResults[0].type.slice(1)} ({otherResults.length}) {otherResults[0].type.charAt(0).toUpperCase() + otherResults[0].type.slice(1)} ({otherResults.length})
</Text> </Text>
<FlatList <FlatList
@ -736,7 +786,7 @@ const SearchScreen = () => {
const headerBaseHeight = Platform.OS === 'android' ? 80 : 60; const headerBaseHeight = Platform.OS === 'android' ? 80 : 60;
// Keep header below floating top navigator on tablets by adding extra offset // Keep header below floating top navigator on tablets by adding extra offset
const tabletNavOffset = isTablet ? 64 : 0; const tabletNavOffset = (isTV || isLargeTablet || isTablet) ? 64 : 0;
const topSpacing = (Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : insets.top) + tabletNavOffset; const topSpacing = (Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : insets.top) + tabletNavOffset;
const headerHeight = headerBaseHeight + topSpacing + 60; const headerHeight = headerBaseHeight + topSpacing + 60;