diff --git a/components/NativeVideoPlayer.tsx b/components/NativeVideoPlayer.tsx index 6b1e17d..9ad15d6 100644 --- a/components/NativeVideoPlayer.tsx +++ b/components/NativeVideoPlayer.tsx @@ -1,17 +1,16 @@ import React, { useState, useRef, useEffect, useCallback } from 'react'; import { - View, StyleSheet, Dimensions, TouchableOpacity, TouchableWithoutFeedback, - Text, Modal, Image, PanResponder, + View, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, + Text, Modal, Image, PanResponder, useWindowDimensions, } from 'react-native'; import Video, { VideoRef } from 'react-native-video'; import { LinearGradient } from 'expo-linear-gradient'; import { Ionicons } from '@expo/vector-icons'; -import type { PlayUrlResponse, VideoShotData } from '../services/types'; +import type { PlayUrlResponse, VideoShotData, DanmakuItem } from '../services/types'; import { buildDashMpdUri } from '../utils/dash'; import { getHeatmap, getVideoShot } from '../services/bilibili'; +import { DanmakuOverlay } from './DanmakuOverlay'; -const { width: SCREEN_W } = Dimensions.get('window'); -const VIDEO_H = SCREEN_W * 0.5625; const BAR_H = 3; const BALL = 12; const BALL_ACTIVE = 16; @@ -80,12 +79,19 @@ interface Props { style?: object; bvid?: string; cid?: number; + danmakus?: DanmakuItem[]; + isFullscreen?: boolean; + onTimeUpdate?: (t: number) => void; + initialTime?: number; } export function NativeVideoPlayer({ playData, qualities, currentQn, onQualityChange, onFullscreen, onMiniPlayer, style, - bvid, cid, + bvid, cid, danmakus, isFullscreen, onTimeUpdate, initialTime, }: Props) { + const { width: SCREEN_W, height: SCREEN_H } = useWindowDimensions(); + const VIDEO_H = SCREEN_W * 0.5625; + const [resolvedUrl, setResolvedUrl] = useState(); const isDash = !!playData?.dash; @@ -103,11 +109,12 @@ export function NativeVideoPlayer({ const isSeekingRef = useRef(false); const [touchX, setTouchX] = useState(null); const barOffsetX = useRef(0); - const barWidthRef = useRef(SCREEN_W); + const barWidthRef = useRef(300); const trackRef = useRef(null); const [heatSegments, setHeatSegments] = useState([]); const [shots, setShots] = useState(null); + const [showDanmaku, setShowDanmaku] = useState(true); const videoRef = useRef(null); const currentDesc = qualities.find(q => q.qn === currentQn)?.desc ?? String(currentQn || 'HD'); @@ -244,7 +251,7 @@ export function NativeVideoPlayer({ return ( - + {resolvedUrl ? (