root
5c7116557d
- 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
55 lines
2.4 KiB
HTML
55 lines
2.4 KiB
HTML
<div class="downloads-grid"
|
|
hx-get="/api/downloads?html=true"
|
|
hx-trigger="every 2s"
|
|
hx-swap="innerHTML">
|
|
{% if tasks %}
|
|
{% for task_id, task in tasks.items() %}
|
|
<div class="download-item task-{{ task.status }}">
|
|
<div class="download-info">
|
|
<span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
|
|
<span class="badge badge-{{ task.status }}">{{ task.status }}</span>
|
|
</div>
|
|
|
|
<div class="progress-container">
|
|
<div class="progress-bar" style="width: {{ task.progress }}%"></div>
|
|
</div>
|
|
|
|
<div class="download-meta">
|
|
<span>{{ task.progress | round(1) }}%</span>
|
|
<span>{{ task.download_speed }}</span>
|
|
<span>{{ task.eta }}</span>
|
|
</div>
|
|
|
|
<div class="download-actions">
|
|
{% if task.status == 'downloading' or task.status == 'pending' %}
|
|
<button class="btn-icon" hx-post="/api/downloads/{{ task_id }}/pause" hx-swap="none">
|
|
<i class="fas fa-pause"></i>
|
|
</button>
|
|
{% elif task.status == 'paused' %}
|
|
<button class="btn-icon" hx-post="/api/downloads/{{ task_id }}/resume" hx-swap="none">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if task.status == 'completed' %}
|
|
<a href="/video/{{ task_id }}" class="btn-icon success">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<button class="btn-icon danger"
|
|
hx-delete="/api/downloads/{{ task_id }}"
|
|
hx-confirm="Supprimer ce téléchargement ?"
|
|
hx-swap="none">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>Aucun téléchargement en cours</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|