feat: frontend modernization with HTMX, Alpine.js and Plyr (Phase 3)
CI / Test (Python 3.11) (push) Has been cancelled
CI / Test (Python 3.12) (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Type Check (push) Has been cancelled
CI / Summary (push) Has been cancelled

- Integrated HTMX for server-driven UI updates and fragments
- Adopted Alpine.js for global reactive state and tab management
- Replaced legacy player with Plyr.io for premium streaming experience
- Implemented real-time download polling via HTMX
- Added server-sent Toast notification system
- Fixed navigation and authentication scoping issues
This commit is contained in:
root
2026-03-24 11:10:22 +00:00
parent 2b4cc617cb
commit 5c7116557d
17 changed files with 584 additions and 690 deletions
+6 -41
View File
@@ -91,8 +91,12 @@ async function checkAuth() {
if (response.ok) {
const data = await response.json();
showUserInfo(data.user);
showMainContent();
// Dispatch event for Alpine.js global state
window.dispatchEvent(new CustomEvent('auth-success', {
detail: { username: data.user.full_name || data.user.username }
}));
return true;
} else {
// Token invalid, remove it and redirect
@@ -116,45 +120,6 @@ function redirectToLogin() {
}
}
// Show user info when authenticated
function showUserInfo(user) {
const userInfo = document.getElementById('userInfo');
const loginPrompt = document.getElementById('loginPrompt');
const mainTabs = document.getElementById('mainTabs');
const currentUser = document.getElementById('currentUser');
if (userInfo) userInfo.style.display = 'flex';
if (loginPrompt) loginPrompt.style.display = 'none';
if (mainTabs) mainTabs.style.visibility = 'visible';
if (currentUser) currentUser.textContent = user.full_name || user.username;
}
// Show main content (only when authenticated)
function showMainContent() {
const mainContent = document.getElementById('main-content');
if (mainContent) mainContent.style.display = 'block';
}
// Hide main content (when not authenticated)
function hideMainContent() {
const mainContent = document.getElementById('main-content');
if (mainContent) mainContent.style.display = 'none';
}
// Show login prompt when not authenticated (not used anymore - we redirect instead)
function showLoginPrompt() {
const userInfo = document.getElementById('userInfo');
const loginPrompt = document.getElementById('loginPrompt');
const mainTabs = document.getElementById('mainTabs');
if (userInfo) userInfo.style.display = 'none';
if (loginPrompt) loginPrompt.style.display = 'block';
if (mainTabs) mainTabs.style.visibility = 'hidden';
// Hide main content
hideMainContent();
}
// Handle logout
async function handleLogout() {
if (!confirm('Êtes-vous sûr de vouloir vous déconnecter?')) {