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 
- creator: 头部模糊背景 + 滚动渐变 topBar，移除 removeClippedSubviews 修复列表抖动
- video: 简介 2 行折叠（onTextLayout 探测真实行数），tname 分区标签，统计数据前移到 UP 主行
- VideoCard/LiveCard: title 设 minHeight 解决两列卡片底部对齐
- LoginModal: 二维码过期支持原地重试，无需关闭重开
- search: 初始 loading 显示 indicator，搜索/选建议时自动收起键盘
- 统一图片组件为 expo-image：LiveCard / FollowedLiveStrip / downloads
- types: VideoItem 补 tname / pubdate 字段
This commit is contained in:
Developer
2026-05-05 12:16:35 +08:00
parent 4706845f44
commit b0929a8094
9 changed files with 397 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
app/creator/[mid].tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState, useCallback } from 'react';
import React, { useEffect, useState, useCallback, useRef } from 'react';
import {
View,
Text,
@@ -6,25 +6,33 @@ import {
StyleSheet,
TouchableOpacity,
ActivityIndicator,
RefreshControl,
Animated,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Image } from 'expo-image';
import { Ionicons } from '@expo/vector-icons';
import { getUploaderInfo, getUploaderVideos } from '../../services/bilibili';
import type { VideoItem } from '../../services/types';
import { useTheme } from '../../utils/theme';
import { formatCount, formatDuration } from '../../utils/format';
import { formatCount, formatDuration, formatTime } from '../../utils/format';
import { proxyImageUrl, coverImageUrl } from '../../utils/imageUrl';
import { useSettingsStore } from '../../store/settingsStore';
const PAGE_SIZE = 20;
const TOPBAR_HEIGHT = 44;
const FADE_START = 80;
const FADE_END = 160;
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList<VideoItem>);
export default function CreatorScreen() {
const { mid: midStr } = useLocalSearchParams<{ mid: string }>();
const mid = Number(midStr);
const router = useRouter();
const theme = useTheme();
const insets = useSafeAreaInsets();
const trafficSaving = useSettingsStore(s => s.trafficSaving);
const [info, setInfo] = useState<{
@@ -35,7 +43,15 @@ export default function CreatorScreen() {
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [infoLoading, setInfoLoading] = useState(true);
const loadingRef = React.useRef(false);
const [refreshing, setRefreshing] = useState(false);
const loadingRef = useRef(false);
const scrollY = useRef(new Animated.Value(0)).current;
const topBarOpacity = scrollY.interpolate({
inputRange: [FADE_START, FADE_END],
outputRange: [0, 1],
extrapolate: 'clamp',
});
useEffect(() => {
getUploaderInfo(mid)
@@ -61,35 +77,46 @@ export default function CreatorScreen() {
}
}, [mid]);
const handleRefresh = useCallback(async () => {
setRefreshing(true);
try {
const [infoData, { videos: newVideos, total: t }] = await Promise.all([
getUploaderInfo(mid),
getUploaderVideos(mid, 1, PAGE_SIZE),
]);
setInfo(infoData);
setTotal(t);
setVideos(newVideos);
setPage(1);
} catch {}
finally {
setRefreshing(false);
}
}, [mid]);
const hasMore = videos.length < total;
return (
<SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={['top', 'left', 'right']}>
{/* Top bar */}
<View style={[styles.topBar, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
<TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
<Ionicons name="chevron-back" size={24} color={theme.text} />
</TouchableOpacity>
<Text style={[styles.topTitle, { color: theme.text }]} numberOfLines={1}>
{info?.name ?? 'UP主主页'}
</Text>
<View style={styles.backBtn} />
const HeroHeader = (
<View style={[styles.hero, { borderBottomColor: theme.border }]}>
{info ? (
<>
<Image
source={{ uri: proxyImageUrl(info.face) }}
style={styles.heroBg}
contentFit="cover"
blurRadius={20}
/>
<View style={[styles.heroOverlay, { backgroundColor: theme.card }]} />
</>
) : (
<View style={[styles.heroBg, { backgroundColor: theme.card }]} />
)}
{infoLoading ? (
<View style={[styles.profileContent, { paddingTop: TOPBAR_HEIGHT + 24 }]}>
<ActivityIndicator color="#00AEEC" />
</View>
<FlatList
data={videos}
keyExtractor={item => item.bvid}
showsVerticalScrollIndicator={false}
onEndReached={() => { if (hasMore && !loading) loadVideos(page + 1); }}
onEndReachedThreshold={0.3}
windowSize={7}
maxToRenderPerBatch={6}
removeClippedSubviews
ListHeaderComponent={
infoLoading ? (
<ActivityIndicator style={styles.loader} color="#00AEEC" />
) : info ? (
<View style={[styles.profileCard, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>
<View style={[styles.profileContent, { paddingTop: TOPBAR_HEIGHT + 12 }]}>
<Image
source={{ uri: proxyImageUrl(info.face) }}
style={styles.avatar}
@@ -115,8 +142,38 @@ export default function CreatorScreen() {
全部视频（{total}）
</Text>
</View>
) : null
) : null}
</View>
);
return (
<SafeAreaView
style={[styles.safe, { backgroundColor: theme.card }]}
edges={['top', 'left', 'right']}
>
<AnimatedFlatList
data={videos}
keyExtractor={item => item.bvid}
showsVerticalScrollIndicator={false}
onEndReached={() => { if (hasMore && !loading) loadVideos(page + 1); }}
onEndReachedThreshold={0.3}
windowSize={7}
maxToRenderPerBatch={6}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
{ useNativeDriver: true },
)}
scrollEventThrottle={16}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor="#00AEEC"
colors={["#00AEEC"]}
progressViewOffset={insets.top + TOPBAR_HEIGHT}
/>
}
ListHeaderComponent={HeroHeader}
renderItem={({ item }) => (
<TouchableOpacity
style={[styles.videoRow, { backgroundColor: theme.card, borderBottomColor: theme.border }]}
@@ -141,7 +198,10 @@ export default function CreatorScreen() {
</Text>
<View style={styles.videoMeta}>
<Ionicons name="play" size={11} color={theme.textSub} />
<Text style={[styles.metaText, { color: theme.textSub }]}>{formatCount(item.stat.view)}</Text>
<Text style={[styles.metaText, { color: theme.textSub }]}>{formatCount(item.stat?.view ?? 0)}</Text>
{!!item.pubdate && (
<Text style={[styles.metaText, { color: theme.textSub }]}>· {formatTime(item.pubdate)}</Text>
)}
</View>
</View>
</TouchableOpacity>
@@ -152,30 +212,93 @@ export default function CreatorScreen() {
) : null
}
ListFooterComponent={
loading ? <ActivityIndicator style={styles.loader} color="#00AEEC" /> : null
<View style={styles.footer}>
{loading && <ActivityIndicator color="#00AEEC" />}
</View>
}
/>
{/* 浮动 topBar：背景透明 → 不透明，跟随滚动 */}
<View
style={[styles.topBarFloat, { height: TOPBAR_HEIGHT, top: insets.top }]}
pointerEvents="box-none"
>
<Animated.View
pointerEvents="none"
style={[
StyleSheet.absoluteFillObject,
{ backgroundColor: theme.card, opacity: topBarOpacity },
]}
/>
<Animated.View
pointerEvents="none"
style={[
styles.topBarBorder,
{ backgroundColor: theme.border, opacity: topBarOpacity },
]}
/>
<View style={styles.topBarContent}>
<TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
<Ionicons name="chevron-back" size={24} color={theme.text} />
</TouchableOpacity>
<Animated.Text
style={[styles.topTitle, { color: theme.text, opacity: topBarOpacity }]}
numberOfLines={1}
>
{info?.name ?? 'UP主主页'}
</Animated.Text>
<View style={styles.backBtn} />
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safe: { flex: 1 },
topBar: {
hero: {
overflow: 'hidden',
position: 'relative',
borderBottomWidth: StyleSheet.hairlineWidth,
},
heroBg: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
heroOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 0.82,
},
topBarFloat: {
position: 'absolute',
left: 0,
right: 0,
},
topBarBorder: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: StyleSheet.hairlineWidth,
},
topBarContent: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
paddingVertical: 8,
borderBottomWidth: StyleSheet.hairlineWidth,
},
backBtn: { padding: 4, width: 32 },
topTitle: { flex: 1, fontSize: 16, fontWeight: '600', textAlign: 'center' },
profileCard: {
profileContent: {
alignItems: 'center',
paddingTop: 24,
paddingBottom: 12,
borderBottomWidth: StyleSheet.hairlineWidth,
marginBottom: 4,
paddingBottom: 16,
},
avatar: { width: 72, height: 72, borderRadius: 36, marginBottom: 10 },
name: { fontSize: 18, fontWeight: '700', marginBottom: 6 },
@@ -185,8 +308,7 @@ const styles = StyleSheet.create({
statNum: { fontSize: 18, fontWeight: '700' },
statLabel: { fontSize: 12, marginTop: 2 },
statDivider: { width: 1, height: 28 },
videoListHeader: { alignSelf: 'flex-start', paddingHorizontal: 14, fontSize: 13, paddingBottom: 8 },
loader: { marginVertical: 24 },
videoListHeader: { alignSelf: 'flex-start', paddingHorizontal: 14, fontSize: 13, paddingBottom: 4 },
videoRow: {
flexDirection: 'row',
paddingHorizontal: 12,
@@ -203,7 +325,8 @@ const styles = StyleSheet.create({
durationText: { color: '#fff', fontSize: 10 },
videoInfo: { flex: 1, justifyContent: 'space-between', paddingVertical: 2 },
videoTitle: { fontSize: 13, lineHeight: 18 },
videoMeta: { flexDirection: 'row', alignItems: 'center', gap: 3 },
videoMeta: { flexDirection: 'row', alignItems: 'center', gap: 4 },
metaText: { fontSize: 12 },
emptyTxt: { textAlign: 'center', padding: 40 },
footer: { height: 48, justifyContent: 'center', alignItems: 'center' },
});

4
app/downloads.tsx
View File

@@ -5,11 +5,11 @@ import {
SectionList,
StyleSheet,
TouchableOpacity,
Image,
Modal,
StatusBar,
Alert,
} from 'react-native';
import { Image } from 'expo-image';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
@@ -171,7 +171,7 @@ function DownloadRow({
const rowContent = (
<View style={[styles.row, { backgroundColor: theme.card }]}>
<Image source={{ uri: proxyImageUrl(task.cover) }} style={styles.cover} />
<Image source={{ uri: proxyImageUrl(task.cover) }} style={styles.cover} contentFit="cover" recyclingKey={task.bvid} />
<View style={styles.info}>
<Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>{task.title}</Text>
<Text style={[styles.qdesc, { color: theme.textSub }]}>

9
app/search.tsx
View File

@@ -8,6 +8,7 @@ import {
FlatList,
ActivityIndicator,
ScrollView,
Keyboard,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
@@ -43,12 +44,14 @@ export default function SearchScreen() {
const term = (kw ?? keyword).trim();
if (term) {
if (kw) setKeyword(kw);
Keyboard.dismiss();
search(kw ?? keyword, true);
}
}, [keyword, search, setKeyword]);
const handleSuggestionPress = useCallback((value: string) => {
setKeyword(value);
Keyboard.dismiss();
search(value, true);
}, [search, setKeyword]);
@@ -110,7 +113,11 @@ export default function SearchScreen() {
}, [hasResults, sort, changeSort, theme.card]);
const ListEmptyComponent = () => {
if (loading) return null;
if (loading) return (
<View style={styles.emptyBox}>
<ActivityIndicator color="#00AEEC" size="large" />
</View>
);
if (!keyword.trim()) return null;
return (
<View style={styles.emptyBox}>

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

@@ -5,9 +5,9 @@ import {
FlatList,
StyleSheet,
TouchableOpacity,
Image,
ActivityIndicator,
} from "react-native";
import { Image } from "expo-image";
import { SafeAreaView } from "react-native-safe-area-context";
import { useLocalSearchParams, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
@@ -32,10 +32,10 @@ export default function VideoDetailScreen() {
const router = useRouter();
const theme = useTheme();
// 进入视频详情页时立即清除直播小窗
useLayoutEffect(() => {
useLiveStore.getState().clearLive();
}, []);
const {
video,
playData,
@@ -55,6 +55,8 @@ export default function VideoDetailScreen() {
const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
const [currentTime, setCurrentTime] = useState(0);
const [showDownload, setShowDownload] = useState(false);
const [descExpanded, setDescExpanded] = useState(false);
const [descOverflows, setDescOverflows] = useState(false);
const [uploaderStat, setUploaderStat] = useState<{
follower: number;
archiveCount: number;
@@ -65,9 +67,7 @@ export default function VideoDetailScreen() {
load: loadRelated,
} = useRelatedVideos(bvid as string);
useEffect(() => {
loadRelated();
}, []);
useEffect(() => { loadRelated(); }, []);
useEffect(() => {
if (video?.aid) loadComments();
@@ -80,9 +80,7 @@ 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 (
@@ -92,25 +90,14 @@ export default function VideoDetailScreen() {
<TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
<Ionicons name="chevron-back" size={24} color={theme.text} />
</TouchableOpacity>
<Text
style={[styles.topTitle, { color: theme.text }]}
numberOfLines={1}
>
<Text style={[styles.topTitle, { color: theme.text }]} numberOfLines={1}>
{video?.title ?? "视频详情"}
</Text>
<TouchableOpacity
style={styles.miniBtn}
onPress={() => setShowDownload(true)}
>
<Ionicons
name="cloud-download-outline"
size={22}
color={theme.text}
/>
<TouchableOpacity style={styles.miniBtn} onPress={() => setShowDownload(true)}>
<Ionicons name="cloud-download-outline" size={22} color={theme.text} />
</TouchableOpacity>
</View>
{/* Video player — fixed 16:9 */}
<VideoPlayer
playData={playData}
qualities={qualities}
@@ -134,53 +121,20 @@ export default function VideoDetailScreen() {
{/* TabBar */}
{video && (
<View style={[styles.tabBar, { borderBottomColor: theme.border }]}>
<TouchableOpacity
style={styles.tabItem}
onPress={() => setTab("intro")}
>
<Text
style={[
styles.tabLabel,
{ color: theme.textSub },
tab === "intro" && styles.tabActive,
]}
>
简介
{(["intro", "comments", "danmaku"] as Tab[]).map((t) => {
const label =
t === "intro" ? "简介"
: t === "comments" ? `评论${video.stat?.reply ? ` ${formatCount(video.stat.reply)}` : ""}`
: `弹幕${danmakus.length ? ` ${formatCount(danmakus.length)}` : ""}`;
return (
<TouchableOpacity key={t} style={styles.tabItem} onPress={() => setTab(t)}>
<Text style={[styles.tabLabel, { color: theme.textSub }, tab === t && styles.tabActive]}>
{label}
</Text>
{tab === "intro" && <View style={styles.tabUnderline} />}
</TouchableOpacity>
<TouchableOpacity
style={styles.tabItem}
onPress={() => setTab("comments")}
>
<Text
style={[
styles.tabLabel,
{ color: theme.textSub },
tab === "comments" && styles.tabActive,
]}
>
评论
{video.stat?.reply > 0 ? ` ${formatCount(video.stat.reply)}` : ""}
</Text>
{tab === "comments" && <View style={styles.tabUnderline} />}
</TouchableOpacity>
<TouchableOpacity
style={styles.tabItem}
onPress={() => setTab("danmaku")}
>
<Text
style={[
styles.tabLabel,
{ color: theme.textSub },
tab === "danmaku" && styles.tabActive,
]}
>
弹幕
{danmakus.length > 0 ? ` ${formatCount(danmakus.length)}` : ""}
</Text>
{tab === "danmaku" && <View style={styles.tabUnderline} />}
{tab === t && <View style={styles.tabUnderline} />}
</TouchableOpacity>
);
})}
</View>
)}
@@ -205,128 +159,104 @@ export default function VideoDetailScreen() {
<Image
source={{ uri: proxyImageUrl(video.owner.face) }}
style={styles.avatar}
contentFit="cover"
recyclingKey={String(video.owner.mid)}
/>
<View style={styles.upInfo}>
<Text style={[styles.upName, { color: theme.text }]}>
{video.owner.name}
</Text>
<Text style={[styles.upName, { color: theme.text }]}>{video.owner.name}</Text>
{uploaderStat && (
<Text style={styles.upStat}>
{formatCount(uploaderStat.follower)}粉丝 ·{" "}
{formatCount(uploaderStat.archiveCount)}视频
{formatCount(uploaderStat.follower)}粉丝 · {formatCount(uploaderStat.archiveCount)}视频
</Text>
)}
</View>
<View style={styles.followBtn}>
<Text style={styles.followTxt}>查看主页</Text>
<View style={styles.upStats}>
<Ionicons name="play-outline" size={12} color={theme.textSub} />
<Text style={styles.upStatTxt}>{formatCount(video.stat?.view ?? 0)}</Text>
<Text style={styles.upStatDot}>·</Text>
<Ionicons name="heart-outline" size={12} color={theme.textSub} />
<Text style={styles.upStatTxt}>{formatCount(video.stat?.like ?? 0)}</Text>
</View>
</TouchableOpacity>
<View
style={[
styles.titleSection,
{ borderBottomColor: theme.border },
]}
<View style={[styles.titleSection, { borderBottomColor: theme.border }]}>
<Text style={[styles.title, { color: theme.text }]}>{video.title}</Text>
{!!video.tname && (
<View style={styles.tnameBadge}>
<Text style={styles.tnameText}>{video.tname}</Text>
</View>
)}
{!!video.desc && (
<Text
style={[styles.subTitle, styles.descMeasure]}
onTextLayout={(e) => setDescOverflows(e.nativeEvent.lines.length > 2)}
>
<Text style={[styles.title, { color: theme.text }]}>
{video.title}
{video.desc}
</Text>
<Text style={[styles.subTitle, { color: theme.text }]}>
)}
<Text
style={[styles.subTitle, { color: theme.textSub }]}
numberOfLines={descExpanded ? undefined : 2}
>
{video.desc || "暂无简介"}
</Text>
<View style={styles.statsRow}>
<StatBadge icon="play" count={video.stat.view} />
<StatBadge icon="heart" count={video.stat.like} />
<StatBadge icon="star" count={video.stat.favorite} />
<StatBadge icon="chatbubble" count={video.stat.reply} />
</View>
{descOverflows && (
<TouchableOpacity
onPress={() => setDescExpanded(e => !e)}
style={styles.expandBtn}
>
<Ionicons name={descExpanded ? "chevron-up" : "chevron-down"} size={13} color="#00AEEC" />
<Text style={styles.expandBtnTxt}>{descExpanded ? "收起" : "展开"}</Text>
</TouchableOpacity>
)}
</View>
{video.ugc_season && (
<SeasonSection
season={video.ugc_season}
currentBvid={bvid as string}
onEpisodePress={(epBvid) =>
router.replace(`/video/${epBvid}`)
}
onEpisodePress={(epBvid) => router.replace(`/video/${epBvid}`)}
/>
)}
<View
style={[
styles.relatedHeader,
{
backgroundColor: theme.card,
},
]}
>
<Text
style={[styles.relatedHeaderText, { color: theme.text }]}
>
推荐视频
</Text>
<View style={[styles.relatedHeader, { backgroundColor: theme.card }]}>
<Text style={[styles.relatedHeaderText, { color: theme.text }]}>推荐视频</Text>
</View>
</>
}
renderItem={({ item }) => (
<TouchableOpacity
style={[
styles.relatedCard,
{
backgroundColor: theme.card,
borderBottomColor: theme.border,
},
]}
style={[styles.relatedCard, { backgroundColor: theme.card, borderBottomColor: theme.border }]}
onPress={() => router.replace(`/video/${item.bvid}` as any)}
activeOpacity={0.85}
>
<View
style={[
styles.relatedThumbWrap,
{ backgroundColor: theme.card },
]}
>
<View style={[styles.relatedThumbWrap, { backgroundColor: theme.card }]}>
<Image
source={{ uri: proxyImageUrl(item.pic) }}
style={styles.relatedThumb}
resizeMode="cover"
contentFit="cover"
recyclingKey={item.bvid}
transition={200}
/>
<View style={styles.relatedDuration}>
<Text style={styles.relatedDurationText}>
{formatDuration(item.duration)}
</Text>
<Text style={styles.relatedDurationText}>{formatDuration(item.duration)}</Text>
</View>
</View>
<View style={styles.relatedInfo}>
<Text
style={[styles.relatedTitle, { color: theme.text }]}
numberOfLines={2}
>
<Text style={[styles.relatedTitle, { color: theme.text }]} numberOfLines={2}>
{item.title}
</Text>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Text style={styles.relatedOwner} numberOfLines={1}>
{item.owner?.name ?? ""}
</Text>
<Text style={styles.relatedView}>
{formatCount(item.stat?.view ?? 0)} 播放
</Text>
<View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
<Text style={styles.relatedOwner} numberOfLines={1}>{item.owner?.name ?? ""}</Text>
<Text style={styles.relatedView}>{formatCount(item.stat?.view ?? 0)} 播放</Text>
</View>
</View>
</TouchableOpacity>
)}
ListEmptyComponent={
relatedLoading ? (
<ActivityIndicator style={styles.loader} color="#00AEEC" />
) : null
relatedLoading ? <ActivityIndicator style={styles.loader} color="#00AEEC" /> : null
}
ListFooterComponent={
relatedLoading ? (
<ActivityIndicator style={styles.loader} color="#00AEEC" />
) : null
relatedLoading ? <ActivityIndicator style={styles.loader} color="#00AEEC" /> : null
}
/>
)}
@@ -337,47 +267,22 @@ export default function VideoDetailScreen() {
data={comments}
keyExtractor={(c) => String(c.rpid)}
renderItem={({ item }) => <CommentItem item={item} />}
onEndReached={() => {
if (cmtHasMore && !cmtLoading) loadComments();
}}
onEndReached={() => { if (cmtHasMore && !cmtLoading) loadComments(); }}
onEndReachedThreshold={0.3}
showsVerticalScrollIndicator={false}
ListHeaderComponent={
<View
style={[styles.sortRow, { borderBottomColor: theme.border }]}
>
<View style={[styles.sortRow, { borderBottomColor: theme.border }]}>
{([2, 0] as const).map((sort) => (
<TouchableOpacity
style={[
styles.sortBtn,
commentSort === 2 && styles.sortBtnActive,
]}
onPress={() => setCommentSort(2)}
key={sort}
style={[styles.sortBtn, commentSort === sort && styles.sortBtnActive]}
onPress={() => setCommentSort(sort)}
>
<Text
style={[
styles.sortBtnTxt,
commentSort === 2 && styles.sortBtnTxtActive,
]}
>
热门
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.sortBtn,
commentSort === 0 && styles.sortBtnActive,
]}
onPress={() => setCommentSort(0)}
>
<Text
style={[
styles.sortBtnTxt,
commentSort === 0 && styles.sortBtnTxtActive,
]}
>
最新
<Text style={[styles.sortBtnTxt, commentSort === sort && styles.sortBtnTxtActive]}>
{sort === 2 ? "热门" : "最新"}
</Text>
</TouchableOpacity>
))}
</View>
}
ListFooterComponent={
@@ -387,11 +292,7 @@ export default function VideoDetailScreen() {
<Text style={styles.emptyTxt}>已加载全部评论</Text>
) : null
}
ListEmptyComponent={
!cmtLoading ? (
<Text style={styles.emptyTxt}>暂无评论</Text>
) : null
}
ListEmptyComponent={!cmtLoading ? <Text style={styles.emptyTxt}>暂无评论</Text> : null}
/>
)}
@@ -402,10 +303,7 @@ export default function VideoDetailScreen() {
visible={tab === "danmaku"}
onToggle={() => {}}
hideHeader={true}
style={[
styles.danmakuTab,
tab !== "danmaku" && { display: "none" },
]}
style={[styles.danmakuTab, tab !== "danmaku" && { display: "none" }]}
/>
</>
) : null}
@@ -413,14 +311,6 @@ export default function VideoDetailScreen() {
);
}
function StatBadge({ icon, count }: { icon: string; count: number }) {
return (
<View style={styles.stat}>
<Ionicons name={icon as any} size={14} color="#999" />
<Text style={styles.statText}>{formatCount(count)}</Text>
</View>
);
}
function SeasonSection({
season,
@@ -439,26 +329,15 @@ function SeasonSection({
useEffect(() => {
if (currentIndex <= 0 || episodes.length === 0) return;
const t = setTimeout(() => {
listRef.current?.scrollToIndex({
index: currentIndex,
viewPosition: 0.5,
animated: false,
});
listRef.current?.scrollToIndex({ index: currentIndex, viewPosition: 0.5, animated: false });
}, 200);
return () => clearTimeout(t);
}, [currentIndex, episodes.length]);
return (
<View
style={[
styles.seasonBox,
{ borderTopColor: theme.border, backgroundColor: theme.card },
]}
>
<View style={[styles.seasonBox, { borderTopColor: theme.border, backgroundColor: theme.card }]}>
<View style={styles.seasonHeader}>
<Text style={[styles.seasonTitle, { color: theme.text }]}>
合集 · {season.title}
</Text>
<Text style={[styles.seasonTitle, { color: theme.text }]}>合集 · {season.title}</Text>
<Text style={styles.seasonCount}>{season.ep_count}个视频</Text>
<Ionicons name="chevron-forward" size={14} color="#999" />
</View>
@@ -469,11 +348,7 @@ function SeasonSection({
data={episodes}
keyExtractor={(ep) => ep.bvid}
contentContainerStyle={{ paddingHorizontal: 12, gap: 10 }}
getItemLayout={(_data, index) => ({
length: 130,
offset: 12 + index * 130,
index,
})}
getItemLayout={(_data, index) => ({ length: 130, offset: 12 + index * 130, index })}
onScrollToIndexFailed={() => {}}
renderItem={({ item: ep, index }) => {
const isCurrent = ep.bvid === currentBvid;
@@ -491,17 +366,12 @@ function SeasonSection({
<Image
source={{ uri: proxyImageUrl(ep.arc.pic) }}
style={[styles.epThumb, { backgroundColor: theme.card }]}
contentFit="cover"
recyclingKey={ep.bvid}
/>
)}
<Text style={[styles.epNum, isCurrent && styles.epNumActive]}>
第{index + 1}集
</Text>
<Text
style={[styles.epTitle, { color: theme.text }]}
numberOfLines={2}
>
{ep.title}
</Text>
<Text style={[styles.epNum, isCurrent && styles.epNumActive]}>第{index + 1}集</Text>
<Text style={[styles.epTitle, { color: theme.text }]} numberOfLines={2}>{ep.title}</Text>
</TouchableOpacity>
);
}}
@@ -520,53 +390,39 @@ const styles = StyleSheet.create({
borderBottomWidth: StyleSheet.hairlineWidth,
},
backBtn: { padding: 4 },
topTitle: {
flex: 1,
fontSize: 15,
fontWeight: "600",
marginLeft: 4,
},
topTitle: { flex: 1, fontSize: 15, fontWeight: "600", marginLeft: 4 },
miniBtn: { padding: 4 },
loader: { marginVertical: 30 },
titleSection: {
padding: 14,
borderBottomWidth: StyleSheet.hairlineWidth,
},
title: {
fontSize: 13,
fontWeight: "600",
lineHeight: 22,
titleSection: { padding: 14, borderBottomWidth: StyleSheet.hairlineWidth },
title: { fontSize: 13, fontWeight: "600", lineHeight: 22, marginBottom: 6 },
tnameBadge: {
alignSelf: "flex-start",
backgroundColor: "rgba(0,174,236,0.12)",
borderRadius: 4,
paddingHorizontal: 6,
paddingVertical: 2,
marginBottom: 8,
},
subTitle: {
fontSize: 10,
marginBottom: 8,
},
statsRow: { flexDirection: "row", gap: 16 },
stat: { flexDirection: "row", alignItems: "center", gap: 3 },
statText: { fontSize: 12, color: "#999" },
tnameText: { fontSize: 11, color: "#00AEEC" },
subTitle: { fontSize: 12, lineHeight: 18, marginBottom: 4 },
descMeasure: { position: "absolute", opacity: 0, left: 0, right: 0 },
expandBtn: { flexDirection: "row", alignItems: "center", gap: 3, marginBottom: 8 },
expandBtnTxt: { fontSize: 12, color: "#00AEEC" },
upRow: {
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 10,
paddingBottom: 0,
alignItems: "flex-start",
paddingHorizontal: 12,
paddingTop: 12,
paddingBottom: 10,
},
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,
paddingVertical: 3,
borderRadius: 14,
},
followTxt: { color: "#fff", fontSize: 12, fontWeight: "500" },
seasonBox: {
borderTopWidth: StyleSheet.hairlineWidth,
paddingVertical: 10,
},
avatar: { width: 38, height: 38, borderRadius: 19, marginRight: 10, marginTop: 1 },
upInfo: { flex: 1 },
upName: { fontSize: 13, fontWeight: "600", lineHeight: 18 },
upStat: { fontSize: 11, color: "#999", marginTop: 2, lineHeight: 16 },
upStats: { flexDirection: "row", alignItems: "center", gap: 3, marginTop: 3 },
upStatTxt: { fontSize: 11, color: "#999" },
upStatDot: { fontSize: 11, color: "#ccc" },
seasonBox: { borderTopWidth: StyleSheet.hairlineWidth, paddingVertical: 10 },
seasonHeader: {
flexDirection: "row",
alignItems: "center",
@@ -576,34 +432,14 @@ const styles = StyleSheet.create({
},
seasonTitle: { flex: 1, fontSize: 13, fontWeight: "600" },
seasonCount: { fontSize: 12, color: "#999" },
epCard: {
width: 120,
borderRadius: 6,
overflow: "hidden",
borderWidth: 1,
borderColor: "transparent",
},
epCard: { width: 120, borderRadius: 6, overflow: "hidden", borderWidth: 1, borderColor: "transparent" },
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" },
epTitle: {
fontSize: 12,
paddingHorizontal: 6,
paddingBottom: 6,
lineHeight: 16,
},
tabBar: {
flexDirection: "row",
borderBottomWidth: StyleSheet.hairlineWidth,
paddingLeft: 3,
},
tabItem: {
alignItems: "center",
paddingVertical: 12,
paddingHorizontal: 12,
position: "relative",
},
epTitle: { fontSize: 12, paddingHorizontal: 6, paddingBottom: 6, lineHeight: 16 },
tabBar: { flexDirection: "row", borderBottomWidth: StyleSheet.hairlineWidth, paddingLeft: 3 },
tabItem: { alignItems: "center", paddingVertical: 12, paddingHorizontal: 12, position: "relative" },
tabLabel: { fontSize: 13 },
tabActive: { color: "#00AEEC" },
tabUnderline: {
@@ -619,15 +455,8 @@ const styles = StyleSheet.create({
descText: { fontSize: 14, lineHeight: 22 },
danmakuTab: { flex: 1 },
emptyTxt: { textAlign: "center", color: "#bbb", padding: 30 },
relatedHeader: {
paddingLeft: 13,
paddingBottom: 8,
paddingTop: 8,
},
relatedHeaderText: {
fontSize: 13,
fontWeight: "600" as const,
},
relatedHeader: { paddingLeft: 13, paddingBottom: 8, paddingTop: 8 },
relatedHeaderText: { fontSize: 13, fontWeight: "600" as const },
relatedCard: {
flexDirection: "row",
paddingHorizontal: 12,
@@ -654,11 +483,7 @@ const styles = StyleSheet.create({
paddingVertical: 1,
},
relatedDurationText: { color: "#fff", fontSize: 10 },
relatedInfo: {
flex: 1,
justifyContent: "space-between",
paddingVertical: 2,
},
relatedInfo: { flex: 1, justifyContent: "space-between", paddingVertical: 2 },
relatedTitle: { fontSize: 13, lineHeight: 18 },
relatedOwner: { fontSize: 12, color: "#999" },
relatedView: { fontSize: 11, color: "#bbb" },
@@ -671,12 +496,7 @@ const styles = StyleSheet.create({
gap: 8,
borderBottomWidth: StyleSheet.hairlineWidth,
},
sortBtn: {
paddingHorizontal: 10,
paddingVertical: 2,
borderRadius: 16,
backgroundColor: "#f0f0f0",
},
sortBtn: { paddingHorizontal: 10, paddingVertical: 2, borderRadius: 16, backgroundColor: "#f0f0f0" },
sortBtnActive: { backgroundColor: "#00AEEC" },
sortBtnTxt: { fontSize: 13, color: "#333", fontWeight: "500" },
sortBtnTxtActive: { color: "#fff", fontWeight: "600" as const },

4
components/FollowedLiveStrip.tsx
View File

@@ -4,9 +4,9 @@ import {
Text,
ScrollView,
TouchableOpacity,
Image,
StyleSheet,
} from "react-native";
import { Image } from "expo-image";
import { useRouter } from "expo-router";
import { useAuthStore } from "../store/authStore";
import { getFollowedLiveRooms } from "../services/bilibili";
@@ -53,6 +53,8 @@ export function FollowedLiveStrip() {
<Image
source={{ uri: proxyImageUrl(room.face) }}
style={[styles.avatar, { backgroundColor: theme.card }]}
contentFit="cover"
recyclingKey={String(room.roomid)}
/>
<Text
style={[styles.name, { color: theme.text }]}

33
components/LiveCard.tsx
View File

@@ -2,11 +2,11 @@ import React from "react";
import {
View,
Text,
Image,
TouchableOpacity,
StyleSheet,
Dimensions,
} from "react-native";
import { Image } from "expo-image";
import { Ionicons } from "@expo/vector-icons";
import { LivePulse } from "./LivePulse";
import type { LiveRoom } from "../services/types";
@@ -41,15 +41,14 @@ export const LiveCard = React.memo(function LiveCard({
<View style={styles.thumbContainer}>
<Image
source={{ uri: proxyImageUrl(item.cover) }}
style={[
styles.thumb,
{ width: cardWidth, height: cardWidth * 0.5625, backgroundColor: theme.card },
]}
resizeMode="cover"
style={[styles.thumb, { width: cardWidth, height: cardWidth * 0.5625, backgroundColor: theme.card }]}
contentFit="cover"
recyclingKey={String(item.roomid)}
transition={200}
/>
<View style={styles.liveBadge}>
{isLivePulse && <LivePulse />}
<Text style={styles.liveBadgeText}>直播中</Text>
<Text style={styles.liveBadgeText}>直播</Text>
</View>
<View style={styles.meta}>
<Ionicons name="people" size={11} color="#fff" />
@@ -67,8 +66,13 @@ export const LiveCard = React.memo(function LiveCard({
<Image
source={{ uri: proxyImageUrl(item.face) }}
style={styles.avatar}
contentFit="cover"
recyclingKey={`face-${item.roomid}`}
/>
<Text style={[styles.owner, { color: theme.textSub }]} numberOfLines={1}>
<Text
style={[styles.owner, { color: theme.textSub }]}
numberOfLines={1}
>
{item.uname}
</Text>
</View>
@@ -103,32 +107,35 @@ const styles = StyleSheet.create({
alignItems: "center",
gap: 2,
},
liveBadgeText: { color: "#fff", fontSize: 10, fontWeight: "400" },
liveBadgeText: { color: "#fff", fontSize: 9, fontWeight: "400" },
meta: {
position: "absolute",
bottom: 4,
left: 4,
paddingHorizontal: 4,
borderRadius: 5,
paddingHorizontal: 5,
paddingVertical: 1,
backgroundColor: "rgba(0,0,0,0.6)",
flexDirection: "row",
alignItems: "center",
gap: 2,
},
metaText: { fontSize: 10, color: "#fff" },
metaText: { fontSize: 9, color: "#fff" },
areaBadge: {
position: "absolute",
bottom: 4,
right: 4,
borderRadius: 5,
paddingHorizontal: 4,
paddingHorizontal: 5,
paddingVertical: 1,
backgroundColor: "rgba(0,0,0,0.6)",
},
areaText: { color: "#fff", fontSize: 10 },
areaText: { color: "#fff", fontSize: 9 },
info: { padding: 6 },
title: {
fontSize: 12,
lineHeight: 17,
minHeight: 40,
color: "#212121",
marginBottom: 4,
},

29
components/LoginModal.tsx
View File

@@ -50,8 +50,7 @@ export function LoginModal({ visible, onClose }: Props) {
}
}, [visible]);
useEffect(() => {
if (!visible) return;
function initQRCode() {
setStatus("loading");
setQrData(null);
setQrKey(null);
@@ -62,7 +61,11 @@ export function LoginModal({ visible, onClose }: Props) {
setStatus("waiting");
})
.catch(() => setStatus("error"));
}
useEffect(() => {
if (!visible) return;
initQRCode();
return () => {
if (pollRef.current) clearInterval(pollRef.current);
};
@@ -187,7 +190,13 @@ export function LoginModal({ visible, onClose }: Props) {
</>
)}
{status === "error" && (
<Text style={[styles.hint, { color: theme.modalTextSub }]}>二维码已过期，请关闭重试</Text>
<View style={styles.errorBox}>
<Text style={[styles.hint, { color: theme.modalTextSub }]}>二维码已过期</Text>
<TouchableOpacity style={styles.retryBtn} onPress={initQRCode}>
<Ionicons name="refresh" size={14} color="#fff" />
<Text style={styles.retryTxt}>重新获取</Text>
</TouchableOpacity>
</View>
)}
<TouchableOpacity style={styles.closeBtn} onPress={onClose}>
<Text style={styles.closeTxt}>关闭</Text>
@@ -230,7 +239,19 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "center",
},
hint: { fontSize: 13, color: "#666", marginBottom: 20 },
hint: { fontSize: 13, color: "#666", marginBottom: 12 },
errorBox: { alignItems: "center", marginBottom: 8 },
retryBtn: {
flexDirection: "row",
alignItems: "center",
gap: 4,
backgroundColor: "#00AEEC",
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
marginBottom: 12,
},
retryTxt: { fontSize: 13, color: "#fff", fontWeight: "600" },
closeBtn: { padding: 12 },
closeTxt: { fontSize: 14, color: "#00AEEC" },
});

29
components/VideoCard.tsx
View File

@@ -22,8 +22,11 @@ interface Props {
onPress: () => void;
}
export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props) {
const trafficSaving = useSettingsStore(s => s.trafficSaving);
export const VideoCard = React.memo(function VideoCard({
item,
onPress,
}: Props) {
const trafficSaving = useSettingsStore((s) => s.trafficSaving);
const theme = useTheme();
return (
<TouchableOpacity
@@ -33,7 +36,9 @@ export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props)
>
<View style={styles.thumbContainer}>
<Image
source={{ uri: coverImageUrl(item.pic, trafficSaving ? 'normal' : 'hd') }}
source={{
uri: coverImageUrl(item.pic, trafficSaving ? "normal" : "hd"),
}}
style={[styles.thumb, { backgroundColor: theme.card }]}
contentFit="cover"
transition={200}
@@ -55,7 +60,10 @@ export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props)
<Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>
{item.title}
</Text>
<Text style={[styles.owner, { color: theme.textSub }]} numberOfLines={1}>
<Text
style={[styles.owner, { color: theme.textSub }]}
numberOfLines={1}
>
{item.owner?.name ?? ""}
</Text>
</View>
@@ -82,15 +90,16 @@ const styles = StyleSheet.create({
bottom: 4,
right: 4,
borderRadius: 5,
paddingHorizontal: 4,
paddingHorizontal: 5,
paddingVertical: 1,
backgroundColor: "rgba(0,0,0,0.6)",
paddingVertical: 0,
},
durationText: { color: "#fff", fontSize: 10 },
durationText: { color: "#fff", fontSize: 9 },
info: { padding: 6 },
title: {
fontSize: 12,
lineHeight: 17,
minHeight: 40,
color: "#212121",
marginBottom: 4,
},
@@ -99,13 +108,13 @@ const styles = StyleSheet.create({
position: "absolute",
bottom: 4,
left: 4,
paddingHorizontal: 4,
borderRadius: 5,
paddingHorizontal: 5,
paddingVertical: 1,
backgroundColor: "rgba(0,0,0,0.6)",
flexDirection: "row",
alignItems: "center",
paddingVertical: 0,
gap: 2,
},
metaText: { fontSize: 10, color: "#fff" },
metaText: { fontSize: 9, color: "#fff" },
});

2
services/types.ts
View File

@@ -3,6 +3,8 @@ export interface VideoItem {
aid: number;
title: string;
pic: string;
tname?: string;
pubdate?: number;
owner: {
mid: number;
name: string;