mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-05-22 17:52:06 +00:00
added animation to streamscreen chips
This commit is contained in:
parent
4feb60f0a2
commit
f43ff3a086
1 changed files with 38 additions and 4 deletions
|
|
@ -184,6 +184,42 @@ const QualityTag = React.memo(({ text, color, theme }: { text: string; color: st
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const PulsingChip = memo(({ text, delay }: { text: string; delay: number }) => {
|
||||||
|
const { currentTheme } = useTheme();
|
||||||
|
const styles = React.useMemo(() => createStyles(currentTheme.colors), [currentTheme.colors]);
|
||||||
|
|
||||||
|
const pulseValue = useSharedValue(0.7);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const startPulse = () => {
|
||||||
|
pulseValue.value = withTiming(1, { duration: 800 }, () => {
|
||||||
|
pulseValue.value = withTiming(0.7, { duration: 800 }, () => {
|
||||||
|
runOnJS(startPulse)();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const timer = setTimeout(startPulse, delay);
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
cancelAnimation(pulseValue);
|
||||||
|
};
|
||||||
|
}, [delay]);
|
||||||
|
|
||||||
|
const animatedStyle = useAnimatedStyle(() => {
|
||||||
|
return {
|
||||||
|
opacity: pulseValue.value,
|
||||||
|
transform: [{ scale: interpolate(pulseValue.value, [0.7, 1], [0.95, 1], Extrapolate.CLAMP) }]
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Animated.View style={[styles.activeScraperChip, animatedStyle]}>
|
||||||
|
<Text style={styles.activeScraperText}>{text}</Text>
|
||||||
|
</Animated.View>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
const ProviderFilter = memo(({
|
const ProviderFilter = memo(({
|
||||||
selectedProvider,
|
selectedProvider,
|
||||||
providers,
|
providers,
|
||||||
|
|
@ -1130,12 +1166,10 @@ export const StreamsScreen = () => {
|
||||||
entering={FadeIn.duration(300)}
|
entering={FadeIn.duration(300)}
|
||||||
style={styles.activeScrapersContainer}
|
style={styles.activeScrapersContainer}
|
||||||
>
|
>
|
||||||
<Text style={styles.activeScrapersTitle}>🔄 Fetching from:</Text>
|
<Text style={styles.activeScrapersTitle}>Fetching from:</Text>
|
||||||
<View style={styles.activeScrapersRow}>
|
<View style={styles.activeScrapersRow}>
|
||||||
{activeFetchingScrapers.map((scraperName, index) => (
|
{activeFetchingScrapers.map((scraperName, index) => (
|
||||||
<View key={scraperName} style={styles.activeScraperChip}>
|
<PulsingChip key={scraperName} text={scraperName} delay={index * 200} />
|
||||||
<Text style={styles.activeScraperText}>{scraperName}</Text>
|
|
||||||
</View>
|
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue