Add files via upload
This commit is contained in:
Savsis
GitHub
commit
675493bafc
28 changed files with 2176 additions and 0 deletions
95
app/(tabs)/_layout.tsx
Normal file
95
app/(tabs)/_layout.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { useEffect } from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { Tabs, router } from 'expo-router';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import Svg, { Path, Circle, Line, Polyline } from 'react-native-svg';
|
||||
import { Colors, TAB_BAR_HEIGHT } from '../../constants/theme';
|
||||
import { useAuth, usePlayer } from '../../store';
|
||||
import MiniPlayer from '../../components/MiniPlayer';
|
||||
import Player from '../../components/Player';
|
||||
|
||||
export default function TabsLayout() {
|
||||
const { user, ready } = useAuth();
|
||||
const { expanded } = usePlayer();
|
||||
|
||||
useEffect(() => {
|
||||
if (ready && !user) {
|
||||
router.replace('/auth');
|
||||
}
|
||||
}, [user, ready]);
|
||||
|
||||
if (!ready || !user) return null;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: Colors.bg }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarStyle: styles.tabBar,
|
||||
tabBarBackground: () => (
|
||||
<BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
),
|
||||
tabBarActiveTintColor: Colors.green,
|
||||
tabBarInactiveTintColor: Colors.text3,
|
||||
tabBarLabelStyle: { fontSize: 10, fontWeight: '600', marginBottom: 4 },
|
||||
tabBarItemStyle: { paddingTop: 8 },
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen name="index" options={{ title: 'Главная', tabBarIcon: ({ color }) => <HomeIcon color={color} /> }} />
|
||||
<Tabs.Screen name="library" options={{ title: 'Библиотека', tabBarIcon: ({ color }) => <LibIcon color={color} /> }} />
|
||||
<Tabs.Screen name="search" options={{ title: 'Поиск', tabBarIcon: ({ color }) => <SearchIcon color={color} /> }} />
|
||||
<Tabs.Screen name="profile" options={{ title: 'Профиль', tabBarIcon: ({ color }) => <ProfileIcon color={color} /> }} />
|
||||
</Tabs>
|
||||
|
||||
<MiniPlayer />
|
||||
{expanded && <Player />}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeIcon({ color }: { color: string }) {
|
||||
return (
|
||||
<Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
|
||||
<Path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<Polyline points="9,22 9,12 15,12 15,22" stroke={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
function LibIcon({ color }: { color: string }) {
|
||||
return (
|
||||
<Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
|
||||
<Path d="M9 18V5l12-2v13" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
|
||||
<Circle cx={6} cy={18} r={3} stroke={color} strokeWidth={1.8} />
|
||||
<Circle cx={18} cy={16} r={3} stroke={color} strokeWidth={1.8} />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SearchIcon({ color }: { color: string }) {
|
||||
return (
|
||||
<Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
|
||||
<Circle cx={11} cy={11} r={8} stroke={color} strokeWidth={1.8} />
|
||||
<Line x1="21" y1="21" x2="16.65" y2="16.65" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ProfileIcon({ color }: { color: string }) {
|
||||
return (
|
||||
<Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
|
||||
<Path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
|
||||
<Circle cx={12} cy={7} r={4} stroke={color} strokeWidth={1.8} />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
tabBar: {
|
||||
position: 'absolute',
|
||||
borderTopWidth: 0,
|
||||
backgroundColor: 'transparent',
|
||||
elevation: 0,
|
||||
height: TAB_BAR_HEIGHT,
|
||||
},
|
||||
});
|
||||
172
app/(tabs)/index.tsx
Normal file
172
app/(tabs)/index.tsx
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, StyleSheet, Pressable,
|
||||
Dimensions, RefreshControl,
|
||||
} 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 { getTracks, getAlbums, Track, Album, coverUrl } from '../../services/api';
|
||||
import { usePlayer } from '../../store';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const CARD_W = width * 0.42;
|
||||
|
||||
export default function HomeScreen() {
|
||||
const [tracks, setTracks] = useState<Track[]>([]);
|
||||
const [albums, setAlbums] = useState<Album[]>([]);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const insets = useSafeAreaInsets();
|
||||
const { setQueue, queue } = usePlayer();
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const [t, a] = await Promise.all([getTracks(), getAlbums()]);
|
||||
setTracks(t);
|
||||
setAlbums(a);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const onRefresh = async () => {
|
||||
setRefresh(true);
|
||||
await load();
|
||||
setRefresh(false);
|
||||
};
|
||||
|
||||
const playTrack = (track: Track, index: number) => {
|
||||
setQueue(tracks, index);
|
||||
usePlayer.getState().setExpanded(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={styles.scroll}
|
||||
contentContainerStyle={[
|
||||
styles.content,
|
||||
{ paddingTop: insets.top + Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }
|
||||
]}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refresh} onRefresh={onRefresh} tintColor={Colors.green} />
|
||||
}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<Animated.View entering={FadeIn.duration(500)}>
|
||||
<Text style={styles.greeting}>Добро пожаловать</Text>
|
||||
<Text style={styles.title}>NodeShift Music</Text>
|
||||
</Animated.View>
|
||||
|
||||
{/* Albums row */}
|
||||
{albums.length > 0 && (
|
||||
<Animated.View entering={FadeInDown.delay(100)} style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Альбомы</Text>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.hScroll}>
|
||||
{albums.map((a, i) => (
|
||||
<AlbumCard key={a.id} album={a} index={i}
|
||||
onPress={() => {/* open album */}} />
|
||||
))}
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
)}
|
||||
|
||||
{/* Tracks list */}
|
||||
{tracks.length > 0 && (
|
||||
<Animated.View entering={FadeInDown.delay(200)} style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Треки</Text>
|
||||
{tracks.map((t, i) => (
|
||||
<TrackRow key={t.id} track={t} index={i} onPress={() => playTrack(t, i)} />
|
||||
))}
|
||||
</Animated.View>
|
||||
)}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
function AlbumCard({ album, index, onPress }: { album: Album; index: number; onPress: () => void }) {
|
||||
const scale = useSharedValue(1);
|
||||
const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
|
||||
const cover = coverUrl(album.cover_url);
|
||||
|
||||
return (
|
||||
<Animated.View entering={FadeInDown.delay(index * 60)} style={style}>
|
||||
<Pressable
|
||||
onPressIn={() => { scale.value = withSpring(0.95, { damping: 15 }); }}
|
||||
onPressOut={() => { scale.value = withSpring(1, { damping: 15 }); }}
|
||||
onPress={onPress}
|
||||
style={styles.albumCard}
|
||||
>
|
||||
<Image
|
||||
source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
|
||||
style={styles.albumCover}
|
||||
contentFit="cover"
|
||||
transition={300}
|
||||
/>
|
||||
<Text style={styles.albumTitle} numberOfLines={1}>{album.title}</Text>
|
||||
<Text style={styles.albumArtist} numberOfLines={1}>{album.artist}</Text>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
function TrackRow({ track, index, onPress }: { track: Track; index: number; onPress: () => void }) {
|
||||
const { queue, index: qi } = usePlayer();
|
||||
const isPlaying = queue[qi]?.id === track.id;
|
||||
const scale = useSharedValue(1);
|
||||
const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
|
||||
const cover = coverUrl(track.cover_url);
|
||||
|
||||
return (
|
||||
<Animated.View entering={FadeInDown.delay(index * 40).duration(300)} style={style}>
|
||||
<Pressable
|
||||
onPressIn={() => { scale.value = withSpring(0.97, { damping: 15 }); }}
|
||||
onPressOut={() => { scale.value = withSpring(1, { damping: 15 }); }}
|
||||
onPress={onPress}
|
||||
style={[styles.trackRow, isPlaying && styles.trackRowActive]}
|
||||
>
|
||||
<Image
|
||||
source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
|
||||
style={styles.trackCover}
|
||||
contentFit="cover"
|
||||
transition={200}
|
||||
/>
|
||||
<View style={styles.trackInfo}>
|
||||
<Text style={[styles.trackTitle, isPlaying && { color: Colors.green }]} numberOfLines={1}>
|
||||
{track.title}
|
||||
</Text>
|
||||
<Text style={styles.trackArtist} numberOfLines={1}>{track.artist}</Text>
|
||||
</View>
|
||||
<Text style={styles.trackDur}>{fmt(track.duration)}</Text>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
function fmt(s: number) {
|
||||
const m = Math.floor(s / 60);
|
||||
const sec = Math.floor(s % 60);
|
||||
return `${m}:${sec < 10 ? '0' : ''}${sec}`;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scroll: { flex: 1, backgroundColor: Colors.bg },
|
||||
content: { paddingHorizontal: Spacing.md },
|
||||
greeting: { color: Colors.text3, fontSize: Font.sm, fontWeight: '600', marginBottom: 4 },
|
||||
title: { color: Colors.text, fontSize: Font.xxxl, fontWeight: '800', letterSpacing: -1, marginBottom: Spacing.xl },
|
||||
section: { marginBottom: Spacing.xl },
|
||||
sectionTitle: { color: Colors.text, fontSize: Font.lg, fontWeight: '700', marginBottom: Spacing.md },
|
||||
hScroll: { paddingRight: Spacing.md, gap: Spacing.md },
|
||||
albumCard: { width: CARD_W },
|
||||
albumCover: { width: CARD_W, height: CARD_W, borderRadius: Radius.md, marginBottom: Spacing.sm, backgroundColor: Colors.elevated },
|
||||
albumTitle: { color: Colors.text, fontSize: Font.sm, fontWeight: '600' },
|
||||
albumArtist: { color: Colors.text2, fontSize: Font.xs, marginTop: 2 },
|
||||
trackRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, paddingHorizontal: Spacing.sm, borderRadius: Radius.md, gap: Spacing.md },
|
||||
trackRowActive: { backgroundColor: Colors.surface },
|
||||
trackCover: { width: 48, height: 48, borderRadius: Radius.sm, backgroundColor: Colors.elevated },
|
||||
trackInfo: { flex: 1 },
|
||||
trackTitle: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
|
||||
trackArtist:{ color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
|
||||
trackDur: { color: Colors.text3, fontSize: Font.xs },
|
||||
});
|
||||
167
app/(tabs)/library.tsx
Normal file
167
app/(tabs)/library.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
View, Text, FlatList, StyleSheet, TextInput, Pressable,
|
||||
} from 'react-native';
|
||||
import Animated, { FadeInDown, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { Image } from 'expo-image';
|
||||
import Svg, { Circle, Line } from 'react-native-svg';
|
||||
import { Colors, Font, Spacing, Radius, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../../constants/theme';
|
||||
import { getTracks, Track, coverUrl } from '../../services/api';
|
||||
import { usePlayer } from '../../store';
|
||||
|
||||
export default function LibraryScreen() {
|
||||
const [all, setAll] = useState<Track[]>([]);
|
||||
const [filtered, setFiltered] = useState<Track[]>([]);
|
||||
const [query, setQuery] = useState('');
|
||||
const insets = useSafeAreaInsets();
|
||||
const { setQueue } = usePlayer();
|
||||
|
||||
useEffect(() => {
|
||||
getTracks().then(t => { setAll(t); setFiltered(t); });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const q = query.toLowerCase();
|
||||
setFiltered(q ? all.filter(t =>
|
||||
t.title.toLowerCase().includes(q) || t.artist.toLowerCase().includes(q)
|
||||
) : all);
|
||||
}, [query, all]);
|
||||
|
||||
const playTrack = (track: Track, index: number) => {
|
||||
setQueue(filtered, index);
|
||||
usePlayer.getState().setExpanded(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Библиотека</Text>
|
||||
<Text style={styles.count}>{all.length} треков</Text>
|
||||
</View>
|
||||
|
||||
{/* Search */}
|
||||
<View style={styles.searchWrap}>
|
||||
<SearchSvg />
|
||||
<TextInput
|
||||
style={styles.searchInput}
|
||||
placeholder="Поиск треков..."
|
||||
placeholderTextColor={Colors.text3}
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
returnKeyType="search"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
{!!query && (
|
||||
<Pressable onPress={() => setQuery('')} hitSlop={12}>
|
||||
<Text style={styles.clearBtn}>✕</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={filtered}
|
||||
keyExtractor={t => String(t.id)}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: Spacing.md,
|
||||
paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24,
|
||||
}}
|
||||
showsVerticalScrollIndicator={false}
|
||||
renderItem={({ item, index }) => (
|
||||
<TrackItem track={item} index={index} onPress={() => playTrack(item, index)} />
|
||||
)}
|
||||
ItemSeparatorComponent={() => <View style={styles.sep} />}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function TrackItem({ 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(Math.min(index * 30, 300)).duration(300)} 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]}
|
||||
>
|
||||
<View style={styles.numWrap}>
|
||||
{active
|
||||
? <View style={styles.eqDots}>{[0,1,2].map(i => <EqDot key={i} delay={i * 150} />)}</View>
|
||||
: <Text style={styles.num}>{index + 1}</Text>}
|
||||
</View>
|
||||
<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 EqDot({ delay }: { delay: number }) {
|
||||
const h = useSharedValue(4);
|
||||
const style = useAnimatedStyle(() => ({ height: h.value }));
|
||||
|
||||
useEffect(() => {
|
||||
const loop = () => {
|
||||
h.value = withSpring(12 + Math.random() * 8, { damping: 6 }, () => {
|
||||
h.value = withSpring(4, { damping: 6 }, loop);
|
||||
});
|
||||
};
|
||||
const t = setTimeout(loop, delay);
|
||||
return () => clearTimeout(t);
|
||||
}, []);
|
||||
|
||||
return <Animated.View style={[styles.dot, style]} />;
|
||||
}
|
||||
|
||||
function SearchSvg() {
|
||||
return (
|
||||
<Svg width={16} height={16} viewBox="0 0 24 24" fill="none" style={{ marginLeft: 12 }}>
|
||||
<Circle cx={11} cy={11} r={8} stroke={Colors.text3} strokeWidth={1.8} />
|
||||
<Line x1="21" y1="21" x2="16.65" y2="16.65" stroke={Colors.text3} strokeWidth={1.8} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
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 },
|
||||
header: { paddingHorizontal: Spacing.md, paddingTop: Spacing.md, paddingBottom: Spacing.sm, flexDirection: 'row', alignItems: 'baseline', gap: Spacing.sm },
|
||||
title: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5 },
|
||||
count: { color: Colors.text3, fontSize: Font.sm },
|
||||
searchWrap: { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.surface, borderRadius: Radius.md, marginHorizontal: Spacing.md, marginBottom: Spacing.md, gap: Spacing.sm },
|
||||
searchInput: { flex: 1, color: Colors.text, fontSize: Font.md, paddingVertical: 12, paddingRight: Spacing.md },
|
||||
clearBtn: { color: Colors.text3, fontSize: Font.sm, paddingRight: 12 },
|
||||
row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, borderRadius: Radius.sm, gap: Spacing.md },
|
||||
rowActive: { backgroundColor: Colors.surface + '80' },
|
||||
numWrap: { width: 28, alignItems: 'center' },
|
||||
num: { color: Colors.text3, fontSize: Font.sm },
|
||||
eqDots: { flexDirection: 'row', alignItems: 'flex-end', gap: 2, height: 16 },
|
||||
dot: { width: 3, backgroundColor: Colors.green, borderRadius: 2 },
|
||||
cover: { width: 44, height: 44, 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, paddingRight: 4 },
|
||||
sep: { height: 1 },
|
||||
});
|
||||
125
app/(tabs)/profile.tsx
Normal file
125
app/(tabs)/profile.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
import { useCallback } from 'react';
|
||||
import {
|
||||
View, Text, StyleSheet, Pressable, ScrollView, Alert,
|
||||
} from 'react-native';
|
||||
import Animated, { FadeIn, FadeInDown } from 'react-native-reanimated';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { Image } from 'expo-image';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import Svg, { Path, Polyline } from 'react-native-svg';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { router } from 'expo-router';
|
||||
import { Colors, Font, Spacing, Radius, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../../constants/theme';
|
||||
import { useAuth } from '../../store';
|
||||
import { logout } from '../../hooks/useAuth';
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { user } = useAuth();
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
Alert.alert('Выход', 'Выйти из аккаунта?', [
|
||||
{ text: 'Отмена', style: 'cancel' },
|
||||
{
|
||||
text: 'Выйти', style: 'destructive',
|
||||
onPress: async () => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
|
||||
await logout();
|
||||
router.replace('/auth');
|
||||
},
|
||||
},
|
||||
]);
|
||||
}, []);
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const initials = (user.username || user.email).slice(0, 2).toUpperCase();
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={styles.scroll}
|
||||
contentContainerStyle={[
|
||||
styles.content,
|
||||
{ paddingTop: insets.top + Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 },
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<Text style={styles.pageTitle}>Профиль</Text>
|
||||
|
||||
<Animated.View entering={FadeIn.duration(500)} style={styles.avatarCard}>
|
||||
<LinearGradient colors={['#1e1e1e', '#141414']} style={styles.avatarCardGrad}>
|
||||
{user.avatar_url ? (
|
||||
<Image source={{ uri: user.avatar_url }} style={styles.avatar} contentFit="cover" />
|
||||
) : (
|
||||
<View style={styles.avatarPlaceholder}>
|
||||
<Text style={styles.avatarInitials}>{initials}</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.displayName}>{user.username || 'Пользователь'}</Text>
|
||||
<Text style={styles.email}>{user.email}</Text>
|
||||
<View style={[styles.planBadge, user.plan !== 'free' && styles.planBadgePro]}>
|
||||
<Text style={[styles.planText, user.plan !== 'free' && styles.planTextPro]}>
|
||||
{user.plan === 'free' ? 'Free' : 'Pro'}
|
||||
</Text>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</Animated.View>
|
||||
|
||||
<Animated.View entering={FadeInDown.delay(100)} style={styles.section}>
|
||||
<Text style={styles.sectionLabel}>Аккаунт</Text>
|
||||
<InfoRow label="Email" value={user.email} />
|
||||
<InfoRow label="Никнейм" value={user.username || '—'} />
|
||||
<InfoRow label="Тариф" value={user.plan === 'free' ? 'Бесплатный' : 'Pro'} />
|
||||
</Animated.View>
|
||||
|
||||
<Animated.View entering={FadeInDown.delay(200)}>
|
||||
<Pressable style={styles.logoutBtn} onPress={handleLogout}>
|
||||
<Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
|
||||
<Path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke={Colors.red} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<Polyline points="16,17 21,12 16,7" stroke={Colors.red} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<Path d="M21 12H9" stroke={Colors.red} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
<Text style={styles.logoutText}>Выйти из аккаунта</Text>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
|
||||
<Animated.Text entering={FadeInDown.delay(300)} style={styles.version}>
|
||||
Burmalda Music · v1.0.0 · by NodeShift
|
||||
</Animated.Text>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
<Text style={styles.infoValue} numberOfLines={1}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scroll: { flex: 1, backgroundColor: Colors.bg },
|
||||
content: { paddingHorizontal: Spacing.md },
|
||||
pageTitle: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, marginBottom: Spacing.lg },
|
||||
avatarCard: { borderRadius: Radius.xl, overflow: 'hidden', marginBottom: Spacing.xl },
|
||||
avatarCardGrad: { padding: Spacing.xl, alignItems: 'center', gap: Spacing.sm },
|
||||
avatar: { width: 88, height: 88, borderRadius: 44, marginBottom: Spacing.sm },
|
||||
avatarPlaceholder: { width: 88, height: 88, borderRadius: 44, backgroundColor: Colors.elevated, alignItems: 'center', justifyContent: 'center', marginBottom: Spacing.sm },
|
||||
avatarInitials: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800' },
|
||||
displayName: { color: Colors.text, fontSize: Font.xl, fontWeight: '700' },
|
||||
email: { color: Colors.text2, fontSize: Font.sm },
|
||||
planBadge: { paddingHorizontal: 12, paddingVertical: 4, borderRadius: Radius.full, backgroundColor: Colors.elevated, marginTop: 4 },
|
||||
planBadgePro: { backgroundColor: Colors.green + '22', borderWidth: 1, borderColor: Colors.green + '44' },
|
||||
planText: { color: Colors.text2, fontSize: Font.xs, fontWeight: '700' },
|
||||
planTextPro: { color: Colors.green },
|
||||
section: { marginBottom: Spacing.lg },
|
||||
sectionLabel: { color: Colors.text3, fontSize: Font.xs, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1, marginBottom: Spacing.sm },
|
||||
infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.border },
|
||||
infoLabel: { color: Colors.text2, fontSize: Font.md },
|
||||
infoValue: { color: Colors.text, fontSize: Font.md, fontWeight: '500', maxWidth: '55%', textAlign: 'right' },
|
||||
logoutBtn: { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm, backgroundColor: Colors.surface, padding: Spacing.md, borderRadius: Radius.md, marginBottom: Spacing.lg },
|
||||
logoutText: { color: Colors.red, fontSize: Font.md, fontWeight: '600' },
|
||||
version: { color: Colors.text3, fontSize: Font.xs, textAlign: 'center' },
|
||||
});
|
||||
136
app/(tabs)/search.tsx
Normal file
136
app/(tabs)/search.tsx
Normal file
|
|
@ -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 },
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue