96 lines
3.8 KiB
TypeScript
96 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useAuth } from '@/lib/auth';
|
|
import { apiRequest, API_URL } 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 [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: any) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
const submitVote = async (decision: string) => {
|
|
if (!video) return;
|
|
setError('');
|
|
setMessage('');
|
|
try {
|
|
const body = { decision, reason, recommended_game: '' };
|
|
await apiRequest(`/videos/${video.id}/vote`, {
|
|
method: 'POST',
|
|
body,
|
|
token: auth.token
|
|
});
|
|
setMessage(`Vote '${decision}' submitted successfully!`);
|
|
setVideo(null);
|
|
setReason('');
|
|
} catch (err: any) {
|
|
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}`}
|
|
>
|
|
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>
|
|
);
|
|
};
|
|
|
|
export default VotingPage; |