savsisbtw/nodeshiftmusicburmalda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add files via upload

Browse source
This commit is contained in:
Savsis 2026-05-05 18:17:09 +05:00 • committed by GitHub
parent d612a65f81
commit 5748d2d13c
31 changed files with 3197 additions and 2492 deletions
Download patch file Download diff file Expand all files Collapse all files

117
app.json
View file

@ -1,58 +1,59 @@
{
"expo": {
"name": "Burmalda Music",
"slug": "burmalda-music",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "dark",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#0a0a0a"
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": false,
"bundleIdentifier": "space.nodeshift.burmalda",
"buildNumber": "1",
"infoPlist": {
"UIBackgroundModes": ["audio"],
"NSMicrophoneUsageDescription": "Не используется",
"CFBundleURLTypes": [
{
"CFBundleURLSchemes": ["burmalda"]
}
]
}
},
"scheme": "burmalda",
"plugins": [
"expo-router",
"react-native-track-player",
[
"expo-updates",
{
"username": "nodeshift"
}
]
],
"updates": {
"enabled": true,
"checkAutomatically": "ON_LOAD",
"url": "https://nodeshift.space/api/ios/updates"
},
"runtimeVersion": {
"policy": "appVersion"
},
"extra": {
"apiBase": "https://music.nodeshift.space",
"cloudClientId": "nsc_A5zi4cZ103aYJGcNTG1bERXV1YCAQW_U",
"eas": {}
},
"experiments": {
"typedRoutes": true
}
}
}
{
"expo": {
"name": "Burmalda Music",
"slug": "burmalda-music",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "dark",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#0a0a0a"
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": false,
"bundleIdentifier": "space.nodeshift.burmalda",
"buildNumber": "1",
"infoPlist": {
"UIBackgroundModes": ["audio"],
"NSMicrophoneUsageDescription": "Не используется",
"NSFileProtectionComplete": "NSFileProtectionCompleteUnlessOpen",
"CFBundleURLTypes": [
{
"CFBundleURLSchemes": ["burmalda"]
}
]
}
},
"scheme": "burmalda",
"plugins": [
"expo-router",
"react-native-track-player",
[
"expo-updates",
{
"username": "nodeshift"
}
]
],
"updates": {
"enabled": true,
"checkAutomatically": "ON_LOAD",
"url": "https://nodeshift.space/api/ios/updates"
},
"runtimeVersion": {
"policy": "appVersion"
},
"extra": {
"apiBase": "https://music.nodeshift.space",
"cloudClientId": "nsc_A5zi4cZ103aYJGcNTG1bERXV1YCAQW_U",
"eas": {}
},
"experiments": {
"typedRoutes": true
}
}
}

222
app/(tabs)/_layout.tsx
View file

@ -1,111 +1,111 @@
import { useEffect } from 'react';
import { View, StyleSheet, ActivityIndicator } 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 { useAudio } from '../../hooks/useAudio';
import MiniPlayer from '../../components/MiniPlayer';
import Player from '../../components/Player';
export default function TabsLayout() {
const { user, ready } = useAuth();
const { expanded } = usePlayer();
const { loadLikes } = useLikes();
useAudio(); // single audio controller for the whole app
useEffect(() => {
if (ready && !user) router.replace('/auth');
}, [user, ready]);
useEffect(() => {
if (user) loadLikes();
}, [user]);
if (!ready) return (
<View style={{ flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator color={Colors.accent} />
</View>
);
if (!user) return null;
return (
<View style={{ flex: 1, backgroundColor: Colors.bg }}>
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: styles.tabBar,
tabBarBackground: () => (
<BlurView intensity={30} tint="dark" style={StyleSheet.absoluteFill} />
),
tabBarActiveTintColor: Colors.text,
tabBarInactiveTintColor: Colors.text3,
tabBarLabelStyle: { fontSize: 9, fontWeight: '500', letterSpacing: 0.3, marginBottom: 4 },
tabBarItemStyle: { paddingTop: 6 },
}}
>
<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="liked" options={{ title: 'Понравилось', tabBarIcon: ({ color }) => <HeartIcon 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={20} height={20} 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={20} height={20} 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={20} height={20} 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 HeartIcon({ color }: { color: string }) {
return (
<Svg width={20} height={20} viewBox="0 0 24 24" fill="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={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
);
}
function ProfileIcon({ color }: { color: string }) {
return (
<Svg width={20} height={20} 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: StyleSheet.hairlineWidth,
borderTopColor: 'rgba(255,255,255,0.08)',
backgroundColor: 'transparent',
elevation: 0,
height: TAB_BAR_HEIGHT,
},
});
import { useEffect } from 'react';
import { View, StyleSheet, ActivityIndicator } 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 { useAudio } from '../../hooks/useAudio';
import MiniPlayer from '../../components/MiniPlayer';
import Player from '../../components/Player';
export default function TabsLayout() {
const { user, ready } = useAuth();
const { expanded } = usePlayer();
const { loadLikes } = useLikes();
useAudio(); // single audio controller for the whole app
useEffect(() => {
if (ready && !user) router.replace('/auth');
}, [user, ready]);
useEffect(() => {
if (user) loadLikes();
}, [user]);
if (!ready) return (
<View style={{ flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator color={Colors.accent} />
</View>
);
if (!user) return null;
return (
<View style={{ flex: 1, backgroundColor: Colors.bg }}>
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: styles.tabBar,
tabBarBackground: () => (
<BlurView intensity={30} tint="dark" style={StyleSheet.absoluteFill} />
),
tabBarActiveTintColor: Colors.text,
tabBarInactiveTintColor: Colors.text3,
tabBarLabelStyle: { fontSize: 9, fontWeight: '500', letterSpacing: 0.3, marginBottom: 4 },
tabBarItemStyle: { paddingTop: 6 },
}}
>
<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="liked" options={{ title: 'Понравилось', tabBarIcon: ({ color }) => <HeartIcon 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={20} height={20} 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={20} height={20} 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={20} height={20} 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 HeartIcon({ color }: { color: string }) {
return (
<Svg width={20} height={20} viewBox="0 0 24 24" fill="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={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
);
}
function ProfileIcon({ color }: { color: string }) {
return (
<Svg width={20} height={20} 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: StyleSheet.hairlineWidth,
borderTopColor: 'rgba(255,255,255,0.08)',
backgroundColor: 'transparent',
elevation: 0,
height: TAB_BAR_HEIGHT,
},
});

501
app/(tabs)/index.tsx
View file

@ -1,211 +1,290 @@
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 Svg, { 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, getAlbums, Track, Album, coverUrl } from '../../services/api';
import { usePlayer, useLikes } from '../../store';
import CoverImage from '../../components/CoverImage';
const { width } = Dimensions.get('window');
const CARD_W = (width - Spacing.md * 3) / 2;
export default function HomeScreen() {
const [tracks, setTracks] = useState<Track[]>([]);
const [albums, setAlbums] = useState<Album[]>([]);
const [refresh, setRefresh] = useState(false);
const insets = useSafeAreaInsets();
const { setQueue } = usePlayer();
const { toggleLike, isLiked } = useLikes();
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, list: Track[], idx: number) => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setQueue(list, idx);
usePlayer.getState().setExpanded(true);
};
return (
<ScrollView
style={styles.scroll}
contentContainerStyle={[styles.content, { paddingTop: insets.top + 14, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }]}
refreshControl={<RefreshControl refreshing={refresh} onRefresh={onRefresh} tintColor={Colors.text2} />}
showsVerticalScrollIndicator={false}
>
<Animated.View entering={FadeIn.duration(400)} style={styles.pageHeader}>
<Text style={styles.pageTitle}>NodeShift Music</Text>
</Animated.View>
<NowPlayingStrip />
{albums.length > 0 && (
<Animated.View entering={FadeInDown.delay(100)} style={styles.section}>
<Text style={styles.secTitle}>Альбомы</Text>
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.hRow}>
{albums.map((a, i) => (
<AlbumCard key={a.id} album={a} delay={i * 50} onPress={() => {
const albumTracks = tracks.filter(t => t.album === a.title);
if (albumTracks.length > 0) {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setQueue(albumTracks, 0);
usePlayer.getState().setExpanded(true);
}
}} />
))}
</ScrollView>
</Animated.View>
)}
{tracks.length > 0 && (
<Animated.View entering={FadeInDown.delay(200)} style={styles.section}>
<Text style={styles.secTitle}>Треки</Text>
{tracks.map((t, i) => (
<TrackRow
key={t.id}
track={t}
index={i}
liked={isLiked(t.id)}
onPress={() => playTrack(t, tracks, i)}
onLike={() => toggleLike(t.id)}
/>
))}
</Animated.View>
)}
</ScrollView>
);
}
function NowPlayingStrip() {
const { queue, index, playing, setExpanded } = usePlayer();
const track = queue[index];
if (!track) return null;
const cover = coverUrl(track.cover_url);
return (
<Animated.View entering={FadeInDown.duration(300)} style={styles.npStrip}>
{/* Blurred cover background */}
<CoverImage
uri={cover}
title={track.title}
size={160}
radius={0}
blurRadius={40}
style={StyleSheet.absoluteFill as any}
/>
<View style={[StyleSheet.absoluteFill, styles.npDim]} />
<Pressable style={styles.npContent} onPress={() => setExpanded(true)}>
<CoverImage uri={cover} title={track.title} size={52} radius={Radius.sm} />
<View style={styles.npInfo}>
<Text style={styles.npLabel}>Сейчас играет</Text>
<Text style={styles.npTitle} numberOfLines={1}>{track.title}</Text>
<Text style={styles.npArtist} numberOfLines={1}>{track.artist}</Text>
</View>
<View style={styles.npDot}>
{playing
? <View style={styles.npEq}>{[1, 2, 3].map(i => <Animated.View key={i} style={[styles.npBar, { height: 4 + i * 4 }]} />)}</View>
: <Svg width={16} height={16} viewBox="0 0 24 24" fill={Colors.text}><Path d="M8 5v14l11-7z" /></Svg>
}
</View>
</Pressable>
</Animated.View>
);
}
function AlbumCard({ album, delay, onPress }: { album: Album; delay: 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(delay)} style={style}>
<Pressable
onPressIn={() => { scale.value = withSpring(0.95, { damping: 15 }); }}
onPressOut={() => { scale.value = withSpring(1, { damping: 15 }); }}
onPress={onPress}
style={styles.albumCard}
>
<CoverImage uri={cover} title={album.title} size={CARD_W} radius={Radius.md} style={{ marginBottom: Spacing.sm }} />
<Text style={styles.albumTitle} numberOfLines={1}>{album.title}</Text>
<Text style={styles.albumArtist} numberOfLines={1}>{album.artist}</Text>
<Text style={styles.albumCount}>{album.track_count} треков</Text>
</Pressable>
</Animated.View>
);
}
function TrackRow({ 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 (
<Pressable onPress={onPress} style={[styles.trackRow, active && styles.trackRowActive]}>
<Text style={styles.trackNum}>{index + 1}</Text>
<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>
<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.trackDur}>{fmt(track.duration)}</Text>
</Pressable>
);
}
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({
scroll: { flex: 1, backgroundColor: Colors.bg },
content: { paddingHorizontal: Spacing.md },
pageHeader: { marginBottom: Spacing.md },
pageTitle: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5 },
section: { marginBottom: Spacing.xl },
secTitle: { color: Colors.text, fontSize: Font.lg, fontWeight: '700', marginBottom: Spacing.md },
hRow: { gap: Spacing.md, paddingRight: Spacing.md },
albumCard: { width: CARD_W },
albumTitle: { color: Colors.text, fontSize: Font.sm, fontWeight: '600' },
albumArtist: { color: Colors.text2, fontSize: Font.xs, marginTop: 2 },
albumCount: { color: Colors.text3, fontSize: Font.xs, marginTop: 2 },
trackRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, paddingHorizontal: Spacing.sm, borderRadius: Radius.sm, gap: Spacing.sm },
trackRowActive: { backgroundColor: Colors.surface },
trackNum: { width: 24, color: Colors.text3, fontSize: Font.sm, textAlign: 'center' },
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 },
// Now playing strip
npStrip: { borderRadius: Radius.lg, overflow: 'hidden', marginBottom: Spacing.xl, height: 80 },
npDim: { backgroundColor: 'rgba(0,0,0,0.5)' },
npContent: { flex: 1, flexDirection: 'row', alignItems: 'center', padding: 14, gap: 12 },
npInfo: { flex: 1 },
npLabel: { color: 'rgba(255,255,255,0.45)', fontSize: 10, fontWeight: '600', letterSpacing: 0.5, marginBottom: 2 },
npTitle: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
npArtist: { color: Colors.text2, fontSize: Font.xs, marginTop: 1 },
npDot: { width: 32, height: 32, alignItems: 'center', justifyContent: 'center' },
npEq: { flexDirection: 'row', alignItems: 'flex-end', gap: 2 },
npBar: { width: 3, backgroundColor: Colors.accent, borderRadius: 2 },
});
import { useEffect, useState, useCallback } from 'react';
import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions, RefreshControl, ActivityIndicator } from 'react-native';
import Animated, { FadeIn, FadeInDown, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useFocusEffect } from 'expo-router';
import * as Network from 'expo-network';
import Svg, { 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, 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';
const { width } = Dimensions.get('window');
const CARD_W = (width - Spacing.md * 3) / 2;
export default function HomeScreen() {
const [tracks, setTracks] = useState<Track[]>([]);
const [albums, setAlbums] = useState<Album[]>([]);
const [refresh, setRefresh] = useState(false);
const [loading, setLoading] = useState(true);
const insets = useSafeAreaInsets();
const { setQueue } = usePlayer();
const { toggleLike, isLiked } = useLikes();
const { setOnline, loadDownloadedTracks } = useOffline();
const load = useCallback(async () => {
// Check network
const isOnline = await Network.getNetworkStateAsync();
setOnline(isOnline.isConnected);
if (isOnline.isConnected) {
try {
const [t, a] = await Promise.all([getTracks(), getAlbums()]);
if (t.length > 0) {
setTracks(t);
setAlbums(a);
await cacheTracksAndAlbums(t, a);
setLoading(false);
return;
}
} catch (err) {
console.warn('Failed to fetch online:', err);
}
}
// Fallback to cached data
const cachedTracks = await getCachedTracks();
const cachedAlbums = await getCachedAlbums();
if (cachedTracks) setTracks(cachedTracks);
if (cachedAlbums) setAlbums(cachedAlbums);
setLoading(false);
}, [setOnline]);
useEffect(() => {
initOfflineStorage();
loadDownloadedTracks();
load();
}, []);
useFocusEffect(() => {
loadDownloadedTracks();
});
const onRefresh = async () => {
setRefresh(true);
await load();
setRefresh(false);
};
const playTrack = (track: Track, list: Track[], idx: number) => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setQueue(list, idx);
usePlayer.getState().setExpanded(true);
};
if (loading && tracks.length === 0) {
return (
<View style={[styles.scroll, { justifyContent: 'center', alignItems: 'center' }]}>
<ActivityIndicator size="large" color={Colors.accent} />
</View>
);
}
return (
<ScrollView
style={styles.scroll}
contentContainerStyle={[styles.content, { paddingTop: insets.top + 14, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }]}
refreshControl={<RefreshControl refreshing={refresh} onRefresh={onRefresh} tintColor={Colors.text2} />}
showsVerticalScrollIndicator={false}
>
<Animated.View entering={FadeIn.duration(400)} style={styles.pageHeader}>
<Text style={styles.pageTitle}>NodeShift Music</Text>
</Animated.View>
<NowPlayingStrip />
{albums.length > 0 && (
<Animated.View entering={FadeInDown.delay(100)} style={styles.section}>
<Text style={styles.secTitle}>Альбомы</Text>
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.hRow}>
{albums.map((a, i) => (
<AlbumCard key={a.id} album={a} delay={i * 50} onPress={() => {
const albumTracks = tracks.filter(t => t.album === a.title);
if (albumTracks.length > 0) {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setQueue(albumTracks, 0);
usePlayer.getState().setExpanded(true);
}
}} />
))}
</ScrollView>
</Animated.View>
)}
{tracks.length > 0 && (
<Animated.View entering={FadeInDown.delay(200)} style={styles.section}>
<Text style={styles.secTitle}>Треки</Text>
{tracks.map((t, i) => (
<TrackRow
key={t.id}
track={t}
index={i}
liked={isLiked(t.id)}
onPress={() => playTrack(t, tracks, i)}
onLike={() => toggleLike(t.id)}
/>
))}
</Animated.View>
)}
</ScrollView>
);
}
function NowPlayingStrip() {
const { queue, index, playing, setExpanded } = usePlayer();
const track = queue[index];
if (!track) return null;
const cover = coverUrl(track.cover_url);
return (
<Animated.View entering={FadeInDown.duration(300)} style={styles.npStrip}>
{/* Blurred cover background */}
<CoverImage
uri={cover}
title={track.title}
size={160}
radius={0}
blurRadius={40}
style={StyleSheet.absoluteFill as any}
/>
<View style={[StyleSheet.absoluteFill, styles.npDim]} />
<Pressable style={styles.npContent} onPress={() => setExpanded(true)}>
<CoverImage uri={cover} title={track.title} size={52} radius={Radius.sm} />
<View style={styles.npInfo}>
<Text style={styles.npLabel}>Сейчас играет</Text>
<Text style={styles.npTitle} numberOfLines={1}>{track.title}</Text>
<Text style={styles.npArtist} numberOfLines={1}>{track.artist}</Text>
</View>
<View style={styles.npDot}>
{playing
? <View style={styles.npEq}>{[1, 2, 3].map(i => <Animated.View key={i} style={[styles.npBar, { height: 4 + i * 4 }]} />)}</View>
: <Svg width={16} height={16} viewBox="0 0 24 24" fill={Colors.text}><Path d="M8 5v14l11-7z" /></Svg>
}
</View>
</Pressable>
</Animated.View>
);
}
function AlbumCard({ album, delay, onPress }: { album: Album; delay: 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(delay)} style={style}>
<Pressable
onPressIn={() => { scale.value = withSpring(0.95, { damping: 15 }); }}
onPressOut={() => { scale.value = withSpring(1, { damping: 15 }); }}
onPress={onPress}
style={styles.albumCard}
>
<CoverImage uri={cover} title={album.title} size={CARD_W} radius={Radius.md} style={{ marginBottom: Spacing.sm }} />
<Text style={styles.albumTitle} numberOfLines={1}>{album.title}</Text>
<Text style={styles.albumArtist} numberOfLines={1}>{album.artist}</Text>
<Text style={styles.albumCount}>{album.track_count} треков</Text>
</Pressable>
</Animated.View>
);
}
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);
}
}
};
return (
<Pressable onPress={onPress} style={[styles.trackRow, active && styles.trackRowActive]}>
<Text style={styles.trackNum}>{index + 1}</Text>
<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>
<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"
/>
<Text style={styles.trackDur}>{fmt(track.duration)}</Text>
</Pressable>
);
}
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({
scroll: { flex: 1, backgroundColor: Colors.bg },
content: { paddingHorizontal: Spacing.md },
pageHeader: { marginBottom: Spacing.md },
pageTitle: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5 },
section: { marginBottom: Spacing.xl },
secTitle: { color: Colors.text, fontSize: Font.lg, fontWeight: '700', marginBottom: Spacing.md },
hRow: { gap: Spacing.md, paddingRight: Spacing.md },
albumCard: { width: CARD_W },
albumTitle: { color: Colors.text, fontSize: Font.sm, fontWeight: '600' },
albumArtist: { color: Colors.text2, fontSize: Font.xs, marginTop: 2 },
albumCount: { color: Colors.text3, fontSize: Font.xs, marginTop: 2 },
trackRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, paddingHorizontal: Spacing.sm, borderRadius: Radius.sm, gap: 8 },
trackRowActive: { backgroundColor: Colors.surface },
trackNum: { width: 24, color: Colors.text3, fontSize: Font.sm, textAlign: 'center' },
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, width: 36, textAlign: 'right' },
// Now playing strip
npStrip: { borderRadius: Radius.lg, overflow: 'hidden', marginBottom: Spacing.xl, height: 80 },
npDim: { backgroundColor: 'rgba(0,0,0,0.5)' },
npContent: { flex: 1, flexDirection: 'row', alignItems: 'center', padding: 14, gap: 12 },
npInfo: { flex: 1 },
npLabel: { color: 'rgba(255,255,255,0.45)', fontSize: 10, fontWeight: '600', letterSpacing: 0.5, marginBottom: 2 },
npTitle: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
npArtist: { color: Colors.text2, fontSize: Font.xs, marginTop: 1 },
npDot: { width: 32, height: 32, alignItems: 'center', justifyContent: 'center' },
npEq: { flexDirection: 'row', alignItems: 'flex-end', gap: 2 },
npBar: { width: 3, backgroundColor: Colors.accent, borderRadius: 2 },
});

