fix video stream

app/main/page.tsx

@@ -1,24 +1,66 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useAuth } from '@/lib/auth';
-import { apiRequest, API_URL } from '@/lib/api';
+import { apiRequest } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
 
 const VotingPage = () => {
     const [video, setVideo] = useState<any>(null);
+    const [videoUrl, setVideoUrl] = useState<string | null>(null); // State for the blob URL
     const [reason, setReason] = useState('');
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
     const auth = useAuth();
 
+    // This effect runs when the `video` metadata is fetched
+    useEffect(() => {
+        // If there's no video metadata, do nothing.
+        if (!video) {
+            return;
+        }
+
+        let objectUrl: string; // To keep track of the URL for cleanup
+
+        const fetchVideoBlob = async () => {
+            try {
+                // Fetch the video stream as a raw response, not JSON
+                const response = await apiRequest(`/videos/${video.id}/stream`, { 
+                    token: auth.token,
+                    wantsJson: false // We expect a blob, not JSON
+                });
+                
+                const blob = await response.blob();
+                objectUrl = URL.createObjectURL(blob);
+                setVideoUrl(objectUrl);
+
+            } catch (err: any) {
+                setError(`Failed to load video: ${err.message}`);
+            }
+        };
+
+        fetchVideoBlob();
+
+        // Cleanup function: revoke the object URL to free up memory
+        return () => {
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
+    }, [video, auth.token]);
+
+
     const fetchNextVideo = async () => {
+        // Reset all states for the new video
         setError('');
         setMessage('');
         setVideo(null);
+        setVideoUrl(null); 
+        setReason('');
         try {
+            // This just gets the video metadata (id, person, game)
             const data = await apiRequest('/videos/vote-next', { token: auth.token });
             setVideo(data);
         } catch (err: any) {
@@ -38,7 +80,9 @@ const VotingPage = () => {
                 token: auth.token
             });
             setMessage(`Vote '${decision}' submitted successfully!`);
+            // Reset state to prepare for the next video
             setVideo(null);
+            setVideoUrl(null);
             setReason('');
         } catch (err: any) {
             setError(err.message);
@@ -61,14 +105,15 @@ const VotingPage = () => {
                     {error && <p className="text-center text-red-500">{error}</p>}
                     {message && <p className="text-center text-green-500">{message}</p>}
 
-                    {video && (
+                    {/* The video player now uses the local blob URL */}
+                    {video && videoUrl && (
                         <div className="space-y-4">
                             <div>
                                 <video 
                                     key={video.id}
                                     className="w-full rounded-lg bg-black" 
                                     controls 
-                                    src={`${API_URL}/videos/${video.id}/stream?token=${auth.token}`}
+                                    src={videoUrl} // Use the state variable for the src
                                 >
                                     Your browser does not support the video tag.
                                 </video>