Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-24 18:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui fix

Browse source
This commit is contained in:
tapframe 2025-10-06 20:34:59 +05:30
parent 0f5fbdf296
commit 106461b2b2
1 changed files with 54 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/metadata/HeroSection.tsx
View file

@ -1082,21 +1082,41 @@ const HeroSection: React.FC<HeroSectionProps> = memo(({
if (!shouldLoadSecondaryData || !metadata?.genres?.length) return null; if (!shouldLoadSecondaryData || !metadata?.genres?.length) return null;
const genresToDisplay = metadata.genres.slice(0, 3); // Reduced to 3 for performance const genresToDisplay = metadata.genres.slice(0, 3); // Reduced to 3 for performance
return genresToDisplay.map((genreName: string, index: number, array: string[]) => ( const elements: React.ReactNode[] = [];
<Animated.View
key={`${genreName}-${index}`} genresToDisplay.forEach((genreName: string, index: number) => {
entering={FadeIn.duration(400).delay(200 + index * 100)} // Add genre text
style={{ flexDirection: 'row', alignItems: 'center' }} elements.push(
> <Text
<Text style={[isTablet ? styles.tabletGenreText : styles.genreText, { color: themeColors.text }]}> key={`genre-${index}`}
style={[isTablet ? styles.tabletGenreText : styles.genreText, { color: themeColors.text }]}
>
{genreName} {genreName}
</Text> </Text>
{index < array.length - 1 && ( );
<Text style={[isTablet ? styles.tabletGenreDot : styles.genreDot, { color: themeColors.text }]}>•</Text>
)} // Add dot separator if not the last element
if (index < genresToDisplay.length - 1) {
elements.push(
<Text
key={`dot-${index}`}
style={[isTablet ? styles.tabletGenreDot : styles.genreDot, { color: themeColors.text }]}
>
•
</Text>
);
}
});
return (
<Animated.View
entering={FadeIn.duration(400).delay(200)}
style={{ flexDirection: 'row', alignItems: 'center' }}
>
{elements}
</Animated.View> </Animated.View>
)); );
}, [metadata.genres, themeColors.text, shouldLoadSecondaryData]); }, [metadata.genres, themeColors.text, shouldLoadSecondaryData, isTablet]);
// Memoized play button text // Memoized play button text
const playButtonText = useMemo(() => getPlayButtonText(), [getPlayButtonText]); const playButtonText = useMemo(() => getPlayButtonText(), [getPlayButtonText]);
@ -1614,7 +1634,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
marginTop: 6, marginTop: 6,
marginBottom: 14, marginBottom: 14,
gap: 6, gap: 0,
maxWidth: isTablet ? 600 : '100%', maxWidth: isTablet ? 600 : '100%',
alignSelf: 'center', alignSelf: 'center',
}, },
@ -1622,12 +1642,21 @@ const styles = StyleSheet.create({
fontSize: 12, fontSize: 12,
fontWeight: '500', fontWeight: '500',
opacity: 0.9, opacity: 0.9,
marginLeft: 0,
paddingLeft: 0,
marginRight: 0,
paddingRight: 0,
marginVertical: 0,
paddingVertical: 0,
}, },
genreDot: { genreDot: {
fontSize: 12, fontSize: 12,
fontWeight: '500', fontWeight: '500',
opacity: 0.6, opacity: 0.6,
marginHorizontal: 2, marginHorizontal: 4,
paddingHorizontal: 0,
marginVertical: 0,
paddingVertical: 0,
}, },
actionButtons: { actionButtons: {
flexDirection: 'row', flexDirection: 'row',
@ -2020,18 +2049,27 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
marginTop: 8, marginTop: 8,
marginBottom: 20, marginBottom: 20,
gap: 8, gap: 0,
}, },
tabletGenreText: { tabletGenreText: {
fontSize: 16, fontSize: 16,
fontWeight: '500', fontWeight: '500',
opacity: 0.9, opacity: 0.9,
marginLeft: 0,
paddingLeft: 0,
marginRight: 0,
paddingRight: 0,
marginVertical: 0,
paddingVertical: 0,
}, },
tabletGenreDot: { tabletGenreDot: {
fontSize: 16, fontSize: 16,
fontWeight: '500', fontWeight: '500',
opacity: 0.6, opacity: 0.6,
marginHorizontal: 4, marginHorizontal: 6,
paddingHorizontal: 0,
marginVertical: 0,
paddingVertical: 0,
}, },
tabletWatchProgressContainer: { tabletWatchProgressContainer: {
marginTop: 8, marginTop: 8,