mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-21 00:32:04 +00:00
Improved homescreen layout for tablets
This commit is contained in:
tapframe
parent
63c673bfae
commit
501bded9ee
1 changed files with 420 additions and 115 deletions
|
|
@ -45,6 +45,9 @@ const imageCache: Record<string, boolean> = {};
|
||||||
|
|
||||||
const { width, height } = Dimensions.get('window');
|
const { width, height } = Dimensions.get('window');
|
||||||
|
|
||||||
|
// Utility to determine if device is tablet-sized
|
||||||
|
const isTablet = width >= 768;
|
||||||
|
|
||||||
const NoFeaturedContent = () => {
|
const NoFeaturedContent = () => {
|
||||||
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
||||||
const { currentTheme } = useTheme();
|
const { currentTheme } = useTheme();
|
||||||
|
|
@ -447,131 +450,279 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary }: Feat
|
||||||
return <NoFeaturedContent />;
|
return <NoFeaturedContent />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
if (isTablet) {
|
||||||
<Animated.View
|
// Tablet layout: full-width image with overlaid content
|
||||||
entering={FadeIn.duration(400).easing(Easing.out(Easing.cubic))}
|
return (
|
||||||
>
|
<Animated.View
|
||||||
<TouchableOpacity
|
entering={FadeIn.duration(400).easing(Easing.out(Easing.cubic))}
|
||||||
activeOpacity={0.95}
|
style={[styles.tabletContainer as ViewStyle]}
|
||||||
onPress={() => {
|
|
||||||
navigation.navigate('Metadata', {
|
|
||||||
id: featuredContent.id,
|
|
||||||
type: featuredContent.type
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
style={styles.featuredContainer as ViewStyle}
|
|
||||||
>
|
>
|
||||||
<Animated.View style={[styles.imageContainer, posterAnimatedStyle]}>
|
<TouchableOpacity
|
||||||
<ImageBackground
|
activeOpacity={0.95}
|
||||||
source={{ uri: bannerUrl || featuredContent.poster }}
|
onPress={() => {
|
||||||
style={styles.featuredImage as ViewStyle}
|
navigation.navigate('Metadata', {
|
||||||
resizeMode="cover"
|
id: featuredContent.id,
|
||||||
>
|
type: featuredContent.type
|
||||||
{/* Subtle content overlay for better readability */}
|
});
|
||||||
<Animated.View style={[styles.contentOverlay, overlayAnimatedStyle]} />
|
}}
|
||||||
|
style={styles.tabletFullContainer as ViewStyle}
|
||||||
<LinearGradient
|
>
|
||||||
colors={[
|
<Animated.View style={[styles.tabletImageWrapper, posterAnimatedStyle]}>
|
||||||
'rgba(0,0,0,0.1)',
|
<ImageBackground
|
||||||
'rgba(0,0,0,0.2)',
|
source={{ uri: bannerUrl || featuredContent.poster }}
|
||||||
'rgba(0,0,0,0.4)',
|
style={styles.tabletImage as ViewStyle}
|
||||||
'rgba(0,0,0,0.8)',
|
resizeMode="cover"
|
||||||
currentTheme.colors.darkBackground,
|
|
||||||
]}
|
|
||||||
locations={[0, 0.2, 0.5, 0.8, 1]}
|
|
||||||
style={styles.featuredGradient as ViewStyle}
|
|
||||||
>
|
>
|
||||||
<Animated.View
|
<Animated.View style={[styles.contentOverlay, overlayAnimatedStyle]} />
|
||||||
style={[styles.featuredContentContainer as ViewStyle, contentAnimatedStyle]}
|
<LinearGradient
|
||||||
>
|
colors={[
|
||||||
{logoUrl && !logoLoadError ? (
|
'transparent',
|
||||||
<Animated.View style={logoAnimatedStyle}>
|
'transparent',
|
||||||
<ExpoImage
|
'rgba(0,0,0,0.3)',
|
||||||
source={{ uri: logoUrl }}
|
'rgba(0,0,0,0.7)',
|
||||||
style={styles.featuredLogo as ImageStyle}
|
'rgba(0,0,0,0.95)'
|
||||||
contentFit="contain"
|
]}
|
||||||
cachePolicy="memory"
|
locations={[0, 0.3, 0.6, 0.8, 1]}
|
||||||
transition={300}
|
style={styles.tabletImageGradient as ViewStyle}
|
||||||
recyclingKey={`logo-${featuredContent.id}`}
|
/>
|
||||||
onError={onLogoLoadError}
|
</ImageBackground>
|
||||||
/>
|
</Animated.View>
|
||||||
</Animated.View>
|
</TouchableOpacity>
|
||||||
) : (
|
|
||||||
<Text style={[styles.featuredTitleText as TextStyle, { color: currentTheme.colors.highEmphasis }]}>
|
<Animated.View style={[styles.tabletOverlayContent as ViewStyle, contentAnimatedStyle]}>
|
||||||
{featuredContent.name}
|
{logoUrl && !logoLoadError ? (
|
||||||
</Text>
|
<Animated.View style={logoAnimatedStyle}>
|
||||||
|
<ExpoImage
|
||||||
|
source={{ uri: logoUrl }}
|
||||||
|
style={styles.tabletLogo as ImageStyle}
|
||||||
|
contentFit="contain"
|
||||||
|
cachePolicy="memory"
|
||||||
|
transition={300}
|
||||||
|
recyclingKey={`logo-${featuredContent.id}`}
|
||||||
|
onError={onLogoLoadError}
|
||||||
|
/>
|
||||||
|
</Animated.View>
|
||||||
|
) : (
|
||||||
|
<Text style={[styles.tabletTitle as TextStyle, { color: currentTheme.colors.white }]}>
|
||||||
|
{featuredContent.name}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<View style={styles.tabletGenreContainer as ViewStyle}>
|
||||||
|
{featuredContent.genres?.slice(0, 4).map((genre, index, array) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<Text style={[styles.tabletGenreText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||||
|
{genre}
|
||||||
|
</Text>
|
||||||
|
{index < array.length - 1 && (
|
||||||
|
<Text style={[styles.tabletGenreDot as TextStyle, { color: currentTheme.colors.white }]}>•</Text>
|
||||||
)}
|
)}
|
||||||
<View style={styles.genreContainer as ViewStyle}>
|
</React.Fragment>
|
||||||
{featuredContent.genres?.slice(0, 3).map((genre, index, array) => (
|
))}
|
||||||
<React.Fragment key={index}>
|
</View>
|
||||||
<Text style={[styles.genreText as TextStyle, { color: currentTheme.colors.white }]}>
|
|
||||||
{genre}
|
|
||||||
</Text>
|
|
||||||
{index < array.length - 1 && (
|
|
||||||
<Text style={[styles.genreDot as TextStyle, { color: currentTheme.colors.white }]}>•</Text>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
</Animated.View>
|
|
||||||
|
|
||||||
<Animated.View style={[styles.featuredButtons as ViewStyle, buttonsAnimatedStyle]}>
|
{featuredContent.description && (
|
||||||
<TouchableOpacity
|
<Text style={[styles.tabletDescription as TextStyle, { color: currentTheme.colors.white }]} numberOfLines={3}>
|
||||||
style={styles.myListButton as ViewStyle}
|
{featuredContent.description}
|
||||||
onPress={handleSaveToLibrary}
|
</Text>
|
||||||
activeOpacity={0.7}
|
)}
|
||||||
>
|
|
||||||
<MaterialIcons
|
|
||||||
name={isSaved ? "bookmark" : "bookmark-border"}
|
|
||||||
size={24}
|
|
||||||
color={currentTheme.colors.white}
|
|
||||||
/>
|
|
||||||
<Text style={[styles.myListButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
|
||||||
{isSaved ? "Saved" : "Save"}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
|
|
||||||
<TouchableOpacity
|
<Animated.View style={[styles.tabletButtons as ViewStyle, buttonsAnimatedStyle]}>
|
||||||
style={[styles.playButton as ViewStyle, { backgroundColor: currentTheme.colors.white }]}
|
<TouchableOpacity
|
||||||
onPress={() => {
|
style={[styles.tabletPlayButton as ViewStyle, { backgroundColor: currentTheme.colors.white }]}
|
||||||
if (featuredContent) {
|
onPress={() => {
|
||||||
navigation.navigate('Streams', {
|
if (featuredContent) {
|
||||||
id: featuredContent.id,
|
navigation.navigate('Streams', {
|
||||||
type: featuredContent.type
|
id: featuredContent.id,
|
||||||
});
|
type: featuredContent.type
|
||||||
}
|
});
|
||||||
}}
|
}
|
||||||
activeOpacity={0.8}
|
}}
|
||||||
>
|
activeOpacity={0.8}
|
||||||
<MaterialIcons name="play-arrow" size={24} color={currentTheme.colors.black} />
|
>
|
||||||
<Text style={[styles.playButtonText as TextStyle, { color: currentTheme.colors.black }]}>
|
<MaterialIcons name="play-arrow" size={28} color={currentTheme.colors.black} />
|
||||||
Play
|
<Text style={[styles.tabletPlayButtonText as TextStyle, { color: currentTheme.colors.black }]}>
|
||||||
</Text>
|
Play Now
|
||||||
</TouchableOpacity>
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.infoButton as ViewStyle}
|
style={[styles.tabletSecondaryButton as ViewStyle, { backgroundColor: 'rgba(255,255,255,0.2)', borderColor: 'rgba(255,255,255,0.3)' }]}
|
||||||
onPress={handleInfoPress}
|
onPress={handleSaveToLibrary}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<MaterialIcons name="info-outline" size={24} color={currentTheme.colors.white} />
|
<MaterialIcons
|
||||||
<Text style={[styles.infoButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
name={isSaved ? "bookmark" : "bookmark-border"}
|
||||||
Info
|
size={20}
|
||||||
</Text>
|
color={currentTheme.colors.white}
|
||||||
</TouchableOpacity>
|
/>
|
||||||
</Animated.View>
|
<Text style={[styles.tabletSecondaryButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||||
</LinearGradient>
|
{isSaved ? "Saved" : "My List"}
|
||||||
</ImageBackground>
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.tabletSecondaryButton as ViewStyle, { backgroundColor: 'rgba(255,255,255,0.15)', borderColor: 'rgba(255,255,255,0.3)' }]}
|
||||||
|
onPress={handleInfoPress}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<MaterialIcons name="info-outline" size={20} color={currentTheme.colors.white} />
|
||||||
|
<Text style={[styles.tabletSecondaryButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||||
|
More Info
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Animated.View>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
</TouchableOpacity>
|
|
||||||
</Animated.View>
|
{/* Bottom fade to blend with background */}
|
||||||
);
|
<LinearGradient
|
||||||
|
colors={[
|
||||||
|
'transparent',
|
||||||
|
currentTheme.colors.darkBackground
|
||||||
|
]}
|
||||||
|
locations={[0, 1]}
|
||||||
|
style={styles.tabletBottomFade as ViewStyle}
|
||||||
|
pointerEvents="none"
|
||||||
|
/>
|
||||||
|
</Animated.View>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// Phone layout: original vertical stack
|
||||||
|
return (
|
||||||
|
<Animated.View
|
||||||
|
entering={FadeIn.duration(400).easing(Easing.out(Easing.cubic))}
|
||||||
|
>
|
||||||
|
<TouchableOpacity
|
||||||
|
activeOpacity={0.95}
|
||||||
|
onPress={() => {
|
||||||
|
navigation.navigate('Metadata', {
|
||||||
|
id: featuredContent.id,
|
||||||
|
type: featuredContent.type
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
style={styles.featuredContainer as ViewStyle}
|
||||||
|
>
|
||||||
|
<Animated.View style={[styles.imageContainer, posterAnimatedStyle]}>
|
||||||
|
<ImageBackground
|
||||||
|
source={{ uri: bannerUrl || featuredContent.poster }}
|
||||||
|
style={styles.featuredImage as ViewStyle}
|
||||||
|
resizeMode="cover"
|
||||||
|
>
|
||||||
|
<Animated.View style={[styles.contentOverlay, overlayAnimatedStyle]} />
|
||||||
|
<LinearGradient
|
||||||
|
colors={[
|
||||||
|
'rgba(0,0,0,0.1)',
|
||||||
|
'rgba(0,0,0,0.2)',
|
||||||
|
'rgba(0,0,0,0.4)',
|
||||||
|
'rgba(0,0,0,0.8)',
|
||||||
|
currentTheme.colors.darkBackground,
|
||||||
|
]}
|
||||||
|
locations={[0, 0.2, 0.5, 0.8, 1]}
|
||||||
|
style={styles.featuredGradient as ViewStyle}
|
||||||
|
>
|
||||||
|
<Animated.View
|
||||||
|
style={[styles.featuredContentContainer as ViewStyle, contentAnimatedStyle]}
|
||||||
|
>
|
||||||
|
{logoUrl && !logoLoadError ? (
|
||||||
|
<Animated.View style={logoAnimatedStyle}>
|
||||||
|
<ExpoImage
|
||||||
|
source={{ uri: logoUrl }}
|
||||||
|
style={styles.featuredLogo as ImageStyle}
|
||||||
|
contentFit="contain"
|
||||||
|
cachePolicy="memory"
|
||||||
|
transition={300}
|
||||||
|
recyclingKey={`logo-${featuredContent.id}`}
|
||||||
|
onError={onLogoLoadError}
|
||||||
|
/>
|
||||||
|
</Animated.View>
|
||||||
|
) : (
|
||||||
|
<Text style={[styles.featuredTitleText as TextStyle, { color: currentTheme.colors.highEmphasis }]}>
|
||||||
|
{featuredContent.name}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
<View style={styles.genreContainer as ViewStyle}>
|
||||||
|
{featuredContent.genres?.slice(0, 3).map((genre, index, array) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<Text style={[styles.genreText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||||
|
{genre}
|
||||||
|
</Text>
|
||||||
|
{index < array.length - 1 && (
|
||||||
|
<Text style={[styles.genreDot as TextStyle, { color: currentTheme.colors.white }]}>•</Text>
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</Animated.View>
|
||||||
|
|
||||||
|
<Animated.View style={[styles.featuredButtons as ViewStyle, buttonsAnimatedStyle]}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.myListButton as ViewStyle}
|
||||||
|
onPress={handleSaveToLibrary}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<MaterialIcons
|
||||||
|
name={isSaved ? "bookmark" : "bookmark-border"}
|
||||||
|
size={24}
|
||||||
|
color={currentTheme.colors.white}
|
||||||
|
/>
|
||||||
|
<Text style={[styles.myListButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||||
|
{isSaved ? "Saved" : "Save"}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.playButton as ViewStyle, { backgroundColor: currentTheme.colors.white }]}
|
||||||
|
onPress={() => {
|
||||||
|
if (featuredContent) {
|
||||||
|
navigation.navigate('Streams', {
|
||||||
|
id: featuredContent.id,
|
||||||
|
type: featuredContent.type
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
>
|
||||||
|
<MaterialIcons name="play-arrow" size={24} color={currentTheme.colors.black} />
|
||||||
|
<Text style={[styles.playButtonText as TextStyle, { color: currentTheme.colors.black }]}>
|
||||||
|
Play
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.infoButton as ViewStyle}
|
||||||
|
onPress={handleInfoPress}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<MaterialIcons name="info-outline" size={24} color={currentTheme.colors.white} />
|
||||||
|
<Text style={[styles.infoButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||||
|
Info
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Animated.View>
|
||||||
|
</LinearGradient>
|
||||||
|
</ImageBackground>
|
||||||
|
</Animated.View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
{/* Bottom fade to blend with background */}
|
||||||
|
<LinearGradient
|
||||||
|
colors={[
|
||||||
|
'transparent',
|
||||||
|
currentTheme.colors.darkBackground
|
||||||
|
]}
|
||||||
|
locations={[0, 1]}
|
||||||
|
style={styles.phoneBottomFade as ViewStyle}
|
||||||
|
pointerEvents="none"
|
||||||
|
/>
|
||||||
|
</Animated.View>
|
||||||
|
);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
featuredContainer: {
|
featuredContainer: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: height * 0.55, // Slightly taller for better proportions
|
height: height * 0.55,
|
||||||
marginTop: 0,
|
marginTop: 0,
|
||||||
marginBottom: 12,
|
marginBottom: 12,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
|
@ -622,10 +773,12 @@ const styles = StyleSheet.create({
|
||||||
paddingTop: 40,
|
paddingTop: 40,
|
||||||
},
|
},
|
||||||
featuredLogo: {
|
featuredLogo: {
|
||||||
width: width * 0.7,
|
width: width * 0.8,
|
||||||
height: 100,
|
height: 120,
|
||||||
marginBottom: 0,
|
marginBottom: 0,
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
|
minWidth: 250,
|
||||||
|
minHeight: 80,
|
||||||
},
|
},
|
||||||
featuredTitleText: {
|
featuredTitleText: {
|
||||||
fontSize: 28,
|
fontSize: 28,
|
||||||
|
|
@ -714,6 +867,158 @@ const styles = StyleSheet.create({
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
},
|
},
|
||||||
|
// Tablet-specific styles
|
||||||
|
tabletContainer: {
|
||||||
|
width: '100%',
|
||||||
|
height: height * 0.7,
|
||||||
|
position: 'relative',
|
||||||
|
marginTop: 0,
|
||||||
|
marginBottom: 12,
|
||||||
|
borderRadius: 16,
|
||||||
|
overflow: 'hidden',
|
||||||
|
elevation: 8,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 4 },
|
||||||
|
shadowOpacity: 0.3,
|
||||||
|
shadowRadius: 8,
|
||||||
|
},
|
||||||
|
tabletFullContainer: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
},
|
||||||
|
tabletImageWrapper: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
tabletImage: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
transform: [{ scale: 1.02 }],
|
||||||
|
},
|
||||||
|
tabletImageGradient: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
tabletOverlayContent: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
padding: 40,
|
||||||
|
paddingBottom: 50,
|
||||||
|
alignItems: 'center',
|
||||||
|
zIndex: 10,
|
||||||
|
},
|
||||||
|
tabletBottomFade: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 40,
|
||||||
|
zIndex: 11,
|
||||||
|
pointerEvents: 'none',
|
||||||
|
},
|
||||||
|
phoneBottomFade: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 30,
|
||||||
|
zIndex: 11,
|
||||||
|
pointerEvents: 'none',
|
||||||
|
},
|
||||||
|
tabletLogo: {
|
||||||
|
width: width * 0.32,
|
||||||
|
height: 120,
|
||||||
|
marginBottom: 16,
|
||||||
|
alignSelf: 'center',
|
||||||
|
minWidth: 200,
|
||||||
|
minHeight: 80,
|
||||||
|
},
|
||||||
|
tabletTitle: {
|
||||||
|
fontSize: 36,
|
||||||
|
fontWeight: '900',
|
||||||
|
marginBottom: 16,
|
||||||
|
textShadowColor: 'rgba(0,0,0,0.8)',
|
||||||
|
textShadowOffset: { width: 0, height: 2 },
|
||||||
|
textShadowRadius: 4,
|
||||||
|
lineHeight: 42,
|
||||||
|
},
|
||||||
|
tabletGenreContainer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
marginBottom: 24,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
tabletGenreText: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '500',
|
||||||
|
opacity: 0.9,
|
||||||
|
marginRight: 8,
|
||||||
|
},
|
||||||
|
tabletGenreDot: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '500',
|
||||||
|
opacity: 0.6,
|
||||||
|
marginRight: 8,
|
||||||
|
},
|
||||||
|
tabletDescription: {
|
||||||
|
fontSize: 16,
|
||||||
|
lineHeight: 24,
|
||||||
|
opacity: 0.85,
|
||||||
|
marginBottom: 28,
|
||||||
|
textShadowColor: 'rgba(0,0,0,0.8)',
|
||||||
|
textShadowOffset: { width: 0, height: 1 },
|
||||||
|
textShadowRadius: 2,
|
||||||
|
},
|
||||||
|
tabletButtons: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: 16,
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
tabletPlayButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
paddingVertical: 14,
|
||||||
|
paddingHorizontal: 28,
|
||||||
|
borderRadius: 30,
|
||||||
|
elevation: 4,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 2 },
|
||||||
|
shadowOpacity: 0.3,
|
||||||
|
shadowRadius: 4,
|
||||||
|
minWidth: 160,
|
||||||
|
},
|
||||||
|
tabletPlayButtonText: {
|
||||||
|
fontWeight: '700',
|
||||||
|
marginLeft: 12,
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
tabletSecondaryButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
borderRadius: 25,
|
||||||
|
borderWidth: 1,
|
||||||
|
gap: 6,
|
||||||
|
minWidth: 120,
|
||||||
|
},
|
||||||
|
tabletSecondaryButtonText: {
|
||||||
|
fontWeight: '600',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
contentOverlay: {
|
contentOverlay: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 0,
|
top: 0,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue