root
9f85908ff3
- 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.
132 lines
4.3 KiB
HTML
132 lines
4.3 KiB
HTML
<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>
|