Files
JKVideo/hooks/useVideoList.ts

56 lines
1.9 KiB
TypeScript
Raw Normal View History

2026-03-13 21:52:09 +08:00
import { useState, useCallback, useRef, useMemo } from 'react';
2026-03-14 11:55:45 +08:00
import { getRecommendFeed, getLiveList } from '../services/bilibili';
import type { VideoItem, LiveRoom } from '../services/types';
export function useVideoList() {
2026-03-13 21:52:09 +08:00
const [pages, setPages] = useState<VideoItem[][]>([]);
2026-03-14 11:55:45 +08:00
const [liveRooms, setLiveRooms] = useState<LiveRoom[]>([]);
const [loading, setLoading] = useState(false);
const [refreshing, setRefreshing] = useState(false);
2026-03-11 20:53:18 +08:00
// Use refs to avoid stale closures — load() has stable identity
const loadingRef = useRef(false);
const freshIdxRef = useRef(0);
const load = useCallback(async (reset = false) => {
2026-03-16 21:13:26 +08:00
if (loadingRef.current) {
if (reset) setRefreshing(false);
return;
}
2026-03-11 20:53:18 +08:00
loadingRef.current = true;
2026-03-16 21:13:26 +08:00
const idx = freshIdxRef.current;
setLoading(true);
try {
2026-03-14 11:55:45 +08:00
const promises: [Promise<VideoItem[]>, Promise<LiveRoom[]>] = [
getRecommendFeed(idx),
2026-03-16 21:13:26 +08:00
(reset || idx === 0)
2026-03-14 11:55:45 +08:00
? getLiveList(1, 0).catch(() => [] as LiveRoom[])
: Promise.resolve([] as LiveRoom[]),
];
const [data, live] = await Promise.all(promises);
2026-03-13 21:52:09 +08:00
setPages(prev => reset ? [data] : [...prev, data]);
2026-03-14 11:55:45 +08:00
if (reset || idx === 0) {
// Take top 2 by online count
2026-03-14 12:27:03 +08:00
const sorted = [...live].sort((a, b) => b.online - a.online).slice(0, 10);
2026-03-14 11:55:45 +08:00
setLiveRooms(sorted);
}
2026-03-11 20:53:18 +08:00
freshIdxRef.current = idx + 1;
} catch (e) {
console.error('Failed to load videos', e);
} finally {
2026-03-11 20:53:18 +08:00
loadingRef.current = false;
setLoading(false);
setRefreshing(false);
}
2026-03-11 20:53:18 +08:00
}, []); // stable — no stale closure risk
const refresh = useCallback(() => {
2026-03-16 21:13:26 +08:00
console.log('Refreshing video list');
setRefreshing(true);
load(true);
}, [load]);
2026-03-13 21:52:09 +08:00
const videos = useMemo(() => pages.flat(), [pages]);
2026-03-14 11:55:45 +08:00
return { videos, pages, liveRooms, loading, refreshing, load, refresh };
}