lywsvip/JKVideo
1
0
Fork 0
mirror of https://github.com/tiajinsha/JKVideo.git synced 2026-06-05 04:30:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master-bug'

Browse Source 
# Conflicts:
#	CHANGELOG.md
#	app/video/[bvid].tsx
#	components/DanmakuList.tsx
This commit is contained in:
Developer
2026-03-25 15:06:37 +08:00
parent 80109b9a12 e3def7d01b
commit b4d5d2a0e2
14 changed files with 523 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
CHANGELOG.md
View File

@@ -5,6 +5,24 @@
---
## [1.0.13] - 2026-03-25
### 修复
- **小窗 PanResponder 闭包过期**：`useRef(PanResponder.create(...))` 捕获初始 `roomId=0` / `bvid=""`，导致点击小窗跳转到错误页面；改用 `storeRef` 模式保持最新值
- **直播小窗进入详情无限 loading**：`useLiveDetail` 使用 `cancelled` 闭包标志，effect cleanup 后 fetch 被静默丢弃；改用 `latestRoomId` ref 比对替代 cancelled 模式
- **进入播放器页面小窗不关闭**：视频/直播详情页进入时通过 `useLayoutEffect` + `getState().clearLive()` 同步清除小窗，避免双播和资源竞争
- **BigVideoCard 与直播小窗冲突**：首页 BigVideoCard 自动播放与直播小窗竞争解码器资源；小窗活跃时跳过 Video 渲染，仅显示封面图
- **退出全屏视频暂停**：互斥渲染后竖屏播放器重新挂载，react-native-video seek 后不自动恢复播放；`onLoad` 中强制 `paused` 状态切换触发播放
### 优化
- **视频播放器单实例**：竖屏/全屏互斥渲染（`{!fullscreen && ...}` / `{fullscreen && ...}`），不再同时挂载两个 Video 解码器，减半 GPU/内存占用
- **onProgress 节流**：`progressUpdateInterval` 从 250ms 调为 500ms，回调内增加 450ms 节流和 seeking 跳过，减少重渲染
- **移除调试日志**：清理 NativeVideoPlayer 中遗留的 `console.log`
- **下载页 UI 优化**：下载管理页交互和暗黑主题适配
---
## [1.0.12] - 2026-03-25
### 新增

2
app/_layout.tsx
View File

@@ -8,6 +8,7 @@ import { useDownloadStore } from '../store/downloadStore';
import { useSettingsStore } from '../store/settingsStore';
import { useTheme } from '../utils/theme';
import { MiniPlayer } from '../components/MiniPlayer';
import { LiveMiniPlayer } from '../components/LiveMiniPlayer';
import * as Sentry from '@sentry/react-native';
import { ErrorBoundary } from '@sentry/react-native';
import { useFonts } from 'expo-font';
@@ -87,6 +88,7 @@ function RootLayout() {
</Stack>
</ErrorBoundary>
<MiniPlayer />
<LiveMiniPlayer />
</View>
</SafeAreaProvider>
);

164
app/downloads.tsx
View File