280
app/(tabs)/library.tsx
View file

@ -1,140 +1,140 @@
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, 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 },
});

244
app/(tabs)/liked.tsx
View file

@ -1,122 +1,122 @@
import { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet, 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, { Path } 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, useLikes } from '../../store';
export default function LikedScreen() {
const [all, setAll] = useState<Track[]>([]);
const insets = useSafeAreaInsets();
const { setQueue } = usePlayer();
const { likes, toggleLike } = useLikes();
useEffect(() => {
getTracks().then(setAll);
}, []);
const liked = all.filter(t => likes.has(t.id));
const playTrack = (track: Track, idx: number) => {
setQueue(liked, idx);
usePlayer.getState().setExpanded(true);
};
return (
<View style={[styles.container, { paddingTop: insets.top }]}>
<View style={styles.header}>
<Svg width={22} height={22} viewBox="0 0 24 24" fill={Colors.pink}>
<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={Colors.pink} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
<Text style={styles.title}>Понравилось</Text>
<Text style={styles.count}>{liked.length} треков</Text>
</View>
{liked.length === 0 ? (
<View style={styles.empty}>
<Text style={styles.emptyIcon}>♡</Text>
<Text style={styles.emptyTitle}>Пусто</Text>
<Text style={styles.emptyText}>Нажмите ♡ у трека, чтобы добавить его сюда</Text>
</View>
) : (
<FlatList
data={liked}
keyExtractor={t => String(t.id)}
contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
showsVerticalScrollIndicator={false}
renderItem={({ item, index }) => (
<LikedRow
track={item}
index={index}
onPress={() => playTrack(item, index)}
onUnlike={() => toggleLike(item.id)}
/>
)}
/>
)}
</View>
);
}
function LikedRow({ track, index, onPress, onUnlike }: {
track: Track; index: number; onPress: () => void; onUnlike: () => 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 * 40, 400)).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]}
>
<Image
source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
style={styles.cover}
contentFit="cover"
transition={200}
/>
<View style={styles.info}>
<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={onUnlike} hitSlop={12} style={styles.likeBtn}>
<Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.pink}>
<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={Colors.pink} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
</Pressable>
</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: 'center', gap: 10, paddingHorizontal: Spacing.md, paddingTop: Spacing.md, paddingBottom: Spacing.md },
title: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, flex: 1 },
count: { color: Colors.text3, fontSize: Font.sm },
empty: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingBottom: 120 },
emptyIcon: { fontSize: 52, color: Colors.text3, marginBottom: 16 },
emptyTitle: { color: Colors.text, fontSize: Font.lg, fontWeight: '700', marginBottom: 8 },
emptyText: { color: Colors.text2, fontSize: Font.sm, textAlign: 'center', lineHeight: 20 },
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 },
info: { flex: 1 },
trackTitle: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
artist: { color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
likeBtn: { padding: 4 },
});
import { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet, 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, { Path } 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, useLikes } from '../../store';
export default function LikedScreen() {
const [all, setAll] = useState<Track[]>([]);
const insets = useSafeAreaInsets();
const { setQueue } = usePlayer();
const { likes, toggleLike } = useLikes();
useEffect(() => {
getTracks().then(setAll);
}, []);
const liked = all.filter(t => likes.has(t.id));
const playTrack = (track: Track, idx: number) => {
setQueue(liked, idx);
usePlayer.getState().setExpanded(true);
};
return (
<View style={[styles.container, { paddingTop: insets.top }]}>
<View style={styles.header}>
<Svg width={22} height={22} viewBox="0 0 24 24" fill={Colors.pink}>
<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={Colors.pink} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
<Text style={styles.title}>Понравилось</Text>
<Text style={styles.count}>{liked.length} треков</Text>
</View>
{liked.length === 0 ? (
<View style={styles.empty}>
<Text style={styles.emptyIcon}>♡</Text>
<Text style={styles.emptyTitle}>Пусто</Text>
<Text style={styles.emptyText}>Нажмите ♡ у трека, чтобы добавить его сюда</Text>
</View>
) : (
<FlatList
data={liked}
keyExtractor={t => String(t.id)}
contentContainerStyle={{ paddingHorizontal: Spacing.md, paddingBottom: TAB_BAR_HEIGHT + MINI_PLAYER_HEIGHT + 24 }}
showsVerticalScrollIndicator={false}
renderItem={({ item, index }) => (
<LikedRow
track={item}
index={index}
onPress={() => playTrack(item, index)}
onUnlike={() => toggleLike(item.id)}
/>
)}
/>
)}
</View>
);
}
function LikedRow({ track, index, onPress, onUnlike }: {
track: Track; index: number; onPress: () => void; onUnlike: () => 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 * 40, 400)).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]}
>
<Image
source={cover ? { uri: cover } : require('../../assets/placeholder.png')}
style={styles.cover}
contentFit="cover"
transition={200}
/>
<View style={styles.info}>
<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={onUnlike} hitSlop={12} style={styles.likeBtn}>
<Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.pink}>
<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={Colors.pink} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
</Pressable>
</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: 'center', gap: 10, paddingHorizontal: Spacing.md, paddingTop: Spacing.md, paddingBottom: Spacing.md },
title: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, flex: 1 },
count: { color: Colors.text3, fontSize: Font.sm },
empty: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingBottom: 120 },
emptyIcon: { fontSize: 52, color: Colors.text3, marginBottom: 16 },
emptyTitle: { color: Colors.text, fontSize: Font.lg, fontWeight: '700', marginBottom: 8 },
emptyText: { color: Colors.text2, fontSize: Font.sm, textAlign: 'center', lineHeight: 20 },
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 },
info: { flex: 1 },
trackTitle: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
artist: { color: Colors.text2, fontSize: Font.sm, marginTop: 2 },
likeBtn: { padding: 4 },
});

250
app/(tabs)/profile.tsx
View file

@ -1,125 +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.accent + '22', borderWidth: 1, borderColor: Colors.accent + '44' },
planText: { color: Colors.text2, fontSize: Font.xs, fontWeight: '700' },
planTextPro: { color: Colors.accent },
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' },
});
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.accent + '22', borderWidth: 1, borderColor: Colors.accent + '44' },
planText: { color: Colors.text2, fontSize: Font.xs, fontWeight: '700' },
planTextPro: { color: Colors.accent },
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' },
});

260
app/(tabs)/search.tsx
View file

@ -1,130 +1,130 @@
import { useState, useCallback } from 'react';
import { View, Text, TextInput, FlatList, StyleSheet, Pressable, Keyboard } 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 Svg, { 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 { searchTracks, Track, coverUrl } from '../../services/api';
import { usePlayer, useLikes } 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 { toggleLike, isLiked } = useLikes();
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();
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
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.emptyText}>Введите название трека или исполнителя</Text>
</Animated.View>
)}
{searched && !loading && results.length === 0 && (
<Animated.View entering={FadeIn} style={styles.emptyWrap}>
<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 }) => (
<Animated.View entering={FadeInDown.delay(index * 30).duration(250)}>
<Pressable
onPress={() => playTrack(index)}
style={[styles.row, usePlayer.getState().queue[usePlayer.getState().index]?.id === item.id && styles.rowActive]}
>
{(() => {
const cover = coverUrl(item.cover_url);
const liked = isLiked(item.id);
const active = usePlayer.getState().queue[usePlayer.getState().index]?.id === item.id;
return (
<>
<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}>{item.title}</Text>
<Text style={styles.artist} numberOfLines={1}>{item.artist}</Text>
</View>
<Pressable onPress={() => toggleLike(item.id)} 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(item.duration)}</Text>
</>
);
})()}
</Pressable>
</Animated.View>
)}
/>
</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: 12 },
emptyWrap: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingBottom: 120 },
emptyText: { color: Colors.text3, fontSize: Font.sm, textAlign: 'center' },
row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, gap: Spacing.md, borderRadius: Radius.sm },
rowActive: { backgroundColor: Colors.surface },
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 },
});
import { useState, useCallback } from 'react';
import { View, Text, TextInput, FlatList, StyleSheet, Pressable, Keyboard } 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 Svg, { 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 { searchTracks, Track, coverUrl } from '../../services/api';
import { usePlayer, useLikes } 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 { toggleLike, isLiked } = useLikes();
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();
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
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.emptyText}>Введите название трека или исполнителя</Text>
</Animated.View>
)}
{searched && !loading && results.length === 0 && (
<Animated.View entering={FadeIn} style={styles.emptyWrap}>
<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 }) => (
<Animated.View entering={FadeInDown.delay(index * 30).duration(250)}>
<Pressable
onPress={() => playTrack(index)}
style={[styles.row, usePlayer.getState().queue[usePlayer.getState().index]?.id === item.id && styles.rowActive]}
>
{(() => {
const cover = coverUrl(item.cover_url);
const liked = isLiked(item.id);
const active = usePlayer.getState().queue[usePlayer.getState().index]?.id === item.id;
return (
<>
<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}>{item.title}</Text>
<Text style={styles.artist} numberOfLines={1}>{item.artist}</Text>
</View>
<Pressable onPress={() => toggleLike(item.id)} 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(item.duration)}</Text>
</>
);
})()}
</Pressable>
</Animated.View>
)}
/>
</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: 12 },
emptyWrap: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingBottom: 120 },
emptyText: { color: Colors.text3, fontSize: Font.sm, textAlign: 'center' },
row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, gap: Spacing.md, borderRadius: Radius.sm },
rowActive: { backgroundColor: Colors.surface },
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 },
});

80
app/_layout.tsx
View file

@ -1,40 +1,40 @@
import { useEffect } from 'react';
import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import * as Updates from 'expo-updates';
import { useBootAuth } from '../hooks/useAuth';
import { Colors } from '../constants/theme';
export default function RootLayout() {
useBootAuth();
useOTAUpdates();
return (
<GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
<StatusBar style="light" />
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: Colors.bg } }}>
<Stack.Screen name="(tabs)" />
<Stack.Screen name="auth" options={{ presentation: 'fullScreenModal' }} />
</Stack>
</GestureHandlerRootView>
);
}
function useOTAUpdates() {
useEffect(() => {
if (__DEV__) return;
(async () => {
try {
const check = await Updates.checkForUpdateAsync();
if (check.isAvailable) {
await Updates.fetchUpdateAsync();
await Updates.reloadAsync();
}
// eslint-disable-next-line no-empty
} catch {
// silent fail
}
})();
}, []);
}
import { useEffect } from 'react';
import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import * as Updates from 'expo-updates';
import { useBootAuth } from '../hooks/useAuth';
import { Colors } from '../constants/theme';
export default function RootLayout() {
useBootAuth();
useOTAUpdates();
return (
<GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
<StatusBar style="light" />
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: Colors.bg } }}>
<Stack.Screen name="(tabs)" />
<Stack.Screen name="auth" options={{ presentation: 'fullScreenModal' }} />
</Stack>
</GestureHandlerRootView>
);
}
function useOTAUpdates() {
useEffect(() => {
if (__DEV__) return;
(async () => {
try {
const check = await Updates.checkForUpdateAsync();
if (check.isAvailable) {
await Updates.fetchUpdateAsync();
await Updates.reloadAsync();
}
// eslint-disable-next-line no-empty
} catch {
// silent fail
}
})();
}, []);
}

330
app/auth.tsx
View file

