Add files via upload

components/SpectrumBars.tsx

@@ -0,0 +1,73 @@
+/**
+ * SpectrumBars — animated equalizer bars for MiniPlayer / Player
+ */
+import { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue, useAnimatedStyle, withRepeat, withSequence,
+  withTiming, Easing, cancelAnimation,
+} from 'react-native-reanimated';
+
+interface Props {
+  playing: boolean;
+  color?: string;
+  barCount?: number;
+  height?: number;
+}
+
+const DURATIONS = [420, 350, 500, 380, 460];
+const HEIGHTS   = [0.4, 0.7, 0.55, 0.85, 0.5];
+
+function Bar({ playing, color, maxH, duration, minRatio }: {
+  playing: boolean; color: string; maxH: number; duration: number; minRatio: number;
+}) {
+  const h = useSharedValue(maxH * minRatio);
+
+  useEffect(() => {
+    if (playing) {
+      h.value = withRepeat(
+        withSequence(
+          withTiming(maxH, { duration, easing: Easing.inOut(Easing.ease) }),
+          withTiming(maxH * 0.2, { duration, easing: Easing.inOut(Easing.ease) }),
+        ),
+        -1,
+        true,
+      );
+    } else {
+      cancelAnimation(h);
+      h.value = withTiming(maxH * 0.25, { duration: 300 });
+    }
+  }, [playing]);
+
+  const style = useAnimatedStyle(() => ({
+    height: h.value,
+    backgroundColor: color,
+    borderRadius: 2,
+    width: 3,
+  }));
+
+  return <Animated.View style={style} />;
+}
+
+export default function SpectrumBars({ playing, color = '#ffffff', barCount = 4, height = 18 }: Props) {
+  const bars = Array.from({ length: barCount }, (_, i) => i);
+
+  return (
+    <View style={[s.wrap, { height }]}>
+      {bars.map((i) => (
+        <Bar
+          key={i}
+          playing={playing}
+          color={color}
+          maxH={height * (HEIGHTS[i % HEIGHTS.length])}
+          duration={DURATIONS[i % DURATIONS.length]}
+          minRatio={0.2}
+        />
+      ))}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  wrap: { flexDirection: 'row', alignItems: 'flex-end', gap: 2 },
+});