@@ -6,10 +6,9 @@ import {
StyleSheet,
TouchableOpacity,
Image,
ActivityIndicator,
Modal,
StatusBar,
useWindowDimensions,
Alert,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
@@ -19,6 +18,8 @@ let ScreenOrientation: typeof import('expo-screen-orientation') | null = null;
try { ScreenOrientation = require('expo-screen-orientation'); } catch {}
import { useDownloadStore, DownloadTask } from '../store/downloadStore';
import { LanShareModal } from '../components/LanShareModal';
import { proxyImageUrl } from '../utils/imageUrl';
import { useTheme } from '../utils/theme';
function formatFileSize(bytes?: number): string {
if (!bytes || bytes <= 0) return '';
@@ -26,8 +27,6 @@ function formatFileSize(bytes?: number): string {
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
}
import { proxyImageUrl } from '../utils/imageUrl';
import { useTheme } from '../utils/theme';
export default function DownloadsScreen() {
const router = useRouter();
@@ -36,8 +35,6 @@ export default function DownloadsScreen() {
const [playingUri, setPlayingUri] = useState<string | null>(null);
const [playingTitle, setPlayingTitle] = useState('');
const [shareTask, setShareTask] = useState<(DownloadTask & { key: string }) | null>(null);
const { width, height } = useWindowDimensions();
const isLandscape = width > height;
async function openPlayer(uri: string, title: string) {
setPlayingTitle(title);
@@ -50,6 +47,18 @@ export default function DownloadsScreen() {
await ScreenOrientation?.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
}
function confirmDelete(key: string, status: DownloadTask['status']) {
const isDownloading = status === 'downloading';
Alert.alert(
isDownloading ? '取消下载' : '删除下载',
isDownloading ? '确定取消该下载任务？' : '确定删除该文件？删除后不可恢复。',
[
{ text: '取消', style: 'cancel' },
{ text: isDownloading ? '取消下载' : '删除', style: 'destructive', onPress: () => removeTask(key) },
],
);
}
useEffect(() => {
loadFromStorage();
}, []);
@@ -74,29 +83,33 @@ export default function DownloadsScreen() {
{sections.length === 0 ? (
<View style={styles.empty}>
<Ionicons name="cloud-download-outline" size={56} color="#ccc" />
<Text style={styles.emptyTxt}>暂无下载记录</Text>
<Ionicons name="cloud-download-outline" size={56} color={theme.textSub} />
<Text style={[styles.emptyTxt, { color: theme.textSub }]}>暂无下载记录</Text>
</View>
) : (
<SectionList
sections={sections}
keyExtractor={(item) => item.key}
renderSectionHeader={({ section }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
<View style={[styles.sectionHeader, { backgroundColor: theme.bg }]}>
<Text style={[styles.sectionTitle, { color: theme.textSub }]}>{section.title}</Text>
</View>
)}
renderItem={({ item }) => (
<DownloadRow
task={item}
theme={theme}
onPlay={() => {
if (item.localUri) openPlayer(item.localUri, item.title);
}}
onDelete={() => removeTask(item.key)}
onDelete={() => confirmDelete(item.key, item.status)}
onShare={() => setShareTask(item)}
onRetry={() => router.push(`/video/${item.bvid}` as any)}
/>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}
ItemSeparatorComponent={() => (
<View style={[styles.separator, { backgroundColor: theme.border, marginLeft: 108 }]} />
)}
contentContainerStyle={{ paddingBottom: 32 }}
/>
)}
@@ -119,22 +132,18 @@ export default function DownloadsScreen() {
{playingUri && (
<Video
source={{ uri: playingUri }}
style={isLandscape
? { width, height }
: { width, height: width * 0.5625 }}
style={StyleSheet.absoluteFillObject}
resizeMode="contain"
controls
paused={false}
/>
)}
{!isLandscape && (
<View style={styles.playerBar}>
<TouchableOpacity onPress={closePlayer} style={styles.closeBtn}>
<Ionicons name="chevron-back" size={24} color="#fff" />
</TouchableOpacity>
<Text style={styles.playerTitle} numberOfLines={1}>{playingTitle}</Text>
</View>
)}
<View style={styles.playerBar}>
<TouchableOpacity onPress={closePlayer} style={styles.closeBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
<Ionicons name="chevron-back" size={24} color="#fff" />
</TouchableOpacity>
<Text style={styles.playerTitle} numberOfLines={1}>{playingTitle}</Text>
</View>
</View>
</Modal>
</SafeAreaView>
@@ -143,98 +152,114 @@ export default function DownloadsScreen() {
function DownloadRow({
task,
theme,
onPlay,
onDelete,
onShare,
onRetry,
}: {
task: DownloadTask & { key: string };
theme: ReturnType<typeof useTheme>;
onPlay: () => void;
onDelete: () => void;
onShare: () => void;
onRetry: () => void;
}) {
return (
<View style={styles.row}>
<Image
source={{ uri: proxyImageUrl(task.cover) }}
style={styles.cover}
/>
const isDone = task.status === 'done';
const isError = task.status === 'error';
const isDownloading = task.status === 'downloading';
const rowContent = (
<View style={[styles.row, { backgroundColor: theme.card }]}>
<Image source={{ uri: proxyImageUrl(task.cover) }} style={styles.cover} />
<View style={styles.info}>
<Text style={styles.title} numberOfLines={2}>{task.title}</Text>
<Text style={styles.qdesc}>
<Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>{task.title}</Text>
<Text style={[styles.qdesc, { color: theme.textSub }]}>
{task.qdesc}{task.fileSize ? ` · ${formatFileSize(task.fileSize)}` : ''}
</Text>
{task.status === 'downloading' && (
{isDownloading && (
<View style={styles.progressWrap}>
<View style={styles.progressTrack}>
<View style={[styles.progressFill, { width: `${Math.round(task.progress * 100)}%` as any }]} />
</View>
<ActivityIndicator size="small" color="#00AEEC" style={{ marginLeft: 6 }} />
<Text style={styles.progressTxt}>{Math.round(task.progress * 100)}%</Text>
</View>
)}
{task.status === 'error' && (
<Text style={styles.errorTxt} numberOfLines={1}>{task.error ?? '下载失败'}</Text>
{isError && (
<View style={styles.errorRow}>
<Text style={styles.errorTxt} numberOfLines={1}>{task.error ?? '下载失败'}</Text>
<TouchableOpacity onPress={onRetry} style={styles.retryBtn}>
<Text style={styles.retryTxt}>重新下载</Text>
</TouchableOpacity>
</View>
)}
</View>
<View style={styles.actions}>
{task.status === 'done' && (
<>
<TouchableOpacity style={styles.playBtn} onPress={onPlay}>
<Ionicons name="play-circle" size={20} color="#00AEEC" />
<Text style={styles.playTxt}>播放</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.shareBtn} onPress={onShare}>
<Ionicons name="share-social-outline" size={20} color="#00AEEC" />
</TouchableOpacity>
</>
{isDone && (
<TouchableOpacity style={styles.actionBtn} onPress={onShare}>
<Ionicons name="share-social-outline" size={20} color="#00AEEC" />
</TouchableOpacity>
)}
<TouchableOpacity style={styles.deleteBtn} onPress={onDelete}>
<Ionicons name="trash-outline" size={18} color="#bbb" />
<TouchableOpacity
style={styles.actionBtn}
onPress={isDownloading ? onDelete : onDelete}
>
<Ionicons
name={isDownloading ? 'close-circle-outline' : 'trash-outline'}
size={20}
color={isDownloading ? '#bbb' : '#bbb'}
/>
</TouchableOpacity>
</View>
</View>
);
if (isDone) {
return (
<TouchableOpacity activeOpacity={0.85} onPress={onPlay}>
{rowContent}
</TouchableOpacity>
);
}
return rowContent;
}
const styles = StyleSheet.create({
safe: { flex: 1, backgroundColor: '#fff' },
safe: { flex: 1 },
topBar: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
paddingVertical: 8,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#eee',
},
backBtn: { padding: 4 },
topTitle: {
flex: 1,
fontSize: 16,
fontWeight: '700',
color: '#212121',
marginLeft: 4,
},
empty: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 },
emptyTxt: { fontSize: 14, color: '#bbb' },
emptyTxt: { fontSize: 14 },
sectionHeader: {
backgroundColor: '#f4f4f4',
paddingHorizontal: 16,
paddingVertical: 8,
},
sectionTitle: { fontSize: 13, fontWeight: '600', color: '#555' },
sectionTitle: { fontSize: 13, fontWeight: '600' },
row: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: '#fff',
gap: 12,
},
cover: { width: 80, height: 54, borderRadius: 6, backgroundColor: '#eee' },
cover: { width: 80, height: 54, borderRadius: 6, backgroundColor: '#eee', flexShrink: 0 },
info: { flex: 1 },
title: { fontSize: 13, color: '#212121', lineHeight: 18, marginBottom: 4 },
qdesc: { fontSize: 12, color: '#999', marginBottom: 4 },
progressWrap: { flexDirection: 'row', alignItems: 'center', marginTop: 2 },
title: { fontSize: 13, lineHeight: 18, marginBottom: 4 },
qdesc: { fontSize: 12, marginBottom: 4 },
progressWrap: { flexDirection: 'row', alignItems: 'center', marginTop: 2, gap: 6 },
progressTrack: {
flex: 1,
height: 3,
@@ -243,14 +268,19 @@ const styles = StyleSheet.create({
overflow: 'hidden',
},
progressFill: { height: 3, backgroundColor: '#00AEEC', borderRadius: 2 },
progressTxt: { fontSize: 11, color: '#999', marginLeft: 4 },
errorTxt: { fontSize: 12, color: '#f44', marginTop: 2 },
actions: { alignItems: 'center', gap: 8 },
playBtn: { flexDirection: 'row', alignItems: 'center', gap: 3 },
playTxt: { fontSize: 13, color: '#00AEEC' },
shareBtn: { padding: 4 },
deleteBtn: { padding: 4 },
separator: { height: StyleSheet.hairlineWidth, backgroundColor: '#f0f0f0', marginLeft: 108 },
progressTxt: { fontSize: 11, color: '#999', minWidth: 30 },
errorRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 2 },
errorTxt: { fontSize: 12, color: '#f44', flex: 1 },
retryBtn: {
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 10,
backgroundColor: '#e8f7fd',
},
retryTxt: { fontSize: 12, color: '#00AEEC', fontWeight: '600' },
actions: { alignItems: 'center', gap: 12 },
actionBtn: { padding: 4 },
separator: { height: StyleSheet.hairlineWidth },
// player modal
playerBg: { flex: 1, backgroundColor: '#000', justifyContent: 'center' },
playerBar: {
@@ -261,6 +291,8 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
backgroundColor: 'rgba(0,0,0,0.4)',
paddingVertical: 8,
},
closeBtn: { padding: 6 },
playerTitle: { flex: 1, color: '#fff', fontSize: 14, fontWeight: '600', marginLeft: 4 },

3
app/index.tsx
View File

@@ -422,7 +422,6 @@ export default function HomeScreen() {
styles.header,
{
opacity: currentHeaderOpacity,
borderBottomColor: theme.border,
},
]}
>
@@ -507,8 +506,6 @@ const styles = StyleSheet.create({
alignItems: "center",
paddingHorizontal: 16,
gap: 10,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: "#eee",
},
logo: {
fontSize: 20,

26
app/live/[roomId].tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
import {
View,
Text,
@@ -18,14 +18,22 @@ import DanmakuList from "../../components/DanmakuList";
import { formatCount } from "../../utils/format";
import { proxyImageUrl } from "../../utils/imageUrl";
import { useTheme } from "../../utils/theme";
import { useLiveStore } from "../../store/liveStore";
type Tab = "intro" | "danmaku";
export default function LiveDetailScreen() {
const { roomId } = useLocalSearchParams<{ roomId: string }>();
console.log("LiveDetailScreen params:", { roomId });
const router = useRouter();
const theme = useTheme();
const id = parseInt(roomId ?? "0", 10);
// 进入详情页时立即清除小窗（useLayoutEffect 在绘制前同步执行）
useLayoutEffect(() => {
useLiveStore.getState().clearLive();
}, []);
const { room, anchor, stream, loading, error, changeQuality } =
useLiveDetail(id);
const [tab, setTab] = useState<Tab>("intro");
@@ -36,6 +44,8 @@ export default function LiveDetailScreen() {
const qualities = stream?.qualities ?? [];
const currentQn = stream?.qn ?? 0;
const setLive = useLiveStore(s => s.setLive);
const actualRoomId = room?.roomid ?? id;
const { danmakus, giftCounts } = useLiveDanmaku(isLive ? actualRoomId : 0);
@@ -49,6 +59,19 @@ export default function LiveDetailScreen() {
<Text style={[styles.topTitle, { color: theme.text }]} numberOfLines={1}>
{room?.title ?? "直播间"}
</Text>
{isLive && hlsUrl ? (
<TouchableOpacity
style={styles.pipBtn}
onPress={() => {
setLive(id, room?.title ?? '', room?.keyframe ?? '', hlsUrl);
router.back();
}}
>
<Ionicons name="browsers-outline" size={22} color={theme.text} />
</TouchableOpacity>
) : (
<View style={styles.pipBtn} />
)}
</View>
{/* Player */}
@@ -177,6 +200,7 @@ const styles = StyleSheet.create({
borderBottomWidth: StyleSheet.hairlineWidth,
},
backBtn: { padding: 4 },
pipBtn: { padding: 4, width: 32, alignItems: 'center' },
topTitle: {
flex: 1,
fontSize: 15,

26
app/video/[bvid].tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from "react";
import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
import {
View,
Text,
@@ -23,6 +23,7 @@ import { formatCount, formatDuration } from "../../utils/format";
import { proxyImageUrl } from "../../utils/imageUrl";
import { DownloadSheet } from "../../components/DownloadSheet";
import { useTheme } from "../../utils/theme";
import { useLiveStore } from "../../store/liveStore";
type Tab = "intro" | "comments" | "danmaku";
@@ -30,6 +31,11 @@ export default function VideoDetailScreen() {
const { bvid } = useLocalSearchParams<{ bvid: string }>();
const router = useRouter();
const theme = useTheme();
// 进入视频详情页时立即清除直播小窗
useLayoutEffect(() => {
useLiveStore.getState().clearLive();
}, []);
const {
video,
playData,
@@ -49,7 +55,10 @@ export default function VideoDetailScreen() {
const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
const [currentTime, setCurrentTime] = useState(0);
const [showDownload, setShowDownload] = useState(false);
const [uploaderStat, setUploaderStat] = useState<{ follower: number; archiveCount: number } | null>(null);
const [uploaderStat, setUploaderStat] = useState<{
follower: number;
archiveCount: number;
} | null>(null);
const {
videos: relatedVideos,
loading: relatedLoading,
@@ -71,7 +80,9 @@ export default function VideoDetailScreen() {
useEffect(() => {
if (!video?.owner?.mid) return;
getUploaderStat(video.owner.mid).then(setUploaderStat).catch(() => {});
getUploaderStat(video.owner.mid)
.then(setUploaderStat)
.catch(() => {});
}, [video?.owner?.mid]);
return (
@@ -197,7 +208,8 @@ export default function VideoDetailScreen() {
</Text>
{uploaderStat && (
<Text style={styles.upStat}>
{formatCount(uploaderStat.follower)}粉丝 · {formatCount(uploaderStat.archiveCount)}视频
{formatCount(uploaderStat.follower)}粉丝 ·{" "}
{formatCount(uploaderStat.archiveCount)}视频
</Text>
)}
</View>
@@ -465,7 +477,7 @@ function SeasonSection({
<TouchableOpacity
style={[
styles.epCard,
{ backgroundColor: theme.card },
{ backgroundColor: theme.card, borderColor: theme.border },
isCurrent && styles.epCardActive,
]}
onPress={() => !isCurrent && onEpisodePress(ep.bvid)}
@@ -564,10 +576,10 @@ const styles = StyleSheet.create({
width: 120,
borderRadius: 6,
overflow: "hidden",
borderWidth: 1.5,
borderWidth: 1,
borderColor: "transparent",
},
epCardActive: { borderColor: "#00AEEC" },
epCardActive: { borderColor: "#00AEEC", borderWidth: 1.5 },
epThumb: { width: 120, height: 68 },
epNum: { fontSize: 11, color: "#999", paddingHorizontal: 6, paddingTop: 4 },
epNumActive: { color: "#00AEEC", fontWeight: "600" },

15
components/BigVideoCard.tsx
View File

@@ -23,6 +23,7 @@ import { getPlayUrl, getVideoDetail } from "../services/bilibili";
import { coverImageUrl } from "../utils/imageUrl";
import { useSettingsStore } from "../store/settingsStore";
import { useTheme } from "../utils/theme";
import { useLiveStore } from "../store/liveStore";
import { formatCount, formatDuration } from "../utils/format";
import type { VideoItem } from "../services/types";
@@ -57,6 +58,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({
}: Props) {
const { width: SCREEN_W } = useWindowDimensions();
const trafficSaving = useSettingsStore(s => s.trafficSaving);
const liveActive = useLiveStore(s => s.isActive);
const theme = useTheme();
const THUMB_H = SCREEN_W * 0.5625;
const mediaDimensions = { width: SCREEN_W - 8, height: THUMB_H };
@@ -92,7 +94,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({
// Preload: fetch play URL on mount (before card is visible)
useEffect(() => {
if (videoUrl || trafficSaving) return;
if (videoUrl || trafficSaving || liveActive) return;
let cancelled = false;
(async () => {
try {
@@ -127,8 +129,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({
// Pause/resume based on visibility and scroll state
useEffect(() => {
if (!videoUrl) return;
if (!isVisible || trafficSaving) {
// Off-screen or traffic saving: pause, mute, show thumbnail
if (!isVisible || trafficSaving || liveActive) {
setPaused(true);
setMuted(true);
Animated.timing(thumbOpacity, {
@@ -137,10 +138,8 @@ export const BigVideoCard = React.memo(function BigVideoCard({
useNativeDriver: true,
}).start();
} else if (isScrolling) {
// Visible but scrolling: just pause (keep thumbnail hidden, keep mute state)
setPaused(true);
} else {
// Visible and not scrolling: play, fade out thumbnail
setPaused(false);
Animated.timing(thumbOpacity, {
toValue: 0,
@@ -148,10 +147,10 @@ export const BigVideoCard = React.memo(function BigVideoCard({
useNativeDriver: true,
}).start();
}
}, [isVisible, isScrolling, videoUrl, trafficSaving]);
}, [isVisible, isScrolling, videoUrl, trafficSaving, liveActive]);
const handleVideoReady = () => {
if (!isVisible || isScrolling || trafficSaving) return;
if (!isVisible || isScrolling || trafficSaving || liveActive) return;
setPaused(false);
Animated.timing(thumbOpacity, {
toValue: 0,
@@ -229,7 +228,7 @@ export const BigVideoCard = React.memo(function BigVideoCard({
{/* Media area */}
<View style={[mediaDimensions, { position: "relative" }]}>
{/* Video player — rendered first so it sits behind the thumbnail */}
{videoUrl && (
{videoUrl && !liveActive && (
<Video
ref={videoRef}
source={

8
components/DanmakuList.tsx
View File

@@ -242,7 +242,9 @@ export default function DanmakuList({
<View style={liveStyles.medalTag}>
<Text style={liveStyles.medalName}>{item.medalName}</Text>
<View style={liveStyles.medalLvBox}>
<Text style={liveStyles.medalLv}>{item.medalLevel}</Text>
<Text style={[liveStyles.medalLv, { color: theme.text }]}>
{item.medalLevel}
</Text>
</View>
</View>
)}
@@ -275,7 +277,7 @@ export default function DanmakuList({
]}
>
<Text
style={[styles.bubbleText, { color: dotColor }]}
style={[styles.bubbleText, { color: theme.text }]}
numberOfLines={3}
>
{item.text}
@@ -450,6 +452,7 @@ const liveStyles = StyleSheet.create({
row: {
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "space-between",
paddingVertical: 5,
},
time: {
@@ -492,7 +495,6 @@ const liveStyles = StyleSheet.create({
paddingHorizontal: 3,
},
medalLvBox: {
backgroundColor: "#e891ab",
paddingHorizontal: 3,
height: "100%",
justifyContent: "center",

206
components/LiveMiniPlayer.tsx Normal file
View File

@@ -0,0 +1,206 @@
import React, { useRef } from 'react';
import {
View,
Text,
Image,
StyleSheet,
Animated,
PanResponder,
Dimensions,
Platform,
} from 'react-native';
import { useRouter } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useLiveStore } from '../store/liveStore';
import { useVideoStore } from '../store/videoStore';
import { proxyImageUrl } from '../utils/imageUrl';
const MINI_W = 160;
const MINI_H = 90;
const LIVE_HEADERS = {
Referer: 'https://live.bilibili.com',
'User-Agent':
'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);
// 用 ref 保持最新值，避免 PanResponder 闭包捕获过期的初始值
const storeRef = useRef({ roomId, clearLive, router });
storeRef.current = { roomId, clearLive, 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 { 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;
if (!isActive) return null;
const bottomOffset = insets.bottom + 16 + (videoMiniActive ? 106 : 0);
// Web 端降级：封面图 + LIVE 徽标
if (Platform.OS === 'web') {
return (
<Animated.View
style={[styles.container, { bottom: bottomOffset, transform: pan.getTranslateTransform() }]}
{...panResponder.panHandlers}
>
<Image source={{ uri: proxyImageUrl(cover) }} style={styles.videoArea} />
<View style={styles.liveBadge} pointerEvents="none">
<View style={styles.liveDot} />
<Text style={styles.liveText}>LIVE</Text>
</View>
<Text style={styles.titleText} numberOfLines={1}>{title}</Text>
<View style={styles.closeBtn}>
<Ionicons name="close" size={14} color="#fff" />
</View>
</Animated.View>
);
}
// Native：实际 HLS 流播放
const Video = require('react-native-video').default;
return (
<Animated.View
style={[styles.container, { bottom: bottomOffset, transform: pan.getTranslateTransform() }]}
{...panResponder.panHandlers}
>
{/* pointerEvents="none" 防止 Video 原生层吞噬触摸事件 */}
<View style={styles.videoArea} pointerEvents="none">
<Video
key={hlsUrl}
source={{ uri: hlsUrl, headers: LIVE_HEADERS }}
style={StyleSheet.absoluteFill}
resizeMode="cover"
controls={false}
muted={false}
paused={false}
repeat={false}
onError={clearLive}
/>
</View>
<View style={styles.liveBadge} pointerEvents="none">
<View style={styles.liveDot} />
<Text style={styles.liveText}>LIVE</Text>
</View>
<Text style={styles.titleText} numberOfLines={1}>{title}</Text>
{/* 关闭按钮视觉层，点击逻辑由 onPanResponderRelease 坐标判断 */}
<View style={styles.closeBtn}>
<Ionicons name="close" size={14} color="#fff" />
</View>
</Animated.View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
right: 12,
width: MINI_W,
height: MINI_H,
borderRadius: 8,
backgroundColor: '#1a1a1a',
overflow: 'hidden',
elevation: 8,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
},
videoArea: {
width: '100%',
height: 66,
backgroundColor: '#111',
},
liveBadge: {
position: 'absolute',
top: 4,
left: 6,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.55)',
paddingHorizontal: 5,
paddingVertical: 2,
borderRadius: 3,
gap: 3,
},
liveDot: { width: 5, height: 5, borderRadius: 2.5, backgroundColor: '#f00' },
liveText: { color: '#fff', fontSize: 9, fontWeight: '700', letterSpacing: 0.5 },
titleText: {
color: '#fff',
fontSize: 11,
paddingHorizontal: 6,
paddingVertical: 3,
lineHeight: 14,
height: 24,
backgroundColor: '#1a1a1a',
},
closeBtn: {
position: 'absolute',
top: 4,
right: 4,
width: 18,
height: 18,
borderRadius: 9,
backgroundColor: 'rgba(0,0,0,0.6)',
alignItems: 'center',
justifyContent: 'center',
},
});

63
components/MiniPlayer.tsx
View File

@@ -1,6 +1,6 @@
import React, { useRef } from 'react';
import {
View, Text, Image, StyleSheet, TouchableOpacity,
View, Text, Image, StyleSheet,
Animated, PanResponder, Dimensions,
} from 'react-native';
import { useRouter } from 'expo-router';
@@ -17,27 +17,54 @@ export function MiniPlayer() {
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: Animated.event([null, { dx: pan.x, dy: pan.y }], { useNativeDriver: false }),
onPanResponderRelease: () => {
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();
// Clamp to screen bounds
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 clampedX = Math.max(-sw + MINI_W + 12, Math.min(12, curX));
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));
if (curX !== clampedX || curY !== clampedY) {
Animated.spring(pan, { toValue: { x: clampedX, y: clampedY }, useNativeDriver: false }).start();
}
Animated.spring(pan, {
toValue: { x: snapX, y: clampedY },
useNativeDriver: false,
tension: 120,
friction: 10,
}).start();
},
onPanResponderTerminate: () => { pan.flattenOffset(); },
})
).current;
@@ -50,17 +77,12 @@ export function MiniPlayer() {
style={[styles.container, { bottom: bottomOffset, transform: pan.getTranslateTransform() }]}
{...panResponder.panHandlers}
>
<TouchableOpacity
style={styles.main}
onPress={() => router.push(`/video/${bvid}` as any)}
activeOpacity={0.85}
>
<Image source={{ uri: proxyImageUrl(cover) }} style={styles.cover} />
<Text style={styles.title} numberOfLines={1}>{title}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.closeBtn} onPress={clearVideo}>
<Image source={{ uri: proxyImageUrl(cover) }} style={styles.cover} />
<Text style={styles.title} numberOfLines={1}>{title}</Text>
{/* 关闭按钮仅作视觉展示，点击逻辑由 onPanResponderRelease 坐标判断处理 */}
<View style={styles.closeBtn}>
<Ionicons name="close" size={14} color="#fff" />
</TouchableOpacity>
</View>
</Animated.View>
);
}
@@ -69,8 +91,8 @@ const styles = StyleSheet.create({
container: {
position: 'absolute',
right: 12,
width: 160,
height: 90,
width: MINI_W,
height: MINI_H,
borderRadius: 8,
backgroundColor: '#1a1a1a',
overflow: 'hidden',
@@ -80,7 +102,6 @@ const styles = StyleSheet.create({
shadowOpacity: 0.3,
shadowRadius: 4,
},
main: { flex: 1 },
cover: { width: '100%', height: 64, backgroundColor: '#333' },
title: {
color: '#fff',

30
components/NativeVideoPlayer.tsx
View File

@@ -109,8 +109,10 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
const [paused, setPaused] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const currentTimeRef = useRef(0);
const [duration, setDuration] = useState(0);
const durationRef = useRef(0);
const lastProgressUpdate = useRef(0);
const [showQuality, setShowQuality] = useState(false);
@@ -318,16 +320,6 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
const local = frameIdx % framesPerSheet;
const col = local % img_x_len;
const row = Math.floor(local / img_x_len);
console.log("[thumb]", {
seekTime,
duration,
indexLen: index?.length,
frameIdx,
totalFrames,
sheetIdx,
col,
row,
});
// 根据单帧图尺寸和预设的显示宽度计算缩放后的显示尺寸，保持宽高比
const scale = THUMB_DISPLAY_W / TW;
const DW = THUMB_DISPLAY_W;
@@ -396,20 +388,32 @@ export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(
resizeMode="contain"
controls={false}
paused={!!(forcePaused || paused)}
progressUpdateInterval={500}
onProgress={({
currentTime: ct,
seekableDuration: dur,
playableDuration: buf,
}) => {
setCurrentTime(ct);
if (dur > 0) setDuration(dur);
setBuffered(buf);
currentTimeRef.current = ct;
onTimeUpdate?.(ct);
// 拖动进度条时跳过 UI 更新，避免与用户拖动冲突
if (isSeekingRef.current) return;
const now = Date.now();
if (now - lastProgressUpdate.current < 450) return;
lastProgressUpdate.current = now;
setCurrentTime(ct);
if (dur > 0 && Math.abs(dur - durationRef.current) > 1) setDuration(dur);
setBuffered(buf);
}}
onLoad={() => {
if (initialTime && initialTime > 0) {
videoRef.current?.seek(initialTime);
}
// seek 后部分播放器不恢复播放，先暂停再恢复，强制触发 prop 变化
if (!forcePaused) {
setPaused(true);
requestAnimationFrame(() => setPaused(false));
}
}}
onError={(e) => {
// 杜比视界播放失败时自动降级到 1080P

82
components/VideoPlayer.tsx
View File

@@ -32,9 +32,6 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, b
};
const handleExitFullscreen = async () => {
// 退出全屏：同步进度，竖屏一律暂停
portraitRef.current?.seek(lastTimeRef.current);
portraitRef.current?.setPaused(true);
setFullscreen(false);
if (Platform.OS !== 'web')
await ScreenOrientation?.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
@@ -71,46 +68,49 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, b
return (
<>
{/* Portrait player: always mounted, force-paused while fullscreen is active */}
<NativeVideoPlayer
ref={portraitRef}
playData={playData}
qualities={qualities}
currentQn={currentQn}
onQualityChange={onQualityChange}
onFullscreen={handleEnterFullscreen}
bvid={bvid}
cid={cid}
isFullscreen={false}
forcePaused={fullscreen}
initialTime={lastTimeRef.current}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }}
/>
{/* 竖屏和全屏互斥渲染，避免同时挂载两个视频解码器 */}
{!fullscreen && (
<NativeVideoPlayer
ref={portraitRef}
playData={playData}
qualities={qualities}
currentQn={currentQn}
onQualityChange={onQualityChange}
onFullscreen={handleEnterFullscreen}
bvid={bvid}
cid={cid}
isFullscreen={false}
initialTime={lastTimeRef.current}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }}
/>
)}
<Modal visible={fullscreen} animationType="none" statusBarTranslucent>
<StatusBar hidden />
<View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
<View style={needsRotation
? { width: height, height: width, transform: [{ rotate: '90deg' }] }
: { flex: 1, width: '100%' }
}>
<NativeVideoPlayer
playData={playData}
qualities={qualities}
currentQn={currentQn}
onQualityChange={onQualityChange}
onFullscreen={handleExitFullscreen}
bvid={bvid}
cid={cid}
danmakus={danmakus}
isFullscreen={true}
initialTime={lastTimeRef.current}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }}
style={needsRotation ? { width: height, height: width } : { flex: 1 }}
/>
{fullscreen && (
<Modal visible animationType="none" statusBarTranslucent>
<StatusBar hidden />
<View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
<View style={needsRotation
? { width: height, height: width, transform: [{ rotate: '90deg' }] }
: { flex: 1, width: '100%' }
}>
<NativeVideoPlayer
playData={playData}
qualities={qualities}
currentQn={currentQn}
onQualityChange={onQualityChange}
onFullscreen={handleExitFullscreen}
bvid={bvid}
cid={cid}
danmakus={danmakus}
isFullscreen={true}
initialTime={lastTimeRef.current}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }}
style={needsRotation ? { width: height, height: width } : { flex: 1 }}
/>
</View>
</View>
</View>
</Modal>
</Modal>
)}
</>
);
}

33
hooks/useLiveDetail.ts
View File

@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { getLiveRoomDetail, getLiveAnchorInfo, getLiveStreamUrl } from '../services/bilibili';
import type { LiveRoomDetail, LiveAnchorInfo, LiveStreamInfo } from '../services/types';
@@ -19,35 +19,42 @@ export function useLiveDetail(roomId: number) {
error: null,
});
// 用 ref 追踪最新的 roomId，避免 cancelled 闭包问题
const latestRoomId = useRef(roomId);
latestRoomId.current = roomId;
useEffect(() => {
if (!roomId) return;
let cancelled = false;
setState({ room: null, anchor: null, stream: null, loading: true, error: null });
async function fetch() {
const fetchId = roomId; // 捕获当前 roomId
async function doFetch() {
try {
const [room, anchor] = await Promise.all([
getLiveRoomDetail(roomId),
getLiveAnchorInfo(roomId),
getLiveRoomDetail(fetchId),
getLiveAnchorInfo(fetchId),
]);
if (cancelled) return;
// 仅在 roomId 未变化时更新状态（替代 cancelled 模式）
if (latestRoomId.current !== fetchId) return;
let stream: LiveStreamInfo = { hlsUrl: '', flvUrl: '', qn: 0, qualities: [] };
if (room.live_status === 1) {
stream = await getLiveStreamUrl(roomId);
if (room?.live_status === 1) {
stream = await getLiveStreamUrl(fetchId);
}
if (cancelled) return;
if (latestRoomId.current !== fetchId) return;
setState({ room, anchor, stream, loading: false, error: null });
} catch (e: any) {
if (cancelled) return;
if (latestRoomId.current !== fetchId) return;
setState(prev => ({ ...prev, loading: false, error: e?.message ?? '加载失败' }));
}
}
fetch();
return () => { cancelled = true; };
doFetch();
}, [roomId]);
const changeQuality = useCallback(async (qn: number) => {

23
store/liveStore.ts Normal file
View File

@@ -0,0 +1,23 @@
import { create } from 'zustand';
interface LiveStore {
isActive: boolean;
roomId: number;
title: string;
cover: string; // room.keyframe（直播截图）用于 web 端降级封面
hlsUrl: string;
setLive: (roomId: number, title: string, cover: string, hlsUrl: string) => void;
clearLive: () => void;
}
export const useLiveStore = create<LiveStore>(set => ({
isActive: false,
roomId: 0,
title: '',
cover: '',
hlsUrl: '',
setLive: (roomId, title, cover, hlsUrl) =>
set({ isActive: true, roomId, title, cover, hlsUrl }),
clearLive: () =>
set({ isActive: false, roomId: 0, title: '', cover: '', hlsUrl: '' }),
}));