ethiele/signage
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Positionen Action Button und DVA Button hinzugefügt

Browse Source
This commit is contained in:
Erik Thiele
2026-06-19 12:09:50 +02:00
parent 59be0fd789
commit 35e22718e3
10 changed files with 2940 additions and 2308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
templates/player.html
View File

@@ -77,39 +77,227 @@
Wenn der Aktions-Button angeklickt wird, öffnet
sich dieser Overlay-Bereich mit Zurück-Button.
═══════════════════════════════════════════════════ -->
<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;">
<div id="overlay" style="display:none;position:fixed;inset:0;z-index:99999;background:#000;">
<style>
/* Zurück-Button-Position: 9 Positionen, dynamisch per openOverlay(pos) gesetzt */
#overlay-back.overlay-back-top-left { top: 16px; left: 16px; }
#overlay-back.overlay-back-top-center { top: 16px; left: 50%; transform: translateX(-50%); }
#overlay-back.overlay-back-top-right { top: 16px; right: 16px; }
#overlay-back.overlay-back-middle-left { top: 50%; left: 16px; transform: translateY(-50%); }
#overlay-back.overlay-back-middle-center { top: 50%; left: 50%; transform: translate(-50%,-50%); }
#overlay-back.overlay-back-middle-right { top: 50%; right: 16px; transform: translateY(-50%); }
#overlay-back.overlay-back-bottom-left { bottom: 16px; left: 16px; }
#overlay-back.overlay-back-bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }
#overlay-back.overlay-back-bottom-right { bottom: 16px; right: 16px; }
</style>
<button id="overlay-back" onclick="closeOverlay()"
style="position:absolute;z-index:10;
padding:8px 20px;background:#fff;color:#000;
border:none;border-radius:20px;font-size:1rem;font-weight:600;
cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
← Zurück
</button>
<iframe id="overlay-iframe" style="width:100%;height:100%;border:none;display:block;"></iframe>
</div>
<!-- ─── Custom-URL-Button (oben links) ─── -->
<!-- ─── Custom-URL-Button (Position: 9 Positionen oben/mitte/unten × links/mitte/rechts)
Bottom-Positionen weichen automatisch 16px über dem Newsticker-Balken aus ─── -->
{% if custom_url and custom_url_enabled %}
<style>
/* Einheitliches Button-Styling: Weiß, abgerundet, fetter Text (Custom-URL + Voice-Agent) */
.btn-pos-{{ screen }} {
position: fixed;
z-index: 9999;
padding: 10px 20px;
background: #fff;
color: #000;
border: none;
border-radius: 20px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.btn-pos-{{ screen }}-top-left { top: 16px; left: 16px; }
.btn-pos-{{ screen }}-top-center { top: 16px; left: 50%; transform: translateX(-50%); }
.btn-pos-{{ screen }}-top-right { top: 16px; right: 16px; }
.btn-pos-{{ screen }}-middle-left { top: 50%; left: 16px; transform: translateY(-50%); }
.btn-pos-{{ screen }}-middle-center { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.btn-pos-{{ screen }}-middle-right { top: 50%; right: 16px; transform: translateY(-50%); }
.btn-pos-{{ screen }}-bottom-left { bottom: {% if newsticker_enabled %}56px{% else %}16px{% endif %}; left: 16px; }
.btn-pos-{{ screen }}-bottom-center { bottom: {% if newsticker_enabled %}56px{% else %}16px{% endif %}; left: 50%; transform: translateX(-50%); }
.btn-pos-{{ screen }}-bottom-right { bottom: {% if newsticker_enabled %}56px{% else %}16px{% endif %}; right: 16px; }
</style>
{% if custom_url_target == "redirect" %}
<!-- Direkt-Weiterleitung (verlässt den Player) -->
<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);">
class="btn-pos-{{ screen }} btn-pos-{{ screen }}-{{ custom_url_position|default('top-left') }}">
{{ custom_url_label or "Info" }}
</a>
{% else %}
<!-- iframe-Overlay (bleibt im Player, Zurück-Button) -->
<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);">
<button onclick='openOverlay({{ custom_url | tojson }}, "{{ custom_url_position|default('top-left') }}")'
class="btn-pos-{{ screen }} btn-pos-{{ screen }}-{{ custom_url_position|default('top-left') }}">
{{ custom_url_label or "Info" }}
</button>
{% endif %}
{% endif %}
<!-- ═══════════════════════════════════════════════════
Voice-Agent-Button (fix positioniert, 9 Positionen)
Typewriter-Tagline, optionales DVA-Bild, animierte
Balken, Verhalten overlay/redirect. Bottom-Positionen
weichen dem Newsticker aus.
═══════════════════════════════════════════════════ -->
{% if voice_agent_url and voice_agent_enabled %}
<style>
/* Voice-Agent-Wrap: Fixpositionierter Container, Column-Layout für Bild + Button */
.voice-wrap-{{ screen }} {
position: fixed;
z-index: 9998;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.voice-pos-{{ screen }} .voice-text-{{ screen }} {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
line-height: 1.3;
min-width: 160px;
}
/* Typewriter-Tagline: Mehrsprachig, Buchstabe für Buchstabe, 0,8 s Fade-Out */
.voice-pos-{{ screen }} .voice-text-{{ screen }} .voice-tagline-{{ screen }} {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: #888;
height: 1.2em;
line-height: 1.2em;
white-space: nowrap;
transition: opacity 0.8s ease;
}
.voice-pos-{{ screen }} .voice-text-{{ screen }} .voice-label-{{ screen }} {
display: block;
font-size: 1.05rem;
font-weight: 600;
color: #000;
}
.voice-pos-{{ screen }} .voice-text-{{ screen }} .voice-tagline-{{ screen }} .cursor {
display: inline-block;
width: 2px;
height: 1em;
background: #DA002D;
margin-left: 2px;
animation: voice-blink-{{ screen }} 0.6s step-end infinite;
vertical-align: text-bottom;
}
@keyframes voice-blink-{{ screen }} {
50% { opacity: 0; }
}
/* Optionales DVA-Bild (dva.png) oberhalb des Buttons, Beta-Feature */
.voice-wrap-{{ screen }} .voice-img-{{ screen }} {
width: 200px;
aspect-ratio: 648 / 596;
margin-bottom: 6px;
background: url('/static/dva.png') no-repeat center/contain;
flex-shrink: 0;
}
/* Voice-Agent-Button: Weiß, 20 px Border-Radius, fett – einheitlich mit Aktions-Button */
.voice-pos-{{ screen }} {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 20px;
gap: 12px;
min-width: 280px;
height: 56px;
background: #fff;
color: #000;
border: none;
border-radius: 20px;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.voice-pos-{{ screen }}:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.voice-pos-{{ screen }} .voice-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: auto;
flex-shrink: 0;
}
/* Animierte Balken (5 Stück): Welle-Effekt mit abgestuften Verzögerungen */
.voice-pos-{{ screen }} .voice-icon .bar {
width: 3px;
border-radius: 2px;
background: #DA002D;
transform-origin: center bottom;
animation: voice-bar-{{ screen }} 0.6s ease-in-out infinite alternate;
}
.voice-pos-{{ screen }} .voice-icon .bar:nth-child(1) { height: 10px; animation-delay: 0.0s; }
.voice-pos-{{ screen }} .voice-icon .bar:nth-child(2) { height: 16px; animation-delay: 0.2s; }
.voice-pos-{{ screen }} .voice-icon .bar:nth-child(3) { height: 22px; animation-delay: 0.4s; }
.voice-pos-{{ screen }} .voice-icon .bar:nth-child(4) { height: 14px; animation-delay: 0.1s; }
.voice-pos-{{ screen }} .voice-icon .bar:nth-child(5) { height: 8px; animation-delay: 0.3s; }
@keyframes voice-bar-{{ screen }} {
0% { transform: scaleY(0.4); }
100% { transform: scaleY(1.2); }
}
/* Voice-Agent-Positionen: 9 Positionen (oben/mitte/unten × links/mitte/rechts), Bottom weicht Newsticker aus */
.voice-wrap-{{ screen }}-top-left { top: 16px; left: 16px; }
.voice-wrap-{{ screen }}-top-center { top: 16px; left: 50%; transform: translateX(-50%); }
.voice-wrap-{{ screen }}-top-right { top: 16px; right: 16px; }
.voice-wrap-{{ screen }}-middle-left { top: 50%; left: 16px; transform: translateY(-50%); }
.voice-wrap-{{ screen }}-middle-center { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.voice-wrap-{{ screen }}-middle-right { top: 50%; right: 16px; transform: translateY(-50%); }
.voice-wrap-{{ screen }}-bottom-left { bottom: calc({% if newsticker_enabled %}56px{% else %}16px{% endif %}); left: 16px; }
.voice-wrap-{{ screen }}-bottom-center { bottom: calc({% if newsticker_enabled %}56px{% else %}16px{% endif %}); left: 50%; transform: translateX(-50%); }
.voice-wrap-{{ screen }}-bottom-right { bottom: calc({% if newsticker_enabled %}56px{% else %}16px{% endif %}); right: 16px; }
</style>
<!-- Voice-Agent-Wrap: Fixpositionierter Container mit Button + optionalem Bild -->
<div class="voice-wrap-{{ screen }} voice-wrap-{{ screen }}-{{ voice_agent_position|default('top-left') }}">
{% if voice_agent_show_image %}<span class="voice-img-{{ screen }}"></span>{% endif %}
{% if voice_agent_target == "redirect" %}
<a href="{{ voice_agent_url }}"
class="voice-pos-{{ screen }}">
<span class="voice-icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
<span class="voice-text-{{ screen }}">
<span class="voice-tagline-{{ screen }}" id="voice-tagline-{{ screen }}"></span>
<span class="voice-label-{{ screen }}">{{ voice_agent_label or "Digitaler Assistent" }}</span>
</span>
</a>
{% else %}
<button onclick='openOverlay({{ voice_agent_url | tojson }}, "{{ voice_agent_position|default('top-left') }}")'
class="voice-pos-{{ screen }}">
<span class="voice-icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
<span class="voice-text-{{ screen }}">
<span class="voice-tagline-{{ screen }}" id="voice-tagline-{{ screen }}"></span>
<span class="voice-label-{{ screen }}">{{ voice_agent_label or "Digitaler Assistent" }}</span>
</span>
</button>
{% endif %}
</div>
{% endif %}
<!-- ─── Medien-Elemente (eines ist jeweils sichtbar) ─── -->
<img id="image">
<video id="video" muted autoplay playsinline></video>
@@ -135,11 +323,13 @@
let playerTimer = null;
// ─── Custom-URL-Overlay ───
function openOverlay(url) {
// ─── Custom-URL/Voice-Agent-Overlay (open/close mit Zurück-Button-Position-Tracking) ───
function openOverlay(url, pos) {
if (playerTimer) clearTimeout(playerTimer);
document.getElementById("overlay").style.display = "block";
document.getElementById("overlay-iframe").src = url;
var backBtn = document.getElementById("overlay-back");
backBtn.className = "overlay-back-" + (pos || "top-left");
}
function closeOverlay() {
@@ -162,8 +352,10 @@ updateClock();
const normalFiles = {{ normal_files | tojson }};
const prioFiles = {{ prio_files | tojson }};
const interval = {{ interval }} * 1000;
const screen = "{{ screen }}";
const site = "{{ site }}";
const stayOnFirst = {{ "true" if stay_on_first else "false" }};
const screen = "{{ screen }}";
const site = "{{ site }}";
// stayOnFirst: Player bleibt auf erstem Element (kein Timer/Advance)
// ─── Player-Status ───
let normalIndex = 0;
@@ -270,7 +462,7 @@ function playNext() {
iframe.style.height = `100vh`;
iframe.style.transform = `translate(-50%, -50%)`;
}
playerTimer = setTimeout(playNext, interval);
if (!stayOnFirst) playerTimer = setTimeout(playNext, interval);
return;
}
@@ -279,7 +471,7 @@ function playNext() {
if (isVideo(item)) {
vid.style.display = "block";
vid.src = src;
vid.onended = playNext;
vid.onended = stayOnFirst ? null : playNext;
vid.play();
} else if (isHtml(item)) {
iframe.style.display = "block";
@@ -312,6 +504,51 @@ async function checkForUpdates() {
}
}
// ─── Voice-Agent-Tagline Typewriter ───
// Wechselt mehrsprachige Sätze, Buchstabe für Buchstabe, 2,5 s Pause, 0,8 s Fade-Out
(function() {
const el = document.getElementById('voice-tagline-{{ screen }}');
if (!el) return;
const phrases = [
"Always ready to help",
"How can I assist you?",
"Questions? Just ask.",
"Wie kann ich helfen?",
"Ich bin für Sie da",
"Sprechen Sie mich einfach an",
"Comment puis-je vous aider?",
"¿En qué puedo ayudarle?",
"Come posso aiutarti?",
"I'm here for you",
"Let me know what you need"
];
let idx = 0, charIdx = 0, fading = false;
function type() {
if (fading) {
el.style.opacity = '0';
fading = false;
setTimeout(function() {
el.textContent = '';
el.style.opacity = '1';
setTimeout(type, 200);
}, 800);
return;
}
const phrase = phrases[idx % phrases.length];
if (charIdx < phrase.length) {
el.textContent = phrase.slice(0, charIdx + 1);
charIdx++;
setTimeout(type, 50 + Math.random() * 30);
} else {
charIdx = 0;
idx++;
fading = true;
setTimeout(type, 2500);
}
}
type();
})();
// ─── Start ───
playNext();
setInterval(checkForUpdates, 5000);