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
2026-08-07 15:02:07 +08:00
commit 2e4594fa77
@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react'
+import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd'
+import { VideoCameraOutlined, EyeOutlined, CloudServerOutlined, SignalFilled } from '@ant-design/icons'
+import { fetchStreams, type StreamInfo } from '../../api/streams'
+
+const { Title } = Typography
+
+export default function Dashboard() {
+  const [streams, setStreams] = useState<StreamInfo[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadData()
+    const timer = setInterval(loadData, 10000)
+    return () => clearInterval(timer)
+  }, [])
+
+  async function loadData() {
+    try {
+      const data = await fetchStreams()
+      setStreams(data)
+    } catch { /* ignore */ }
+    setLoading(false)
+  }
+
+  const liveCount = streams.filter((s) => s.status === 'live').length
+  const pendingCount = streams.filter((s) => s.status === 'pending').length
+  const endedCount = streams.filter((s) => s.status === 'ended').length
+
+  const statusMap: Record<string, { color: string; label: string }> = {
+    pending: { color: 'blue', label: 'Pending' },
+    live: { color: 'green', label: 'Live' },
+    ended: { color: 'default', label: 'Ended' },
+    cancelled: { color: 'red', label: 'Cancelled' },
+  }
+
+  const recentColumns = [
+    { title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
+    {
+      title: 'Status', dataIndex: 'status', key: 'status',
+      render: (status: string) => {
+        const s = statusMap[status] || { color: 'default', label: status }
+        return <Tag color={s.color}>{s.label}</Tag>
+      },
+    },
+    { title: 'Created', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16) },
+  ]
+
+  return (
+    <div>
+      <Title level={3} style={{ marginBottom: 24 }}>Dashboard</Title>
+      <Row gutter={[24, 24]}>
+        <Col xs={24} sm={8}>
+          <Card>
+            <Statistic
+              title="Live Streams"
+              value={liveCount}
+              prefix={<SignalFilled style={{ color: '#52c41a' }} />}
+              loading={loading}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={8}>
+          <Card>
+            <Statistic
+              title="Pending"
+              value={pendingCount}
+              prefix={<VideoCameraOutlined style={{ color: '#1677ff' }} />}
+              loading={loading}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={8}>
+          <Card>
+            <Statistic
+              title="Total Streams"
+              value={streams.length}
+              prefix={<EyeOutlined />}
+              loading={loading}
+            />
+          </Card>
+        </Col>
+      </Row>
+      <Card title="Recent Streams" style={{ marginTop: 24 }}>
+        <Table
+          dataSource={streams.slice(0, 10)}
+          columns={recentColumns}
+          rowKey="id"
+          loading={loading}
+          pagination={false}
+          size="middle"
+        />
+      </Card>
+    </div>
+  )
+}
@@ -0,0 +1,144 @@
+import { useState, useEffect } from 'react'
+import {
+  Card, Table, InputNumber, Switch, Typography, message, Space, Tag, Statistic, Row, Col, Button,
+} from 'antd'
+import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import api from '../../api/client'
+
+const { Title, Text } = Typography
+
+interface NodeInfo {
+  id: string
+  name: string
+  host: string
+  hls_port: number
+  api_port: number
+  weight: number
+  enabled: boolean
+}
+
+interface StrategyInfo {
+  strategy: string
+  multicast_enabled: boolean
+  multicast_available: boolean
+}
+
+export default function NodeManager() {
+  const [nodes, setNodes] = useState<NodeInfo[]>([])
+  const [strategy, setStrategy] = useState<StrategyInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => { loadData() }, [])
+
+  async function loadData() {
+    setLoading(true)
+    try {
+      const [nodesRes, strategyRes] = await Promise.all([
+        api.get('/nodes'),
+        api.get('/nodes/strategy'),
+      ])
+      setNodes(nodesRes.data)
+      setStrategy(strategyRes.data)
+    } catch { message.error('Failed to load') }
+    setLoading(false)
+  }
+
+  async function updateWeight(nodeId: string, weight: number) {
+    try {
+      await api.put(`/nodes/${nodeId}`, { weight })
+      message.success('Updated')
+    } catch { message.error('Failed') }
+  }
+
+  async function toggleNode(nodeId: string, enabled: boolean) {
+    const node = nodes.find((n) => n.id === nodeId)
+    if (!node) return
+    try {
+      await api.put(`/nodes/${nodeId}`, { weight: node.weight, enabled })
+      setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, enabled } : n)))
+      message.success('Updated')
+    } catch { message.error('Failed') }
+  }
+
+  const columns = [
+    { title: 'Name', dataIndex: 'name', key: 'name' },
+    { title: 'Host', dataIndex: 'host', key: 'host' },
+    { title: 'HLS Port', dataIndex: 'hls_port', key: 'hls_port', width: 100 },
+    { title: 'API Port', dataIndex: 'api_port', key: 'api_port', width: 100 },
+    {
+      title: 'Weight', dataIndex: 'weight', key: 'weight', width: 140,
+      render: (_: number, record: NodeInfo) => (
+        <InputNumber
+          min={0}
+          max={1000}
+          value={record.weight}
+          onChange={(val) => {
+            const v = val || 0
+            setNodes((prev) => prev.map((n) => (n.id === record.id ? { ...n, weight: v } : n)))
+            updateWeight(record.id, v)
+          }}
+          size="small"
+          style={{ width: 90 }}
+        />
+      ),
+    },
+    {
+      title: 'Enabled', dataIndex: 'enabled', key: 'enabled', width: 90,
+      render: (_: any, record: NodeInfo) => (
+        <Switch
+          checked={record.enabled}
+          onChange={(val) => toggleNode(record.id, val)}
+          size="small"
+        />
+      ),
+    },
+    {
+      title: 'Health', key: 'health', width: 100,
+      render: () => <Tag icon={<CheckCircleOutlined />} color="success">Online</Tag>,
+    },
+  ]
+
+  return (
+    <div>
+      <Title level={3} style={{ marginBottom: 24 }}>Edge Nodes</Title>
+
+      {strategy && (
+        <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+          <Col xs={24} sm={8}>
+            <Card>
+              <Statistic title="Strategy" value={strategy.strategy} />
+            </Card>
+          </Col>
+          <Col xs={24} sm={8}>
+            <Card>
+              <Statistic
+                title="Multicast"
+                value={strategy.multicast_available ? 'Available' : 'Unavailable'}
+                valueStyle={{ color: strategy.multicast_available ? '#52c41a' : '#999' }}
+              />
+            </Card>
+          </Col>
+          <Col xs={24} sm={8}>
+            <Card>
+              <Statistic title="Edge Nodes" value={nodes.length} />
+            </Card>
+          </Col>
+        </Row>
+      )}
+
+      <Card
+        title="Node List"
+        extra={<Button icon={<ReloadOutlined />} onClick={loadData}>Refresh</Button>}
+      >
+        <Table
+          dataSource={nodes}
+          columns={columns}
+          rowKey="id"
+          loading={loading}
+          pagination={false}
+          size="middle"
+        />
+      </Card>
+    </div>
+  )
+}
@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react'
+import {
+  Card, Select, Switch, Typography, message, Space, Descriptions, Button,
+} from 'antd'
+import api from '../../api/client'
+
+const { Title } = Typography
+
+const strategies = [
+  { value: 'round-robin', label: 'Round Robin' },
+  { value: 'weighted', label: 'Weighted' },
+  { value: 'least-conn', label: 'Least Connections' },
+]
+
+export default function SettingsPage() {
+  const [strategy, setStrategy] = useState('weighted')
+  const [multicastEnabled, setMulticastEnabled] = useState(true)
+  const [multicastAvailable, setMulticastAvailable] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    loadSettings()
+  }, [])
+
+  async function loadSettings() {
+    try {
+      const { data } = await api.get('/nodes/strategy')
+      setStrategy(data.strategy)
+      setMulticastEnabled(data.multicast_enabled)
+      setMulticastAvailable(data.multicast_available)
+    } catch { /* ignore */ }
+  }
+
+  async function saveStrategy(val: string) {
+    setSaving(true)
+    try {
+      await api.put(`/nodes/strategy?strategy=${val}&multicast_enabled=${multicastEnabled}`)
+      setStrategy(val)
+      message.success('Strategy updated')
+    } catch { message.error('Failed') }
+    setSaving(false)
+  }
+
+  async function toggleMulticast(val: boolean) {
+    setMulticastEnabled(val)
+    try {
+      await api.put(`/nodes/strategy?strategy=${strategy}&multicast_enabled=${val}`)
+      message.success('Multicast setting updated')
+    } catch { message.error('Failed') }
+  }
+
+  return (
+    <div style={{ maxWidth: 720 }}>
+      <Title level={3} style={{ marginBottom: 24 }}>Settings</Title>
+
+      <Card title="Load Balancing" style={{ marginBottom: 24 }}>
+        <Descriptions column={1} labelStyle={{ width: 180 }}>
+          <Descriptions.Item label="Strategy">
+            <Select
+              value={strategy}
+              onChange={saveStrategy}
+              options={strategies}
+              loading={saving}
+              style={{ width: 240 }}
+            />
+          </Descriptions.Item>
+        </Descriptions>
+      </Card>
+
+      <Card title="Multicast">
+        <Descriptions column={1} labelStyle={{ width: 180 }}>
+          <Descriptions.Item label="Enable Multicast">
+            <Switch checked={multicastEnabled} onChange={toggleMulticast} />
+          </Descriptions.Item>
+          <Descriptions.Item label="Network Status">
+            <span style={{ color: multicastAvailable ? '#52c41a' : '#999' }}>
+              {multicastAvailable ? 'Available' : 'Unavailable (fallback to unicast)'}
+            </span>
+          </Descriptions.Item>
+        </Descriptions>
+      </Card>
+    </div>
+  )
+}
@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert, Divider,
+} from 'antd'
+import { CopyOutlined, ArrowLeftOutlined } from '@ant-design/icons'
+import { createStream } from '../../api/streams'
+
+const { Title, Text } = Typography
+const { TextArea } = Input
+
+export default function StreamForm() {
+  const [loading, setLoading] = useState(false)
+  const [result, setResult] = useState<{ rtmp_url: string; stream_key: string } | null>(null)
+  const navigate = useNavigate()
+
+  const handleSubmit = async (values: any) => {
+    setLoading(true)
+    try {
+      const res = await createStream({
+        title: values.title,
+        description: values.description,
+        cover_url: values.cover_url,
+        scheduled_at: values.scheduled_at?.toISOString(),
+      })
+      setResult({ rtmp_url: res.rtmp_url, stream_key: res.stream_key })
+      message.success('Stream created')
+    } catch {
+      message.error('Failed to create stream')
+    }
+    setLoading(false)
+  }
+
+  if (result) {
+    return (
+      <div style={{ maxWidth: 640 }}>
+        <Title level={3} style={{ marginBottom: 24 }}>Stream Created</Title>
+        <Alert
+          type="success"
+          message="Your stream is ready"
+          description={
+            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+              <div>
+                <Text strong>Stream Key (UUID):</Text>
+                <div style={{
+                  marginTop: 8, padding: 12,
+                  background: '#F5F2EE', borderRadius: 6,
+                  fontFamily: 'monospace', fontSize: 14,
+                  wordBreak: 'break-all',
+                }}>
+                  {result.stream_key}
+                </div>
+              </div>
+              <div>
+                <Text strong>RTMP Push URL:</Text>
+                <div style={{
+                  marginTop: 8, padding: 12,
+                  background: '#F5F2EE', borderRadius: 6,
+                  fontFamily: 'monospace', fontSize: 14,
+                  wordBreak: 'break-all',
+                }}>
+                  {result.rtmp_url}
+                </div>
+              </div>
+            </Space>
+          }
+          showIcon
+          style={{ marginBottom: 24 }}
+        />
+        <Space>
+          <Button
+            icon={<CopyOutlined />}
+            onClick={() => {
+              navigator.clipboard.writeText(
+                `Stream Key: ${result.stream_key}\nRTMP URL: ${result.rtmp_url}`
+              )
+              message.success('Copied to clipboard')
+            }}
+          >
+            Copy All
+          </Button>
+          <Button type="primary" onClick={() => navigate('/admin/streams')}>
+            Back to Streams
+          </Button>
+        </Space>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ maxWidth: 640 }}>
+      <Button
+        type="text"
+        icon={<ArrowLeftOutlined />}
+        onClick={() => navigate('/admin/streams')}
+        style={{ marginBottom: 16 }}
+      >
+        Back
+      </Button>
+      <Card>
+        <Title level={3} style={{ marginBottom: 24 }}>New Stream</Title>
+        <Form layout="vertical" onFinish={handleSubmit}>
+          <Form.Item
+            name="title"
+            label="Title"
+            rules={[{ required: true, message: 'Enter a title' }]}
+          >
+            <Input placeholder="Stream title" size="large" />
+          </Form.Item>
+          <Form.Item name="description" label="Description">
+            <TextArea rows={3} placeholder="Stream description (optional)" />
+          </Form.Item>
+          <Form.Item name="cover_url" label="Cover Image URL">
+            <Input placeholder="https://..." />
+          </Form.Item>
+          <Form.Item name="scheduled_at" label="Scheduled Time">
+            <DatePicker showTime style={{ width: '100%' }} size="large" />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" loading={loading} size="large" block>
+              Create Stream
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  )
+}
@@ -0,0 +1,123 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Table, Button, Tag, Space, Modal, Typography, message, Tooltip, Popconfirm,
+} from 'antd'
+import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
+import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '../../api/streams'
+
+const { Title, Text } = Typography
+
+const statusMap: Record<string, { color: string; label: string }> = {
+  pending: { color: 'blue', label: 'Pending' },
+  live: { color: 'green', label: 'Live' },
+  ended: { color: 'default', label: 'Ended' },
+  cancelled: { color: 'red', label: 'Cancelled' },
+}
+
+export default function StreamList() {
+  const [streams, setStreams] = useState<StreamInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const navigate = useNavigate()
+
+  useEffect(() => { loadData() }, [])
+
+  async function loadData() {
+    setLoading(true)
+    try {
+      const data = await fetchStreams()
+      setStreams(data)
+    } catch { message.error('Failed to load streams') }
+    setLoading(false)
+  }
+
+  async function handleDelete(id: number) {
+    try {
+      await deleteStream(id)
+      message.success('Stream deleted')
+      loadData()
+    } catch { message.error('Delete failed') }
+  }
+
+  async function handleGoLive(id: number) {
+    try {
+      await goLive(id)
+      message.success('Stream is now live')
+      loadData()
+    } catch { message.error('Failed to set live') }
+  }
+
+  async function handleEnd(id: number) {
+    try {
+      await endStream(id)
+      message.success('Stream ended')
+      loadData()
+    } catch { message.error('Failed to end') }
+  }
+
+  const columns = [
+    { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+    { title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
+    {
+      title: 'Status', dataIndex: 'status', key: 'status', width: 110,
+      render: (s: string) => {
+        const info = statusMap[s] || { color: 'default', label: s }
+        return <Tag color={info.color}>{info.label}</Tag>
+      },
+    },
+    { title: 'Created', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
+    {
+      title: 'Actions', key: 'actions', width: 280,
+      render: (_: any, record: StreamInfo) => (
+        <Space size="small">
+          <Button
+            size="small"
+            icon={<LinkOutlined />}
+            onClick={() => {
+              navigator.clipboard.writeText(record.stream_key)
+              message.success('Stream key copied')
+            }}
+          >
+            Copy Key
+          </Button>
+          {record.status !== 'live' ? (
+            <Tooltip title="Mark as live">
+              <Button size="small" type="primary" icon={<PlayCircleOutlined />}
+                onClick={() => handleGoLive(record.id)} ghost />
+            </Tooltip>
+          ) : (
+            <Tooltip title="End stream">
+              <Button size="small" icon={<StopOutlined />}
+                onClick={() => handleEnd(record.id)} danger />
+            </Tooltip>
+          )}
+          <Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
+            Watch
+          </Button>
+          <Popconfirm title="Delete this stream?" onConfirm={() => handleDelete(record.id)}>
+            <Button size="small" icon={<DeleteOutlined />} danger />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+        <Title level={3} style={{ margin: 0 }}>Streams</Title>
+        <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>
+          New Stream
+        </Button>
+      </div>
+      <Table
+        dataSource={streams}
+        columns={columns}
+        rowKey="id"
+        loading={loading}
+        pagination={{ pageSize: 15 }}
+        size="middle"
+      />
+    </div>
+  )
+}