import React, { useState } from 'react'; import { Tv, Link } from 'lucide-react'; import VideoPlayer from './components/VideoPlayer'; import ChannelList from './components/ChannelList'; import { parseM3U } from './utils/m3uParser'; interface Channel { name: string; url: string; } function App() { const [m3uUrl, setM3uUrl] = useState(''); const [channels, setChannels] = useState([]); const [selectedChannel, setSelectedChannel] = useState(); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const handleLoadPlaylist = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setError(''); try { const parsedChannels = await parseM3U(m3uUrl); if (parsedChannels.length === 0) { throw new Error('No channels found in the playlist'); } setChannels(parsedChannels); setSelectedChannel(undefined); } catch (err) { setError('Failed to load playlist. Please check the URL and try again.'); } finally { setLoading(false); } }; return (
{/* Header */}

M3U Stream Player

{/* URL Input Form */}
setM3uUrl(e.target.value)} placeholder="Enter M3U playlist URL" className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required />
{error && (

{error}

)}
{/* Main Content */} {channels.length > 0 && (
{/* Channel List */}
{/* Video Player */}
{selectedChannel ? (

{selectedChannel.name}

) : (

No Channel Selected

Select a channel from the list to start watching

)}
)}
); } export default App;

Comments

Popular posts from this blog

Business Services 2024: Transforming the Corporate Landscape

Trends and Innovations Shaping 2024

Mastering Forex Trading Strategies: A Comprehensive Guide