import { useState, useCallback } from 'react' import { processVideo } from '../utils/api.js' /** * Custom hook for video processing * BUG FIX: processUrl/processFile now RETURN the job object so App.jsx * can use it directly (avoids stale closure issue with React state). */ export function useVideoProcessor() { const [currentJob, setCurrentJob] = useState(null) const [isProcessing, setIsProcessing] = useState(false) const [error, setError] = useState(null) const processUrl = useCallback(async (url, options = {}) => { setError(null) setIsProcessing(true) try { if (!url || !url.trim()) { throw new Error('Please enter a valid URL') } const result = await processVideo(url, options) // BUG FIX: result.jobId is now normalized in api.js (was result.job_id) const job = { jobId: result.jobId, status: result.status || 'processing' } setCurrentJob(job) return job // RETURN so caller doesn't need to read stale state } catch (err) { const message = err.message || 'Failed to process video' setError(message) console.error('Error processing URL:', err) return null } finally { setIsProcessing(false) } }, []) const processFile = useCallback(async (file, options = {}) => { setError(null) setIsProcessing(true) try { if (!file) throw new Error('No file selected') if (!file.type.startsWith('video/')) throw new Error('Please select a valid video file') if (file.size > 5000000000) throw new Error('File size must be less than 5GB') const result = await processVideo(file, options) const job = { jobId: result.jobId, status: result.status || 'processing' } setCurrentJob(job) return job // RETURN so caller doesn't need to read stale state } catch (err) { const message = err.message || 'Failed to process video' setError(message) console.error('Error processing file:', err) return null } finally { setIsProcessing(false) } }, []) const reset = useCallback(() => { setCurrentJob(null) setError(null) setIsProcessing(false) }, []) return { currentJob, isProcessing, error, processUrl, processFile, reset } }