Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: boutons telechargement fonctionnels + refonte UI downloads (#17, #8)

Browse Source 
- 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
This commit is contained in:
root
2026-04-02 22:35:49 +00:00
parent 5d264d8f3b
commit 9f9df600c1
4 changed files with 172 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/downloads_list.html
+18 -8
View File
@@ -1,7 +1,7 @@
{% if tasks %}
<div class="downloads-grid">
{% for task in tasks %}
<div class="download-item task-{{ task.status }}">
<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>
@@ -19,28 +19,38 @@
<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">
<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">
<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="/video/{{ task.id }}" class="btn-icon success" title="Voir la vidéo">
<i class="fas fa-external-link-alt"></i>
<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="Télécharger le fichier">
<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 téléchargement ?"
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>
@@ -51,6 +61,6 @@
{% 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 téléchargement en cours</p>
<p>Aucun telechargement en cours</p>
</div>
{% endif %}
templates/components/downloads_section.html
+20 -4
View File
@@ -1,12 +1,20 @@
<div class="section-container">
<div class="section-header">
<h2>📥 Téléchargements</h2>
<h2>Telechargements <span id="activeDownloadsCount" class="active-downloads-counter" style="display:none;">(0 actif)</span></h2>
<div class="header-actions">
<button class="btn btn-sm btn-secondary"
hx-post="/api/downloads/cleanup"
hx-swap="none"
hx-confirm="Nettoyer tous les telechargements termines ?"
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')">
Nettoyer terminés
<i class="fas fa-broom"></i> Nettoyer termines
</button>
<button class="btn btn-sm btn-danger"
hx-post="/api/downloads/cancel-all"
hx-swap="none"
hx-confirm="Annuler tous les telechargements actifs ?"
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')">
<i class="fas fa-stop-circle"></i> Tout annuler
</button>
</div>
</div>
@@ -17,12 +25,20 @@
hx-trigger="load, refresh, every 3s"
hx-swap="innerHTML">
<div class="loading-placeholder">
<div class="spinner"></div> Chargement des téléchargements...
<div class="spinner"></div> Chargement des telechargements...
</div>
</div>
</div>
<style>
.section-container { margin-bottom: 40px; }
/* Styles already defined or moved to downloads_list.html */
.active-downloads-counter {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary);
background: rgba(0, 217, 255, 0.1);
padding: 2px 10px;
border-radius: 12px;
margin-left: 10px;
}
</style>