fix: 修复isLoadingProxy状态未使用的问题
问题修复: - isLoadingProxy状态被定义但在UI中未使用 - 代理加载过程缺乏用户反馈 - 加载状态管理逻辑不够清晰 改进内容: 1. UI显示优化: - 在加载动画中区分普通加载和代理加载 - 显示'正在获取视频流...'提示代理加载状态 - 代理加载时隐藏悬浮按钮避免误操作 2. 状态管理优化: - 简化初始加载逻辑,移除不必要的try-catch - 在视频错误时正确切换加载状态 - 代理加载开始时停止普通加载状态 3. 用户体验改进: - 明确区分两种加载状态的视觉反馈 - 提供更详细的加载进度信息 - 避免在代理加载时显示操作按钮 技术细节: - 加载条件: (isLoading || isLoadingProxy) - 按钮显示条件: !isLoading && !isLoadingProxy && !error - 状态切换: setIsLoading(false) setIsLoadingProxy(true) - 错误处理: 代理失败时正确清理所有加载状态
This commit is contained in:
parent
d3713e54c7
commit
d4b9e77020
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue