Phase 3: HTMX & Alpine.js integration, router refactoring, and UI modernization

- Modernized the frontend with HTMX for server-driven UI and Alpine.js for client state.
- Refactored anime, player, and recommendation logic into modular routers.
- Updated README.md to reflect the latest project state and technologies (v2.4).
- Added Plyr.io for an improved streaming experience.
- Improved project structure with componentized templates.
- Added Playwright and Vitest configuration for frontend testing.

templates/components/episode_list.html

@@ -0,0 +1,131 @@
+<div class="episode-list-container card" x-data="{ view: 'grid' }">
+    <div class="episode-header">
+        <div class="header-info">
+            <h3>{{ anime_title }}</h3>
+            <span class="episode-count">{{ episodes|length }} épisodes disponibles</span>
+        </div>
+        <div class="header-actions">
+            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'active': view === 'grid' }">
+                <i class="fas fa-th"></i>
+            </button>
+            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'active': view === 'list' }">
+                <i class="fas fa-list"></i>
+            </button>
+            <button class="btn btn-close" onclick="document.getElementById('player-container').innerHTML = ''">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </div>
+
+    <div class="episodes-content" :class="'view-' + view">
+        {% if episodes %}
+            {% for ep in episodes %}
+                <div class="episode-item">
+                    <div class="ep-number">EP {{ ep.episode_number or loop.index }}</div>
+                    <div class="ep-title" title="{{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}">
+                        {{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
+                    </div>
+                    <div class="ep-actions">
+                        <button class="btn-play-small" 
+                                hx-get="/api/player/embed?url={{ ep.url | urlencode }}" 
+                                hx-target="#video-player-display"
+                                hx-swap="innerHTML"
+                                onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
+                            <i class="fas fa-play"></i> Regarder
+                        </button>
+                        <button class="btn-download-small"
+                                hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
+                                hx-swap="none">
+                            <i class="fas fa-download"></i>
+                        </button>
+                    </div>
+                </div>
+            {% endfor %}
+        {% else %}
+            <p class="empty-msg">Aucun épisode trouvé pour ce lien.</p>
+        {% endif %}
+    </div>
+
+    <!-- Zone d'affichage du player vidéo -->
+    <div id="video-player-display"></div>
+</div>
+
+<style>
+.episode-list-container {
+    margin-top: 20px;
+    background: #1e1e2e;
+    border: 1px solid #333;
+    padding: 20px;
+    animation: fadeIn 0.3s ease-out;
+}
+.episode-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #333;
+}
+.episode-header h3 { margin: 0; color: #00d9ff; }
+.episode-count { font-size: 0.8rem; color: #888; }
+
+.episodes-content.view-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 10px;
+}
+.view-grid .episode-item {
+    background: #252538;
+    padding: 15px;
+    border-radius: 8px;
+    text-align: center;
+    transition: all 0.2s;
+}
+.view-grid .episode-item:hover { background: #2d2d4a; transform: translateY(-2px); }
+.view-grid .ep-title { display: none; }
+.view-grid .ep-number { font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; }
+
+.episodes-content.view-list {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.view-list .episode-item {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    background: #252538;
+    padding: 10px 15px;
+    border-radius: 6px;
+}
+.view-list .ep-number { font-weight: bold; width: 50px; }
+.view-list .ep-title { flex: 1; color: #ccc; }
+
+.btn-play-small {
+    background: #00d9ff;
+    color: #000;
+    border: none;
+    padding: 5px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+.btn-download-small {
+    background: transparent;
+    color: #888;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.btn-download-small:hover { color: #fff; border-color: #fff; }
+
+#video-player-display:not(:empty) {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 2px dashed #333;
+}
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+</style>