Video Display Implementation Details

Understanding the Video Generator Frontend and Data Flow

Video Display Component Location

The video display is handled in app/(dashboard)/(routes)/video-generator/page.tsx. Here are the key components:

1. Video State Management:

const [video, setVideo] = useState<string>();

2. Form Submission and API Call:

const onSubmit = async (formData) => {
  const response = await axios.post("/api/video-generator", formData);
  setVideo(response.data); // Sets the video URL from API response
};

3. Video Player Component:

{video && (
  <video
    controls
    className="w-full aspect-video mt-8 rounded-lg border bg-black"
    src={video}
  >
    Your browser does not support the video element.
  </video>
)}

4. Loading States:

• Shows loader during generation: {isLoading && <Loader />}
• Shows empty state when no video: {!video && !isLoading && <Empty />}
• Shows video player when URL is available

Understanding State Management

Breaking down const [video, setVideo] = useState<string>();:

1. React’s useState Hook

   const [video, setVideo] = useState<string>();

   • This is a React hook that creates a state variable
   • Uses array destructuring to get two items:
     • video: the state variable itself
     • setVideo: a function to update the state

2. TypeScript Typing

   • <string> specifies that the state will hold a string value
   • The undefined type is implied by not providing an initial value
   • Full type would be useState<string | undefined>

3. Usage in the Component

   • Initial State: undefined (no video URL)
   • Setting State:

     setVideo(undefined); // Clear video before new generation
     setVideo(response.data); // Set new video URL after API response

   • Reading State:

     {video && ( // Only render video player if URL exists
       <video src={video} ... />
     )}

4. State Lifecycle

   // 1. Initial state
   const [video, setVideo] = useState<string>(); // video is undefined
   
   // 2. When form submits
   setVideo(undefined); // Clear existing video
   
   // 3. After API response
   setVideo(response.data); // Set to new video URL
   
   // 4. Component re-renders with new URL
   // 5. Video player displays new content

5. Why This Pattern?

   • Maintains reactivity: Component re-renders when video URL changes
   • Type-safe: TypeScript ensures video URL is always a string
   • Clean state management: Clear separation of state and updates
   • Proper loading states: Can show loading/empty states based on value

URL Data Flow

Understanding how the video URL moves from API to display:

1. In API Route (app/api/video-generator/route.ts):

// 1. Get prediction output from Replicate
let finalPrediction = await replicate.wait(prediction);

// 2. Check if output exists and is an array
if (!finalPrediction.output || !Array.isArray(finalPrediction.output)) {
  // Handle error...
}

// 3. Get first URL from the output array
const videoUrl = finalPrediction.output[0];

// 4. Send just the URL back to frontend
return NextResponse.json(videoUrl);

2. In Frontend (app/(dashboard)/(routes)/video-generator/page.tsx):

const response = await axios.post("/api/video-generator", formData);
// response.data directly contains the URL because we sent only videoUrl from API
setVideo(response.data);

The flow works because:

1. Replicate always returns video URLs in finalPrediction.output array
2. We extract just the first URL (output[0]) in the API route
3. We send only that URL back to the frontend
4. The frontend receives the clean URL directly in response.data
5. This URL is then used in the video player’s src attribute

This simplifies the frontend handling - instead of dealing with the full Replicate response object, it gets exactly what it needs: just the video URL.