Version 3 mit URL und Newsticker
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Erik Thiele
@@ -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";
|
||||
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