Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-01-11 20:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhance HeroSection with animated genre rendering and optimize transition duration in MetadataScreen

Browse source 
This update introduces smooth fade-in animations for genre elements in the HeroSection component, improving visual appeal. Additionally, the transition duration in the MetadataScreen has been reduced for quicker content display, enhancing overall user experience.
This commit is contained in:
tapframe 2025-06-25 00:47:14 +05:30
parent faef964d46
commit c41f5b881f
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,6 +21,7 @@ import Animated, {
withTiming, withTiming,
runOnJS, runOnJS,
withRepeat, withRepeat,
FadeIn,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { useTheme } from '../../contexts/ThemeContext'; import { useTheme } from '../../contexts/ThemeContext';
import { useTraktContext } from '../../contexts/TraktContext'; import { useTraktContext } from '../../contexts/TraktContext';
@ -684,20 +685,24 @@ const HeroSection: React.FC<HeroSectionProps> = ({
}] }]
}), []); }), []);
// Ultra-optimized genre rendering // Ultra-optimized genre rendering with smooth animation
const genreElements = useMemo(() => { const genreElements = useMemo(() => {
if (!metadata?.genres?.length) return null; if (!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[]) => ( return genresToDisplay.map((genreName: string, index: number, array: string[]) => (
<React.Fragment key={`${genreName}-${index}`}> <Animated.View
key={`${genreName}-${index}`}
entering={FadeIn.duration(400).delay(200 + index * 100)}
style={{ flexDirection: 'row', alignItems: 'center' }}
>
<Text style={[styles.genreText, { color: currentTheme.colors.text }]}> <Text style={[styles.genreText, { color: currentTheme.colors.text }]}>
{genreName} {genreName}
</Text> </Text>
{index < array.length - 1 && ( {index < array.length - 1 && (
<Text style={[styles.genreDot, { color: currentTheme.colors.text }]}>•</Text> <Text style={[styles.genreDot, { color: currentTheme.colors.text }]}>•</Text>
)} )}
</React.Fragment> </Animated.View>
)); ));
}, [metadata.genres, currentTheme.colors.text]); }, [metadata.genres, currentTheme.colors.text]);

2
src/screens/MetadataScreen.tsx
View file

@ -189,7 +189,7 @@ const MetadataScreen: React.FC = () => {
useEffect(() => { useEffect(() => {
if (isReady) { if (isReady) {
setIsContentReady(true); setIsContentReady(true);
transitionOpacity.value = withTiming(1, { duration: 200 }); transitionOpacity.value = withTiming(1, { duration: 50 });
} else if (!isReady && isContentReady) { } else if (!isReady && isContentReady) {
setIsContentReady(false); setIsContentReady(false);
transitionOpacity.value = 0; transitionOpacity.value = 0;