fix: 修复isLoadingProxy状态未使用的问题

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

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

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

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

技术细节:
- 加载条件: (isLoading || isLoadingProxy)
- 按钮显示条件: !isLoading && !isLoadingProxy && !error
- 状态切换: setIsLoading(false)  setIsLoadingProxy(true)
- 错误处理: 代理失败时正确清理所有加载状态
This commit is contained in:
imeepos 2025-07-31 13:55:00 +08:00
parent d3713e54c7
commit d4b9e77020
1 changed files with 18 additions and 22 deletions

View File

@ -59,23 +59,13 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
useEffect(() => { useEffect(() => {
if (!videoUrl || !isOpen) return; if (!videoUrl || !isOpen) return;
const loadProxiedVideo = async () => { // 重置状态
setIsLoadingProxy(true); setError(null);
setError(null); setIsLoading(true);
setIsLoadingProxy(false);
try { // 首先尝试直接加载
// 首先尝试直接加载 setProxiedVideoUrl(videoUrl);
setProxiedVideoUrl(videoUrl);
setIsLoading(true);
} catch (error) {
console.error('加载视频失败:', error);
setError('视频加载失败');
} finally {
setIsLoadingProxy(false);
}
};
loadProxiedVideo();
}, [videoUrl, isOpen]); }, [videoUrl, isOpen]);
// 重置状态当视频URL改变时 // 重置状态当视频URL改变时
@ -197,18 +187,19 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
// 如果还没有尝试过代理,则尝试使用代理服务 // 如果还没有尝试过代理,则尝试使用代理服务
if (proxiedVideoUrl === videoUrl) { if (proxiedVideoUrl === videoUrl) {
try { try {
setIsLoadingProxy(true); setIsLoading(false); // 停止普通加载状态
setIsLoadingProxy(true); // 开始代理加载状态
setError(null); setError(null);
console.log('开始获取代理视频数据...');
const proxiedData = await invoke<string>('get_video_stream_base64', { const proxiedData = await invoke<string>('get_video_stream_base64', {
videoUrl: videoUrl videoUrl: videoUrl
}); });
setProxiedVideoUrl(proxiedData); setProxiedVideoUrl(proxiedData);
console.log('成功获取代理视频数据'); console.log('成功获取代理视频数据,大小:', proxiedData.length);
} catch (error) { } catch (error) {
console.error('代理视频加载失败:', error); console.error('代理视频加载失败:', error);
setIsLoading(false);
setError('视频加载失败,请检查网络连接或视频链接'); setError('视频加载失败,请检查网络连接或视频链接');
} finally { } finally {
setIsLoadingProxy(false); setIsLoadingProxy(false);
@ -267,9 +258,14 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
<div className="space-y-4"> <div className="space-y-4">
{/* 视频播放区域 */} {/* 视频播放区域 */}
<div className="relative bg-black rounded-lg overflow-hidden aspect-video group"> <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="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> </div>
)} )}
@ -300,7 +296,7 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
</video> </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"> <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 <button
onClick={handleDownload} onClick={handleDownload}