Version 3 mit URL und Newsticker
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Erik Thiele
123
app.py
123
app.py
@@ -23,7 +23,7 @@ BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
MEDIA_DIR = os.path.join(BASE_DIR, "media")
|
||||
CONFIG_FILE = os.path.join(BASE_DIR, "config.json")
|
||||
|
||||
APP_VERSION = "2.1.0"
|
||||
APP_VERSION = "3.1.0"
|
||||
UPLOAD_EXTENSIONS = {".jpg", ".jpeg", ".png", ".mp4"}
|
||||
|
||||
app = Flask(__name__)
|
||||
@@ -48,6 +48,14 @@ def save_config(cfg):
|
||||
os.fsync(f.fileno())
|
||||
print("✅ config.json gespeichert")
|
||||
|
||||
|
||||
def is_url(value):
|
||||
return (
|
||||
isinstance(value, str)
|
||||
and value.lower().startswith(("http://", "https://"))
|
||||
)
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Auth / Benutzer
|
||||
# -------------------------------------------------
|
||||
@@ -64,6 +72,7 @@ def load_user(user_id):
|
||||
@app.route("/login", methods=["GET", "POST"])
|
||||
def login():
|
||||
config = load_config()
|
||||
error = None
|
||||
|
||||
if request.method == "POST":
|
||||
if (
|
||||
@@ -72,8 +81,9 @@ def login():
|
||||
):
|
||||
login_user(Admin())
|
||||
return redirect("/admin")
|
||||
error = "Ungültige Zugangsdaten"
|
||||
|
||||
return render_template("login.html")
|
||||
return render_template("login.html", error=error)
|
||||
|
||||
@app.route("/logout")
|
||||
def logout():
|
||||
@@ -124,13 +134,23 @@ def player(screen):
|
||||
|
||||
# 1. Playlist-Reihenfolge
|
||||
for name in playlist:
|
||||
if is_url(name):
|
||||
normal_files.append({"kind": "url", "url": name})
|
||||
continue
|
||||
|
||||
if os.path.exists(os.path.join(folder, name)) and allowed_file(name):
|
||||
normal_files.append(name)
|
||||
normal_files.append({"kind": "file", "name": name})
|
||||
|
||||
existing_file_names = {
|
||||
item["name"] for item in normal_files if item["kind"] == "file"
|
||||
}
|
||||
|
||||
# 2. Neue Dateien hintendran
|
||||
for f in sorted(os.listdir(folder)):
|
||||
if f not in normal_files and allowed_file(f):
|
||||
normal_files.append(f)
|
||||
if f in existing_file_names or f.startswith("._"):
|
||||
continue
|
||||
if allowed_file(f):
|
||||
normal_files.append({"kind": "file", "name": f})
|
||||
|
||||
# ------------------------------
|
||||
# Priority-Playlist (global)
|
||||
@@ -139,7 +159,15 @@ def player(screen):
|
||||
priority_cfg = config.get("priority", {})
|
||||
|
||||
if priority_cfg.get("enabled", False):
|
||||
prio_files = priority_cfg.get("playlist", [])
|
||||
prio_files = []
|
||||
for name in priority_cfg.get("playlist", []):
|
||||
if is_url(name):
|
||||
prio_files.append({"kind": "url", "url": name})
|
||||
continue
|
||||
|
||||
file_path = os.path.join(MEDIA_DIR, "priority", name)
|
||||
if os.path.exists(file_path):
|
||||
prio_files.append({"kind": "file", "name": name})
|
||||
else:
|
||||
prio_files = []
|
||||
|
||||
@@ -148,7 +176,9 @@ def player(screen):
|
||||
screen=screen,
|
||||
normal_files=normal_files, # ✅ explizit
|
||||
prio_files=prio_files, # ✅ IMMER Liste
|
||||
interval=screen_cfg.get("interval", 10)
|
||||
interval=screen_cfg.get("interval", 10),
|
||||
newsticker_text=screen_cfg.get("newsticker_text", ""),
|
||||
newsticker_enabled=screen_cfg.get("newsticker_enabled", False)
|
||||
)
|
||||
|
||||
|
||||
@@ -193,10 +223,26 @@ def admin():
|
||||
continue
|
||||
|
||||
files = []
|
||||
playlist = cfg["screens"][screen].get("playlist", [])
|
||||
screen_cfg = cfg.setdefault("screens", {}).setdefault(screen, {
|
||||
"interval": 10,
|
||||
"show_images": True,
|
||||
"show_videos": True,
|
||||
"playlist": []
|
||||
})
|
||||
playlist = screen_cfg.get("playlist", [])
|
||||
screen_cfg["newsticker_text"] = screen_cfg.get("newsticker_text", "")
|
||||
screen_cfg["newsticker_enabled"] = screen_cfg.get("newsticker_enabled", False)
|
||||
|
||||
# 1️⃣ Playlist-Reihenfolge
|
||||
for name in playlist:
|
||||
if is_url(name):
|
||||
files.append({
|
||||
"name": name,
|
||||
"type": "url",
|
||||
"size": "URL"
|
||||
})
|
||||
continue
|
||||
|
||||
file_path = os.path.join(path, name)
|
||||
if not os.path.exists(file_path):
|
||||
continue
|
||||
@@ -227,7 +273,7 @@ def admin():
|
||||
"size": size
|
||||
})
|
||||
|
||||
screens[screen] = cfg["screens"][screen]
|
||||
screens[screen] = screen_cfg
|
||||
media_files[screen] = files
|
||||
screen_status[screen] = "active" if files else "empty"
|
||||
|
||||
@@ -241,7 +287,15 @@ def admin():
|
||||
|
||||
# 1️⃣ Playlist-Reihenfolge
|
||||
for name in prio_playlist:
|
||||
file_path = os.path.join(MEDIA_DIR, "priority")
|
||||
if is_url(name):
|
||||
priority_files.append({
|
||||
"name": name,
|
||||
"type": "url",
|
||||
"size": "URL"
|
||||
})
|
||||
continue
|
||||
|
||||
file_path = os.path.join(prio_dir, name)
|
||||
if not os.path.exists(file_path):
|
||||
continue
|
||||
|
||||
@@ -291,11 +345,18 @@ def admin():
|
||||
@login_required
|
||||
def update_screen(screen):
|
||||
config = load_config()
|
||||
cfg = config["screens"][screen]
|
||||
cfg = config.setdefault("screens", {}).setdefault(screen, {
|
||||
"interval": 10,
|
||||
"show_images": True,
|
||||
"show_videos": True,
|
||||
"playlist": []
|
||||
})
|
||||
|
||||
cfg["interval"] = int(request.form.get("interval", 10))
|
||||
cfg["show_images"] = "show_images" in request.form
|
||||
cfg["show_videos"] = "show_videos" in request.form
|
||||
cfg["newsticker_text"] = request.form.get("newsticker_text", "")
|
||||
cfg["newsticker_enabled"] = "newsticker_enabled" in request.form
|
||||
|
||||
save_config(config)
|
||||
return redirect("/admin")
|
||||
@@ -319,11 +380,38 @@ def upload(screen):
|
||||
|
||||
return redirect("/admin")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: URL hinzufügen
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/add-url/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def add_url(screen):
|
||||
url = request.form.get("url", "").strip()
|
||||
if not is_url(url):
|
||||
return redirect("/admin")
|
||||
|
||||
config = load_config()
|
||||
if screen == "priority":
|
||||
config.setdefault("priority", {}).setdefault("playlist", []).append(url)
|
||||
else:
|
||||
screen_cfg = config.setdefault("screens", {}).setdefault(screen, {
|
||||
"interval": 10,
|
||||
"show_images": True,
|
||||
"show_videos": True,
|
||||
"playlist": []
|
||||
})
|
||||
screen_cfg.setdefault("playlist", []).append(url)
|
||||
|
||||
save_config(config)
|
||||
return redirect("/admin")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Datei löschen
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/admin/delete/<screen>/<filename>", methods=["POST"])
|
||||
@app.route("/admin/delete/<screen>/<path:filename>", methods=["POST"])
|
||||
@login_required
|
||||
def delete_file(screen, filename):
|
||||
cfg = load_config()
|
||||
@@ -358,9 +446,18 @@ def save_playlist(screen):
|
||||
data = request.get_json()
|
||||
|
||||
if screen == "priority":
|
||||
cfg.setdefault("priority", {}).setdefault("playlist", [])
|
||||
cfg["priority"]["playlist"] = data["playlist"]
|
||||
else:
|
||||
cfg["screens"][screen]["playlist"] = data["playlist"]
|
||||
screen_cfg = cfg.setdefault("screens", {}).setdefault(screen, {
|
||||
"interval": 10,
|
||||
"show_images": True,
|
||||
"show_videos": True,
|
||||
"playlist": [],
|
||||
"newsticker_text": "",
|
||||
"newsticker_enabled": False
|
||||
})
|
||||
screen_cfg["playlist"] = data["playlist"]
|
||||
|
||||
save_config(cfg)
|
||||
return "", 204
|
||||
|
||||
26
config.json
26
config.json
@@ -1,27 +1,33 @@
|
||||
{
|
||||
"priority": {
|
||||
"enabled": true,
|
||||
"playlist": []
|
||||
"playlist": [
|
||||
"https://www.meteoblue.com/en/meteotv/d7b0fd"
|
||||
]
|
||||
},
|
||||
"screens": {
|
||||
"lobby": {
|
||||
"interval": 10,
|
||||
"interval": 15,
|
||||
"show_images": true,
|
||||
"show_videos": true,
|
||||
"show_videos": false,
|
||||
"playlist": [
|
||||
"HilfeKI.jpg",
|
||||
"QRCode.png",
|
||||
"Will_AI_Replace_Developers_1.jpg",
|
||||
"Video CANCOM Jahresr\u00fcckblick 2025.MP4"
|
||||
]
|
||||
"https://wbxroompresence.cancom.io/standort?find=Stuttgart",
|
||||
"Hilfe_KI.jpg",
|
||||
"e00a687f-d82a-446d-b8f3-07895fbc7309.png",
|
||||
"Video_CANCOM_LIVE_2025_Stuttgart.MP4"
|
||||
],
|
||||
"newsticker_text": "Hallo dies ist der Newsticker",
|
||||
"newsticker_enabled": false
|
||||
},
|
||||
"casino": {
|
||||
"interval": 10,
|
||||
"show_images": true,
|
||||
"show_videos": true,
|
||||
"playlist": [
|
||||
"JET-Design.JPG"
|
||||
]
|
||||
"https://wbxroompresence.cancom.io/standort?find=Stuttgart"
|
||||
],
|
||||
"newsticker_text": "Hallo dies ist der Newsticker",
|
||||
"newsticker_enabled": false
|
||||
}
|
||||
},
|
||||
"admin": {
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
background-color: #eeeeee;
|
||||
border-left: 6px solid #DA002D;
|
||||
padding-left: 1rem;
|
||||
font-size: 1.1rem; /* leicht größer */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -93,6 +94,22 @@
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* CANCOM CI Tooltip Styling */
|
||||
.tooltip {
|
||||
--bs-tooltip-border-color: #DA002D;
|
||||
}
|
||||
.tooltip .tooltip-inner {
|
||||
border: 1px solid #DA002D;
|
||||
background-color: #ffffff;
|
||||
color: #212121;
|
||||
box-shadow: none;
|
||||
}
|
||||
.tooltip .tooltip-arrow::before {
|
||||
border-top-color: #DA002D;
|
||||
border-bottom-color: #DA002D;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -116,7 +133,7 @@
|
||||
Admin Dashboard
|
||||
<h2 class="page-title text-white">Simple Signage</h2>
|
||||
</span>
|
||||
</a>s
|
||||
</a>
|
||||
|
||||
<div class="d-none d-sm-inline">
|
||||
<a href="/logout" class="btn">Logout</a>
|
||||
@@ -139,7 +156,7 @@
|
||||
⚠ PRIORITY (global)
|
||||
</strong>
|
||||
</div>
|
||||
<span class="badge bg-success">wirkt auf alle Player</span>
|
||||
<span class="badge bg-green text-green-fg">wirkt auf alle Player</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
@@ -161,6 +178,14 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/admin/add-url/priority" method="post" class="mb-3">
|
||||
<div class="input-group">
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Playlist -->
|
||||
<h4>Playlist Reihenfolge</h4>
|
||||
|
||||
@@ -169,21 +194,37 @@
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<span class="playlist-name">{{ file.name }}</span>
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}"
|
||||
{% endif %}>
|
||||
{{ file.name }}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-blue-lt">Bild</span>
|
||||
{% elif file.type == "url" %}
|
||||
<span class="badge bg-info">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange-lt">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">{{ file.size }} KB</span>
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
|
||||
<form action="{{url_for('delete_file',
|
||||
screen='priority',
|
||||
filename=file.name) }}"
|
||||
<form action="{{ url_for('delete_file', screen='priority', filename=file.name) }}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
onmousedown="event.stopPropagation()">
|
||||
@@ -215,9 +256,9 @@
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span>Screen: {{ screen }}</span>
|
||||
<span>Screen: https://signage.ccmake.de/player/{{ screen }}</span>
|
||||
{% if screen_status[screen] == "active" %}
|
||||
<span class="badge bg-success">Aktiv</span>
|
||||
<span class="badge bg-green text-green-fg">Aktiv</span>
|
||||
{% else %}
|
||||
<span class="badge bg-warning text-dark">Leer</span>
|
||||
{% endif %}
|
||||
@@ -226,13 +267,26 @@
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Einstellungen -->
|
||||
<h2>Einstellungen</h2>
|
||||
<form action="/admin/update/{{ screen }}" method="post">
|
||||
<div class="mb-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Intervall (Sekunden)</label>
|
||||
<input type="number" class="form-control"
|
||||
name="interval" min="1" value="{{ cfg.interval }}">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Newsticker-Text</label>
|
||||
<input type="text" class="form-control" name="newsticker_text" value="{{ cfg.newsticker_text|default('') }}" maxlength="200">
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="newsticker_enabled"
|
||||
{% if cfg.newsticker_enabled %}checked{% endif %}>
|
||||
<label class="form-check-label">Newsticker anzeigen</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="show_images"
|
||||
@@ -240,7 +294,7 @@
|
||||
<label class="form-check-label">Bilder anzeigen</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-3">
|
||||
<div class="form-check form-switch mb-4">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="show_videos"
|
||||
{% if cfg.show_videos %}checked{% endif %}>
|
||||
@@ -255,7 +309,7 @@
|
||||
<hr>
|
||||
|
||||
<!-- Upload -->
|
||||
<h4>Medien hochladen</h4>
|
||||
<h2>Medien hochladen / URL hinzufügen</h2>
|
||||
<form action="/admin/upload/{{ screen }}"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="input-group mb-3">
|
||||
@@ -264,26 +318,54 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/admin/add-url/{{ screen }}" method="post" class="mb-4">
|
||||
<div class="input-group">
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Playlist -->
|
||||
<h4>Playlist Reihenfolge</h4>
|
||||
<h2>Playlist Reihenfolge</h2>
|
||||
|
||||
<ul class="list-group mb-3" id="playlist-{{ screen }}">
|
||||
{% for file in media_files[screen] %}
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<span class="playlist-name">{{ file.name }}</span>
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}"
|
||||
{% endif %}>
|
||||
{{ file.name }}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-blue-lt">Bild</span>
|
||||
<span class="badge bg-purple text-purple-fg">Bild</span>
|
||||
{% elif file.type == "url" %}
|
||||
<span class="badge bg-blue text-blue-fg">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange-lt">Video</span>
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">{{ file.size }} KB</span>
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="/admin/delete/{{ screen }}/{{ file.name }}"
|
||||
<form action="{{ url_for('delete_file', screen=screen, filename=file.name) }}"
|
||||
method="post">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
@@ -360,9 +442,11 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
window.savePlaylist = savePlaylist;
|
||||
|
||||
{% for screen in screens.keys() %}
|
||||
initSortable("{{ screen }}");
|
||||
{% endfor %}
|
||||
// Initialize tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -2,14 +2,36 @@
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Signage Login</title>
|
||||
<link href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet">
|
||||
<title>CANCOM Simple Signage Admin</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<link href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #F4F6F8;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #DA002D;
|
||||
border-color: #DA002D;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #B00024;
|
||||
border-color: #B00024;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="d-flex align-items-center justify-content-center bg-dark" style="height:100vh;">
|
||||
<body class="d-flex align-items-center justify-content-center" style="height:100vh;">
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<h2 class="text-center mb-4">Signage Admin</h2>
|
||||
{% if error %}
|
||||
<div class="alert alert-danger text-center" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<form method="post">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Benutzername</label>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
font-family: system-ui, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
@@ -15,22 +16,86 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img, video {
|
||||
img, video, iframe {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
background: black;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
img, iframe {
|
||||
object-fit: contain;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.newsticker-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.newsticker-track {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
animation: ticker-scroll 40s linear infinite;
|
||||
}
|
||||
|
||||
.newsticker-track span {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
@keyframes ticker-scroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-100vw); }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<img id="image">
|
||||
<video id="video" muted autoplay playsinline></video>
|
||||
<iframe id="iframe"></iframe>
|
||||
|
||||
{% if newsticker_enabled %}
|
||||
<div id="newsticker-bar" style="position:fixed;left:0;right:0;bottom:0;height:40px;z-index:10000;background:#DA002D;color:#fff;display:flex;align-items:center;overflow:hidden;">
|
||||
<div id="newsticker-text" class="newsticker-text">
|
||||
<div class="newsticker-track">
|
||||
<span>{{ newsticker_text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newsticker-clock" style="padding:0 18px 0 24px;font-size:1.1em;font-family:monospace;min-width:90px;text-align:right;"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
// Newsticker Uhrzeit
|
||||
function updateClock() {
|
||||
const el = document.getElementById('newsticker-clock');
|
||||
if (!el) return;
|
||||
const now = new Date();
|
||||
el.textContent = now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
/* -----------------------------
|
||||
Daten vom Server
|
||||
----------------------------- */
|
||||
@@ -44,85 +109,110 @@ const screen = "{{ screen }}";
|
||||
----------------------------- */
|
||||
let normalIndex = 0;
|
||||
let prioIndex = 0;
|
||||
let playPrioNext = false;
|
||||
let mode = "normal"; // "normal" oder "prio"
|
||||
|
||||
|
||||
const img = document.getElementById("image");
|
||||
const vid = document.getElementById("video");
|
||||
const iframe = document.getElementById("iframe");
|
||||
|
||||
/* -----------------------------
|
||||
Hilfsfunktionen
|
||||
----------------------------- */
|
||||
function isVideo(file) {
|
||||
return file.toLowerCase().endsWith(".mp4");
|
||||
function normalizeItem(item) {
|
||||
if (typeof item === "string") {
|
||||
const lower = item.toLowerCase();
|
||||
if (lower.startsWith("http://") || lower.startsWith("https://")) {
|
||||
return { kind: "url", url: item };
|
||||
}
|
||||
return { kind: "file", name: item };
|
||||
}
|
||||
return item;
|
||||
}
|
||||
|
||||
function isVideo(item) {
|
||||
return item.kind === "file" && item.name.toLowerCase().endsWith(".mp4");
|
||||
}
|
||||
|
||||
function isImage(item) {
|
||||
return item.kind === "file" && /\.(jpg|jpeg|png)$/i.test(item.name);
|
||||
}
|
||||
|
||||
function getNextItem() {
|
||||
const normalizedNormal = normalFiles.map(normalizeItem);
|
||||
const normalizedPrio = prioFiles.map(normalizeItem);
|
||||
|
||||
// ✅ Sonderfall: nur Priority vorhanden
|
||||
if (normalFiles.length === 0 && prioFiles.length > 0) {
|
||||
if (normalizedNormal.length === 0 && normalizedPrio.length > 0) {
|
||||
return {
|
||||
file: prioFiles[prioIndex++ % prioFiles.length],
|
||||
item: normalizedPrio[prioIndex++ % normalizedPrio.length],
|
||||
isPrio: true
|
||||
};
|
||||
}
|
||||
|
||||
// ✅ Sonderfall: nur normale Playlist vorhanden
|
||||
if (prioFiles.length === 0 && normalFiles.length > 0) {
|
||||
if (normalizedPrio.length === 0 && normalizedNormal.length > 0) {
|
||||
return {
|
||||
file: normalFiles[normalIndex++ % normalFiles.length],
|
||||
item: normalizedNormal[normalIndex++ % normalizedNormal.length],
|
||||
isPrio: false
|
||||
};
|
||||
}
|
||||
|
||||
// ✅ Normal-Phase
|
||||
if (mode === "normal") {
|
||||
const file = normalFiles[normalIndex++];
|
||||
if (normalIndex >= normalFiles.length) {
|
||||
const item = normalizedNormal[normalIndex++];
|
||||
if (normalIndex >= normalizedNormal.length) {
|
||||
normalIndex = 0;
|
||||
if (prioFiles.length > 0) {
|
||||
if (normalizedPrio.length > 0) {
|
||||
mode = "prio"; // ➜ nach kompletter Normal-Playlist wechseln
|
||||
}
|
||||
}
|
||||
return { file, isPrio: false };
|
||||
return { item, isPrio: false };
|
||||
}
|
||||
|
||||
// ✅ Priority-Phase
|
||||
if (mode === "prio") {
|
||||
const file = prioFiles[prioIndex++];
|
||||
if (prioIndex >= prioFiles.length) {
|
||||
const item = normalizedPrio[prioIndex++];
|
||||
if (prioIndex >= normalizedPrio.length) {
|
||||
prioIndex = 0;
|
||||
mode = "normal"; // ➜ nach kompletter Priority zurück
|
||||
}
|
||||
return { file, isPrio: true };
|
||||
return { item, isPrio: true };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* -----------------------------
|
||||
Medien abspielen
|
||||
----------------------------- */
|
||||
function playNext() {
|
||||
const item = getNextItem();
|
||||
if (!item) return;
|
||||
const entry = getNextItem();
|
||||
if (!entry) return;
|
||||
|
||||
const basePath = item.isPrio ? "priority" : screen;
|
||||
const src = `/media/${basePath}/${item.file}`;
|
||||
const item = entry.item;
|
||||
const basePath = entry.isPrio ? "priority" : screen;
|
||||
|
||||
if (isVideo(item.file)) {
|
||||
img.style.display = "none";
|
||||
vid.style.display = "none";
|
||||
iframe.style.display = "none";
|
||||
vid.pause();
|
||||
vid.src = "";
|
||||
iframe.src = "";
|
||||
|
||||
if (item.kind === "url") {
|
||||
iframe.style.display = "block";
|
||||
iframe.src = item.url;
|
||||
setTimeout(playNext, interval);
|
||||
return;
|
||||
}
|
||||
|
||||
const src = `/media/${basePath}/${item.name}`;
|
||||
if (isVideo(item)) {
|
||||
vid.style.display = "block";
|
||||
vid.src = src;
|
||||
vid.onended = playNext;
|
||||
vid.play();
|
||||
} else {
|
||||
vid.pause();
|
||||
vid.style.display = "none";
|
||||
img.style.display = "block";
|
||||
img.src = src;
|
||||
setTimeout(playNext, interval);
|
||||
|
||||
Reference in New Issue
Block a user