JKVideo/livePlan.md

B站直播详情页 实现计划

Context

现有应用已有直播列表（LiveCard + useLiveList），但点击卡片只是用 Linking.openURL 跳转到外部浏览器，没有应用内直播详情页。本次目标是实现一个完整的 in-app 直播详情页，包括 HLS 播放器、主播信息、房间简介。

---

直播详情页功能需求（MVP）

功能	说明
直播播放器	HLS (m3u8) 流，react-native-video 播放，支持全屏
房间信息	标题、分类（父/子分区）、在线人数
主播信息	头像、昵称
关注按钮	展示样式，不调 API（bili_jct 不在当前登录流程中）
离线状态	若 live_status !== 1 或无流 URL，显示"暂未开播"

跳过（Post-MVP）： 实时弹幕WebSocket、质量切换、送礼、直播间聊天

---

Bilibili 直播 API

函数	接口	说明
getLiveRoomDetail(roomId)	LIVE_BASE/room/v1/Room/get_info	房间详情（标题、分区、live_status、在线人数）
getLiveAnchorInfo(roomId)	LIVE_BASE/live_user/v1/UserInfo/get_anchor_in_room	主播信息（uid、uname、face）
getLiveStreamUrl(roomId)	LIVE_BASE/xlive/web-room/v2/index/getRoomPlayInfo	获取 HLS/FLV 流 URL

流 URL 提取路径：

data.playurl_info.playurl.stream[]
  → protocol_name === 'http_hls'
  → format[].format_name === 'fmp4' or 'ts'
  → codec[].codec_name === 'avc'
  → url_info[0].host + codec.base_url

---

文件变更清单（按依赖顺序）

新增文件

1. livePlan.md — 本文件
2. services/types.ts — 添加 LiveRoomDetail、LiveAnchorInfo、LiveStreamInfo 类型
3. services/bilibili.ts — 添加 getLiveRoomDetail、getLiveAnchorInfo、getLiveStreamUrl
4. hooks/useLiveDetail.ts — 直播详情 hook（并行拉取房间信息+主播信息）
5. components/LivePlayer.tsx — 直播播放器（web 提示 / native 用 react-native-video HLS）
6. app/live/_layout.tsx — Stack layout（同 app/video/_layout.tsx）
7. app/live/[roomId].tsx — 直播详情页主文件

修改文件

8. dev-proxy.js — 添加 /bilibili-live 代理路由（修复 web 端直播 API）
9. app/_layout.tsx — 注册 live Stack.Screen（动画同 video）
10. app/index.tsx — 替换 Linking.openURL 为 router.push('/live/...')，给直播 tab 的卡片加 onPress

---

组件结构

app/live/[roomId].tsx
  TopBar (返回 + 标题)
  LivePlayer
    ├── web: "请在手机端观看直播"
    └── native: <Video source={{uri: hlsUrl}} /> + 简单控制栏 (LIVE 标牌 / 全屏)
  ScrollView
    房间标题
    在线人数 + LivePulse
    分区标签 (parent_area_name > area_name)
    分割线
    主播行 (头像 + uname + 关注按钮)
    房间描述文本

---

数据流

LiveCard onPress → router.push('/live/[roomId]')
  useLiveDetail(roomId)
    Promise.all([getLiveRoomDetail, getLiveAnchorInfo])
    if live_status===1 → getLiveStreamUrl → hlsUrl
      → LivePlayer <Video source={{uri: hlsUrl}} />

---

注意事项

1. roomId 类型：useLocalSearchParams 返回 string，需 parseInt(roomId, 10)
2. router.push 类型：使用 as any 规避 TypeScript 动态路由报错
3. 流 URL 提取：用可选链 (?.) 兜底，失败时返回 { hlsUrl: '', flvUrl: '', qn: 0 }，让 LivePlayer 显示离线状态
4. live 无 onEnd：直播流没有结束，不处理 onEnd 事件
5. web 端 HLS：<video> 标签仅 Safari 原生支持 m3u8，Chrome 不支持；web 端显示提示文字即可

---

验证方式

1. expo start → 扫码打开 → 首页直播 tab → 点击直播卡片 → 进入详情页
2. 验证：播放器加载 → 视频流开始缓冲 → 显示主播信息与房间标题
3. 验证：点击全屏 → 横屏全屏播放
4. 验证：关闭直播间（或选一个离线房间）→ 显示"暂未开播"占位图
5. web 端：expo start --web → 直播详情页显示"请在手机端观看直播"