124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import {
|
|
Table, Button, Tag, Space, Modal, Typography, message, Tooltip, Popconfirm,
|
|
} from 'antd'
|
|
import { PlusOutlined, PlayCircleOutlined, StopOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
|
|
import { fetchStreams, deleteStream, goLive, endStream, type StreamInfo } from '../../api/streams'
|
|
|
|
const { Title, Text } = Typography
|
|
|
|
const statusMap: Record<string, { color: string; label: string }> = {
|
|
pending: { color: 'blue', label: '待开播' },
|
|
live: { color: 'green', label: '直播中' },
|
|
ended: { color: 'default', label: '已结束' },
|
|
cancelled: { color: 'red', label: '已取消' },
|
|
}
|
|
|
|
export default function StreamList() {
|
|
const [streams, setStreams] = useState<StreamInfo[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(() => { loadData() }, [])
|
|
|
|
async function loadData() {
|
|
setLoading(true)
|
|
try {
|
|
const data = await fetchStreams()
|
|
setStreams(data)
|
|
} catch { message.error('加载失败') }
|
|
setLoading(false)
|
|
}
|
|
|
|
async function handleDelete(id: number) {
|
|
try {
|
|
await deleteStream(id)
|
|
message.success('已删除')
|
|
loadData()
|
|
} catch { message.error('删除失败') }
|
|
}
|
|
|
|
async function handleGoLive(id: number) {
|
|
try {
|
|
await goLive(id)
|
|
message.success('已设置为直播中')
|
|
loadData()
|
|
} catch { message.error('操作失败') }
|
|
}
|
|
|
|
async function handleEnd(id: number) {
|
|
try {
|
|
await endStream(id)
|
|
message.success('已结束直播')
|
|
loadData()
|
|
} catch { message.error('操作失败') }
|
|
}
|
|
|
|
const columns = [
|
|
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
|
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
|
|
{
|
|
title: '状态', dataIndex: 'status', key: 'status', width: 100,
|
|
render: (s: string) => {
|
|
const info = statusMap[s] || { color: 'default', label: s }
|
|
return <Tag color={info.color}>{info.label}</Tag>
|
|
},
|
|
},
|
|
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
|
|
{
|
|
title: '操作', key: 'actions', width: 280,
|
|
render: (_: any, record: StreamInfo) => (
|
|
<Space size="small">
|
|
<Button
|
|
size="small"
|
|
icon={<LinkOutlined />}
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(record.stream_key)
|
|
message.success('推流码已复制')
|
|
}}
|
|
>
|
|
复制推流码
|
|
</Button>
|
|
{record.status !== 'live' ? (
|
|
<Tooltip title="切换为直播中">
|
|
<Button size="small" type="primary" icon={<PlayCircleOutlined />}
|
|
onClick={() => handleGoLive(record.id)} ghost />
|
|
</Tooltip>
|
|
) : (
|
|
<Tooltip title="结束直播">
|
|
<Button size="small" icon={<StopOutlined />}
|
|
onClick={() => handleEnd(record.id)} danger />
|
|
</Tooltip>
|
|
)}
|
|
<Button size="small" onClick={() => window.open(`/watch/${record.id}`, '_blank')}>
|
|
观看
|
|
</Button>
|
|
<Popconfirm title="确定删除这条直播？" onConfirm={() => handleDelete(record.id)}>
|
|
<Button size="small" icon={<DeleteOutlined />} danger />
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
|
<Title level={3} style={{ margin: 0 }}>直播列表</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"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|