logan/twimg-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Logan Cusano
2025-07-13 19:03:13 -04:00
commit 7d3f08cae9
15 changed files with 591 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Dockerfile Normal file
View File

@@ -0,0 +1,29 @@
# Stage 1: Build the Next.js application
FROM node:22-slim AS builder
WORKDIR /app
# Copy package files and install dependencies
COPY package*.json ./
RUN npm install
# Copy the rest of the application code
COPY . .
# Build the Next.js app
RUN npm run build
# Stage 2: Production image
FROM node:22-slim
WORKDIR /app
# Copy built assets from the builder stage
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json .
COPY --from=builder /app/next.config.js . 2>/dev/null || true
# Expose port 3000
EXPOSE 3000
# Start the Next.js production server
CMD ["npm", "start"]

13
Makefile Normal file
View File

@@ -0,0 +1,13 @@
IMAGE_NAME = twimg-frontend
CONTAINER_NAME = twimg-frontend
# Target to build the Docker image for sdr-node
build:
docker build -t $(IMAGE_NAME) .
# Target to run the sdr-node container
run: build
docker run --rm -it \
--name $(CONTAINER_NAME) \
-p 3000:3000 \
$(IMAGE_NAME)

67
app/auth/login/page.tsx Normal file
View File

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

66
app/globals.css Normal file
View File

@@ -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;
}
}

42
app/layout.tsx Normal file
View File

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

55
app/main/admin/page.tsx Normal file
View File

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

27
app/main/layout.tsx Normal file
View File

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

87
app/main/page.tsx Normal file
View File

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

36
lib/api.ts Normal file
View File

@@ -0,0 +1,36 @@
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8000';
const apiRequest = async (endpoint, options = {}) => {
const { method = 'GET', body = null, token = null } = options;
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/json',
};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const config = {
method,
headers,
};
if (body) {
config.body = JSON.stringify(body);
}
const response = await fetch(`${API_URL}${endpoint}`, config);
if (!response.ok) {
const errorData = await response.json().catch(() => ({ detail: 'An unknown error occurred' }));
throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
}
if (response.headers.get("content-type")?.includes("application/json")) {
return response.json();
}
return response; // For non-json responses like video streams
};

45
lib/auth.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React, { createContext, useContext, useState, useEffect } from 'react';
const AuthContext = createContext(null);
export const AuthProvider = ({ children }) => {
const [token, setToken] = useState(null);
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const storedToken = localStorage.getItem('authToken');
const storedUser = localStorage.getItem('authUser');
if (storedToken && storedUser) {
setToken(storedToken);
setUser(JSON.parse(storedUser));
}
setLoading(false);
}, []);
const login = (newToken, newUser) => {
setToken(newToken);
setUser(newUser);
localStorage.setItem('authToken', newToken);
localStorage.setItem('authUser', JSON.stringify(newUser));
};
const logout = () => {
setToken(null);
setUser(null);
localStorage.removeItem('authToken');
localStorage.removeItem('authUser');
};
const value = { token, user, login, logout, isAuthenticated: !!token };
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
);
};
export const useAuth = () => {
return useContext(AuthContext);
};

7
next.config.js Normal file
View File

@@ -0,0 +1,7 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
module.exports = nextConfig

23
package.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "video-voter-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 3000",
"lint": "next lint"
},
"dependencies": {
"lucide-react": "^0.300.0",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"autoprefixer": "^10.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0"
}
}

7
postcss.config.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

62
tailwind.config.js Normal file
View File

@@ -0,0 +1,62 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
}
}
},
plugins: [require("tailwindcss-animate")],
}

25
tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}