Files
JKVideo/hooks/useLiveDetail.ts
Developer e1fa8cc347 feat: 视频推荐关联当前视频、UP主信息展示、直播全屏修复及UI优化
- 推荐列表改用 getVideoRelated 基于当前 bvid 推荐,与首页 feed 解耦
- 视频详情页 UP主名称下方展示粉丝数和视频数
- 推荐视频点击改为 router.replace 避免页面堆叠
- 直播全屏改用 position:absolute,解决退出全屏视频重建暂停问题
- 退出全屏时直播自动暂停
- 直播画质选中状态修复,过滤杜比/4K 画质选项
- 直播画质面板改为居中 Modal 弹出框
- 视频详情 Tab 按钮左对齐,评论排序及设置页按钮统一实心背景风格
2026-03-25 12:03:28 +08:00

62 lines
1.7 KiB
TypeScript

import { useState, useEffect, useCallback } from 'react';
import { getLiveRoomDetail, getLiveAnchorInfo, getLiveStreamUrl } from '../services/bilibili';
import type { LiveRoomDetail, LiveAnchorInfo, LiveStreamInfo } from '../services/types';
interface LiveDetailState {
room: LiveRoomDetail | null;
anchor: LiveAnchorInfo | null;
stream: LiveStreamInfo | null;
loading: boolean;
error: string | null;
}
export function useLiveDetail(roomId: number) {
const [state, setState] = useState<LiveDetailState>({
room: null,
anchor: null,
stream: null,
loading: true,
error: null,
});
useEffect(() => {
if (!roomId) return;
let cancelled = false;
setState({ room: null, anchor: null, stream: null, loading: true, error: null });
async function fetch() {
try {
const [room, anchor] = await Promise.all([
getLiveRoomDetail(roomId),
getLiveAnchorInfo(roomId),
]);
if (cancelled) return;
let stream: LiveStreamInfo = { hlsUrl: '', flvUrl: '', qn: 0, qualities: [] };
if (room.live_status === 1) {
stream = await getLiveStreamUrl(roomId);
}
if (cancelled) return;
setState({ room, anchor, stream, loading: false, error: null });
} catch (e: any) {
if (cancelled) return;
setState(prev => ({ ...prev, loading: false, error: e?.message ?? '加载失败' }));
}
}
fetch();
return () => { cancelled = true; };
}, [roomId]);
const changeQuality = useCallback(async (qn: number) => {
try {
const stream = await getLiveStreamUrl(roomId, qn);
setState(prev => ({ ...prev, stream: { ...stream, qn } }));
} catch { /* ignore */ }
}, [roomId]);
return { ...state, changeQuality };
}