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(() => {
|
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="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>
|
<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}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue