Jarian Cottingham
404fe78748
React Native app for the self-hosted music streaming project, carved out from the music-app monorepo. Uses @music-app/shared for shared types and utilities.
51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
import { View, Text, TouchableOpacity, ScrollView } from 'react-native'
|
||
import { useRouter } from 'expo-router'
|
||
import { useState } from 'react'
|
||
import { usePlayerStore } from '../src/store/playerStore'
|
||
|
||
const MOODS = [
|
||
{ id: 'sad', name: 'Sad', color: '#1a2a4a' },
|
||
{ id: 'happy', name: 'Happy', color: '#f5c542' },
|
||
{ id: 'energetic', name: 'Energetic', color: '#e63946' },
|
||
{ id: 'focused', name: 'Focused', color: '#2d6a4f' },
|
||
{ id: 'chill', name: 'Chill', color: '#48957e' },
|
||
{ id: 'romantic', name: 'Romantic', color: '#bc6a7e' },
|
||
{ id: 'angry', name: 'Angry', color: '#9d0208' },
|
||
{ id: 'nostalgic', name: 'Nostalgic', color: '#a67c52' },
|
||
{ id: 'melancholy', name: 'Melancholy', color: '#5a189c' },
|
||
{ id: 'dreamy', name: 'Dreamy', color: '#9b5de5' },
|
||
]
|
||
|
||
export default function MoodScreen() {
|
||
const [activeMood, setActiveMood] = useState(MOODS[0])
|
||
const isPlaying = usePlayerStore(s => s.isPlaying)
|
||
const togglePlay = usePlayerStore(s => s.togglePlay)
|
||
|
||
return (
|
||
<View className="flex-1 justify-between py-8 px-6" style={{ backgroundColor: activeMood.color + '20' }}>
|
||
<View className="flex-row items-center justify-between">
|
||
<View className="w-10" />
|
||
<Text className="text-xl font-semibold text-music-text">Mood Radio</Text>
|
||
<View className="w-10" />
|
||
</View>
|
||
|
||
<View className="items-center">
|
||
<View className="w-48 h-48 rounded-full items-center justify-center" style={{ backgroundColor: activeMood.color + '40' }}>
|
||
<Text className="text-6xl">🎵</Text>
|
||
</View>
|
||
<Text className="text-2xl font-semibold text-music-text mt-6">{activeMood.name}</Text>
|
||
</View>
|
||
|
||
<View className="items-center gap-3">
|
||
<Text className="text-xs text-music-muted uppercase tracking-wider">Currently Playing</Text>
|
||
<Text className="text-music-muted text-xl">⬆️</Text>
|
||
<TouchableOpacity
|
||
onPress={() => setActiveMood(MOODS[Math.floor(Math.random() * MOODS.length)])}
|
||
className="px-8 py-3 rounded-full bg-music-card"
|
||
>
|
||
<Text className="text-sm font-medium text-music-text">Set the Mood</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
)
|
||
} |