Version 2.0.0

2026-04-22 20:26:00 +02:00
parent 6faf207246
commit 5ac9dee8fc
10 changed files with 398 additions and 119 deletions
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <title>CANCOM Simple Signage Admin</title>
+<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">

 <!-- Tabler CSS -->
 <link rel="stylesheet"
@@ -34,7 +35,7 @@

  /* CANCOM CI – Variante 1 */
  .card-header {
-    background-color: #ffffff;
+    background-color: #eeeeee;
    border-left: 6px solid #DA002D;
    padding-left: 1rem;
    font-weight: 600;
@@ -101,9 +102,24 @@
  <!-- Header -->
  <header class="navbar navbar-expand-md">
    <div class="container-xl">
-      <span class="navbar-brand">CANCOM Simple Signage Admin</span>
-      <div class="navbar-nav ms-auto">
-        <a href="/logout" class="nav-link text-white">Logout</a>
+      
+  <a class="navbar-brand d-flex align-items-center"
+     href="/admin">
+
+    <img src="{{ url_for('static', filename='cancom.svg') }}"
+        alt="CANCOM"
+        height="32"
+        class="me-2">
+
+    <!--<span class="text-white fw-semibold">-->
+      <span class="page-pretitle text-white">
+      Admin Dashboard
+      <h2 class="page-title text-white">Simple Signage</h2>
+    </span>
+  </a>s
+
+      <div class="d-none d-sm-inline">
+        <a href="/logout" class="btn">Logout</a>
      </div>
    </div>
  </header>
@@ -112,6 +128,88 @@
  <div class="page-wrapper">
    <div class="container-xl mt-4">

+  <!-- ========================= -->
+  <!-- PRIORITY / GLOBAL PLAYLIST -->
+  <!-- ========================= -->
+  <div class="card mb-4 border border-danger">
+    <div class="card-header d-flex justify-content-between align-items-center"
+         style="background:#fff5f5;">
+      <div>
+        <strong style="color:#DA002D;">
+          ⚠ PRIORITY (global)
+        </strong>
+      </div>
+      <span class="badge bg-success">wirkt auf alle Player</span>
+    </div>
+
+    <div class="card-body">
+      <p class="text-muted">
+        Inhalte dieser Playlist werden <strong>auf allen Playern</strong>
+        zusätzlich zur normalen Playlist angezeigt.
+        <br>
+        Die Wiedergabe erfolgt <strong>abwechselnd</strong>
+        (Normal → Priority → Normal → …).
+      </p>
+
+      <!-- Upload -->
+       <h4>Medien hochladen</h4>
+          <form action="/admin/upload/priority"
+                method="post" enctype="multipart/form-data">
+            <div class="input-group mb-3">
+              <input type="file" name="file" class="form-control" required>
+              <button class="btn btn-primary" type="submit">Upload</button>
+            </div>
+          </form>
+
+      <!-- Playlist -->
+        <h4>Playlist Reihenfolge</h4>
+
+        <ul class="list-group mb-3" id="playlist-priority">
+            {% for file in priority_files %}
+            <li class="list-group-item playlist-row"
+                data-file="{{ file.name }}">
+
+              <span class="playlist-name">{{ file.name }}</span>
+
+              {% if file.type == "image" %}
+                <span class="badge bg-blue-lt">Bild</span>
+              {% else %}
+                <span class="badge bg-orange-lt">Video</span>
+              {% endif %}
+
+              <span class="playlist-size">{{ file.size }} KB</span>
+
+              <!-- Delete -->
+              
+              <form action="{{url_for('delete_file',
+                              screen='priority',
+                              filename=file.name) }}"
+                  method="post"
+                  class="d-inline"
+                  onmousedown="event.stopPropagation()">
+                <button type="submit"
+                        class="btn btn-outline-danger btn-sm"
+                        onclick="return confirm('Datei wirklich löschen?')">
+                  Löschen
+                </button>
+              </form>
+
+
+              <!-- Drag -->
+              <span class="drag-handle" title="Reihenfolge ändern">⇅</span>
+            </li>
+            {% endfor %}
+          </ul>
+
+          <button class="btn btn-primary"
+                  onclick="savePlaylist('priority')">
+            Priority-Reihenfolge speichern
+          </button>
+
+        </div>
+      </div>
+
+
      {% for screen, cfg in screens.items() %}
      <div class="card mb-4">

