feat: frontend modernization with HTMX, Alpine.js and Plyr (Phase 3)
- 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
@@ -2,53 +2,67 @@
|
||||
<p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
|
||||
|
||||
<!-- User info and logout button -->
|
||||
<div id="userInfo" style="display: none; margin-bottom: 15px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; justify-content: space-between; align-items: center;">
|
||||
<div id="userInfo"
|
||||
x-show="isAuthenticated"
|
||||
x-cloak
|
||||
style="margin-bottom: 15px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<span style="color: #00d9ff;">👤</span>
|
||||
<span style="color: #fff; font-size: 14px;">Connecté en tant que <strong id="currentUser" style="color: #00d9ff;">-</strong></span>
|
||||
<span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: #00d9ff;">-</strong></span>
|
||||
</div>
|
||||
<button class="btn-secondary btn-small" onclick="handleLogout()" style="padding: 5px 15px; font-size: 12px;">
|
||||
<button class="btn-secondary btn-small"
|
||||
hx-post="/api/auth/logout"
|
||||
hx-on::after-request="isAuthenticated = false; window.location.reload()"
|
||||
style="padding: 5px 15px; font-size: 12px;">
|
||||
🚪 Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Login prompt (shown when not logged in) -->
|
||||
<div id="loginPrompt" style="display: none; margin-bottom: 15px; padding: 15px; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 8px; text-align: center;">
|
||||
<div id="loginPrompt"
|
||||
x-show="!isAuthenticated"
|
||||
x-cloak
|
||||
style="margin-bottom: 15px; padding: 15px; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 8px; text-align: center;">
|
||||
<p style="color: #00d9ff; margin: 0 0 10px 0;">👋 Bienvenue! <a href="/login" style="color: #00d9ff; text-decoration: underline;">Connectez-vous</a> pour télécharger des vidéos</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs - Hidden by default, shown only when authenticated -->
|
||||
<div id="mainTabs" class="tabs" style="visibility: hidden;">
|
||||
<button class="tab active" data-tab-type="home" onclick="switchTab('home')">
|
||||
<!-- Tabs - Shown only when authenticated -->
|
||||
<div id="mainTabs" class="tabs" x-show="isAuthenticated" x-cloak style="visibility: visible;">
|
||||
<button class="tab" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
Accueil
|
||||
</button>
|
||||
<button class="tab" data-tab-type="anime" onclick="switchTab('anime')">
|
||||
<button class="tab" :class="{ 'active': activeTab === 'anime' }" @click="activeTab = 'anime'">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
Anime
|
||||
</button>
|
||||
<button class="tab" data-tab-type="series" onclick="switchTab('series')">
|
||||
<button class="tab" :class="{ 'active': activeTab === 'series' }" @click="activeTab = 'series'">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
|
||||
</svg>
|
||||
Série
|
||||
</button>
|
||||
<button class="tab" data-tab-type="providers" onclick="switchTab('providers')">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
Fournisseurs
|
||||
</button>
|
||||
<button class="tab" data-tab-type="watchlist" onclick="switchTab('watchlist')">
|
||||
<button class="tab" :class="{ 'active': activeTab === 'watchlist' }" @click="activeTab = 'watchlist'">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
|
||||
</svg>
|
||||
Watchlist
|
||||
</button>
|
||||
<!-- Provider tabs will be loaded dynamically after the static tabs -->
|
||||
<button class="tab" :class="{ 'active': activeTab === 'downloads' }" @click="activeTab = 'downloads'">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
||||
</svg>
|
||||
Téléchargements
|
||||
</button>
|
||||
<button class="tab" :class="{ 'active': activeTab === 'providers' }" @click="activeTab = 'providers'">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
Fournisseurs
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user