init

app/main/page.tsx

@@ -0,0 +1,87 @@
+const VotingPage = () => {
+    const [video, setVideo] = useState(null);
+    const [reason, setReason] = useState('');
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+    const auth = useAuth();
+
+    const fetchNextVideo = async () => {
+        setError('');
+        setMessage('');
+        setVideo(null);
+        try {
+            const data = await apiRequest('/videos/vote-next', { token: auth.token });
+            setVideo(data);
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    const submitVote = async (decision) => {
+        if (!video) return;
+        setError('');
+        setMessage('');
+        try {
+            const body = { decision, reason, recommended_game: '' }; // Add recommended_game if needed
+            await apiRequest(`/videos/${video.id}/vote`, {
+                method: 'POST',
+                body,
+                token: auth.token
+            });
+            setMessage(`Vote '${decision}' submitted successfully!`);
+            setVideo(null);
+            setReason('');
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    return (
+        <div className="max-w-4xl mx-auto">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Vote on a Video</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                    {!video && (
+                        <div className="text-center">
+                            <Button onClick={fetchNextVideo}>Get Next Video to Vote On</Button>
+                        </div>
+                    )}
+                    
+                    {error && <p className="text-center text-red-500">{error}</p>}
+                    {message && <p className="text-center text-green-500">{message}</p>}
+
+                    {video && (
+                        <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}`}
+                                    // The token in query param is a simple way for this demo.
+                                    // In a real app, you might handle auth differently for media.
+                                >
+                                    Your browser does not support the video tag.
+                                </video>
+                            </div>
+                            <div className="text-sm text-gray-600">
+                                <p><strong>Person:</strong> {video.person}</p>
+                                <p><strong>Game:</strong> {video.game || 'N/A'}</p>
+                            </div>
+                            <div className="space-y-2">
+                                <label htmlFor="reason">Reason (Optional)</label>
+                                <Textarea id="reason" value={reason} onChange={(e) => setReason(e.target.value)} />
+                            </div>
+                            <div className="flex space-x-4">
+                                <Button className="w-full bg-green-600 hover:bg-green-700" onClick={() => submitVote('approve')}>Approve</Button>
+                                <Button className="w-full bg-red-600 hover:bg-red-700" onClick={() => submitVote('reject')}>Reject</Button>
+                            </div>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    );
+};