root
9f9df600c1
- Route GET /api/downloads/video/{task_id} pour streamer les videos
- Route POST /api/downloads/{task_id}/retry pour relancer les failed
- Route POST /api/downloads/cancel-all pour annuler tous les actifs
- Barre de progression animee (shimmer + pulse)
- Indicateurs visuels par status (bordures colorees)
- Bouton Retry pour telechargements echoues/annules
- Actions groupees (Nettoyer termines, Tout annuler)
- Compteur de telechargements actifs
- hx-on::after-request pour refresh auto
Closes #17, Closes #8
67 lines
3.5 KiB
HTML
67 lines
3.5 KiB
HTML
{% if tasks %}
|
|
<div class="downloads-grid">
|
|
{% for task in tasks %}
|
|
<div class="download-item status-{{ task.status }}">
|
|
<div class="download-info">
|
|
<span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
|
|
<span class="badge badge-{{ task.status }}">{{ task.status | upper }}</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.speed or '0' }} KB/s</span>
|
|
<span>{{ task.eta or '' }}</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"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Pause">
|
|
<i class="fas fa-pause"></i>
|
|
</button>
|
|
{% elif task.status == 'paused' %}
|
|
<button class="btn-icon success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Reprendre">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if task.status == 'failed' or task.status == 'cancelled' %}
|
|
<button class="btn-icon warning" hx-post="/api/downloads/{{ task.id }}/retry" hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Relancer">
|
|
<i class="fas fa-redo"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if task.status == 'completed' %}
|
|
<a href="/api/downloads/video/{{ task.id }}" class="btn-icon success" title="Streamer">
|
|
<i class="fas fa-play-circle"></i>
|
|
</a>
|
|
<a href="/downloads/{{ task.filename }}" class="btn-icon" download title="Telecharger">
|
|
<i class="fas fa-file-download"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<button class="btn-icon danger"
|
|
hx-delete="/api/downloads/{{ task.id }}"
|
|
hx-confirm="Supprimer ce telechargement ?"
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')"
|
|
title="Supprimer">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state" style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
|
|
<i class="fas fa-cloud-download-alt" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.1; display: block;"></i>
|
|
<p>Aucun telechargement en cours</p>
|
|
</div>
|
|
{% endif %}
|