live/frontend/src/viewer/pages/WatchPage.tsx

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 { ArrowLeftOutlined, WifiOutlined, SignalFilled } from '@ant-design/icons'
import Hls from 'hls.js'
import { getWatchUrls, type WatchInfo, type LineInfo } from '../../api/streams'
import { useBrand } from '../../brand/BrandContext'

const { Title, Text } = Typography

export default function WatchPage() {
  const { brand } = useBrand()
  const navigate = useNavigate()
  const { id } = useParams<{ id: string }>()
  const videoRef = useRef<HTMLVideoElement>(null)
  const [info, setInfo] = useState<WatchInfo | null>(null)
  const [loading, setLoading] = useState(true)
  const [activeLine, setActiveLine] = useState<string>('')
  const [activeQuality, setActiveQuality] = useState<string>('')
  const [hls, setHls] = useState<Hls | null>(null)

  useEffect(() => {
    if (!id) return
    loadInfo()
    const timer = setInterval(loadInfo, 15000)
    return () => { clearInterval(timer); if (hls) hls.destroy() }
  }, [id])

  async function loadInfo() {
    if (!id) return
    try {
      const data = await getWatchUrls(parseInt(id))
      setInfo(data)
      if (!activeLine && data.lines.length > 0) {
        const best = autoSelectLine(data.lines)
        setActiveLine(best.node_id)
        if (data.qualities.length > 0) setActiveQuality(data.qualities[0].label)
      }
    } catch { }
    setLoading(false)
  }

  function autoSelectLine(lines: LineInfo[]): LineInfo {
    const enabled = lines.filter(l => l.weight > 0)
    if (enabled.length === 0) return lines[0]
    const total = enabled.reduce((s, l) => s + l.weight, 0)
    let r = Math.random() * total
    for (const line of enabled) { r -= line.weight; if (r <= 0) return line }
    return enabled[enabled.length - 1]
  }

  useEffect(() => {
    if (!info || !activeLine || !videoRef.current) return
    const line = info.lines.find(l => l.node_id === activeLine)
    if (!line) return
    const quality = activeQuality ? line.qualities.find(q => q.label === activeQuality) : line.qualities[0]
    if (!quality) return
    if (hls) hls.destroy()
    const url = quality.url
    if (Hls.isSupported()) {
      const 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 (!info) return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F6F3ED' }}><Empty description="未找到该直播" /></div>

  const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status

  return (
    <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: '#8B867D' }} onClick={() => navigate('/')}>返回</Button>
          <div>
            <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: '#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="清晰度" />
          <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' }} />
          {info.status !== 'live' && (
            <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(232,227,216,0.6)', fontSize: 16, fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
                  等待主播开播...
                </Text>
              </Space>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}