feat: integrate danmaku fetching and list in video detail page

This commit is contained in:
Developer
2026-03-10 22:53:35 +08:00
parent 6871d061fc
commit a9b5b364a2

View File

@@ -8,6 +8,9 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { VideoPlayer } from '../../components/VideoPlayer'; import { VideoPlayer } from '../../components/VideoPlayer';
import { CommentItem } from '../../components/CommentItem'; import { CommentItem } from '../../components/CommentItem';
import { getDanmaku } from '../../services/bilibili';
import { DanmakuItem } from '../../services/types';
import DanmakuList from '../../components/DanmakuList';
import { useVideoDetail } from '../../hooks/useVideoDetail'; import { useVideoDetail } from '../../hooks/useVideoDetail';
import { useComments } from '../../hooks/useComments'; import { useComments } from '../../hooks/useComments';
import { useVideoStore } from '../../store/videoStore'; import { useVideoStore } from '../../store/videoStore';
@@ -22,6 +25,9 @@ export default function VideoDetailScreen() {
const { video, playData, loading: videoLoading, qualities, currentQn, changeQuality } = useVideoDetail(bvid as string); const { video, playData, loading: videoLoading, qualities, currentQn, changeQuality } = useVideoDetail(bvid as string);
const { comments, loading: cmtLoading, load: loadComments } = useComments(video?.aid ?? 0); const { comments, loading: cmtLoading, load: loadComments } = useComments(video?.aid ?? 0);
const [tab, setTab] = useState<Tab>('comments'); const [tab, setTab] = useState<Tab>('comments');
const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
const [currentTime, setCurrentTime] = useState(0);
const [showDanmakuList, setShowDanmakuList] = useState(true);
const { setVideo, clearVideo } = useVideoStore(); const { setVideo, clearVideo } = useVideoStore();
useEffect(() => { useEffect(() => {
@@ -32,6 +38,11 @@ export default function VideoDetailScreen() {
if (video?.aid) loadComments(); if (video?.aid) loadComments();
}, [video?.aid]); }, [video?.aid]);
useEffect(() => {
if (!video?.cid) return;
getDanmaku(video.cid).then(setDanmakus);
}, [video?.cid]);
function handleMiniPlayer() { function handleMiniPlayer() {
if (video) { if (video) {
setVideo(bvid as string, video.title, video.pic); setVideo(bvid as string, video.title, video.pic);
@@ -59,6 +70,15 @@ export default function VideoDetailScreen() {
onMiniPlayer={handleMiniPlayer} onMiniPlayer={handleMiniPlayer}
bvid={bvid as string} bvid={bvid as string}
cid={video?.cid} cid={video?.cid}
danmakus={danmakus}
onTimeUpdate={setCurrentTime}
/>
<DanmakuList
danmakus={danmakus}
currentTime={currentTime}
visible={showDanmakuList}
onToggle={() => setShowDanmakuList(v => !v)}
/> />
<ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}> <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>