60 lines
2.8 KiB
TypeScript
60 lines
2.8 KiB
TypeScript
import { View, Text, TouchableOpacity, ScrollView } from 'react-native'
|
||
import { useRouter } from 'expo-router'
|
||
import { usePlayerStore } from '../src/store/playerStore'
|
||
import { BottomNavBar } from '../src/components/BottomNavBar'
|
||
|
||
export default function SharePlayScreen() {
|
||
const router = useRouter()
|
||
const currentSong = usePlayerStore(s => s.currentSong)
|
||
const isPlaying = usePlayerStore(s => s.isPlaying)
|
||
const togglePlay = usePlayerStore(s => s.togglePlay)
|
||
|
||
return (
|
||
<View className="flex-1 bg-music-black">
|
||
<ScrollView className="flex-1 px-4 pt-4">
|
||
<View className="flex-row items-center justify-between mb-6">
|
||
<TouchableOpacity onPress={() => router.push('/account' as any)} className="w-10 h-10 rounded-full bg-music-card items-center justify-center">
|
||
<Text className="text-music-muted">👤</Text>
|
||
</TouchableOpacity>
|
||
<Text className="text-xl font-semibold text-music-text">SharePlay</Text>
|
||
<View className="w-10" />
|
||
</View>
|
||
</ScrollView>
|
||
|
||
<View className="bg-music-card rounded-t-2xl p-4 mx-4">
|
||
<View className="w-12 h-1 bg-music-border rounded-full mx-auto mb-4" />
|
||
<View className="flex-row items-center justify-between mb-3">
|
||
<Text className="text-music-accent">📢</Text>
|
||
<View className="flex-row items-center gap-1">
|
||
<Text className="text-music-muted">👤</Text>
|
||
<Text className="text-sm text-music-muted">1</Text>
|
||
</View>
|
||
</View>
|
||
<Text className="text-xs text-music-muted mb-1">Currently Playing</Text>
|
||
<View className="flex-row items-center gap-3 mb-3">
|
||
<View className="w-12 h-12 rounded-full bg-music-vinyl" />
|
||
<View>
|
||
<Text className="font-medium text-sm text-music-text">{currentSong?.title || 'No song'}</Text>
|
||
<Text className="text-xs text-music-muted">{currentSong?.artist}</Text>
|
||
</View>
|
||
</View>
|
||
<View className="flex-row items-center justify-center gap-4">
|
||
<Text className="text-music-muted">⏮️</Text>
|
||
<Text className="text-music-muted">⏪</Text>
|
||
<TouchableOpacity onPress={togglePlay}>
|
||
<Text className="text-music-accent text-2xl">{isPlaying ? '⏸' : '▶️'}</Text>
|
||
</TouchableOpacity>
|
||
<Text className="text-music-muted">⏩</Text>
|
||
<Text className="text-music-muted">⏭️</Text>
|
||
</View>
|
||
<View className="mt-3 pt-3 border-t border-music-border">
|
||
<Text className="text-xs text-music-muted">Up Next</Text>
|
||
</View>
|
||
<TouchableOpacity className="mt-3 py-2 rounded-full bg-music-dark items-center">
|
||
<Text className="text-music-text text-sm flex-row">➕ Add Song to Cue</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<BottomNavBar />
|
||
</View>
|
||
)
|
||
} |