Initial commit — Movie Night media discovery app
AI-powered web app that recommends unwatched movies from a Jellyfin library based on natural language mood input. Jellyfin auth, modular LLM backend (Claude/OpenAI/Ollama), two-tier pre-filter + AI ranking, mobile-responsive dark theme UI with poster cards and deep links. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,222 @@
|
||||
// Movie Night — Frontend Logic
|
||||
|
||||
const API = '';
|
||||
let currentUser = null;
|
||||
let selectedUserIds = [];
|
||||
|
||||
// --- Auth ---
|
||||
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/auth/me`);
|
||||
if (res.ok) {
|
||||
currentUser = await res.json();
|
||||
showMainScreen();
|
||||
} else {
|
||||
showLoginScreen();
|
||||
}
|
||||
} catch {
|
||||
showLoginScreen();
|
||||
}
|
||||
}
|
||||
|
||||
async function login(username, password) {
|
||||
const res = await fetch(`${API}/api/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ detail: 'Login failed' }));
|
||||
throw new Error(err.detail || 'Login failed');
|
||||
}
|
||||
currentUser = await res.json();
|
||||
showMainScreen();
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
await fetch(`${API}/api/auth/logout`, { method: 'POST' });
|
||||
currentUser = null;
|
||||
showLoginScreen();
|
||||
}
|
||||
|
||||
// --- Screens ---
|
||||
|
||||
function showLoginScreen() {
|
||||
document.getElementById('login-screen').classList.remove('hidden');
|
||||
document.getElementById('main-screen').classList.add('hidden');
|
||||
}
|
||||
|
||||
function showMainScreen() {
|
||||
document.getElementById('login-screen').classList.add('hidden');
|
||||
document.getElementById('main-screen').classList.remove('hidden');
|
||||
document.getElementById('user-name').textContent = currentUser.name;
|
||||
selectedUserIds = [currentUser.id];
|
||||
loadUsers();
|
||||
loadStats();
|
||||
}
|
||||
|
||||
// --- Users ---
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/users`);
|
||||
if (!res.ok) return;
|
||||
const users = await res.json();
|
||||
const container = document.getElementById('user-pills');
|
||||
container.innerHTML = '';
|
||||
users.forEach(user => {
|
||||
const pill = document.createElement('button');
|
||||
pill.className = `user-pill border rounded-full px-4 py-1.5 text-sm ${selectedUserIds.includes(user.id) ? 'active' : ''}`;
|
||||
pill.textContent = user.name;
|
||||
pill.onclick = () => toggleUser(user.id, pill);
|
||||
container.appendChild(pill);
|
||||
});
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function toggleUser(userId, pill) {
|
||||
if (selectedUserIds.includes(userId)) {
|
||||
if (selectedUserIds.length > 1) {
|
||||
selectedUserIds = selectedUserIds.filter(id => id !== userId);
|
||||
pill.classList.remove('active');
|
||||
}
|
||||
} else {
|
||||
selectedUserIds.push(userId);
|
||||
pill.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// --- Mood / Recommendations ---
|
||||
|
||||
async function findMovies() {
|
||||
const mood = document.getElementById('mood-input').value.trim();
|
||||
if (!mood) return;
|
||||
|
||||
document.getElementById('empty-state').classList.add('hidden');
|
||||
document.getElementById('results').classList.add('hidden');
|
||||
document.getElementById('error-state').classList.add('hidden');
|
||||
document.getElementById('loading').classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const additionalIds = selectedUserIds.filter(id => id !== currentUser.id);
|
||||
const res = await fetch(`${API}/api/mood`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mood, additional_user_ids: additionalIds })
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ detail: 'Something went wrong' }));
|
||||
throw new Error(err.detail || 'Failed to get recommendations');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
renderResults(data);
|
||||
} catch (err) {
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('error-message').textContent = err.message;
|
||||
document.getElementById('error-state').classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function renderResults(data) {
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
|
||||
const grid = document.getElementById('results-grid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
if (!data.recommendations || data.recommendations.length === 0) {
|
||||
document.getElementById('empty-state').classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
data.recommendations.forEach(movie => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'movie-card bg-dark-200 rounded-xl overflow-hidden border border-gray-800';
|
||||
card.innerHTML = `
|
||||
<div class="aspect-[2/3] bg-dark-300 relative">
|
||||
<img src="${movie.poster_url}" alt="${movie.title}"
|
||||
class="w-full h-full object-cover"
|
||||
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||
<div class="absolute inset-0 flex items-center justify-center text-gray-600 text-lg font-semibold" style="display:none;">
|
||||
${movie.title}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-lg leading-tight">${movie.title}</h3>
|
||||
<div class="flex items-center gap-2 mt-1 text-sm text-gray-400">
|
||||
${movie.year ? `<span>${movie.year}</span>` : ''}
|
||||
${movie.runtime_minutes ? `<span>· ${movie.runtime_minutes}m</span>` : ''}
|
||||
${movie.community_rating ? `<span>· ★ ${movie.community_rating.toFixed(1)}</span>` : ''}
|
||||
${movie.content_rating ? `<span>· ${movie.content_rating}</span>` : ''}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-2">
|
||||
${movie.genres.slice(0, 3).map(g => `<span class="genre-pill">${g}</span>`).join('')}
|
||||
</div>
|
||||
<p class="text-sm text-gray-400 mt-3 italic leading-relaxed">${movie.reasoning}</p>
|
||||
<a href="${movie.deep_link}" target="_blank"
|
||||
class="block mt-4 text-center py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors text-sm">
|
||||
Watch
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
const meta = data.meta;
|
||||
document.getElementById('results-meta').textContent =
|
||||
`Evaluated ${meta.candidates_evaluated} of ${meta.total_unwatched} unwatched movies in ${(meta.processing_time_ms / 1000).toFixed(1)}s`;
|
||||
|
||||
document.getElementById('results').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// --- Library Stats ---
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/library/stats`);
|
||||
if (!res.ok) return;
|
||||
const stats = await res.json();
|
||||
document.getElementById('library-stats').textContent =
|
||||
`${stats.total_movies} movies in library${stats.last_sync ? ` · Last synced ${new Date(stats.last_sync).toLocaleString()}` : ''}`;
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
async function refreshLibrary() {
|
||||
document.getElementById('refresh-btn').textContent = 'Syncing...';
|
||||
try {
|
||||
await fetch(`${API}/api/library/sync`, { method: 'POST' });
|
||||
setTimeout(loadStats, 5000);
|
||||
} catch { /* ignore */ }
|
||||
setTimeout(() => {
|
||||
document.getElementById('refresh-btn').textContent = 'Refresh Library';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// --- Event Listeners ---
|
||||
|
||||
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const errorEl = document.getElementById('login-error');
|
||||
errorEl.classList.add('hidden');
|
||||
try {
|
||||
await login(
|
||||
document.getElementById('login-username').value,
|
||||
document.getElementById('login-password').value
|
||||
);
|
||||
} catch (err) {
|
||||
errorEl.textContent = err.message;
|
||||
errorEl.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('find-btn').addEventListener('click', findMovies);
|
||||
document.getElementById('mood-input').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') findMovies();
|
||||
});
|
||||
document.getElementById('logout-btn').addEventListener('click', logout);
|
||||
document.getElementById('refresh-btn').addEventListener('click', refreshLibrary);
|
||||
|
||||
// --- Init ---
|
||||
checkAuth();
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Movie Night</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="/styles.css">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
dark: { 50: '#f8fafc', 100: '#1e293b', 200: '#1a2332', 300: '#151d2b', 400: '#111827', 500: '#0d1320' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-dark-400 text-gray-100 min-h-screen">
|
||||
<div id="app" class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Login Screen -->
|
||||
<div id="login-screen" class="hidden flex flex-col items-center justify-center min-h-[80vh]">
|
||||
<h1 class="text-4xl font-bold mb-2">Movie Night</h1>
|
||||
<p class="text-gray-400 mb-8">Sign in with your Jellyfin account</p>
|
||||
<form id="login-form" class="w-full max-w-sm space-y-4">
|
||||
<input type="text" id="login-username" placeholder="Username"
|
||||
class="w-full px-4 py-3 bg-dark-200 border border-gray-700 rounded-lg focus:outline-none focus:border-indigo-500 text-gray-100">
|
||||
<input type="password" id="login-password" placeholder="Password"
|
||||
class="w-full px-4 py-3 bg-dark-200 border border-gray-700 rounded-lg focus:outline-none focus:border-indigo-500 text-gray-100">
|
||||
<button type="submit"
|
||||
class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors">
|
||||
Sign In
|
||||
</button>
|
||||
<p id="login-error" class="text-red-400 text-sm text-center hidden"></p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Main App Screen -->
|
||||
<div id="main-screen" class="hidden">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h1 class="text-3xl font-bold">Movie Night</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<span id="user-name" class="text-gray-400 text-sm"></span>
|
||||
<button id="logout-btn"
|
||||
class="text-sm text-gray-500 hover:text-gray-300 transition-colors">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Picker -->
|
||||
<div id="user-picker" class="mb-6">
|
||||
<p class="text-sm text-gray-400 mb-2">Show unwatched by:</p>
|
||||
<div id="user-pills" class="flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Mood Input -->
|
||||
<div class="mb-8">
|
||||
<div class="relative">
|
||||
<input type="text" id="mood-input" placeholder="What are you in the mood for?"
|
||||
class="w-full px-5 py-4 bg-dark-200 border border-gray-700 rounded-xl text-lg focus:outline-none focus:border-indigo-500 text-gray-100 pr-24">
|
||||
<button id="find-btn"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 px-5 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors text-sm">
|
||||
Find Movies
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mt-2">
|
||||
Try: "pizza night with the kids" · "something scary" · "light fun movie after a hard week" · "80s action"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="loading" class="hidden">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="skeleton-card bg-dark-200 rounded-xl h-96 animate-pulse"></div>
|
||||
<div class="skeleton-card bg-dark-200 rounded-xl h-96 animate-pulse delay-100"></div>
|
||||
<div class="skeleton-card bg-dark-200 rounded-xl h-96 animate-pulse delay-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div id="results" class="hidden">
|
||||
<div id="results-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>
|
||||
<div id="results-meta" class="mt-6 text-center text-gray-500 text-sm"></div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="empty-state" class="text-center py-16">
|
||||
<p class="text-gray-500 text-lg">Describe what you're in the mood for and we'll find the perfect movie from your library.</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="error-state" class="hidden text-center py-16">
|
||||
<p class="text-red-400 text-lg" id="error-message"></p>
|
||||
<button onclick="document.getElementById('error-state').classList.add('hidden'); document.getElementById('empty-state').classList.remove('hidden');"
|
||||
class="mt-4 text-sm text-gray-400 hover:text-gray-200">Try again</button>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-12 pt-6 border-t border-gray-800 flex items-center justify-between text-sm text-gray-600">
|
||||
<span id="library-stats"></span>
|
||||
<button id="refresh-btn" class="hover:text-gray-400 transition-colors">Refresh Library</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
.delay-100 { animation-delay: 100ms; }
|
||||
.delay-200 { animation-delay: 200ms; }
|
||||
|
||||
.movie-card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.movie-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.genre-pill {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
color: #a5b4fc;
|
||||
}
|
||||
|
||||
.user-pill {
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.user-pill.active {
|
||||
background: rgba(99, 102, 241, 0.3);
|
||||
border-color: #6366f1;
|
||||
color: #c7d2fe;
|
||||
}
|
||||
.user-pill:not(.active) {
|
||||
background: transparent;
|
||||
border-color: #374151;
|
||||
color: #6b7280;
|
||||
}
|
||||
Reference in New Issue
Block a user