From eecd5444a665e70e8f872c340f39dd0d2b4a47b2 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Wed, 14 May 2025 11:33:20 -0500
Subject: [PATCH] fix: uses progress bar to show download progress

---
 templates/broadcast/Download.stream.html.twig | 6 +++---
 templates/components/DownloadList.html.twig   | 9 ++++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/templates/broadcast/Download.stream.html.twig b/templates/broadcast/Download.stream.html.twig
index 6b6903c..913d45b 100644
--- a/templates/broadcast/Download.stream.html.twig
+++ b/templates/broadcast/Download.stream.html.twig
@@ -31,9 +31,9 @@
                     {{ entity.title }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
-                    <span class="p-1.5 bg-purple-600 rounded-full">
-                        <span class="mw-4 inline-block text-center text-gray-50">{{ entity.progress }}</span>
-                    </span>
+                    <div class="border-2 border-green-700 rounded-md w-full h-6 align-middle overflow-hidden">
+                        <div class="text-green-700 rounded-sm text-bold text-gray-950 text-center bg-green-600 h-5" style="width:{{ entity.progress }}%">{{ entity.progress }}%</div>
+                    </div>
                 </td>
             </template>
         </turbo-stream>
diff --git a/templates/components/DownloadList.html.twig b/templates/components/DownloadList.html.twig
index c8ed30e..2c87bca 100644
--- a/templates/components/DownloadList.html.twig
+++ b/templates/components/DownloadList.html.twig
@@ -44,9 +44,12 @@
 
                     <td class="px-6 py-4 whitespace-nowrap text-sm align-middle text-gray-800 dark:text-gray-50">
                         {% if download.progress < 100 %}
-                        <div class="w-[3.25ch] h-[3.25ch] bg-purple-600 rounded-full block text-center table-cell align-middle text-xs text-gray-50">
-                            {{ download.progress }}
-                        </div>
+                            <div class="border-2 border-green-700 rounded-md w-full h-6 align-middle overflow-hidden">
+                                <div class="text-green-700 rounded-sm text-bold text-gray-950 text-center bg-green-600 h-5" style="width:{{ download.progress }}%">{{ download.progress }}%</div>
+                            </div>
+{#                        <div class="w-[3.25ch] h-[3.25ch] bg-purple-600 rounded-full block text-center table-cell align-middle text-xs text-gray-50">#}
+{#                            {{ download.progress }}#}
+{#                        </div>#}
                         {% else %}
                             <twig:StatusBadge color="green" status="Completed" />
                         {% endif %}