Function VideoGenUI

testing/e2e/src/components/VideoGenUI.tsx:42–151

({
  provider,
  mode,
  testId,
  aimockPort,
  withImageInput,
}: VideoGenUIProps)

}

export function VideoGenUI({
  provider,
  mode,
  testId,
  aimockPort,
  withImageInput,
}: VideoGenUIProps) {
  const [prompt, setPrompt] = useState('')
  const [imageFile, setImageFile] = useState<File | null>(null)

  const connectionOptions = () => {
    const body = { provider, testId, aimockPort }

    if (mode === 'sse') {
      return { connection: fetchServerSentEvents('/api/video'), body }
    }
    if (mode === 'http-stream') {
      return { connection: fetchHttpStream('/api/video/stream'), body }
    }
    return {
      fetcher: async (input: { prompt: MediaPrompt }) => {
        return generateVideoFn({
          data: { prompt: input.prompt, provider, aimockPort, testId },
        }) as Promise<VideoGenerateResult>
      },
    }
  }

  const { generate, result, videoStatus, isLoading, error, status } =
    useGenerateVideo(connectionOptions())

  const handleGenerate = async () => {
    if (!imageFile) {
      await generate({ prompt })
      return
    }
    const base64 = await fileToBase64(imageFile)
    await generate({
      prompt: [
        { type: 'text', content: prompt },
        {
          type: 'image',
          source: { type: 'data', value: base64, mimeType: imageFile.type },
        },
      ],
    })
  }

  return (
    <div className="p-4 space-y-4">
      <div className="flex gap-2">
        <input
          data-testid="prompt-input"
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Describe the video..."
          className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"