Standortauswahl und Multi Logo und Action Button

This commit is contained in:
Erik Thiele
2026-06-05 12:55:01 +02:00
parent 4733c11832
commit d7bebf1226
13 changed files with 1562 additions and 761 deletions

View File

@@ -16,7 +16,7 @@
overflow: hidden;
}
img, video, iframe {
img, video, #iframe {
width: 100vw;
height: 100vh;
background: black;
@@ -28,7 +28,7 @@
z-index: 1;
}
img, iframe {
img, #iframe {
object-fit: contain;
border: 0;
}
@@ -71,6 +71,36 @@
<body>
<div id="overlay" style="display:none;position:fixed;inset:0;z-index:99999;background:#fff;">
<button onclick="closeOverlay()"
style="position:absolute;top:16px;left:16px;z-index:10;
padding:8px 16px;background:#DA002D;color:#fff;
border:none;border-radius:6px;font-size:1rem;cursor:pointer;">
← Zurück
</button>
<iframe id="overlay-iframe" style="width:100%;height:100%;border:none;display:block;"></iframe>
</div>
{% if custom_url and custom_url_enabled %}
{% if custom_url_target == "redirect" %}
<a href="{{ custom_url }}"
style="position:fixed;top:16px;left:16px;z-index:9999;
padding:10px 20px;background:#DA002D;color:#fff;
border:none;border-radius:8px;font-size:1rem;cursor:pointer;
text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);">
{{ custom_url_label or "Info" }}
</a>
{% else %}
<button onclick='openOverlay({{ custom_url | tojson }})'
style="position:fixed;top:16px;left:16px;z-index:9999;
padding:10px 20px;background:#DA002D;color:#fff;
border:none;border-radius:8px;font-size:1rem;cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,0.3);">
{{ custom_url_label or "Info" }}
</button>
{% endif %}
{% endif %}
<img id="image">
<video id="video" muted autoplay playsinline></video>
@@ -88,6 +118,20 @@
{% endif %}
<script>
let playerTimer = null;
function openOverlay(url) {
if (playerTimer) clearTimeout(playerTimer);
document.getElementById("overlay").style.display = "block";
document.getElementById("overlay-iframe").src = url;
}
function closeOverlay() {
document.getElementById("overlay").style.display = "none";
document.getElementById("overlay-iframe").src = "";
playNext();
}
// Newsticker Uhrzeit
function updateClock() {
const el = document.getElementById('newsticker-clock');
@@ -104,6 +148,7 @@ const normalFiles = {{ normal_files | tojson }};
const prioFiles = {{ prio_files | tojson }};
const interval = {{ interval }} * 1000;
const screen = "{{ screen }}";
const site = "{{ site }}";
/* -----------------------------
Player State
@@ -233,11 +278,11 @@ function playNext() {
iframe.style.height = `100vh`;
iframe.style.transform = `translate(-50%, -50%)`;
}
setTimeout(playNext, interval);
playerTimer = setTimeout(playNext, interval);
return;
}
const src = `/media/${basePath}/${item.name}`;
const src = entry.isPrio ? `/media/priority/${item.name}` : `/media/${site}/${basePath}/${item.name}`;
if (isVideo(item)) {
vid.style.display = "block";
vid.src = src;
@@ -249,11 +294,11 @@ function playNext() {
iframe.style.width = `100vw`;
iframe.style.height = `100vh`;
iframe.style.transform = `translate(-50%, -50%)`;
setTimeout(playNext, interval);
playerTimer = setTimeout(playNext, interval);
} else {
img.style.display = "block";
img.src = src;
setTimeout(playNext, interval);
playerTimer = setTimeout(playNext, interval);
}
}
@@ -264,7 +309,7 @@ let lastHash = null;
async function checkForUpdates() {
try {
const res = await fetch(`/playlist/${screen}/hash`, { cache: "no-store" });
const res = await fetch(`/playlist/${site}/${screen}/hash`, { cache: "no-store" });
const hash = await res.text();
if (lastHash && lastHash !== hash) {