feat(Q4): kiosk ambient mode with camera rotation, alert takeover, dimming
Add GET /kiosk/ambient route and standalone fullscreen template with rotating camera snapshots (crossfade), top bar clock/date, pet status bottom bar, SSE-driven alert takeover with HLS playback, configurable screen dimming, and 6-hour auto-refresh. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
parent
d69bf6d6af
commit
b4dbb41624
29
tests/unit/test_kiosk_ambient.py
Normal file
29
tests/unit/test_kiosk_ambient.py
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import pytest
|
||||||
|
from vigilar.config import VigilarConfig
|
||||||
|
from vigilar.web.app import create_app
|
||||||
|
|
||||||
|
|
||||||
|
@pytest.fixture
|
||||||
|
def kiosk_app():
|
||||||
|
cfg = VigilarConfig()
|
||||||
|
app = create_app(cfg)
|
||||||
|
app.config["TESTING"] = True
|
||||||
|
return app
|
||||||
|
|
||||||
|
|
||||||
|
def test_ambient_route_exists(kiosk_app):
|
||||||
|
with kiosk_app.test_client() as c:
|
||||||
|
rv = c.get("/kiosk/ambient")
|
||||||
|
assert rv.status_code == 200
|
||||||
|
|
||||||
|
|
||||||
|
def test_ambient_contains_clock(kiosk_app):
|
||||||
|
with kiosk_app.test_client() as c:
|
||||||
|
rv = c.get("/kiosk/ambient")
|
||||||
|
assert b"clock" in rv.data
|
||||||
|
|
||||||
|
|
||||||
|
def test_ambient_contains_hls(kiosk_app):
|
||||||
|
with kiosk_app.test_client() as c:
|
||||||
|
rv = c.get("/kiosk/ambient")
|
||||||
|
assert b"hls.min.js" in rv.data
|
||||||
@ -1,4 +1,4 @@
|
|||||||
"""Kiosk blueprint — fullscreen 2x2 grid for TV display."""
|
"""Kiosk blueprint — fullscreen 2x2 grid and ambient mode."""
|
||||||
|
|
||||||
from flask import Blueprint, current_app, render_template
|
from flask import Blueprint, current_app, render_template
|
||||||
|
|
||||||
@ -10,3 +10,12 @@ def kiosk_view():
|
|||||||
cfg = current_app.config.get("VIGILAR_CONFIG")
|
cfg = current_app.config.get("VIGILAR_CONFIG")
|
||||||
cameras = cfg.cameras if cfg else []
|
cameras = cfg.cameras if cfg else []
|
||||||
return render_template("kiosk.html", cameras=cameras)
|
return render_template("kiosk.html", cameras=cameras)
|
||||||
|
|
||||||
|
|
||||||
|
@kiosk_bp.route("/ambient")
|
||||||
|
def ambient_view():
|
||||||
|
cfg = current_app.config.get("VIGILAR_CONFIG")
|
||||||
|
cameras = cfg.cameras if cfg else []
|
||||||
|
raw_kiosk = cfg.kiosk if cfg and hasattr(cfg, "kiosk") else None
|
||||||
|
kiosk_cfg = raw_kiosk.model_dump() if raw_kiosk is not None and hasattr(raw_kiosk, "model_dump") else raw_kiosk
|
||||||
|
return render_template("kiosk/ambient.html", cameras=cameras, kiosk_config=kiosk_cfg)
|
||||||
|
|||||||
465
vigilar/web/templates/kiosk/ambient.html
Normal file
465
vigilar/web/templates/kiosk/ambient.html
Normal file
@ -0,0 +1,465 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="refresh" content="21600">
|
||||||
|
<title>Vigilar — Ambient</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
landscape: orientation;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Layout ── */
|
||||||
|
#ambient-root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Top bar (10%) ── */
|
||||||
|
#top-bar {
|
||||||
|
flex: 0 0 10%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||||
|
}
|
||||||
|
#clock {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 200;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
#date-label {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #aaa;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#weather-label {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #aaa;
|
||||||
|
min-width: 6rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Center camera (70%) ── */
|
||||||
|
#camera-area {
|
||||||
|
flex: 0 0 70%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.cam-slide {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s ease-in-out;
|
||||||
|
}
|
||||||
|
.cam-slide.visible { opacity: 1; }
|
||||||
|
.cam-slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.cam-label {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
left: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 1px 4px rgba(0,0,0,0.9);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.live-dot {
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #22c55e;
|
||||||
|
flex-shrink: 0;
|
||||||
|
animation: live-pulse 2s infinite;
|
||||||
|
}
|
||||||
|
@keyframes live-pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.35; }
|
||||||
|
}
|
||||||
|
#no-camera {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
color: #555;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bottom bar (20%) ── */
|
||||||
|
#bottom-bar {
|
||||||
|
flex: 0 0 20%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.07);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
#bottom-bar::-webkit-scrollbar { display: none; }
|
||||||
|
.pet-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
min-width: 7rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
.pet-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e5e7eb;
|
||||||
|
}
|
||||||
|
.pet-location {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pet-time {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
#bottom-placeholder {
|
||||||
|
color: #555;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Alert takeover ── */
|
||||||
|
#alert-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: #000;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
#alert-overlay.active { display: flex; }
|
||||||
|
#alert-video-wrap {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#alert-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
#alert-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.25rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
padding: 0.4rem 1.25rem;
|
||||||
|
border-radius: 99px;
|
||||||
|
background: rgba(220, 53, 69, 0.9);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
#alert-countdown {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Dim overlay ── */
|
||||||
|
#dim-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#dim-overlay.active { display: block; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="ambient-root">
|
||||||
|
<div id="top-bar">
|
||||||
|
<div id="clock">--:--</div>
|
||||||
|
<div id="date-label">Loading…</div>
|
||||||
|
<div id="weather-label">—</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="camera-area">
|
||||||
|
<div id="cam-slide-a" class="cam-slide visible">
|
||||||
|
<img id="cam-img-a" src="" alt="">
|
||||||
|
<div class="cam-label"><span class="live-dot"></span><span id="cam-name-a"></span></div>
|
||||||
|
</div>
|
||||||
|
<div id="cam-slide-b" class="cam-slide">
|
||||||
|
<img id="cam-img-b" src="" alt="">
|
||||||
|
<div class="cam-label"><span class="live-dot"></span><span id="cam-name-b"></span></div>
|
||||||
|
</div>
|
||||||
|
<div id="no-camera" style="display:none;">No cameras configured</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="bottom-bar">
|
||||||
|
<span id="bottom-placeholder">Loading pet status…</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Alert takeover -->
|
||||||
|
<div id="alert-overlay">
|
||||||
|
<div id="alert-video-wrap">
|
||||||
|
<video id="alert-video" autoplay muted playsinline></video>
|
||||||
|
<div id="alert-badge">Alert</div>
|
||||||
|
<div id="alert-countdown"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Screen dim overlay -->
|
||||||
|
<div id="dim-overlay"></div>
|
||||||
|
|
||||||
|
<script src="/static/js/hls.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// ── Config (from server, with JS fallbacks) ──────────────────────────
|
||||||
|
const serverCfg = {{ kiosk_config | tojson }};
|
||||||
|
const cfg = {
|
||||||
|
rotation_interval_s: (serverCfg && serverCfg.rotation_interval_s) || 10,
|
||||||
|
dim_start: (serverCfg && serverCfg.dim_start) || "23:00",
|
||||||
|
dim_end: (serverCfg && serverCfg.dim_end) || "06:00",
|
||||||
|
alert_timeout_s: (serverCfg && serverCfg.alert_timeout_s) || 30,
|
||||||
|
predator_alert_timeout_s: (serverCfg && serverCfg.predator_alert_timeout_s) || 60,
|
||||||
|
};
|
||||||
|
|
||||||
|
const cameras = {{ cameras | tojson }};
|
||||||
|
|
||||||
|
// ── Clock & Date ─────────────────────────────────────────────────────
|
||||||
|
function updateClock() {
|
||||||
|
const now = new Date();
|
||||||
|
const hh = String(now.getHours()).padStart(2, '0');
|
||||||
|
const mm = String(now.getMinutes()).padStart(2, '0');
|
||||||
|
document.getElementById('clock').textContent = hh + ':' + mm;
|
||||||
|
|
||||||
|
const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
|
||||||
|
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||||
|
document.getElementById('date-label').textContent =
|
||||||
|
days[now.getDay()] + ', ' + months[now.getMonth()] + ' ' + now.getDate();
|
||||||
|
}
|
||||||
|
updateClock();
|
||||||
|
setInterval(updateClock, 60000);
|
||||||
|
|
||||||
|
// ── Screen dimming ───────────────────────────────────────────────────
|
||||||
|
function parseTOD(str) {
|
||||||
|
const [h, m] = str.split(':').map(Number);
|
||||||
|
return h * 60 + (m || 0);
|
||||||
|
}
|
||||||
|
function checkDim() {
|
||||||
|
const now = new Date();
|
||||||
|
const cur = now.getHours() * 60 + now.getMinutes();
|
||||||
|
const start = parseTOD(cfg.dim_start);
|
||||||
|
const end = parseTOD(cfg.dim_end);
|
||||||
|
let dimmed;
|
||||||
|
if (start > end) {
|
||||||
|
// spans midnight
|
||||||
|
dimmed = cur >= start || cur < end;
|
||||||
|
} else {
|
||||||
|
dimmed = cur >= start && cur < end;
|
||||||
|
}
|
||||||
|
document.getElementById('dim-overlay').classList.toggle('active', dimmed);
|
||||||
|
}
|
||||||
|
checkDim();
|
||||||
|
setInterval(checkDim, 60000);
|
||||||
|
|
||||||
|
// ── Camera rotation ──────────────────────────────────────────────────
|
||||||
|
let camIndex = 0;
|
||||||
|
let activeSlot = 'a'; // 'a' or 'b'
|
||||||
|
|
||||||
|
function snapshotUrl(cam) {
|
||||||
|
return '/cameras/' + cam.id + '/snapshot';
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadCamera(slot, cam) {
|
||||||
|
const img = document.getElementById('cam-img-' + slot);
|
||||||
|
const name = document.getElementById('cam-name-' + slot);
|
||||||
|
img.src = snapshotUrl(cam) + '?t=' + Date.now();
|
||||||
|
name.textContent = cam.display_name;
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotateCameras() {
|
||||||
|
if (!cameras || cameras.length === 0) {
|
||||||
|
document.getElementById('no-camera').style.display = 'flex';
|
||||||
|
document.getElementById('cam-slide-a').style.display = 'none';
|
||||||
|
document.getElementById('cam-slide-b').style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextSlot = activeSlot === 'a' ? 'b' : 'a';
|
||||||
|
camIndex = (camIndex + 1) % cameras.length;
|
||||||
|
|
||||||
|
loadCamera(nextSlot, cameras[camIndex]);
|
||||||
|
|
||||||
|
// Crossfade
|
||||||
|
const showing = document.getElementById('cam-slide-' + activeSlot);
|
||||||
|
const incoming = document.getElementById('cam-slide-' + nextSlot);
|
||||||
|
incoming.classList.add('visible');
|
||||||
|
setTimeout(() => {
|
||||||
|
showing.classList.remove('visible');
|
||||||
|
activeSlot = nextSlot;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial load
|
||||||
|
if (cameras && cameras.length > 0) {
|
||||||
|
loadCamera('a', cameras[0]);
|
||||||
|
if (cameras.length > 1) {
|
||||||
|
loadCamera('b', cameras[1]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
document.getElementById('no-camera').style.display = 'flex';
|
||||||
|
document.getElementById('cam-slide-a').style.display = 'none';
|
||||||
|
document.getElementById('cam-slide-b').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(rotateCameras, cfg.rotation_interval_s * 1000);
|
||||||
|
|
||||||
|
// ── Pet status ───────────────────────────────────────────────────────
|
||||||
|
function timeAgo(isoStr) {
|
||||||
|
if (!isoStr) return '';
|
||||||
|
const diff = Math.floor((Date.now() - new Date(isoStr).getTime()) / 1000);
|
||||||
|
if (diff < 60) return diff + 's ago';
|
||||||
|
if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
|
||||||
|
return Math.floor(diff / 3600) + 'h ago';
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchPetStatus() {
|
||||||
|
fetch('/pets/api/status')
|
||||||
|
.then(r => r.ok ? r.json() : null)
|
||||||
|
.then(data => {
|
||||||
|
const bar = document.getElementById('bottom-bar');
|
||||||
|
const placeholder = document.getElementById('bottom-placeholder');
|
||||||
|
if (!data || !data.pets || data.pets.length === 0) {
|
||||||
|
if (placeholder) placeholder.textContent = 'No pets tracked';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (placeholder) placeholder.remove();
|
||||||
|
|
||||||
|
// Rebuild pet cards (preserve existing to avoid flicker on re-render)
|
||||||
|
bar.innerHTML = '';
|
||||||
|
data.pets.forEach(pet => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'pet-card';
|
||||||
|
card.innerHTML =
|
||||||
|
'<div class="pet-name">' + (pet.name || 'Unknown') + '</div>' +
|
||||||
|
'<div class="pet-location">' + (pet.last_camera || '—') + '</div>' +
|
||||||
|
'<div class="pet-time">' + timeAgo(pet.last_seen) + '</div>';
|
||||||
|
bar.appendChild(card);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchPetStatus();
|
||||||
|
setInterval(fetchPetStatus, 30000);
|
||||||
|
|
||||||
|
// ── Alert takeover (SSE) ─────────────────────────────────────────────
|
||||||
|
let alertTimer = null;
|
||||||
|
let alertHls = null;
|
||||||
|
|
||||||
|
function dismissAlert() {
|
||||||
|
if (alertTimer) { clearTimeout(alertTimer); alertTimer = null; }
|
||||||
|
if (alertHls) { alertHls.destroy(); alertHls = null; }
|
||||||
|
const vid = document.getElementById('alert-video');
|
||||||
|
vid.src = '';
|
||||||
|
document.getElementById('alert-overlay').classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showAlert(event) {
|
||||||
|
const overlay = document.getElementById('alert-overlay');
|
||||||
|
const badge = document.getElementById('alert-badge');
|
||||||
|
const countdown = document.getElementById('alert-countdown');
|
||||||
|
const vid = document.getElementById('alert-video');
|
||||||
|
|
||||||
|
// Dismiss any previous alert
|
||||||
|
dismissAlert();
|
||||||
|
|
||||||
|
// Set badge text
|
||||||
|
const label = event.type || 'Alert';
|
||||||
|
badge.textContent = label;
|
||||||
|
|
||||||
|
// Choose timeout
|
||||||
|
const isPredator = (event.type || '').toLowerCase().includes('predator');
|
||||||
|
const timeout = (isPredator ? cfg.predator_alert_timeout_s : cfg.alert_timeout_s) * 1000;
|
||||||
|
|
||||||
|
// Load HLS feed if camera provided
|
||||||
|
if (event.camera_id) {
|
||||||
|
const hlsUrl = '/cameras/' + event.camera_id + '/stream.m3u8';
|
||||||
|
if (Hls && Hls.isSupported()) {
|
||||||
|
alertHls = new Hls();
|
||||||
|
alertHls.loadSource(hlsUrl);
|
||||||
|
alertHls.attachMedia(vid);
|
||||||
|
} else if (vid.canPlayType('application/vnd.apple.mpegurl')) {
|
||||||
|
vid.src = hlsUrl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
overlay.classList.add('active');
|
||||||
|
|
||||||
|
// Countdown display
|
||||||
|
let remaining = Math.ceil(timeout / 1000);
|
||||||
|
countdown.textContent = remaining + 's';
|
||||||
|
const countdownInterval = setInterval(() => {
|
||||||
|
remaining -= 1;
|
||||||
|
countdown.textContent = remaining + 's';
|
||||||
|
if (remaining <= 0) clearInterval(countdownInterval);
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
alertTimer = setTimeout(() => {
|
||||||
|
clearInterval(countdownInterval);
|
||||||
|
dismissAlert();
|
||||||
|
}, timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
// SSE listener
|
||||||
|
function connectSSE() {
|
||||||
|
const es = new EventSource('/events/stream');
|
||||||
|
es.onmessage = function (e) {
|
||||||
|
try {
|
||||||
|
const event = JSON.parse(e.data);
|
||||||
|
if (event && event.type) {
|
||||||
|
showAlert(event);
|
||||||
|
}
|
||||||
|
} catch (_) {}
|
||||||
|
};
|
||||||
|
es.onerror = function () {
|
||||||
|
es.close();
|
||||||
|
// Reconnect after 5s
|
||||||
|
setTimeout(connectSSE, 5000);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
connectSSE();
|
||||||
|
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user