Add files via upload

2026-04-27 21:01:17 +05:00 · 2026-04-27 21:01:17 +05:00 · 675493bafc
commit 675493bafc
28 changed files with 2176 additions and 0 deletions
--- a/app/(tabs)/search.tsx
+++ b/app/(tabs)/search.tsx
@ -0,0 +1,136 @@
+import { useState, useCallback } from 'react';
+import {
+  View, Text, TextInput, FlatList, StyleSheet, Pressable, Keyboard,
+} from 'react-native';
+import Animated, { FadeIn, FadeInDown, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Image } from 'expo-image';
+import { Colors, Font, Spacing, Radius, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../../constants/theme';
+import { searchTracks, Track, coverUrl } from '../../services/api';
+import { usePlayer } from '../../store';
+
+export default function SearchScreen() {
+  const [query, setQuery]     = useState('');
+  const [results, setResults] = useState<Track[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searched, setSearched] = useState(false);
+  const insets = useSafeAreaInsets();
+  const { setQueue } = usePlayer();
+
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) { setResults([]); setSearched(false); return; }
+    setLoading(true);
+    setSearched(true);
+    const res = await searchTracks(q.trim());
+    setResults(res);
+    setLoading(false);
+  }, []);
+
+  const playTrack = (index: number) => {
+    Keyboard.dismiss();
+    setQueue(results, index);
+    usePlayer.getState().setExpanded(true);
+  };
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      <Text style={styles.title}>Поиск</Text>
+
+      <View style={styles.inputWrap}>
+        <TextInput
+          style={styles.input}
+          placeholder="Треки, исполнители..."
+          placeholderTextColor={Colors.text3}
+          value={query}
+          onChangeText={q => { setQuery(q); doSearch(q); }}
+          returnKeyType="search"
+          onSubmitEditing={() => doSearch(query)}
+          autoCorrect={false}
+          clearButtonMode="while-editing"
+        />
+      </View>
+
+      {!searched && (
+        <Animated.View entering={FadeIn} style={styles.emptyWrap}>
+          <Text style={styles.emptyIcon}>🎵</Text>
+          <Text style={styles.emptyText}>Введите название трека{'\n'}или имя исполнителя</Text>
+        </Animated.View>
+      )}
+
+      {searched && !loading && results.length === 0 && (
+        <Animated.View entering={FadeIn} style={styles.emptyWrap}>
+          <Text style={styles.emptyIcon}>🔍</Text>
+          <Text style={styles.emptyText}>Ничего не найдено</Text>
+        </Animated.View>
+      )}
+
+      <FlatList
+        data={results}
+        keyExtractor={t => String(t.id)}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{
+          paddingHorizontal: Spacing.md,
+          paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24,
+        }}
+        showsVerticalScrollIndicator={false}
+        renderItem={({ item, index }) => (
+          <SearchResult track={item} index={index} onPress={() => playTrack(index)} />
+        )}
+      />
+    </View>
+  );
+}
+
+function SearchResult({ track, index, onPress }: { track: Track; index: number; onPress: () => void }) {
+  const { queue, index: qi } = usePlayer();
+  const active = queue[qi]?.id === track.id;
+  const scale = useSharedValue(1);
+  const aStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+  const cover = coverUrl(track.cover_url);
+
+  return (
+    <Animated.View entering={FadeInDown.delay(index * 40).duration(250)} style={aStyle}>
+      <Pressable
+        onPressIn={() => { scale.value = withSpring(0.97, { damping: 15 }); }}
+        onPressOut={() => { scale.value = withSpring(1, { damping: 15 }); }}
+        onPress={onPress}
+        style={[styles.row, active && styles.rowActive]}
+      >
+        <Image
+          source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
+          style={styles.cover}
+          contentFit="cover"
+          transition={200}
+        />
+        <View style={{ flex: 1 }}>
+          <Text style={[styles.trackTitle, active && { color: Colors.green }]} numberOfLines={1}>
+            {track.title}
+          </Text>
+          <Text style={styles.artist} numberOfLines={1}>{track.artist}</Text>
+        </View>
+        <Text style={styles.dur}>{fmt(track.duration)}</Text>
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+function fmt(s: number) {
+  const m = Math.floor(s / 60), sec = Math.floor(s % 60);
+  return `${m}:${sec < 10 ? '0' : ''}${sec}`;
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.bg },
+  title:     { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, paddingHorizontal: Spacing.md, paddingTop: Spacing.md, marginBottom: Spacing.md },
+  inputWrap: { marginHorizontal: Spacing.md, marginBottom: Spacing.md, backgroundColor: Colors.surface, borderRadius: Radius.md, paddingHorizontal: Spacing.md },
+  input:     { color: Colors.text, fontSize: Font.md, paddingVertical: 13 },
+  emptyWrap: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingBottom: 120 },
+  emptyIcon: { fontSize: 48, marginBottom: Spacing.md },
+  emptyText: { color: Colors.text2, fontSize: Font.md, textAlign: 'center', lineHeight: 24 },
+  row:       { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, gap: Spacing.md, borderRadius: Radius.sm },
+  rowActive: { backgroundColor: Colors.surface + '80' },
+  cover:     { width: 48, height: 48, borderRadius: Radius.sm, backgroundColor: Colors.elevated },
+  trackTitle:{ color: Colors.text, fontSize: Font.md, fontWeight: '600' },
+  artist:    { color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
+  dur:       { color: Colors.text3, fontSize: Font.xs },
+});