Änderung Controller

app.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import os
+import time
 from pathlib import Path
 
 from flask import Flask, abort, jsonify, redirect, render_template, request, send_from_directory, url_for
@@ -17,6 +18,17 @@ ALLOWED_EXTENSIONS = {
 
 app = Flask(__name__)
 app.config["UPLOAD_FOLDER"] = str(UPLOAD_DIR)
+APP_VERSION = "1.0.0"
+
+
+@app.context_processor
+def inject_globals():
+    return {
+        "app_year": time.localtime().tm_year,
+        "app_version": APP_VERSION,
+        "app_host": request.host.split(":")[0],
+    }
+
 
 # ── Player State ──────────────────────────────────────────────────────
 player_state = {
@@ -27,6 +39,9 @@ player_state = {
     "volume": 1.0,
 }
 
+_display_last_seen = 0.0
+DISPLAY_TIMEOUT = 8
+
 
 def _bump():
     player_state["version"] += 1
@@ -102,7 +117,9 @@ def controller():
 # ── Player API ────────────────────────────────────────────────────────
 @app.route("/api/state")
 def api_state():
-    return jsonify(player_state)
+    resp = dict(player_state)
+    resp["display_online"] = (time.time() - _display_last_seen) < DISPLAY_TIMEOUT
+    return jsonify(resp)
 
 
 @app.route("/api/play", methods=["POST"])
@@ -179,6 +196,13 @@ def api_seek_ack():
     return jsonify({"ok": True})
 
 
+@app.route("/api/display/ping", methods=["POST"])
+def api_display_ping():
+    global _display_last_seen
+    _display_last_seen = time.time()
+    return jsonify({"ok": True})
+
+
 @app.route("/api/volume", methods=["POST"])
 def api_volume():
     data = request.get_json(silent=True) or {}

templates/controller.html

@@ -150,8 +150,12 @@
       color: var(--ccm-text);
     }
     .media-list .list-group-item.active {
-      background: var(--ccm-primary);
+      background: #e9ecef;
-      border-color: var(--ccm-primary);
+      border-color: #d9dee3;
+    }
+    [data-bs-theme="dark"] .media-list .list-group-item.active {
+      background: #2b3440;
+      border-color: #3a4555;
     }
     .upload-dropzone {
       border: 1.5px dashed var(--ccm-border);
@@ -202,9 +206,31 @@
     .control-btn {
       min-width: 3.2rem;
     }
+    .app-footer {
+      margin-top: 1rem;
+      padding: 0.65rem 1.5rem 0.95rem;
+      color: var(--ccm-muted);
+      font-size: 0.82rem;
+      background: transparent;
+    }
+    .app-footer-inner {
+      width: 100%;
+      max-width: 1320px;
+      margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.2rem 0.75rem;
+      justify-content: flex-start;
+      align-items: center;
+      text-align: left;
+    }
+    .app-footer-separator {
+      color: #b0b7c3;
+    }
     @media (max-width: 575.98px) {
       .control-btn { min-width: 2.8rem; font-size: 0.85rem; }
       .control-btn i { font-size: 1.1rem; }
+      .app-footer-inner { gap: 0.1rem 0.5rem; font-size: 0.75rem; }
     }
   </style>
 </head>
@@ -217,8 +243,8 @@
             <span class="navbar-brand-wordmark"><strong>Videoplayer</strong><span>Media Kiosk</span></span>
           </a>
           <div class="ms-auto d-flex align-items-center gap-2 flex-wrap justify-content-end">
-            <button type="button" class="topbar-metric theme-toggle" id="theme-toggle" aria-label="Theme wechseln"><i class="ti ti-moon-stars"></i><span>Theme</span></button>
+            <button type="button" class="topbar-metric theme-toggle" id="theme-toggle" aria-label="Theme wechseln"><i class="ti ti-moon-stars"></i></button>
-            <div class="topbar-metric"><i class="ti ti-circle-check-filled"></i><span>Online</span></div>
+            <div class="topbar-metric" id="online-indicator"><i class="ti ti-circle-check-filled"></i><span id="online-label">Online</span></div>
             <div class="topbar-metric"><i class="ti ti-device-tv"></i><span id="host-label">{{ request.host }}</span></div>
             <div class="topbar-metric"><i class="ti ti-clock-hour-4"></i><span id="clock-label">--:--</span></div>
           </div>
@@ -268,7 +294,7 @@
           </div>
 
           <!-- Media Library -->
-          <div class="card shadow-sm">
+          <div class="card shadow-sm mb-3">
             <div class="card-header">
               <div class="d-flex align-items-center gap-2">
                 <span class="avatar avatar-sm" style="background: var(--tblr-primary); color: #fff;"><i class="ti ti-photo-scan"></i></span>
@@ -276,7 +302,31 @@
               </div>
             </div>
             <div class="card-body">
-              <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data" class="mb-3">
+              <div class="mb-2 fw-medium">Dateien</div>
+              <div class="list-group media-list" id="media-list">
+                {% for item in items %}
+                <button type="button" class="list-group-item list-group-item-action d-flex align-items-center" data-name="{{ item.name }}" data-kind="{{ item.kind }}">
+                  <span class="text-truncate" style="min-width:0">{{ item.name }}</span>
+                  <span class="ms-auto d-flex align-items-center gap-1 flex-shrink-0">
+                    <span class="badge bg-secondary-lt text-secondary">{{ item.kind }}</span>
+                    <i class="ti ti-trash text-danger" style="cursor:pointer;font-size:1.05rem" onclick="event.stopPropagation(); apiDelete('{{ item.name }}')" title="Löschen"></i>
+                  </span>
+                </button>
+                {% endfor %}
+              </div>
+            </div>
+          </div>
+
+          <!-- Upload -->
+          <div class="card shadow-sm mb-3">
+            <div class="card-header">
+              <div class="d-flex align-items-center gap-2">
+                <span class="avatar avatar-sm" style="background: var(--tblr-primary); color: #fff;"><i class="ti ti-cloud-upload"></i></span>
+                <h3 class="card-title mb-0">Dateien hochladen</h3>
+              </div>
+            </div>
+            <div class="card-body">
+              <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
                 <input id="file-input" class="d-none" type="file" name="files" multiple accept="video/*,audio/*,image/*">
                 <div id="dropzone" class="upload-dropzone mb-2">
                   <div class="mb-1"><i class="ti ti-cloud-upload fs-2"></i></div>
@@ -287,33 +337,33 @@
                   <button type="submit" class="btn btn-primary"><i class="ti ti-upload me-1"></i>Hochladen</button>
                 </div>
               </form>
-
-              <div class="mb-2 fw-medium">Dateien</div>
-              <div class="list-group media-list" id="media-list">
-                {% for item in items %}
-                <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="{{ item.name }}" data-kind="{{ item.kind }}">
-                  <span class="text-truncate me-2">{{ item.name }}</span>
-                  <span>
-                    <span class="badge bg-secondary-lt text-secondary me-2">{{ item.kind }}</span>
-                    <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1" onclick="event.stopPropagation(); apiDelete('{{ item.name }}')" title="Löschen">
-                      <i class="ti ti-trash"></i>
-                    </button>
-                  </span>
-                </button>
-                {% endfor %}
-              </div>
             </div>
           </div>
+
         </div>
       </div>
     </div>
   </div>
 
+  <footer class="app-footer">
+    <div class="app-footer-inner">
+      <span>Videoplayer Media Kiosk</span>
+      <span class="app-footer-separator">|</span>
+      <span>&copy; {{ app_year }} CANCOM GmbH</span>
+      <span class="app-footer-separator">|</span>
+      <span>Version {{ app_version }}</span>
+      <span class="app-footer-separator">|</span>
+      <span>Host {{ app_host }}</span>
+    </div>
+  </footer>
+
   <script>
     const clockLabel = document.getElementById('clock-label');
     const themeToggle = document.getElementById('theme-toggle');
     const nowPlaying = document.getElementById('now-playing');
     const playStatus = document.getElementById('play-status');
+    const onlineIndicator = document.getElementById('online-indicator');
+    const onlineLabel = document.getElementById('online-label');
     const volumeSlider = document.getElementById('volume-slider');
     const volumeLabel = document.getElementById('volume-label');
     const fileInput = document.getElementById('file-input');
@@ -378,6 +428,17 @@
         clearHighlight();
       }
       updateVolume(state.volume);
+      updateOnline(state.display_online);
+    }
+
+    function updateOnline(online) {
+      if (online) {
+        onlineLabel.textContent = 'Online';
+        onlineIndicator.style.opacity = '1';
+      } else {
+        onlineLabel.textContent = 'Offline';
+        onlineIndicator.style.opacity = '0.5';
+      }
     }
 
     async function pollState() {
@@ -461,8 +522,8 @@
     function updateThemeToggle() {
       const theme = document.documentElement.getAttribute('data-bs-theme');
       themeToggle.innerHTML = theme === 'dark'
-        ? '<i class="ti ti-sun-high"></i><span>Theme</span>'
+        ? '<i class="ti ti-sun-high"></i>'
-        : '<i class="ti ti-moon-stars"></i><span>Theme</span>';
+        : '<i class="ti ti-moon-stars"></i>';
     }
 
     function toggleTheme() {

templates/display.html

@@ -172,9 +172,15 @@
       } catch (_) {}
     }
 
+    function heartbeat() {
+      fetch('/api/display/ping', { method: 'POST' }).catch(() => {});
+    }
+
     window.addEventListener('load', () => {
       poll();
+      heartbeat();
       setInterval(poll, 1500);
+      setInterval(heartbeat, 5000);
     });
   </script>
 </body>