lan/JKVideo
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/tiajinsha/JKVideo synced 2026-07-08 07:28:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

bug修改

Browse Source
This commit is contained in:
Developer
2026-05-12 20:27:30 +08:00
parent b0929a8094
commit 53c67079a1
23 changed files with 1026 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/BigVideoCard.tsx
View File

@@ -24,7 +24,9 @@ import { coverImageUrl } from "../utils/imageUrl";
import { useSettingsStore } from "../store/settingsStore";
import { useTheme } from "../utils/theme";
import { useLiveStore } from "../store/liveStore";
import { usePlayUrlCache } from "../store/playUrlCache";
import { formatCount, formatDuration } from "../utils/format";
import { useVisibleBigKeyStore } from "../store/visibleBigKeyStore";
import type { VideoItem } from "../services/types";
const HEADERS = {
@@ -45,17 +47,16 @@ function clamp(v: number, lo: number, hi: number) {
interface Props {
item: VideoItem;
isVisible: boolean;
isScrolling?: boolean;
onPress: () => void;
}
export const BigVideoCard = React.memo(function BigVideoCard({
item,
isVisible,
isScrolling,
onPress,
}: Props) {
const isVisible = useVisibleBigKeyStore((s) => s.key) === item.bvid;
const { width: SCREEN_W } = useWindowDimensions();
const trafficSaving = useSettingsStore(s => s.trafficSaving);
const liveActive = useLiveStore(s => s.isActive);
@@ -79,6 +80,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({
const durationRef = useRef(0);
const seekingRef = useRef(false);
const [seekLabel, setSeekLabel] = useState<string | null>(null);
const lastProgressUpdate = useRef(0);
// Reset video state when the item changes
useEffect(() => {
@@ -98,6 +100,18 @@ export const BigVideoCard = React.memo(function BigVideoCard({
let cancelled = false;
(async () => {
try {
// 命中缓存（5min TTL）直接复用
const cached = usePlayUrlCache.getState().get(item.bvid, 16);
if (cached) {
if (cancelled) return;
if (cached.playData.dash) {
setIsDash(true);
setVideoUrl(cached.mpdUri ?? cached.playData.dash.video[0]?.baseUrl);
} else {
setVideoUrl(cached.playData.durl?.[0]?.url);
}
return;
}
let cid = item.cid;
if (!cid) {
const detail = await getVideoDetail(item.bvid);
@@ -113,13 +127,22 @@ export const BigVideoCard = React.memo(function BigVideoCard({
if (playData.dash) {
if (!cancelled) setIsDash(true);
try {
const mpdUri = await buildDashMpdUri(playData, 16);
if (!cancelled) setVideoUrl(mpdUri);
const mpdUri = await buildDashMpdUri(playData, 16, item.bvid);
if (!cancelled) {
setVideoUrl(mpdUri);
usePlayUrlCache.getState().set(item.bvid, 16, { playData, mpdUri });
}
} catch {
if (!cancelled) setVideoUrl(playData.dash.video[0]?.baseUrl);
if (!cancelled) {
setVideoUrl(playData.dash.video[0]?.baseUrl);
usePlayUrlCache.getState().set(item.bvid, 16, { playData });
}
}
} else {
if (!cancelled) setVideoUrl(playData.durl?.[0]?.url);
if (!cancelled) {
setVideoUrl(playData.durl?.[0]?.url);
usePlayUrlCache.getState().set(item.bvid, 16, { playData });
}
}
} catch (e) {
console.warn("BigVideoCard: failed to load play URL", e);
@@ -252,8 +275,14 @@ export const BigVideoCard = React.memo(function BigVideoCard({
seekableDuration: dur,
playableDuration: buf,
}) => {
if (!seekingRef.current) setCurrentTime(ct);
if (dur > 0) setDuration(dur);
currentTimeRef.current = ct;
if (dur > 0) durationRef.current = dur;
if (seekingRef.current) return;
const now = Date.now();
if (now - lastProgressUpdate.current < 450) return;
lastProgressUpdate.current = now;
setCurrentTime(ct);
if (dur > 0 && Math.abs(dur - duration) > 1) setDuration(dur);
setBuffered(buf);
}}
/>

12
components/DanmakuOverlay.tsx
View File

@@ -13,6 +13,10 @@ interface Props {
const LANE_COUNT = 5;
const LANE_H = 28;
// 同屏弹幕上限（原 30，提至 60）
const MAX_ACTIVE = 60;
// activated 集合阈值，触达后整体清零防止内存膨胀
const ACTIVATED_LIMIT = 1000;
interface ActiveDanmaku {
id: string;
@@ -73,7 +77,10 @@ export default function DanmakuOverlay({ danmakus, currentTime, screenWidth, scr
const newItems: ActiveDanmaku[] = [];
if (activated.current.size > 200) activated.current.clear(); // prevent memory leak
if (activated.current.size > ACTIVATED_LIMIT) {
activated.current.clear(); // prevent memory leak
idCounter.current = 0;
}
for (const item of candidates) {
const key = `${item.time}_${item.text}`;
activated.current.add(key);
@@ -124,8 +131,7 @@ export default function DanmakuOverlay({ danmakus, currentTime, screenWidth, scr
if (newItems.length > 0) {
setActiveDanmakus(prev => {
const combined = [...prev, ...newItems];
// Cap at 30 simultaneous danmakus
return combined.slice(Math.max(0, combined.length - 30));
return combined.slice(Math.max(0, combined.length - MAX_ACTIVE));
});
}
}, [currentTime, visible, danmakus, pickLane, screenWidth]);

86
components/LiveMiniPlayer.tsx
View File

@@ -1,12 +1,10 @@
import React, { useRef } from 'react';
import React, { useState, useEffect } from 'react';
import {
View,
Text,
Image,
StyleSheet,
Animated,
PanResponder,
Dimensions,
Platform,
} from 'react-native';
import { useRouter } from 'expo-router';
@@ -15,6 +13,7 @@ import { Ionicons } from '@expo/vector-icons';
import { useLiveStore } from '../store/liveStore';
import { useVideoStore } from '../store/videoStore';
import { proxyImageUrl } from '../utils/imageUrl';
import { useMiniDrag } from '../hooks/useMiniDrag';
const MINI_W = 160;
const MINI_H = 90;
@@ -25,70 +24,29 @@ const LIVE_HEADERS = {
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
};
function snapRelease(
pan: Animated.ValueXY,
curX: number,
curY: number,
sw: number,
sh: number,
) {
const snapRight = 0;
const snapLeft = -(sw - MINI_W - 24);
const snapX = curX < snapLeft / 2 ? snapLeft : snapRight;
const clampedY = Math.max(-sh + MINI_H + 60, Math.min(60, curY));
Animated.spring(pan, {
toValue: { x: snapX, y: clampedY },
useNativeDriver: false,
tension: 120,
friction: 10,
}).start();
}
export function LiveMiniPlayer() {
const { isActive, roomId, title, cover, hlsUrl, clearLive } = useLiveStore();
const videoMiniActive = useVideoStore(s => s.isActive);
const router = useRouter();
const insets = useSafeAreaInsets();
const pan = useRef(new Animated.ValueXY()).current;
const isDragging = useRef(false);
// 关闭时先把 Video 暂停一帧，让 native 释放连接，再 unmount
const [paused, setPaused] = useState(false);
// 用 ref 保持最新值，避免 PanResponder 闭包捕获过期的初始值
const storeRef = useRef({ roomId, clearLive, router });
storeRef.current = { roomId, clearLive, router };
// 切换到不同直播间时重置 paused
useEffect(() => {
if (isActive) setPaused(false);
}, [hlsUrl, isActive]);
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
isDragging.current = false;
pan.setOffset({ x: (pan.x as any)._value, y: (pan.y as any)._value });
pan.setValue({ x: 0, y: 0 });
},
onPanResponderMove: (_, gs) => {
if (Math.abs(gs.dx) > 5 || Math.abs(gs.dy) > 5) {
isDragging.current = true;
}
pan.x.setValue(gs.dx);
pan.y.setValue(gs.dy);
},
onPanResponderRelease: (evt) => {
pan.flattenOffset();
if (!isDragging.current) {
const { locationX, locationY } = evt.nativeEvent;
const { roomId: rid, clearLive: clear, router: r } = storeRef.current;
if (locationX > MINI_W - 28 && locationY < 28) {
clear();
} else {
r.push(`/live/${rid}` as any);
}
return;
}
const { width: sw, height: sh } = Dimensions.get('window');
snapRelease(pan, (pan.x as any)._value, (pan.y as any)._value, sw, sh);
},
onPanResponderTerminate: () => { pan.flattenOffset(); },
}),
).current;
const { pan, panHandlers } = useMiniDrag({
width: MINI_W,
height: MINI_H,
hitClose: (x, y) => x > MINI_W - 28 && y < 28,
onTap: () => router.push(`/live/${roomId}` as any),
onClose: () => {
setPaused(true);
requestAnimationFrame(() => clearLive());
},
});
if (!isActive) return null;
@@ -99,7 +57,7 @@ export function LiveMiniPlayer() {
return (
<Animated.View
style={[styles.container, { bottom: bottomOffset, transform: pan.getTranslateTransform() }]}
{...panResponder.panHandlers}
{...panHandlers}
>
<Image source={{ uri: proxyImageUrl(cover) }} style={styles.videoArea} />
<View style={styles.liveBadge} pointerEvents="none">
@@ -120,7 +78,7 @@ export function LiveMiniPlayer() {
return (
<Animated.View
style={[styles.container, { bottom: bottomOffset, transform: pan.getTranslateTransform() }]}
{...panResponder.panHandlers}
{...panHandlers}
>
{/* pointerEvents="none" 防止 Video 原生层吞噬触摸事件 */}
<View style={styles.videoArea} pointerEvents="none">
@@ -131,7 +89,7 @@ export function LiveMiniPlayer() {
resizeMode="cover"
controls={false}
muted={false}
paused={false}
paused={paused}
repeat={false}
onError={clearLive}
/>
@@ -141,7 +99,7 @@ export function LiveMiniPlayer() {
<Text style={styles.liveText}>LIVE</Text>
</View>
<Text style={styles.titleText} numberOfLines={1}>{title}</Text>
{/* 关闭按钮视觉层，点击逻辑由 onPanResponderRelease 坐标判断 */}
{/* 关闭按钮视觉层，点击逻辑由 hitClose 坐标判断 */}
<View style={styles.closeBtn}>
<Ionicons name="close" size={14} color="#fff" />
</View>

69
components/MiniPlayer.tsx
View File

@@ -1,13 +1,11 @@
import React, { useRef } from 'react';
import {
View, Text, Image, StyleSheet,
Animated, PanResponder, Dimensions,
} from 'react-native';
import React from 'react';
import { View, Text, Image, StyleSheet, Animated } from 'react-native';
import { useRouter } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useVideoStore } from '../store/videoStore';
import { proxyImageUrl } from '../utils/imageUrl';
import { useMiniDrag } from '../hooks/useMiniDrag';
const MINI_W = 160;
const MINI_H = 90;
@@ -16,57 +14,14 @@ export function MiniPlayer() {
const { isActive, bvid, title, cover, clearVideo } = useVideoStore();
const router = useRouter();
const insets = useSafeAreaInsets();
const pan = useRef(new Animated.ValueXY()).current;
const isDragging = useRef(false);
// 用 ref 保持最新值，避免 PanResponder 闭包捕获过期的初始值
const storeRef = useRef({ bvid, clearVideo, router });
storeRef.current = { bvid, clearVideo, router };
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
isDragging.current = false;
pan.setOffset({ x: (pan.x as any)._value, y: (pan.y as any)._value });
pan.setValue({ x: 0, y: 0 });
},
onPanResponderMove: (_, gs) => {
if (Math.abs(gs.dx) > 5 || Math.abs(gs.dy) > 5) {
isDragging.current = true;
}
pan.x.setValue(gs.dx);
pan.y.setValue(gs.dy);
},
onPanResponderRelease: (evt) => {
pan.flattenOffset();
if (!isDragging.current) {
const { locationX, locationY } = evt.nativeEvent;
const { bvid: vid, clearVideo: clear, router: r } = storeRef.current;
if (locationX > MINI_W - 28 && locationY < 28) {
clear();
} else {
r.push(`/video/${vid}` as any);
}
return;
}
const { width: sw, height: sh } = Dimensions.get('window');
const curX = (pan.x as any)._value;
const curY = (pan.y as any)._value;
const snapRight = 0;
const snapLeft = -(sw - MINI_W - 24);
const snapX = curX < snapLeft / 2 ? snapLeft : snapRight;
const clampedY = Math.max(-sh + MINI_H + 60, Math.min(60, curY));
Animated.spring(pan, {
toValue: { x: snapX, y: clampedY },
useNativeDriver: false,
tension: 120,
friction: 10,
}).start();
},
onPanResponderTerminate: () => { pan.flattenOffset(); },
})
).current;
const { pan, panHandlers } = useMiniDrag({
width: MINI_W,
height: MINI_H,
hitClose: (x, y) => x > MINI_W - 28 && y < 28,
onTap: () => router.push(`/video/${bvid}` as any),
onClose: clearVideo,
});
if (!isActive) return null;
@@ -75,11 +30,11 @@ export function MiniPlayer() {
return (
<Animated.View
style={[styles.container, { bottom: bottomOffset, transform: pan.getTranslateTransform() }]}
{...panResponder.panHandlers}
{...panHandlers}
>
<Image source={{ uri: proxyImageUrl(cover) }} style={styles.cover} />
<Text style={styles.title} numberOfLines={1}>{title}</Text>
{/* 关闭按钮仅作视觉展示，点击逻辑由 onPanResponderRelease 坐标判断处理 */}
{/* 关闭按钮仅作视觉展示，点击逻辑由 hitClose 坐标判断处理 */}
<View style={styles.closeBtn}>
<Ionicons name="close" size={14} color="#fff" />
</View>

354
components/NativeVideoPlayer.tsx
View File

@@ -16,6 +16,8 @@ import {
Modal,
Image,
PanResponder,
ActivityIndicator,
Animated,
useWindowDimensions,
} from "react-native";
import Video, { VideoRef } from "react-native-video";
@@ -25,11 +27,13 @@ import type {
PlayUrlResponse,
VideoShotData,
DanmakuItem,
IVideoPlayer,
} from "../services/types";
import { buildDashMpdUri } from "../utils/dash";
import { getVideoShot } from "../services/bilibili";
import DanmakuOverlay from "./DanmakuOverlay";
import { useTheme } from "../utils/theme";
import { usePlayProgressStore } from "../store/playProgressStore";
const BAR_H = 3;
// 进度球尺寸
@@ -59,8 +63,8 @@ function findFrameByTime(index: number[], seekTime: number): number {
return lo;
}
export interface NativeVideoPlayerRef {
seek: (t: number) => void;
export interface NativeVideoPlayerRef extends IVideoPlayer {
/** @deprecated 用 pause()/resume() 代替 */
setPaused: (v: boolean) => void;
}
@@ -110,6 +114,9 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const [paused, setPaused] = useState(false);
// seek 后强制触发 react-native-video 重新评估 paused prop 的 hack 用的瞬时叠加态
// 单独存储以避免污染 paused（用于图标显示）：seek 完成的一瞬间不让"播放/暂停"图标闪
const [seekHackPaused, setSeekHackPaused] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const currentTimeRef = useRef(0);
const [duration, setDuration] = useState(0);
@@ -118,15 +125,61 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
const [showQuality, setShowQuality] = useState(false);
// 倍速
const RATE_OPTIONS = [0.75, 1, 1.25, 1.5, 2];
const [rate, setRate] = useState(1);
const [showRate, setShowRate] = useState(false);
// 清晰度切换：保留进度 + loading 遮罩
const [switching, setSwitching] = useState(false);
const pendingSeekRef = useRef<number | null>(null);
const prevQnRef = useRef(currentQn);
const switchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// 续播：每 5s 持久化一次
const lastSaveRef = useRef(0);
useEffect(() => {
// 排除初始挂载（prevQn 或 currentQn === 0）
if (
prevQnRef.current !== 0 &&
currentQn !== 0 &&
prevQnRef.current !== currentQn
) {
pendingSeekRef.current = currentTimeRef.current;
setSwitching(true);
// 兜底：8s 内 onLoad 没触发就强制收起遮罩
if (switchTimeoutRef.current) clearTimeout(switchTimeoutRef.current);
switchTimeoutRef.current = setTimeout(() => setSwitching(false), 8000);
}
prevQnRef.current = currentQn;
}, [currentQn]);
useEffect(() => {
return () => {
if (switchTimeoutRef.current) clearTimeout(switchTimeoutRef.current);
};
}, []);
const [buffered, setBuffered] = useState(0);
const [isSeeking, setIsSeeking] = useState(false);
const isSeekingRef = useRef(false);
const [touchX, setTouchX] = useState<number | null>(null);
const touchXRef = useRef<number | null>(null);
const rafRef = useRef<number | null>(null);
// 拖动球位置用 Animated.Value 驱动：setValue 不触发 React 重渲染，
// 原生层直接更新坐标，跟手 60fps。消除老方案 setState+60ms 节流导致的"段落感"。
const touchAnimX = useRef(new Animated.Value(0)).current;
// 缩略图换帧仍走 state（精灵图位移涉及 RN 视图属性变化），50ms 节流足够
const [thumbFrame, setThumbFrame] = useState<{
sheetIdx: number;
col: number;
row: number;
seekTime: number;
} | null>(null);
const thumbThrottleRef = useRef(0);
const barOffsetX = useRef(0);
const barWidthRef = useRef(300);
const trackRef = useRef<View>(null);
// 让稳定的 PanResponder 闭包能读到最新 shots
const shotsRef = useRef<VideoShotData | null>(null);
const [shots, setShots] = useState<VideoShotData | null>(null);
const [showDanmaku, setShowDanmaku] = useState(true);
@@ -137,6 +190,9 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
seek: (t: number) => {
videoRef.current?.seek(t);
},
pause: () => setPaused(true),
resume: () => setPaused(false),
getCurrentTime: () => currentTimeRef.current,
setPaused: (v: boolean) => {
setPaused(v);
},
@@ -153,7 +209,7 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
return;
}
if (isDash) {
buildDashMpdUri(playData, currentQn)
buildDashMpdUri(playData, currentQn, bvid)
.then(setResolvedUrl)
.catch(() => setResolvedUrl(playData.dash!.video[0]?.baseUrl));
} else {
@@ -179,6 +235,25 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
durationRef.current = duration;
}, [duration]);
useEffect(() => {
shotsRef.current = shots;
}, [shots]);
// 非拖动时，球/进度填充随 currentTime 同步（onProgress 驱动）
useEffect(() => {
if (isSeekingRef.current) return;
if (durationRef.current <= 0 || barWidthRef.current <= 0) {
touchAnimX.setValue(0);
return;
}
const x = clamp(
(currentTime / durationRef.current) * barWidthRef.current,
0,
barWidthRef.current,
);
touchAnimX.setValue(x);
}, [currentTime, duration]);
// 控制栏自动隐藏逻辑：每次用户交互后重置计时器，3秒无交互则隐藏。使用 useRef 存储计时器 ID 和拖动状态，避免闭包问题导致的计时器失效或误触发。
const resetHideTimer = useCallback(() => {
if (hideTimer.current) clearTimeout(hideTimer.current);
@@ -223,7 +298,29 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
}
});
}, []);
// 使用 PanResponder 实现进度条拖动，支持在拖动过程中显示预览图。通过 touchXRef 和 rafRef 优化拖动性能，避免频繁更新状态导致的卡顿。用户松开拖动时，根据最终位置计算对应的时间点并跳转，同时清理状态和隐藏预览图。
// 拖动中按 50ms 节流计算精灵图帧索引；球位置不走这里，由 Animated.setValue 直接更新
const updateThumbFrame = useCallback((x: number) => {
const shotsData = shotsRef.current;
if (!shotsData || durationRef.current <= 0 || barWidthRef.current <= 0) return;
const ratio = clamp(x / barWidthRef.current, 0, 1);
const seekTime = ratio * durationRef.current;
const { img_x_len, img_y_len, image, index } = shotsData;
const framesPerSheet = img_x_len * img_y_len;
const totalFrames = framesPerSheet * image.length;
const frameIdx = index?.length
? clamp(findFrameByTime(index, seekTime), 0, index.length - 1)
: clamp(Math.floor(ratio * (totalFrames - 1)), 0, totalFrames - 1);
const local = frameIdx % framesPerSheet;
setThumbFrame({
sheetIdx: Math.floor(frameIdx / framesPerSheet),
col: local % img_x_len,
row: Math.floor(local / img_x_len),
seekTime,
});
}, []);
// PanResponder 进度条拖动：球/进度填充走 Animated.setValue（无 React 渲染），
// 缩略图换帧 50ms 节流；松手时 seek 到目标时间并恢复自动同步。
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
@@ -234,40 +331,39 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
setShowControls(true);
if (hideTimer.current) clearTimeout(hideTimer.current);
const x = clamp(gs.x0 - barOffsetX.current, 0, barWidthRef.current);
touchXRef.current = x;
setTouchX(x);
touchAnimX.setValue(x);
thumbThrottleRef.current = 0;
updateThumbFrame(x);
},
onPanResponderMove: (_, gs) => {
touchXRef.current = clamp(
const x = clamp(
gs.moveX - barOffsetX.current,
0,
barWidthRef.current,
);
if (!rafRef.current) {
rafRef.current = requestAnimationFrame(() => {
setTouchX(touchXRef.current);
rafRef.current = null;
});
// 关键：setValue 不触发 React 渲染，进度球/进度填充由原生层直接刷新
touchAnimX.setValue(x);
const now = Date.now();
if (now - thumbThrottleRef.current >= 50) {
thumbThrottleRef.current = now;
updateThumbFrame(x);
}
},
// 用户松开拖动，或拖动被中断（如来电），都视为结束拖动，需要清理状态和隐藏预览
// 用户松开拖动，或拖动被中断（如来电），都视为结束拖动
onPanResponderRelease: (_, gs) => {
if (rafRef.current) {
cancelAnimationFrame(rafRef.current);
rafRef.current = null;
}
const ratio = clamp(
(gs.moveX - barOffsetX.current) / barWidthRef.current,
const x = clamp(
gs.moveX - barOffsetX.current,
0,
1,
barWidthRef.current,
);
const ratio = barWidthRef.current > 0 ? x / barWidthRef.current : 0;
const t = ratio * durationRef.current;
touchAnimX.setValue(x);
videoRef.current?.seek(t);
setCurrentTime(t);
touchXRef.current = null;
setTouchX(null);
isSeekingRef.current = false;
setIsSeeking(false);
setThumbFrame(null);
if (hideTimer.current) clearTimeout(hideTimer.current);
hideTimer.current = setTimeout(
() => setShowControls(false),
@@ -275,71 +371,46 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
);
},
onPanResponderTerminate: () => {
if (rafRef.current) {
cancelAnimationFrame(rafRef.current);
rafRef.current = null;
}
touchXRef.current = null;
setTouchX(null);
isSeekingRef.current = false;
setIsSeeking(false);
setThumbFrame(null);
},
}),
).current;
// 进度条上触摸位置对应的时间点比例，0-1。非拖动状态为 null
const touchRatio =
touchX !== null ? clamp(touchX / barWidthRef.current, 0, 1) : null;
const progressRatio =
duration > 0 ? clamp(currentTime / duration, 0, 1) : 0;
const bufferedRatio = duration > 0 ? clamp(buffered / duration, 0, 1) : 0;
const THUMB_DISPLAY_W = 120; // scaled display width
// 缩略图尺寸：竖屏播放器较窄给 160，全屏给 220 提升可读性
const THUMB_DISPLAY_W = isFullscreen ? 220 : 160;
// 进度球水平偏移：active 态球更大，translate 偏移需对齐圆心
const ballTranslate = React.useMemo(
() => Animated.subtract(touchAnimX, (isSeeking ? BALL_ACTIVE : BALL) / 2),
[isSeeking, touchAnimX],
);
const renderThumbnail = () => {
if (touchRatio === null || !shots || !isSeeking) return null;
if (!thumbFrame || !shots || !isSeeking) return null;
const {
img_x_size: TW,
img_y_size: TH,
img_x_len,
img_y_len,
image,
index,
} = shots;
const framesPerSheet = img_x_len * img_y_len;
const totalFrames = framesPerSheet * image.length;
const seekTime = touchRatio * duration;
// 通过时间戳索引找到最接近的帧，若无索引则均匀映射到总帧数上
const frameIdx =
index?.length && duration > 0
? clamp(findFrameByTime(index, seekTime), 0, index.length - 1)
: clamp(
Math.floor(touchRatio * (totalFrames - 1)),
0,
totalFrames - 1,
);
const sheetIdx = Math.floor(frameIdx / framesPerSheet);
const local = frameIdx % framesPerSheet;
const col = local % img_x_len;
const row = Math.floor(local / img_x_len);
// 根据单帧图尺寸和预设的显示宽度计算缩放后的显示尺寸，保持宽高比
const { sheetIdx, col, row, seekTime } = thumbFrame;
// 根据单帧图尺寸和预设的显示宽度计算缩放后的显示尺寸，保持宽高比
const scale = THUMB_DISPLAY_W / TW;
const DW = THUMB_DISPLAY_W;
const DH = Math.round(TH * scale);
const trackLeft = barOffsetX.current;
const absLeft = clamp(
trackLeft + (touchX ?? 0) - DW / 2,
0,
SCREEN_W - DW,
);
// 缩略图固定到播放器水平中点，不跟随手指 / 进度球移动
const fixedLeft = Math.round(SCREEN_W / 2 - DW / 2);
const raw = image[sheetIdx];
if (!raw) return null;
// 兼容处理图床地址，确保以 http(s) 协议开头
const sheetUrl = image[sheetIdx].startsWith("//")
? `https:${image[sheetIdx]}`
: image[sheetIdx];
const sheetUrl = raw.startsWith("//") ? `https:${raw}` : raw;
return (
<View
style={[styles.thumbPreview, { left: absLeft, width: DW }]}
style={[styles.thumbPreview, { left: fixedLeft, width: DW }]}
pointerEvents="none"
>
<View
@@ -347,7 +418,7 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
width: DW,
height: DH,
overflow: "hidden",
borderRadius: 4,
borderRadius: 6,
}}
>
<Image
@@ -389,7 +460,8 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
style={StyleSheet.absoluteFill}
resizeMode="contain"
controls={false}
paused={!!(forcePaused || paused)}
paused={!!(forcePaused || paused || seekHackPaused)}
rate={rate}
progressUpdateInterval={500}
onProgress={({
currentTime: ct,
@@ -398,6 +470,14 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
}) => {
currentTimeRef.current = ct;
onTimeUpdate?.(ct);
// 续播持久化（5s 节流）
if (bvid && dur > 0) {
const nowSave = Date.now();
if (nowSave - lastSaveRef.current > 5000) {
lastSaveRef.current = nowSave;
usePlayProgressStore.getState().save(bvid, ct, dur);
}
}
// 拖动进度条时跳过 UI 更新，避免与用户拖动冲突
if (isSeekingRef.current) return;
const now = Date.now();
@@ -408,20 +488,44 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
setBuffered(buf);
}}
onLoad={() => {
if (initialTime && initialTime > 0) {
// 切清晰度后跳回原进度
const pending = pendingSeekRef.current;
let didSeek = false;
if (pending !== null && pending > 0) {
videoRef.current?.seek(pending);
pendingSeekRef.current = null;
didSeek = true;
} else if (initialTime && initialTime > 0) {
videoRef.current?.seek(initialTime);
didSeek = true;
}
// seek 后部分播放器不恢复播放，先暂停再恢复，强制触发 prop 变化
if (!forcePaused) {
setPaused(true);
requestAnimationFrame(() => setPaused(false));
if (switching) {
setSwitching(false);
if (switchTimeoutRef.current) {
clearTimeout(switchTimeoutRef.current);
switchTimeoutRef.current = null;
}
}
// seek 后部分播放器不自动恢复播放，需短暂 paused→false 触发 prop 变化
// 仅在确实 seek 时执行；走 seekHackPaused（不污染图标显示态），避免播放/暂停图标闪烁
if (didSeek && !forcePaused && !paused) {
setSeekHackPaused(true);
requestAnimationFrame(() => setSeekHackPaused(false));
}
}}
onError={(e) => {
// 杜比视界播放失败时自动降级到 1080P
if (currentQn === 126) {
onQualityChange(80);
return;
// 按降级链找下一档可用清晰度（从当前档位的下一档起，跳过不在 qualities 列表里的）
const FALLBACK_CHAIN = [126, 112, 80, 64, 32, 16];
const idx = FALLBACK_CHAIN.indexOf(currentQn);
if (idx >= 0) {
const acceptable = new Set(qualities.map(q => q.qn));
for (let i = idx + 1; i < FALLBACK_CHAIN.length; i++) {
const next = FALLBACK_CHAIN[i];
if (acceptable.has(next)) {
onQualityChange(next);
return;
}
}
}
console.warn("Video playback error:", e);
}}
@@ -430,6 +534,13 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
<View style={styles.placeholder} />
)}
{switching && (
<View style={styles.switchOverlay} pointerEvents="none">
<ActivityIndicator color="#fff" size="small" />
<Text style={styles.switchText}>切换到 {currentDesc}…</Text>
</View>
)}
{isFullscreen && !!danmakus?.length && (
<DanmakuOverlay
danmakus={danmakus}
@@ -490,32 +601,26 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
},
]}
/>
<View
<Animated.View
style={[
styles.trackLayer,
{
width: `${progressRatio * 100}%` as any,
width: touchAnimX,
backgroundColor: "#00AEEC",
},
]}
/>
</View>
{isSeeking && touchX !== null ? (
<View
style={[
styles.ball,
styles.ballActive,
{ left: touchX - BALL_ACTIVE / 2 },
]}
/>
) : (
<View
style={[
styles.ball,
{ left: progressRatio * barWidthRef.current - BALL / 2 },
]}
/>
)}
<Animated.View
style={[
styles.ball,
isSeeking && styles.ballActive,
{
left: 0,
transform: [{ translateX: ballTranslate }],
},
]}
/>
</View>
{/* Controls */}
@@ -538,6 +643,12 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
</Text>
<View style={{ flex: 1 }} />
<Text style={styles.timeText}>{formatDuration(duration)}</Text>
<TouchableOpacity
style={styles.ctrlBtn}
onPress={() => setShowRate(true)}
>
<Text style={styles.qualityText}>{rate === 1 ? "倍速" : `${rate}x`}</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.ctrlBtn}
onPress={() => setShowQuality(true)}
@@ -601,6 +712,42 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
</View>
</TouchableOpacity>
</Modal>
{/* 选倍速 */}
<Modal visible={showRate} transparent animationType="fade">
<TouchableOpacity
style={styles.modalOverlay}
onPress={() => setShowRate(false)}
>
<View style={[styles.qualityList, { backgroundColor: theme.modalBg }]}>
<Text style={[styles.qualityTitle, { color: theme.modalText }]}>选择倍速</Text>
{RATE_OPTIONS.map((r) => (
<TouchableOpacity
key={r}
style={[styles.qualityItem, { borderTopColor: theme.modalBorder }]}
onPress={() => {
setRate(r);
setShowRate(false);
showAndReset();
}}
>
<Text
style={[
styles.qualityItemText,
{ color: theme.modalTextSub },
r === rate && styles.qualityItemActive,
]}
>
{r === 1 ? "正常" : `${r}x`}
</Text>
{r === rate && (
<Ionicons name="checkmark" size={16} color="#00AEEC" />
)}
</TouchableOpacity>
))}
</View>
</TouchableOpacity>
</Modal>
</View>
);
},
@@ -610,6 +757,19 @@ const styles = StyleSheet.create({
container: { backgroundColor: "#000" },
fsContainer: { flex: 1, backgroundColor: "#000" },
placeholder: { ...StyleSheet.absoluteFillObject, backgroundColor: "#000" },
switchOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0,0,0,0.55)",
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
gap: 10,
},
switchText: {
color: "#fff",
fontSize: 13,
fontWeight: "500",
},
topBar: {
position: "absolute",
top: 0,

127
components/VideoDetailSkeleton.tsx Normal file
View File

@@ -0,0 +1,127 @@
import React, { useEffect, useRef, memo } from "react";
import { View, StyleSheet, Animated } from "react-native";
import { useTheme } from "../utils/theme";
// 注意：原版本每个 SkeletonBlock 都调 useTheme，导致 40+ 个 store 订阅
// + 整体 6 张卡片 + opacity loop，进入页面瞬间产生明显抖动。
// 现优化：颜色由顶层 useTheme 一次拿到，所有 block 走 inline style。
interface BlockProps {
width: number | `${number}%`;
height: number;
radius?: number;
bg: string;
style?: any;
}
const SkeletonBlock = memo(function SkeletonBlock({ width, height, radius = 4, bg, style }: BlockProps) {
return (
<View
style={[
{ width, height, borderRadius: radius, backgroundColor: bg },
style,
]}
/>
);
});
const RelatedCardSkeleton = memo(function RelatedCardSkeleton({ bg, border }: { bg: string; border: string }) {
return (
<View style={[styles.card, { borderBottomColor: border }]}>
<SkeletonBlock width={120} height={68} radius={4} bg={bg} />
<View style={styles.cardInfo}>
<View>
<SkeletonBlock width={"100%"} height={12} bg={bg} />
<SkeletonBlock width={"70%"} height={12} bg={bg} style={{ marginTop: 6 }} />
</View>
<View style={styles.cardMeta}>
<SkeletonBlock width={70} height={10} bg={bg} />
<SkeletonBlock width={50} height={10} bg={bg} />
</View>
</View>
</View>
);
});
const CARD_COUNT = 4;
export function VideoDetailSkeleton() {
const theme = useTheme();
const opacity = useRef(new Animated.Value(0.6)).current;
useEffect(() => {
const loop = Animated.loop(
Animated.sequence([
Animated.timing(opacity, { toValue: 1, duration: 800, useNativeDriver: true }),
Animated.timing(opacity, { toValue: 0.6, duration: 800, useNativeDriver: true }),
]),
);
loop.start();
return () => loop.stop();
}, [opacity]);
const bg = theme.placeholder;
const border = theme.border;
return (
<Animated.View style={[styles.container, { backgroundColor: theme.card, opacity }]}>
{/* UP 主行 */}
<View style={styles.upRow}>
<SkeletonBlock width={38} height={38} radius={19} bg={bg} />
<View style={styles.upInfo}>
<SkeletonBlock width={120} height={13} bg={bg} />
<SkeletonBlock width={160} height={11} bg={bg} style={{ marginTop: 6 }} />
</View>
</View>
{/* 标题 + 简介 */}
<View style={[styles.titleSection, { borderBottomColor: border }]}>
<SkeletonBlock width={"95%"} height={14} bg={bg} />
<SkeletonBlock width={"60%"} height={14} bg={bg} style={{ marginTop: 8 }} />
<SkeletonBlock width={48} height={16} radius={4} bg={bg} style={{ marginTop: 12 }} />
<SkeletonBlock width={"100%"} height={12} bg={bg} style={{ marginTop: 12 }} />
<SkeletonBlock width={"80%"} height={12} bg={bg} style={{ marginTop: 6 }} />
</View>
{/* 推荐视频标题 */}
<View style={styles.relatedHeader}>
<SkeletonBlock width={64} height={13} bg={bg} />
</View>
{/* 推荐卡片占位（4 张足够撑满首屏，少绘制开销） */}
{Array.from({ length: CARD_COUNT }).map((_, i) => (
<RelatedCardSkeleton key={i} bg={bg} border={border} />
))}
</Animated.View>
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
upRow: {
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 12,
paddingTop: 12,
paddingBottom: 10,
},
upInfo: { flex: 1, marginLeft: 10 },
titleSection: {
padding: 14,
borderBottomWidth: StyleSheet.hairlineWidth,
},
relatedHeader: {
paddingLeft: 13,
paddingTop: 10,
paddingBottom: 8,
},
card: {
flexDirection: "row",
paddingHorizontal: 12,
paddingVertical: 8,
borderBottomWidth: StyleSheet.hairlineWidth,
gap: 10,
},
cardInfo: { flex: 1, justifyContent: "space-between", paddingVertical: 2 },
cardMeta: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
});

9
components/VideoPlayer.tsx
View File

@@ -15,14 +15,21 @@ interface Props {
cid?: number;
danmakus?: DanmakuItem[];
onTimeUpdate?: (t: number) => void;
initialTime?: number;
}
export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, bvid, cid, danmakus, onTimeUpdate }: Props) {
export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, bvid, cid, danmakus, onTimeUpdate, initialTime }: Props) {
const [fullscreen, setFullscreen] = useState(false);
const { width, height } = useWindowDimensions();
const VIDEO_HEIGHT = width * 0.5625;
const needsRotation = !ScreenOrientation && fullscreen;
const lastTimeRef = useRef(0);
const seededRef = useRef(false);
// 续播：第一次拿到 initialTime 时塞进 lastTimeRef
if (!seededRef.current && typeof initialTime === 'number' && initialTime > 0) {
lastTimeRef.current = initialTime;
seededRef.current = true;
}
const portraitRef = useRef<NativeVideoPlayerRef>(null);
const handleEnterFullscreen = async () => {