@@ -157,7 +255,7 @@
          <hr>

          <!-- Upload -->
-          <h5>Medien hochladen</h5>
+          <h4>Medien hochladen</h4>
          <form action="/admin/upload/{{ screen }}"
                method="post" enctype="multipart/form-data">
            <div class="input-group mb-3">
@@ -167,7 +265,7 @@
          </form>

          <!-- Playlist -->
-          <h5>Playlist Reihenfolge</h5>
+          <h4>Playlist Reihenfolge</h4>

          <ul class="list-group mb-3" id="playlist-{{ screen }}">
            {% for file in media_files[screen] %}
@@ -215,7 +313,7 @@
  <!-- Footer -->
  <footer class="footer footer-transparent mt-4">
    <div class="container-xl text-muted">
-      © {{ year }} CANCOM · Version {{ version }} · {{ hostname }}
+      © {{ year }} CANCOM GmbH · Version {{ version }} · {{ hostname }}
    </div>
  </footer>

@@ -224,8 +322,8 @@
 <script>
 document.addEventListener("DOMContentLoaded", function () {

-  function initSortable(screen) {
-    const el = document.getElementById("playlist-" + screen);
+  function initSortable(name) {
+    const el = document.getElementById("playlist-" + name);
    if (!el || typeof Sortable === "undefined") return;

    new Sortable(el, {
@@ -236,6 +334,16 @@ document.addEventListener("DOMContentLoaded", function () {
    });
  }

+  // ✅ Normale Screens
+  {% for screen in screens.keys() %}
+    initSortable("{{ screen }}");
+  {% endfor %}
+
+  // ✅ Priority explizit
+  initSortable("priority");
+
+
+
  function savePlaylist(screen) {
    const items = document.querySelectorAll(
      "#playlist-" + screen + " li"
--- a/templates/login.html
+++ b/templates/login.html
--- a/templates/player.html
+++ b/templates/player.html
@@ -1,82 +1,158 @@
 <!doctype html>
 <html lang="de">
 <head>
-<meta charset="utf-8">
-<title>CANCOM Simple Signage Player</title>
+  <meta charset="utf-8">
+  <title>CANCOM Simple Signage Player</title>
+  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">

-<style>
-html, body {
-  margin: 0;
-  padding: 0;
-  background: black;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+      overflow: hidden;
+    }

-#image, #video {
-  position: fixed;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-  object-fit: contain;
-  background: black;
-}
-</style>
+    img, video {
+      width: 100vw;
+      height: 100vh;
+      object-fit: contain;
+      background: black;
+      display: none;
+    }
+  </style>
 </head>

 <body>

-<img id="image" hidden>
-<video id="video" hidden muted autoplay playsinline></video>
+<img id="image">
+<video id="video" muted autoplay playsinline></video>

 <script>
-const files = {{ files | tojson }};
-const interval = {{ interval }} * 1000;
-const screen = "{{ screen }}";
+/* -----------------------------
+   Daten vom Server
+----------------------------- */
+const normalFiles = {{ normal_files | tojson }};
+const prioFiles   = {{ prio_files   | tojson }};
+const interval    = {{ interval }} * 1000;
+const screen      = "{{ screen }}";
+
+/* -----------------------------
+   Player State
+----------------------------- */
+let normalIndex = 0;
+let prioIndex   = 0;
+let playPrioNext = false;
+let mode = "normal"; // "normal" oder "prio"

-let index = 0;
-let lastHash = null;

 const img = document.getElementById("image");
-const video = document.getElementById("video");
+const vid = document.getElementById("video");

-function isVideo(name) {
-  return name.toLowerCase().endsWith(".mp4");
+/* -----------------------------
+   Hilfsfunktionen
+----------------------------- */
+function isVideo(file) {
+  return file.toLowerCase().endsWith(".mp4");
 }

-function showNext() {
-  if (files.length === 0) return;

-  const file = files[index];
-  index = (index + 1) % files.length;
+function getNextItem() {

-  if (isVideo(file)) {
-    img.hidden = true;
-    video.hidden = false;
-    video.src = `/media/${screen}/${file}`;
-    video.load();
-    video.play();
+  // ✅ Sonderfall: nur Priority vorhanden
+  if (normalFiles.length === 0 && prioFiles.length > 0) {
+    return {
+      file: prioFiles[prioIndex++ % prioFiles.length],
+      isPrio: true
+    };
+  }
+
+  // ✅ Sonderfall: nur normale Playlist vorhanden
+  if (prioFiles.length === 0 && normalFiles.length > 0) {
+    return {
+      file: normalFiles[normalIndex++ % normalFiles.length],
+      isPrio: false
+    };
+  }
+
+  // ✅ Normal-Phase
+  if (mode === "normal") {
+    const file = normalFiles[normalIndex++];
+    if (normalIndex >= normalFiles.length) {
+      normalIndex = 0;
+      if (prioFiles.length > 0) {
+        mode = "prio"; // ➜ nach kompletter Normal-Playlist wechseln
+      }
+    }
+    return { file, isPrio: false };
+  }
+
+  // ✅ Priority-Phase
+  if (mode === "prio") {
+    const file = prioFiles[prioIndex++];
+    if (prioIndex >= prioFiles.length) {
+      prioIndex = 0;
+      mode = "normal"; // ➜ nach kompletter Priority zurück
+    }
+    return { file, isPrio: true };
+  }
+
+  return null;
+}
+
+
+
+/* -----------------------------
+   Medien abspielen
+----------------------------- */
+function playNext() {
+  const item = getNextItem();
+  if (!item) return;
+
+  const basePath = item.isPrio ? "priority" : screen;
+  const src = `/media/${basePath}/${item.file}`;
+
+  if (isVideo(item.file)) {
+    img.style.display = "none";
+    vid.style.display = "block";
+    vid.src = src;
+    vid.onended = playNext;
+    vid.play();
  } else {
-    video.pause();
-    video.hidden = true;
-    img.hidden = false;
-    img.src = `/media/${screen}/${file}`;
-    setTimeout(showNext, interval);
+    vid.pause();
+    vid.style.display = "none";
+    img.style.display = "block";
+    img.src = src;
+    setTimeout(playNext, interval);
  }
 }

-video.addEventListener("ended", showNext);
+/* -----------------------------
+   Auto-Reload bei Änderungen
+----------------------------- */
+let lastHash = null;

-async function checkForUpdate() {
-  const r = await fetch(`/playlist/${screen}/hash`, { cache: "no-store" });
-  const hash = await r.text();
-  if (lastHash && hash !== lastHash) location.reload();
-  lastHash = hash;
+async function checkForUpdates() {
+  try {
+    const res = await fetch(`/playlist/${screen}/hash`, { cache: "no-store" });
+    const hash = await res.text();
+
+    if (lastHash && lastHash !== hash) {
+      location.reload();
+    }
+    lastHash = hash;
+  } catch (e) {
+    console.warn("Playlist-Check fehlgeschlagen", e);
+  }
 }

-setInterval(checkForUpdate, 5000);
-showNext();
+/* -----------------------------
+   Start
+----------------------------- */
+playNext();
+setInterval(checkForUpdates, 5000);
 </script>

 </body>