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

feat: 视频推荐关联当前视频、UP主信息展示、直播全屏修复及UI优化

Browse Source 
- 推荐列表改用 getVideoRelated 基于当前 bvid 推荐，与首页 feed 解耦
- 视频详情页 UP主名称下方展示粉丝数和视频数
- 推荐视频点击改为 router.replace 避免页面堆叠
- 直播全屏改用 position:absolute，解决退出全屏视频重建暂停问题
- 退出全屏时直播自动暂停
- 直播画质选中状态修复，过滤杜比/4K 画质选项
- 直播画质面板改为居中 Modal 弹出框
- 视频详情 Tab 按钮左对齐，评论排序及设置页按钮统一实心背景风格
This commit is contained in:
Developer
2026-03-25 12:03:28 +08:00
parent 7870c83b12
commit e1fa8cc347
8 changed files with 340 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
CHANGELOG.md
View File

@@ -5,7 +5,25 @@
---
## [1.0.8] - 2026-03-24
## [1.0.12] - 2026-03-25
### 新增
- **UP主信息**：视频详情页博主名称下方展示粉丝数和视频数（`getUploaderStat` → `/x/web-interface/card`）
- **视频相关推荐**：详情页推荐列表改为基于当前视频（`getVideoRelated` → `/x/web-interface/archive/related`），不再与首页 feed 共用
### 修复
- **直播全屏退出暂停**：全屏改用 `position:absolute` 覆盖，Video 组件始终在同一棵 React 树中，不再因 Modal 切换导致重建暂停；退出全屏时直播自动暂停
- **直播画质选中**：`changeQuality` 强制用请求的 `qn` 覆盖服务端协商值，画质面板高亮与用户选择一致
- **直播画质过滤**：过滤 `qn > 10000` 的选项（杜比/4K），最高仅展示原画
- **推荐视频导航**：点击推荐列表改用 `router.replace`，避免详情页无限堆叠
### 优化
- **直播画质面板**：改为居中 Modal 弹出框
- **视频详情 Tab**：按钮向左靠齐，移除均分宽度
- **评论排序按钮**：统一为实心背景风格（`#f0f0f0` → `#00AEEC`），与直播分区 Tab 一致
- **设置页按钮**：外观/流量选项按钮统一为实心背景风格
## [1.0.11] - 2026-03-24
### 新增
- **暗黑模式**：全局主题系统（`utils/theme.ts`），支持亮色 / 暗色一键切换，覆盖所有页面和组件

16
app/settings.tsx
View File

