init

app/auth/login/page.tsx

@@ -0,0 +1,67 @@
+const LoginPage = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const auth = useAuth();
+    // In a real app, you'd use Next.js's useRouter
+    const [isLoggedIn, setIsLoggedIn] = useState(false); 
+  
+    const handleSubmit = async (e) => {
+      e.preventDefault();
+      setError('');
+      try {
+          const formData = new URLSearchParams();
+          formData.append('username', email);
+          formData.append('password', password);
+  
+          const response = await fetch(`${API_URL}/auth/login`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+              body: formData,
+          });
+  
+          if (!response.ok) {
+              const errorData = await response.json();
+              throw new Error(errorData.detail || 'Login failed');
+          }
+          
+          const { id_token, uid } = await response.json();
+          
+          // A real app would fetch user details here, but we'll mock it
+          const userDetails = { uid, email, role: 'user' }; // Assume 'user' for now
+          auth.login(id_token, userDetails);
+          setIsLoggedIn(true); // Simulate redirect
+      } catch (err) {
+        setError(err.message);
+      }
+    };
+    
+    if (isLoggedIn || auth.isAuthenticated) {
+        // In a real app, this would be a redirect to '/'
+        return <p>Redirecting...</p>;
+    }
+  
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100">
+        <Card className="w-full max-w-sm">
+          <CardHeader>
+            <CardTitle>Login</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <label htmlFor="email">Email</label>
+                <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="password">Password</label>
+                <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+              </div>
+              {error && <p className="text-sm text-red-500">{error}</p>}
+              <Button type="submit" className="w-full">Login</Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  };

app/globals.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem}
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%}
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -0,0 +1,42 @@
+const RootLayout = ({ children }) => (
+    <html lang="en">
+      <body>
+        <AuthProvider>
+          {children}
+        </AuthProvider>
+      </body>
+    </html>
+  );
+  
+  // Main App component to simulate routing
+  export default function App() {
+      const [route, setRoute] = useState('/login'); // Default route
+      
+      // Simulate navigation for the demo
+      useEffect(() => {
+          const handleHashChange = () => {
+              setRoute(window.location.hash.replace('#', '') || '/');
+          };
+          window.addEventListener('hashchange', handleHashChange);
+          handleHashChange(); // Initial check
+          return () => window.removeEventListener('hashchange', handleHashChange);
+      }, []);
+  
+      const renderPage = () => {
+          switch (route) {
+              case '/login':
+                  return <LoginPage />;
+              case '/admin':
+                  return <MainLayout><AdminPage /></MainLayout>;
+              case '/':
+              default:
+                  return <MainLayout><VotingPage /></MainLayout>;
+          }
+      };
+  
+      return (
+          <RootLayout>
+              {renderPage()}
+          </RootLayout>
+      );
+  }

app/main/admin/page.tsx

@@ -0,0 +1,55 @@
+const AdminPage = () => {
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+    const auth = useAuth();
+
+    const handleScan = async () => {
+        setError('');
+        setMessage('Scanning...');
+        try {
+            const data = await apiRequest('/videos/scan', { method: 'POST', token: auth.token });
+            setMessage(data.message);
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+    
+    // In a real app, you'd fetch users and votes here
+    const users = [{email: 'admin@example.com', role: 'admin'}, {email: 'user@example.com', role: 'user'}];
+    const votes = [{video_id: 'xyz', decision: 'approve', reason: 'Good clip'}];
+
+    if (auth.user?.role !== 'admin') {
+        return <p>Access Denied. You must be an admin to view this page.</p>;
+    }
+
+    return (
+        <div className="space-y-8">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Admin Actions</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <Button onClick={handleScan}>Scan Videos Directory</Button>
+                    {message && <p className="mt-4 text-green-600">{message}</p>}
+                    {error && <p className="mt-4 text-red-600">{error}</p>}
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader><CardTitle>Users</CardTitle></CardHeader>
+                <CardContent>
+                    {/* User list would be rendered here */}
+                    <p>User list functionality would go here.</p>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader><CardTitle>Votes</CardTitle></CardHeader>
+                <CardContent>
+                    {/* Vote list would be rendered here */}
+                    <p>Vote list functionality would go here.</p>
+                </CardContent>
+            </Card>
+        </div>
+    );
+};

app/main/layout.tsx

@@ -0,0 +1,27 @@
+const MainLayout = ({ children }) => {
+    const auth = useAuth();
+
+    if (!auth.isAuthenticated) {
+        // This would be a redirect in a real Next.js app
+        return <LoginPage />;
+    }
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <header className="bg-white shadow-sm">
+                <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
+                    <h1 className="text-xl font-bold">Video Voter</h1>
+                    <div>
+                        {auth.user?.role === 'admin' && (
+                            <a href="#admin" className="text-gray-600 hover:text-gray-900 mr-4">Admin</a>
+                        )}
+                        <Button onClick={auth.logout}>Logout</Button>
+                    </div>
+                </nav>
+            </header>
+            <main className="container mx-auto p-4">
+                {children}
+            </main>
+        </div>
+    );
+};

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>
+    );
+};