@ -1,165 +1,165 @@
import { useState, useCallback, useEffect } from 'react';
import {
View, Text, StyleSheet, Pressable, ActivityIndicator, Dimensions,
} from 'react-native';
import Animated, {
useSharedValue, useAnimatedStyle, withSpring, withTiming,
FadeIn, SlideInDown,
} from 'react-native-reanimated';
import { LinearGradient } from 'expo-linear-gradient';
import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
import { router } from 'expo-router';
import Svg, { Path, Circle, Polyline, Line } from 'react-native-svg';
import { Colors, Font, Radius, Spacing } from '../constants/theme';
import { buildOAuthUrl, exchangeCode, saveTokens } from '../services/api';
import { useAuth } from '../store';
import { saveUser } from '../hooks/useAuth';
WebBrowser.maybeCompleteAuthSession();
const { width, height } = Dimensions.get('window');
export default function AuthScreen() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const { setUser } = useAuth();
const btnScale = useSharedValue(1);
const btnStyle = useAnimatedStyle(() => ({
transform: [{ scale: btnScale.value }],
}));
const handleLogin = useCallback(async () => {
setLoading(true);
setError('');
try {
const state = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
const url = buildOAuthUrl(state);
const result = await WebBrowser.openAuthSessionAsync(url, 'burmalda://auth/callback');
if (result.type !== 'success') {
setError('Авторизация отменена');
return;
}
const parsed = Linking.parse(result.url);
const code = parsed.queryParams?.code as string | undefined;
if (!code) {
setError((parsed.queryParams?.error as string) || 'Ошибка авторизации');
return;
}
const data = await exchangeCode(code);
await saveTokens(data.access_token, data.refresh_token);
await saveUser(data.user);
setUser(data.user);
router.replace('/(tabs)');
} catch (e: any) {
setError(e.message || 'Что-то пошло не так');
} finally {
setLoading(false);
}
}, [setUser]);
return (
<View style={styles.container}>
<Blob color={Colors.accent} size={420} left={-80} top={-100} delay={0} />
<Blob color="#6c63ff" size={320} left={width - 200} top={height * 0.55} delay={2000} />
<Blob color={Colors.accent} size={240} left={width * 0.3} top={height - 100} delay={4000} />
<Animated.View style={styles.card} entering={FadeIn.duration(600)}>
<Animated.View entering={SlideInDown.delay(100).springify()} style={styles.logoWrap}>
<LinearGradient colors={[Colors.accent, '#2a5cc4']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.logoIcon}>
<Svg width={38} height={38} viewBox="0 0 24 24" fill="none">
<Path d="M9 18V5l12-2v13" stroke="#fff" strokeWidth={2} strokeLinecap="round" />
<Circle cx={6} cy={18} r={3} fill="#fff" />
<Circle cx={18} cy={16} r={3} fill="#fff" />
</Svg>
</LinearGradient>
<Text style={styles.logoTitle}>Burmalda Music</Text>
<Text style={styles.logoSub}>by NodeShift</Text>
</Animated.View>
<Animated.View entering={SlideInDown.delay(200).springify()} style={{ width: '100%' }}>
<Animated.View style={btnStyle}>
<Pressable
style={styles.btnWrap}
disabled={loading}
onPressIn={() => { btnScale.value = withSpring(0.96, { damping: 14 }); }}
onPressOut={() => { btnScale.value = withSpring(1, { damping: 14 }); }}
onPress={handleLogin}
>
<LinearGradient colors={[Colors.accent, '#2a5cc4']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.btn}>
{loading
? <ActivityIndicator color="#fff" size="small" />
: (
<Svg width={18} height={18} viewBox="0 0 24 24" fill="none">
<Path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25" stroke="#fff" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Polyline points="8 17 12 13 16 17" stroke="#fff" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Line x1="12" y1="13" x2="12" y2="21" stroke="#fff" strokeWidth={2} strokeLinecap="round" />
</Svg>
)}
<Text style={styles.btnText}>
{loading ? 'Ожидаем авторизацию…' : 'Войти через NodeShift'}
</Text>
</LinearGradient>
</Pressable>
</Animated.View>
{!!error && (
<Animated.Text entering={FadeIn} style={styles.error}>{error}</Animated.Text>
)}
</Animated.View>
<Animated.Text entering={FadeIn.delay(300)} style={styles.footer}>
Нажимая «Войти», вы соглашаетесь с{'\n'}условиями использования NodeShift
</Animated.Text>
</Animated.View>
</View>
);
}
function Blob({ color, size, left, top, delay }: {
color: string; size: number; left: number; top: number; delay: number;
}) {
const tx = useSharedValue(0);
const ty = useSharedValue(0);
useEffect(() => {
const animate = () => {
tx.value = withTiming(25, { duration: 8000 }, () =>
tx.value = withTiming(-20, { duration: 8000 }, () =>
tx.value = withTiming(0, { duration: 8000 }, animate)));
ty.value = withTiming(-35, { duration: 8000 }, () =>
ty.value = withTiming(18, { duration: 8000 }, () =>
ty.value = withTiming(0, { duration: 8000 })));
};
const t = setTimeout(animate, delay);
return () => clearTimeout(t);
}, []);
const style = useAnimatedStyle(() => ({
transform: [{ translateX: tx.value }, { translateY: ty.value }],
}));
return (
<Animated.View style={[styles.blob, style, {
width: size, height: size, borderRadius: size / 2,
backgroundColor: color, left, top,
}]} />
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
blob: { position: 'absolute', opacity: 0.12 },
card: { width: '100%', maxWidth: 360, alignItems: 'center', paddingHorizontal: Spacing.xl, zIndex: 10 },
logoWrap: { alignItems: 'center', marginBottom: 40 },
logoIcon: { width: 84, height: 84, borderRadius: 22, alignItems: 'center', justifyContent: 'center', marginBottom: Spacing.md, shadowColor: Colors.accent, shadowOffset: { width: 0, height: 14 }, shadowOpacity: 0.45, shadowRadius: 22 },
logoTitle: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, marginBottom: 4 },
logoSub: { color: Colors.text3, fontSize: Font.sm, fontWeight: '500' },
btnWrap: { width: '100%', borderRadius: Radius.md, overflow: 'hidden', shadowColor: Colors.accent, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.35, shadowRadius: 18 },
btn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, paddingVertical: 16, paddingHorizontal: 20 },
btnText: { color: '#fff', fontSize: Font.md, fontWeight: '700' },
error: { color: Colors.red, fontSize: Font.sm, textAlign: 'center', marginTop: Spacing.sm },
footer: { marginTop: Spacing.xl, color: Colors.text3, fontSize: Font.xs, textAlign: 'center', lineHeight: 18 },
});
import { useState, useCallback, useEffect } from 'react';
import {
View, Text, StyleSheet, Pressable, ActivityIndicator, Dimensions,
} from 'react-native';
import Animated, {
useSharedValue, useAnimatedStyle, withSpring, withTiming,
FadeIn, SlideInDown,
} from 'react-native-reanimated';
import { LinearGradient } from 'expo-linear-gradient';
import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
import { router } from 'expo-router';
import Svg, { Path, Circle, Polyline, Line } from 'react-native-svg';
import { Colors, Font, Radius, Spacing } from '../constants/theme';
import { buildOAuthUrl, exchangeCode, saveTokens } from '../services/api';
import { useAuth } from '../store';
import { saveUser } from '../hooks/useAuth';
WebBrowser.maybeCompleteAuthSession();
const { width, height } = Dimensions.get('window');
export default function AuthScreen() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const { setUser } = useAuth();
const btnScale = useSharedValue(1);
const btnStyle = useAnimatedStyle(() => ({
transform: [{ scale: btnScale.value }],
}));
const handleLogin = useCallback(async () => {
setLoading(true);
setError('');
try {
const state = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
const url = buildOAuthUrl(state);
const result = await WebBrowser.openAuthSessionAsync(url, 'burmalda://auth/callback');
if (result.type !== 'success') {
setError('Авторизация отменена');
return;
}
const parsed = Linking.parse(result.url);
const code = parsed.queryParams?.code as string | undefined;
if (!code) {
setError((parsed.queryParams?.error as string) || 'Ошибка авторизации');
return;
}
const data = await exchangeCode(code);
await saveTokens(data.access_token, data.refresh_token);
await saveUser(data.user);
setUser(data.user);
router.replace('/(tabs)');
} catch (e: any) {
setError(e.message || 'Что-то пошло не так');
} finally {
setLoading(false);
}
}, [setUser]);
return (
<View style={styles.container}>
<Blob color={Colors.accent} size={420} left={-80} top={-100} delay={0} />
<Blob color="#6c63ff" size={320} left={width - 200} top={height * 0.55} delay={2000} />
<Blob color={Colors.accent} size={240} left={width * 0.3} top={height - 100} delay={4000} />
<Animated.View style={styles.card} entering={FadeIn.duration(600)}>
<Animated.View entering={SlideInDown.delay(100).springify()} style={styles.logoWrap}>
<LinearGradient colors={[Colors.accent, '#2a5cc4']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.logoIcon}>
<Svg width={38} height={38} viewBox="0 0 24 24" fill="none">
<Path d="M9 18V5l12-2v13" stroke="#fff" strokeWidth={2} strokeLinecap="round" />
<Circle cx={6} cy={18} r={3} fill="#fff" />
<Circle cx={18} cy={16} r={3} fill="#fff" />
</Svg>
</LinearGradient>
<Text style={styles.logoTitle}>Burmalda Music</Text>
<Text style={styles.logoSub}>by NodeShift</Text>
</Animated.View>
<Animated.View entering={SlideInDown.delay(200).springify()} style={{ width: '100%' }}>
<Animated.View style={btnStyle}>
<Pressable
style={styles.btnWrap}
disabled={loading}
onPressIn={() => { btnScale.value = withSpring(0.96, { damping: 14 }); }}
onPressOut={() => { btnScale.value = withSpring(1, { damping: 14 }); }}
onPress={handleLogin}
>
<LinearGradient colors={[Colors.accent, '#2a5cc4']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.btn}>
{loading
? <ActivityIndicator color="#fff" size="small" />
: (
<Svg width={18} height={18} viewBox="0 0 24 24" fill="none">
<Path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25" stroke="#fff" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Polyline points="8 17 12 13 16 17" stroke="#fff" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Line x1="12" y1="13" x2="12" y2="21" stroke="#fff" strokeWidth={2} strokeLinecap="round" />
</Svg>
)}
<Text style={styles.btnText}>
{loading ? 'Ожидаем авторизацию…' : 'Войти через NodeShift'}
</Text>
</LinearGradient>
</Pressable>
</Animated.View>
{!!error && (
<Animated.Text entering={FadeIn} style={styles.error}>{error}</Animated.Text>
)}
</Animated.View>
<Animated.Text entering={FadeIn.delay(300)} style={styles.footer}>
Нажимая «Войти», вы соглашаетесь с{'\n'}условиями использования NodeShift
</Animated.Text>
</Animated.View>
</View>
);
}
function Blob({ color, size, left, top, delay }: {
color: string; size: number; left: number; top: number; delay: number;
}) {
const tx = useSharedValue(0);
const ty = useSharedValue(0);
useEffect(() => {
const animate = () => {
tx.value = withTiming(25, { duration: 8000 }, () =>
tx.value = withTiming(-20, { duration: 8000 }, () =>
tx.value = withTiming(0, { duration: 8000 }, animate)));
ty.value = withTiming(-35, { duration: 8000 }, () =>
ty.value = withTiming(18, { duration: 8000 }, () =>
ty.value = withTiming(0, { duration: 8000 })));
};
const t = setTimeout(animate, delay);
return () => clearTimeout(t);
}, []);
const style = useAnimatedStyle(() => ({
transform: [{ translateX: tx.value }, { translateY: ty.value }],
}));
return (
<Animated.View style={[styles.blob, style, {
width: size, height: size, borderRadius: size / 2,
backgroundColor: color, left, top,
}]} />
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
blob: { position: 'absolute', opacity: 0.12 },
card: { width: '100%', maxWidth: 360, alignItems: 'center', paddingHorizontal: Spacing.xl, zIndex: 10 },
logoWrap: { alignItems: 'center', marginBottom: 40 },
logoIcon: { width: 84, height: 84, borderRadius: 22, alignItems: 'center', justifyContent: 'center', marginBottom: Spacing.md, shadowColor: Colors.accent, shadowOffset: { width: 0, height: 14 }, shadowOpacity: 0.45, shadowRadius: 22 },
logoTitle: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, marginBottom: 4 },
logoSub: { color: Colors.text3, fontSize: Font.sm, fontWeight: '500' },
btnWrap: { width: '100%', borderRadius: Radius.md, overflow: 'hidden', shadowColor: Colors.accent, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.35, shadowRadius: 18 },
btn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, paddingVertical: 16, paddingHorizontal: 20 },
btnText: { color: '#fff', fontSize: Font.md, fontWeight: '700' },
error: { color: Colors.red, fontSize: Font.sm, textAlign: 'center', marginTop: Spacing.sm },
footer: { marginTop: Spacing.xl, color: Colors.text3, fontSize: Font.xs, textAlign: 'center', lineHeight: 18 },
});

14
babel.config.js
View file

@ -1,7 +1,7 @@
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};

112
build-ios.yml
View file

@ -1,56 +1,56 @@
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30

85
build.yml Normal file
View file

@ -0,0 +1,85 @@
name: Build & Deploy iOS
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main, develop ]
env:
NODE_VERSION: '20'
EXPO_VERSION: 'latest'
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Setup Expo
run: npm install -g expo-cli eas-cli
- name: Lint & Type Check
run: |
npm run type-check 2>/dev/null || true
npm run lint 2>/dev/null || true
- name: Build Preview (EAS)
if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
env:
EAS_TOKEN: ${{ secrets.EAS_TOKEN }}
run: |
eas build --platform ios --profile preview --non-interactive --wait
- name: Build Production (EAS)
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
env:
EAS_TOKEN: ${{ secrets.EAS_TOKEN }}
run: |
eas build --platform ios --profile production --non-interactive --wait
- name: Release Notes
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
run: |
echo "### Build Complete ✅" >> $GITHUB_STEP_SUMMARY
echo "App version: $(cat package.json | grep version | head -1 | awk -F= '{ print $2 }' | sed 's/[version",]//g')" >> $GITHUB_STEP_SUMMARY
echo "Built for: iOS" >> $GITHUB_STEP_SUMMARY
echo "Download IPA from EAS Dashboard" >> $GITHUB_STEP_SUMMARY
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Check TypeScript
run: npx tsc --noEmit || true
- name: Validate structure
run: |
test -f app.json && echo "✓ app.json exists"
test -f tsconfig.json && echo "✓ tsconfig.json exists"
test -d app && echo "✓ app directory exists"
test -d services && echo "✓ services directory exists"
test -d components && echo "✓ components directory exists"

146
components/CoverImage.tsx
View file

@ -1,73 +1,73 @@
import { useState, useEffect } from 'react';
import { Text, ViewStyle } from 'react-native';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Radius } from '../constants/theme';
// 12 distinct dark gradients — one is assigned per title hash
const GRADIENTS: [string, string][] = [
['#12234a', '#1e4080'],
['#1a0e3a', '#3d1a7a'],
['#0e2a3a', '#1a5a7a'],
['#2a0e1e', '#6a1a3e'],
['#0e2a1e', '#1a6a3e'],
['#2a1e0e', '#7a4a1e'],
['#1e0e2a', '#4a1e6a'],
['#0e1e2a', '#1e4a6a'],
['#2a0e2a', '#6a1a6a'],
['#1e2a0e', '#4a6a1e'],
['#2a1e1e', '#6a3a3a'],
['#0e2a2a', '#1a6a6a'],
];
function textHash(s: string): number {
let h = 0;
for (const c of s) h = (Math.imul(31, h) + c.charCodeAt(0)) | 0;
return Math.abs(h);
}
interface Props {
uri: string | null;
title: string;
size: number;
radius?: number;
style?: ViewStyle;
blurRadius?: number;
}
export default function CoverImage({ uri, title, size, radius = Radius.sm, style, blurRadius }: Props) {
const [failed, setFailed] = useState(false);
// Reset error state when URI changes (new track loaded)
useEffect(() => { setFailed(false); }, [uri]);
if (uri && !failed) {
return (
<Image
source={{ uri }}
style={[{ width: size, height: size, borderRadius: radius, backgroundColor: '#1a1a1a' }, style]}
contentFit="cover"
transition={250}
blurRadius={blurRadius}
onError={() => setFailed(true)}
/>
);
}
const [c1, c2] = GRADIENTS[textHash(title || '') % GRADIENTS.length];
const letter = (title || '?').trim().toUpperCase()[0];
const fontSize = size * 0.36;
return (
<LinearGradient
colors={[c1, c2]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={[{ width: size, height: size, borderRadius: radius, alignItems: 'center', justifyContent: 'center' }, style]}
>
<Text style={{ color: 'rgba(255,255,255,0.85)', fontSize, fontWeight: '800', textAlign: 'center' }}>
{letter}
</Text>
</LinearGradient>
);
}
import { useState, useEffect } from 'react';
import { Text, ViewStyle } from 'react-native';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Radius } from '../constants/theme';
// 12 distinct dark gradients — one is assigned per title hash
const GRADIENTS: [string, string][] = [
['#12234a', '#1e4080'],
['#1a0e3a', '#3d1a7a'],
['#0e2a3a', '#1a5a7a'],
['#2a0e1e', '#6a1a3e'],
['#0e2a1e', '#1a6a3e'],
['#2a1e0e', '#7a4a1e'],
['#1e0e2a', '#4a1e6a'],
['#0e1e2a', '#1e4a6a'],
['#2a0e2a', '#6a1a6a'],
['#1e2a0e', '#4a6a1e'],
['#2a1e1e', '#6a3a3a'],
['#0e2a2a', '#1a6a6a'],
];
function textHash(s: string): number {
let h = 0;
for (const c of s) h = (Math.imul(31, h) + c.charCodeAt(0)) | 0;
return Math.abs(h);
}
interface Props {
uri: string | null;
title: string;
size: number;
radius?: number;
style?: ViewStyle;
blurRadius?: number;
}
export default function CoverImage({ uri, title, size, radius = Radius.sm, style, blurRadius }: Props) {
const [failed, setFailed] = useState(false);
// Reset error state when URI changes (new track loaded)
useEffect(() => { setFailed(false); }, [uri]);
if (uri && !failed) {
return (
<Image
source={{ uri }}
style={[{ width: size, height: size, borderRadius: radius, backgroundColor: '#1a1a1a' }, style]}
contentFit="cover"
transition={250}
blurRadius={blurRadius}
onError={() => setFailed(true)}
/>
);
}
const [c1, c2] = GRADIENTS[textHash(title || '') % GRADIENTS.length];
const letter = (title || '?').trim().toUpperCase()[0];
const fontSize = size * 0.36;
return (
<LinearGradient
colors={[c1, c2]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={[{ width: size, height: size, borderRadius: radius, alignItems: 'center', justifyContent: 'center' }, style]}
>
<Text style={{ color: 'rgba(255,255,255,0.85)', fontSize, fontWeight: '800', textAlign: 'center' }}>
{letter}
</Text>
</LinearGradient>
);
}

101
components/DownloadButton.tsx Normal file
View file

@ -0,0 +1,101 @@
import { View, StyleSheet, Pressable, Text, ActivityIndicator } from 'react-native';
import Animated, { FadeIn, useAnimatedStyle, withSpring } from 'react-native-reanimated';
import { useMemo } from 'react';
import Svg, { Path } from 'react-native-svg';
import * as Haptics from 'expo-haptics';
import { Colors, Font } from '../constants/theme';
export interface DownloadButtonProps {
trackId: number;
isDownloaded?: boolean;
downloadProgress?: number; // 0-1
onDownload?: () => void;
onDelete?: () => void;
size?: 'sm' | 'md' | 'lg';
}
export default function DownloadButton({
trackId,
isDownloaded = false,
downloadProgress = 0,
onDownload,
onDelete,
size = 'md',
}: DownloadButtonProps) {
const sizing = useMemo(() => {
const map = { sm: 20, md: 24, lg: 32 };
return map[size];
}, [size]);
const handlePress = async () => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
if (isDownloaded) {
onDelete?.();
} else {
onDownload?.();
}
};
const isLoading = downloadProgress > 0 && downloadProgress < 1;
if (isLoading) {
return (
<Animated.View entering={FadeIn}>
<View style={[styles.container, { width: sizing, height: sizing }]}>
<ActivityIndicator color={Colors.accent} size={sizing * 0.6} />
{downloadProgress > 0.2 && (
<Text style={[styles.progress, { fontSize: sizing * 0.3 }]}>
{Math.round(downloadProgress * 100)}%
</Text>
)}
</View>
</Animated.View>
);
}
return (
<Pressable
onPress={handlePress}
style={({ pressed }) => [
styles.button,
{
width: sizing,
height: sizing,
opacity: pressed ? 0.6 : 1,
},
]}
>
{isDownloaded ? (
<Svg width={sizing} height={sizing} viewBox="0 0 24 24" fill="none">
<Path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
fill={Colors.accent}
/>
</Svg>
) : (
<Svg width={sizing} height={sizing} viewBox="0 0 24 24" fill="none">
<Path
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
fill={Colors.text2}
/>
</Svg>
)}
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
justifyContent: 'center',
alignItems: 'center',
},
container: {
justifyContent: 'center',
alignItems: 'center',
},
progress: {
color: Colors.accent,
fontFamily: Font.family.medium,
marginTop: 2,
},
});

258
components/MiniPlayer.tsx
View file

