Merge branch 'master-bug'

# Conflicts: # CHANGELOG.md # app/video/[bvid].tsx # components/DanmakuList.tsx
2026-07-07 23:18:38 +08:00 · 2026-03-25 15:06:37 +08:00
parent 80109b9a12 e3def7d01b
commit b4d5d2a0e2
14 changed files with 523 additions and 176 deletions
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -8,6 +8,7 @@ import { useDownloadStore } from '../store/downloadStore';
 import { useSettingsStore } from '../store/settingsStore';
 import { useTheme } from '../utils/theme';
 import { MiniPlayer } from '../components/MiniPlayer';
+import { LiveMiniPlayer } from '../components/LiveMiniPlayer';
 import * as Sentry from '@sentry/react-native';
 import { ErrorBoundary } from '@sentry/react-native';
 import { useFonts } from 'expo-font';
@@ -87,6 +88,7 @@ function RootLayout() {
          </Stack>
        </ErrorBoundary>
        <MiniPlayer />
+        <LiveMiniPlayer />
      </View>
    </SafeAreaProvider>
  );
--- a/app/downloads.tsx
+++ b/app/downloads.tsx
@@ -6,10 +6,9 @@ import {
  StyleSheet,
  TouchableOpacity,
  Image,
-  ActivityIndicator,
  Modal,
  StatusBar,
-  useWindowDimensions,
+  Alert,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
@@ -19,6 +18,8 @@ let ScreenOrientation: typeof import('expo-screen-orientation') | null = null;
 try { ScreenOrientation = require('expo-screen-orientation'); } catch {}
 import { useDownloadStore, DownloadTask } from '../store/downloadStore';
 import { LanShareModal } from '../components/LanShareModal';
+import { proxyImageUrl } from '../utils/imageUrl';
+import { useTheme } from '../utils/theme';

 function formatFileSize(bytes?: number): string {
  if (!bytes || bytes <= 0) return '';
@@ -26,8 +27,6 @@ function formatFileSize(bytes?: number): string {
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
 }
-import { proxyImageUrl } from '../utils/imageUrl';
-import { useTheme } from '../utils/theme';

 export default function DownloadsScreen() {
  const router = useRouter();
@@ -36,8 +35,6 @@ export default function DownloadsScreen() {
  const [playingUri, setPlayingUri] = useState<string | null>(null);
  const [playingTitle, setPlayingTitle] = useState('');
  const [shareTask, setShareTask] = useState<(DownloadTask & { key: string }) | null>(null);
-  const { width, height } = useWindowDimensions();
-  const isLandscape = width > height;

  async function openPlayer(uri: string, title: string) {
    setPlayingTitle(title);
@@ -50,6 +47,18 @@ export default function DownloadsScreen() {
    await ScreenOrientation?.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
  }

+  function confirmDelete(key: string, status: DownloadTask['status']) {
+    const isDownloading = status === 'downloading';
+    Alert.alert(
+      isDownloading ? '取消下载' : '删除下载',
+      isDownloading ? '确定取消该下载任务？' : '确定删除该文件？删除后不可恢复。',
+      [
+        { text: '取消', style: 'cancel' },
+        { text: isDownloading ? '取消下载' : '删除', style: 'destructive', onPress: () => removeTask(key) },
+      ],
+    );
+  }
+
  useEffect(() => {
    loadFromStorage();
  }, []);
@@ -74,29 +83,33 @@ export default function DownloadsScreen() {

      {sections.length === 0 ? (
        <View style={styles.empty}>
-          <Ionicons name="cloud-download-outline" size={56} color="#ccc" />
-          <Text style={styles.emptyTxt}>暂无下载记录</Text>
+          <Ionicons name="cloud-download-outline" size={56} color={theme.textSub} />
+          <Text style={[styles.emptyTxt, { color: theme.textSub }]}>暂无下载记录</Text>
        </View>
      ) : (
        <SectionList
          sections={sections}
          keyExtractor={(item) => item.key}
          renderSectionHeader={({ section }) => (
-            <View style={styles.sectionHeader}>
-              <Text style={styles.sectionTitle}>{section.title}</Text>
+            <View style={[styles.sectionHeader, { backgroundColor: theme.bg }]}>
+              <Text style={[styles.sectionTitle, { color: theme.textSub }]}>{section.title}</Text>
            </View>
          )}
          renderItem={({ item }) => (
            <DownloadRow
              task={item}
+              theme={theme}
              onPlay={() => {
                if (item.localUri) openPlayer(item.localUri, item.title);
              }}
-              onDelete={() => removeTask(item.key)}
+              onDelete={() => confirmDelete(item.key, item.status)}
              onShare={() => setShareTask(item)}
+              onRetry={() => router.push(`/video/${item.bvid}` as any)}
            />
          )}
-          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          ItemSeparatorComponent={() => (
+            <View style={[styles.separator, { backgroundColor: theme.border, marginLeft: 108 }]} />
+          )}
          contentContainerStyle={{ paddingBottom: 32 }}
        />
      )}
@@ -119,22 +132,18 @@ export default function DownloadsScreen() {
          {playingUri && (
            <Video
              source={{ uri: playingUri }}
-              style={isLandscape
-                ? { width, height }
-                : { width, height: width * 0.5625 }}
+              style={StyleSheet.absoluteFillObject}
              resizeMode="contain"
              controls
              paused={false}
            />
          )}
-          {!isLandscape && (
-            <View style={styles.playerBar}>
-              <TouchableOpacity onPress={closePlayer} style={styles.closeBtn}>
-                <Ionicons name="chevron-back" size={24} color="#fff" />
-              </TouchableOpacity>
-              <Text style={styles.playerTitle} numberOfLines={1}>{playingTitle}</Text>
-            </View>
-          )}
+          <View style={styles.playerBar}>
+            <TouchableOpacity onPress={closePlayer} style={styles.closeBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <Ionicons name="chevron-back" size={24} color="#fff" />
+            </TouchableOpacity>
+            <Text style={styles.playerTitle} numberOfLines={1}>{playingTitle}</Text>
+          </View>
        </View>
      </Modal>
    </SafeAreaView>
@@ -143,98 +152,114 @@ export default function DownloadsScreen() {

 function DownloadRow({
  task,
+  theme,
  onPlay,
  onDelete,
  onShare,
+  onRetry,
 }: {
  task: DownloadTask & { key: string };
+  theme: ReturnType<typeof useTheme>;
  onPlay: () => void;
  onDelete: () => void;
  onShare: () => void;
+  onRetry: () => void;
 }) {
-  return (
-    <View style={styles.row}>
-      <Image
-        source={{ uri: proxyImageUrl(task.cover) }}
-        style={styles.cover}
-      />
+  const isDone = task.status === 'done';
+  const isError = task.status === 'error';
+  const isDownloading = task.status === 'downloading';
+
+  const rowContent = (
+    <View style={[styles.row, { backgroundColor: theme.card }]}>
+      <Image source={{ uri: proxyImageUrl(task.cover) }} style={styles.cover} />
      <View style={styles.info}>
-        <Text style={styles.title} numberOfLines={2}>{task.title}</Text>
-        <Text style={styles.qdesc}>
+        <Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>{task.title}</Text>
+        <Text style={[styles.qdesc, { color: theme.textSub }]}>
          {task.qdesc}{task.fileSize ? `  ·  ${formatFileSize(task.fileSize)}` : ''}
        </Text>
-        {task.status === 'downloading' && (
+        {isDownloading && (
          <View style={styles.progressWrap}>
            <View style={styles.progressTrack}>
              <View style={[styles.progressFill, { width: `${Math.round(task.progress * 100)}%` as any }]} />
            </View>
-            <ActivityIndicator size="small" color="#00AEEC" style={{ marginLeft: 6 }} />
            <Text style={styles.progressTxt}>{Math.round(task.progress * 100)}%</Text>
          </View>
        )}
-        {task.status === 'error' && (
-          <Text style={styles.errorTxt} numberOfLines={1}>{task.error ?? '下载失败'}</Text>
+        {isError && (
+          <View style={styles.errorRow}>
+            <Text style={styles.errorTxt} numberOfLines={1}>{task.error ?? '下载失败'}</Text>
+            <TouchableOpacity onPress={onRetry} style={styles.retryBtn}>
+              <Text style={styles.retryTxt}>重新下载</Text>
+            </TouchableOpacity>
+          </View>
        )}
      </View>
      <View style={styles.actions}>
-        {task.status === 'done' && (
-          <>
-            <TouchableOpacity style={styles.playBtn} onPress={onPlay}>
-              <Ionicons name="play-circle" size={20} color="#00AEEC" />
-              <Text style={styles.playTxt}>播放</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.shareBtn} onPress={onShare}>
-              <Ionicons name="share-social-outline" size={20} color="#00AEEC" />
-            </TouchableOpacity>
-          </>
+        {isDone && (
+          <TouchableOpacity style={styles.actionBtn} onPress={onShare}>
+            <Ionicons name="share-social-outline" size={20} color="#00AEEC" />
+          </TouchableOpacity>
        )}
-        <TouchableOpacity style={styles.deleteBtn} onPress={onDelete}>
-          <Ionicons name="trash-outline" size={18} color="#bbb" />
+        <TouchableOpacity
+          style={styles.actionBtn}
+          onPress={isDownloading ? onDelete : onDelete}
+        >
+          <Ionicons
+            name={isDownloading ? 'close-circle-outline' : 'trash-outline'}
+            size={20}
+            color={isDownloading ? '#bbb' : '#bbb'}
+          />
        </TouchableOpacity>
      </View>
    </View>
  );
+
+  if (isDone) {
+    return (
+      <TouchableOpacity activeOpacity={0.85} onPress={onPlay}>
+        {rowContent}
+      </TouchableOpacity>
+    );
+  }
+
+  return rowContent;
 }

 const styles = StyleSheet.create({
-  safe: { flex: 1, backgroundColor: '#fff' },
+  safe: { flex: 1 },
  topBar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    paddingVertical: 8,
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#eee',
  },
  backBtn: { padding: 4 },
  topTitle: {
    flex: 1,
    fontSize: 16,
    fontWeight: '700',
-    color: '#212121',
    marginLeft: 4,
  },
  empty: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 },
-  emptyTxt: { fontSize: 14, color: '#bbb' },
+  emptyTxt: { fontSize: 14 },
  sectionHeader: {
-    backgroundColor: '#f4f4f4',
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
-  sectionTitle: { fontSize: 13, fontWeight: '600', color: '#555' },
+  sectionTitle: { fontSize: 13, fontWeight: '600' },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
-    backgroundColor: '#fff',
    gap: 12,
  },
-  cover: { width: 80, height: 54, borderRadius: 6, backgroundColor: '#eee' },
+  cover: { width: 80, height: 54, borderRadius: 6, backgroundColor: '#eee', flexShrink: 0 },
  info: { flex: 1 },
-  title: { fontSize: 13, color: '#212121', lineHeight: 18, marginBottom: 4 },
-  qdesc: { fontSize: 12, color: '#999', marginBottom: 4 },
-  progressWrap: { flexDirection: 'row', alignItems: 'center', marginTop: 2 },
+  title: { fontSize: 13, lineHeight: 18, marginBottom: 4 },
+  qdesc: { fontSize: 12, marginBottom: 4 },
+  progressWrap: { flexDirection: 'row', alignItems: 'center', marginTop: 2, gap: 6 },
  progressTrack: {
    flex: 1,
    height: 3,
@@ -243,14 +268,19 @@ const styles = StyleSheet.create({
    overflow: 'hidden',
  },
  progressFill: { height: 3, backgroundColor: '#00AEEC', borderRadius: 2 },
-  progressTxt: { fontSize: 11, color: '#999', marginLeft: 4 },
-  errorTxt: { fontSize: 12, color: '#f44', marginTop: 2 },
-  actions: { alignItems: 'center', gap: 8 },
-  playBtn: { flexDirection: 'row', alignItems: 'center', gap: 3 },
-  playTxt: { fontSize: 13, color: '#00AEEC' },
-  shareBtn: { padding: 4 },
-  deleteBtn: { padding: 4 },
-  separator: { height: StyleSheet.hairlineWidth, backgroundColor: '#f0f0f0', marginLeft: 108 },
+  progressTxt: { fontSize: 11, color: '#999', minWidth: 30 },
+  errorRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 2 },
+  errorTxt: { fontSize: 12, color: '#f44', flex: 1 },
+  retryBtn: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10,
+    backgroundColor: '#e8f7fd',
+  },
+  retryTxt: { fontSize: 12, color: '#00AEEC', fontWeight: '600' },
+  actions: { alignItems: 'center', gap: 12 },
+  actionBtn: { padding: 4 },
+  separator: { height: StyleSheet.hairlineWidth },
  // player modal
  playerBg: { flex: 1, backgroundColor: '#000', justifyContent: 'center' },
  playerBar: {
@@ -261,6 +291,8 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    paddingVertical: 8,
  },
  closeBtn: { padding: 6 },
  playerTitle: { flex: 1, color: '#fff', fontSize: 14, fontWeight: '600', marginLeft: 4 },
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -422,7 +422,6 @@ export default function HomeScreen() {
            styles.header,
            {
              opacity: currentHeaderOpacity,
-              borderBottomColor: theme.border,
            },
          ]}
        >
@@ -507,8 +506,6 @@ const styles = StyleSheet.create({
    alignItems: "center",
    paddingHorizontal: 16,
    gap: 10,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
  },
  logo: {
    fontSize: 20,
--- a/app/live/[roomId].tsx
+++ b/app/live/[roomId].tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
 import {
  View,
  Text,
@@ -18,14 +18,22 @@ import DanmakuList from "../../components/DanmakuList";
 import { formatCount } from "../../utils/format";
 import { proxyImageUrl } from "../../utils/imageUrl";
 import { useTheme } from "../../utils/theme";
+import { useLiveStore } from "../../store/liveStore";

 type Tab = "intro" | "danmaku";

 export default function LiveDetailScreen() {
  const { roomId } = useLocalSearchParams<{ roomId: string }>();
+  console.log("LiveDetailScreen params:", { roomId });
  const router = useRouter();
  const theme = useTheme();
  const id = parseInt(roomId ?? "0", 10);
+
+  // 进入详情页时立即清除小窗（useLayoutEffect 在绘制前同步执行）
+  useLayoutEffect(() => {
+    useLiveStore.getState().clearLive();
+  }, []);
+
  const { room, anchor, stream, loading, error, changeQuality } =
    useLiveDetail(id);
  const [tab, setTab] = useState<Tab>("intro");
@@ -36,6 +44,8 @@ export default function LiveDetailScreen() {
  const qualities = stream?.qualities ?? [];
  const currentQn = stream?.qn ?? 0;

+  const setLive = useLiveStore(s => s.setLive);
+
  const actualRoomId = room?.roomid ?? id;
  const { danmakus, giftCounts } = useLiveDanmaku(isLive ? actualRoomId : 0);

@@ -49,6 +59,19 @@ export default function LiveDetailScreen() {
        <Text style={[styles.topTitle, { color: theme.text }]} numberOfLines={1}>
          {room?.title ?? "直播间"}
        </Text>
+        {isLive && hlsUrl ? (
+          <TouchableOpacity
+            style={styles.pipBtn}
+            onPress={() => {
+              setLive(id, room?.title ?? '', room?.keyframe ?? '', hlsUrl);
+              router.back();
+            }}
+          >
+            <Ionicons name="browsers-outline" size={22} color={theme.text} />
+          </TouchableOpacity>
+        ) : (
+          <View style={styles.pipBtn} />
+        )}
      </View>

      {/* Player */}
@@ -177,6 +200,7 @@ const styles = StyleSheet.create({
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  backBtn: { padding: 4 },
+  pipBtn: { padding: 4, width: 32, alignItems: 'center' },
  topTitle: {
    flex: 1,
    fontSize: 15,
--- a/app/video/[bvid].tsx
+++ b/app/video/[bvid].tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
 import {
  View,
  Text,
@@ -23,6 +23,7 @@ import { formatCount, formatDuration } from "../../utils/format";
 import { proxyImageUrl } from "../../utils/imageUrl";
 import { DownloadSheet } from "../../components/DownloadSheet";
 import { useTheme } from "../../utils/theme";
+import { useLiveStore } from "../../store/liveStore";

 type Tab = "intro" | "comments" | "danmaku";

@@ -30,6 +31,11 @@ export default function VideoDetailScreen() {
  const { bvid } = useLocalSearchParams<{ bvid: string }>();
  const router = useRouter();
  const theme = useTheme();
+
+  // 进入视频详情页时立即清除直播小窗
+  useLayoutEffect(() => {
+    useLiveStore.getState().clearLive();
+  }, []);
  const {
    video,
    playData,
@@ -49,7 +55,10 @@ export default function VideoDetailScreen() {
  const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
  const [currentTime, setCurrentTime] = useState(0);
  const [showDownload, setShowDownload] = useState(false);
-  const [uploaderStat, setUploaderStat] = useState<{ follower: number; archiveCount: number } | null>(null);
+  const [uploaderStat, setUploaderStat] = useState<{
+    follower: number;
+    archiveCount: number;
+  } | null>(null);
  const {
    videos: relatedVideos,
    loading: relatedLoading,
@@ -71,7 +80,9 @@ export default function VideoDetailScreen() {

  useEffect(() => {
    if (!video?.owner?.mid) return;
-    getUploaderStat(video.owner.mid).then(setUploaderStat).catch(() => {});
+    getUploaderStat(video.owner.mid)
+      .then(setUploaderStat)
+      .catch(() => {});
  }, [video?.owner?.mid]);

  return (
@@ -197,7 +208,8 @@ export default function VideoDetailScreen() {
                      </Text>
                      {uploaderStat && (
                        <Text style={styles.upStat}>
-                          {formatCount(uploaderStat.follower)}粉丝 · {formatCount(uploaderStat.archiveCount)}视频
+                          {formatCount(uploaderStat.follower)}粉丝 ·{" "}
+                          {formatCount(uploaderStat.archiveCount)}视频
                        </Text>
                      )}
                    </View>
@@ -465,7 +477,7 @@ function SeasonSection({
            <TouchableOpacity
              style={[
                styles.epCard,
-                { backgroundColor: theme.card },
+                { backgroundColor: theme.card, borderColor: theme.border },
                isCurrent && styles.epCardActive,
              ]}
              onPress={() => !isCurrent && onEpisodePress(ep.bvid)}
@@ -564,10 +576,10 @@ const styles = StyleSheet.create({
    width: 120,
    borderRadius: 6,
    overflow: "hidden",
-    borderWidth: 1.5,
+    borderWidth: 1,
    borderColor: "transparent",
  },
-  epCardActive: { borderColor: "#00AEEC" },
+  epCardActive: { borderColor: "#00AEEC", borderWidth: 1.5 },
  epThumb: { width: 120, height: 68 },
  epNum: { fontSize: 11, color: "#999", paddingHorizontal: 6, paddingTop: 4 },
  epNumActive: { color: "#00AEEC", fontWeight: "600" },