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

播放状态

Browse Source
This commit is contained in:
Developer
2026-03-17 17:26:43 +08:00
parent 6275fd0930
commit 2e47871689
8 changed files with 364 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState } from "react";
import {
View,
Text,
@@ -7,26 +7,29 @@ import {
TouchableOpacity,
Image,
ActivityIndicator,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useLiveDetail } from '../../hooks/useLiveDetail';
import { useLiveDanmaku } from '../../hooks/useLiveDanmaku';
import { LivePlayer } from '../../components/LivePlayer';
import DanmakuList from '../../components/DanmakuList';
import { formatCount } from '../../utils/format';
import { proxyImageUrl } from '../../utils/imageUrl';
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useLocalSearchParams, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useLiveDetail } from "../../hooks/useLiveDetail";
import { useLiveDanmaku } from "../../hooks/useLiveDanmaku";
import { LivePlayer } from "../../components/LivePlayer";
import DanmakuList from "../../components/DanmakuList";
import { formatCount } from "../../utils/format";
import { proxyImageUrl } from "../../utils/imageUrl";
type Tab = "intro" | "danmaku";
export default function LiveDetailScreen() {
const { roomId } = useLocalSearchParams<{ roomId: string }>();
const router = useRouter();
const id = parseInt(roomId ?? '0', 10);
const { room, anchor, stream, loading, error, changeQuality } = useLiveDetail(id);
const [danmakuVisible, setDanmakuVisible] = useState(true);
const id = parseInt(roomId ?? "0", 10);
const { room, anchor, stream, loading, error, changeQuality } =
useLiveDetail(id);
const [tab, setTab] = useState<Tab>("intro");
const isLive = room?.live_status === 1;
const hlsUrl = stream?.hlsUrl ?? '';
const hlsUrl = stream?.hlsUrl ?? "";
const qualities = stream?.qualities ?? [];
const currentQn = stream?.qn ?? 0;
@@ -41,7 +44,7 @@ export default function LiveDetailScreen() {
<Ionicons name="chevron-back" size={24} color="#212121" />
</TouchableOpacity>
<Text style={styles.topTitle} numberOfLines={1}>
{room?.title ?? '直播间'}
{room?.title ?? "直播间"}
</Text>
</View>
@@ -54,19 +57,44 @@ export default function LiveDetailScreen() {
onQualityChange={changeQuality}
/>
{/* Content */}
{/* TabBar */}
<View style={styles.tabBar}>
<TouchableOpacity
style={styles.tabItem}
onPress={() => setTab("intro")}
>
<Text style={[styles.tabLabel, tab === "intro" && styles.tabActive]}>
简介
</Text>
{tab === "intro" && <View style={styles.tabUnderline} />}
</TouchableOpacity>
<TouchableOpacity
style={styles.tabItem}
onPress={() => setTab("danmaku")}
>
<Text
style={[styles.tabLabel, tab === "danmaku" && styles.tabActive]}
>
弹幕{danmakus.length > 0 ? ` ${danmakus.length}` : ""}
</Text>
{tab === "danmaku" && <View style={styles.tabUnderline} />}
</TouchableOpacity>
</View>
{/* Content — 两个面板始终挂载，通过 display 切换，保留弹幕列表状态 */}
{loading ? (
<ActivityIndicator style={styles.loader} color="#00AEEC" />
) : error ? (
<Text style={styles.errorText}>{error}</Text>
) : room ? (
<View style={styles.content}>
<ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
{/* Room title */}
) : (
<>
<ScrollView
style={[styles.scroll, tab !== "intro" && styles.hidden]}
showsVerticalScrollIndicator={false}
>
<View style={styles.titleSection}>
<Text style={styles.title}>{room.title}</Text>
<Text style={styles.title}>{room?.title}</Text>
<View style={styles.metaRow}>
{/* Live status */}
{isLive ? (
<View style={styles.livePill}>
<View style={styles.liveDot} />
@@ -74,30 +102,30 @@ export default function LiveDetailScreen() {
</View>
) : (
<View style={[styles.livePill, styles.offlinePill]}>
<Text style={[styles.livePillText, styles.offlinePillText]}>未开播</Text>
<Text style={[styles.livePillText, styles.offlinePillText]}>
未开播
</Text>
</View>
)}
{/* Online count */}
<View style={styles.onlineRow}>
<Ionicons name="eye-outline" size={13} color="#999" />
<Text style={styles.onlineText}>{formatCount(room.online)}</Text>
<Text style={styles.onlineText}>
{formatCount(room?.online ?? 0)}
</Text>
</View>
</View>
{/* Area tags */}
<View style={styles.areaRow}>
{room.parent_area_name ? (
{room?.parent_area_name ? (
<Text style={styles.areaTag}>{room.parent_area_name}</Text>
) : null}
{room.area_name ? (
{room?.area_name ? (
<Text style={styles.areaTag}>{room.area_name}</Text>
) : null}
</View>
</View>
{/* Divider */}
<View style={styles.divider} />
{/* Anchor row */}
{anchor && (
<View style={styles.anchorRow}>
<Image
@@ -111,104 +139,131 @@ export default function LiveDetailScreen() {
</View>
)}
{/* Room description */}
{!!room.description && (
{!!room?.description && (
<View style={styles.descBox}>
<Text style={styles.descText}>{room.description}</Text>
</View>
)}
</ScrollView>
{/* Live danmaku list */}
<DanmakuList
danmakus={danmakus}
currentTime={999999}
visible={danmakuVisible}
onToggle={() => setDanmakuVisible(v => !v)}
style={styles.danmakuList}
visible
onToggle={() => {}}
style={[styles.danmakuFull, tab !== "danmaku" && styles.hidden]}
hideHeader
maxItems={500}
/>
</View>
) : null}
</>
)}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safe: { flex: 1, backgroundColor: '#fff' },
safe: { flex: 1, backgroundColor: "#fff" },
topBar: {
flexDirection: 'row',
alignItems: 'center',
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 8,
paddingVertical: 8,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#eee',
borderBottomColor: "#eee",
},
backBtn: { padding: 4 },
topTitle: {
flex: 1,
fontSize: 15,
fontWeight: '600',
fontWeight: "600",
marginLeft: 4,
color: '#212121',
color: "#212121",
},
loader: { marginVertical: 30 },
errorText: { textAlign: 'center', color: '#f00', padding: 20 },
content: { flex: 1 },
errorText: { textAlign: "center", color: "#f00", padding: 20 },
tabBar: {
flexDirection: "row",
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: "#eee",
backgroundColor: "#fff",
},
tabItem: {
paddingHorizontal: 20,
paddingVertical: 10,
alignItems: "center",
position: "relative",
},
tabLabel: { fontSize: 14, color: "#999", fontWeight: "500" },
tabActive: { color: "#00AEEC", fontWeight: "700" },
tabUnderline: {
position: "absolute",
bottom: 0,
width: 24,
height: 2,
backgroundColor: "#00AEEC",
borderRadius: 2,
},
scroll: { flex: 1 },
titleSection: { padding: 14 },
title: {
fontSize: 16,
fontWeight: '600',
color: '#212121',
fontWeight: "600",
color: "#212121",
lineHeight: 22,
marginBottom: 8,
},
metaRow: { flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 8 },
metaRow: {
flexDirection: "row",
alignItems: "center",
gap: 10,
marginBottom: 8,
},
livePill: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#fff0f0',
flexDirection: "row",
alignItems: "center",
backgroundColor: "#fff0f0",
paddingHorizontal: 8,
paddingVertical: 3,
borderRadius: 4,
gap: 4,
},
offlinePill: { backgroundColor: '#f5f5f5' },
liveDot: { width: 6, height: 6, borderRadius: 3, backgroundColor: '#f00' },
livePillText: { fontSize: 12, color: '#f00', fontWeight: '600' },
offlinePillText: { color: '#999' },
onlineRow: { flexDirection: 'row', alignItems: 'center', gap: 3 },
onlineText: { fontSize: 12, color: '#999' },
areaRow: { flexDirection: 'row', gap: 6 },
offlinePill: { backgroundColor: "#f5f5f5" },
liveDot: { width: 6, height: 6, borderRadius: 3, backgroundColor: "#f00" },
livePillText: { fontSize: 12, color: "#f00", fontWeight: "600" },
offlinePillText: { color: "#999" },
onlineRow: { flexDirection: "row", alignItems: "center", gap: 3 },
onlineText: { fontSize: 12, color: "#999" },
areaRow: { flexDirection: "row", gap: 6 },
areaTag: {
fontSize: 11,
color: '#00AEEC',
backgroundColor: '#e8f7fd',
color: "#00AEEC",
backgroundColor: "#e8f7fd",
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 10,
},
divider: {
height: StyleSheet.hairlineWidth,
backgroundColor: '#f0f0f0',
backgroundColor: "#f0f0f0",
marginHorizontal: 14,
},
anchorRow: {
flexDirection: 'row',
alignItems: 'center',
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 14,
paddingVertical: 12,
},
avatar: { width: 40, height: 40, borderRadius: 20, marginRight: 10 },
anchorName: { flex: 1, fontSize: 14, color: '#212121', fontWeight: '500' },
anchorName: { flex: 1, fontSize: 14, color: "#212121", fontWeight: "500" },
followBtn: {
backgroundColor: '#00AEEC',
backgroundColor: "#00AEEC",
paddingHorizontal: 14,
paddingVertical: 5,
borderRadius: 14,
},
followTxt: { color: '#fff', fontSize: 12, fontWeight: '600' },
followTxt: { color: "#fff", fontSize: 12, fontWeight: "600" },
descBox: { padding: 14, paddingTop: 4 },
descText: { fontSize: 14, color: '#555', lineHeight: 22 },
danmakuList: { maxHeight: 220 },
descText: { fontSize: 14, color: "#555", lineHeight: 22 },
danmakuFull: { flex: 1 },
hidden: { display: "none" },
});

254
components/DanmakuList.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect, useCallback } from 'react';
import React, { useRef, useState, useEffect, useCallback } from "react";
import {
View,
Text,
@@ -8,17 +8,19 @@ import {
Animated,
NativeSyntheticEvent,
NativeScrollEvent,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { DanmakuItem } from '../services/types';
import { danmakuColorToCss } from '../utils/danmaku';
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { DanmakuItem } from "../services/types";
import { danmakuColorToCss } from "../utils/danmaku";
interface Props {
danmakus: DanmakuItem[];
currentTime: number;
visible: boolean;
onToggle: () => void;
style?: object;
style?: object | object[];
hideHeader?: boolean;
maxItems?: number;
}
interface DisplayedDanmaku extends DanmakuItem {
@@ -35,10 +37,18 @@ const SEEK_THRESHOLD = 2;
function formatTimestamp(seconds: number): string {
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${s.toString().padStart(2, '0')}`;
return `${m}:${s.toString().padStart(2, "0")}`;
}
export default function DanmakuList({ danmakus, currentTime, visible, onToggle, style }: Props) {
export default function DanmakuList({
danmakus,
currentTime,
visible,
onToggle,
style,
hideHeader,
maxItems = 100,
}: Props) {
const flatListRef = useRef<FlatList>(null);
const [displayedItems, setDisplayedItems] = useState<DisplayedDanmaku[]>([]);
const [unseenCount, setUnseenCount] = useState(0);
@@ -79,12 +89,12 @@ export default function DanmakuList({ danmakus, currentTime, visible, onToggle,
isAtBottomRef.current = true;
// Re-enqueue danmakus up to current time
const catchUp = danmakus.filter(d => d.time <= currentTime);
const catchUp = danmakus.filter((d) => d.time <= currentTime);
// Only enqueue recent ones to avoid flooding
const tail = catchUp.slice(-20);
queueRef.current = tail;
processedIndexRef.current = danmakus.findIndex(
d => d.time > currentTime
(d) => d.time > currentTime,
);
if (processedIndexRef.current === -1) {
processedIndexRef.current = danmakus.length;
@@ -106,37 +116,45 @@ export default function DanmakuList({ danmakus, currentTime, visible, onToggle,
useEffect(() => {
if (!visible) return;
const id = setInterval(() => {
if (queueRef.current.length === 0) return;
const id = setInterval(
() => {
if (queueRef.current.length === 0) return;
const item = queueRef.current.shift()!;
const fadeAnim = new Animated.Value(0);
const displayed: DisplayedDanmaku = {
...item,
_key: keyCounterRef.current++,
_fadeAnim: fadeAnim,
};
const item = queueRef.current.shift()!;
const fadeAnim = new Animated.Value(0);
const displayed: DisplayedDanmaku = {
...item,
_key: keyCounterRef.current++,
_fadeAnim: fadeAnim,
};
Animated.timing(fadeAnim, {
toValue: 1,
duration: 200,
useNativeDriver: true,
}).start();
Animated.timing(fadeAnim, {
toValue: 1,
duration: 200,
useNativeDriver: true,
}).start();
setDisplayedItems(prev => {
const next = [...prev, displayed];
return next.length > MAX_DISPLAYED ? next.slice(-MAX_DISPLAYED) : next;
});
if (isAtBottomRef.current) {
// Auto-scroll on next frame
requestAnimationFrame(() => {
flatListRef.current?.scrollToEnd({ animated: true });
setDisplayedItems((prev) => {
const next = [...prev, displayed];
// 超出上限时批量裁剪到一半，减少频繁截断导致的抖动
return next.length > maxItems
? next.slice(-Math.floor(maxItems / 2))
: next;
});
} else {
setUnseenCount(c => c + 1);
}
}, queueRef.current.length > QUEUE_FAST_THRESHOLD ? FAST_DRIP_INTERVAL : DRIP_INTERVAL);
if (isAtBottomRef.current) {
// Auto-scroll on next frame
requestAnimationFrame(() => {
flatListRef.current?.scrollToEnd({ animated: true });
});
} else {
setUnseenCount((c) => c + 1);
}
},
queueRef.current.length > QUEUE_FAST_THRESHOLD
? FAST_DRIP_INTERVAL
: DRIP_INTERVAL,
);
return () => clearInterval(id);
}, [visible]);
@@ -151,7 +169,7 @@ export default function DanmakuList({ danmakus, currentTime, visible, onToggle,
setUnseenCount(0);
}
},
[]
[],
);
const handleScrollBeginDrag = useCallback(() => {
@@ -168,34 +186,79 @@ export default function DanmakuList({ danmakus, currentTime, visible, onToggle,
const dotColor = danmakuColorToCss(item.color);
return (
<Animated.View style={[styles.bubble, { opacity: item._fadeAnim }]}>
<View style={[styles.colorDot, { backgroundColor: dotColor }]} />
<Text style={styles.bubbleText} numberOfLines={3}>
{item.text}
</Text>
<Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text>
{!hideHeader && (
<View style={[styles.colorDot, { backgroundColor: dotColor }]} />
)}
<View style={styles.bubbleContent}>
{item.uname && (
<View style={styles.userRow}>
{item.isAdmin && (
<View style={[styles.badge, styles.badgeAdmin]}>
<Text style={styles.badgeText}>房管</Text>
</View>
)}
{item.guardLevel === 1 && (
<View style={[styles.badge, styles.badgeGuard1]}>
<Text style={styles.badgeText}>总督</Text>
</View>
)}
{item.guardLevel === 2 && (
<View style={[styles.badge, styles.badgeGuard2]}>
<Text style={styles.badgeText}>提督</Text>
</View>
)}
{item.guardLevel === 3 && (
<View style={[styles.badge, styles.badgeGuard3]}>
<Text style={styles.badgeText}>舰长</Text>
</View>
)}
{item.medalLevel != null && (
<View style={styles.medal}>
<Text style={styles.medalText}>{item.medalName} {item.medalLevel}</Text>
</View>
)}
<Text style={styles.uname}>{item.uname}</Text>
</View>
)}
<Text style={styles.bubbleText} numberOfLines={3}>
{item.text}
</Text>
</View>
{!hideHeader && (
<Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text>
)}
</Animated.View>
);
}, []);
}, [hideHeader]);
const keyExtractor = useCallback((item: DisplayedDanmaku) => String(item._key), []);
const keyExtractor = useCallback(
(item: DisplayedDanmaku) => String(item._key),
[],
);
return (
<View style={[styles.container, style]}>
<TouchableOpacity style={styles.header} onPress={onToggle} activeOpacity={0.7}>
<Ionicons
name={visible ? 'chatbubbles' : 'chatbubbles-outline'}
size={16}
color="#00AEEC"
/>
<Text style={styles.headerText}>
弹幕 {danmakus.length > 0 ? `(${danmakus.length})` : ''}
</Text>
<Ionicons
name={visible ? 'chevron-up' : 'chevron-down'}
size={14}
color="#999"
/>
</TouchableOpacity>
{!hideHeader && (
<TouchableOpacity
style={styles.header}
onPress={onToggle}
activeOpacity={0.7}
>
<Ionicons
name={visible ? "chatbubbles" : "chatbubbles-outline"}
size={16}
color="#00AEEC"
/>
<Text style={styles.headerText}>
弹幕 {danmakus.length > 0 ? `(${danmakus.length})` : ""}
</Text>
<Ionicons
name={visible ? "chevron-up" : "chevron-down"}
size={14}
color="#999"
/>
</TouchableOpacity>
)}
{visible && (
<View style={styles.listWrapper}>
@@ -212,7 +275,7 @@ export default function DanmakuList({ danmakus, currentTime, visible, onToggle,
removeClippedSubviews={true}
ListEmptyComponent={
<Text style={styles.empty}>
{danmakus.length === 0 ? '暂无弹幕' : '弹幕将随视频播放显示'}
{danmakus.length === 0 ? "暂无弹幕" : "弹幕将随视频播放显示"}
</Text>
}
/>
@@ -233,13 +296,13 @@ export default function DanmakuList({ danmakus, currentTime, visible, onToggle,
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
backgroundColor: "#fff",
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: '#eee',
borderTopColor: "#eee",
},
header: {
flexDirection: 'row',
alignItems: 'center',
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 12,
paddingVertical: 8,
gap: 6,
@@ -247,25 +310,25 @@ const styles = StyleSheet.create({
headerText: {
flex: 1,
fontSize: 13,
color: '#212121',
fontWeight: '500',
color: "#212121",
fontWeight: "500",
},
listWrapper: {
flex: 1,
position: 'relative',
position: "relative",
},
list: {
flex: 1,
backgroundColor: '#fafafa',
backgroundColor: "#fafafa",
},
listContent: {
paddingHorizontal: 8,
paddingVertical: 4,
},
bubble: {
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: '#f8f8f8',
flexDirection: "row",
alignItems: "flex-start",
backgroundColor: "#f8f8f8",
borderRadius: 8,
paddingHorizontal: 10,
paddingVertical: 6,
@@ -279,36 +342,63 @@ const styles = StyleSheet.create({
marginTop: 6,
flexShrink: 0,
},
bubbleText: {
bubbleContent: {
flex: 1,
},
userRow: {
flexDirection: "row",
alignItems: "center",
flexWrap: "wrap",
gap: 4,
marginBottom: 2,
},
badge: {
borderRadius: 3,
paddingHorizontal: 4,
paddingVertical: 1,
},
badgeAdmin: { backgroundColor: "#e53935" },
badgeGuard1: { backgroundColor: "#9c27b0" },
badgeGuard2: { backgroundColor: "#1565c0" },
badgeGuard3: { backgroundColor: "#1976d2" },
badgeText: { color: "#fff", fontSize: 10, fontWeight: "600" },
medal: {
borderRadius: 3,
paddingHorizontal: 5,
paddingVertical: 1,
backgroundColor: "#ff6d9d",
},
medalText: { color: "#fff", fontSize: 10, fontWeight: "600" },
uname: { fontSize: 11, color: "#999" },
bubbleText: {
fontSize: 13,
color: '#333',
color: "#333",
lineHeight: 18,
},
timestamp: {
fontSize: 11,
color: '#bbb',
color: "#bbb",
marginTop: 1,
flexShrink: 0,
},
pill: {
position: 'absolute',
position: "absolute",
bottom: 8,
alignSelf: 'center',
backgroundColor: '#00AEEC',
alignSelf: "center",
backgroundColor: "#00AEEC",
borderRadius: 16,
paddingHorizontal: 14,
paddingVertical: 6,
},
pillText: {
fontSize: 12,
color: '#fff',
fontWeight: '600',
color: "#fff",
fontWeight: "600",
},
empty: {
fontSize: 12,
color: '#999',
textAlign: 'center',
color: "#999",
textAlign: "center",
paddingVertical: 20,
},
});

19
components/LivePlayer.tsx
View File

@@ -86,6 +86,8 @@ function NativeLivePlayer({
const [buffering, setBuffering] = useState(true);
const [showQualityPanel, setShowQualityPanel] = useState(false);
const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const videoRef = useRef<any>(null);
const currentTimeRef = useRef(0);
const resetHideTimer = useCallback(() => {
if (hideTimer.current) clearTimeout(hideTimer.current);
@@ -137,8 +139,10 @@ function NativeLivePlayer({
});
}, [resetHideTimer]);
const fsW = Math.max(screenW, screenH);
const fsH = Math.min(screenW, screenH);
const containerStyle = isFullscreen
? { width: screenH, height: screenW }
? { width: fsW, height: fsH }
: { width: screenW, height: videoH };
const currentQnDesc = qualities.find(q => q.qn === currentQn)?.desc ?? '';
@@ -146,14 +150,21 @@ function NativeLivePlayer({
const videoContent = (
<View style={[styles.container, containerStyle]}>
<Video
key={hlsUrl}
key={hlsUrl + (isFullscreen ? '_fs' : '_normal')}
ref={videoRef}
source={{ uri: hlsUrl, headers: HEADERS }}
style={StyleSheet.absoluteFill}
resizeMode="contain"
controls={false}
paused={paused}
onProgress={({ currentTime: ct }: { currentTime: number }) => { currentTimeRef.current = ct; }}
onBuffer={({ isBuffering }: { isBuffering: boolean }) => setBuffering(isBuffering)}
onLoad={() => setBuffering(false)}
onLoad={() => {
setBuffering(false);
if (currentTimeRef.current > 0) {
videoRef.current?.seek(currentTimeRef.current);
}
}}
/>
{buffering && (
@@ -245,7 +256,7 @@ function NativeLivePlayer({
if (isFullscreen) {
return (
<Modal visible transparent animationType="fade" supportedOrientations={['landscape']}>
<Modal visible transparent animationType="fade" supportedOrientations={['landscape']} onRequestClose={() => setIsFullscreen(false)}>
<View style={styles.fsModal}>{videoContent}</View>
</Modal>
);

21
components/NativeVideoPlayer.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useRef, useEffect, useCallback } from "react";
import React, { useState, useRef, useEffect, useCallback, forwardRef, useImperativeHandle } from "react";
import { formatDuration } from "../utils/format";
import {
View,
@@ -51,6 +51,10 @@ function findFrameByTime(index: number[], seekTime: number): number {
return lo;
}
export interface NativeVideoPlayerRef {
seek: (t: number) => void;
}
interface Props {
playData: PlayUrlResponse | null;
qualities: { qn: number; desc: string }[];
@@ -65,9 +69,10 @@ interface Props {
isFullscreen?: boolean;
onTimeUpdate?: (t: number) => void;
initialTime?: number;
forcePaused?: boolean;
}
export function NativeVideoPlayer({
export const NativeVideoPlayer = forwardRef<NativeVideoPlayerRef, Props>(function NativeVideoPlayer({
playData,
qualities,
currentQn,
@@ -81,7 +86,8 @@ export function NativeVideoPlayer({
isFullscreen,
onTimeUpdate,
initialTime,
}: Props) {
forcePaused,
}: Props, ref) {
const { width: SCREEN_W, height: SCREEN_H } = useWindowDimensions();
const VIDEO_H = SCREEN_W * 0.5625;
@@ -112,6 +118,11 @@ export function NativeVideoPlayer({
const [showDanmaku, setShowDanmaku] = useState(true);
const videoRef = useRef<VideoRef>(null);
useImperativeHandle(ref, () => ({
seek: (t: number) => { videoRef.current?.seek(t); },
}));
const currentDesc =
qualities.find((q) => q.qn === currentQn)?.desc ??
String(currentQn || "HD");
@@ -352,7 +363,7 @@ export function NativeVideoPlayer({
style={StyleSheet.absoluteFill}
resizeMode="contain"
controls={false}
paused={paused}
paused={!!(forcePaused || paused)}
onProgress={({
currentTime: ct,
seekableDuration: dur,
@@ -553,7 +564,7 @@ export function NativeVideoPlayer({
</Modal>
</View>
);
}
});
const styles = StyleSheet.create({
container: { backgroundColor: "#000" },

36
components/VideoPlayer.tsx
View File

@@ -3,7 +3,7 @@ import { View, StyleSheet, Text, Platform, Modal, StatusBar, useWindowDimensions
// expo-screen-orientation requires a dev build; gracefully degrade in Expo Go
let ScreenOrientation: typeof import('expo-screen-orientation') | null = null;
try { ScreenOrientation = require('expo-screen-orientation'); } catch {}
import { NativeVideoPlayer } from './NativeVideoPlayer';
import { NativeVideoPlayer, type NativeVideoPlayerRef } from './NativeVideoPlayer';
import type { PlayUrlResponse, DanmakuItem } from '../services/types';
interface Props {
@@ -25,6 +25,7 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, o
// In Expo Go ScreenOrientation is unavailable; simulate landscape via CSS transform
const needsRotation = !ScreenOrientation && fullscreen;
const lastTimeRef = useRef(0);
const portraitRef = useRef<NativeVideoPlayerRef>(null);
const handleEnterFullscreen = async () => {
if (Platform.OS !== 'web')
@@ -33,6 +34,8 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, o
};
const handleExitFullscreen = async () => {
// Seek portrait player to current position before it becomes visible again
portraitRef.current?.seek(lastTimeRef.current);
setFullscreen(false);
if (Platform.OS !== 'web')
await ScreenOrientation?.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
@@ -69,21 +72,22 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, o
return (
<>
{/* Portrait player: unmount when fullscreen */}
{!fullscreen && (
<NativeVideoPlayer
playData={playData}
qualities={qualities}
currentQn={currentQn}
onQualityChange={onQualityChange}
onFullscreen={handleEnterFullscreen}
onMiniPlayer={onMiniPlayer}
bvid={bvid}
cid={cid}
isFullscreen={false}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }}
/>
)}
{/* Portrait player: always mounted, force-paused while fullscreen is active */}
<NativeVideoPlayer
ref={portraitRef}
playData={playData}
qualities={qualities}
currentQn={currentQn}
onQualityChange={onQualityChange}
onFullscreen={handleEnterFullscreen}
onMiniPlayer={onMiniPlayer}
bvid={bvid}
cid={cid}
isFullscreen={false}
forcePaused={fullscreen}
initialTime={lastTimeRef.current}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }}
/>
<Modal visible={fullscreen} animationType="none" statusBarTranslucent>
<StatusBar hidden />

20
hooks/useLiveDanmaku.ts
View File

@@ -28,9 +28,9 @@ function buildPacket(body: string, op: number): Uint8Array {
// ver = 1
pkt[6] = 0x00; pkt[7] = 0x01;
// op (big-endian uint32)
pkt[8] = (op >>> 24) & 0xff;
pkt[9] = (op >>> 16) & 0xff;
pkt[10] = (op >>> 8) & 0xff;
pkt[8] = (op >>> 24) & 0xff;
pkt[9] = (op >>> 16) & 0xff;
pkt[10] = (op >>> 8) & 0xff;
pkt[11] = op & 0xff;
// seq = 1
pkt[12] = 0x00; pkt[13] = 0x00; pkt[14] = 0x00; pkt[15] = 0x01;
@@ -78,7 +78,12 @@ function extractDanmaku(buf: Uint8Array): DanmakuItem[] {
const text = info[1] as string;
// color is at info[0][2] (decimal 0xRRGGBB)
const color = (info[0]?.[2] as number) ?? 0xffffff;
result.push({ time: 0, mode: 1, fontSize: 25, color, text });
const uname = info[2]?.[1] as string | undefined;
const isAdmin = info[2]?.[2] === 1;
const guardLevel = (info[7] as number) ?? 0;
const medalLevel = Array.isArray(info[3]) && info[3].length > 0 ? info[3][0] as number : undefined;
const medalName = Array.isArray(info[3]) && info[3].length > 1 ? info[3][1] as string : undefined;
result.push({ time: 0, mode: 1, fontSize: 25, color, text, uname, isAdmin, guardLevel, medalLevel, medalName });
}
} catch { /* ignore parse errors */ }
}
@@ -118,7 +123,6 @@ export function useLiveDanmaku(roomId: number): DanmakuItem[] {
const info = await getLiveDanmakuInfo(roomId);
token = info.token;
host = info.host;
console.log('[danmaku] getDanmuInfo ok, host:', host, 'token:', token.slice(0, 10) + '...');
} catch (e) {
console.warn('[danmaku] getDanmuInfo failed:', e);
}
@@ -133,7 +137,6 @@ export function useLiveDanmaku(roomId: number): DanmakuItem[] {
const cookieParts = buvid3 ? [`buvid3=${buvid3}`] : [];
if (sessdata) cookieParts.push(`SESSDATA=${sessdata}`);
console.log('[danmaku] connecting to', host, 'cookie len:', cookieParts.join('; ').length);
// React Native supports non-standard options.headers in the WebSocket constructor
const ws = new (WebSocket as any)(host, [], {
headers: cookieParts.length ? { Cookie: cookieParts.join('; ') } : {},
@@ -152,12 +155,9 @@ export function useLiveDanmaku(roomId: number): DanmakuItem[] {
const authPkt = buildPacket(authBody, 7);
const hdr = Array.from(authPkt.slice(0, 16))
.map(b => b.toString(16).padStart(2, '0')).join(' ');
console.log('[danmaku] auth header hex:', hdr);
console.log('[danmaku] auth body len:', authPkt.length - 16);
// Send as ArrayBuffer (more reliable than Uint8Array in some RN/Hermes versions)
const t0 = Date.now();
ws.send(authPkt.buffer as ArrayBuffer);
console.log('[danmaku] send done, readyState:', ws.readyState, 'at', t0);
heartbeatRef.current = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) ws.send(buildPacket('', 2));
@@ -173,10 +173,8 @@ export function useLiveDanmaku(roomId: number): DanmakuItem[] {
ws.onerror = (e: Event) => {
const ws2 = (e as any).currentTarget as WebSocket;
console.warn('[danmaku] ws error, readyState:', ws2?.readyState, 'url:', ws2?.url);
};
ws.onclose = (e: CloseEvent) => {
console.log('[danmaku] ws closed, code:', e.code, 'reason:', e.reason, 'wasClean:', e.wasClean);
if (heartbeatRef.current) clearInterval(heartbeatRef.current);
};
}

4
services/bilibili.ts
View File

@@ -278,7 +278,7 @@ export async function getLiveStreamUrl(roomId: number, qn = 10000): Promise<Live
const codec = fmt?.codec?.find((c: any) => c.codec_name === 'avc') ?? fmt?.codec?.[0];
const urlInfo = codec?.url_info?.[0];
if (urlInfo) {
hlsUrl = urlInfo.host + codec.base_url;
hlsUrl = urlInfo.host + codec.base_url + (urlInfo.extra ?? '');
currentQn = codec.current_qn ?? 0;
}
}
@@ -289,7 +289,7 @@ export async function getLiveStreamUrl(roomId: number, qn = 10000): Promise<Live
const codec = fmt?.codec?.find((c: any) => c.codec_name === 'avc') ?? fmt?.codec?.[0];
const urlInfo = codec?.url_info?.[0];
if (urlInfo) {
flvUrl = urlInfo.host + codec.base_url;
flvUrl = urlInfo.host + codec.base_url + (urlInfo.extra ?? '');
}
}

5
services/types.ts
View File

@@ -117,6 +117,11 @@ export interface DanmakuItem {
fontSize: number;
color: number; // 0xRRGGBB 十进制整数
text: string;
uname?: string;
isAdmin?: boolean;
guardLevel?: number; // 0=无, 1=总督, 2=提督, 3=舰长
medalLevel?: number;
medalName?: string;
}
export interface LiveRoom {