@ -1,129 +1,129 @@
import { useCallback } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import Animated, {
useSharedValue, useAnimatedStyle, withSpring,
FadeInDown, FadeOutDown, useAnimatedGestureHandler, runOnJS,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import * as Haptics from 'expo-haptics';
import Svg, { Path } from 'react-native-svg';
import { Colors, Font, MINI_PLAYER_HEIGHT, TAB_BAR_HEIGHT } from '../constants/theme';
import { usePlayer, useLikes } from '../store';
import { togglePlay, seekTo } from '../hooks/useAudio';
import { coverUrl } from '../services/api';
export default function MiniPlayer() {
const { queue, index, playing, expanded, setExpanded, progress, duration } = usePlayer();
const { toggleLike, isLiked } = useLikes();
const track = queue[index];
const translateY = useSharedValue(0);
const opacity = useSharedValue(1);
const gestureHandler = useAnimatedGestureHandler({
onActive: (e) => {
if (e.translationY < 0) {
translateY.value = Math.max(e.translationY, -80);
opacity.value = 1 + e.translationY / 80;
}
},
onEnd: (e) => {
if (e.translationY < -40 || e.velocityY < -400) runOnJS(openPlayer)();
translateY.value = withSpring(0);
opacity.value = withSpring(1);
},
});
const animStyle = useAnimatedStyle(() => ({
transform: [{ translateY: translateY.value }],
opacity: opacity.value,
}));
const openPlayer = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setExpanded(true);
}, [setExpanded]);
const onNext = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
const ni = usePlayer.getState().nextTrack();
usePlayer.getState().setIndex(ni);
}, []);
const onPrev = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
const pi = usePlayer.getState().prevTrack();
usePlayer.getState().setIndex(pi);
}, []);
if (!track || expanded) return null;
const cover = coverUrl(track.cover_url);
const liked = isLiked(track.id);
const pct = duration > 0 ? (progress / duration) * 100 : 0;
return (
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View
style={[s.wrap, animStyle, { bottom: TAB_BAR_HEIGHT }]}
entering={FadeInDown.springify()}
exiting={FadeOutDown.springify()}
>
<BlurView intensity={30} tint="dark" style={StyleSheet.absoluteFill} />
<View style={[StyleSheet.absoluteFill, s.bgTint]} />
{/* Progress line */}
<View style={s.progressBg}>
<View style={[s.progressFill, { width: `${pct}%` as any }]} />
</View>
<Pressable style={s.row} onPress={openPlayer} android_ripple={null}>
<Image
source={cover ? { uri: cover } : require('../assets/placeholder.png')}
style={s.cover}
contentFit="cover"
transition={200}
/>
<View style={s.info}>
<Text style={s.title} numberOfLines={1}>{track.title}</Text>
<Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
</View>
<View style={s.controls}>
<Pressable onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleLike(track.id); }} hitSlop={10} style={s.ctlBtn}>
<Svg width={18} height={18} 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.text2} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
</Pressable>
<Pressable onPress={(e) => { e.stopPropagation(); onPrev(); }} hitSlop={10} style={s.ctlBtn}>
<Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24"><Path d="M6 6h2v12H6zm3.5 6 8.5 6V6z" /></Svg>
</Pressable>
<Pressable onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); togglePlay(); }} hitSlop={10} style={s.ctlBtn}>
{playing
? <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></Svg>
: <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M8 5v14l11-7z" /></Svg>}
</Pressable>
<Pressable onPress={(e) => { e.stopPropagation(); onNext(); }} hitSlop={10} style={s.ctlBtn}>
<Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24"><Path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" /></Svg>
</Pressable>
</View>
</Pressable>
</Animated.View>
</PanGestureHandler>
);
}
const s = StyleSheet.create({
wrap: { position: 'absolute', left: 0, right: 0, height: MINI_PLAYER_HEIGHT, overflow: 'hidden', borderTopLeftRadius: 14, borderTopRightRadius: 14 },
bgTint: { backgroundColor: 'rgba(10,10,10,0.4)' },
progressBg: { position: 'absolute', top: 0, left: 0, right: 0, height: 2, backgroundColor: 'rgba(255,255,255,0.07)', zIndex: 2 },
progressFill:{ height: 2, backgroundColor: Colors.accent },
row: { flex: 1, flexDirection: 'row', alignItems: 'center', paddingLeft: 14, paddingRight: 4, gap: 12 },
cover: { width: 44, height: 44, borderRadius: 9, backgroundColor: Colors.elevated, flexShrink: 0 },
info: { flex: 1, minWidth: 0 },
title: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
artist: { color: Colors.text2, fontSize: Font.xs, marginTop: 2 },
controls: { flexDirection: 'row', alignItems: 'center' },
ctlBtn: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' },
});
import { useCallback } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import Animated, {
useSharedValue, useAnimatedStyle, withSpring,
FadeInDown, FadeOutDown, useAnimatedGestureHandler, runOnJS,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import * as Haptics from 'expo-haptics';
import Svg, { Path } from 'react-native-svg';
import { Colors, Font, MINI_PLAYER_HEIGHT, TAB_BAR_HEIGHT } from '../constants/theme';
import { usePlayer, useLikes } from '../store';
import { togglePlay, seekTo } from '../hooks/useAudio';
import { coverUrl } from '../services/api';
export default function MiniPlayer() {
const { queue, index, playing, expanded, setExpanded, progress, duration } = usePlayer();
const { toggleLike, isLiked } = useLikes();
const track = queue[index];
const translateY = useSharedValue(0);
const opacity = useSharedValue(1);
const gestureHandler = useAnimatedGestureHandler({
onActive: (e) => {
if (e.translationY < 0) {
translateY.value = Math.max(e.translationY, -80);
opacity.value = 1 + e.translationY / 80;
}
},
onEnd: (e) => {
if (e.translationY < -40 || e.velocityY < -400) runOnJS(openPlayer)();
translateY.value = withSpring(0);
opacity.value = withSpring(1);
},
});
const animStyle = useAnimatedStyle(() => ({
transform: [{ translateY: translateY.value }],
opacity: opacity.value,
}));
const openPlayer = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setExpanded(true);
}, [setExpanded]);
const onNext = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
const ni = usePlayer.getState().nextTrack();
usePlayer.getState().setIndex(ni);
}, []);
const onPrev = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
const pi = usePlayer.getState().prevTrack();
usePlayer.getState().setIndex(pi);
}, []);
if (!track || expanded) return null;
const cover = coverUrl(track.cover_url);
const liked = isLiked(track.id);
const pct = duration > 0 ? (progress / duration) * 100 : 0;
return (
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View
style={[s.wrap, animStyle, { bottom: TAB_BAR_HEIGHT }]}
entering={FadeInDown.springify()}
exiting={FadeOutDown.springify()}
>
<BlurView intensity={30} tint="dark" style={StyleSheet.absoluteFill} />
<View style={[StyleSheet.absoluteFill, s.bgTint]} />
{/* Progress line */}
<View style={s.progressBg}>
<View style={[s.progressFill, { width: `${pct}%` as any }]} />
</View>
<Pressable style={s.row} onPress={openPlayer} android_ripple={null}>
<Image
source={cover ? { uri: cover } : require('../assets/placeholder.png')}
style={s.cover}
contentFit="cover"
transition={200}
/>
<View style={s.info}>
<Text style={s.title} numberOfLines={1}>{track.title}</Text>
<Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
</View>
<View style={s.controls}>
<Pressable onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleLike(track.id); }} hitSlop={10} style={s.ctlBtn}>
<Svg width={18} height={18} 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.text2} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
</Pressable>
<Pressable onPress={(e) => { e.stopPropagation(); onPrev(); }} hitSlop={10} style={s.ctlBtn}>
<Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24"><Path d="M6 6h2v12H6zm3.5 6 8.5 6V6z" /></Svg>
</Pressable>
<Pressable onPress={(e) => { e.stopPropagation(); Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); togglePlay(); }} hitSlop={10} style={s.ctlBtn}>
{playing
? <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></Svg>
: <Svg width={18} height={18} viewBox="0 0 24 24" fill={Colors.text}><Path d="M8 5v14l11-7z" /></Svg>}
</Pressable>
<Pressable onPress={(e) => { e.stopPropagation(); onNext(); }} hitSlop={10} style={s.ctlBtn}>
<Svg width={18} height={18} fill={Colors.text} viewBox="0 0 24 24"><Path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" /></Svg>
</Pressable>
</View>
</Pressable>
</Animated.View>
</PanGestureHandler>
);
}
const s = StyleSheet.create({
wrap: { position: 'absolute', left: 0, right: 0, height: MINI_PLAYER_HEIGHT, overflow: 'hidden', borderTopLeftRadius: 14, borderTopRightRadius: 14 },
bgTint: { backgroundColor: 'rgba(10,10,10,0.4)' },
progressBg: { position: 'absolute', top: 0, left: 0, right: 0, height: 2, backgroundColor: 'rgba(255,255,255,0.07)', zIndex: 2 },
progressFill:{ height: 2, backgroundColor: Colors.accent },
row: { flex: 1, flexDirection: 'row', alignItems: 'center', paddingLeft: 14, paddingRight: 4, gap: 12 },
cover: { width: 44, height: 44, borderRadius: 9, backgroundColor: Colors.elevated, flexShrink: 0 },
info: { flex: 1, minWidth: 0 },
title: { color: Colors.text, fontSize: Font.md, fontWeight: '600' },
artist: { color: Colors.text2, fontSize: Font.xs, marginTop: 2 },
controls: { flexDirection: 'row', alignItems: 'center' },
ctlBtn: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' },
});

796
components/Player.tsx
View file

