品牌化设置 + Claude米色衬线体主题 + 全站中文
- 品牌设置API: GET/PUT /api/settings/brand (名称/标语/Logo) - 管理页系统设置: 品牌编辑器表单(名称/标语/Logo URL) - 恢复Anthropic风格: 米色(#FBF9F6) 底色, Source Serif 4 + Noto Serif SC 衬线体 - 暖棕(#C2693A) 主色调, 更充裕的间距与留白, 庄重大气 - 全站中文: antd zhCN locale, 所有页面文本汉化 - 数据存储在 Config singleton, 运行时更新
This commit is contained in:
1 parent
409e5d314e
commit
efde5597bd
16 files changed
+403
-672
No files matched your search
@@ -38,6 +38,10 @@ class Settings(BaseSettings):
|
||||
multicast_address_base: str = "239.0.0.1"
|
||||
multicast_port_base: int = 5000
|
||||
|
||||
brand_name: str = "StreamCore"
|
||||
brand_tagline: str = "Enterprise Streaming Platform"
|
||||
brand_logo_url: str = ""
|
||||
|
||||
model_config = {"env_prefix": "LS_"}
|
||||
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import httpx
|
||||
from database import init_db
|
||||
from services.transcoder import transcode_mgr
|
||||
from routes import streams_router, nodes_router, auth_router
|
||||
from routes.settings_route import router as settings_router
|
||||
from config import settings
|
||||
|
||||
|
||||
@@ -32,6 +33,7 @@ app.add_middleware(
|
||||
app.include_router(streams_router)
|
||||
app.include_router(nodes_router)
|
||||
app.include_router(auth_router)
|
||||
app.include_router(settings_router)
|
||||
|
||||
|
||||
@app.get("/api/health")
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
from fastapi import APIRouter, Depends
|
||||
from pydantic import BaseModel
|
||||
from typing import Optional
|
||||
from config import settings
|
||||
from routes.auth import require_auth
|
||||
|
||||
router = APIRouter(prefix="/api/settings", tags=["settings"])
|
||||
|
||||
|
||||
class BrandUpdate(BaseModel):
|
||||
brand_name: Optional[str] = None
|
||||
brand_tagline: Optional[str] = None
|
||||
brand_logo_url: Optional[str] = None
|
||||
|
||||
|
||||
@router.get("/brand")
|
||||
async def get_brand():
|
||||
return {
|
||||
"brand_name": settings.brand_name,
|
||||
"brand_tagline": settings.brand_tagline,
|
||||
"brand_logo_url": settings.brand_logo_url,
|
||||
}
|
||||
|
||||
|
||||
@router.put("/brand")
|
||||
async def update_brand(body: BrandUpdate, _: bool = Depends(require_auth)):
|
||||
if body.brand_name is not None:
|
||||
settings.brand_name = body.brand_name
|
||||
if body.brand_tagline is not None:
|
||||
settings.brand_tagline = body.brand_tagline
|
||||
if body.brand_logo_url is not None:
|
||||
settings.brand_logo_url = body.brand_logo_url
|
||||
return {"ok": True}
|
||||
@@ -4,6 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>StreamCore</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import theme from './theme/anthropic'
|
||||
import AdminLayout from './admin/AdminLayout'
|
||||
import LoginPage from './admin/LoginPage'
|
||||
@@ -30,7 +31,7 @@ function AdminGuard({ children }: { children: React.ReactNode }) {
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<ConfigProvider theme={theme}>
|
||||
<ConfigProvider theme={theme} locale={zhCN}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/watch/:id" element={<WatchPage />} />
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
import { useState } from 'react'
|
||||
import { Outlet, useNavigate, useLocation, Link } from 'react-router-dom'
|
||||
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
|
||||
import { Layout, Menu, Button, Typography } from 'antd'
|
||||
import {
|
||||
DashboardOutlined,
|
||||
VideoCameraOutlined,
|
||||
PlusOutlined,
|
||||
CloudServerOutlined,
|
||||
SettingOutlined,
|
||||
LogoutOutlined,
|
||||
DashboardOutlined, VideoCameraOutlined, PlusOutlined,
|
||||
CloudServerOutlined, SettingOutlined, LogoutOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { clearToken } from '../api/client'
|
||||
|
||||
@@ -15,11 +11,11 @@ const { Sider, Content, Header } = Layout
|
||||
const { Text } = Typography
|
||||
|
||||
const menuItems = [
|
||||
{ key: '/admin', icon: <DashboardOutlined />, label: 'Dashboard' },
|
||||
{ key: '/admin/streams', icon: <VideoCameraOutlined />, label: 'Streams' },
|
||||
{ key: '/admin/streams/new', icon: <PlusOutlined />, label: 'New Stream' },
|
||||
{ key: '/admin/nodes', icon: <CloudServerOutlined />, label: 'Nodes' },
|
||||
{ key: '/admin/settings', icon: <SettingOutlined />, label: 'Settings' },
|
||||
{ key: '/admin', icon: <DashboardOutlined />, label: '概览' },
|
||||
{ key: '/admin/streams', icon: <VideoCameraOutlined />, label: '直播列表' },
|
||||
{ key: '/admin/streams/new', icon: <PlusOutlined />, label: '创建直播' },
|
||||
{ key: '/admin/nodes', icon: <CloudServerOutlined />, label: '边缘节点' },
|
||||
{ key: '/admin/settings', icon: <SettingOutlined />, label: '系统设置' },
|
||||
]
|
||||
|
||||
export default function AdminLayout() {
|
||||
@@ -39,55 +35,36 @@ export default function AdminLayout() {
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Sider
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onCollapse={setCollapsed}
|
||||
collapsible collapsed={collapsed} onCollapse={setCollapsed}
|
||||
width={220}
|
||||
style={{
|
||||
borderRight: '1px solid #E8ECF1',
|
||||
background: '#FFFFFF',
|
||||
}}
|
||||
style={{ borderRight: '1px solid #E8E3D8', background: '#FBF9F6' }}
|
||||
>
|
||||
<div style={{
|
||||
height: 56,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderBottom: '1px solid #E8ECF1',
|
||||
background: '#1E3A5F',
|
||||
color: '#FFFFFF',
|
||||
height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
borderBottom: '1px solid #E8E3D8',
|
||||
}}>
|
||||
<Text strong style={{
|
||||
fontSize: collapsed ? 14 : 18,
|
||||
letterSpacing: -0.5,
|
||||
color: '#FFFFFF',
|
||||
fontSize: collapsed ? 14 : 18, letterSpacing: -0.5,
|
||||
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
|
||||
color: '#C2693A',
|
||||
}}>
|
||||
{collapsed ? 'SC' : 'StreamCore'}
|
||||
</Text>
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[selectedKey]}
|
||||
items={menuItems}
|
||||
mode="inline" selectedKeys={[selectedKey]} items={menuItems}
|
||||
onClick={({ key }) => navigate(key)}
|
||||
style={{ border: 'none', marginTop: 8 }}
|
||||
/>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header style={{
|
||||
background: '#FFFFFF',
|
||||
borderBottom: '1px solid #E8ECF1',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
padding: '0 32px',
|
||||
background: '#FBF9F6', borderBottom: '1px solid #E8E3D8',
|
||||
display: 'flex', justifyContent: 'flex-end', alignItems: 'center',
|
||||
padding: '0 40px',
|
||||
}}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<LogoutOutlined />}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
Logout
|
||||
<Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}>
|
||||
退出登录
|
||||
</Button>
|
||||
</Header>
|
||||
<Content style={{ padding: 32, overflow: 'auto' }}>
|
||||
|
||||
@@ -14,10 +14,10 @@ export default function LoginPage() {
|
||||
setLoading(true)
|
||||
try {
|
||||
await login(values.password)
|
||||
message.success('Login successful')
|
||||
message.success('登录成功')
|
||||
navigate('/admin')
|
||||
} catch {
|
||||
message.error('Invalid password')
|
||||
message.error('密码错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
@@ -29,28 +29,31 @@ export default function LoginPage() {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'linear-gradient(135deg, #1E3A5F 0%, #2D5F8A 50%, #F5F6FA 50%)',
|
||||
background: '#F6F3ED',
|
||||
}}>
|
||||
<Card style={{ width: 400, borderRadius: 12, boxShadow: '0 8px 32px rgba(0,0,0,0.08)' }}>
|
||||
<Card style={{ width: 400, borderRadius: 12, boxShadow: '0 8px 32px rgba(20,20,16,0.06)' }}>
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Title level={2} style={{ marginBottom: 4, color: '#1E3A5F', fontWeight: 700 }}>StreamCore</Title>
|
||||
<Text type="secondary">Admin Console</Text>
|
||||
<Title level={2} style={{ marginBottom: 4, color: '#C2693A', fontWeight: 600,
|
||||
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
|
||||
StreamCore
|
||||
</Title>
|
||||
<Text type="secondary">管理控制台</Text>
|
||||
</div>
|
||||
<Form onFinish={handleSubmit} layout="vertical">
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please enter password' }]}
|
||||
rules={[{ required: true, message: '请输入密码' }]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="Password"
|
||||
placeholder="管理员密码"
|
||||
size="large"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={loading} block size="large">
|
||||
Sign In
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd'
|
||||
import { Row, Col, Card, Statistic, Typography, Table, Tag } from 'antd'
|
||||
import { VideoCameraOutlined, SignalFilled, PlayCircleOutlined } from '@ant-design/icons'
|
||||
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
const { Title } = Typography
|
||||
|
||||
export default function Dashboard() {
|
||||
const [streams, setStreams] = useState<StreamInfo[]>([])
|
||||
@@ -27,73 +27,53 @@ export default function Dashboard() {
|
||||
const pendingCount = streams.filter((s) => s.status === 'pending').length
|
||||
|
||||
const statusMap: Record<string, { color: string; label: string }> = {
|
||||
pending: { color: 'blue', label: 'Scheduled' },
|
||||
live: { color: 'green', label: 'Live' },
|
||||
ended: { color: 'default', label: 'Ended' },
|
||||
cancelled: { color: 'red', label: 'Cancelled' },
|
||||
pending: { color: 'blue', label: '待开播' },
|
||||
live: { color: 'green', label: '直播中' },
|
||||
ended: { color: 'default', label: '已结束' },
|
||||
cancelled: { color: 'red', label: '已取消' },
|
||||
}
|
||||
|
||||
const recentColumns = [
|
||||
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||
const columns = [
|
||||
{ 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: '状态', dataIndex: 'status', key: 'status', width: 100,
|
||||
render: (s: string) => {
|
||||
const m = statusMap[s] || { color: 'default', label: s }
|
||||
return <Tag color={m.color}>{m.label}</Tag>
|
||||
},
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: 'Created', dataIndex: 'created_at', key: 'created_at',
|
||||
render: (v: string) => v?.slice(0, 16),
|
||||
width: 170,
|
||||
title: '创建时间', dataIndex: 'created_at', key: 'created_at',
|
||||
render: (v: string) => v?.slice(0, 16), width: 170,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Overview</Title>
|
||||
<Title level={3} style={{ marginBottom: 24 }}>概览</Title>
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic
|
||||
title="Live Now"
|
||||
value={liveCount}
|
||||
prefix={<SignalFilled style={{ color: '#2E7D32' }} />}
|
||||
loading={loading}
|
||||
/>
|
||||
<Card style={{ borderRadius: 10 }}>
|
||||
<Statistic title="直播中" value={liveCount}
|
||||
prefix={<SignalFilled style={{ color: '#5B8C5A' }} />} loading={loading} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic
|
||||
title="Scheduled"
|
||||
value={pendingCount}
|
||||
prefix={<VideoCameraOutlined style={{ color: '#1565C0' }} />}
|
||||
loading={loading}
|
||||
/>
|
||||
<Card style={{ borderRadius: 10 }}>
|
||||
<Statistic title="待开播" value={pendingCount}
|
||||
prefix={<VideoCameraOutlined style={{ color: '#6B8CA8' }} />} loading={loading} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic
|
||||
title="Total Streams"
|
||||
value={streams.length}
|
||||
prefix={<PlayCircleOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
<Card style={{ borderRadius: 10 }}>
|
||||
<Statistic title="直播总数" value={streams.length}
|
||||
prefix={<PlayCircleOutlined />} loading={loading} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card title="Recent Streams" style={{ marginTop: 24, borderRadius: 12 }}>
|
||||
<Table
|
||||
dataSource={streams.slice(0, 10)}
|
||||
columns={recentColumns}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
size="middle"
|
||||
/>
|
||||
<Card title="最近直播" style={{ marginTop: 24, borderRadius: 10 }}>
|
||||
<Table dataSource={streams.slice(0, 10)} columns={columns}
|
||||
rowKey="id" loading={loading} pagination={false} size="middle" />
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
Card, Table, InputNumber, Switch, Typography, message, Space, Tag, Statistic, Row, Col, Button, Tooltip, Progress,
|
||||
} from 'antd'
|
||||
import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined, DashboardOutlined } from '@ant-design/icons'
|
||||
import { Card, Table, InputNumber, Switch, Typography, message, Tag, Statistic, Row, Col, Button, Tooltip, Progress } from 'antd'
|
||||
import { CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons'
|
||||
import api from '../../api/client'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
@@ -14,32 +12,15 @@ interface NodeMetrics {
|
||||
active_connections: number | null
|
||||
hls_readers: number | null
|
||||
}
|
||||
|
||||
interface NodeInfo {
|
||||
id: string
|
||||
name: string
|
||||
host: string
|
||||
hls_port: number
|
||||
api_port: number
|
||||
weight: number
|
||||
enabled: boolean
|
||||
subnet: string
|
||||
is_origin: boolean
|
||||
online: boolean
|
||||
metrics: NodeMetrics | null
|
||||
}
|
||||
|
||||
interface StrategyInfo {
|
||||
strategy: string
|
||||
multicast_enabled: boolean
|
||||
multicast_available: boolean
|
||||
id: string; name: string; host: string; hls_port: number; api_port: number
|
||||
weight: number; enabled: boolean; subnet: string; is_origin: boolean
|
||||
online: boolean; metrics: NodeMetrics | null
|
||||
}
|
||||
interface StrategyInfo { strategy: string; multicast_enabled: boolean; multicast_available: boolean }
|
||||
|
||||
const strategyLabels: Record<string, string> = {
|
||||
'subnet': 'Subnet-Aware',
|
||||
'round-robin': 'Round-Robin',
|
||||
'weighted': 'Weighted',
|
||||
'least-conn': 'Least-Conn',
|
||||
'subnet': '子网优先', 'round-robin': '轮询', 'weighted': '权重', 'least-conn': '最少连接',
|
||||
}
|
||||
|
||||
export default function NodeManager() {
|
||||
@@ -52,146 +33,66 @@ export default function NodeManager() {
|
||||
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') }
|
||||
const [nr, sr] = await Promise.all([api.get('/nodes'), api.get('/nodes/strategy')])
|
||||
setNodes(nr.data); setStrategy(sr.data)
|
||||
} catch { message.error('加载失败') }
|
||||
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 updateWeight(nid: string, w: number) {
|
||||
try { await api.put(`/nodes/${nid}`, { weight: w }); message.success('已更新') } catch { message.error('更新失败') }
|
||||
}
|
||||
async function toggleNode(nid: string, en: boolean) {
|
||||
const node = nodes.find(n => n.id === nid); if (!node) return
|
||||
try { await api.put(`/nodes/${nid}`, { weight: node.weight, enabled: en })
|
||||
setNodes(p => p.map(n => n.id === nid ? { ...n, enabled: en } : n)); message.success('已更新') } catch { message.error('更新失败') }
|
||||
}
|
||||
|
||||
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 onlineNodes = nodes.filter((n) => n.online).length
|
||||
const onlineCount = nodes.filter(n => n.online).length
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Status', dataIndex: 'online', key: 'online', width: 80,
|
||||
render: (online: boolean) => (
|
||||
<Tooltip title={online ? 'Online' : 'Offline'}>
|
||||
<Tag icon={online ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
|
||||
color={online ? 'success' : 'error'} />
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Host', dataIndex: 'host', key: 'host', width: 140 },
|
||||
{
|
||||
title: 'Subnet', dataIndex: 'subnet', key: 'subnet', width: 140,
|
||||
render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text>,
|
||||
},
|
||||
{
|
||||
title: 'CPU', key: 'cpu', width: 80,
|
||||
{ title: '状态', dataIndex: 'online', key: 'online', width: 70,
|
||||
render: (v: boolean) => <Tag icon={v ? <CheckCircleOutlined /> : <CloseCircleOutlined />} color={v ? 'success' : 'error'} /> },
|
||||
{ title: '名称', dataIndex: 'name', key: 'name' },
|
||||
{ title: '地址', dataIndex: 'host', key: 'host', width: 130 },
|
||||
{ title: '子网', dataIndex: 'subnet', key: 'subnet', width: 130, render: (v: string) => <Text code style={{ fontSize: 12 }}>{v}</Text> },
|
||||
{ title: 'CPU', key: 'cpu', width: 70,
|
||||
render: (_: any, r: NodeInfo) => r.metrics?.cpu_percent != null
|
||||
? <Progress size="small" percent={Math.round(r.metrics.cpu_percent)} strokeColor="#1E3A5F" showInfo={false} />
|
||||
: <Text type="secondary">--</Text>,
|
||||
},
|
||||
{
|
||||
title: 'RAM', key: 'ram', width: 80,
|
||||
? <Progress size="small" percent={Math.round(r.metrics.cpu_percent)} strokeColor="#C2693A" showInfo={false} />
|
||||
: <Text type="secondary">--</Text> },
|
||||
{ title: '内存', key: 'mem', width: 70,
|
||||
render: (_: any, r: NodeInfo) => r.metrics?.memory_percent != null
|
||||
? <Progress size="small" percent={Math.round(r.metrics.memory_percent)} strokeColor="#1E3A5F" showInfo={false} />
|
||||
: <Text type="secondary">--</Text>,
|
||||
},
|
||||
{
|
||||
title: 'BW', key: 'bw', width: 70,
|
||||
? <Progress size="small" percent={Math.round(r.metrics.memory_percent)} strokeColor="#C2693A" showInfo={false} />
|
||||
: <Text type="secondary">--</Text> },
|
||||
{ title: '带宽', key: 'bw', width: 80,
|
||||
render: (_: any, r: NodeInfo) => r.metrics?.bandwidth_mbps != null
|
||||
? <Text style={{ fontSize: 12 }}>{r.metrics.bandwidth_mbps.toFixed(1)} Mbps</Text>
|
||||
: <Text type="secondary">--</Text>,
|
||||
},
|
||||
{
|
||||
title: 'Conn', dataIndex: 'connections', key: 'conn', width: 60,
|
||||
: <Text type="secondary">--</Text> },
|
||||
{ title: '连接', key: 'conn', width: 65,
|
||||
render: (_: any, r: NodeInfo) => r.metrics?.active_connections != null
|
||||
? r.metrics.active_connections
|
||||
: <Text type="secondary">--</Text>,
|
||||
},
|
||||
{
|
||||
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: 80 }}
|
||||
disabled={record.is_origin}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Enabled', dataIndex: 'enabled', key: 'enabled', width: 70,
|
||||
render: (_: any, record: NodeInfo) => (
|
||||
<Switch
|
||||
checked={record.enabled} onChange={(val) => toggleNode(record.id, val)}
|
||||
size="small" disabled={record.is_origin}
|
||||
/>
|
||||
),
|
||||
},
|
||||
? r.metrics.active_connections : <Text type="secondary">--</Text> },
|
||||
{ title: '权重', dataIndex: 'weight', key: 'weight', width: 130,
|
||||
render: (_: number, r: NodeInfo) => (
|
||||
<InputNumber min={0} max={1000} value={r.weight} size="small" style={{ width: 80 }}
|
||||
disabled={r.is_origin}
|
||||
onChange={v => { const val = v || 0; setNodes(p => p.map(n => n.id === r.id ? { ...n, weight: val } : n)); updateWeight(r.id, val) }} />
|
||||
) },
|
||||
{ title: '启用', dataIndex: 'enabled', key: 'enabled', width: 65,
|
||||
render: (_: any, r: NodeInfo) => <Switch checked={r.enabled} size="small" disabled={r.is_origin} onChange={v => toggleNode(r.id, v)} /> },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Edge Nodes</Title>
|
||||
|
||||
<Title level={3} style={{ marginBottom: 24 }}>边缘节点</Title>
|
||||
{strategy && (
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
|
||||
<Col xs={24} sm={6}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic title="Strategy" value={strategyLabels[strategy.strategy] || strategy.strategy} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={6}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic title="Multicast" value={strategy.multicast_available ? 'Available' : 'N/A'}
|
||||
valueStyle={{ color: strategy.multicast_available ? '#2E7D32' : '#999' }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={6}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic title="Total Nodes" value={nodes.length} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={6}>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic title="Online" value={onlineNodes}
|
||||
valueStyle={{ color: onlineNodes > 0 ? '#2E7D32' : '#C62828' }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="策略" value={strategyLabels[strategy.strategy] || strategy.strategy} /></Card></Col>
|
||||
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="组播" value={strategy.multicast_available ? '可用' : '不可用'} valueStyle={{ color: strategy.multicast_available ? '#5B8C5A' : '#999' }} /></Card></Col>
|
||||
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="节点总数" value={nodes.length} /></Card></Col>
|
||||
<Col xs={24} sm={6}><Card style={{ borderRadius: 10 }}><Statistic title="在线" value={onlineCount} valueStyle={{ color: onlineCount > 0 ? '#5B8C5A' : '#B54A4A' }} /></Card></Col>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Card
|
||||
title="Node List"
|
||||
extra={<Button icon={<ReloadOutlined />} onClick={loadData}>Refresh</Button>}
|
||||
style={{ borderRadius: 12 }}
|
||||
>
|
||||
<Table
|
||||
dataSource={nodes}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
size="small"
|
||||
scroll={{ x: 1100 }}
|
||||
/>
|
||||
<Card title="节点列表" extra={<Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>} style={{ borderRadius: 10 }}>
|
||||
<Table dataSource={nodes} columns={columns} rowKey="id" loading={loading} pagination={false} size="small" scroll={{ x: 1100 }} />
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,27 +1,28 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
Card, Select, Switch, Typography, message, Space, Descriptions, Button,
|
||||
} from 'antd'
|
||||
import { Card, Select, Switch, Form, Input, Button, Typography, message, Divider } from 'antd'
|
||||
import api from '../../api/client'
|
||||
|
||||
const { Title } = Typography
|
||||
const { Title, Text } = Typography
|
||||
|
||||
const strategies = [
|
||||
{ value: 'subnet', label: 'Subnet-Aware (Recommended)' },
|
||||
{ value: 'weighted', label: 'Weighted' },
|
||||
{ value: 'round-robin', label: 'Round-Robin' },
|
||||
{ value: 'least-conn', label: 'Least Connections' },
|
||||
{ value: 'subnet', label: '子网优先(推荐)' },
|
||||
{ value: 'weighted', label: '权重均衡' },
|
||||
{ value: 'round-robin', label: '轮询' },
|
||||
{ value: 'least-conn', label: '最少连接' },
|
||||
]
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [strategy, setStrategy] = useState('weighted')
|
||||
const [strategy, setStrategy] = useState('subnet')
|
||||
const [multicastEnabled, setMulticastEnabled] = useState(true)
|
||||
const [multicastAvailable, setMulticastAvailable] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadSettings()
|
||||
}, [])
|
||||
const [brandName, setBrandName] = useState('StreamCore')
|
||||
const [brandTagline, setBrandTagline] = useState('企业级直播平台')
|
||||
const [brandLogoUrl, setBrandLogoUrl] = useState('')
|
||||
const [brandSaving, setBrandSaving] = useState(false)
|
||||
|
||||
useEffect(() => { loadSettings(); loadBrand() }, [])
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
@@ -29,56 +30,70 @@ export default function SettingsPage() {
|
||||
setStrategy(data.strategy)
|
||||
setMulticastEnabled(data.multicast_enabled)
|
||||
setMulticastAvailable(data.multicast_available)
|
||||
} catch { /* ignore */ }
|
||||
} catch { /* */ }
|
||||
}
|
||||
async function loadBrand() {
|
||||
try {
|
||||
const { data } = await api.get('/settings/brand')
|
||||
setBrandName(data.brand_name || 'StreamCore')
|
||||
setBrandTagline(data.brand_tagline || '')
|
||||
setBrandLogoUrl(data.brand_logo_url || '')
|
||||
} catch { /* */ }
|
||||
}
|
||||
|
||||
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('Update failed') }
|
||||
try { await api.put('/nodes/strategy', { strategy: val, multicast_enabled: multicastEnabled }); setStrategy(val); message.success('策略已更新') }
|
||||
catch { message.error('更新失败') }
|
||||
setSaving(false)
|
||||
}
|
||||
|
||||
async function toggleMulticast(val: boolean) {
|
||||
setMulticastEnabled(val)
|
||||
try { await api.put('/nodes/strategy', { strategy, multicast_enabled: val }); message.success('组播设置已更新') }
|
||||
catch { message.error('更新失败') }
|
||||
}
|
||||
async function saveBrand() {
|
||||
setBrandSaving(true)
|
||||
try {
|
||||
await api.put('/nodes/strategy', { strategy, multicast_enabled: val })
|
||||
message.success('Multicast settings updated')
|
||||
} catch { message.error('Update failed') }
|
||||
await api.put('/settings/brand', { brand_name: brandName, brand_tagline: brandTagline, brand_logo_url: brandLogoUrl })
|
||||
message.success('品牌设置已保存')
|
||||
} catch { message.error('保存失败') }
|
||||
setBrandSaving(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>System Settings</Title>
|
||||
<Title level={3} style={{ marginBottom: 24 }}>系统设置</Title>
|
||||
|
||||
<Card title="Load Balancing" style={{ marginBottom: 24, borderRadius: 12 }}>
|
||||
<Descriptions column={1} labelStyle={{ width: 120 }}>
|
||||
<Descriptions.Item label="Strategy">
|
||||
<Select
|
||||
value={strategy}
|
||||
onChange={saveStrategy}
|
||||
options={strategies}
|
||||
loading={saving}
|
||||
style={{ width: 280 }}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Card title="负载均衡" style={{ marginBottom: 24, borderRadius: 10 }}>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="均衡策略" help="子网优先:根据客户端IP所属子网自动选择最近节点">
|
||||
<Select value={strategy} onChange={saveStrategy} options={strategies} loading={saving} style={{ width: 280 }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="组播">
|
||||
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
|
||||
<Text type="secondary" style={{ marginLeft: 12 }}>
|
||||
{multicastAvailable ? '可用 — 优先使用组播分发' : '不可用 — 回退至单播'}
|
||||
</Text>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Card title="Multicast" style={{ borderRadius: 12 }}>
|
||||
<Descriptions column={1} labelStyle={{ width: 120 }}>
|
||||
<Descriptions.Item label="Enable">
|
||||
<Switch checked={multicastEnabled} onChange={toggleMulticast} />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Network Status">
|
||||
<span style={{ color: multicastAvailable ? '#2E7D32' : '#999' }}>
|
||||
{multicastAvailable ? 'Available - using multicast' : 'Unavailable - fallback to unicast'}
|
||||
</span>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Card title="品牌设置" style={{ borderRadius: 10 }}>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="平台名称">
|
||||
<Input value={brandName} onChange={e => setBrandName(e.target.value)} placeholder="StreamCore" />
|
||||
</Form.Item>
|
||||
<Form.Item label="标语">
|
||||
<Input value={brandTagline} onChange={e => setBrandTagline(e.target.value)} placeholder="企业级直播平台" />
|
||||
</Form.Item>
|
||||
<Form.Item label="Logo 图片地址">
|
||||
<Input value={brandLogoUrl} onChange={e => setBrandLogoUrl(e.target.value)} placeholder="https://..." />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" loading={brandSaving} onClick={saveBrand}>保存品牌设置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert,
|
||||
} from 'antd'
|
||||
import { Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert } from 'antd'
|
||||
import { CopyOutlined, ArrowLeftOutlined } from '@ant-design/icons'
|
||||
import { createStream } from '../../api/streams'
|
||||
|
||||
@@ -24,64 +22,39 @@ export default function StreamForm() {
|
||||
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')
|
||||
}
|
||||
message.success('直播已创建')
|
||||
} catch { message.error('创建失败') }
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
if (result) {
|
||||
return (
|
||||
<div style={{ maxWidth: 640 }}>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Stream Created</Title>
|
||||
<Alert
|
||||
type="success"
|
||||
message="Push information generated"
|
||||
<Title level={3} style={{ marginBottom: 24 }}>直播已创建</Title>
|
||||
<Alert type="success" showIcon message="推流信息" style={{ marginBottom: 24 }}
|
||||
description={
|
||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||
<div>
|
||||
<Text strong>Stream Key (UUID):</Text>
|
||||
<div style={{
|
||||
marginTop: 8, padding: 12,
|
||||
background: '#F5F6FA', borderRadius: 8,
|
||||
fontFamily: 'monospace', fontSize: 14,
|
||||
wordBreak: 'break-all',
|
||||
}}>
|
||||
<Text strong>推流码:</Text>
|
||||
<div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', 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: '#F5F6FA', borderRadius: 8,
|
||||
fontFamily: 'monospace', fontSize: 14,
|
||||
wordBreak: 'break-all',
|
||||
}}>
|
||||
<Text strong>RTMP 推流地址:</Text>
|
||||
<div style={{ marginTop: 8, padding: 12, background: '#F3EFE7', 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')
|
||||
}}
|
||||
>
|
||||
Copy All
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => navigate('/admin/streams')}>
|
||||
Back to List
|
||||
</Button>
|
||||
<Button icon={<CopyOutlined />} onClick={() => {
|
||||
navigator.clipboard.writeText(`推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`)
|
||||
message.success('已复制')
|
||||
}}>复制全部</Button>
|
||||
<Button type="primary" onClick={() => navigate('/admin/streams')}>返回列表</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
@@ -89,37 +62,24 @@ export default function StreamForm() {
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 640 }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/admin/streams')}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>New Stream</Title>
|
||||
<Button type="text" icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/streams')} style={{ marginBottom: 16 }}>返回</Button>
|
||||
<Card style={{ borderRadius: 10 }}>
|
||||
<Title level={3} style={{ marginBottom: 24 }}>创建直播</Title>
|
||||
<Form layout="vertical" onFinish={handleSubmit}>
|
||||
<Form.Item
|
||||
name="title"
|
||||
label="Stream Title"
|
||||
rules={[{ required: true, message: 'Please enter a title' }]}
|
||||
>
|
||||
<Input placeholder="Enter stream title" size="large" />
|
||||
<Form.Item name="title" label="直播标题" rules={[{ required: true, message: '请输入标题' }]}>
|
||||
<Input placeholder="输入直播标题" size="large" />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="Description">
|
||||
<TextArea rows={3} placeholder="Optional description" />
|
||||
<Form.Item name="description" label="简介">
|
||||
<TextArea rows={3} placeholder="可选简介" />
|
||||
</Form.Item>
|
||||
<Form.Item name="cover_url" label="Cover Image URL">
|
||||
<Form.Item name="cover_url" label="封面图片地址">
|
||||
<Input placeholder="https://..." />
|
||||
</Form.Item>
|
||||
<Form.Item name="scheduled_at" label="Scheduled Time">
|
||||
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="Select schedule time" />
|
||||
<Form.Item name="scheduled_at" label="预定开播时间">
|
||||
<DatePicker showTime style={{ width: '100%' }} size="large" placeholder="选择时间" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={loading} size="large" block>
|
||||
Create Stream
|
||||
</Button>
|
||||
<Button type="primary" htmlType="submit" loading={loading} size="large" block>创建直播</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Table, Button, Tag, Space, Modal, Typography, message, Tooltip, Popconfirm,
|
||||
} from 'antd'
|
||||
import { Table, Button, Tag, Space, 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 { Title } = Typography
|
||||
|
||||
const statusMap: Record<string, { color: string; label: string }> = {
|
||||
pending: { color: 'blue', label: 'Scheduled' },
|
||||
live: { color: 'green', label: 'Live' },
|
||||
ended: { color: 'default', label: 'Ended' },
|
||||
cancelled: { color: 'red', label: 'Cancelled' },
|
||||
pending: { color: 'blue', label: '待开播' },
|
||||
live: { color: 'green', label: '直播中' },
|
||||
ended: { color: 'default', label: '已结束' },
|
||||
cancelled: { color: 'red', label: '已取消' },
|
||||
}
|
||||
|
||||
export default function StreamList() {
|
||||
@@ -24,80 +22,40 @@ export default function StreamList() {
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await fetchStreams()
|
||||
setStreams(data)
|
||||
} catch { message.error('Failed to load streams') }
|
||||
try { setStreams(await fetchStreams()) } catch { message.error('加载失败') }
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
try {
|
||||
await deleteStream(id)
|
||||
message.success('Deleted')
|
||||
loadData()
|
||||
} catch { message.error('Failed to delete') }
|
||||
try { await deleteStream(id); message.success('已删除'); loadData() } catch { message.error('删除失败') }
|
||||
}
|
||||
|
||||
async function handleGoLive(id: number) {
|
||||
try {
|
||||
await goLive(id)
|
||||
message.success('Stream is now live')
|
||||
loadData()
|
||||
} catch { message.error('Operation failed') }
|
||||
try { await goLive(id); message.success('已开播'); loadData() } catch { message.error('操作失败') }
|
||||
}
|
||||
|
||||
async function handleEnd(id: number) {
|
||||
try {
|
||||
await endStream(id)
|
||||
message.success('Stream ended')
|
||||
loadData()
|
||||
} catch { message.error('Operation failed') }
|
||||
try { await endStream(id); message.success('已结束'); loadData() } catch { message.error('操作失败') }
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100,
|
||||
render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
|
||||
{
|
||||
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) => (
|
||||
title: '操作', key: 'actions', width: 280,
|
||||
render: (_: any, r: StreamInfo) => (
|
||||
<Space size="small">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<LinkOutlined />}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(record.stream_key)
|
||||
message.success('Stream key copied')
|
||||
}}
|
||||
>
|
||||
Copy Key
|
||||
<Button size="small" icon={<LinkOutlined />}
|
||||
onClick={() => { navigator.clipboard.writeText(r.stream_key); message.success('推流码已复制') }}>
|
||||
复制推流码
|
||||
</Button>
|
||||
{record.status !== 'live' ? (
|
||||
<Tooltip title="Go Live">
|
||||
<Button size="small" type="primary" icon={<PlayCircleOutlined />}
|
||||
onClick={() => handleGoLive(record.id)} ghost />
|
||||
</Tooltip>
|
||||
{r.status !== 'live' ? (
|
||||
<Tooltip title="开播"><Button size="small" type="primary" icon={<PlayCircleOutlined />} onClick={() => handleGoLive(r.id)} ghost /></Tooltip>
|
||||
) : (
|
||||
<Tooltip title="End Stream">
|
||||
<Button size="small" icon={<StopOutlined />}
|
||||
onClick={() => handleEnd(record.id)} danger />
|
||||
</Tooltip>
|
||||
<Tooltip title="结束"><Button size="small" icon={<StopOutlined />} onClick={() => handleEnd(r.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" onClick={() => window.open(`/watch/${r.id}`, '_blank')}>观看</Button>
|
||||
<Popconfirm title="确定删除?" onConfirm={() => handleDelete(r.id)}>
|
||||
<Button size="small" icon={<DeleteOutlined />} danger />
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
@@ -108,19 +66,10 @@ export default function StreamList() {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>Streams</Title>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>
|
||||
New Stream
|
||||
</Button>
|
||||
<Title level={3} style={{ margin: 0 }}>直播列表</Title>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>创建直播</Button>
|
||||
</div>
|
||||
<Table
|
||||
dataSource={streams}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 15 }}
|
||||
size="middle"
|
||||
/>
|
||||
<Table dataSource={streams} columns={columns} rowKey="id" loading={loading} pagination={{ pageSize: 15 }} size="middle" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body, #root { height: 100%; }
|
||||
body {
|
||||
font-family: "Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: #F5F6FA;
|
||||
background: #F6F3ED;
|
||||
}
|
||||
@@ -2,70 +2,104 @@ import type { ThemeConfig } from 'antd'
|
||||
|
||||
const theme: ThemeConfig = {
|
||||
token: {
|
||||
fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif`,
|
||||
fontSize: 14,
|
||||
colorPrimary: '#1E3A5F',
|
||||
colorSuccess: '#2E7D32',
|
||||
colorWarning: '#E65100',
|
||||
colorError: '#C62828',
|
||||
colorInfo: '#1565C0',
|
||||
colorTextBase: '#1A1A1A',
|
||||
colorBgBase: '#FFFFFF',
|
||||
colorBgContainer: '#FFFFFF',
|
||||
colorBgLayout: '#F5F6FA',
|
||||
colorBorder: '#E8ECF1',
|
||||
colorBorderSecondary: '#EDF0F4',
|
||||
borderRadius: 8,
|
||||
borderRadiusLG: 12,
|
||||
fontFamily: `"Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif`,
|
||||
fontSize: 15,
|
||||
fontSizeLG: 16,
|
||||
fontSizeXL: 20,
|
||||
colorPrimary: '#C2693A',
|
||||
colorSuccess: '#5B8C5A',
|
||||
colorWarning: '#C2873A',
|
||||
colorError: '#B54A4A',
|
||||
colorInfo: '#6B8CA8',
|
||||
colorTextBase: '#141410',
|
||||
colorTextSecondary: '#5C5952',
|
||||
colorTextTertiary: '#8B867D',
|
||||
colorBgBase: '#FBF9F6',
|
||||
colorBgContainer: '#FDFCFB',
|
||||
colorBgLayout: '#F6F3ED',
|
||||
colorBorder: '#E8E3D8',
|
||||
colorBorderSecondary: '#F0EBE2',
|
||||
borderRadius: 6,
|
||||
borderRadiusLG: 10,
|
||||
borderRadiusSM: 4,
|
||||
wireframe: false,
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06)',
|
||||
boxShadowSecondary: '0 4px 12px rgba(0,0,0,0.06)',
|
||||
lineHeight: 1.6,
|
||||
fontWeightStrong: 600,
|
||||
paddingLG: 32,
|
||||
paddingMD: 24,
|
||||
paddingSM: 16,
|
||||
boxShadow: '0 1px 3px rgba(20,20,16,0.04), 0 1px 2px rgba(20,20,16,0.03)',
|
||||
boxShadowSecondary: '0 6px 16px rgba(20,20,16,0.05), 0 2px 6px rgba(20,20,16,0.03)',
|
||||
boxShadowTertiary: '0 12px 32px rgba(20,20,16,0.08), 0 4px 12px rgba(20,20,16,0.04)',
|
||||
},
|
||||
components: {
|
||||
Layout: {
|
||||
headerBg: '#1E3A5F',
|
||||
headerHeight: 56,
|
||||
headerPadding: '0 32px',
|
||||
siderBg: '#FFFFFF',
|
||||
bodyBg: '#F5F6FA',
|
||||
headerBg: '#FBF9F6',
|
||||
headerHeight: 60,
|
||||
headerPadding: '0 40px',
|
||||
siderBg: '#FBF9F6',
|
||||
bodyBg: '#F6F3ED',
|
||||
},
|
||||
Menu: {
|
||||
itemBg: 'transparent',
|
||||
itemSelectedBg: '#E8F0FE',
|
||||
itemSelectedColor: '#1E3A5F',
|
||||
itemActiveBg: '#F0F4FA',
|
||||
itemColor: '#4A5568',
|
||||
itemSelectedBg: '#EDE8DD',
|
||||
itemSelectedColor: '#141410',
|
||||
itemActiveBg: '#F0EBE2',
|
||||
itemColor: '#5C5952',
|
||||
itemHeight: 42,
|
||||
fontSize: 14,
|
||||
},
|
||||
Card: {
|
||||
paddingLG: 24,
|
||||
borderRadiusLG: 12,
|
||||
paddingLG: 28,
|
||||
borderRadiusLG: 10,
|
||||
colorBgContainer: '#FDFCFB',
|
||||
},
|
||||
Button: {
|
||||
borderRadius: 8,
|
||||
borderRadius: 6,
|
||||
fontWeight: 500,
|
||||
primaryShadow: '0 2px 4px rgba(30,58,95,0.2)',
|
||||
controlHeight: 38,
|
||||
controlHeightLG: 46,
|
||||
controlHeightSM: 32,
|
||||
primaryShadow: '0 2px 4px rgba(194,105,58,0.12)',
|
||||
},
|
||||
Input: {
|
||||
borderRadius: 8,
|
||||
activeBorderColor: '#1E3A5F',
|
||||
hoverBorderColor: '#4A7FA8',
|
||||
borderRadius: 6,
|
||||
activeBorderColor: '#C2693A',
|
||||
hoverBorderColor: '#D4956B',
|
||||
controlHeight: 38,
|
||||
controlHeightLG: 46,
|
||||
},
|
||||
Select: {
|
||||
borderRadius: 8,
|
||||
activeBorderColor: '#1E3A5F',
|
||||
borderRadius: 6,
|
||||
activeBorderColor: '#C2693A',
|
||||
controlHeight: 38,
|
||||
},
|
||||
Table: {
|
||||
headerBg: '#FAFBFC',
|
||||
rowHoverBg: '#F7F9FC',
|
||||
headerBg: '#F6F3ED',
|
||||
headerColor: '#5C5952',
|
||||
rowHoverBg: '#F3EFE7',
|
||||
borderColor: '#E8E3D8',
|
||||
},
|
||||
Modal: {
|
||||
borderRadiusLG: 12,
|
||||
paddingLG: 28,
|
||||
},
|
||||
Tag: {
|
||||
borderRadiusSM: 4,
|
||||
lineHeight: 1.6,
|
||||
},
|
||||
Statistic: {
|
||||
contentFontSize: 28,
|
||||
contentFontSize: 30,
|
||||
titleFontSize: 14,
|
||||
},
|
||||
Typography: {
|
||||
titleMarginBottom: '0.5em',
|
||||
titleMarginTop: '1.2em',
|
||||
},
|
||||
Tabs: {
|
||||
inkBarColor: '#C2693A',
|
||||
itemActiveColor: '#C2693A',
|
||||
itemHoverColor: '#D4956B',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Row, Col, Card, Typography, Tag, Button, Skeleton, Empty, Space,
|
||||
} from 'antd'
|
||||
import { Row, Col, Card, Typography, Tag, Skeleton, Empty, Space } from 'antd'
|
||||
import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons'
|
||||
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
|
||||
const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
|
||||
live: { color: 'red', label: 'LIVE', icon: <FireOutlined /> },
|
||||
pending: { color: 'blue', label: 'SCHEDULED', icon: <ClockCircleOutlined /> },
|
||||
ended: { color: 'default', label: 'ENDED', icon: null },
|
||||
cancelled: { color: 'default', label: 'CANCELLED', icon: null },
|
||||
live: { color: 'red', label: '直播中', icon: <FireOutlined /> },
|
||||
pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
|
||||
ended: { color: 'default', label: '已结束', icon: null },
|
||||
cancelled: { color: 'default', label: '已取消', icon: null },
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
@@ -21,10 +19,7 @@ export default function HomePage() {
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
fetchStreams()
|
||||
.then(setStreams)
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
fetchStreams().then(setStreams).catch(() => {}).finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
const sorted = [...streams].sort((a, b) => {
|
||||
@@ -33,60 +28,54 @@ export default function HomePage() {
|
||||
})
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#F5F6FA' }}>
|
||||
<div style={{ minHeight: '100vh', background: '#F6F3ED' }}>
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #1E3A5F 0%, #2D5F8A 100%)',
|
||||
padding: '40px 48px',
|
||||
color: '#FFFFFF',
|
||||
background: '#FBF9F6', borderBottom: '1px solid #E8E3D8',
|
||||
padding: '48px 48px 40px',
|
||||
}}>
|
||||
<div style={{ maxWidth: 1280, margin: '0 auto' }}>
|
||||
<Title level={2} style={{ color: '#FFFFFF', margin: 0, fontWeight: 700, letterSpacing: -0.5 }}>
|
||||
<Title level={1} style={{
|
||||
margin: 0, fontWeight: 600, letterSpacing: -1,
|
||||
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
|
||||
}}>
|
||||
StreamCore
|
||||
</Title>
|
||||
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16, marginTop: 8, display: 'block' }}>
|
||||
Enterprise Streaming Platform
|
||||
<Text type="secondary" style={{ fontSize: 17, marginTop: 8, display: 'block', fontWeight: 400 }}>
|
||||
企业级直播平台
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 48px' }}>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Live Channels</Title>
|
||||
|
||||
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 48px' }}>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>直播频道</Title>
|
||||
{loading ? (
|
||||
<Row gutter={[24, 24]}>
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
{[1,2,3,4,5,6].map(i => (
|
||||
<Col key={i} xs={24} sm={12} md={8} lg={8}>
|
||||
<Card style={{ borderRadius: 12 }}><Skeleton active /></Card>
|
||||
<Card style={{ borderRadius: 10 }}><Skeleton active /></Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
) : sorted.length === 0 ? (
|
||||
<Empty description="No live streams yet" style={{ marginTop: 80 }} />
|
||||
<Empty description="暂无直播" style={{ marginTop: 80 }} />
|
||||
) : (
|
||||
<Row gutter={[24, 24]}>
|
||||
{sorted.map((s) => {
|
||||
{sorted.map(s => {
|
||||
const meta = statusMeta[s.status] ?? statusMeta.pending
|
||||
return (
|
||||
<Col key={s.id} xs={24} sm={12} md={8} lg={8}>
|
||||
<Card
|
||||
hoverable
|
||||
style={{ overflow: 'hidden', borderRadius: 12 }}
|
||||
<Card hoverable style={{ overflow: 'hidden', borderRadius: 10 }}
|
||||
cover={
|
||||
<div style={{
|
||||
height: 160,
|
||||
height: 180, position: 'relative',
|
||||
background: s.cover_url
|
||||
? `url(${s.cover_url}) center/cover no-repeat`
|
||||
: 'linear-gradient(135deg, #1E3A5F 0%, #3A6F9F 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
: 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #2B241C 100%)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
{!s.cover_url && (
|
||||
<VideoCameraOutlined style={{ color: 'rgba(255,255,255,0.3)', fontSize: 48 }} />
|
||||
<VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.2)', fontSize: 48 }} />
|
||||
)}
|
||||
<div style={{
|
||||
position: 'absolute', top: 12, right: 12,
|
||||
}}>
|
||||
<div style={{ position: 'absolute', top: 12, right: 12 }}>
|
||||
<Tag color={meta.color} style={{ margin: 0, fontWeight: 600, border: 0 }}>
|
||||
{meta.icon} {meta.label}
|
||||
</Tag>
|
||||
@@ -97,16 +86,8 @@ export default function HomePage() {
|
||||
onClick={() => navigate(`/watch/${s.id}`)}
|
||||
>
|
||||
<Card.Meta
|
||||
title={
|
||||
<Text strong style={{ fontSize: 15, display: 'block' }} ellipsis>
|
||||
{s.title}
|
||||
</Text>
|
||||
}
|
||||
description={
|
||||
<Text type="secondary" ellipsis style={{ fontSize: 13 }}>
|
||||
{s.description || 'No description'}
|
||||
</Text>
|
||||
}
|
||||
title={<Text strong style={{ fontSize: 15 }} ellipsis>{s.title}</Text>}
|
||||
description={<Text type="secondary" ellipsis style={{ fontSize: 13 }}>{s.description || '暂无简介'}</Text>}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
@@ -115,14 +96,6 @@ export default function HomePage() {
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
<div style={{
|
||||
maxWidth: 1280, margin: '0 auto', padding: '16px 48px 48px',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||||
StreamCore © {new Date().getFullYear()}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Select, Button, Typography, Space, Tag, Spin, Skeleton, Empty, message,
|
||||
} from 'antd'
|
||||
import { 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'
|
||||
@@ -23,10 +21,7 @@ export default function WatchPage() {
|
||||
if (!id) return
|
||||
loadInfo()
|
||||
const timer = setInterval(loadInfo, 15000)
|
||||
return () => {
|
||||
clearInterval(timer)
|
||||
if (hls) { hls.destroy() }
|
||||
}
|
||||
return () => { clearInterval(timer); if (hls) hls.destroy() }
|
||||
}, [id])
|
||||
|
||||
async function loadInfo() {
|
||||
@@ -37,176 +32,76 @@ export default function WatchPage() {
|
||||
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)
|
||||
}
|
||||
if (data.qualities.length > 0) setActiveQuality(data.qualities[0].label)
|
||||
}
|
||||
} catch { }
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
function autoSelectLine(lines: LineInfo[]): LineInfo {
|
||||
const enabled = lines.filter((l) => l.weight > 0)
|
||||
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
|
||||
}
|
||||
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)
|
||||
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]
|
||||
const quality = activeQuality ? line.qualities.find(q => q.label === activeQuality) : line.qualities[0]
|
||||
if (!quality) return
|
||||
if (hls) { hls.destroy() }
|
||||
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, try switching line...')
|
||||
}
|
||||
})
|
||||
setHls(hlsInstance)
|
||||
const hi = new Hls({ enableWorker: false, lowLatencyMode: false })
|
||||
hi.loadSource(url); hi.attachMedia(videoRef.current!)
|
||||
hi.on(Hls.Events.MANIFEST_PARSED, () => { videoRef.current?.play().catch(() => {}) })
|
||||
hi.on(Hls.Events.ERROR, (_e, d) => { if (d.fatal) message.warning('播放异常,尝试切换线路...') })
|
||||
setHls(hi)
|
||||
} 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 (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: '#F6F3ED' }}><Empty description="未找到该直播" /></div>
|
||||
|
||||
if (!info) {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#F5F6FA',
|
||||
}}>
|
||||
<Empty description="Stream not found" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? 'SCHEDULED' : info.status === 'ended' ? 'ENDED' : info.status.toUpperCase()
|
||||
const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: '#0F1419',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<div style={{
|
||||
height: 56,
|
||||
minHeight: 56,
|
||||
background: 'rgba(15,20,25,0.97)',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.06)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
}}>
|
||||
<div style={{ minHeight: '100vh', background: '#141410', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ height: 56, minHeight: 56, background: 'rgba(20,20,16,0.97)', borderBottom: '1px solid rgba(232,227,216,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px' }}>
|
||||
<Space>
|
||||
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#A0AEC0' }}
|
||||
onClick={() => navigate('/')}>
|
||||
Back
|
||||
</Button>
|
||||
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#8B867D' }} onClick={() => navigate('/')}>返回</Button>
|
||||
<div>
|
||||
<Title level={5} style={{ color: '#E2E8F0', margin: 0, fontWeight: 600 }}>
|
||||
{info.title}
|
||||
</Title>
|
||||
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>
|
||||
{statusLabel}
|
||||
</Tag>
|
||||
<Title level={5} style={{ color: '#E8E3D8', margin: 0, fontWeight: 600 }}>{info.title}</Title>
|
||||
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>{statusLabel}</Tag>
|
||||
</div>
|
||||
</Space>
|
||||
<Space size="middle">
|
||||
<div style={{ color: '#718096', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<SignalFilled style={{ color: info.multicast_available ? '#48BB78' : '#4A5568' }} />
|
||||
{info.multicast_available ? 'Multicast' : 'Unicast'}
|
||||
<div style={{ color: '#8B867D', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5C5952' }} />
|
||||
{info.multicast_available ? '组播' : '单播'}
|
||||
</div>
|
||||
<Select
|
||||
value={activeQuality}
|
||||
onChange={setActiveQuality}
|
||||
style={{ width: 110 }}
|
||||
size="small"
|
||||
options={info.qualities.map((q) => ({ value: q.label, label: q.label }))}
|
||||
placeholder="Quality"
|
||||
/>
|
||||
<Select
|
||||
value={activeLine}
|
||||
onChange={setActiveLine}
|
||||
style={{ width: 160 }}
|
||||
size="small"
|
||||
options={info.lines.map((l) => ({
|
||||
value: l.node_id,
|
||||
label: `${l.node_name} (${l.weight})`,
|
||||
}))}
|
||||
prefix={<WifiOutlined />}
|
||||
placeholder="Line"
|
||||
/>
|
||||
<Select value={activeQuality} onChange={setActiveQuality} style={{ width: 110 }} size="small"
|
||||
options={info.qualities.map(q => ({ value: q.label, label: q.label }))} placeholder="清晰度" />
|
||||
<Select value={activeLine} onChange={setActiveLine} style={{ width: 160 }} size="small"
|
||||
options={info.lines.map(l => ({ value: l.node_id, label: `${l.node_name} (${l.weight})` }))}
|
||||
prefix={<WifiOutlined />} placeholder="线路" />
|
||||
</Space>
|
||||
</div>
|
||||
<div style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
}}>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
maxWidth: 1280,
|
||||
aspectRatio: '16 / 9',
|
||||
maxHeight: 'calc(100vh - 56px - 48px)',
|
||||
background: '#000',
|
||||
position: 'relative',
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
controls
|
||||
autoPlay
|
||||
playsInline
|
||||
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
|
||||
/>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
|
||||
<div style={{ width: '100%', maxWidth: 1280, aspectRatio: '16/9', maxHeight: 'calc(100vh - 56px - 48px)', background: '#000', position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
|
||||
<video ref={videoRef} controls autoPlay playsInline style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
|
||||
{info.status !== 'live' && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'rgba(0,0,0,0.8)',
|
||||
}}>
|
||||
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)' }}>
|
||||
<Space direction="vertical" align="center">
|
||||
<Spin size="large" />
|
||||
<Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16 }}>
|
||||
Waiting for streamer...
|
||||
<Text style={{ color: 'rgba(232,227,216,0.6)', fontSize: 16, fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
|
||||
等待主播开播...
|
||||
</Text>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user