wip: active downloads in header

README.md

@@ -1,41 +1,13 @@
-# Torsearch
-Torsearch is a "media acquisition tool" that works strictly with Real Debrid. Torsearch makes it easy to search for 
-and download your favorite movies and tv shows. You can think of it like Stremio, but without the streaming. Why the 
-comparison to Stremio? That's because Torsearch uses the same source for media files that Stremio uses: Torrentio 
-(hence the name: Torsearch).
-
-After two failed attempts at running a media server, I decided to hang up my hat and give up on my dream of a self-hosted 
-media server. I figured the days of torrenting were mostly over and everybody ranting & raving about their media collections 
-must be going to Walmart and buying up the bucket of old movies they have. That is until I stumbled across Stremio and 
-bookmarked it to read about after I got frustrated with whatever project I was working on at the time.
-
-Cue the day I got frustrated enough with that project and finally looked into Stremio. At first, it seemed too good to 
-be true, but I was yearning for something just sketchy enough to try out. What could go wrong with handing over my card information 
-to an unknown organization across the pond? At the end of the day, the cost benefit analysis landed in my favor, and about 
-30 minutes after purchasing my Real Debrid subscription and setting up Stremio on my laptop, I was in business.
-
-My mind was blown. I might not have the most "cultured" taste in media, but it had everything I searched for! After 
-watching a few movies, I noticed the "Copy Download Link" button. "What's this lil guy do?" I asked myself. Duh, it 
-downloads the fricking movie. And there's the 💡flashing over my head. There's gotta be a way to automate this, I told myself.
-
-After about a month of studying Stremio's code and lots of tinkering, I figured it out. Torrentio is the magic behind 
-the scenes. You feed it a Real Debrid API key and an IMDB ID, and it gives you a list of results to download that media. Easy peasy.
-
-In about an hour I had a proof of concept working. It wasn't pretty, but it wasn't supposed to be. That proof-of-concept 
-has blossomed into the beautiful Torsearch that I've been using nearly every day since then. The code in this repo 
-is a complete re-write of the proof-of-concept that started out ugly and ended up even uglier. Knowing the core functionality 
-required to make it work, I was able to re-write the app with some design patterns in place. It's now less ugly and quite 
-functional. If you dig deep enough, you'll stumble across some of that ugly code that surprisingly still works (why fix it if ain't broke?).
-
-## Pics or didn't happen
-
-
-## Features
-- Search for Movies & TV Shows by their name
-- Download directly to your NAS
-- Monitor TV Shows for new episodes and automatically download them
-- Browse popular media and click into it to view download options
+# Caldwell Digital - Symfony Template
+Get up and running quickly with this Symfony framework template!
 
 ## Getting Started
-1. Clone the repo
+1. Run `source bash/get_certs.sh` to grab the wildcard certs
+2. Set the docker image tag in the `bash/build.sh` file
+3. Set the docker image tag in the `deploy.compose.yml` file
+4. run `composer install`
 
+## Optional steps
+1. Set phing vars
+2. Update the project name in `build.xml`
+3. Set a custom development hostname in `bash/vhost.conf`

assets/icons/flowbite/download-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2m-1-5l-4 5l-4-5m9 8h.01"/></svg>

src/Twig/Components/Header.php

@@ -7,4 +7,8 @@ use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 #[AsTwigComponent]
 final class Header
 {
+    public function getActiveDownloads()
+    {
+        return [];
+    }
 }

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">
-                    <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>
+                    <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>
                 </td>
             </template>
         </turbo-stream>

templates/components/DownloadList.html.twig

@@ -44,12 +44,9 @@
 
                     <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="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>#}
+                        <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 %}

templates/components/Header.html.twig

@@ -4,11 +4,29 @@
             <twig:SearchBar />
             <div class="md:flex md:items-center md:gap-12">
                 <nav aria-label="Global" class="md:block">
-                    <ul class="flex items-center gap-6 text-sm">
-                        <li><twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/></li>
+                    <ul class="flex items-center align-middle gap-6 text-sm">
+                        <li id="active_download_notis" class="">
+                            <ul>
+                                {% if this.activeDownloads|length > 0 %}
+                                <li class="flex flex-col gap-1 align-middle">
+                                    <twig:ux:icon name="flowbite:download-outline" width="1.75rem" color="#f97316" class="border-2 border-orange-500 rounded-md p-1" />
+{#                                    {% include 'partial/alert-status.html.twig' %}#}
+{#                                    <div class="absolute" style="top: 3.5rem; right: 7rem; z-index: 1000;">#}
+{#                                        <div class="flex flex-col gap-1 bg-cyan-950 border-2 border-orange-500 text-white rounded-md p-3">#}
+{#                                            <h3>Inception</h3>#}
+{#                                            <div class="border-2 border-green-700 rounded-md w-full h-6 align-middle overflow-hidden">#}
+{#                                                <div class="rounded-sm text-bold text-center text-white bg-green-600 h-5" style="width:47%">47%</div>#}
+{#                                            </div>#}
+{#                                        </div>#}
+{#                                    </div>#}
+                                </li>
+                                {% endif %}
+                            </ul>
+                        </li>
+                        <li><twig:ux:icon name="fluent:alert-12-regular" width="2.5rem" class="text-orange-500 rounded-full p-2"/></li>
                         <li>
                             <a href="{{ path('app_logout') }}">
-                                <twig:ux:icon name="material-symbols:logout" width="25px" class="text-orange-500" />
+                                <twig:ux:icon name="material-symbols:logout" width="2rem" class="text-orange-500" />
                             </a>
                         </li>
                     </ul>

templates/partial/alert-status.html.twig

@@ -2,4 +2,4 @@
    to the Alert button, indicating there are unread alerts.
 #}
 
-<span style="position: absolute;width: 8px;height: 8px;background: greenyellow;border-radius: 5px; z-index: 1000;margin-left: 3px;margin-top: -5px;"></span>
+<span style="display: block;width: 8px;height: 8px;background: greenyellow;border-radius: 5px; z-index: 1000;margin-left: -10px;margin-bottom: -10px;"></span>