@ -1,316 +1,480 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, Pressable, Dimensions, ScrollView } from 'react-native';
import Animated, {
useSharedValue, useAnimatedStyle, withSpring,
useAnimatedGestureHandler, runOnJS, FadeIn, interpolate,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
import { Image } from 'expo-image';
import Slider from '@react-native-community/slider';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { BlurView } from 'expo-blur';
import * as Haptics from 'expo-haptics';
import Svg, { Path, Polyline, Line, Rect } from 'react-native-svg';
import { Colors, Font, Radius } from '../constants/theme';
import { usePlayer, useLikes } from '../store';
import { togglePlay, seekTo } from '../hooks/useAudio';
import { coverUrl, fetchLyrics, parseLrc, LrcLine } from '../services/api';
const { width } = Dimensions.get('window');
const COVER = width - 48;
export default function Player() {
const {
queue, index, playing, progress, duration,
repeat, shuffle, setExpanded, cycleRepeat, toggleShuffle,
} = usePlayer();
const { toggleLike, isLiked } = useLikes();
const insets = useSafeAreaInsets();
const track = queue[index];
const [lyricsOpen, setLyricsOpen] = useState(false);
const [lrcLines, setLrcLines] = useState<LrcLine[]>([]);
const [plainLyrics, setPlain] = useState<string | null>(null);
const [lyricsLoading, setLyricsLoading] = useState(false);
const lyricsScrollRef = useRef<ScrollView>(null);
const lineHeights = useRef<number[]>([]);
const translateY = useSharedValue(0);
const coverScale = useSharedValue(1);
useEffect(() => {
coverScale.value = withSpring(playing ? 1 : 0.88, { damping: 16, stiffness: 120 });
}, [playing]);
useEffect(() => {
setLrcLines([]); setPlain(null); setLyricsOpen(false);
}, [track?.id]);
const loadLyrics = useCallback(async () => {
if (!track) return;
if (lrcLines.length > 0 || plainLyrics) { setLyricsOpen(true); return; }
setLyricsLoading(true);
const data = await fetchLyrics(track.id);
setLyricsLoading(false);
if (data?.synced) setLrcLines(parseLrc(data.synced));
else if (data?.plain) setPlain(data.plain);
setLyricsOpen(true);
}, [track, lrcLines.length, plainLyrics]);
const currentLineIdx = lrcLines.length > 0
? lrcLines.reduce((acc, line, i) => line.time <= progress ? i : acc, 0)
: -1;
useEffect(() => {
if (!lyricsOpen || currentLineIdx < 0) return;
const y = lineHeights.current.slice(0, currentLineIdx).reduce((sum, h) => sum + h, 0);
lyricsScrollRef.current?.scrollTo({ y: Math.max(0, y - 120), animated: true });
}, [currentLineIdx, lyricsOpen]);
const gestureHandler = useAnimatedGestureHandler<any, { startY: number }>({
onStart: (_, ctx) => { ctx.startY = translateY.value; },
onActive: (e, ctx) => { if (e.translationY > 0) translateY.value = ctx.startY + e.translationY; },
onEnd: (e) => {
if (e.translationY > 100 || e.velocityY > 700) runOnJS(close)();
else translateY.value = withSpring(0, { damping: 20 });
},
});
const containerStyle = useAnimatedStyle(() => ({ transform: [{ translateY: translateY.value }] }));
const overlayOpacity = useAnimatedStyle(() => ({ opacity: interpolate(translateY.value, [0, 300], [1, 0]) }));
const coverStyle = useAnimatedStyle(() => ({ transform: [{ scale: coverScale.value }] }));
const close = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setExpanded(false);
}, [setExpanded]);
const onNext = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
const ni = usePlayer.getState().nextTrack();
usePlayer.getState().setIndex(ni);
}, []);
const onPrev = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
if (progress > 3) { seekTo(0); return; }
const pi = usePlayer.getState().prevTrack();
usePlayer.getState().setIndex(pi);
}, [progress]);
if (!track) return null;
const cover = coverUrl(track.cover_url);
const pct = duration > 0 ? progress / duration : 0;
const liked = isLiked(track.id);
return (
<Animated.View style={[StyleSheet.absoluteFill, s.root, overlayOpacity]} entering={FadeIn.duration(200)}>
{/* Blurred background */}
<Image source={cover ? { uri: cover } : require('../assets/placeholder.png')} style={StyleSheet.absoluteFill} contentFit="cover" blurRadius={80} />
<View style={[StyleSheet.absoluteFill, s.bgDim]} />
<BlurView intensity={20} tint="dark" style={StyleSheet.absoluteFill} />
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View style={[s.sheet, containerStyle, { paddingTop: insets.top + 8, paddingBottom: insets.bottom + 16 }]}>
{/* Top bar */}
<View style={s.topBar}>
<Text style={s.topLabel}>Сейчас играет</Text>
<Pressable onPress={close} hitSlop={16} style={s.closeBtn}>
<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
<Path d="M18 6L6 18M6 6l12 12" stroke="rgba(255,255,255,0.5)" strokeWidth={2} strokeLinecap="round" />
</Svg>
</Pressable>
</View>
{/* Cover */}
<View style={s.coverWrap}>
<Animated.View style={[s.coverShadow, coverStyle]}>
<Image source={cover ? { uri: cover } : require('../assets/placeholder.png')} style={s.cover} contentFit="cover" transition={300} />
</Animated.View>
</View>
{/* Meta */}
<View style={s.metaRow}>
<View style={s.metaText}>
<Text style={s.trackTitle} numberOfLines={1}>{track.title}</Text>
<Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
</View>
<Pressable onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleLike(track.id); }} hitSlop={12}>
<Svg width={22} height={22} 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 : 'rgba(255,255,255,0.4)'} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
</Pressable>
</View>
{/* Seek */}
<View style={s.seekWrap}>
<Slider style={{ width: '100%', height: 32 }} minimumValue={0} maximumValue={1} value={pct} minimumTrackTintColor={Colors.text} maximumTrackTintColor="rgba(255,255,255,0.2)" thumbTintColor={Colors.text} onSlidingComplete={(v) => seekTo(v * duration)} />
<View style={s.timeRow}>
<Text style={s.timeText}>{fmt(progress)}</Text>
<Text style={s.timeText}>{fmt(duration)}</Text>
</View>
</View>
{/* Controls */}
<View style={s.controls}>
<CtlBtn onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleShuffle(); }} active={shuffle}>
<ShuffleIcon active={shuffle} />
</CtlBtn>
<CtlBtn onPress={onPrev}>
<Svg width={28} height={28} viewBox="0 0 28 28" fill="none">
<Rect x={5} y={6} width={2.5} height={16} rx={1.2} fill={Colors.text} />
<Path d="M22 6L9.5 14 22 22V6z" fill={Colors.text} />
</Svg>
</CtlBtn>
<Pressable style={s.playBtn} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); togglePlay(); }}>
{playing
? <Svg width={26} height={26} viewBox="0 0 24 24"><Rect x={5} y={4} width={4} height={16} rx={1.5} fill={Colors.bg} /><Rect x={15} y={4} width={4} height={16} rx={1.5} fill={Colors.bg} /></Svg>
: <Svg width={26} height={26} viewBox="0 0 24 24" fill={Colors.bg}><Path d="M7 4.5v15l13-7.5L7 4.5z" /></Svg>}
</Pressable>
<CtlBtn onPress={onNext}>
<Svg width={28} height={28} viewBox="0 0 28 28" fill="none">
<Rect x={20.5} y={6} width={2.5} height={16} rx={1.2} fill={Colors.text} />
<Path d="M6 6l12.5 8L6 22V6z" fill={Colors.text} />
</Svg>
</CtlBtn>
<CtlBtn onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); cycleRepeat(); }} active={repeat > 0}>
<RepeatIcon repeat={repeat} />
</CtlBtn>
</View>
{/* Lyrics button */}
<View style={s.bottomRow}>
<Pressable style={s.lyrBtn} onPress={loadLyrics}>
<Svg width={14} height={14} fill="none" stroke={lyricsOpen ? Colors.accent : 'rgba(255,255,255,0.4)'} strokeWidth={2} viewBox="0 0 24 24">
<Line x1={3} y1={8} x2={21} y2={8} /><Line x1={3} y1={12} x2={21} y2={12} /><Line x1={3} y1={16} x2={15} y2={16} />
</Svg>
<Text style={[s.lyrBtnText, lyricsOpen && { color: Colors.accent }]}>
{lyricsLoading ? 'Загрузка…' : 'Текст'}
</Text>
</Pressable>
</View>
</Animated.View>
</PanGestureHandler>
{/* Lyrics sheet */}
{lyricsOpen && (
<View style={s.lyrSheet}>
<Pressable style={StyleSheet.absoluteFill} onPress={() => setLyricsOpen(false)} />
<BlurView intensity={40} tint="dark" style={s.lyrInner}>
<Pressable onPress={() => setLyricsOpen(false)} style={s.lyrHandleBar}>
<View style={s.lyrHandle} />
</Pressable>
<View style={s.lyrHeader}>
{cover
? <Image source={{ uri: cover }} style={s.lyrThumb} contentFit="cover" />
: <View style={[s.lyrThumb, { backgroundColor: Colors.elevated }]} />}
<View style={{ flex: 1, minWidth: 0 }}>
<Text style={s.lyrTrackTitle} numberOfLines={1}>{track.title}</Text>
<Text style={s.lyrArtist} numberOfLines={1}>{track.artist}</Text>
</View>
</View>
<ScrollView ref={lyricsScrollRef} style={s.lyrScroll} contentContainerStyle={{ paddingVertical: 24, paddingHorizontal: 20 }} showsVerticalScrollIndicator={false}>
{lrcLines.length > 0
? lrcLines.map((line, i) => (
<Text key={i} style={[s.lyrLine, i === currentLineIdx && s.lyrLineActive]} onLayout={(e) => { lineHeights.current[i] = e.nativeEvent.layout.height; }}>
{line.text}
</Text>
))
: plainLyrics
? <Text style={s.plainLyrics}>{plainLyrics}</Text>
: <Text style={s.lyrEmpty}>Текст не найден</Text>}
</ScrollView>
</BlurView>
</View>
)}
</Animated.View>
);
}
function CtlBtn({ onPress, active = false, children }: { onPress: () => void; active?: boolean; children: React.ReactNode }) {
const sc = useSharedValue(1);
const st = useAnimatedStyle(() => ({ transform: [{ scale: sc.value }] }));
return (
<Animated.View style={st}>
<Pressable onPress={onPress} onPressIn={() => { sc.value = withSpring(0.82, { damping: 12 }); }} onPressOut={() => { sc.value = withSpring(1, { damping: 12 }); }} hitSlop={12} style={[s.ctlBtn, active && s.ctlBtnActive]}>
{children}
</Pressable>
</Animated.View>
);
}
function ShuffleIcon({ active }: { active: boolean }) {
const c = active ? Colors.accent : 'rgba(255,255,255,0.5)';
return (
<Svg width={18} height={18} viewBox="0 0 24 24" fill="none">
<Polyline points="16,3 21,3 21,8" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M4 20L21 3" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Polyline points="21,16 21,21 16,21" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M15 15l5.1 5.1M4 4l5 5" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
);
}
function RepeatIcon({ repeat }: { repeat: 0 | 1 | 2 }) {
const c = repeat > 0 ? Colors.accent : 'rgba(255,255,255,0.5)';
return (
<View>
<Svg width={18} height={18} viewBox="0 0 24 24" fill="none">
<Polyline points="17,1 21,5 17,9" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M3 11V9a4 4 0 0 1 4-4h14" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Polyline points="7,23 3,19 7,15" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M21 13v2a4 4 0 0 1-4 4H3" stroke={c} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
{repeat === 2 && <View style={s.repBadge}><Text style={s.repBadgeText}>1</Text></View>}
</View>
);
}
function fmt(sec: number) {
const m = Math.floor(sec / 60), s = Math.floor(sec % 60);
return `${m}:${s < 10 ? '0' : ''}${s}`;
}
const s = StyleSheet.create({
root: { zIndex: 999 },
bgDim: { backgroundColor: 'rgba(0,0,0,0.65)' },
sheet: { flex: 1, paddingHorizontal: 24 },
topBar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 8 },
topLabel: { color: 'rgba(255,255,255,0.38)', fontSize: 11, fontWeight: '600', letterSpacing: 1.2, textTransform: 'uppercase' },
closeBtn: { width: 32, height: 32, borderRadius: 16, backgroundColor: 'rgba(255,255,255,0.1)', alignItems: 'center', justifyContent: 'center' },
coverWrap: { alignItems: 'center', marginVertical: 20 },
coverShadow: { shadowColor: '#000', shadowOffset: { width: 0, height: 24 }, shadowOpacity: 0.7, shadowRadius: 32 },
cover: { width: COVER, height: COVER, borderRadius: Radius.xl, backgroundColor: Colors.elevated },
metaRow: { flexDirection: 'row', alignItems: 'center', gap: 16, marginBottom: 12 },
metaText: { flex: 1 },
trackTitle: { color: Colors.text, fontSize: 22, fontWeight: '700', letterSpacing: -0.3 },
artist: { color: 'rgba(255,255,255,0.55)', fontSize: 17, marginTop: 4 },
seekWrap: { marginBottom: 8 },
timeRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: -4 },
timeText: { color: 'rgba(255,255,255,0.35)', fontSize: Font.xs },
controls: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 4, marginBottom: 20 },
ctlBtn: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: Radius.full },
ctlBtnActive: { backgroundColor: 'rgba(255,255,255,0.1)' },
playBtn: { width: 60, height: 60, borderRadius: 30, backgroundColor: Colors.text, alignItems: 'center', justifyContent: 'center' },
bottomRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
lyrBtn: { flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: 'rgba(255,255,255,0.08)', paddingHorizontal: 14, paddingVertical: 8, borderRadius: Radius.full },
lyrBtnText: { color: 'rgba(255,255,255,0.4)', fontSize: Font.xs, fontWeight: '600' },
repBadge: { position: 'absolute', top: -3, right: -3, width: 10, height: 10, borderRadius: 5, backgroundColor: Colors.accent, alignItems: 'center', justifyContent: 'center' },
repBadgeText: { color: '#000', fontSize: 6, fontWeight: '800' },
lyrSheet: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 100, justifyContent: 'flex-end' },
lyrInner: { height: '70%', borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden', borderTopWidth: 1, borderColor: 'rgba(255,255,255,0.1)' },
lyrHandleBar: { alignItems: 'center', paddingTop: 12, paddingBottom: 4 },
lyrHandle: { width: 36, height: 4, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.25)' },
lyrHeader: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 20, paddingBottom: 12, borderBottomWidth: 1, borderColor: 'rgba(255,255,255,0.06)' },
lyrThumb: { width: 40, height: 40, borderRadius: 8, flexShrink: 0 },
lyrTrackTitle: { fontSize: 13, fontWeight: '600', color: '#fff' },
lyrArtist: { fontSize: 11, color: 'rgba(255,255,255,0.55)' },
lyrScroll: { flex: 1 },
lyrLine: { fontSize: 20, lineHeight: 32, color: 'rgba(255,255,255,0.28)', fontWeight: '600', marginBottom: 8, textAlign: 'center' },
lyrLineActive: { fontSize: 28, lineHeight: 42, color: '#fff', marginBottom: 10 },
plainLyrics: { fontSize: 15, lineHeight: 26, color: 'rgba(255,255,255,0.75)', textAlign: 'center' },
lyrEmpty: { color: 'rgba(255,255,255,0.35)', fontSize: 14, textAlign: 'center', marginTop: 40 },
});
import { useCallback, useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, Pressable, Dimensions, ScrollView, ViewStyle } from 'react-native';
import Animated, {
useSharedValue, useAnimatedStyle, withSpring, withDecay,
useAnimatedGestureHandler, runOnJS, FadeIn, interpolate, Easing, withTiming,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
import { Image } from 'expo-image';
import Slider from '@react-native-community/slider';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { BlurView } from 'expo-blur';
import * as Haptics from 'expo-haptics';
import Svg, { Path, Polyline, Line, Rect, Circle } from 'react-native-svg';
import { Colors, Font, Radius } from '../constants/theme';
import { usePlayer, useLikes } from '../store';
import { togglePlay, seekTo } from '../hooks/useAudio';
import { coverUrl, fetchLyrics, parseLrc, LrcLine } from '../services/api';
const { width, height } = Dimensions.get('window');
const COVER = width - 48;
const MIN_SWIPE_DISTANCE = 50;
const MAX_SWIPE_DISTANCE = height * 0.4;
export default function Player() {
const {
queue, index, playing, progress, duration,
repeat, shuffle, setExpanded, cycleRepeat, toggleShuffle,
} = usePlayer();
const { toggleLike, isLiked } = useLikes();
const insets = useSafeAreaInsets();
const track = queue[index];
const [lyricsOpen, setLyricsOpen] = useState(false);
const [lrcLines, setLrcLines] = useState<LrcLine[]>([]);
const [plainLyrics, setPlain] = useState<string | null>(null);
const [lyricsLoading, setLyricsLoading] = useState(false);
const lyricsScrollRef = useRef<ScrollView>(null);
const lineHeights = useRef<number[]>([]);
const gestureRef = useRef<any>(null);
const translateY = useSharedValue(0);
const coverScale = useSharedValue(1);
const coverRotate = useSharedValue(0);
useEffect(() => {
coverScale.value = withSpring(playing ? 1 : 0.88, { damping: 14, mass: 1, stiffness: 100 });
}, [playing]);
useEffect(() => {
setLrcLines([]); setPlain(null); setLyricsOpen(false);
translateY.value = 0;
}, [track?.id]);
const loadLyrics = useCallback(async () => {
if (!track) return;
if (lrcLines.length > 0 || plainLyrics) { setLyricsOpen(true); return; }
setLyricsLoading(true);
const data = await fetchLyrics(track.id);
setLyricsLoading(false);
if (data?.synced) setLrcLines(parseLrc(data.synced));
else if (data?.plain) setPlain(data.plain);
setLyricsOpen(true);
}, [track, lrcLines.length, plainLyrics]);
const currentLineIdx = lrcLines.length > 0
? lrcLines.reduce((acc, line, i) => line.time <= progress ? i : acc, 0)
: -1;
useEffect(() => {
if (!lyricsOpen || currentLineIdx < 0) return;
const y = lineHeights.current.slice(0, currentLineIdx).reduce((sum, h) => sum + h, 0);
lyricsScrollRef.current?.scrollTo({ y: Math.max(0, y - 100), animated: true });
}, [currentLineIdx, lyricsOpen]);
const gestureHandler = useAnimatedGestureHandler<any, { startY: number, startX: number }>({
onStart: (_, ctx) => {
ctx.startY = translateY.value;
ctx.startX = 0;
},
onActive: (e, ctx) => {
try {
// Only allow vertical swipe, prevent diagonal
if (Math.abs(e.translationX) > Math.abs(e.translationY) * 0.5) return;
if (e.translationY > 0) {
const clamped = Math.min(e.translationY, MAX_SWIPE_DISTANCE);
translateY.value = ctx.startY + clamped;
coverRotate.value = withTiming(clamped / 100, { duration: 50, easing: Easing.linear });
}
} catch (err) {
console.warn('Gesture error:', err);
}
},
onEnd: (e) => {
try {
const shouldClose = e.translationY > MIN_SWIPE_DISTANCE || e.velocityY > 500;
if (shouldClose) {
translateY.value = withTiming(height, {
duration: 300,
easing: Easing.out(Easing.ease)
}, () => {
runOnJS(close)();
});
coverRotate.value = withTiming(0, { duration: 300 });
} else {
translateY.value = withSpring(0, {
damping: 15,
mass: 1,
stiffness: 120
});
coverRotate.value = withTiming(0, { duration: 200 });
}
} catch (err) {
console.warn('Gesture end error:', err);
translateY.value = withSpring(0, { damping: 15, mass: 1 });
}
},
});
const containerStyle = useAnimatedStyle(() => ({
transform: [{ translateY: translateY.value }]
}));
const overlayOpacity = useAnimatedStyle(() => ({
opacity: interpolate(translateY.value, [0, MAX_SWIPE_DISTANCE], [1, 0.2])
}));
const coverStyle = useAnimatedStyle(() => ({
transform: [
{ scale: coverScale.value },
{ rotateZ: `${coverRotate.value}deg` }
]
}));
const close = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
setExpanded(false);
}, [setExpanded]);
const onNext = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
const ni = usePlayer.getState().nextTrack();
usePlayer.getState().setIndex(ni);
}, []);
const onPrev = useCallback(() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
if (progress > 3) { seekTo(0); return; }
const pi = usePlayer.getState().prevTrack();
usePlayer.getState().setIndex(pi);
}, [progress]);
if (!track) return null;
const cover = coverUrl(track.cover_url);
const pct = duration > 0 ? progress / duration : 0;
const liked = isLiked(track.id);
return (
<Animated.View style={[StyleSheet.absoluteFill, s.root, overlayOpacity]} entering={FadeIn.duration(200)}>
{/* Blurred background with better gradient */}
<Image source={cover ? { uri: cover } : require('../assets/placeholder.png')} style={StyleSheet.absoluteFill} contentFit="cover" blurRadius={100} />
<View style={[StyleSheet.absoluteFill, s.bgDim]} />
<BlurView intensity={25} tint="dark" style={StyleSheet.absoluteFill} />
<PanGestureHandler ref={gestureRef} onGestureEvent={gestureHandler}>
<Animated.View style={[s.sheet, containerStyle, { paddingTop: insets.top + 8, paddingBottom: insets.bottom + 16 }]}>
{/* Top bar with better design */}
<View style={s.topBar}>
<Text style={s.topLabel}>Сейчас играет</Text>
<Pressable onPress={close} hitSlop={20} style={s.closeBtn}>
<Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
<Path d="M18 6L6 18M6 6l12 12" stroke="rgba(255,255,255,0.6)" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
</Pressable>
</View>
{/* Cover with better shadow */}
<View style={s.coverWrap}>
<Animated.View style={[s.coverShadow, coverStyle]}>
<Image source={cover ? { uri: cover } : require('../assets/placeholder.png')} style={s.cover} contentFit="cover" transition={300} />
</Animated.View>
</View>
{/* Meta with better spacing */}
<View style={s.metaRow}>
<View style={s.metaText}>
<Text style={s.trackTitle} numberOfLines={1}>{track.title}</Text>
<Text style={s.artist} numberOfLines={1}>{track.artist}</Text>
</View>
<Pressable onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleLike(track.id); }} hitSlop={16}>
<Svg width={24} height={24} 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 : 'rgba(255,255,255,0.5)'} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
</Pressable>
</View>
{/* Seek with gradient track */}
<View style={s.seekWrap}>
<View style={s.sliderContainer}>
<Slider
style={{ flex: 1, height: 40 }}
minimumValue={0}
maximumValue={1}
value={pct}
minimumTrackTintColor={Colors.accent}
maximumTrackTintColor="rgba(255,255,255,0.15)"
thumbTintColor={Colors.text}
onSlidingComplete={(v) => seekTo(v * duration)}
/>
</View>
<View style={s.timeRow}>
<Text style={s.timeText}>{fmt(progress)}</Text>
<Text style={s.timeText}>{fmt(duration - progress)}</Text>
</View>
</View>
{/* Controls with better styling */}
<View style={s.controls}>
<CtlBtn onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleShuffle(); }} active={shuffle}>
<ShuffleIcon active={shuffle} />
</CtlBtn>
<CtlBtn onPress={onPrev}>
<Svg width={28} height={28} viewBox="0 0 28 28" fill="none">
<Rect x={5} y={6} width={2.5} height={16} rx={1.2} fill={Colors.text} />
<Path d="M22 6L9.5 14 22 22V6z" fill={Colors.text} />
</Svg>
</CtlBtn>
<Pressable style={s.playBtn} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); togglePlay(); }}>
{playing
? <Svg width={28} height={28} viewBox="0 0 24 24"><Rect x={5} y={4} width={4} height={16} rx={1.5} fill={Colors.bg} /><Rect x={15} y={4} width={4} height={16} rx={1.5} fill={Colors.bg} /></Svg>
: <Svg width={28} height={28} viewBox="0 0 24 24" fill={Colors.bg}><Path d="M7 4.5v15l13-7.5L7 4.5z" /></Svg>}
</Pressable>
<CtlBtn onPress={onNext}>
<Svg width={28} height={28} viewBox="0 0 28 28" fill="none">
<Rect x={20.5} y={6} width={2.5} height={16} rx={1.2} fill={Colors.text} />
<Path d="M6 6l12.5 8L6 22V6z" fill={Colors.text} />
</Svg>
</CtlBtn>
<CtlBtn onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); cycleRepeat(); }} active={repeat > 0}>
<RepeatIcon repeat={repeat} />
</CtlBtn>
</View>
{/* Lyrics button */}
<View style={s.bottomRow}>
<Pressable style={[s.lyrBtn, lyricsOpen && s.lyrBtnActive]} onPress={loadLyrics}>
<Svg width={15} height={15} fill="none" stroke={lyricsOpen ? Colors.accent : 'rgba(255,255,255,0.5)'} strokeWidth={2} viewBox="0 0 24 24">
<Line x1={3} y1={8} x2={21} y2={8} strokeLinecap="round" /><Line x1={3} y1={12} x2={21} y2={12} strokeLinecap="round" /><Line x1={3} y1={16} x2={15} y2={16} strokeLinecap="round" />
</Svg>
<Text style={[s.lyrBtnText, lyricsOpen && { color: Colors.accent }]}>
{lyricsLoading ? 'Загрузка…' : 'Текст'}
</Text>
</Pressable>
</View>
</Animated.View>
</PanGestureHandler>
{/* Lyrics sheet with better design */}
{lyricsOpen && (
<View style={s.lyrSheet}>
<Pressable style={StyleSheet.absoluteFill} onPress={() => setLyricsOpen(false)} />
<BlurView intensity={50} tint="dark" style={s.lyrInner}>
<Pressable onPress={() => setLyricsOpen(false)} style={s.lyrHandleBar}>
<View style={s.lyrHandle} />
</Pressable>
<View style={s.lyrHeader}>
{cover
? <Image source={{ uri: cover }} style={s.lyrThumb} contentFit="cover" />
: <View style={[s.lyrThumb, { backgroundColor: Colors.elevated }]} />}
<View style={{ flex: 1, minWidth: 0 }}>
<Text style={s.lyrTrackTitle} numberOfLines={1}>{track.title}</Text>
<Text style={s.lyrArtist} numberOfLines={1}>{track.artist}</Text>
</View>
</View>
<ScrollView ref={lyricsScrollRef} style={s.lyrScroll} contentContainerStyle={{ paddingVertical: 40, paddingHorizontal: 20 }} showsVerticalScrollIndicator={false} scrollEventThrottle={16}>
{lrcLines.length > 0
? lrcLines.map((line, i) => (
<Animated.Text
key={i}
style={[
s.lyrLine,
i === currentLineIdx && s.lyrLineActive,
i < currentLineIdx && s.lyrLinePassed
]}
onLayout={(e) => { lineHeights.current[i] = e.nativeEvent.layout.height; }}
>
{line.text}
</Animated.Text>
))
: plainLyrics
? <Text style={s.plainLyrics}>{plainLyrics}</Text>
: <Text style={s.lyrEmpty}>Текст не найден</Text>}
</ScrollView>
</BlurView>
</View>
)}
</Animated.View>
);
}
<Text style={s.timeText}>{fmt(progress)}</Text>
<Text style={s.timeText}>{fmt(duration)}</Text>
</View>
</View>
{/* Controls */}
<View style={s.controls}>
<CtlBtn onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); toggleShuffle(); }} active={shuffle}>
<ShuffleIcon active={shuffle} />
</CtlBtn>
<CtlBtn onPress={onPrev}>
<Svg width={28} height={28} viewBox="0 0 28 28" fill="none">
<Rect x={5} y={6} width={2.5} height={16} rx={1.2} fill={Colors.text} />
<Path d="M22 6L9.5 14 22 22V6z" fill={Colors.text} />
</Svg>
</CtlBtn>
<Pressable style={s.playBtn} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); togglePlay(); }}>
{playing
? <Svg width={26} height={26} viewBox="0 0 24 24"><Rect x={5} y={4} width={4} height={16} rx={1.5} fill={Colors.bg} /><Rect x={15} y={4} width={4} height={16} rx={1.5} fill={Colors.bg} /></Svg>
: <Svg width={26} height={26} viewBox="0 0 24 24" fill={Colors.bg}><Path d="M7 4.5v15l13-7.5L7 4.5z" /></Svg>}
</Pressable>
<CtlBtn onPress={onNext}>
<Svg width={28} height={28} viewBox="0 0 28 28" fill="none">
<Rect x={20.5} y={6} width={2.5} height={16} rx={1.2} fill={Colors.text} />
<Path d="M6 6l12.5 8L6 22V6z" fill={Colors.text} />
</Svg>
</CtlBtn>
<CtlBtn onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); cycleRepeat(); }} active={repeat > 0}>
<RepeatIcon repeat={repeat} />
</CtlBtn>
</View>
{/* Lyrics button */}
<View style={s.bottomRow}>
<Pressable style={s.lyrBtn} onPress={loadLyrics}>
<Svg width={14} height={14} fill="none" stroke={lyricsOpen ? Colors.accent : 'rgba(255,255,255,0.4)'} strokeWidth={2} viewBox="0 0 24 24">
<Line x1={3} y1={8} x2={21} y2={8} /><Line x1={3} y1={12} x2={21} y2={12} /><Line x1={3} y1={16} x2={15} y2={16} />
</Svg>
<Text style={[s.lyrBtnText, lyricsOpen && { color: Colors.accent }]}>
{lyricsLoading ? 'Загрузка…' : 'Текст'}
</Text>
</Pressable>
</View>
</Animated.View>
</PanGestureHandler>
{/* Lyrics sheet */}
{lyricsOpen && (
<View style={s.lyrSheet}>
<Pressable style={StyleSheet.absoluteFill} onPress={() => setLyricsOpen(false)} />
<BlurView intensity={40} tint="dark" style={s.lyrInner}>
<Pressable onPress={() => setLyricsOpen(false)} style={s.lyrHandleBar}>
<View style={s.lyrHandle} />
</Pressable>
<View style={s.lyrHeader}>
{cover
? <Image source={{ uri: cover }} style={s.lyrThumb} contentFit="cover" />
: <View style={[s.lyrThumb, { backgroundColor: Colors.elevated }]} />}
<View style={{ flex: 1, minWidth: 0 }}>
<Text style={s.lyrTrackTitle} numberOfLines={1}>{track.title}</Text>
<Text style={s.lyrArtist} numberOfLines={1}>{track.artist}</Text>
</View>
</View>
<ScrollView ref={lyricsScrollRef} style={s.lyrScroll} contentContainerStyle={{ paddingVertical: 24, paddingHorizontal: 20 }} showsVerticalScrollIndicator={false}>
{lrcLines.length > 0
? lrcLines.map((line, i) => (
<Text key={i} style={[s.lyrLine, i === currentLineIdx && s.lyrLineActive]} onLayout={(e) => { lineHeights.current[i] = e.nativeEvent.layout.height; }}>
{line.text}
</Text>
))
: plainLyrics
? <Text style={s.plainLyrics}>{plainLyrics}</Text>
: <Text style={s.lyrEmpty}>Текст не найден</Text>}
</ScrollView>
</BlurView>
</View>
)}
</Animated.View>
);
}
function CtlBtn({ onPress, active = false, children }: { onPress: () => void; active?: boolean; children: React.ReactNode }) {
const sc = useSharedValue(1);
const st = useAnimatedStyle(() => ({ transform: [{ scale: sc.value }] }));
return (
<Animated.View style={st}>
<Pressable
onPress={onPress}
onPressIn={() => { sc.value = withSpring(0.75, { damping: 10, mass: 0.8 }); }}
onPressOut={() => { sc.value = withSpring(1, { damping: 10, mass: 0.8 }); }}
hitSlop={14}
style={[s.ctlBtn, active && s.ctlBtnActive]}
>
{children}
</Pressable>
</Animated.View>
);
}
function ShuffleIcon({ active }: { active: boolean }) {
const c = active ? Colors.accent : 'rgba(255,255,255,0.6)';
return (
<Svg width={18} height={18} viewBox="0 0 24 24" fill="none">
<Polyline points="16,3 21,3 21,8" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M4 20L21 3" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
<Polyline points="21,16 21,21 16,21" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M15 15l5.1 5.1M4 4l5 5" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
);
}
function RepeatIcon({ repeat }: { repeat: 0 | 1 | 2 }) {
const c = repeat > 0 ? Colors.accent : 'rgba(255,255,255,0.6)';
return (
<View>
<Svg width={18} height={18} viewBox="0 0 24 24" fill="none">
<Polyline points="17,1 21,5 17,9" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M3 11V9a4 4 0 0 1 4-4h14" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
<Polyline points="7,23 3,19 7,15" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
<Path d="M21 13v2a4 4 0 0 1-4 4H3" stroke={c} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
</Svg>
{repeat === 2 && <View style={s.repBadge}><Text style={s.repBadgeText}>1</Text></View>}
</View>
);
}
function fmt(sec: number) {
const m = Math.floor(sec / 60), s = Math.floor(sec % 60);
return `${m}:${s < 10 ? '0' : ''}${s}`;
}
const s = StyleSheet.create({
root: { zIndex: 999 },
bgDim: { backgroundColor: 'rgba(0,0,0,0.7)' },
sheet: { flex: 1, paddingHorizontal: 24 },
topBar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 10, marginBottom: 8 },
topLabel: { color: 'rgba(255,255,255,0.4)', fontSize: 11, fontWeight: '700', letterSpacing: 1.3, textTransform: 'uppercase' },
closeBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(255,255,255,0.12)', alignItems: 'center', justifyContent: 'center' },
coverWrap: { alignItems: 'center', marginVertical: 24, marginBottom: 32 },
coverShadow: { shadowColor: '#000', shadowOffset: { width: 0, height: 28 }, shadowOpacity: 0.8, shadowRadius: 40 },
cover: { width: COVER, height: COVER, borderRadius: Radius.xl, backgroundColor: Colors.elevated, overflow: 'hidden' },
metaRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 16, marginBottom: 16 },
metaText: { flex: 1 },
trackTitle: { color: Colors.text, fontSize: 24, fontWeight: '800', letterSpacing: -0.5, lineHeight: 30 },
artist: { color: 'rgba(255,255,255,0.6)', fontSize: 16, marginTop: 6, fontWeight: '500' },
seekWrap: { marginBottom: 12 },
sliderContainer: { height: 40, justifyContent: 'center' },
timeRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 2 },
timeText: { color: 'rgba(255,255,255,0.4)', fontSize: Font.xs, fontWeight: '500' },
controls: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 6, marginBottom: 24, marginTop: 16 },
ctlBtn: { width: 48, height: 48, alignItems: 'center', justifyContent: 'center', borderRadius: 24 },
ctlBtnActive: { backgroundColor: 'rgba(255,255,255,0.08)' },
playBtn: { width: 64, height: 64, borderRadius: 32, backgroundColor: Colors.text, alignItems: 'center', justifyContent: 'center', shadowColor: Colors.accent, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 12 },
bottomRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
lyrBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, backgroundColor: 'rgba(255,255,255,0.1)', paddingHorizontal: 16, paddingVertical: 10, borderRadius: Radius.full, borderWidth: 1, borderColor: 'rgba(255,255,255,0.05)' },
lyrBtnActive: { backgroundColor: `${Colors.accent}15`, borderColor: `${Colors.accent}40` },
lyrBtnText: { color: 'rgba(255,255,255,0.5)', fontSize: Font.sm, fontWeight: '600' },
repBadge: { position: 'absolute', top: -4, right: -4, width: 12, height: 12, borderRadius: 6, backgroundColor: Colors.accent, alignItems: 'center', justifyContent: 'center', shadowColor: Colors.accent, shadowOpacity: 0.5, shadowRadius: 4 },
repBadgeText: { color: '#000', fontSize: 6, fontWeight: '900' },
// Lyrics sheet
lyrSheet: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 100, justifyContent: 'flex-end' },
lyrInner: { height: '75%', borderTopLeftRadius: 24, borderTopRightRadius: 24, overflow: 'hidden', borderTopWidth: 1, borderColor: 'rgba(255,255,255,0.08)' },
lyrHandleBar: { alignItems: 'center', paddingTop: 14, paddingBottom: 8 },
lyrHandle: { width: 40, height: 4, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.28)' },
lyrHeader: { flexDirection: 'row', alignItems: 'center', gap: 14, paddingHorizontal: 20, paddingVertical: 14, borderBottomWidth: 1, borderColor: 'rgba(255,255,255,0.06)' },
lyrThumb: { width: 44, height: 44, borderRadius: 10, flexShrink: 0, shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 6 },
lyrTrackTitle: { fontSize: 14, fontWeight: '700', color: '#fff' },
lyrArtist: { fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 2 },
lyrScroll: { flex: 1 },
lyrLine: { fontSize: 18, lineHeight: 30, color: 'rgba(255,255,255,0.25)', fontWeight: '600', marginBottom: 12, textAlign: 'center' },
lyrLineActive: { fontSize: 32, lineHeight: 44, color: Colors.accent, marginBottom: 16, fontWeight: '800' },
lyrLinePassed: { color: 'rgba(255,255,255,0.35)' },
plainLyrics: { fontSize: 16, lineHeight: 28, color: 'rgba(255,255,255,0.75)', textAlign: 'center', fontWeight: '500' },
lyrEmpty: { color: 'rgba(255,255,255,0.38)', fontSize: 15, textAlign: 'center', marginTop: 60, fontWeight: '500' },
});

96
constants/theme.ts
View file

@ -1,48 +1,48 @@
export const Colors = {
bg: '#0a0a0a',
surface: '#111111',
elevated: '#1a1a1a',
subtle: '#2a2a2a',
border: 'rgba(255,255,255,0.07)',
border2: 'rgba(255,255,255,0.14)',
accent: '#4F86F5',
accentDim:'rgba(79,134,245,0.18)',
pink: '#e84393',
text: '#f0f0f0',
text2: '#888888',
text3: '#444444',
red: '#e84040',
white: '#ffffff',
// legacy alias
green: '#4F86F5',
};
export const Spacing = {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
xxl: 48,
};
export const Radius = {
sm: 8,
md: 10,
lg: 14,
xl: 16,
full: 9999,
};
export const Font = {
xs: 11,
sm: 13,
md: 14,
lg: 17,
xl: 20,
xxl: 26,
xxxl: 32,
};
export const TAB_BAR_HEIGHT = 88;
export const MINI_PLAYER_HEIGHT = 64;
export const Colors = {
bg: '#0a0a0a',
surface: '#111111',
elevated: '#1a1a1a',
subtle: '#2a2a2a',
border: 'rgba(255,255,255,0.07)',
border2: 'rgba(255,255,255,0.14)',
accent: '#4F86F5',
accentDim:'rgba(79,134,245,0.18)',
pink: '#e84393',
text: '#f0f0f0',
text2: '#888888',
text3: '#444444',
red: '#e84040',
white: '#ffffff',
// legacy alias
green: '#4F86F5',
};
export const Spacing = {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
xxl: 48,
};
export const Radius = {
sm: 8,
md: 10,
lg: 14,
xl: 16,
full: 9999,
};
export const Font = {
xs: 11,
sm: 13,
md: 14,
lg: 17,
xl: 20,
xxl: 26,
xxxl: 32,
};
export const TAB_BAR_HEIGHT = 88;
export const MINI_PLAYER_HEIGHT = 64;

52
eas.json
View file

@ -1,26 +1,26 @@
{
"cli": {
"version": ">= 10.0.0",
"appVersionSource": "local"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal",
"ios": {
"simulator": false
}
},
"production": {
"ios": {
"buildConfiguration": "Release"
}
}
},
"submit": {
"production": {}
}
}
{
"cli": {
"version": ">= 10.0.0",
"appVersionSource": "local"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal",
"ios": {
"simulator": false
}
},
"production": {
"ios": {
"buildConfiguration": "Release"
}
}
},
"submit": {
"production": {}
}
}

110
hooks/PlaybackService.ts
View file

@ -1,55 +1,55 @@
import TrackPlayer, { Event } from 'react-native-track-player';
import { usePlayer } from '../store';
import { loadAndPlay } from './useAudio';
export async function PlaybackService() {
TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());
TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());
TrackPlayer.addEventListener(Event.RemoteNext, async () => {
const state = usePlayer.getState();
const ni = state.nextTrack();
state.setIndex(ni);
const track = state.queue[ni];
if (track) await loadAndPlay(track).catch(console.error);
});
TrackPlayer.addEventListener(Event.RemotePrevious, async () => {
const state = usePlayer.getState();
const progress = await TrackPlayer.getProgress();
if (progress.position > 3) {
await TrackPlayer.seekTo(0);
return;
}
const pi = state.prevTrack();
state.setIndex(pi);
const track = state.queue[pi];
if (track) await loadAndPlay(track).catch(console.error);
});
TrackPlayer.addEventListener(Event.RemoteSeek, ({ position }) =>
TrackPlayer.seekTo(position),
);
TrackPlayer.addEventListener(Event.PlaybackQueueEnded, async () => {
const state = usePlayer.getState();
const prevIdx = state.index;
if (state.repeat === 2) {
await TrackPlayer.seekTo(0);
await TrackPlayer.play();
return;
}
const ni = state.nextTrack();
state.setIndex(ni);
if (ni === prevIdx) {
state.setPlaying(false);
return;
}
const track = state.queue[ni];
if (track) await loadAndPlay(track).catch(console.error);
});
}
import TrackPlayer, { Event } from 'react-native-track-player';
import { usePlayer } from '../store';
import { loadAndPlay } from './useAudio';
export async function PlaybackService() {
TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());
TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());
TrackPlayer.addEventListener(Event.RemoteNext, async () => {
const state = usePlayer.getState();
const ni = state.nextTrack();
state.setIndex(ni);
const track = state.queue[ni];
if (track) await loadAndPlay(track).catch(console.error);
});
TrackPlayer.addEventListener(Event.RemotePrevious, async () => {
const state = usePlayer.getState();
const progress = await TrackPlayer.getProgress();
if (progress.position > 3) {
await TrackPlayer.seekTo(0);
return;
}
const pi = state.prevTrack();
state.setIndex(pi);
const track = state.queue[pi];
if (track) await loadAndPlay(track).catch(console.error);
});
TrackPlayer.addEventListener(Event.RemoteSeek, ({ position }) =>
TrackPlayer.seekTo(position),
);
TrackPlayer.addEventListener(Event.PlaybackQueueEnded, async () => {
const state = usePlayer.getState();
const prevIdx = state.index;
if (state.repeat === 2) {
await TrackPlayer.seekTo(0);
await TrackPlayer.play();
return;
}
const ni = state.nextTrack();
state.setIndex(ni);
if (ni === prevIdx) {
state.setPlaying(false);
return;
}
const track = state.queue[ni];
if (track) await loadAndPlay(track).catch(console.error);
});
}

214
hooks/useAudio.ts
View file

