
Category: Advance
Published:
Video Display Implementation Details Advancement in AI Office Assistant
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:
- Video State Management:
const [video, setVideo] = useState<string>();
- 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
};
- 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>
)}
- 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>();
:
-
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 itselfsetVideo
: a function to update the state
-
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>
-
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} ... /> )}
- Initial State:
-
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
-
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:
- 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);
- 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:
- Replicate always returns video URLs in
finalPrediction.output
array - We extract just the first URL (
output[0]
) in the API route - We send only that URL back to the frontend
- The frontend receives the clean URL directly in
response.data
- 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.