Add files via upload
This commit is contained in:
Savsis
GitHub
parent
235427ce97
commit
73ed266994
21 changed files with 17879 additions and 1046 deletions
|
|
@ -1,10 +1,10 @@
|
|||
import { useEffect } from 'react';
|
||||
import { View, StyleSheet, ActivityIndicator } from 'react-native';
|
||||
import { View, StyleSheet, ActivityIndicator, Linking } 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, useLikes } from '../../store';
|
||||
import { useAuth, usePlayer, useLikes, useHidden, usePlaylists } from '../../store';
|
||||
import { useAudio } from '../../hooks/useAudio';
|
||||
import MiniPlayer from '../../components/MiniPlayer';
|
||||
import Player from '../../components/Player';
|
||||
|
|
@ -13,6 +13,8 @@ export default function TabsLayout() {
|
|||
const { user, ready } = useAuth();
|
||||
const { expanded } = usePlayer();
|
||||
const { loadLikes } = useLikes();
|
||||
const { loadHidden } = useHidden();
|
||||
const { loadPlaylists } = usePlaylists();
|
||||
useAudio(); // single audio controller for the whole app
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -20,9 +22,33 @@ export default function TabsLayout() {
|
|||
}, [user, ready]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) loadLikes();
|
||||
if (user) { loadLikes(); loadHidden(); loadPlaylists(); }
|
||||
}, [user]);
|
||||
|
||||
// Handle deep link: burmalda://listen?tid=123&ts=45
|
||||
useEffect(() => {
|
||||
const handleUrl = (event: { url: string }) => {
|
||||
try {
|
||||
const url = new URL(event.url);
|
||||
if (url.pathname === '//listen' || url.host === 'listen') {
|
||||
const tid = Number(url.searchParams.get('tid'));
|
||||
const ts = Number(url.searchParams.get('ts') ?? '0');
|
||||
if (!tid) return;
|
||||
const { queue } = usePlayer.getState();
|
||||
const trackIdx = queue.findIndex(t => t.id === tid);
|
||||
if (trackIdx >= 0) {
|
||||
usePlayer.getState().setIndex(trackIdx);
|
||||
usePlayer.getState().setExpanded(true);
|
||||
setTimeout(() => { import('../../hooks/useAudio').then(m => m.seekTo(ts)); }, 500);
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
const sub = Linking.addEventListener('url', handleUrl);
|
||||
Linking.getInitialURL().then(url => { if (url) handleUrl({ url }); });
|
||||
return () => sub.remove();
|
||||
}, []);
|
||||
|
||||
if (!ready) return (
|
||||
<View style={{ flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ActivityIndicator color={Colors.accent} />
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { getTracks, getAlbums, Track, Album, coverUrl } from '../../services/api
|
|||
import { downloadTrack, deleteTrack, isTrackDownloaded, DownloadProgress, cacheTracksAndAlbums, getCachedTracks, getCachedAlbums, initOfflineStorage } from '../../services/offline';
|
||||
import { usePlayer, useLikes, useOffline } from '../../store';
|
||||
import CoverImage from '../../components/CoverImage';
|
||||
import DownloadButton from '../../components/DownloadButton';
|
||||
import TrackDownloadButton from '../../components/DownloadButton';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const CARD_W = (width - Spacing.md * 3) / 2;
|
||||
|
|
@ -196,35 +196,9 @@ function TrackRow({ track, index, liked, onPress, onLike }: {
|
|||
track: Track; index: number; liked: boolean; onPress: () => void; onLike: () => void;
|
||||
}) {
|
||||
const { queue, index: qi } = usePlayer();
|
||||
const { downloadedTracks, downloading, addDownloadedTrack, removeDownloadedTrack, setDownloading } = useOffline();
|
||||
const [isDownloaded, setIsDownloaded] = useState(false);
|
||||
const active = queue[qi]?.id === track.id;
|
||||
const cover = coverUrl(track.cover_url);
|
||||
const downloadProgress = downloading.get(track.id) || 0;
|
||||
|
||||
useEffect(() => {
|
||||
setIsDownloaded(downloadedTracks.has(track.id));
|
||||
}, [downloadedTracks, track.id]);
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (isDownloaded) {
|
||||
await deleteTrack(track.id);
|
||||
removeDownloadedTrack(track.id);
|
||||
setIsDownloaded(false);
|
||||
} else {
|
||||
try {
|
||||
const success = await downloadTrack(track, (prog) => {
|
||||
setDownloading(track.id, prog.progress);
|
||||
});
|
||||
if (success) {
|
||||
addDownloadedTrack(track.id);
|
||||
setIsDownloaded(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Download failed:', err);
|
||||
}
|
||||
}
|
||||
};
|
||||
const ext = (track.filename?.split('.').pop() || 'MP3').toUpperCase();
|
||||
|
||||
return (
|
||||
<Pressable onPress={onPress} style={[styles.trackRow, active && styles.trackRowActive]}>
|
||||
|
|
@ -232,21 +206,17 @@ function TrackRow({ track, index, liked, onPress, onLike }: {
|
|||
<CoverImage uri={cover} title={track.title} size={44} radius={Radius.sm} />
|
||||
<View style={styles.trackInfo}>
|
||||
<Text style={[styles.trackTitle, active && { color: Colors.accent }]} numberOfLines={1}>{track.title}</Text>
|
||||
<Text style={styles.trackArtist} numberOfLines={1}>{track.artist}</Text>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 2 }}>
|
||||
<Text style={styles.trackArtist} numberOfLines={1}>{track.artist}</Text>
|
||||
<View style={styles.extBadge}><Text style={styles.extText}>{ext}</Text></View>
|
||||
</View>
|
||||
</View>
|
||||
<Pressable onPress={onLike} hitSlop={12}>
|
||||
<Svg width={16} height={16} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
|
||||
<Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text3} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
</Pressable>
|
||||
<DownloadButton
|
||||
trackId={track.id}
|
||||
isDownloaded={isDownloaded}
|
||||
downloadProgress={downloadProgress}
|
||||
onDownload={handleDownload}
|
||||
onDelete={handleDownload}
|
||||
size="sm"
|
||||
/>
|
||||
<TrackDownloadButton track={track} size={18} />
|
||||
<Text style={styles.trackDur}>{fmt(track.duration)}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
|
|
@ -276,6 +246,8 @@ const styles = StyleSheet.create({
|
|||
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, width: 36, textAlign: 'right' },
|
||||
extBadge: { backgroundColor: 'rgba(255,255,255,0.07)', paddingHorizontal: 5, paddingVertical: 1, borderRadius: 4 },
|
||||
extText: { color: Colors.text3, fontSize: 9, fontWeight: '700', letterSpacing: 0.5 },
|
||||
// Now playing strip
|
||||
npStrip: { borderRadius: Radius.lg, overflow: 'hidden', marginBottom: Spacing.xl, height: 80 },
|
||||
npDim: { backgroundColor: 'rgba(0,0,0,0.5)' },
|
||||
|
|
|
|||
|
|
@ -1,140 +1,422 @@
|
|||
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, Path } from 'react-native-svg';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { Colors, Font, Spacing, Radius, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../../constants/theme';
|
||||
import { getTracks, Track, coverUrl } from '../../services/api';
|
||||
import { usePlayer, useLikes } 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();
|
||||
const { toggleLike, isLiked } = useLikes();
|
||||
|
||||
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 = (idx: number) => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
setQueue(filtered, idx);
|
||||
usePlayer.getState().setExpanded(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Библиотека</Text>
|
||||
<Text style={styles.count}>{all.length} треков</Text>
|
||||
</View>
|
||||
|
||||
{/* Search */}
|
||||
<View style={styles.searchWrap}>
|
||||
<Svg width={14} height={14} 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>
|
||||
<TextInput
|
||||
style={styles.searchInput}
|
||||
placeholder="Поиск треков..."
|
||||
placeholderTextColor={Colors.text3}
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
returnKeyType="search"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
{!!query && (
|
||||
<Pressable onPress={() => setQuery('')} hitSlop={12} style={{ paddingRight: 12 }}>
|
||||
<Text style={{ color: Colors.text3, fontSize: 12 }}>✕</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}
|
||||
liked={isLiked(item.id)}
|
||||
onPress={() => playTrack(index)}
|
||||
onLike={() => toggleLike(item.id)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function TrackItem({ track, index, liked, onPress, onLike }: {
|
||||
track: Track; index: number; liked: boolean; onPress: () => void; onLike: () => void;
|
||||
}) {
|
||||
const { queue, index: qi } = usePlayer();
|
||||
const active = queue[qi]?.id === track.id;
|
||||
const cover = coverUrl(track.cover_url);
|
||||
|
||||
return (
|
||||
<Animated.View entering={FadeInDown.delay(Math.min(index * 25, 300)).duration(300)}>
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={[styles.row, active && styles.rowActive]}
|
||||
>
|
||||
<Text style={styles.num}>{index + 1}</Text>
|
||||
<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.accent }]} numberOfLines={1}>{track.title}</Text>
|
||||
<Text style={styles.artist} numberOfLines={1}>{track.artist}</Text>
|
||||
</View>
|
||||
<Pressable onPress={onLike} hitSlop={12}>
|
||||
<Svg width={16} height={16} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
|
||||
<Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text3} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
</Pressable>
|
||||
<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 },
|
||||
header: { flexDirection: 'row', alignItems: 'baseline', gap: Spacing.sm, paddingHorizontal: Spacing.md, paddingTop: Spacing.md, paddingBottom: Spacing.sm },
|
||||
title: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, flex: 1 },
|
||||
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: 8 },
|
||||
searchInput:{ flex: 1, color: Colors.text, fontSize: Font.md, paddingVertical: 11, paddingRight: Spacing.md },
|
||||
row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, gap: Spacing.sm, borderRadius: Radius.sm, paddingHorizontal: 4 },
|
||||
rowActive: { backgroundColor: Colors.surface },
|
||||
num: { width: 22, color: Colors.text3, fontSize: Font.sm, textAlign: 'center' },
|
||||
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 },
|
||||
});
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
View, Text, FlatList, StyleSheet, Pressable, Alert, TextInput, Modal,
|
||||
ActionSheetIOS, Platform,
|
||||
} 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, { Path, Circle, Line, Rect } from 'react-native-svg';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { Colors, Font, Spacing, Radius, TAB_BAR_HEIGHT, MINI_PLAYER_HEIGHT } from '../../constants/theme';
|
||||
import { getTracks, Track, coverUrl } from '../../services/api';
|
||||
import { usePlayer, useLikes, useHidden, usePlaylists, Playlist } from '../../store';
|
||||
import { getMyWaveTracks } from '../../services/mywave';
|
||||
import TrackDownloadButton from '../../components/DownloadButton';
|
||||
import WaveAnimation from '../../components/WaveAnimation';
|
||||
|
||||
type Tab = 'tracks' | 'playlists' | 'wave';
|
||||
|
||||
export default function LibraryScreen() {
|
||||
const [all, setAll] = useState<Track[]>([]);
|
||||
const [query, setQuery] = useState('');
|
||||
const [tab, setTab] = useState<Tab>('tracks');
|
||||
const [wave, setWave] = useState<Track[]>([]);
|
||||
const [waveLoading, setWaveLoading] = useState(false);
|
||||
const [newPlName, setNewPlName] = useState('');
|
||||
const [showNewPl, setShowNewPl] = useState(false);
|
||||
const insets = useSafeAreaInsets();
|
||||
const { setQueue } = usePlayer();
|
||||
const { toggleLike, isLiked } = useLikes();
|
||||
const { isHidden, toggleHide } = useHidden();
|
||||
const { playlists, createPlaylist, deletePlaylist, renamePlaylist } = usePlaylists();
|
||||
|
||||
useEffect(() => {
|
||||
getTracks().then(t => setAll(t));
|
||||
}, []);
|
||||
|
||||
const visible = all.filter(t => {
|
||||
if (isHidden(t.id)) return false;
|
||||
if (!query) return true;
|
||||
const q = query.toLowerCase();
|
||||
return t.title.toLowerCase().includes(q) || t.artist.toLowerCase().includes(q);
|
||||
});
|
||||
|
||||
const loadWave = useCallback(async () => {
|
||||
if (wave.length > 0) { setTab('wave'); return; }
|
||||
setWaveLoading(true);
|
||||
const tracks = await getMyWaveTracks(all);
|
||||
setWave(tracks);
|
||||
setWaveLoading(false);
|
||||
setTab('wave');
|
||||
}, [all, wave.length]);
|
||||
|
||||
const playTrack = (list: Track[], idx: number) => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
setQueue(list, idx);
|
||||
usePlayer.getState().setExpanded(true);
|
||||
};
|
||||
|
||||
const handleLongPress = (track: Track) => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
|
||||
const hidden = isHidden(track.id);
|
||||
const options = [
|
||||
hidden ? 'Показать трек' : 'Скрыть из библиотеки',
|
||||
isLiked(track.id) ? 'Убрать из избранного' : 'В избранное',
|
||||
'Отмена',
|
||||
];
|
||||
if (Platform.OS === 'ios') {
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{ options, cancelButtonIndex: 2, destructiveButtonIndex: 0 },
|
||||
(i) => {
|
||||
if (i === 0) toggleHide(track.id);
|
||||
if (i === 1) toggleLike(track.id);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
Alert.alert(track.title, undefined, [
|
||||
{ text: hidden ? 'Показать' : 'Скрыть', onPress: () => toggleHide(track.id), style: 'destructive' },
|
||||
{ text: isLiked(track.id) ? 'Убрать из избранного' : 'В избранное', onPress: () => toggleLike(track.id) },
|
||||
{ text: 'Отмена', style: 'cancel' },
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePlaylistLongPress = (pl: Playlist) => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
|
||||
const options = ['Переименовать', 'Удалить', 'Отмена'];
|
||||
if (Platform.OS === 'ios') {
|
||||
ActionSheetIOS.showActionSheetWithOptions(
|
||||
{ options, cancelButtonIndex: 2, destructiveButtonIndex: 1 },
|
||||
(i) => {
|
||||
if (i === 0) {
|
||||
Alert.prompt('Переименовать', undefined, (name) => {
|
||||
if (name?.trim()) renamePlaylist(pl.id, name.trim());
|
||||
}, undefined, pl.name);
|
||||
}
|
||||
if (i === 1) deletePlaylist(pl.id);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
Alert.alert(pl.name, undefined, [
|
||||
{ text: 'Удалить', onPress: () => deletePlaylist(pl.id), style: 'destructive' },
|
||||
{ text: 'Отмена', style: 'cancel' },
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[s.root, { paddingTop: insets.top }]}>
|
||||
{/* Header */}
|
||||
<View style={s.header}>
|
||||
<Text style={s.title}>Библиотека</Text>
|
||||
<Pressable onPress={() => setShowNewPl(true)} style={s.addBtn} hitSlop={12}>
|
||||
<Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
|
||||
<Path d="M12 5v14M5 12h14" stroke={Colors.accent} strokeWidth={2.2} strokeLinecap="round" />
|
||||
</Svg>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Tabs */}
|
||||
<View style={s.tabRow}>
|
||||
{(['tracks', 'playlists', 'wave'] as Tab[]).map(t => (
|
||||
<Pressable
|
||||
key={t}
|
||||
style={[s.tabBtn, tab === t && s.tabBtnActive]}
|
||||
onPress={() => t === 'wave' ? loadWave() : setTab(t)}
|
||||
>
|
||||
<Text style={[s.tabText, tab === t && s.tabTextActive]}>
|
||||
{t === 'tracks' ? 'Треки' : t === 'playlists' ? 'Плейлисты' : 'Моя волна'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Search (only on tracks tab) */}
|
||||
{tab === 'tracks' && (
|
||||
<View style={s.searchWrap}>
|
||||
<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
|
||||
<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>
|
||||
<TextInput
|
||||
style={s.searchInput}
|
||||
placeholder="Поиск..."
|
||||
placeholderTextColor={Colors.text3}
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
returnKeyType="search"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
{!!query && (
|
||||
<Pressable onPress={() => setQuery('')} hitSlop={12} style={{ paddingRight: 12 }}>
|
||||
<Text style={{ color: Colors.text3, fontSize: 13 }}>x</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{tab === 'tracks' && (
|
||||
<FlatList
|
||||
data={visible}
|
||||
keyExtractor={t => String(t.id)}
|
||||
contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
renderItem={({ item, index }) => (
|
||||
<TrackRow
|
||||
track={item}
|
||||
index={index}
|
||||
liked={isLiked(item.id)}
|
||||
onPress={() => playTrack(visible, index)}
|
||||
onLike={() => toggleLike(item.id)}
|
||||
onLongPress={() => handleLongPress(item)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tab === 'playlists' && (
|
||||
<FlatList
|
||||
data={playlists}
|
||||
keyExtractor={p => p.id}
|
||||
contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
onScrollBeginDrag={() => Haptics.selectionAsync()}
|
||||
ListEmptyComponent={<EmptyState text="Нет плейлистов. Нажмите + чтобы создать." />}
|
||||
renderItem={({ item }) => (
|
||||
<PlaylistRow
|
||||
playlist={item}
|
||||
tracks={all}
|
||||
onPress={() => {
|
||||
const tracks = all.filter(t => item.trackIds.includes(t.id));
|
||||
if (tracks.length) playTrack(tracks, 0);
|
||||
}}
|
||||
onLongPress={() => handlePlaylistLongPress(item)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tab === 'wave' && (
|
||||
<FlatList
|
||||
data={wave}
|
||||
keyExtractor={t => String(t.id)}
|
||||
contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
ListHeaderComponent={
|
||||
<View style={s.waveHeader}>
|
||||
{/* Animated wave */}
|
||||
<View style={s.waveViz}>
|
||||
<WaveAnimation active={!waveLoading} barCount={50} height={64} />
|
||||
</View>
|
||||
<View style={s.waveGradientOverlay} pointerEvents="none" />
|
||||
<Text style={s.waveTitle}>Моя волна</Text>
|
||||
<Text style={s.waveSub}>
|
||||
{waveLoading ? 'DeepSeek подбирает треки...' : `${wave.length} треков на основе ваших лайков`}
|
||||
</Text>
|
||||
{wave.length > 0 && (
|
||||
<Pressable
|
||||
style={s.playAllBtn}
|
||||
onPress={() => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
|
||||
playTrack(wave, 0);
|
||||
}}
|
||||
>
|
||||
<Svg width={16} height={16} viewBox="0 0 24 24" fill={Colors.bg}>
|
||||
<Path d="M8 5v14l11-7z" />
|
||||
</Svg>
|
||||
<Text style={s.playAllText}>Слушать волну</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
}
|
||||
ListEmptyComponent={
|
||||
waveLoading
|
||||
? <EmptyState text="Подбираем треки..." />
|
||||
: <EmptyState text="Лайкните треки, чтобы получить рекомендации" />
|
||||
}
|
||||
renderItem={({ item, index }) => (
|
||||
<TrackRow
|
||||
track={item}
|
||||
index={index}
|
||||
liked={isLiked(item.id)}
|
||||
onPress={() => playTrack(wave, index)}
|
||||
onLike={() => toggleLike(item.id)}
|
||||
onLongPress={() => handleLongPress(item)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* New playlist modal */}
|
||||
<Modal visible={showNewPl} transparent animationType="slide">
|
||||
<Pressable style={s.modalBg} onPress={() => setShowNewPl(false)} />
|
||||
<View style={s.modalSheet}>
|
||||
<Text style={s.modalTitle}>Новый плейлист</Text>
|
||||
<TextInput
|
||||
style={s.modalInput}
|
||||
placeholder="Название..."
|
||||
placeholderTextColor={Colors.text3}
|
||||
value={newPlName}
|
||||
onChangeText={setNewPlName}
|
||||
autoFocus
|
||||
returnKeyType="done"
|
||||
/>
|
||||
<View style={s.modalBtns}>
|
||||
<Pressable style={s.modalCancel} onPress={() => { setShowNewPl(false); setNewPlName(''); }}>
|
||||
<Text style={s.modalCancelText}>Отмена</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[s.modalCreate, !newPlName.trim() && { opacity: 0.4 }]}
|
||||
onPress={() => {
|
||||
if (!newPlName.trim()) return;
|
||||
createPlaylist(newPlName.trim());
|
||||
setNewPlName('');
|
||||
setShowNewPl(false);
|
||||
setTab('playlists');
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
}}
|
||||
>
|
||||
<Text style={s.modalCreateText}>Создать</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function TrackRow({ track, index, liked, onPress, onLike, onLongPress }: {
|
||||
track: Track; index: number; liked: boolean;
|
||||
onPress: () => void; onLike: () => void; onLongPress: () => void;
|
||||
}) {
|
||||
const { queue, index: qi } = usePlayer();
|
||||
const active = queue[qi]?.id === track.id;
|
||||
const cover = coverUrl(track.cover_url);
|
||||
const ext = (track.filename?.split('.').pop() || 'MP3').toUpperCase();
|
||||
|
||||
return (
|
||||
<Animated.View entering={FadeInDown.delay(Math.min(index * 20, 300)).duration(250)}>
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
onLongPress={onLongPress}
|
||||
delayLongPress={350}
|
||||
style={[s.row, active && s.rowActive]}
|
||||
>
|
||||
<Image
|
||||
source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
|
||||
style={s.cover}
|
||||
contentFit="cover"
|
||||
transition={200}
|
||||
/>
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text style={[s.trackTitle, active && { color: Colors.accent }]} numberOfLines={1}>{track.title}</Text>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 }}>
|
||||
<Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
|
||||
<View style={s.extBadge}><Text style={s.extText}>{ext}</Text></View>
|
||||
</View>
|
||||
</View>
|
||||
<TrackDownloadButton track={track} size={18} />
|
||||
<Pressable onPress={onLike} hitSlop={12}>
|
||||
<Svg width={16} height={16} viewBox="0 0 24 24" fill={liked ? Colors.pink : 'none'}>
|
||||
<Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={liked ? Colors.pink : Colors.text3} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
function PlaylistRow({ playlist, tracks, onPress, onLongPress }: {
|
||||
playlist: Playlist; tracks: Track[]; onPress: () => void; onLongPress: () => void;
|
||||
}) {
|
||||
const scale = useSharedValue(1);
|
||||
const aStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
|
||||
const count = playlist.trackIds.length;
|
||||
const cover = tracks.find(t => playlist.trackIds.includes(t.id))?.cover_url;
|
||||
const coverUri = cover ? coverUrl(cover) : null;
|
||||
|
||||
return (
|
||||
<Animated.View style={aStyle}>
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
onLongPress={onLongPress}
|
||||
delayLongPress={350}
|
||||
onPressIn={() => { scale.value = withSpring(0.97, { damping: 15 }); }}
|
||||
onPressOut={() => { scale.value = withSpring(1, { damping: 15 }); }}
|
||||
style={s.plRow}
|
||||
>
|
||||
<View style={s.plCover}>
|
||||
{coverUri
|
||||
? <Image source={{ uri: coverUri }} style={{ width: 52, height: 52, borderRadius: Radius.sm }} contentFit="cover" />
|
||||
: <View style={[s.plCoverFallback]}>
|
||||
<Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
|
||||
<Path d="M9 18V5l12-2v13" stroke={Colors.text3} strokeWidth={1.8} strokeLinecap="round" />
|
||||
<Circle cx={6} cy={18} r={3} stroke={Colors.text3} strokeWidth={1.8} />
|
||||
<Circle cx={18} cy={16} r={3} stroke={Colors.text3} strokeWidth={1.8} />
|
||||
</Svg>
|
||||
</View>
|
||||
}
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={s.plName} numberOfLines={1}>{playlist.name}</Text>
|
||||
<Text style={s.plCount}>{count} {count === 1 ? 'трек' : count < 5 ? 'трека' : 'треков'}</Text>
|
||||
</View>
|
||||
<Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
|
||||
<Path d="M9 18l6-6-6-6" stroke={Colors.text3} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ text }: { text: string }) {
|
||||
return (
|
||||
<View style={{ alignItems: 'center', marginTop: 80, paddingHorizontal: 32 }}>
|
||||
<Text style={{ color: Colors.text3, fontSize: Font.sm, textAlign: 'center', lineHeight: 22 }}>{text}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
root: { flex: 1, backgroundColor: Colors.bg },
|
||||
header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: Spacing.md, paddingTop: Spacing.md, paddingBottom: 8 },
|
||||
title: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, flex: 1 },
|
||||
addBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: Colors.surface, alignItems: 'center', justifyContent: 'center' },
|
||||
tabRow: { flexDirection: 'row', paddingHorizontal: Spacing.md, gap: 8, marginBottom: 12 },
|
||||
tabBtn: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: Radius.full, backgroundColor: Colors.surface },
|
||||
tabBtnActive: { backgroundColor: Colors.accent },
|
||||
tabText: { color: Colors.text2, fontSize: Font.sm, fontWeight: '600' },
|
||||
tabTextActive:{ color: '#fff', fontSize: Font.sm, fontWeight: '700' },
|
||||
searchWrap: { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.surface, borderRadius: Radius.md, marginHorizontal: Spacing.md, marginBottom: Spacing.md, gap: 8, paddingLeft: 12 },
|
||||
searchInput: { flex: 1, color: Colors.text, fontSize: Font.md, paddingVertical: 11 },
|
||||
row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, gap: 10, borderRadius: Radius.sm, paddingHorizontal: 4 },
|
||||
rowActive: { backgroundColor: Colors.surface },
|
||||
cover: { width: 46, height: 46, borderRadius: Radius.sm, backgroundColor: Colors.elevated, flexShrink: 0 },
|
||||
trackTitle: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
|
||||
artist: { color: Colors.text2, fontSize: Font.sm, flex: 1 },
|
||||
extBadge: { backgroundColor: 'rgba(255,255,255,0.08)', paddingHorizontal: 5, paddingVertical: 1, borderRadius: 4 },
|
||||
extText: { color: Colors.text3, fontSize: 9, fontWeight: '700', letterSpacing: 0.5 },
|
||||
plRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, gap: 14, paddingHorizontal: 4 },
|
||||
plCover: { width: 52, height: 52, borderRadius: Radius.sm, overflow: 'hidden', flexShrink: 0 },
|
||||
plCoverFallback: { width: 52, height: 52, backgroundColor: Colors.elevated, borderRadius: Radius.sm, alignItems: 'center', justifyContent: 'center' },
|
||||
plName: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
|
||||
plCount: { color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
|
||||
waveHeader: { paddingBottom: 20, alignItems: 'center', overflow: 'hidden', borderRadius: 20, marginBottom: 8, backgroundColor: Colors.surface },
|
||||
waveViz: { width: '100%', height: 80, overflow: 'hidden', marginBottom: 0 },
|
||||
waveGradientOverlay: { position: 'absolute', top: 0, left: 0, right: 0, height: 80, backgroundColor: 'transparent' },
|
||||
waveTitle: { color: Colors.text, fontSize: Font.xl, fontWeight: '800', letterSpacing: -0.3, marginTop: 16 },
|
||||
waveSub: { color: Colors.text2, fontSize: Font.sm, marginTop: 4, marginBottom: 16 },
|
||||
playAllBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, backgroundColor: Colors.accent, paddingHorizontal: 28, paddingVertical: 13, borderRadius: Radius.full },
|
||||
playAllText: { color: Colors.bg, fontSize: Font.md, fontWeight: '700' },
|
||||
modalBg: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' },
|
||||
modalSheet: { backgroundColor: Colors.surface, borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 24, paddingBottom: 40 },
|
||||
modalTitle: { color: Colors.text, fontSize: Font.lg, fontWeight: '700', marginBottom: 16 },
|
||||
modalInput: { backgroundColor: Colors.elevated, color: Colors.text, borderRadius: Radius.md, paddingHorizontal: 14, paddingVertical: 12, fontSize: Font.md, marginBottom: 16 },
|
||||
modalBtns: { flexDirection: 'row', gap: 12 },
|
||||
modalCancel: { flex: 1, paddingVertical: 14, borderRadius: Radius.md, backgroundColor: Colors.elevated, alignItems: 'center' },
|
||||
modalCancelText: { color: Colors.text2, fontWeight: '600' },
|
||||
modalCreate: { flex: 1, paddingVertical: 14, borderRadius: Radius.md, backgroundColor: Colors.accent, alignItems: 'center' },
|
||||
modalCreateText: { color: '#fff', fontWeight: '700' },
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue