diff --git a/src/screens/StreamsScreen.tsx b/src/screens/StreamsScreen.tsx index 8b542f8..f6af6e2 100644 --- a/src/screens/StreamsScreen.tsx +++ b/src/screens/StreamsScreen.tsx @@ -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 ( + + {text} + + ); +}); + const ProviderFilter = memo(({ selectedProvider, providers, @@ -1130,12 +1166,10 @@ export const StreamsScreen = () => { entering={FadeIn.duration(300)} style={styles.activeScrapersContainer} > - 🔄 Fetching from: + Fetching from: {activeFetchingScrapers.map((scraperName, index) => ( - - {scraperName} - + ))}