From d4b9e77020ed737ba340e4f5a2d9599041faaa5c Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Thu, 31 Jul 2025 13:55:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DisLoadingProxy?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题修复:
- isLoadingProxy状态被定义但在UI中未使用
- 代理加载过程缺乏用户反馈
- 加载状态管理逻辑不够清晰

改进内容:
1. UI显示优化:
   - 在加载动画中区分普通加载和代理加载
   - 显示'正在获取视频流...'提示代理加载状态
   - 代理加载时隐藏悬浮按钮避免误操作

2. 状态管理优化:
   - 简化初始加载逻辑，移除不必要的try-catch
   - 在视频错误时正确切换加载状态
   - 代理加载开始时停止普通加载状态

3. 用户体验改进:
   - 明确区分两种加载状态的视觉反馈
   - 提供更详细的加载进度信息
   - 避免在代理加载时显示操作按钮

技术细节:
- 加载条件: (isLoading || isLoadingProxy)
- 按钮显示条件: !isLoading && !isLoadingProxy && !error
- 状态切换: setIsLoading(false)  setIsLoadingProxy(true)
- 错误处理: 代理失败时正确清理所有加载状态
---
 .../src/components/VideoPreviewModal.tsx      | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/apps/desktop/src/components/VideoPreviewModal.tsx b/apps/desktop/src/components/VideoPreviewModal.tsx
index cb22826..83fc8de 100644
--- a/apps/desktop/src/components/VideoPreviewModal.tsx
+++ b/apps/desktop/src/components/VideoPreviewModal.tsx
@@ -59,23 +59,13 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
   useEffect(() => {
     if (!videoUrl || !isOpen) return;
 
-    const loadProxiedVideo = async () => {
-      setIsLoadingProxy(true);
-      setError(null);
+    // 重置状态
+    setError(null);
+    setIsLoading(true);
+    setIsLoadingProxy(false);
 
-      try {
-        // 首先尝试直接加载
-        setProxiedVideoUrl(videoUrl);
-        setIsLoading(true);
-      } catch (error) {
-        console.error('加载视频失败:', error);
-        setError('视频加载失败');
-      } finally {
-        setIsLoadingProxy(false);
-      }
-    };
-
-    loadProxiedVideo();
+    // 首先尝试直接加载
+    setProxiedVideoUrl(videoUrl);
   }, [videoUrl, isOpen]);
 
   // 重置状态当视频URL改变时
@@ -197,18 +187,19 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
     // 如果还没有尝试过代理，则尝试使用代理服务
     if (proxiedVideoUrl === videoUrl) {
       try {
-        setIsLoadingProxy(true);
+        setIsLoading(false); // 停止普通加载状态
+        setIsLoadingProxy(true); // 开始代理加载状态
         setError(null);
 
+        console.log('开始获取代理视频数据...');
         const proxiedData = await invoke<string>('get_video_stream_base64', {
           videoUrl: videoUrl
         });
 
         setProxiedVideoUrl(proxiedData);
-        console.log('成功获取代理视频数据');
+        console.log('成功获取代理视频数据，大小:', proxiedData.length);
       } catch (error) {
         console.error('代理视频加载失败:', error);
-        setIsLoading(false);
         setError('视频加载失败，请检查网络连接或视频链接');
       } finally {
         setIsLoadingProxy(false);
@@ -267,9 +258,14 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
       <div className="space-y-4">
         {/* 视频播放区域 */}
         <div className="relative bg-black rounded-lg overflow-hidden aspect-video group">
-          {isLoading && (
+          {(isLoading || isLoadingProxy) && (
             <div className="absolute inset-0 flex items-center justify-center bg-gray-900">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+              <div className="flex flex-col items-center space-y-3">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+                <p className="text-white text-sm">
+                  {isLoadingProxy ? '正在获取视频流...' : '加载中...'}
+                </p>
+              </div>
             </div>
           )}
 
@@ -300,7 +296,7 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
           </video>
 
           {/* 右上角悬浮按钮组 */}
-          {!isLoading && !error && (
+          {!isLoading && !isLoadingProxy && !error && (
             <div className="absolute top-4 right-4 flex items-center space-x-2 opacity-80 hover:opacity-100 group-hover:opacity-100 transition-all duration-300 z-10">
               <button
                 onClick={handleDownload}