import React, { useState, useEffect, useCallback } from 'react';
import { generateVideoTrailer } from './services/geminiService';
import Header from './components/Header';
import PromptDisplay from './components/PromptDisplay';
import LoadingIndicator from './components/LoadingIndicator';
import VideoPlayer from './components/VideoPlayer';
// Fix: Define a named interface for `aistudio` and use it in the global Window
// declaration to resolve conflicts with other potential declarations of `window.aistudio`.
interface AIStudio {
hasSelectedApiKey: () => Promise
;
openSelectKey: () => Promise;
}
declare global {
interface Window {
aistudio: AIStudio;
}
}
const App: React.FC = () => {
const [apiKeySelected, setApiKeySelected] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [loadingMessage, setLoadingMessage] = useState('');
const [videoUrl, setVideoUrl] = useState(null);
const [error, setError] = useState(null);
const checkApiKey = useCallback(async () => {
if (window.aistudio) {
const hasKey = await window.aistudio.hasSelectedApiKey();
setApiKeySelected(hasKey);
} else {
// Fallback for environments where aistudio is not available
console.warn('AI Studio context not found. Assuming API key is set via environment variables.');
setApiKeySelected(true);
}
}, []);
useEffect(() => {
checkApiKey();
}, [checkApiKey]);
const handleSelectKey = async () => {
if (window.aistudio) {
await window.aistudio.openSelectKey();
setApiKeySelected(true); // Assume success to avoid race conditions
}
};
const handleGenerateClick = async () => {
if (!apiKeySelected) {
handleSelectKey();
return;
}
setIsLoading(true);
setVideoUrl(null);
setError(null);
setLoadingMessage('Initializing video generation...');
try {
const url = await generateVideoTrailer(setLoadingMessage);
setVideoUrl(url);
} catch (e) {
let errorMessage = 'An unknown error occurred.';
if (e instanceof Error) {
errorMessage = e.message;
}
if (errorMessage.includes('Requested entity was not found')) {
errorMessage = 'API Key is invalid or not found. Please select a valid API key.';
setApiKeySelected(false);
}
setError(errorMessage);
} finally {
setIsLoading(false);
setLoadingMessage('');
}
};
return (
{!apiKeySelected && window.aistudio && (
Please select an API key to enable video generation.
This app uses Veo, which requires billing to be enabled. Learn more about billing.
)}
{apiKeySelected && (
)}
{isLoading &&
}
{error && (
Error:
{error}
)}
{videoUrl && !isLoading && (
Your Trailer is Ready!
)}
);
};
export default App;