@@ -140,16 +140,14 @@ const styles = StyleSheet.create({
sectionLabel: { fontSize: 13, marginBottom: 10 },
optionRow: { flexDirection: 'row', gap: 10 },
option: {
paddingHorizontal: 20,
paddingVertical: 6,
borderRadius: 20,
borderWidth: 1,
borderColor: '#e0e0e0',
backgroundColor: 'transparent',
paddingHorizontal: 10,
paddingVertical: 2,
borderRadius: 16,
backgroundColor: '#f0f0f0',
},
optionActive: { borderColor: '#00AEEC', backgroundColor: '#e8f7fd' },
optionText: { fontSize: 14, color: '#666' },
optionTextActive: { color: '#00AEEC', fontWeight: '600' },
optionActive: { backgroundColor: '#00AEEC' },
optionText: { fontSize: 13, color: '#333', fontWeight: '500' },
optionTextActive: { color: '#fff', fontWeight: '600' },
hint: { fontSize: 12, marginTop: 8 },
versionRow: {
flexDirection: 'row',

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

@@ -13,7 +13,7 @@ import { useLocalSearchParams, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { VideoPlayer } from "../../components/VideoPlayer";
import { CommentItem } from "../../components/CommentItem";
import { getDanmaku } from "../../services/bilibili";
import { getDanmaku, getUploaderStat } from "../../services/bilibili";
import { DanmakuItem } from "../../services/types";
import DanmakuList from "../../components/DanmakuList";
import { useVideoDetail } from "../../hooks/useVideoDetail";
@@ -49,11 +49,12 @@ 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 {
videos: relatedVideos,
loading: relatedLoading,
load: loadRelated,
} = useRelatedVideos();
} = useRelatedVideos(bvid as string);
useEffect(() => {
loadRelated();
@@ -68,6 +69,11 @@ export default function VideoDetailScreen() {
getDanmaku(video.cid).then(setDanmakus);
}, [video?.cid]);
useEffect(() => {
if (!video?.owner?.mid) return;
getUploaderStat(video.owner.mid).then(setUploaderStat).catch(() => {});
}, [video?.owner?.mid]);
return (
<SafeAreaView style={[styles.safe, { backgroundColor: theme.card }]}>
{/* TopBar */}
@@ -178,10 +184,6 @@ export default function VideoDetailScreen() {
data={relatedVideos}
keyExtractor={(item) => item.bvid}
showsVerticalScrollIndicator={false}
onEndReached={() => {
if (!relatedLoading) loadRelated();
}}
onEndReachedThreshold={0.5}
ListHeaderComponent={
<>
<View style={styles.upRow}>
@@ -189,9 +191,16 @@ export default function VideoDetailScreen() {
source={{ uri: proxyImageUrl(video.owner.face) }}
style={styles.avatar}
/>
<View style={styles.upInfo}>
<Text style={[styles.upName, { color: theme.text }]}>
{video.owner.name}
</Text>
{uploaderStat && (
<Text style={styles.upStat}>
{formatCount(uploaderStat.follower)}粉丝 · {formatCount(uploaderStat.archiveCount)}视频
</Text>
)}
</View>
<TouchableOpacity style={styles.followBtn}>
<Text style={styles.followTxt}>+ 关注</Text>
</TouchableOpacity>
@@ -249,7 +258,7 @@ export default function VideoDetailScreen() {
borderBottomColor: theme.border,
},
]}
onPress={() => router.push(`/video/${item.bvid}` as any)}
onPress={() => router.replace(`/video/${item.bvid}` as any)}
activeOpacity={0.85}
>
<View
@@ -321,7 +330,6 @@ export default function VideoDetailScreen() {
<View
style={[styles.sortRow, { borderBottomColor: theme.border }]}
>
<Text style={styles.sortLabel}>排序</Text>
<TouchableOpacity
style={[
styles.sortBtn,
@@ -447,7 +455,7 @@ function SeasonSection({
contentContainerStyle={{ paddingHorizontal: 12, gap: 10 }}
getItemLayout={(_data, index) => ({
length: 130,
offset: 12 + index * 140,
offset: 12 + index * 130,
index,
})}
onScrollToIndexFailed={() => {}}
@@ -528,8 +536,10 @@ const styles = StyleSheet.create({
paddingBottom: 0,
paddingTop: 12,
},
avatar: { width: 48, height: 48, borderRadius: 30, marginRight: 10 },
upName: { flex: 1, fontSize: 14, fontWeight: "500" },
avatar: { width: 40, height: 40, borderRadius: 30, marginRight: 10 },
upInfo: { flex: 1, justifyContent: "center" },
upName: { fontSize: 14, fontWeight: "500" },
upStat: { fontSize: 11, color: "#999", marginTop: 2 },
followBtn: {
backgroundColor: "#00AEEC",
paddingHorizontal: 10,
@@ -570,11 +580,12 @@ const styles = StyleSheet.create({
tabBar: {
flexDirection: "row",
borderBottomWidth: StyleSheet.hairlineWidth,
paddingLeft: 3,
},
tabItem: {
flex: 1,
alignItems: "center",
paddingVertical: 12,
paddingHorizontal: 12,
position: "relative",
},
tabLabel: { fontSize: 13 },
@@ -593,7 +604,7 @@ const styles = StyleSheet.create({
danmakuTab: { flex: 1 },
emptyTxt: { textAlign: "center", color: "#bbb", padding: 30 },
relatedHeader: {
paddingLeft: 12,
paddingLeft: 13,
paddingBottom: 8,
paddingTop: 8,
},
@@ -643,15 +654,13 @@ const styles = StyleSheet.create({
gap: 8,
borderBottomWidth: StyleSheet.hairlineWidth,
},
sortLabel: { fontSize: 13, color: "#999", marginRight: 4 },
sortBtn: {
paddingHorizontal: 14,
paddingVertical: 3,
borderRadius: 20,
borderWidth: 1,
borderColor: "#e0e0e0",
paddingHorizontal: 10,
paddingVertical: 2,
borderRadius: 16,
backgroundColor: "#f0f0f0",
},
sortBtnActive: { borderColor: "#00AEEC", backgroundColor: "#e8f7fd" },
sortBtnTxt: { fontSize: 12, color: "#666" },
sortBtnTxtActive: { color: "#00AEEC", fontWeight: "600" as const },
sortBtnActive: { backgroundColor: "#00AEEC" },
sortBtnTxt: { fontSize: 13, color: "#333", fontWeight: "500" },
sortBtnTxtActive: { color: "#fff", fontWeight: "600" as const },
});

78
components/DanmakuList.tsx
View File

@@ -211,22 +211,30 @@ export default function DanmakuList({
}, []);
// ─── Live mode render (B站-style chat) ─────────────────────────────────────
const renderLiveItem = useCallback(({ item }: { item: DisplayedDanmaku }) => {
const renderLiveItem = useCallback(
({ item }: { item: DisplayedDanmaku }) => {
const guard = item.guardLevel ? GUARD_LABELS[item.guardLevel] : null;
const timeStr = formatLiveTime(item.timeline);
return (
<Animated.View style={[liveStyles.row, { opacity: item._fadeAnim, borderBottomColor: theme.border }]}>
{timeStr ? (
<Text style={liveStyles.time}>{timeStr}</Text>
) : null}
<Animated.View
style={[
liveStyles.row,
{ opacity: item._fadeAnim, borderBottomColor: theme.border },
]}
>
{timeStr ? <Text style={liveStyles.time}>{timeStr}</Text> : null}
<View style={liveStyles.msgBody}>
{guard && (
<View style={[liveStyles.guardTag, { backgroundColor: guard.color }]}>
<View
style={[liveStyles.guardTag, { backgroundColor: guard.color }]}
>
<Text style={liveStyles.guardTagText}>{guard.text}</Text>
</View>
)}
{item.isAdmin && (
<View style={[liveStyles.guardTag, { backgroundColor: "#e53935" }]}>
<View
style={[liveStyles.guardTag, { backgroundColor: "#e53935" }]}
>
<Text style={liveStyles.guardTagText}>房管</Text>
</View>
)}
@@ -242,27 +250,42 @@ export default function DanmakuList({
{item.uname ?? "匿名"}
</Text>
<Text style={liveStyles.colon}>：</Text>
<Text style={[liveStyles.text, { color: theme.text }]} numberOfLines={2}>
<Text
style={[liveStyles.text, { color: theme.text }]}
numberOfLines={2}
>
{item.text}
</Text>
</View>
</Animated.View>
);
}, [theme]);
},
[theme],
);
// ─── Video mode render (original bubble) ───────────────────────────────────
const renderVideoItem = useCallback(({ item }: { item: DisplayedDanmaku }) => {
const renderVideoItem = useCallback(
({ item }: { item: DisplayedDanmaku }) => {
const dotColor = danmakuColorToCss(item.color);
return (
<Animated.View style={[styles.bubble, { opacity: item._fadeAnim, backgroundColor: theme.bg }]}>
<View style={[styles.colorDot, { backgroundColor: dotColor }]} />
<Text style={[styles.bubbleText, { color: theme.text }]} numberOfLines={3}>
<Animated.View
style={[
styles.bubble,
{ opacity: item._fadeAnim, backgroundColor: theme.bg },
]}
>
<Text
style={[styles.bubbleText, { color: dotColor }]}
numberOfLines={3}
>
{item.text}
</Text>
<Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text>
</Animated.View>
);
}, [theme]);
},
[theme],
);
const keyExtractor = useCallback(
(item: DisplayedDanmaku) => String(item._key),
@@ -270,7 +293,13 @@ export default function DanmakuList({
);
return (
<View style={[styles.container, { backgroundColor: theme.card, borderTopColor: theme.border }, style]}>
<View
style={[
styles.container,
{ backgroundColor: theme.card, borderTopColor: theme.border },
style,
]}
>
{!hideHeader && (
<TouchableOpacity
style={styles.header}
@@ -300,8 +329,13 @@ export default function DanmakuList({
data={displayedItems}
keyExtractor={keyExtractor}
renderItem={isLive ? renderLiveItem : renderVideoItem}
style={[isLive ? liveStyles.list : styles.list, { backgroundColor: theme.bg }]}
contentContainerStyle={isLive ? liveStyles.listContent : styles.listContent}
style={[
isLive ? liveStyles.list : styles.list,
{ backgroundColor: theme.card },
]}
contentContainerStyle={
isLive ? liveStyles.listContent : styles.listContent
}
onScroll={handleScroll}
onScrollBeginDrag={handleScrollBeginDrag}
scrollEventThrottle={16}
@@ -323,7 +357,6 @@ export default function DanmakuList({
)}
</View>
)}
</View>
);
}
@@ -370,13 +403,6 @@ const styles = StyleSheet.create({
marginVertical: 2,
gap: 8,
},
colorDot: {
width: 6,
height: 6,
borderRadius: 3,
marginTop: 6,
flexShrink: 0,
},
bubbleText: {
flex: 1,
fontSize: 13,
@@ -425,8 +451,6 @@ const liveStyles = StyleSheet.create({
flexDirection: "row",
alignItems: "flex-start",
paddingVertical: 5,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: "#f0f0f2",
},
time: {
fontSize: 10,

252
components/LivePlayer.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useRef, useCallback, useEffect } from 'react';
import React, { useState, useRef, useCallback, useEffect } from "react";
import {
View,
Text,
@@ -8,8 +8,8 @@ import {
Modal,
Platform,
useWindowDimensions,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
interface Props {
hlsUrl: string;
@@ -23,16 +23,23 @@ interface Props {
const HIDE_DELAY = 3000;
const 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',
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",
};
export function LivePlayer({ hlsUrl, flvUrl, isLive, qualities = [], currentQn = 0, onQualityChange }: Props) {
export function LivePlayer({
hlsUrl,
flvUrl,
isLive,
qualities = [],
currentQn = 0,
onQualityChange,
}: Props) {
const { width: SCREEN_W, height: SCREEN_H } = useWindowDimensions();
const VIDEO_H = SCREEN_W * 0.5625;
if (Platform.OS === 'web') {
if (Platform.OS === "web") {
return (
<View style={[styles.container, { width: SCREEN_W, height: VIDEO_H }]}>
<Text style={styles.webHint}>请在手机端观看直播</Text>
@@ -79,7 +86,7 @@ function NativeLivePlayer({
currentQn: number;
onQualityChange?: (qn: number) => void;
}) {
const Video = require('react-native-video').default;
const Video = require("react-native-video").default;
const [showControls, setShowControls] = useState(true);
const [paused, setPaused] = useState(false);
@@ -97,14 +104,16 @@ function NativeLivePlayer({
useEffect(() => {
resetHideTimer();
return () => { if (hideTimer.current) clearTimeout(hideTimer.current); };
return () => {
if (hideTimer.current) clearTimeout(hideTimer.current);
};
}, []);
// Lock/unlock orientation on fullscreen toggle
useEffect(() => {
(async () => {
try {
const ScreenOrientation = require('expo-screen-orientation');
const ScreenOrientation = require("expo-screen-orientation");
if (isFullscreen) {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
@@ -114,7 +123,9 @@ function NativeLivePlayer({
ScreenOrientation.OrientationLock.PORTRAIT_UP,
);
}
} catch { /* graceful degradation in Expo Go */ }
} catch {
/* graceful degradation in Expo Go */
}
})();
}, [isFullscreen]);
@@ -123,18 +134,23 @@ function NativeLivePlayer({
return () => {
(async () => {
try {
const ScreenOrientation = require('expo-screen-orientation');
const ScreenOrientation = require("expo-screen-orientation");
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP,
);
} catch { /* ignore */ }
} catch {
/* ignore */
}
})();
};
}, []);
const handleTap = useCallback(() => {
setShowControls(prev => {
if (!prev) { resetHideTimer(); return true; }
setShowControls((prev) => {
if (!prev) {
resetHideTimer();
return true;
}
if (hideTimer.current) clearTimeout(hideTimer.current);
return false;
});
@@ -143,23 +159,27 @@ function NativeLivePlayer({
const fsW = Math.max(screenW, screenH);
const fsH = Math.min(screenW, screenH);
const containerStyle = isFullscreen
? { width: fsW, height: fsH }
? { position: 'absolute' as const, top: 0, left: 0, width: fsW, height: fsH, zIndex: 999, elevation: 999 }
: { width: screenW, height: videoH };
const currentQnDesc = qualities.find(q => q.qn === currentQn)?.desc ?? '';
const currentQnDesc = qualities.find((q) => q.qn === currentQn)?.desc ?? "";
const videoContent = (
<View style={[styles.container, containerStyle]}>
<Video
key={hlsUrl + (isFullscreen ? '_fs' : '_normal')}
key={hlsUrl}
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)}
onProgress={({ currentTime: ct }: { currentTime: number }) => {
currentTimeRef.current = ct;
}}
onBuffer={({ isBuffering }: { isBuffering: boolean }) =>
setBuffering(isBuffering)
}
onLoad={() => {
setBuffering(false);
if (currentTimeRef.current > 0) {
@@ -183,10 +203,17 @@ function NativeLivePlayer({
{/* Center play/pause */}
<TouchableOpacity
style={styles.centerBtn}
onPress={() => { setPaused(p => !p); resetHideTimer(); }}
onPress={() => {
setPaused((p) => !p);
resetHideTimer();
}}
>
<View style={styles.centerBtnBg}>
<Ionicons name={paused ? 'play' : 'pause'} size={28} color="#fff" />
<Ionicons
name={paused ? "play" : "pause"}
size={28}
color="#fff"
/>
</View>
</TouchableOpacity>
@@ -194,46 +221,79 @@ function NativeLivePlayer({
<View style={styles.bottomBar}>
<TouchableOpacity
style={styles.ctrlBtn}
onPress={() => { setPaused(p => !p); resetHideTimer(); }}
onPress={() => {
setPaused((p) => !p);
resetHideTimer();
}}
>
<Ionicons name={paused ? 'play' : 'pause'} size={16} color="#fff" />
<Ionicons
name={paused ? "play" : "pause"}
size={16}
color="#fff"
/>
</TouchableOpacity>
<View style={{ flex: 1 }} />
{qualities.length > 0 && (
<TouchableOpacity
style={styles.qualityBtn}
onPress={() => { setShowQualityPanel(true); resetHideTimer(); }}
onPress={() => {
setShowQualityPanel(true);
resetHideTimer();
}}
>
<Text style={styles.qualityText}>{currentQnDesc || '清晰度'}</Text>
<Text style={styles.qualityText}>
{currentQnDesc || "清晰度"}
</Text>
</TouchableOpacity>
)}
<TouchableOpacity
style={styles.ctrlBtn}
onPress={() => { setIsFullscreen(fs => !fs); resetHideTimer(); }}
onPress={() => {
if (isFullscreen) setPaused(true);
setIsFullscreen((fs) => !fs);
resetHideTimer();
}}
>
<Ionicons name={isFullscreen ? 'contract' : 'expand'} size={16} color="#fff" />
<Ionicons
name={isFullscreen ? "contract" : "expand"}
size={16}
color="#fff"
/>
</TouchableOpacity>
</View>
</>
)}
{/* Quality selector panel */}
{showQualityPanel && (
<TouchableWithoutFeedback onPress={() => setShowQualityPanel(false)}>
<View style={styles.qualityOverlay}>
<TouchableWithoutFeedback>
<Modal
visible={showQualityPanel}
transparent
animationType="fade"
onRequestClose={() => setShowQualityPanel(false)}
>
<TouchableOpacity
style={styles.qualityOverlay}
activeOpacity={1}
onPress={() => setShowQualityPanel(false)}
>
<TouchableOpacity activeOpacity={1} onPress={() => {}}>
<View style={styles.qualityPanel}>
<Text style={styles.qualityPanelTitle}>清晰度</Text>
{qualities.map(q => (
{qualities.map((q) => (
<TouchableOpacity
key={q.qn}
style={[styles.qualityItem, currentQn === q.qn && styles.qualityItemActive]}
style={[styles.qualityItem]}
onPress={() => {
onQualityChange?.(q.qn);
setShowQualityPanel(false);
}}
>
<Text style={[styles.qualityItemText, currentQn === q.qn && styles.qualityItemTextActive]}>
<Text
style={[
styles.qualityItemText,
currentQn === q.qn && styles.qualityItemTextActive,
]}
>
{q.desc}
</Text>
{currentQn === q.qn && (
@@ -242,45 +302,36 @@ function NativeLivePlayer({
</TouchableOpacity>
))}
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
)}
</View>
);
if (isFullscreen) {
return (
<Modal visible transparent animationType="fade" supportedOrientations={['landscape']} onRequestClose={() => setIsFullscreen(false)}>
<View style={styles.fsModal}>{videoContent}</View>
</TouchableOpacity>
</TouchableOpacity>
</Modal>
</View>
);
}
return videoContent;
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "#000",
alignItems: "center",
justifyContent: "center",
},
webHint: { color: '#fff', fontSize: 15 },
offlineText: { color: '#999', fontSize: 14, marginTop: 10 },
webHint: { color: "#fff", fontSize: 15 },
offlineText: { color: "#999", fontSize: 14, marginTop: 10 },
bufferingOverlay: {
...StyleSheet.absoluteFillObject,
alignItems: 'center',
justifyContent: 'center',
alignItems: "center",
justifyContent: "center",
},
bufferingText: { color: '#fff', fontSize: 13, opacity: 0.8 },
bufferingText: { color: "#fff", fontSize: 13, opacity: 0.8 },
liveBadge: {
position: 'absolute',
position: "absolute",
top: 10,
left: 12,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
flexDirection: "row",
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.5)",
paddingHorizontal: 8,
paddingVertical: 3,
borderRadius: 4,
@@ -289,79 +340,78 @@ const styles = StyleSheet.create({
width: 6,
height: 6,
borderRadius: 3,
backgroundColor: '#f00',
backgroundColor: "#f00",
marginRight: 5,
},
liveText: { color: '#fff', fontSize: 11, fontWeight: '700', letterSpacing: 1 },
liveText: {
color: "#fff",
fontSize: 11,
fontWeight: "700",
letterSpacing: 1,
},
centerBtn: {
position: 'absolute',
top: '50%',
left: '50%',
position: "absolute",
top: "50%",
left: "50%",
transform: [{ translateX: -28 }, { translateY: -28 }],
},
centerBtnBg: {
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: 'rgba(0,0,0,0.45)',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "rgba(0,0,0,0.45)",
alignItems: "center",
justifyContent: "center",
},
bottomBar: {
position: 'absolute',
position: "absolute",
bottom: 0,
left: 0,
right: 0,
flexDirection: 'row',
alignItems: 'center',
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 8,
paddingBottom: 8,
paddingTop: 24,
backgroundColor: 'rgba(0,0,0,0)',
backgroundColor: "rgba(0,0,0,0)",
},
ctrlBtn: { paddingHorizontal: 8, paddingVertical: 4 },
qualityBtn: {
paddingHorizontal: 8,
paddingVertical: 4,
backgroundColor: 'rgba(0,0,0,0.4)',
backgroundColor: "rgba(0,0,0,0.4)",
borderRadius: 4,
marginRight: 4,
},
qualityText: { color: '#fff', fontSize: 11, fontWeight: '600' },
qualityText: { color: "#fff", fontSize: 11, fontWeight: "600" },
qualityOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)',
justifyContent: 'flex-end',
flex: 1,
backgroundColor: "rgba(0,0,0,0.5)",
justifyContent: "center",
alignItems: "center",
},
qualityPanel: {
backgroundColor: 'rgba(20,20,20,0.95)',
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
paddingBottom: 16,
backgroundColor: "#fff",
borderRadius: 12,
paddingVertical: 8,
paddingHorizontal: 16,
minWidth: 180,
},
qualityPanelTitle: {
color: '#fff',
fontSize: 13,
fontWeight: '600',
textAlign: 'center',
paddingVertical: 12,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: 'rgba(255,255,255,0.1)',
fontSize: 15,
fontWeight: "700",
color: "#212121",
paddingVertical: 10,
textAlign: "center",
},
qualityItem: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 20,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingVertical: 12,
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: "#eee",
},
qualityItemActive: { backgroundColor: 'rgba(0,174,236,0.15)' },
qualityItemText: { color: '#ccc', fontSize: 14 },
qualityItemTextActive: { color: '#00AEEC', fontWeight: '600' },
fsModal: {
flex: 1,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
},
qualityItemText: { fontSize: 14, color: "#333" },
qualityItemTextActive: { color: "#00AEEC", fontWeight: "700" },
});

2
hooks/useLiveDetail.ts
View File

@@ -53,7 +53,7 @@ export function useLiveDetail(roomId: number) {
const changeQuality = useCallback(async (qn: number) => {
try {
const stream = await getLiveStreamUrl(roomId, qn);
setState(prev => ({ ...prev, stream }));
setState(prev => ({ ...prev, stream: { ...stream, qn } }));
} catch { /* ignore */ }
}, [roomId]);

19
hooks/useRelatedVideos.ts
View File

@@ -1,29 +1,26 @@
import { useState, useCallback, useRef, useMemo } from 'react';
import { getRecommendFeed } from '../services/bilibili';
import { useState, useCallback, useRef } from 'react';
import { getVideoRelated } from '../services/bilibili';
import type { VideoItem } from '../services/types';
export function useRelatedVideos() {
const [pages, setPages] = useState<VideoItem[][]>([]);
export function useRelatedVideos(bvid: string) {
const [videos, setVideos] = useState<VideoItem[]>([]);
const [loading, setLoading] = useState(false);
const loadingRef = useRef(false);
const freshIdxRef = useRef(0);
const load = useCallback(async () => {
if (loadingRef.current) return;
loadingRef.current = true;
setLoading(true);
try {
const data = await getRecommendFeed(freshIdxRef.current);
setPages(prev => [...prev, data]);
freshIdxRef.current += 1;
const data = await getVideoRelated(bvid);
setVideos(data);
} catch (e) {
console.warn('useRelatedVideos: failed', e);
} finally {
loadingRef.current = false;
setLoading(false);
}
}, []);
}, [bvid]);
const videos = useMemo(() => pages.flat(), [pages]);
return { videos, loading, load };
return { videos, loading, load, hasMore: false };
}

19
services/bilibili.ts
View File

@@ -114,6 +114,12 @@ export async function getVideoDetail(bvid: string): Promise<VideoItem> {
return res.data.data as VideoItem;
}
export async function getVideoRelated(bvid: string): Promise<VideoItem[]> {
const res = await api.get('/x/web-interface/archive/related', { params: { bvid } });
const items: any[] = res.data.data ?? [];
return items as VideoItem[];
}
export async function getPlayUrl(bvid: string, cid: number, qn = 64): Promise<PlayUrlResponse> {
const isAndroid = Platform.OS === 'android';
// 1488 = 16(DASH)|64(HDR)|128(4K)|256(杜比全景声)|1024(杜比视界)
@@ -143,6 +149,15 @@ export async function getPlayUrlForDownload(
return url;
}
export async function getUploaderStat(mid: number): Promise<{ follower: number; archiveCount: number }> {
const res = await api.get('/x/web-interface/card', { params: { mid } });
const data = res.data.data ?? {};
return {
follower: data.follower ?? 0,
archiveCount: data.archive_count ?? 0,
};
}
export async function getUserInfo(): Promise<{ face: string; uname: string; mid: number }> {
const res = await api.get('/x/web-interface/nav');
const { face, uname, mid } = res.data.data;
@@ -286,7 +301,9 @@ export async function getLiveStreamUrl(roomId: number, qn = 10000): Promise<Live
const playurl = res.data?.data?.playurl_info?.playurl;
const streams: any[] = playurl?.stream ?? [];
const gQnDesc: any[] = playurl?.g_qn_desc ?? [];
const qualities = gQnDesc.map((q: any) => ({ qn: q.qn as number, desc: q.desc as string }));
const qualities = gQnDesc
.map((q: any) => ({ qn: q.qn as number, desc: q.desc as string }))
.filter(q => q.qn <= 10000);
let hlsUrl = '';
let flvUrl = '';