@ -1,106 +1,108 @@
import { useEffect } from 'react';
import TrackPlayer, {
State,
Capability,
AppKilledPlaybackBehavior,
usePlaybackState,
useProgress,
} from 'react-native-track-player';
import { usePlayer } from '../store';
import { coverUrl, Track } from '../services/api';
let _setupDone = false;
let _lastLoadedId: number | null = null;
async function ensureSetup() {
if (_setupDone) return;
_setupDone = true;
try {
await TrackPlayer.setupPlayer({ minBuffer: 15, maxBuffer: 50, playBuffer: 2.5 });
await TrackPlayer.updateOptions({
android: {
appKilledPlaybackBehavior:
AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
},
capabilities: [
Capability.Play,
Capability.Pause,
Capability.SkipToNext,
Capability.SkipToPrevious,
Capability.SeekTo,
],
compactCapabilities: [Capability.Play, Capability.Pause, Capability.SkipToNext],
});
} catch (e: any) {
// Player already set up on hot reload — update options only
if (e?.message?.toLowerCase().includes('already')) {
_setupDone = true;
return;
}
_setupDone = false;
throw e;
}
}
// Load a track and start playing. Mutex prevents double-load on the same ID.
export async function loadAndPlay(track: Track) {
if (_lastLoadedId === track.id) return;
_lastLoadedId = track.id;
try {
await TrackPlayer.reset();
await TrackPlayer.add({
id: String(track.id),
url: track.cdn_url2 || track.cdn_url,
title: track.title,
artist: track.artist,
artwork: coverUrl(track.cover_url) ?? undefined,
duration: track.duration,
});
await TrackPlayer.play();
} catch (e) {
_lastLoadedId = null;
throw e;
}
}
export async function togglePlay() {
const { state } = await TrackPlayer.getPlaybackState();
if (state === State.Playing) await TrackPlayer.pause();
else await TrackPlayer.play();
}
export async function seekTo(seconds: number) {
await TrackPlayer.seekTo(seconds);
}
// Call ONCE from the root layout only
export function useAudio() {
const { queue, index, setPlaying, setProgress, setDuration } = usePlayer();
const currentTrack = queue[index] ?? null;
const playbackState = usePlaybackState();
const progress = useProgress(500);
// One-time player setup
useEffect(() => {
ensureSetup().catch(console.error);
}, []);
// Sync TrackPlayer progress → store
useEffect(() => {
setProgress(progress.position);
setDuration(progress.duration);
}, [progress.position, progress.duration]);
// Sync TrackPlayer playing state → store
useEffect(() => {
setPlaying(playbackState.state === State.Playing);
}, [playbackState.state]);
// Load new track when queue index changes
useEffect(() => {
if (!currentTrack) return;
loadAndPlay(currentTrack).catch(console.error);
}, [currentTrack?.id]);
return { togglePlay, seek: seekTo };
}
import { useEffect } from 'react';
import TrackPlayer, {
State,
Capability,
AppKilledPlaybackBehavior,
usePlaybackState,
useProgress,
} from 'react-native-track-player';
import { usePlayer } from '../store';
import { coverUrl, Track, getTrackUrl } from '../services/api';
let _setupDone = false;
let _lastLoadedId: number | null = null;
async function ensureSetup() {
if (_setupDone) return;
_setupDone = true;
try {
await TrackPlayer.setupPlayer({ minBuffer: 15, maxBuffer: 50, playBuffer: 2.5 });
await TrackPlayer.updateOptions({
android: {
appKilledPlaybackBehavior:
AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
},
capabilities: [
Capability.Play,
Capability.Pause,
Capability.SkipToNext,
Capability.SkipToPrevious,
Capability.SeekTo,
],
compactCapabilities: [Capability.Play, Capability.Pause, Capability.SkipToNext],
});
} catch (e: any) {
// Player already set up on hot reload — update options only
if (e?.message?.toLowerCase().includes('already')) {
_setupDone = true;
return;
}
_setupDone = false;
throw e;
}
}
// Load a track and start playing. Mutex prevents double-load on the same ID.
// Uses local file if downloaded, otherwise streams from CDN
export async function loadAndPlay(track: Track) {
if (_lastLoadedId === track.id) return;
_lastLoadedId = track.id;
try {
const url = await getTrackUrl(track);
await TrackPlayer.reset();
await TrackPlayer.add({
id: String(track.id),
url: url || (track.cdn_url2 || track.cdn_url),
title: track.title,
artist: track.artist,
artwork: coverUrl(track.cover_url) ?? undefined,
duration: track.duration,
});
await TrackPlayer.play();
} catch (e) {
_lastLoadedId = null;
throw e;
}
}
export async function togglePlay() {
const { state } = await TrackPlayer.getPlaybackState();
if (state === State.Playing) await TrackPlayer.pause();
else await TrackPlayer.play();
}
export async function seekTo(seconds: number) {
await TrackPlayer.seekTo(seconds);
}
// Call ONCE from the root layout only
export function useAudio() {
const { queue, index, setPlaying, setProgress, setDuration } = usePlayer();
const currentTrack = queue[index] ?? null;
const playbackState = usePlaybackState();
const progress = useProgress(500);
// One-time player setup
useEffect(() => {
ensureSetup().catch(console.error);
}, []);
// Sync TrackPlayer progress → store
useEffect(() => {
setProgress(progress.position);
setDuration(progress.duration);
}, [progress.position, progress.duration]);
// Sync TrackPlayer playing state → store
useEffect(() => {
setPlaying(playbackState.state === State.Playing);
}, [playbackState.state]);
// Load new track when queue index changes
useEffect(() => {
if (!currentTrack) return;
loadAndPlay(currentTrack).catch(console.error);
}, [currentTrack?.id]);
return { togglePlay, seek: seekTo };
}

116
hooks/useAuth.ts
View file

@ -1,58 +1,58 @@
import { useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { getAccessToken, getMe, clearTokens, User } from '../services/api';
import { useAuth } from '../store';
const USER_KEY = 'ns-music-user';
export async function saveUser(user: User): Promise<void> {
await AsyncStorage.setItem(USER_KEY, JSON.stringify(user));
}
export async function loadCachedUser(): Promise<User | null> {
try {
const raw = await AsyncStorage.getItem(USER_KEY);
return raw ? JSON.parse(raw) : null;
} catch { return null; }
}
export function useBootAuth() {
const { setUser, setReady } = useAuth();
useEffect(() => {
(async () => {
try {
const token = await getAccessToken();
if (!token) { setReady(true); return; }
// Use cached user for immediate display while validating
const cached = await loadCachedUser();
if (cached) setUser(cached);
// Validate token and get fresh data
const me = await getMe();
if (me) {
// Preserve plan from initial login since no endpoint exposes it
const merged: User = { ...me, plan: cached?.plan || me.plan };
setUser(merged);
saveUser(merged).catch(() => {});
} else {
// Token invalid — clear everything
await clearTokens();
await AsyncStorage.removeItem(USER_KEY);
setUser(null);
}
} catch {
// Network error — cached user already set above, just mark ready
} finally {
setReady(true);
}
})();
}, []);
}
export async function logout() {
await clearTokens();
await AsyncStorage.removeItem(USER_KEY).catch(() => {});
useAuth.getState().setUser(null);
}
import { useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { getAccessToken, getMe, clearTokens, User } from '../services/api';
import { useAuth } from '../store';
const USER_KEY = 'ns-music-user';
export async function saveUser(user: User): Promise<void> {
await AsyncStorage.setItem(USER_KEY, JSON.stringify(user));
}
export async function loadCachedUser(): Promise<User | null> {
try {
const raw = await AsyncStorage.getItem(USER_KEY);
return raw ? JSON.parse(raw) : null;
} catch { return null; }
}
export function useBootAuth() {
const { setUser, setReady } = useAuth();
useEffect(() => {
(async () => {
try {
const token = await getAccessToken();
if (!token) { setReady(true); return; }
// Use cached user for immediate display while validating
const cached = await loadCachedUser();
if (cached) setUser(cached);
// Validate token and get fresh data
const me = await getMe();
if (me) {
// Preserve plan from initial login since no endpoint exposes it
const merged: User = { ...me, plan: cached?.plan || me.plan };
setUser(merged);
saveUser(merged).catch(() => {});
} else {
// Token invalid — clear everything
await clearTokens();
await AsyncStorage.removeItem(USER_KEY);
setUser(null);
}
} catch {
// Network error — cached user already set above, just mark ready
} finally {
setReady(true);
}
})();
}, []);
}
export async function logout() {
await clearTokens();
await AsyncStorage.removeItem(USER_KEY).catch(() => {});
useAuth.getState().setUser(null);
}

10
index.js
View file

@ -1,5 +1,5 @@
import 'expo-router/entry';
import TrackPlayer from 'react-native-track-player';
import { PlaybackService } from './hooks/PlaybackService';
TrackPlayer.registerPlaybackService(() => PlaybackService);
import 'expo-router/entry';
import TrackPlayer from 'react-native-track-player';
import { PlaybackService } from './hooks/PlaybackService';
TrackPlayer.registerPlaybackService(() => PlaybackService);

112
main.yml
View file

@ -1,56 +1,56 @@
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30

8
metro.config.js
View file

@ -1,4 +1,4 @@
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
module.exports = config;
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
module.exports = config;

86
package.json
View file

@ -1,42 +1,44 @@
{
"name": "burmalda-music",
"version": "1.0.0",
"main": "./index.js",
"scripts": {
"start": "expo start",
"ios": "expo run:ios",
"build:ios": "eas build --platform ios --profile production",
"build:preview": "eas build --platform ios --profile preview",
"update": "eas update --branch production"
},
"dependencies": {
"expo": "~51.0.28",
"expo-router": "~3.5.23",
"expo-blur": "~13.0.2",
"expo-constants": "~16.0.2",
"expo-haptics": "~13.0.1",
"expo-image": "~1.12.15",
"expo-linear-gradient": "~13.0.2",
"expo-linking": "~6.3.1",
"expo-secure-store": "~13.0.2",
"expo-status-bar": "~1.12.1",
"expo-updates": "~0.25.27",
"expo-web-browser": "~13.0.3",
"react": "18.2.0",
"react-native": "0.74.5",
"react-native-gesture-handler": "~2.16.2",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"zustand": "^4.5.4",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/slider": "4.5.2",
"react-native-track-player": "^4.1.1"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@types/react": "~18.2.79",
"@types/react-native": "~0.73.0",
"typescript": "~5.3.3"
}
}
{
"name": "burmalda-music",
"version": "1.0.0",
"main": "./index.js",
"scripts": {
"start": "expo start",
"ios": "expo run:ios",
"build:ios": "eas build --platform ios --profile production",
"build:preview": "eas build --platform ios --profile preview",
"update": "eas update --branch production"
},
"dependencies": {
"expo": "~51.0.28",
"expo-router": "~3.5.23",
"expo-blur": "~13.0.2",
"expo-constants": "~16.0.2",
"expo-haptics": "~13.0.1",
"expo-image": "~1.12.15",
"expo-linear-gradient": "~13.0.2",
"expo-linking": "~6.3.1",
"expo-secure-store": "~13.0.2",
"expo-status-bar": "~1.12.1",
"expo-updates": "~0.25.27",
"expo-web-browser": "~13.0.3",
"expo-file-system": "~16.0.9",
"expo-network": "~6.0.2",
"react": "18.2.0",
"react-native": "0.74.5",
"react-native-gesture-handler": "~2.16.2",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"zustand": "^4.5.4",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/slider": "4.5.2",
"react-native-track-player": "^4.1.1"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@types/react": "~18.2.79",
"@types/react-native": "~0.73.0",
"typescript": "~5.3.3"
}
}

373
services/api.ts
View file

@ -1,178 +1,195 @@
import * as SecureStore from 'expo-secure-store';
const BASE = 'https://music.nodeshift.space';
const CLOUD = 'https://cloud.nodeshift.space';
const CLIENT_ID = 'nsc_A5zi4cZ103aYJGcNTG1bERXV1YCAQW_U';
const REDIRECT = 'burmalda://auth/callback';
// ── Token storage ─────────────────────────────────────────────────────────────
export async function saveTokens(access: string, refresh: string) {
await SecureStore.setItemAsync('access_token', access);
await SecureStore.setItemAsync('refresh_token', refresh);
}
export async function getAccessToken(): Promise<string | null> {
return SecureStore.getItemAsync('access_token');
}
export async function clearTokens() {
await SecureStore.deleteItemAsync('access_token');
await SecureStore.deleteItemAsync('refresh_token');
}
// ── Fetch helper ──────────────────────────────────────────────────────────────
export async function apiFetch(path: string, opts: RequestInit = {}): Promise<Response> {
const token = await getAccessToken();
const headers: HeadersInit = {
'Content-Type': 'application/json',
...(token ? { Authorization: `Bearer ${token}` } : {}),
...(opts.headers as Record<string, string> || {}),
};
return fetch(`${BASE}${path}`, { ...opts, headers });
}
// ── OAuth ─────────────────────────────────────────────────────────────────────
export function buildOAuthUrl(state: string): string {
const p = new URLSearchParams({ client_id: CLIENT_ID, redirect_uri: REDIRECT, state, scope: 'profile email' });
return `${CLOUD}/api/cloud/oauth/authorize?${p}`;
}
export async function exchangeCode(code: string): Promise<{ access_token: string; refresh_token: string; user: User }> {
const res = await fetch(`${BASE}/api/auth/cloud-login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code, redirect_uri: REDIRECT }),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.detail || 'Auth failed');
}
return res.json();
}
// ── Types ─────────────────────────────────────────────────────────────────────
export interface Track {
id: number;
title: string;
artist: string;
duration: number;
cover_url: string | null;
cdn_url: string;
cdn_url2: string;
filename: string;
album?: string;
play_count?: number;
source?: string;
cdn_synced?: boolean;
}
export interface Album {
id: number;
title: string;
artist: string;
cover_url: string | null;
track_count: number;
}
export interface User {
id: number;
email: string;
username: string | null;
avatar_url: string | null;
plan: string;
}
export interface Lyrics {
synced: string | null;
plain: string | null;
}
// ── API calls ─────────────────────────────────────────────────────────────────
export async function getTracks(): Promise<Track[]> {
const r = await apiFetch('/api/music/tracks?limit=200');
if (!r.ok) return [];
return r.json();
}
export async function getAlbums(): Promise<Album[]> {
const r = await apiFetch('/api/music/albums');
if (!r.ok) return [];
const data: Array<{ album: string; artist: string; count: number }> = await r.json();
return data.map((a, i) => ({
id: i,
title: a.album,
artist: a.artist,
cover_url: null,
track_count: a.count,
}));
}
export async function getMe(): Promise<User | null> {
// Validate token
const r = await apiFetch('/api/auth/me');
if (!r.ok) return null;
const auth = await r.json();
// Get music profile for username / avatar
const pr = await apiFetch('/api/music/profile/me');
const profile = pr.ok ? await pr.json() : {};
return {
id: auth.id,
email: auth.email,
username: profile.username || null,
avatar_url: profile.avatar_url || null,
plan: 'free', // merged with cached plan in useBootAuth
};
}
export async function searchTracks(q: string): Promise<Track[]> {
const r = await apiFetch('/api/music/tracks?limit=200');
if (!r.ok) return [];
const all: Track[] = await r.json();
if (!q.trim()) return all;
const lq = q.toLowerCase();
return all.filter(t =>
t.title.toLowerCase().includes(lq) ||
t.artist.toLowerCase().includes(lq) ||
(t.album && t.album.toLowerCase().includes(lq))
);
}
export async function fetchLyrics(id: number): Promise<Lyrics | null> {
const r = await apiFetch(`/api/music/lyrics/${id}`);
if (!r.ok) return null;
return r.json();
}
// cover_url from the server is one of:
// - "https://cdn.nodeshift.space/music/xxx.jpg" (full URL)
// - "/api/music/cover/xxx.jpg" (relative path)
// - "xxx.jpg" (bare filename, legacy)
export function coverUrl(raw: string | null): string | null {
if (!raw) return null;
if (raw.startsWith('http')) return raw;
if (raw.startsWith('/')) return `${BASE}${raw}`;
return `${BASE}/api/music/cover/${raw}`;
}
// ── LRC parser ────────────────────────────────────────────────────────────────
export interface LrcLine {
time: number;
text: string;
}
export function parseLrc(lrc: string): LrcLine[] {
const lines: LrcLine[] = [];
for (const raw of lrc.split('\n')) {
const m = raw.match(/^\[(\d+):(\d+)\.(\d+)\]\s*(.*)$/);
if (!m) continue;
const time = parseInt(m[1]) * 60 + parseFloat(`${m[2]}.${m[3]}`);
if (m[4].trim()) lines.push({ time, text: m[4].trim() });
}
return lines.sort((a, b) => a.time - b.time);
}
import * as SecureStore from 'expo-secure-store';
const BASE = 'https://music.nodeshift.space';
const CLOUD = 'https://cloud.nodeshift.space';
const CLIENT_ID = 'nsc_A5zi4cZ103aYJGcNTG1bERXV1YCAQW_U';
const REDIRECT = 'burmalda://auth/callback';
// ── Token storage ─────────────────────────────────────────────────────────────
export async function saveTokens(access: string, refresh: string) {
await SecureStore.setItemAsync('access_token', access);
await SecureStore.setItemAsync('refresh_token', refresh);
}
export async function getAccessToken(): Promise<string | null> {
return SecureStore.getItemAsync('access_token');
}
export async function clearTokens() {
await SecureStore.deleteItemAsync('access_token');
await SecureStore.deleteItemAsync('refresh_token');
}
// ── Fetch helper ──────────────────────────────────────────────────────────────
export async function apiFetch(path: string, opts: RequestInit = {}): Promise<Response> {
const token = await getAccessToken();
const headers: HeadersInit = {
'Content-Type': 'application/json',
...(token ? { Authorization: `Bearer ${token}` } : {}),
...(opts.headers as Record<string, string> || {}),
};
return fetch(`${BASE}${path}`, { ...opts, headers });
}
// ── OAuth ─────────────────────────────────────────────────────────────────────
export function buildOAuthUrl(state: string): string {
const p = new URLSearchParams({ client_id: CLIENT_ID, redirect_uri: REDIRECT, state, scope: 'profile email' });
return `${CLOUD}/api/cloud/oauth/authorize?${p}`;
}
export async function exchangeCode(code: string): Promise<{ access_token: string; refresh_token: string; user: User }> {
const res = await fetch(`${BASE}/api/auth/cloud-login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code, redirect_uri: REDIRECT }),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.detail || 'Auth failed');
}
return res.json();
}
// ── Types ─────────────────────────────────────────────────────────────────────
export interface Track {
id: number;
title: string;
artist: string;
duration: number;
cover_url: string | null;
cdn_url: string;
cdn_url2: string;
filename: string;
album?: string;
play_count?: number;
source?: string;
cdn_synced?: boolean;
}
export interface Album {
id: number;
title: string;
artist: string;
cover_url: string | null;
track_count: number;
}
export interface User {
id: number;
email: string;
username: string | null;
avatar_url: string | null;
plan: string;
}
export interface Lyrics {
synced: string | null;
plain: string | null;
}
// ── API calls ─────────────────────────────────────────────────────────────────
export async function getTracks(): Promise<Track[]> {
const r = await apiFetch('/api/music/tracks?limit=200');
if (!r.ok) return [];
return r.json();
}
export async function getAlbums(): Promise<Album[]> {
const r = await apiFetch('/api/music/albums');
if (!r.ok) return [];
const data: Array<{ album: string; artist: string; count: number }> = await r.json();
return data.map((a, i) => ({
id: i,
title: a.album,
artist: a.artist,
cover_url: null,
track_count: a.count,
}));
}
export async function getMe(): Promise<User | null> {
// Validate token
const r = await apiFetch('/api/auth/me');
if (!r.ok) return null;
const auth = await r.json();
// Get music profile for username / avatar
const pr = await apiFetch('/api/music/profile/me');
const profile = pr.ok ? await pr.json() : {};
return {
id: auth.id,
email: auth.email,
username: profile.username || null,
avatar_url: profile.avatar_url || null,
plan: 'free', // merged with cached plan in useBootAuth
};
}
export async function searchTracks(q: string): Promise<Track[]> {
const r = await apiFetch('/api/music/tracks?limit=200');
if (!r.ok) return [];
const all: Track[] = await r.json();
if (!q.trim()) return all;
const lq = q.toLowerCase();
return all.filter(t =>
t.title.toLowerCase().includes(lq) ||
t.artist.toLowerCase().includes(lq) ||
(t.album && t.album.toLowerCase().includes(lq))
);
}
export async function fetchLyrics(id: number): Promise<Lyrics | null> {
const r = await apiFetch(`/api/music/lyrics/${id}`);
if (!r.ok) return null;
return r.json();
}
// cover_url from the server is one of:
// - "https://cdn.nodeshift.space/music/xxx.jpg" (full URL)
// - "/api/music/cover/xxx.jpg" (relative path)
// - "xxx.jpg" (bare filename, legacy)
export function coverUrl(raw: string | null): string | null {
if (!raw) return null;
if (raw.startsWith('http')) return raw;
if (raw.startsWith('/')) return `${BASE}${raw}`;
return `${BASE}/api/music/cover/${raw}`;
}
// ── Offline/Local playback ────────────────────────────────────────────────────
export async function getTrackUrl(track: Track): Promise<string> {
try {
const { isTrackDownloaded, getTrackFilePath } = await import('./offline');
const isDownloaded = await isTrackDownloaded(track.id);
if (isDownloaded) {
return getTrackFilePath(track.id);
}
} catch (err) {
console.warn('Failed to check downloaded track:', err);
}
// Fallback to CDN URL
return track.cdn_url || track.cdn_url2 || '';
}
// ── LRC parser ────────────────────────────────────────────────────────────────
export interface LrcLine {
time: number;
text: string;
}
export function parseLrc(lrc: string): LrcLine[] {
const lines: LrcLine[] = [];
for (const raw of lrc.split('\n')) {
const m = raw.match(/^\[(\d+):(\d+)\.(\d+)\]\s*(.*)$/);
if (!m) continue;
const time = parseInt(m[1]) * 60 + parseFloat(`${m[2]}.${m[3]}`);
if (m[4].trim()) lines.push({ time, text: m[4].trim() });
}
return lines.sort((a, b) => a.time - b.time);
}

