120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Play, FileText, AlertCircle } from 'lucide-react';
|
||
import { useMaterialStore } from '../store/materialStore';
|
||
|
||
/**
|
||
* FFmpeg调试面板组件
|
||
* 用于测试和调试FFmpeg功能
|
||
*/
|
||
export const FFmpegDebugPanel: React.FC = () => {
|
||
const {
|
||
// testSceneDetection,
|
||
// getFFmpegStatus,
|
||
selectMaterialFiles
|
||
} = useMaterialStore();
|
||
|
||
const [testFilePath, setTestFilePath] = useState('');
|
||
const [testResult, setTestResult] = useState('');
|
||
const [ffmpegStatus, setFFmpegStatus] = useState('');
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
// 获取FFmpeg状态
|
||
const handleGetFFmpegStatus = async () => {
|
||
setIsLoading(true);
|
||
try {
|
||
// const status = await getFFmpegStatus();
|
||
setFFmpegStatus('FFmpeg状态检查功能暂时不可用');
|
||
} catch (error) {
|
||
setFFmpegStatus(`获取状态失败: ${error}`);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
// 选择测试文件
|
||
const handleSelectTestFile = async () => {
|
||
try {
|
||
const files = await selectMaterialFiles();
|
||
if (files.length > 0) {
|
||
setTestFilePath(files[0]);
|
||
}
|
||
} catch (error) {
|
||
console.error('选择文件失败:', error);
|
||
}
|
||
};
|
||
|
||
// 测试场景检测
|
||
const handleTestSceneDetection = async () => {
|
||
if (!testFilePath) {
|
||
setTestResult('请先选择测试文件');
|
||
return;
|
||
}
|
||
|
||
setIsLoading(true);
|
||
setTestResult('正在测试场景检测...');
|
||
|
||
try {
|
||
// const result = await testSceneDetection(testFilePath);
|
||
setTestResult('场景检测测试功能暂时不可用');
|
||
} catch (error) {
|
||
setTestResult(`测试失败: ${error}`);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||
<div className="mb-6">
|
||
<div className="space-y-3">
|
||
<div className="flex items-center space-x-3">
|
||
<button
|
||
onClick={handleSelectTestFile}
|
||
className="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
|
||
>
|
||
选择测试文件
|
||
</button>
|
||
{testFilePath && (
|
||
<span className="text-sm text-gray-600 truncate max-w-md">
|
||
{testFilePath}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
onClick={handleTestSceneDetection}
|
||
disabled={!testFilePath || isLoading}
|
||
className="flex items-center px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
|
||
>
|
||
<Play className="w-4 h-4 mr-2" />
|
||
{isLoading ? '测试中...' : '测试场景检测'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 测试结果 */}
|
||
{testResult && (
|
||
<div className="mb-4">
|
||
<h4 className="font-medium text-gray-900 mb-3">测试结果</h4>
|
||
<div className="bg-gray-50 rounded p-4 text-sm font-mono whitespace-pre-wrap max-h-96 overflow-y-auto">
|
||
{testResult}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 使用说明 */}
|
||
<div className="bg-blue-50 rounded p-4">
|
||
<h4 className="font-medium text-blue-900 mb-2 flex items-center">
|
||
<AlertCircle className="w-4 h-4 mr-2" />
|
||
使用说明
|
||
</h4>
|
||
<ul className="text-sm text-blue-800 space-y-1">
|
||
<li>• 选择一个视频文件进行场景检测测试</li>
|
||
<li>• 查看测试结果，包括元数据提取和场景检测信息</li>
|
||
<li>• 如果场景检测失败，检查错误信息进行调试</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|