erster Upload

.gitignore

@@ -0,0 +1,8 @@
+venv/
+__pycache__/
+test*
+*.old
+.venv/
+.DS_Store
+.vscode
+uploads

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 5008
+
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,250 @@
+from __future__ import annotations
+
+import os
+from pathlib import Path
+
+from flask import Flask, abort, jsonify, redirect, render_template, request, send_from_directory, url_for
+from werkzeug.utils import secure_filename
+
+
+BASE_DIR = Path(__file__).resolve().parent
+UPLOAD_DIR = Path(os.environ.get("UPLOAD_DIR", str(BASE_DIR / "uploads")))
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+ALLOWED_EXTENSIONS = {
+    "mp4", "webm", "ogg", "mp3", "wav", "m4a", "jpg", "jpeg", "png", "gif",
+}
+
+app = Flask(__name__)
+app.config["UPLOAD_FOLDER"] = str(UPLOAD_DIR)
+
+# ── Player State ──────────────────────────────────────────────────────
+player_state = {
+    "version": 0,
+    "current": None,
+    "playing": False,
+    "seek": 0,
+    "volume": 1.0,
+}
+
+
+def _bump():
+    player_state["version"] += 1
+
+
+def _set_current(name: str, kind: str):
+    player_state["current"] = {"name": name, "kind": kind}
+
+
+def _clear_seek():
+    player_state["seek"] = 0
+
+
+def _reset_seek():
+    player_state["seek"] = 0
+
+
+# ── Helpers ───────────────────────────────────────────────────────────
+def allowed_file(filename: str) -> bool:
+    return "." in filename and filename.rsplit(".", 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+def _kind_from_suffix(suffix: str) -> str:
+    suffix = suffix.lower()
+    if suffix in {"mp4", "webm", "ogg"}:
+        return "video"
+    if suffix in {"mp3", "wav", "m4a"}:
+        return "audio"
+    return "image"
+
+
+def media_items() -> list[dict[str, str]]:
+    items: list[dict[str, str]] = []
+    for entry in sorted(UPLOAD_DIR.iterdir(), key=lambda p: p.name.lower()):
+        if entry.is_file() and allowed_file(entry.name):
+            suffix = entry.suffix.lower().lstrip(".")
+            items.append({"name": entry.name, "kind": _kind_from_suffix(suffix)})
+    return items
+
+
+def _next_item(name: str) -> dict | None:
+    items = media_items()
+    for i, item in enumerate(items):
+        if item["name"] == name:
+            return items[(i + 1) % len(items)]
+    return items[0] if items else None
+
+
+def _prev_item(name: str) -> dict | None:
+    items = media_items()
+    for i, item in enumerate(items):
+        if item["name"] == name:
+            return items[(i - 1) % len(items)]
+    return items[-1] if items else None
+
+
+# ── Page Routes ───────────────────────────────────────────────────────
+@app.route("/")
+def index():
+    return redirect(url_for("controller"))
+
+
+@app.route("/display")
+def display():
+    return render_template("display.html")
+
+
+@app.route("/controller")
+def controller():
+    return render_template("controller.html", items=media_items())
+
+
+# ── Player API ────────────────────────────────────────────────────────
+@app.route("/api/state")
+def api_state():
+    return jsonify(player_state)
+
+
+@app.route("/api/play", methods=["POST"])
+def api_play():
+    data = request.get_json(silent=True) or {}
+    name = data.get("name")
+    if name:
+        items = media_items()
+        match = next((i for i in items if i["name"] == name), None)
+        if not match:
+            return jsonify({"error": "not found"}), 404
+        _set_current(match["name"], match["kind"])
+    _clear_seek()
+    player_state["playing"] = True
+    _bump()
+    return jsonify(player_state)
+
+
+@app.route("/api/stop", methods=["POST"])
+def api_stop():
+    _clear_seek()
+    player_state["playing"] = False
+    _bump()
+    return jsonify(player_state)
+
+
+@app.route("/api/next", methods=["POST"])
+def api_next():
+    current = player_state["current"]
+    if current:
+        nxt = _next_item(current["name"])
+        if nxt:
+            _set_current(nxt["name"], nxt["kind"])
+    else:
+        items = media_items()
+        if items:
+            _set_current(items[0]["name"], items[0]["kind"])
+    _clear_seek()
+    player_state["playing"] = True
+    _bump()
+    return jsonify(player_state)
+
+
+@app.route("/api/prev", methods=["POST"])
+def api_prev():
+    current = player_state["current"]
+    if current:
+        prv = _prev_item(current["name"])
+        if prv:
+            _set_current(prv["name"], prv["kind"])
+    else:
+        items = media_items()
+        if items:
+            _set_current(items[-1]["name"], items[-1]["kind"])
+    _clear_seek()
+    player_state["playing"] = True
+    _bump()
+    return jsonify(player_state)
+
+
+@app.route("/api/seek", methods=["POST"])
+def api_seek():
+    data = request.get_json(silent=True) or {}
+    seconds = data.get("seconds", 0)
+    player_state["seek"] = seconds
+    player_state["playing"] = True
+    _bump()
+    return jsonify(player_state)
+
+
+@app.route("/api/seek-ack", methods=["POST"])
+def api_seek_ack():
+    player_state["seek"] = 0
+    return jsonify({"ok": True})
+
+
+@app.route("/api/volume", methods=["POST"])
+def api_volume():
+    data = request.get_json(silent=True) or {}
+    vol = float(data.get("volume", 1.0))
+    vol = max(0.0, min(1.0, vol))
+    player_state["volume"] = vol
+    _bump()
+    return jsonify(player_state)
+
+
+# ── Upload / Media / Delete ───────────────────────────────────────────
+@app.route("/api/media", methods=["GET"])
+def api_media():
+    return jsonify(media_items())
+
+
+@app.route("/upload", methods=["POST"])
+def upload():
+    files = request.files.getlist("files")
+    if not files:
+        return redirect(url_for("controller"))
+    for file in files:
+        if not file.filename:
+            continue
+        if not allowed_file(file.filename):
+            continue
+        filename = secure_filename(file.filename)
+        file.save(UPLOAD_DIR / filename)
+    return redirect(url_for("controller"))
+
+
+@app.route("/media/<path:filename>")
+def media(filename: str):
+    if not allowed_file(filename):
+        abort(404)
+    return send_from_directory(app.config["UPLOAD_FOLDER"], filename)
+
+
+@app.route("/api/state/media", methods=["GET"])
+def api_state_media():
+    if player_state["current"]:
+        name = player_state["current"]["name"]
+        if not allowed_file(name):
+            abort(404)
+        return send_from_directory(app.config["UPLOAD_FOLDER"], name)
+    abort(404)
+
+
+@app.route("/delete/<path:filename>", methods=["POST"])
+def delete(filename: str):
+    if not allowed_file(filename):
+        abort(404)
+    path = UPLOAD_DIR / filename
+    if path.exists():
+        path.unlink()
+    if player_state["current"] and player_state["current"]["name"] == filename:
+        player_state["current"] = None
+        player_state["playing"] = False
+        _clear_seek()
+        _bump()
+    return redirect(url_for("controller"))
+
+
+if __name__ == "__main__":
+    app.run(
+        host="0.0.0.0",
+        port=int(os.environ.get("PORT", "5008")),
+        debug=True,
+    )

docker-compose.yml

@@ -0,0 +1,13 @@
+
+services:
+  videoplayer:
+    container_name: videoplayer
+    build:
+      context: .
+      dockerfile: Dockerfile
+      platforms:
+        - linux/amd64
+    image: gitea.teamthiele.de/ethiele/videoplayer:latest
+    ports:
+      - "5008:5008"
+    restart: unless-stopped

requirements.txt

@@ -0,0 +1 @@
+Flask>=3.0,<4.0

static/cancom.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<!-- Created with xTool Creative Space (https://www.xtool.com/pages/software) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xcs="https://www.xtool.com/pages/software" version="1.1" preserveAspectRatio="xMinYMin meet" width="61.682394106284505mm" height="9.909010347638684mm" viewBox="136.55880294685778 209.2954948261807 61.682394106284505 9.909010347638684" xcs:version="2.7.22"><style></style>
+<path transform="matrix(0.158038,0,0,0.158038,133.2558,163.322122)" stroke="none" fill="#ffffff" data-view-type="laser" d="M125.9,352.1h18.9L119,291.7h-16.2l-25,60.4h18.2l14.6-38.9L125.9,352.1z M323.6,322     c0,8.8-6.1,16.4-15.4,16.4c-9.1,0-15.4-7.6-15.4-16.4s6.1-16.4,15.2-16.4C317,305.6,323.6,313.4,323.6,322 M340.5,322.3     c0-17.4-13.4-31.3-32.3-31.3c-18.7,0-32.3,14.1-32.3,31.3c0,17.4,13.4,31.3,32.3,31.3C326.9,353.6,340.5,339.4,340.5,322.3      M230.4,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.2,0-31.6,14.1-31.6,31.3     c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C236.5,338.4,230.4,331.4,230.4,322.5      M38,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.4,0-31.8,14.1-31.8,31.3     c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C44,338.4,38,331.4,38,322.5      M191.8,352.1h14.4v-59.8H190v33.1l-25-33.1h-15.4v60.1h16.2v-34.1L191.8,352.1z M411.2,352.1v-59.8h-17.7l-14.4,23.2l-14.4-23.2     h-17.7v60.1h16.4V318l15.4,23.2h0.3l15.4-23.5v34.6L411.2,352.1L411.2,352.1z" fill-rule="nonzero"></path></svg>

templates/controller.html

@@ -0,0 +1,494 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Videoplayer – Steuerung</title>
+  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
+  <link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
+  <script>
+    (() => {
+      const storedTheme = window.localStorage.getItem('keyadmin-theme');
+      const theme = storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : 'dark';
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    })();
+  </script>
+  <style>
+    :root {
+      --ccm-bg: #f4f6f8;
+      --ccm-text: #212121;
+      --ccm-primary: #da002d;
+      --ccm-primary-hover: #b00024;
+      --ccm-header: #2b2f36;
+      --ccm-surface: #ffffff;
+      --ccm-border: #d9dee3;
+      --ccm-muted: #6b7280;
+      --tblr-primary: var(--ccm-primary);
+      --tblr-primary-rgb: 218, 0, 45;
+      --tblr-success: var(--ccm-primary);
+      --tblr-success-rgb: 218, 0, 45;
+    }
+    body {
+      background-color: var(--ccm-bg);
+      color: var(--ccm-text);
+      font-family: "Segoe UI", Arial, sans-serif;
+    }
+    .page { min-height: 100vh; }
+    .navbar-brand img { display: block; }
+    .navbar-brand-logo {
+      height: 1.3rem;
+      width: auto;
+      display: block;
+      flex: 0 0 auto;
+      margin-top: 0;
+      margin-bottom: 0.06rem;
+    }
+    .navbar-brand-wordmark {
+      display: flex;
+      flex-direction: column;
+      line-height: 1.05;
+      font-size: 0.82rem;
+      color: #ffffff;
+    }
+    .navbar-brand-wordmark strong {
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: #ffffff;
+    }
+    .navbar-brand-wordmark span {
+      color: rgba(255, 255, 255, 0.78);
+      font-size: 0.72rem;
+    }
+    .navbar {
+      background: var(--ccm-header);
+      box-shadow: none;
+    }
+    .topbar {
+      background: var(--ccm-header);
+      border-bottom: 0;
+    }
+    .topbar-main {
+      padding-top: .55rem;
+      padding-bottom: .55rem;
+    }
+    .topbar-metric {
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 8px;
+      padding: .45rem .85rem;
+      display: inline-flex;
+      align-items: center;
+      gap: .45rem;
+      color: #ffffff;
+      font-size: .92rem;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+    .theme-toggle {
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+      min-height: 2.4rem;
+      padding: .45rem .85rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      background: rgba(255, 255, 255, 0.06);
+      color: #ffffff;
+      border-radius: 8px;
+    }
+    .theme-toggle:hover,
+    .theme-toggle:focus {
+      background: rgba(255, 255, 255, 0.12);
+      color: #ffffff;
+      border-color: rgba(255, 255, 255, 0.18);
+    }
+    [data-bs-theme="dark"] .theme-toggle {
+      background: rgba(255, 255, 255, 0.06);
+      border-color: rgba(255, 255, 255, 0.12);
+      color: #ffffff;
+    }
+    [data-bs-theme="light"] .theme-toggle {
+      background: #ffffff;
+      border-color: var(--ccm-border);
+      color: var(--ccm-text);
+    }
+    [data-bs-theme="light"] .theme-toggle:hover,
+    [data-bs-theme="light"] .theme-toggle:focus {
+      background: #ffffff;
+      border-color: var(--ccm-border);
+    }
+    .card {
+      border-color: var(--ccm-border);
+      border-radius: 1rem;
+      background: var(--ccm-surface);
+      box-shadow: 0 12px 24px rgba(43, 47, 54, 0.08);
+    }
+    .card-header {
+      background: transparent;
+      border-bottom-color: var(--ccm-border);
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+    }
+    [data-bs-theme="dark"] .card {
+      background-color: var(--ccm-bg);
+      border-color: var(--ccm-border);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
+    }
+    [data-bs-theme="dark"] .card-header {
+      border-bottom-color: var(--ccm-border);
+    }
+    [data-bs-theme="dark"] {
+      --ccm-bg: #15181d;
+      --ccm-text: #e5e7eb;
+      --ccm-header: #0f1720;
+      --ccm-surface: #15181d;
+      --ccm-border: #2b3440;
+      --ccm-muted: #9aa4b2;
+    }
+    [data-bs-theme="dark"] body {
+      background-color: var(--ccm-bg);
+      color: var(--ccm-text);
+    }
+    .media-list .list-group-item.active {
+      background: var(--ccm-primary);
+      border-color: var(--ccm-primary);
+    }
+    .upload-dropzone {
+      border: 1.5px dashed var(--ccm-border);
+      border-radius: 0.85rem;
+      background: var(--ccm-surface);
+      padding: 0.95rem;
+      text-align: center;
+      color: var(--ccm-muted);
+      cursor: pointer;
+      transition: border-color .15s ease, background .15s ease, color .15s ease;
+      user-select: none;
+    }
+    .upload-dropzone.dragover {
+      border-color: var(--ccm-primary);
+      background: rgba(218, 0, 45, 0.06);
+      color: var(--ccm-primary);
+    }
+    [data-bs-theme="dark"] .upload-dropzone {
+      background: #11161d;
+    }
+    .btn-primary {
+      background-color: var(--ccm-primary);
+      border-color: var(--ccm-primary);
+    }
+    .btn-primary:hover,
+    .btn-primary:focus {
+      background-color: var(--ccm-primary-hover);
+      border-color: var(--ccm-primary-hover);
+    }
+    .btn-outline-primary {
+      color: var(--ccm-primary);
+      border-color: var(--ccm-primary);
+    }
+    .btn-outline-primary:hover,
+    .btn-outline-primary:focus {
+      background-color: var(--ccm-primary);
+      border-color: var(--ccm-primary);
+      color: #fff;
+    }
+    .btn-outline-danger:hover,
+    .btn-outline-danger:focus {
+      color: #fff;
+    }
+    .status-line { color: var(--ccm-muted); }
+    #now-playing {
+      word-break: break-all;
+    }
+    .control-btn {
+      min-width: 3.2rem;
+    }
+    @media (max-width: 575.98px) {
+      .control-btn { min-width: 2.8rem; font-size: 0.85rem; }
+      .control-btn i { font-size: 1.1rem; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <header class="navbar sticky-top topbar brand-surface">
+      <div class="container-fluid d-flex align-items-center gap-3 topbar-main flex-wrap">
+          <a class="navbar-brand d-flex align-items-center gap-2 m-0" href="#">
+            <img class="navbar-brand-logo" src="{{ url_for('static', filename='cancom.svg') }}" alt="CANCOM">
+            <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>
+            <div class="topbar-metric"><i class="ti ti-circle-check-filled"></i><span>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>
+      </div>
+    </header>
+
+    <div class="container-fluid py-3 py-lg-4">
+      <div class="row g-3">
+        <div class="col-12">
+          <!-- Now Playing -->
+          <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-screen-share"></i></span>
+                <h3 class="card-title mb-0">Aktuelle Wiedergabe</h3>
+              </div>
+            </div>
+            <div class="card-body">
+              <div id="now-playing" class="fs-5 fw-medium mb-1">–</div>
+              <div id="play-status" class="status-line">Bereit.</div>
+            </div>
+          </div>
+
+          <!-- Controls -->
+          <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-player-play"></i></span>
+                <h3 class="card-title mb-0">Steuerung</h3>
+              </div>
+            </div>
+            <div class="card-body">
+              <div class="d-flex flex-wrap gap-2 justify-content-center">
+                <button type="button" class="btn btn-outline-secondary control-btn" onclick="apiPrev()"><i class="ti ti-player-track-prev"></i></button>
+                <button type="button" class="btn btn-outline-secondary control-btn" onclick="apiSeek(-10)"><i class="ti ti-rewind-backward-10"></i></button>
+                <button type="button" class="btn btn-primary control-btn" onclick="apiPlay()"><i class="ti ti-player-play"></i></button>
+                <button type="button" class="btn btn-outline-secondary control-btn" onclick="apiStop()"><i class="ti ti-player-stop"></i></button>
+                <button type="button" class="btn btn-outline-secondary control-btn" onclick="apiSeek(10)"><i class="ti ti-rewind-forward-10"></i></button>
+                <button type="button" class="btn btn-outline-primary control-btn" onclick="apiNext()"><i class="ti ti-player-track-next"></i></button>
+              </div>
+              <div class="d-flex align-items-center gap-2 mt-3">
+                <i class="ti ti-volume"></i>
+                <input type="range" id="volume-slider" class="form-range" min="0" max="100" value="100">
+                <span id="volume-label" class="fw-medium text-nowrap" style="min-width:2.8rem">100%</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Media Library -->
+          <div class="card shadow-sm">
+            <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>
+                <h3 class="card-title mb-0">Medienbibliothek</h3>
+              </div>
+            </div>
+            <div class="card-body">
+              <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data" class="mb-3">
+                <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>
+                  <div>Dateien hier ablegen oder antippen</div>
+                </div>
+                <div class="d-grid gap-2">
+                  <button type="button" class="btn btn-outline-primary" id="choose-files"><i class="ti ti-folder-open me-1"></i>Dateien wählen</button>
+                  <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>
+
+  <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 volumeSlider = document.getElementById('volume-slider');
+    const volumeLabel = document.getElementById('volume-label');
+    const fileInput = document.getElementById('file-input');
+    const uploadForm = document.getElementById('upload-form');
+    const dropzone = document.getElementById('dropzone');
+    const chooseFiles = document.getElementById('choose-files');
+
+    let selectedName = null;
+
+    // ── API calls ──────────────────────────────────────────────────────
+    async function apiCall(method, body = {}) {
+      const res = await fetch(method, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      return res.json();
+    }
+
+    function apiPlay(name) {
+      if (name) {
+        apiCall('/api/play', { name }).then(updateFromState);
+      } else {
+        apiCall('/api/play', {}).then(updateFromState);
+      }
+    }
+
+    function apiStop() {
+      apiCall('/api/stop').then(updateFromState);
+    }
+
+    function apiNext() {
+      apiCall('/api/next').then(updateFromState);
+    }
+
+    function apiPrev() {
+      apiCall('/api/prev').then(updateFromState);
+    }
+
+    function apiSeek(seconds) {
+      apiCall('/api/seek', { seconds }).then(updateFromState);
+    }
+
+    function apiDelete(name) {
+      if (!window.confirm(`Wirklich ${name} löschen?`)) return;
+      const form = document.createElement('form');
+      form.method = 'POST';
+      form.action = `/delete/${encodeURIComponent(name)}`;
+      document.body.appendChild(form);
+      form.submit();
+    }
+
+    // ── State handling ─────────────────────────────────────────────────
+    function updateFromState(state) {
+      if (state.current) {
+        nowPlaying.textContent = state.current.name;
+        playStatus.textContent = state.playing ? 'Wird wiedergegeben' : 'Angehalten';
+        highlightMedia(state.current.name);
+      } else {
+        nowPlaying.textContent = '–';
+        playStatus.textContent = 'Bereit.';
+        clearHighlight();
+      }
+      updateVolume(state.volume);
+    }
+
+    async function pollState() {
+      try {
+        const res = await fetch('/api/state');
+        const state = await res.json();
+        updateFromState(state);
+      } catch (_) {}
+    }
+
+    function highlightMedia(name) {
+      document.querySelectorAll('#media-list .list-group-item').forEach(el => {
+        el.classList.toggle('active', el.dataset.name === name);
+      });
+    }
+
+    function clearHighlight() {
+      document.querySelectorAll('#media-list .list-group-item').forEach(el => {
+        el.classList.remove('active');
+      });
+    }
+
+    // ── Media list click ──────────────────────────────────────────────
+    document.getElementById('media-list').addEventListener('click', (e) => {
+      const btn = e.target.closest('.list-group-item');
+      if (!btn) return;
+      const name = btn.dataset.name;
+      selectedName = name;
+      apiPlay(name);
+    });
+
+    // ── Upload ─────────────────────────────────────────────────────────
+    function syncFileInput(files) {
+      const dt = new DataTransfer();
+      Array.from(files).forEach(file => dt.items.add(file));
+      fileInput.files = dt.files;
+      dropzone.textContent = `${dt.files.length} Datei(en) bereit zum Hochladen`;
+    }
+
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files.length) {
+        dropzone.textContent = `${fileInput.files.length} Datei(en) ausgewählt`;
+      }
+    });
+
+    chooseFiles.addEventListener('click', () => fileInput.click());
+    dropzone.addEventListener('click', () => fileInput.click());
+    dropzone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      dropzone.classList.add('dragover');
+    });
+    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));
+    dropzone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dropzone.classList.remove('dragover');
+      if (e.dataTransfer.files.length) {
+        syncFileInput(e.dataTransfer.files);
+      }
+    });
+
+    uploadForm.addEventListener('submit', (e) => {
+      if (!fileInput.files.length) {
+        e.preventDefault();
+      }
+    });
+
+    // ── Volume ─────────────────────────────────────────────────────────
+    volumeSlider.addEventListener('input', () => {
+      const vol = parseInt(volumeSlider.value) / 100;
+      volumeLabel.textContent = `${parseInt(volumeSlider.value)}%`;
+      apiCall('/api/volume', { volume: vol });
+    });
+
+    function updateVolume(vol) {
+      const pct = Math.round((vol ?? 1.0) * 100);
+      volumeSlider.value = pct;
+      volumeLabel.textContent = `${pct}%`;
+    }
+
+    // ── Theme ──────────────────────────────────────────────────────────
+    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-moon-stars"></i><span>Theme</span>';
+    }
+
+    function toggleTheme() {
+      const current = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
+      const next = current === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-bs-theme', next);
+      window.localStorage.setItem('keyadmin-theme', next);
+      updateThemeToggle();
+    }
+
+    themeToggle.addEventListener('click', toggleTheme);
+
+    // ── Clock ──────────────────────────────────────────────────────────
+    function updateClock() {
+      clockLabel.textContent = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+    }
+
+    setInterval(updateClock, 30000);
+
+    // ── Init ───────────────────────────────────────────────────────────
+    window.addEventListener('load', () => {
+      updateClock();
+      updateThemeToggle();
+      pollState();
+      setInterval(pollState, 3000);
+    });
+  </script>
+</body>
+</html>

templates/display.html

@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
+  <title>Videoplayer – Display</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body {
+      width: 100%; height: 100%;
+      background: #000;
+      overflow: hidden;
+      font-family: system-ui, sans-serif;
+    }
+    #stage {
+      width: 100%; height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    #stage video,
+    #stage img {
+      width: 100%; height: 100%;
+      object-fit: contain;
+      display: none;
+    }
+    #stage audio {
+      display: none;
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 80%;
+      max-width: 400px;
+    }
+    #empty {
+      color: #444;
+      font-size: 1.1rem;
+    }
+  </style>
+</head>
+<body>
+  <div id="stage">
+    <video id="video" muted playsinline></video>
+    <audio id="audio" muted controls></audio>
+    <img id="image" alt="">
+    <div id="empty">Warte auf Steuerung…</div>
+  </div>
+  <script>
+    const video = document.getElementById('video');
+    const audio = document.getElementById('audio');
+    const image = document.getElementById('image');
+    const empty = document.getElementById('empty');
+
+    let lastVersion = -1;
+    let lastCurrentName = null;
+    let audioUnlocked = false;
+
+    // AudioContext-Trick: entsperrt Audio in Chromium-basierten Browsern
+    (function unlockAudio() {
+      try {
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        ctx.resume();
+        const buf = ctx.createBuffer(1, 1, 22050);
+        const src = ctx.createBufferSource();
+        src.buffer = buf;
+        src.connect(ctx.destination);
+        src.start();
+        // Sobald der Buffer abgespielt wurde, gilt Audio als entsperrt
+        src.onended = () => { audioUnlocked = true; };
+        audioUnlocked = true;
+      } catch (_) {}
+    })();
+
+    // Klick auf die Seite entsperrt Audio endgültig
+    document.addEventListener('click', () => {
+      audioUnlocked = true;
+      video.muted = false;
+      audio.muted = false;
+      if (video.src && video.paused) video.play().catch(() => {});
+      if (audio.src && audio.paused) audio.play().catch(() => {});
+    }, { once: true });
+
+    function showOnly(el) {
+      [video, audio, image, empty].forEach(e => { e.style.display = 'none'; });
+      if (el) el.style.display = el === empty ? 'flex' : 'block';
+    }
+
+    async function tryPlay(player) {
+      player.muted = false;
+      try {
+        await player.play();
+        return true;
+      } catch (_) {
+        player.muted = true;
+        try {
+          await player.play();
+          return false;
+        } catch (_) {
+          return false;
+        }
+      }
+    }
+
+    async function poll() {
+      try {
+        const res = await fetch('/api/state');
+        const state = await res.json();
+        const versionChanged = state.version !== lastVersion;
+
+        if (versionChanged) {
+          const prevVersion = lastVersion;
+          lastVersion = state.version;
+
+          const currentName = state.current ? state.current.name : null;
+          const currentChanged = currentName !== lastCurrentName;
+          lastCurrentName = currentName;
+
+          // Seek
+          if (state.seek && prevVersion >= 0 && state.current &&
+              (state.current.kind === 'video' || state.current.kind === 'audio')) {
+            const player = state.current.kind === 'video' ? video : audio;
+            if (player.duration && isFinite(player.duration)) {
+              player.currentTime = Math.max(0, Math.min(player.duration, player.currentTime + state.seek));
+            }
+            fetch('/api/seek-ack', { method: 'POST' }).catch(() => {});
+          }
+
+          // Neues Medium laden
+          if (currentChanged) {
+            if (state.current) {
+              const src = `/media/${encodeURIComponent(state.current.name)}`;
+              const kind = state.current.kind;
+              if (kind === 'video') {
+                video.src = src;
+                video.oncanplay = () => {
+                  if (lastCurrentName === state.current?.name && state.playing) {
+                    tryPlay(video);
+                  }
+                };
+                showOnly(video);
+              } else if (kind === 'audio') {
+                audio.src = src;
+                audio.oncanplay = () => {
+                  if (lastCurrentName === state.current?.name && state.playing) {
+                    tryPlay(audio);
+                  }
+                };
+                showOnly(audio);
+              } else {
+                image.src = src;
+                showOnly(image);
+              }
+            } else {
+              showOnly(empty);
+            }
+          }
+        }
+
+        // Play/pause: immer ausführen
+        if (state.current && (state.current.kind === 'video' || state.current.kind === 'audio')) {
+          const player = state.current.kind === 'video' ? video : audio;
+          player.volume = state.volume ?? 1.0;
+          if (state.playing && player.src) {
+            tryPlay(player);
+          } else if (!state.playing) {
+            player.pause();
+          }
+        }
+      } catch (_) {}
+    }
+
+    window.addEventListener('load', () => {
+      poll();
+      setInterval(poll, 1500);
+    });
+  </script>
+</body>
+</html>