193
services/offline.ts Normal file
View file

@ -0,0 +1,193 @@
import * as FileSystem from 'expo-file-system';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Track, Album } from './api';
const OFFLINE_TRACKS_KEY = 'offline_tracks_cache';
const OFFLINE_ALBUMS_KEY = 'offline_albums_cache';
const DOWNLOADED_TRACKS_KEY = 'downloaded_tracks';
const DOCUMENTS_DIR = `${FileSystem.documentDirectory}music/`;
// ── Initialization ─────────────────────────────────────────────────────────────
export async function initOfflineStorage() {
try {
const dir = await FileSystem.getInfoAsync(DOCUMENTS_DIR);
if (!dir.exists) {
await FileSystem.makeDirectoryAsync(DOCUMENTS_DIR, { intermediates: true });
}
} catch (err) {
console.warn('Failed to create offline storage dir:', err);
}
}
// ── Cache management ───────────────────────────────────────────────────────────
export async function cacheTracksAndAlbums(tracks: Track[], albums: Album[]) {
try {
await Promise.all([
AsyncStorage.setItem(OFFLINE_TRACKS_KEY, JSON.stringify(tracks)),
AsyncStorage.setItem(OFFLINE_ALBUMS_KEY, JSON.stringify(albums)),
]);
} catch (err) {
console.warn('Failed to cache tracks and albums:', err);
}
}
export async function getCachedTracks(): Promise<Track[] | null> {
try {
const cached = await AsyncStorage.getItem(OFFLINE_TRACKS_KEY);
return cached ? JSON.parse(cached) : null;
} catch (err) {
console.warn('Failed to get cached tracks:', err);
return null;
}
}
export async function getCachedAlbums(): Promise<Album[] | null> {
try {
const cached = await AsyncStorage.getItem(OFFLINE_ALBUMS_KEY);
return cached ? JSON.parse(cached) : null;
} catch (err) {
console.warn('Failed to get cached albums:', err);
return null;
}
}
// ── Downloaded tracks management ───────────────────────────────────────────────
export async function getDownloadedTracks(): Promise<number[]> {
try {
const raw = await AsyncStorage.getItem(DOWNLOADED_TRACKS_KEY);
return raw ? JSON.parse(raw) : [];
} catch {
return [];
}
}
export async function addDownloadedTrack(trackId: number) {
try {
const ids = await getDownloadedTracks();
if (!ids.includes(trackId)) {
ids.push(trackId);
await AsyncStorage.setItem(DOWNLOADED_TRACKS_KEY, JSON.stringify(ids));
}
} catch (err) {
console.warn('Failed to add downloaded track:', err);
}
}
export async function removeDownloadedTrack(trackId: number) {
try {
let ids = await getDownloadedTracks();
ids = ids.filter(id => id !== trackId);
await AsyncStorage.setItem(DOWNLOADED_TRACKS_KEY, JSON.stringify(ids));
} catch (err) {
console.warn('Failed to remove downloaded track:', err);
}
}
export function getTrackFilePath(trackId: number): string {
return `${DOCUMENTS_DIR}track_${trackId}.mp3`;
}
export async function isTrackDownloaded(trackId: number): Promise<boolean> {
try {
const info = await FileSystem.getInfoAsync(getTrackFilePath(trackId));
return info.exists;
} catch {
return false;
}
}
// ── Track download ───────────────────────────────────────────────────────────
export interface DownloadProgress {
trackId: number;
progress: number;
loaded: number;
total: number;
}
export async function downloadTrack(
track: Track,
onProgress?: (progress: DownloadProgress) => void
): Promise<boolean> {
try {
const filePath = getTrackFilePath(track.id);
const uri = track.cdn_url || track.cdn_url2;
if (!uri) {
console.warn('No download URL for track:', track.id);
return false;
}
// Check if already downloaded
if (await isTrackDownloaded(track.id)) {
await addDownloadedTrack(track.id);
return true;
}
// Download with progress tracking
const downloadResumable = FileSystem.createDownloadResumable(
uri,
filePath,
{},
(progress) => {
const { totalBytesWritten, totalBytesExpectedToDownload } = progress;
onProgress?.({
trackId: track.id,
progress: totalBytesWritten / totalBytesExpectedToDownload,
loaded: totalBytesWritten,
total: totalBytesExpectedToDownload,
});
}
);
const result = await downloadResumable.downloadAsync();
if (result?.uri) {
await addDownloadedTrack(track.id);
return true;
}
return false;
} catch (err) {
console.warn('Failed to download track:', err);
return false;
}
}
export async function deleteTrack(trackId: number): Promise<boolean> {
try {
const filePath = getTrackFilePath(trackId);
const info = await FileSystem.getInfoAsync(filePath);
if (info.exists) {
await FileSystem.deleteAsync(filePath);
await removeDownloadedTrack(trackId);
return true;
}
return false;
} catch (err) {
console.warn('Failed to delete track:', err);
return false;
}
}
export async function getStorageInfo(): Promise<{ used: number; total: number } | null> {
try {
const info = await FileSystem.getInfoAsync(DOCUMENTS_DIR);
if (!info.exists) return null;
// Get all files
const files = await FileSystem.readDirectoryAsync(DOCUMENTS_DIR);
let used = 0;
for (const file of files) {
const fileInfo = await FileSystem.getInfoAsync(`${DOCUMENTS_DIR}${file}`);
if (fileInfo.size) used += fileInfo.size;
}
return { used, total: 5 * 1024 * 1024 * 1024 }; // 5GB limit
} catch {
return null;
}
}

279
store/index.ts
View file

@ -1,109 +1,170 @@
import { create } from 'zustand';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Track, User } from '../services/api';
// ── Player ────────────────────────────────────────────────────────────────────
interface PlayerState {
queue: Track[];
index: number;
playing: boolean;
progress: number;
duration: number;
repeat: 0 | 1 | 2;
shuffle: boolean;
expanded: boolean;
setQueue: (tracks: Track[], index?: number) => void;
setIndex: (i: number) => void;
setPlaying: (v: boolean) => void;
setProgress: (v: number) => void;
setDuration: (v: number) => void;
cycleRepeat: () => void;
toggleShuffle: () => void;
setExpanded: (v: boolean) => void;
nextTrack: () => number;
prevTrack: () => number;
}
export const usePlayer = create<PlayerState>((set, get) => ({
queue: [],
index: -1,
playing: false,
progress: 0,
duration: 0,
repeat: 0,
shuffle: false,
expanded: false,
setQueue: (tracks, index = 0) => set({ queue: tracks, index }),
setIndex: (index) => set({ index }),
setPlaying: (playing) => set({ playing }),
setProgress: (progress) => set({ progress }),
setDuration: (duration) => set({ duration }),
cycleRepeat: () => set((s) => ({ repeat: ((s.repeat + 1) % 3) as 0 | 1 | 2 })),
toggleShuffle: () => set((s) => ({ shuffle: !s.shuffle })),
setExpanded: (expanded) => set({ expanded }),
nextTrack: () => {
const { queue, index, shuffle, repeat } = get();
if (repeat === 2) return index;
if (shuffle) return Math.floor(Math.random() * queue.length);
const next = index + 1;
if (next >= queue.length) return repeat === 1 ? 0 : index;
return next;
},
prevTrack: () => {
const { queue, index, shuffle } = get();
if (shuffle) return Math.floor(Math.random() * queue.length);
return index - 1 < 0 ? queue.length - 1 : index - 1;
},
}));
// ── Auth ──────────────────────────────────────────────────────────────────────
interface AuthState {
user: User | null;
ready: boolean;
setUser: (u: User | null) => void;
setReady: (v: boolean) => void;
}
export const useAuth = create<AuthState>((set) => ({
user: null,
ready: false,
setUser: (user) => set({ user }),
setReady: (ready) => set({ ready }),
}));
// ── Likes ─────────────────────────────────────────────────────────────────────
const LIKES_KEY = 'ns-music-likes';
interface LikesState {
likes: Set<number>;
loadLikes: () => Promise<void>;
toggleLike: (id: number) => void;
isLiked: (id: number) => boolean;
}
export const useLikes = create<LikesState>((set, get) => ({
likes: new Set(),
loadLikes: async () => {
try {
const raw = await AsyncStorage.getItem(LIKES_KEY);
const arr: number[] = raw ? JSON.parse(raw) : [];
set({ likes: new Set(arr) });
} catch {}
},
toggleLike: (id) => {
const next = new Set(get().likes);
if (next.has(id)) next.delete(id); else next.add(id);
set({ likes: next });
AsyncStorage.setItem(LIKES_KEY, JSON.stringify([...next])).catch(() => {});
},
isLiked: (id) => get().likes.has(id),
}));
import { create } from 'zustand';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Track, User } from '../services/api';
// ── Offline / Downloads ───────────────────────────────────────────────────────
interface OfflineState {
downloadedTracks: Set<number>;
downloading: Map<number, number>; // trackId -> progress 0-1
isOnline: boolean;
addDownloadedTrack: (id: number) => void;
removeDownloadedTrack: (id: number) => void;
setDownloading: (id: number, progress: number) => void;
clearDownloading: (id: number) => void;
loadDownloadedTracks: () => Promise<void>;
setOnline: (online: boolean) => void;
}
export const useOffline = create<OfflineState>((set, get) => ({
downloadedTracks: new Set(),
downloading: new Map(),
isOnline: true,
addDownloadedTrack: (id) => {
const next = new Set(get().downloadedTracks);
next.add(id);
set({ downloadedTracks: next });
},
removeDownloadedTrack: (id) => {
const next = new Set(get().downloadedTracks);
next.delete(id);
set({ downloadedTracks: next });
},
setDownloading: (id, progress) => {
const next = new Map(get().downloading);
if (progress >= 1) {
next.delete(id);
} else {
next.set(id, progress);
}
set({ downloading: next });
},
clearDownloading: (id) => {
const next = new Map(get().downloading);
next.delete(id);
set({ downloading: next });
},
loadDownloadedTracks: async () => {
try {
const { getDownloadedTracks } = await import('../services/offline');
const ids = await getDownloadedTracks();
set({ downloadedTracks: new Set(ids) });
} catch (err) {
console.warn('Failed to load downloaded tracks:', err);
}
},
setOnline: (online) => set({ isOnline: online }),
}));
// ── Player ────────────────────────────────────────────────────────────────────
interface PlayerState {
queue: Track[];
index: number;
playing: boolean;
progress: number;
duration: number;
repeat: 0 | 1 | 2;
shuffle: boolean;
expanded: boolean;
setQueue: (tracks: Track[], index?: number) => void;
setIndex: (i: number) => void;
setPlaying: (v: boolean) => void;
setProgress: (v: number) => void;
setDuration: (v: number) => void;
cycleRepeat: () => void;
toggleShuffle: () => void;
setExpanded: (v: boolean) => void;
nextTrack: () => number;
prevTrack: () => number;
}
export const usePlayer = create<PlayerState>((set, get) => ({
queue: [],
index: -1,
playing: false,
progress: 0,
duration: 0,
repeat: 0,
shuffle: false,
expanded: false,
setQueue: (tracks, index = 0) => set({ queue: tracks, index }),
setIndex: (index) => set({ index }),
setPlaying: (playing) => set({ playing }),
setProgress: (progress) => set({ progress }),
setDuration: (duration) => set({ duration }),
cycleRepeat: () => set((s) => ({ repeat: ((s.repeat + 1) % 3) as 0 | 1 | 2 })),
toggleShuffle: () => set((s) => ({ shuffle: !s.shuffle })),
setExpanded: (expanded) => set({ expanded }),
nextTrack: () => {
const { queue, index, shuffle, repeat } = get();
if (repeat === 2) return index;
if (shuffle) return Math.floor(Math.random() * queue.length);
const next = index + 1;
if (next >= queue.length) return repeat === 1 ? 0 : index;
return next;
},
prevTrack: () => {
const { queue, index, shuffle } = get();
if (shuffle) return Math.floor(Math.random() * queue.length);
return index - 1 < 0 ? queue.length - 1 : index - 1;
},
}));
// ── Auth ──────────────────────────────────────────────────────────────────────
interface AuthState {
user: User | null;
ready: boolean;
setUser: (u: User | null) => void;
setReady: (v: boolean) => void;
}
export const useAuth = create<AuthState>((set) => ({
user: null,
ready: false,
setUser: (user) => set({ user }),
setReady: (ready) => set({ ready }),
}));
// ── Likes ─────────────────────────────────────────────────────────────────────
const LIKES_KEY = 'ns-music-likes';
interface LikesState {
likes: Set<number>;
loadLikes: () => Promise<void>;
toggleLike: (id: number) => void;
isLiked: (id: number) => boolean;
}
export const useLikes = create<LikesState>((set, get) => ({
likes: new Set(),
loadLikes: async () => {
try {
const raw = await AsyncStorage.getItem(LIKES_KEY);
const arr: number[] = raw ? JSON.parse(raw) : [];
set({ likes: new Set(arr) });
} catch {}
},
toggleLike: (id) => {
const next = new Set(get().likes);
if (next.has(id)) next.delete(id); else next.add(id);
set({ likes: next });
AsyncStorage.setItem(LIKES_KEY, JSON.stringify([...next])).catch(() => {});
},
isLiked: (id) => get().likes.has(id),
}));

20
tsconfig.json
View file

@ -1,10 +1,10 @@
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}

112
workflows/build-ios.yml
View file

@ -1,56 +1,56 @@
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30

112
workflows/main.yml
View file

@ -1,56 +1,56 @@
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30
name: Build iOS IPA
on:
push:
branches: [main, master]
workflow_dispatch:
jobs:
build:
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node 20
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Expo prebuild
run: npx expo prebuild --platform ios --clean
env:
EXPO_NO_DOTENV: 1
- name: Build unsigned archive
run: |
xcodebuild archive \
-workspace "ios/Burmalda Music.xcworkspace" \
-scheme "Burmalda Music" \
-configuration Release \
-sdk iphoneos \
-archivePath "$RUNNER_TEMP/burmalda.xcarchive" \
CODE_SIGNING_REQUIRED=NO \
CODE_SIGN_IDENTITY="" \
CODE_SIGNING_ALLOWED=NO \
ENABLE_BITCODE=NO \
| xcpretty || true
- name: Package IPA
run: |
mkdir -p Payload
cp -r "$RUNNER_TEMP/burmalda.xcarchive/Products/Applications/"*.app Payload/
zip -qr burmalda-unsigned.ipa Payload
rm -rf Payload
- name: Upload IPA artifact
uses: actions/upload-artifact@v4
with:
name: burmalda-unsigned-ipa
path: burmalda-unsigned.ipa
retention-days: 30