Jarian Cottingham
7e09799859
- Add auth middleware (API key) to protect API routes (#5, #7) - Add WebSocket handlers and cleanup on disconnect (#3, #8) - Add web Dockerfile (#1) - Fix memory upload with streaming chunks (#10) - Move lofi seed to startup, remove per-request seeding (#9) - Document ffmpeg dependency in README and .env.example (#6) - Fill in mobile app with API-connected UI (#4) - Set GENIUS_API_KEY from env var with documentation (#2)
93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import { View, Text, ScrollView, TouchableOpacity, TextInput, ActivityIndicator } from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { BottomNavBar } from '../src/components/BottomNavBar'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export default function RadioScreen() {
|
|
const router = useRouter()
|
|
const [stations, setStations] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [search, setSearch] = useState('')
|
|
|
|
useEffect(() => {
|
|
fetchStations()
|
|
}, [])
|
|
|
|
const fetchStations = async () => {
|
|
try {
|
|
const res = await fetch('/api/radio/stations?limit=20')
|
|
const data = await res.json()
|
|
setStations(data.items || data || [])
|
|
} catch {
|
|
setStations([])
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const filtered = stations.filter(s => s.name?.toLowerCase().includes(search.toLowerCase()))
|
|
|
|
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">Internet Radio</Text>
|
|
<View className="w-10" />
|
|
</View>
|
|
|
|
<View className="flex-row items-center bg-music-card rounded-full px-4 py-3 mb-6">
|
|
<Text className="text-music-muted">🔍</Text>
|
|
<TextInput
|
|
placeholder="Search stations..."
|
|
placeholderTextColor="#888"
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
className="text-sm text-music-text ml-2 flex-1"
|
|
/>
|
|
</View>
|
|
|
|
{loading ? (
|
|
<View className="items-center py-8">
|
|
<ActivityIndicator size="large" color="#e94560" />
|
|
<Text className="text-music-muted mt-2">Loading stations...</Text>
|
|
</View>
|
|
) : (
|
|
<>
|
|
<View className="mb-6 p-4 rounded-2xl bg-music-card">
|
|
<Text className="text-sm font-semibold text-music-text mb-3">Browse Stations</Text>
|
|
<View className="flex-wrap flex-row gap-4">
|
|
{filtered.map((station: any) => (
|
|
<TouchableOpacity
|
|
key={station.id}
|
|
className="w-32 p-3 rounded-xl bg-music-dark items-center"
|
|
>
|
|
<View className="w-16 h-16 rounded-full bg-music-vinyl mb-2 items-center justify-center">
|
|
<Text>📻</Text>
|
|
</View>
|
|
<Text className="text-xs text-music-text text-center" numberOfLines={2}>
|
|
{station.name || 'Station'}
|
|
</Text>
|
|
<Text className="text-xs text-music-muted mt-1">
|
|
{station.country_code || 'Local'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
{filtered.length === 0 && (
|
|
<View className="items-center py-8">
|
|
<Text className="text-3xl mb-2">📻</Text>
|
|
<Text className="text-music-muted">No stations found</Text>
|
|
</View>
|
|
)}
|
|
</>
|
|
)}
|
|
</ScrollView>
|
|
<BottomNavBar />
|
|
</View>
|
|
)
|
|
}
|