Initial commit: LiveStream Platform
Backend: FastAPI + SQLAlchemy + SQLite Frontend: React + Vite + Ant Design (serif Anthropic theme) Media server: MediaMTX with edge node support Load balancing: round-robin / weighted / least-conn Multicast detection with automatic fallback Transcoding support via FFmpeg (configurable quality) hls.js player with line & quality switching Admin panel with password auth Windows compatible scripts
This commit is contained in:
admin committed
commit
2e4594fa77
43 files changed
+2196
No files matched your search
@@ -0,0 +1,207 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import {
|
||||
Layout, Card, Select, Button, Typography, Space, Tag, Spin, Skeleton, Empty, message,
|
||||
} from 'antd'
|
||||
import { ArrowLeftOutlined, WifiOutlined, SignalFilled } from '@ant-design/icons'
|
||||
import Hls from 'hls.js'
|
||||
import { getWatchUrls, type WatchInfo, type LineInfo } from '../../api/streams'
|
||||
|
||||
const { Header, Content } = Layout
|
||||
const { Title, Text } = Typography
|
||||
|
||||
export default function WatchPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const videoRef = useRef<HTMLVideoElement>(null)
|
||||
const [info, setInfo] = useState<WatchInfo | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [activeLine, setActiveLine] = useState<string>('')
|
||||
const [activeQuality, setActiveQuality] = useState<string>('')
|
||||
const [hls, setHls] = useState<Hls | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
loadInfo()
|
||||
const timer = setInterval(loadInfo, 15000)
|
||||
return () => {
|
||||
clearInterval(timer)
|
||||
if (hls) { hls.destroy() }
|
||||
}
|
||||
}, [id])
|
||||
|
||||
async function loadInfo() {
|
||||
if (!id) return
|
||||
try {
|
||||
const data = await getWatchUrls(parseInt(id))
|
||||
setInfo(data)
|
||||
if (!activeLine && data.lines.length > 0) {
|
||||
const best = autoSelectLine(data.lines)
|
||||
setActiveLine(best.node_id)
|
||||
if (data.qualities.length > 0) {
|
||||
setActiveQuality(data.qualities[0].label)
|
||||
}
|
||||
}
|
||||
} catch { /* stream not ready */ }
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
function autoSelectLine(lines: LineInfo[]): LineInfo {
|
||||
const enabled = lines.filter((l) => l.weight > 0)
|
||||
if (enabled.length === 0) return lines[0]
|
||||
|
||||
const total = enabled.reduce((s, l) => s + l.weight, 0)
|
||||
let r = Math.random() * total
|
||||
for (const line of enabled) {
|
||||
r -= line.weight
|
||||
if (r <= 0) return line
|
||||
}
|
||||
return enabled[enabled.length - 1]
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!info || !activeLine || !videoRef.current) return
|
||||
|
||||
const line = info.lines.find((l) => l.node_id === activeLine)
|
||||
if (!line) return
|
||||
|
||||
const quality = activeQuality
|
||||
? line.qualities.find((q) => q.label === activeQuality)
|
||||
: line.qualities[0]
|
||||
|
||||
if (!quality) return
|
||||
|
||||
if (hls) {
|
||||
hls.destroy()
|
||||
}
|
||||
|
||||
const url = quality.url
|
||||
if (Hls.isSupported()) {
|
||||
const hlsInstance = new Hls({
|
||||
enableWorker: false,
|
||||
lowLatencyMode: false,
|
||||
})
|
||||
hlsInstance.loadSource(url)
|
||||
hlsInstance.attachMedia(videoRef.current!)
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
videoRef.current?.play().catch(() => {})
|
||||
})
|
||||
hlsInstance.on(Hls.Events.ERROR, (_event, data) => {
|
||||
if (data.fatal) {
|
||||
message.warning('Playback error, trying fallback...')
|
||||
if (line.unicast_fallback) {
|
||||
const fbUrl = activeQuality
|
||||
? line.unicast_fallback.replace('index.m3u8', `${activeQuality}/index.m3u8`)
|
||||
: line.unicast_fallback
|
||||
hlsInstance.loadSource(fbUrl)
|
||||
}
|
||||
}
|
||||
})
|
||||
setHls(hlsInstance)
|
||||
} else if (videoRef.current!.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
videoRef.current!.src = url
|
||||
}
|
||||
}, [activeLine, activeQuality, info])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#000' }}>
|
||||
<Skeleton active />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!info) {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#FAF8F5' }}>
|
||||
<Empty description="Stream not found" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh', background: '#1A1A16' }}>
|
||||
<Header style={{
|
||||
background: 'rgba(26,26,22,0.95)',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.08)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
height: 56,
|
||||
}}>
|
||||
<Space>
|
||||
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#fff' }}
|
||||
onClick={() => window.close()}>
|
||||
Back
|
||||
</Button>
|
||||
<div>
|
||||
<Title level={5} style={{ color: '#fff', margin: 0 }}>
|
||||
{info.title}
|
||||
</Title>
|
||||
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8 }}>
|
||||
{info.status === 'live' ? 'LIVE' : info.status}
|
||||
</Tag>
|
||||
</div>
|
||||
</Space>
|
||||
<Space size="middle">
|
||||
<div style={{ color: '#aaa', fontSize: 13 }}>
|
||||
<SignalFilled style={{ color: info.multicast_available ? '#52c41a' : '#666', marginRight: 4 }} />
|
||||
{info.multicast_available ? 'Multicast' : 'Unicast'}
|
||||
</div>
|
||||
<Select
|
||||
value={activeQuality}
|
||||
onChange={setActiveQuality}
|
||||
style={{ width: 100 }}
|
||||
size="small"
|
||||
options={info.qualities.map((q) => ({ value: q.label, label: q.label }))}
|
||||
popupMatchSelectWidth={false}
|
||||
/>
|
||||
<Select
|
||||
value={activeLine}
|
||||
onChange={setActiveLine}
|
||||
style={{ width: 140 }}
|
||||
size="small"
|
||||
options={info.lines.map((l) => ({
|
||||
value: l.node_id,
|
||||
label: `${l.node_name} (${l.weight})`,
|
||||
}))}
|
||||
popupMatchSelectWidth={false}
|
||||
prefix={<WifiOutlined />}
|
||||
/>
|
||||
</Space>
|
||||
</Header>
|
||||
<Content style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
maxHeight: 'calc(100vh - 56px)',
|
||||
}}>
|
||||
<div style={{ width: '100%', maxWidth: 1280, aspectRatio: '16/9', background: '#000', position: 'relative' }}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
controls
|
||||
autoPlay
|
||||
playsInline
|
||||
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
|
||||
/>
|
||||
{info.status !== 'live' && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
}}>
|
||||
<Space direction="vertical" align="center">
|
||||
<Spin size="large" />
|
||||
<Text style={{ color: '#fff' }}>Waiting for stream to start...</Text>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user