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: 优化下载页UI交互、支持暗黑主题，移除首页 header 底边框

Browse Source 
- downloads.tsx: 删除前弹 Alert 确认框（区分"取消下载"和"删除文件"）
- downloads.tsx: 下载出错时显示"重新下载"按钮，跳转视频详情页
- downloads.tsx: 下载中取消按钮改为 close-circle-outline 图标
- downloads.tsx: 已完成条目整行可点击播放，移除单独"播放"按钮
- downloads.tsx: 播放器横竖屏均显示顶部控制栏，点击切换显隐
- downloads.tsx: 移除进度条旁 ActivityIndicator，保留百分比文字
- downloads.tsx: 全部颜色跟随暗黑主题（bg/card/text/textSub/border）
- index.tsx: 移除悬浮 header 底部分割线
This commit is contained in:
Developer
2026-03-25 12:51:14 +08:00
parent e1fa8cc347
commit c7fbc1f441
4 changed files with 119 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
app/downloads.tsx
View File

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

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

@@ -49,7 +49,10 @@ export default function VideoDetailScreen() {
const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]); const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
const [showDownload, setShowDownload] = useState(false); 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 { const {
videos: relatedVideos, videos: relatedVideos,
loading: relatedLoading, loading: relatedLoading,
@@ -71,7 +74,9 @@ export default function VideoDetailScreen() {
useEffect(() => { useEffect(() => {
if (!video?.owner?.mid) return; if (!video?.owner?.mid) return;
getUploaderStat(video.owner.mid).then(setUploaderStat).catch(() => {}); getUploaderStat(video.owner.mid)
.then(setUploaderStat)
.catch(() => {});
}, [video?.owner?.mid]); }, [video?.owner?.mid]);
return ( return (
@@ -197,7 +202,8 @@ export default function VideoDetailScreen() {
</Text> </Text>
{uploaderStat && ( {uploaderStat && (
<Text style={styles.upStat}> <Text style={styles.upStat}>
{formatCount(uploaderStat.follower)}粉丝 · {formatCount(uploaderStat.archiveCount)}视频 {formatCount(uploaderStat.follower)}粉丝 ·{" "}
{formatCount(uploaderStat.archiveCount)}视频
</Text> </Text>
)} )}
</View> </View>
@@ -465,7 +471,7 @@ function SeasonSection({
<TouchableOpacity <TouchableOpacity
style={[ style={[
styles.epCard, styles.epCard,
{ backgroundColor: theme.card }, { backgroundColor: theme.card, borderColor: theme.border },
isCurrent && styles.epCardActive, isCurrent && styles.epCardActive,
]} ]}
onPress={() => !isCurrent && onEpisodePress(ep.bvid)} onPress={() => !isCurrent && onEpisodePress(ep.bvid)}
@@ -564,10 +570,10 @@ const styles = StyleSheet.create({
width: 120, width: 120,
borderRadius: 6, borderRadius: 6,
overflow: "hidden", overflow: "hidden",
borderWidth: 1.5, borderWidth: 1,
borderColor: "transparent", borderColor: "transparent",
}, },
epCardActive: { borderColor: "#00AEEC" }, epCardActive: { borderColor: "#00AEEC", borderWidth: 1.5 },
epThumb: { width: 120, height: 68 }, epThumb: { width: 120, height: 68 },
epNum: { fontSize: 11, color: "#999", paddingHorizontal: 6, paddingTop: 4 }, epNum: { fontSize: 11, color: "#999", paddingHorizontal: 6, paddingTop: 4 },
epNumActive: { color: "#00AEEC", fontWeight: "600" }, epNumActive: { color: "#00AEEC", fontWeight: "600" },

5
components/DanmakuList.tsx
View File

@@ -222,7 +222,6 @@ export default function DanmakuList({
{ opacity: item._fadeAnim, borderBottomColor: theme.border }, { opacity: item._fadeAnim, borderBottomColor: theme.border },
]} ]}
> >
{timeStr ? <Text style={liveStyles.time}>{timeStr}</Text> : null}
<View style={liveStyles.msgBody}> <View style={liveStyles.msgBody}>
{guard && ( {guard && (
<View <View
@@ -257,6 +256,7 @@ export default function DanmakuList({
{item.text} {item.text}
</Text> </Text>
</View> </View>
{timeStr ? <Text style={liveStyles.time}>{timeStr}</Text> : null}
</Animated.View> </Animated.View>
); );
}, },
@@ -275,7 +275,7 @@ export default function DanmakuList({
]} ]}
> >
<Text <Text
style={[styles.bubbleText, { color: dotColor }]} style={[styles.bubbleText, { color: theme.text }]}
numberOfLines={3} numberOfLines={3}
> >
{item.text} {item.text}
@@ -450,6 +450,7 @@ const liveStyles = StyleSheet.create({
row: { row: {
flexDirection: "row", flexDirection: "row",
alignItems: "flex-start", alignItems: "flex-start",
justifyContent:"space-between",
paddingVertical: 5, paddingVertical: 5,
}, },
time: { time: {