feat: 直播小窗播放(PiP)功能

- 新增 store/liveStore.ts:Zustand store,存储小窗直播状态(roomId/title/cover/hlsUrl)
- 新增 components/LiveMiniPlayer.tsx:可拖动悬浮迷你直播播放器
  - 原生端实际播放 HLS 流(react-native-video,有声)
  - Web 端降级展示封面图 + LIVE 徽标
  - LIVE 红点徽标 + 标题条底部
  - 关闭按钮(×)和点击进入直播间
  - HLS 出错时自动关闭(onError → clearLive)
  - 视频 MiniPlayer 激活时自动上移避免重叠
- _layout.tsx:全局挂载 <LiveMiniPlayer />
- live/[roomId].tsx:顶部栏添加小窗按钮(browsers-outline)
  - 仅直播中且有流地址时显示,离线时占位保持 title 居中
  - 点击后 setLive + router.back(),返回首页继续看直播
  - 进入同房间时自动 clearLive() 避免双播
This commit is contained in:
Developer
2026-03-25 13:16:16 +08:00
parent 13c73cdb25
commit 33a3148b38
4 changed files with 235 additions and 1 deletions

23
store/liveStore.ts Normal file
View File

@@ -0,0 +1,23 @@
import { create } from 'zustand';
interface LiveStore {
isActive: boolean;
roomId: number;
title: string;
cover: string; // room.keyframe直播截图用于 web 端降级封面
hlsUrl: string;
setLive: (roomId: number, title: string, cover: string, hlsUrl: string) => void;
clearLive: () => void;
}
export const useLiveStore = create<LiveStore>(set => ({
isActive: false,
roomId: 0,
title: '',
cover: '',
hlsUrl: '',
setLive: (roomId, title, cover, hlsUrl) =>
set({ isActive: true, roomId, title, cover, hlsUrl }),
clearLive: () =>
set({ isActive: false, roomId: 0, title: '', cover: '', hlsUrl: '' }),
}));