File size: 1,896 Bytes
84121fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React, { useEffect, useState } from 'react'
import { useChannels } from '../contexts/ChannelContext'
import ChannelList from './ChannelList'
import VideoPlayer from './VideoPlayer'
import Header from './Header'
import LoadingSpinner from './LoadingSpinner'
export default function MainInterface() {
const { refreshChannels, isLoading, error, currentChannel } = useChannels()
const [showChannelList, setShowChannelList] = useState(true)
useEffect(() => {
refreshChannels()
}, [])
if (isLoading && !currentChannel) {
return <LoadingSpinner />
}
return (
<div className="min-h-screen bg-gray-900 flex flex-col">
<Header
onToggleChannelList={() => setShowChannelList(!showChannelList)}
showChannelList={showChannelList}
/>
<div className="flex-1 flex overflow-hidden">
{showChannelList && (
<div className="w-80 border-r border-gray-700 flex-shrink-0">
<ChannelList onChannelSelect={() => setShowChannelList(false)} />
</div>
)}
<div className="flex-1 flex flex-col">
{currentChannel ? (
<VideoPlayer channel={currentChannel} />
) : (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="text-6xl mb-4">📺</div>
<h2 className="text-2xl font-semibold text-white mb-2">
Selecciona un canal
</h2>
<p className="text-gray-400">
Elige un canal de la lista para comenzar a ver
</p>
</div>
</div>
)}
</div>
</div>
{error && (
<div className="bg-red-900/50 border-t border-red-700 text-red-300 px-4 py-3 text-sm">
{error}
</div>
)}
</div>
)
} |