feat: status indicators in header for tmdb & torrentio

assets/bootstrap.js

@@ -5,6 +5,7 @@ import DownloadOptionTr from './components/download-option-tr.js';
 import DownloadListRow from './components/download-list-row.js';
 import MonitorListRow from './components/monitor-list-row.js';
 import MovieContainer   from "./components/movie-container.js";
+import StatusCheckerSpan from "./components/status-checker-span.js";
 
 import { startStimulusApp } from '@symfony/stimulus-bundle';
 import Popover from '@stimulus-components/popover';
@@ -24,3 +25,4 @@ customElements.define('movie-container', MovieContainer);
 customElements.define('dl-tr', DownloadOptionTr, {extends: 'tr'});
 customElements.define('download-list-row', DownloadListRow, {extends: 'tr'});
 customElements.define('monitor-list-row', MonitorListRow, {extends: 'tr'});
+customElements.define('status-checker-span', StatusCheckerSpan, {extends: 'span'});

assets/components/status-checker-span.js

@@ -0,0 +1,40 @@
+export default class PreviewContentDialog extends HTMLSpanElement {
+    #url;
+    #service;
+    #status;
+
+    #statusTexts = {
+        200: 'up',
+        204: 'up'
+    }
+
+    #statusColors = {
+        200: 'bg-green-500',
+        204: 'bg-green-500'
+    }
+
+    constructor() {
+        super();
+        this.#url = this.getAttribute('url');
+        this.#service = this.getAttribute('service');
+
+        (async () => await this.checkStatus())();
+        setInterval(async () => await this.checkStatus(), 1000 * 60 * 10);
+    }
+
+    async checkStatus() {
+        const response = await fetch(this.#url);
+        this.#status = response.status;
+        this.setAttribute('title', this.getTitle());
+        this.classList.remove('bg-red-500', 'bg-green-500');
+        this.classList.add(this.getColor());
+    }
+
+    getTitle() {
+        return `${this.#service} is ${this.#statusTexts[this.#status] ?? 'down'}`
+    }
+
+    getColor() {
+        return this.#statusColors[this.#status] ?? 'bg-red-500';
+    }
+}

tailwind.config.js

@@ -18,9 +18,13 @@ module.exports = {
       "bg-green-400",
       "bg-purple-400",
       "bg-orange-400",
+      "bg-red-500",
+      "bg-green-500",
       "bg-blue-600",
       "bg-rose-600",
       "bg-black/20",
+      "text-red-500",
+      "text-green-500",
       "alert-success",
       "alert-warning",
       "font-bold",

templates/components/Header.html.twig

@@ -6,6 +6,20 @@
             <div class="md:flex md:items-center md:gap-12">
                 <nav aria-label="Global" class="md:block">
                     <ul class="ml-4 flex items-end md:items-center md:gap-6 text-sm">
+                        <li>
+                            <div class="flex flex-row justify-center items-start gap-2 p-2 w-10 mt-1 h-6 rounded-lg border border-orange-500 text-orange-500">
+                                <status-checker-span
+                                        class="h-2 w-2 rounded-full text-green-600 bg-green-600"
+                                        url="https://torrentio.strem.fun"
+                                        service="Torrentio">
+                                </status-checker-span>
+                                <status-checker-span
+                                        class="h-2 w-2 rounded-full text-green-600 bg-green-600"
+                                        url="https://api.themoviedb.org/3"
+                                        service="TMDB">
+                                </status-checker-span>
+                            </div>
+                        </li>
                         <li>
                             <a href="{{ path('app.monitor.upcoming-episodes') }}" data-turbo="false" title="View upcoming episodes of the shows you're subscribed to.">
                                 <twig:ux:icon name="solar:calendar-linear" width="25px" class="text-orange-500" />