yhlhoh/live
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

全站汉化 + antd zhCN locale

Browse Source
This commit is contained in:
admin committed 2026-08-07 15:04:19 +08:00
1 parent 2e4594fa77
commit b96323eb99
9 files changed
+134 -136
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/App.tsx
+4 -2
View File
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { ConfigProvider } from 'antd' import { ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import theme from './theme/anthropic' import theme from './theme/anthropic'
import AdminLayout from './admin/AdminLayout' import AdminLayout from './admin/AdminLayout'
import LoginPage from './admin/LoginPage' import LoginPage from './admin/LoginPage'
@@ -10,7 +11,8 @@ import StreamForm from './admin/pages/StreamForm'
import NodeManager from './admin/pages/NodeManager' import NodeManager from './admin/pages/NodeManager'
import SettingsPage from './admin/pages/Settings' import SettingsPage from './admin/pages/Settings'
import WatchPage from './viewer/pages/WatchPage' import WatchPage from './viewer/pages/WatchPage'
import { verifyToken, getToken } from './api/auth' import { verifyToken } from './api/auth'
import { getToken } from './api/client'
function AdminGuard({ children }: { children: React.ReactNode }) { function AdminGuard({ children }: { children: React.ReactNode }) {
const [authed, setAuthed] = useState<boolean | null>(null) const [authed, setAuthed] = useState<boolean | null>(null)
@@ -28,7 +30,7 @@ function AdminGuard({ children }: { children: React.ReactNode }) {
export default function App() { export default function App() {
return ( return (
<ConfigProvider theme={theme}> <ConfigProvider theme={theme} locale={zhCN}>
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/watch/:id" element={<WatchPage />} /> <Route path="/watch/:id" element={<WatchPage />} />
frontend/src/admin/AdminLayout.tsx
+6 -6
View File
@@ -15,11 +15,11 @@ const { Sider, Content, Header } = Layout
const { Text } = Typography const { Text } = Typography
const menuItems = [ const menuItems = [
{ key: '/admin', icon: <DashboardOutlined />, label: 'Dashboard' }, { key: '/admin', icon: <DashboardOutlined />, label: '概览' },
{ key: '/admin/streams', icon: <VideoCameraOutlined />, label: 'Streams' }, { key: '/admin/streams', icon: <VideoCameraOutlined />, label: '直播列表' },
{ key: '/admin/streams/new', icon: <PlusOutlined />, label: 'New Stream' }, { key: '/admin/streams/new', icon: <PlusOutlined />, label: '创建直播' },
{ key: '/admin/nodes', icon: <CloudServerOutlined />, label: 'Edge Nodes' }, { key: '/admin/nodes', icon: <CloudServerOutlined />, label: '边缘节点' },
{ key: '/admin/settings', icon: <SettingOutlined />, label: 'Settings' }, { key: '/admin/settings', icon: <SettingOutlined />, label: '系统设置' },
] ]
export default function AdminLayout() { export default function AdminLayout() {
@@ -81,7 +81,7 @@ export default function AdminLayout() {
icon={<LogoutOutlined />} icon={<LogoutOutlined />}
onClick={handleLogout} onClick={handleLogout}
> >
Logout 退出登录
</Button> </Button>
</Header> </Header>
<Content style={{ padding: 32, overflow: 'auto' }}> <Content style={{ padding: 32, overflow: 'auto' }}>
frontend/src/admin/LoginPage.tsx
+6 -6
View File
@@ -14,10 +14,10 @@ export default function LoginPage() {
setLoading(true) setLoading(true)
try { try {
await login(values.password) await login(values.password)
message.success('Welcome back') message.success('登录成功')
navigate('/admin') navigate('/admin')
} catch { } catch {
message.error('Invalid password') message.error('密码错误')
} finally { } finally {
setLoading(false) setLoading(false)
} }
@@ -35,22 +35,22 @@ export default function LoginPage() {
<Space direction="vertical" size="large" style={{ width: '100%' }}> <Space direction="vertical" size="large" style={{ width: '100%' }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<Title level={2} style={{ marginBottom: 4 }}>LiveStream</Title> <Title level={2} style={{ marginBottom: 4 }}>LiveStream</Title>
<Text type="secondary">Admin Panel</Text> <Text type="secondary">管理后台</Text>
</div> </div>
<Form onFinish={handleSubmit} layout="vertical"> <Form onFinish={handleSubmit} layout="vertical">
<Form.Item <Form.Item
name="password" name="password"
rules={[{ required: true, message: 'Enter your password' }]} rules={[{ required: true, message: '请输入密码' }]}
> >
<Input.Password <Input.Password
prefix={<LockOutlined />} prefix={<LockOutlined />}
placeholder="Password" placeholder="密码"
size="large" size="large"
/> />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="primary" htmlType="submit" loading={loading} block size="large"> <Button type="primary" htmlType="submit" loading={loading} block size="large">
Sign In 登录
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
frontend/src/admin/pages/Dashboard.tsx
+13 -14
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd' import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd'
import { VideoCameraOutlined, EyeOutlined, CloudServerOutlined, SignalFilled } from '@ant-design/icons' import { VideoCameraOutlined, EyeOutlined, SignalFilled } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams' import { fetchStreams, type StreamInfo } from '../../api/streams'
const { Title } = Typography const { Title } = Typography
@@ -25,35 +25,34 @@ export default function Dashboard() {
const liveCount = streams.filter((s) => s.status === 'live').length const liveCount = streams.filter((s) => s.status === 'live').length
const pendingCount = streams.filter((s) => s.status === 'pending').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 }> = { const statusMap: Record<string, { color: string; label: string }> = {
pending: { color: 'blue', label: 'Pending' }, pending: { color: 'blue', label: '待开播' },
live: { color: 'green', label: 'Live' }, live: { color: 'green', label: '直播中' },
ended: { color: 'default', label: 'Ended' }, ended: { color: 'default', label: '已结束' },
cancelled: { color: 'red', label: 'Cancelled' }, cancelled: { color: 'red', label: '已取消' },
} }
const recentColumns = [ const recentColumns = [
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true }, { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
{ {
title: 'Status', dataIndex: 'status', key: 'status', title: '状态', dataIndex: 'status', key: 'status',
render: (status: string) => { render: (status: string) => {
const s = statusMap[status] || { color: 'default', label: status } const s = statusMap[status] || { color: 'default', label: status }
return <Tag color={s.color}>{s.label}</Tag> return <Tag color={s.color}>{s.label}</Tag>
}, },
}, },
{ title: 'Created', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16) }, { title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16) },
] ]
return ( return (
<div> <div>
<Title level={3} style={{ marginBottom: 24 }}>Dashboard</Title> <Title level={3} style={{ marginBottom: 24 }}>概览</Title>
<Row gutter={[24, 24]}> <Row gutter={[24, 24]}>
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card> <Card>
<Statistic <Statistic
title="Live Streams" title="直播中"
value={liveCount} value={liveCount}
prefix={<SignalFilled style={{ color: '#52c41a' }} />} prefix={<SignalFilled style={{ color: '#52c41a' }} />}
loading={loading} loading={loading}
@@ -63,7 +62,7 @@ export default function Dashboard() {
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card> <Card>
<Statistic <Statistic
title="Pending" title="待开播"
value={pendingCount} value={pendingCount}
prefix={<VideoCameraOutlined style={{ color: '#1677ff' }} />} prefix={<VideoCameraOutlined style={{ color: '#1677ff' }} />}
loading={loading} loading={loading}
@@ -73,7 +72,7 @@ export default function Dashboard() {
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card> <Card>
<Statistic <Statistic
title="Total Streams" title="直播总数"
value={streams.length} value={streams.length}
prefix={<EyeOutlined />} prefix={<EyeOutlined />}
loading={loading} loading={loading}
@@ -81,7 +80,7 @@ export default function Dashboard() {
</Card> </Card>
</Col> </Col>
</Row> </Row>
<Card title="Recent Streams" style={{ marginTop: 24 }}> <Card title="最近直播" style={{ marginTop: 24 }}>
<Table <Table
dataSource={streams.slice(0, 10)} dataSource={streams.slice(0, 10)}
columns={recentColumns} columns={recentColumns}
frontend/src/admin/pages/NodeManager.tsx
+29 -20
View File
@@ -23,6 +23,12 @@ interface StrategyInfo {
multicast_available: boolean multicast_available: boolean
} }
const strategyLabels: Record<string, string> = {
'round-robin': '轮询',
'weighted': '权重',
'least-conn': '最少连接',
}
export default function NodeManager() { export default function NodeManager() {
const [nodes, setNodes] = useState<NodeInfo[]>([]) const [nodes, setNodes] = useState<NodeInfo[]>([])
const [strategy, setStrategy] = useState<StrategyInfo | null>(null) const [strategy, setStrategy] = useState<StrategyInfo | null>(null)
@@ -39,15 +45,15 @@ export default function NodeManager() {
]) ])
setNodes(nodesRes.data) setNodes(nodesRes.data)
setStrategy(strategyRes.data) setStrategy(strategyRes.data)
} catch { message.error('Failed to load') } } catch { message.error('加载失败') }
setLoading(false) setLoading(false)
} }
async function updateWeight(nodeId: string, weight: number) { async function updateWeight(nodeId: string, weight: number) {
try { try {
await api.put(`/nodes/${nodeId}`, { weight }) await api.put(`/nodes/${nodeId}`, { weight })
message.success('Updated') message.success('已更新')
} catch { message.error('Failed') } } catch { message.error('更新失败') }
} }
async function toggleNode(nodeId: string, enabled: boolean) { async function toggleNode(nodeId: string, enabled: boolean) {
@@ -56,17 +62,17 @@ export default function NodeManager() {
try { try {
await api.put(`/nodes/${nodeId}`, { weight: node.weight, enabled }) await api.put(`/nodes/${nodeId}`, { weight: node.weight, enabled })
setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, enabled } : n))) setNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, enabled } : n)))
message.success('Updated') message.success('已更新')
} catch { message.error('Failed') } } catch { message.error('更新失败') }
} }
const columns = [ const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' }, { title: '名称', dataIndex: 'name', key: 'name' },
{ title: 'Host', dataIndex: 'host', key: 'host' }, { title: '主机', dataIndex: 'host', key: 'host' },
{ title: 'HLS Port', dataIndex: 'hls_port', key: 'hls_port', width: 100 }, { title: 'HLS 端口', dataIndex: 'hls_port', key: 'hls_port', width: 100 },
{ title: 'API Port', dataIndex: 'api_port', key: 'api_port', width: 100 }, { title: 'API 端口', dataIndex: 'api_port', key: 'api_port', width: 100 },
{ {
title: 'Weight', dataIndex: 'weight', key: 'weight', width: 140, title: '权重', dataIndex: 'weight', key: 'weight', width: 140,
render: (_: number, record: NodeInfo) => ( render: (_: number, record: NodeInfo) => (
<InputNumber <InputNumber
min={0} min={0}
@@ -83,7 +89,7 @@ export default function NodeManager() {
), ),
}, },
{ {
title: 'Enabled', dataIndex: 'enabled', key: 'enabled', width: 90, title: '启用', dataIndex: 'enabled', key: 'enabled', width: 80,
render: (_: any, record: NodeInfo) => ( render: (_: any, record: NodeInfo) => (
<Switch <Switch
checked={record.enabled} checked={record.enabled}
@@ -93,42 +99,45 @@ export default function NodeManager() {
), ),
}, },
{ {
title: 'Health', key: 'health', width: 100, title: '状态', key: 'health', width: 100,
render: () => <Tag icon={<CheckCircleOutlined />} color="success">Online</Tag>, render: () => <Tag icon={<CheckCircleOutlined />} color="success">在线</Tag>,
}, },
] ]
return ( return (
<div> <div>
<Title level={3} style={{ marginBottom: 24 }}>Edge Nodes</Title> <Title level={3} style={{ marginBottom: 24 }}>边缘节点管理</Title>
{strategy && ( {strategy && (
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}> <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card> <Card>
<Statistic title="Strategy" value={strategy.strategy} /> <Statistic
title="负载均衡策略"
value={strategyLabels[strategy.strategy] || strategy.strategy}
/>
</Card> </Card>
</Col> </Col>
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card> <Card>
<Statistic <Statistic
title="Multicast" title="组播状态"
value={strategy.multicast_available ? 'Available' : 'Unavailable'} value={strategy.multicast_available ? '可用' : '不可用'}
valueStyle={{ color: strategy.multicast_available ? '#52c41a' : '#999' }} valueStyle={{ color: strategy.multicast_available ? '#52c41a' : '#999' }}
/> />
</Card> </Card>
</Col> </Col>
<Col xs={24} sm={8}> <Col xs={24} sm={8}>
<Card> <Card>
<Statistic title="Edge Nodes" value={nodes.length} /> <Statistic title="边缘节点数" value={nodes.length} />
</Card> </Card>
</Col> </Col>
</Row> </Row>
)} )}
<Card <Card
title="Node List" title="节点列表"
extra={<Button icon={<ReloadOutlined />} onClick={loadData}>Refresh</Button>} extra={<Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>}
> >
<Table <Table
dataSource={nodes} dataSource={nodes}
frontend/src/admin/pages/Settings.tsx
+17 -17
View File
@@ -7,9 +7,9 @@ import api from '../../api/client'
const { Title } = Typography const { Title } = Typography
const strategies = [ const strategies = [
{ value: 'round-robin', label: 'Round Robin' }, { value: 'round-robin', label: '轮询 (Round-Robin)' },
{ value: 'weighted', label: 'Weighted' }, { value: 'weighted', label: '权重 (Weighted)' },
{ value: 'least-conn', label: 'Least Connections' }, { value: 'least-conn', label: '最少连接 (Least Connections)' },
] ]
export default function SettingsPage() { export default function SettingsPage() {
@@ -36,8 +36,8 @@ export default function SettingsPage() {
try { try {
await api.put(`/nodes/strategy?strategy=${val}&multicast_enabled=${multicastEnabled}`) await api.put(`/nodes/strategy?strategy=${val}&multicast_enabled=${multicastEnabled}`)
setStrategy(val) setStrategy(val)
message.success('Strategy updated') message.success('策略已更新')
} catch { message.error('Failed') } } catch { message.error('更新失败') }
setSaving(false) setSaving(false)
} }
@@ -45,36 +45,36 @@ export default function SettingsPage() {
setMulticastEnabled(val) setMulticastEnabled(val)
try { try {
await api.put(`/nodes/strategy?strategy=${strategy}&multicast_enabled=${val}`) await api.put(`/nodes/strategy?strategy=${strategy}&multicast_enabled=${val}`)
message.success('Multicast setting updated') message.success('组播设置已更新')
} catch { message.error('Failed') } } catch { message.error('更新失败') }
} }
return ( return (
<div style={{ maxWidth: 720 }}> <div style={{ maxWidth: 720 }}>
<Title level={3} style={{ marginBottom: 24 }}>Settings</Title> <Title level={3} style={{ marginBottom: 24 }}>系统设置</Title>
<Card title="Load Balancing" style={{ marginBottom: 24 }}> <Card title="负载均衡" style={{ marginBottom: 24 }}>
<Descriptions column={1} labelStyle={{ width: 180 }}> <Descriptions column={1} labelStyle={{ width: 140 }}>
<Descriptions.Item label="Strategy"> <Descriptions.Item label="均衡策略">
<Select <Select
value={strategy} value={strategy}
onChange={saveStrategy} onChange={saveStrategy}
options={strategies} options={strategies}
loading={saving} loading={saving}
style={{ width: 240 }} style={{ width: 280 }}
/> />
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
</Card> </Card>
<Card title="Multicast"> <Card title="组播设置">
<Descriptions column={1} labelStyle={{ width: 180 }}> <Descriptions column={1} labelStyle={{ width: 140 }}>
<Descriptions.Item label="Enable Multicast"> <Descriptions.Item label="启用组播">
<Switch checked={multicastEnabled} onChange={toggleMulticast} /> <Switch checked={multicastEnabled} onChange={toggleMulticast} />
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="Network Status"> <Descriptions.Item label="网络状态">
<span style={{ color: multicastAvailable ? '#52c41a' : '#999' }}> <span style={{ color: multicastAvailable ? '#52c41a' : '#999' }}>
{multicastAvailable ? 'Available' : 'Unavailable (fallback to unicast)'} {multicastAvailable ? '可用 — 优先使用组播分发' : '不可用 — 回退至单播'}
</span> </span>
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
frontend/src/admin/pages/StreamForm.tsx
+22 -22
View File
@@ -1,7 +1,7 @@
import { useState } from 'react' import { useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { import {
Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert, Divider, Card, Form, Input, Button, DatePicker, Typography, message, Space, Alert,
} from 'antd' } from 'antd'
import { CopyOutlined, ArrowLeftOutlined } from '@ant-design/icons' import { CopyOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { createStream } from '../../api/streams' import { createStream } from '../../api/streams'
@@ -24,9 +24,9 @@ export default function StreamForm() {
scheduled_at: values.scheduled_at?.toISOString(), scheduled_at: values.scheduled_at?.toISOString(),
}) })
setResult({ rtmp_url: res.rtmp_url, stream_key: res.stream_key }) setResult({ rtmp_url: res.rtmp_url, stream_key: res.stream_key })
message.success('Stream created') message.success('直播已创建')
} catch { } catch {
message.error('Failed to create stream') message.error('创建失败')
} }
setLoading(false) setLoading(false)
} }
@@ -34,14 +34,14 @@ export default function StreamForm() {
if (result) { if (result) {
return ( return (
<div style={{ maxWidth: 640 }}> <div style={{ maxWidth: 640 }}>
<Title level={3} style={{ marginBottom: 24 }}>Stream Created</Title> <Title level={3} style={{ marginBottom: 24 }}>直播已创建</Title>
<Alert <Alert
type="success" type="success"
message="Your stream is ready" message="推流信息已生成"
description={ description={
<Space direction="vertical" size="middle" style={{ width: '100%' }}> <Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div> <div>
<Text strong>Stream Key (UUID):</Text> <Text strong>推流码 (UUID):</Text>
<div style={{ <div style={{
marginTop: 8, padding: 12, marginTop: 8, padding: 12,
background: '#F5F2EE', borderRadius: 6, background: '#F5F2EE', borderRadius: 6,
@@ -52,7 +52,7 @@ export default function StreamForm() {
</div> </div>
</div> </div>
<div> <div>
<Text strong>RTMP Push URL:</Text> <Text strong>RTMP 推流地址:</Text>
<div style={{ <div style={{
marginTop: 8, padding: 12, marginTop: 8, padding: 12,
background: '#F5F2EE', borderRadius: 6, background: '#F5F2EE', borderRadius: 6,
@@ -72,15 +72,15 @@ export default function StreamForm() {
icon={<CopyOutlined />} icon={<CopyOutlined />}
onClick={() => { onClick={() => {
navigator.clipboard.writeText( navigator.clipboard.writeText(
`Stream Key: ${result.stream_key}\nRTMP URL: ${result.rtmp_url}` `推流码: ${result.stream_key}\nRTMP 地址: ${result.rtmp_url}`
) )
message.success('Copied to clipboard') message.success('已复制到剪贴板')
}} }}
> >
Copy All 复制全部
</Button> </Button>
<Button type="primary" onClick={() => navigate('/admin/streams')}> <Button type="primary" onClick={() => navigate('/admin/streams')}>
Back to Streams 返回列表
</Button> </Button>
</Space> </Space>
</div> </div>
@@ -95,30 +95,30 @@ export default function StreamForm() {
onClick={() => navigate('/admin/streams')} onClick={() => navigate('/admin/streams')}
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
> >
Back 返回
</Button> </Button>
<Card> <Card>
<Title level={3} style={{ marginBottom: 24 }}>New Stream</Title> <Title level={3} style={{ marginBottom: 24 }}>创建直播</Title>
<Form layout="vertical" onFinish={handleSubmit}> <Form layout="vertical" onFinish={handleSubmit}>
<Form.Item <Form.Item
name="title" name="title"
label="Title" label="直播标题"
rules={[{ required: true, message: 'Enter a title' }]} rules={[{ required: true, message: '请输入直播标题' }]}
> >
<Input placeholder="Stream title" size="large" /> <Input placeholder="输入直播标题" size="large" />
</Form.Item> </Form.Item>
<Form.Item name="description" label="Description"> <Form.Item name="description" label="直播简介">
<TextArea rows={3} placeholder="Stream description (optional)" /> <TextArea rows={3} placeholder="可选，直播内容简介" />
</Form.Item> </Form.Item>
<Form.Item name="cover_url" label="Cover Image URL"> <Form.Item name="cover_url" label="封面图片地址">
<Input placeholder="https://..." /> <Input placeholder="https://..." />
</Form.Item> </Form.Item>
<Form.Item name="scheduled_at" label="Scheduled Time"> <Form.Item name="scheduled_at" label="预定开播时间">
<DatePicker showTime style={{ width: '100%' }} size="large" /> <DatePicker showTime style={{ width: '100%' }} size="large" placeholder="选择预定时间" />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="primary" htmlType="submit" loading={loading} size="large" block> <Button type="primary" htmlType="submit" loading={loading} size="large" block>
Create Stream 创建直播
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
frontend/src/admin/pages/StreamList.tsx
+23 -23
View File
@@ -9,10 +9,10 @@ import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '
const { Title, Text } = Typography const { Title, Text } = Typography
const statusMap: Record<string, { color: string; label: string }> = { const statusMap: Record<string, { color: string; label: string }> = {
pending: { color: 'blue', label: 'Pending' }, pending: { color: 'blue', label: '待开播' },
live: { color: 'green', label: 'Live' }, live: { color: 'green', label: '直播中' },
ended: { color: 'default', label: 'Ended' }, ended: { color: 'default', label: '已结束' },
cancelled: { color: 'red', label: 'Cancelled' }, cancelled: { color: 'red', label: '已取消' },
} }
export default function StreamList() { export default function StreamList() {
@@ -27,47 +27,47 @@ export default function StreamList() {
try { try {
const data = await fetchStreams() const data = await fetchStreams()
setStreams(data) setStreams(data)
} catch { message.error('Failed to load streams') } } catch { message.error('加载失败') }
setLoading(false) setLoading(false)
} }
async function handleDelete(id: number) { async function handleDelete(id: number) {
try { try {
await deleteStream(id) await deleteStream(id)
message.success('Stream deleted') message.success('已删除')
loadData() loadData()
} catch { message.error('Delete failed') } } catch { message.error('删除失败') }
} }
async function handleGoLive(id: number) { async function handleGoLive(id: number) {
try { try {
await goLive(id) await goLive(id)
message.success('Stream is now live') message.success('已设置为直播中')
loadData() loadData()
} catch { message.error('Failed to set live') } } catch { message.error('操作失败') }
} }
async function handleEnd(id: number) { async function handleEnd(id: number) {
try { try {
await endStream(id) await endStream(id)
message.success('Stream ended') message.success('已结束直播')
loadData() loadData()
} catch { message.error('Failed to end') } } catch { message.error('操作失败') }
} }
const columns = [ const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 }, { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true }, { title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
{ {
title: 'Status', dataIndex: 'status', key: 'status', width: 110, title: '状态', dataIndex: 'status', key: 'status', width: 100,
render: (s: string) => { render: (s: string) => {
const info = statusMap[s] || { color: 'default', label: s } const info = statusMap[s] || { color: 'default', label: s }
return <Tag color={info.color}>{info.label}</Tag> 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: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
{ {
title: 'Actions', key: 'actions', width: 280, title: '操作', key: 'actions', width: 280,
render: (_: any, record: StreamInfo) => ( render: (_: any, record: StreamInfo) => (
<Space size="small"> <Space size="small">
<Button <Button
@@ -75,26 +75,26 @@ export default function StreamList() {
icon={<LinkOutlined />} icon={<LinkOutlined />}
onClick={() => { onClick={() => {
navigator.clipboard.writeText(record.stream_key) navigator.clipboard.writeText(record.stream_key)
message.success('Stream key copied') message.success('推流码已复制')
}} }}
> >
Copy Key 复制推流码
</Button> </Button>
{record.status !== 'live' ? ( {record.status !== 'live' ? (
<Tooltip title="Mark as live"> <Tooltip title="切换为直播中">
<Button size="small" type="primary" icon={<PlayCircleOutlined />} <Button size="small" type="primary" icon={<PlayCircleOutlined />}
onClick={() => handleGoLive(record.id)} ghost /> onClick={() => handleGoLive(record.id)} ghost />
</Tooltip> </Tooltip>
) : ( ) : (
<Tooltip title="End stream"> <Tooltip title="结束直播">
<Button size="small" icon={<StopOutlined />} <Button size="small" icon={<StopOutlined />}
onClick={() => handleEnd(record.id)} danger /> onClick={() => handleEnd(record.id)} danger />
</Tooltip> </Tooltip>
)} )}
<Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}> <Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
Watch 观看
</Button> </Button>
<Popconfirm title="Delete this stream?" onConfirm={() => handleDelete(record.id)}> <Popconfirm title="确定删除这条直播？" onConfirm={() => handleDelete(record.id)}>
<Button size="small" icon={<DeleteOutlined />} danger /> <Button size="small" icon={<DeleteOutlined />} danger />
</Popconfirm> </Popconfirm>
</Space> </Space>
@@ -105,9 +105,9 @@ export default function StreamList() {
return ( return (
<div> <div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
<Title level={3} style={{ margin: 0 }}>Streams</Title> <Title level={3} style={{ margin: 0 }}>直播列表</Title>
<Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}> <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/admin/streams/new')}>
New Stream 创建直播
</Button> </Button>
</div> </div>
<Table <Table
frontend/src/viewer/pages/WatchPage.tsx
+14 -26
View File
@@ -41,14 +41,13 @@ export default function WatchPage() {
setActiveQuality(data.qualities[0].label) setActiveQuality(data.qualities[0].label)
} }
} }
} catch { /* stream not ready */ } } catch { /* 直播尚未就绪 */ }
setLoading(false) setLoading(false)
} }
function autoSelectLine(lines: LineInfo[]): LineInfo { 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] if (enabled.length === 0) return lines[0]
const total = enabled.reduce((s, l) => s + l.weight, 0) const total = enabled.reduce((s, l) => s + l.weight, 0)
let r = Math.random() * total let r = Math.random() * total
for (const line of enabled) { for (const line of enabled) {
@@ -60,20 +59,13 @@ export default function WatchPage() {
useEffect(() => { useEffect(() => {
if (!info || !activeLine || !videoRef.current) return 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 if (!line) return
const quality = activeQuality const quality = activeQuality
? line.qualities.find((q) => q.label === activeQuality) ? line.qualities.find((q) => q.label === activeQuality)
: line.qualities[0] : line.qualities[0]
if (!quality) return if (!quality) return
if (hls) { hls.destroy() }
if (hls) {
hls.destroy()
}
const url = quality.url const url = quality.url
if (Hls.isSupported()) { if (Hls.isSupported()) {
const hlsInstance = new Hls({ const hlsInstance = new Hls({
@@ -87,13 +79,7 @@ export default function WatchPage() {
}) })
hlsInstance.on(Hls.Events.ERROR, (_event, data) => { hlsInstance.on(Hls.Events.ERROR, (_event, data) => {
if (data.fatal) { if (data.fatal) {
message.warning('Playback error, trying fallback...') message.warning('播放异常，尝试切换线路...')
if (line.unicast_fallback) {
const fbUrl = activeQuality
? line.unicast_fallback.replace('index.m3u8', `${activeQuality}/index.m3u8`)
: line.unicast_fallback
hlsInstance.loadSource(fbUrl)
}
} }
}) })
setHls(hlsInstance) setHls(hlsInstance)
@@ -113,11 +99,13 @@ export default function WatchPage() {
if (!info) { if (!info) {
return ( return (
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#FAF8F5' }}> <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#FAF8F5' }}>
<Empty description="Stream not found" /> <Empty description="未找到该直播" />
</div> </div>
) )
} }
const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
return ( return (
<Layout style={{ minHeight: '100vh', background: '#1A1A16' }}> <Layout style={{ minHeight: '100vh', background: '#1A1A16' }}>
<Header style={{ <Header style={{
@@ -132,41 +120,41 @@ export default function WatchPage() {
<Space> <Space>
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#fff' }} <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#fff' }}
onClick={() => window.close()}> onClick={() => window.close()}>
Back 返回
</Button> </Button>
<div> <div>
<Title level={5} style={{ color: '#fff', margin: 0 }}> <Title level={5} style={{ color: '#fff', margin: 0 }}>
{info.title} {info.title}
</Title> </Title>
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8 }}> <Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8 }}>
{info.status === 'live' ? 'LIVE' : info.status} {statusLabel}
</Tag> </Tag>
</div> </div>
</Space> </Space>
<Space size="middle"> <Space size="middle">
<div style={{ color: '#aaa', fontSize: 13 }}> <div style={{ color: '#aaa', fontSize: 13 }}>
<SignalFilled style={{ color: info.multicast_available ? '#52c41a' : '#666', marginRight: 4 }} /> <SignalFilled style={{ color: info.multicast_available ? '#52c41a' : '#666', marginRight: 4 }} />
{info.multicast_available ? 'Multicast' : 'Unicast'} {info.multicast_available ? '组播' : '单播'}
</div> </div>
<Select <Select
value={activeQuality} value={activeQuality}
onChange={setActiveQuality} onChange={setActiveQuality}
style={{ width: 100 }} style={{ width: 110 }}
size="small" size="small"
options={info.qualities.map((q) => ({ value: q.label, label: q.label }))} options={info.qualities.map((q) => ({ value: q.label, label: q.label }))}
popupMatchSelectWidth={false} placeholder="清晰度"
/> />
<Select <Select
value={activeLine} value={activeLine}
onChange={setActiveLine} onChange={setActiveLine}
style={{ width: 140 }} style={{ width: 160 }}
size="small" size="small"
options={info.lines.map((l) => ({ options={info.lines.map((l) => ({
value: l.node_id, value: l.node_id,
label: `${l.node_name} (${l.weight})`, label: `${l.node_name} (${l.weight})`,
}))} }))}
popupMatchSelectWidth={false}
prefix={<WifiOutlined />} prefix={<WifiOutlined />}
placeholder="选择线路"
/> />
</Space> </Space>
</Header> </Header>
@@ -196,7 +184,7 @@ export default function WatchPage() {
}}> }}>
<Space direction="vertical" align="center"> <Space direction="vertical" align="center">
<Spin size="large" /> <Spin size="large" />
<Text style={{ color: '#fff' }}>Waiting for stream to start...</Text> <Text style={{ color: '#fff' }}>等待主播开播...</Text>
</Space> </Space>
</div> </div>
)} )}