npm - iobroker.agent-dvr - Versions diffs - 0.0.4 → 0.0.6 - Mend

iobroker.agent-dvr 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.de.md +51 -0
package/README.md +51 -0
package/admin/custom/go2rtcMapping.js +169 -0
package/admin/i18n/de.json +97 -1
package/admin/i18n/en.json +97 -1
package/admin/i18n/es.json +97 -1
package/admin/i18n/fr.json +97 -1
package/admin/i18n/it.json +97 -1
package/admin/i18n/nl.json +97 -1
package/admin/i18n/pl.json +97 -1
package/admin/i18n/pt.json +97 -1
package/admin/i18n/ru.json +97 -1
package/admin/i18n/uk.json +97 -1
package/admin/i18n/zh-cn.json +97 -1
package/admin/jsonConfig.json +643 -35
package/build/main.js +194 -12
package/build/main.js.map +2 -2
package/io-package.json +77 -7
package/lib/web.js +296 -0
package/package.json +2 -1
package/www/index.html +1262 -0

package/www/index.html ADDED Viewed

@@ -0,0 +1,1262 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>AgentDVR</title>
+<style>
+:root{
+  --bg:#080b0f;--s1:#0d1117;--s2:#131a22;--s3:#1a2332;
+  --border:#1e2a38;--border2:#253040;
+  --accent:#2563eb;--accent-l:#3b82f6;--accent-glow:rgba(37,99,235,.25);
+  --text:#dde4ef;--muted:#556070;--muted2:#3a4858;
+  --green:#22c55e;--red:#ef4444;--orange:#f97316;--yellow:#eab308;
+  --radius:8px;--gap:6px;
+}
+*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
+html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:14px}
+/* ── Header ── */
+#hdr{height:50px;background:rgba(8,11,15,.97);border-bottom:1px solid var(--border);
+  display:flex;align-items:center;gap:0;padding:0 14px;flex-shrink:0;backdrop-filter:blur(12px)}
+#nav{display:flex;gap:2px}
+.nav-btn{background:none;border:none;color:var(--muted);padding:6px 14px;border-radius:6px;
+  cursor:pointer;font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .15s}
+.nav-btn:hover{color:var(--text);background:var(--s2)}
+.nav-btn.active{color:var(--accent-l);background:rgba(37,99,235,.12)}
+.hdr-r{margin-left:auto;display:flex;align-items:center;gap:12px}
+#conn-wrap{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
+#conn-dot{width:7px;height:7px;border-radius:50%;background:var(--red);transition:background .4s;flex-shrink:0}
+#conn-dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
+/* ── Layout ── */
+#app{display:flex;flex-direction:column;height:100dvh}
+main{flex:1;overflow:hidden;min-height:0;position:relative}
+.view{display:none;height:100%;flex-direction:column}
+.view.active{display:flex}
+/* ── Live view ── */
+#view-live{padding:var(--gap);gap:var(--gap);background:var(--bg)}
+#chip-bar{flex-shrink:0;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
+.chip{background:var(--s1);border:1px solid var(--border);border-radius:99px;
+  padding:4px 12px;font-size:12px;cursor:pointer;user-select:none;color:var(--muted);
+  transition:all .15s;white-space:nowrap}
+.chip:hover{border-color:var(--border2);color:var(--text)}
+.chip.on{background:rgba(37,99,235,.15);border-color:var(--accent);color:var(--accent-l)}
+#cam-grid{flex:1;min-height:0;display:grid;gap:var(--gap)}
+.cam-tile{background:#000;border-radius:var(--radius);overflow:hidden;position:relative;
+  cursor:pointer;min-width:0;min-height:0;border:2px solid transparent;
+  transition:border-color .2s,box-shadow .2s}
+.cam-tile:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 16px var(--accent-glow)}
+.cam-tile.detected{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow),0 0 14px rgba(234,179,8,.2)}
+.cam-tile.alerted{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 14px rgba(249,115,22,.2)}
+.cam-tile.recording{border-color:var(--red)!important;box-shadow:0 0 0 1px var(--red),0 0 14px rgba(239,68,68,.25)!important}
+.cam-tile img{width:100%;height:100%;object-fit:contain;display:block}
+.cam-bottom{position:absolute;bottom:0;left:0;right:0;
+  background:linear-gradient(transparent,rgba(0,0,0,.75));
+  padding:18px 8px 5px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
+.cam-name{font-size:11px;font-weight:500;text-shadow:0 1px 3px #000;white-space:nowrap;
+  overflow:hidden;text-overflow:ellipsis}
+.cam-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 4px currentColor}
+.cam-dot.on{background:var(--green);color:var(--green)}
+.cam-dot.off{background:var(--red);color:var(--red)}
+/* Tile buttons — opacity controlled by --btn-base-opacity (0=hover-only, 1=always visible) */
+.tile-btns{position:absolute;top:7px;right:7px;display:flex;gap:4px;align-items:center;pointer-events:all}
+.tile-btn{width:28px;height:28px;border-radius:6px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.45);
+  color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;
+  cursor:pointer;opacity:var(--btn-base-opacity,0);transition:opacity .15s,background .15s;
+  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.7)}
+.cam-tile:hover .tile-btn{opacity:1}
+.tile-btn:hover,.ptz-btn.active{background:rgba(37,99,235,.85);border-color:var(--accent);opacity:1;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.7),0 0 10px var(--accent-glow)}
+.rec-btn.active{background:rgba(239,68,68,.85)!important;border-color:var(--red)!important;opacity:1!important;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.7),0 0 10px rgba(239,68,68,.4)!important}
+.rec-btn:hover{background:rgba(239,68,68,.7)!important;border-color:var(--red)!important}
+#fs-panel.detected::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px var(--yellow);z-index:1}
+#fs-panel.alerted::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px var(--orange);z-index:1}
+#fs-panel.recording::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px var(--red);z-index:1}
+/* PTZ overlay */
+.ptz-overlay{position:absolute;inset:0;display:none;flex-direction:column;
+  align-items:center;justify-content:center;gap:8px;
+  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);border-radius:var(--radius)}
+.ptz-overlay.open{display:flex}
+.ptz-pad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:3px}
+.ptz-key{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
+  border-radius:6px;color:#fff;font-size:16px;display:flex;align-items:center;
+  justify-content:center;cursor:pointer;user-select:none;touch-action:none;
+  -webkit-touch-callout:none;-webkit-user-select:none;
+  transition:background .1s,transform .1s}
+.ptz-key:active,.ptz-key.held{background:rgba(37,99,235,.6);border-color:var(--accent);transform:scale(.93)}
+.ptz-key.empty{background:none;border-color:transparent;cursor:default;pointer-events:none}
+.ptz-zoom{display:flex;gap:6px}
+.ptz-zoom .ptz-key{width:60px;height:36px;font-size:14px}
+.ptz-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
+  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);color:#fff;
+  font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
+/* Empty state */
+.empty-state{display:flex;align-items:center;justify-content:center;color:var(--muted);
+  font-size:14px;height:100%;flex-direction:column;gap:8px}
+.empty-state svg{opacity:.3}
+/* ── Recordings view ── */
+#view-rec{background:var(--s1);overflow:hidden}
+#rec-filter-bar{flex-shrink:0;padding:10px 12px;background:var(--s1);
+  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+#rec-search{background:var(--s2);border:1px solid var(--border2);color:var(--text);
+  padding:7px 12px;border-radius:var(--radius);font-size:13px;width:180px;outline:none;
+  transition:border-color .15s}
+#rec-search:focus{border-color:var(--accent)}
+#rec-cam-sel{background:var(--s2);border:1px solid var(--border2);color:var(--text);
+  padding:7px 10px;border-radius:var(--radius);font-size:13px;outline:none;cursor:pointer}
+#rec-tags{display:flex;gap:5px;flex-wrap:wrap}
+.tag-chip{background:var(--s2);border:1px solid var(--border2);border-radius:99px;
+  padding:4px 11px;font-size:12px;cursor:pointer;color:var(--muted);user-select:none;transition:all .15s}
+.tag-chip:hover{border-color:var(--border);color:var(--text)}
+.tag-chip.on{background:rgba(37,99,235,.15);border-color:var(--accent);color:var(--accent-l)}
+#rec-toolbar{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
+#rec-count{font-size:12px;color:var(--muted);white-space:nowrap}
+.rec-view-btn{background:var(--s2);border:1px solid var(--border2);color:var(--muted);
+  width:28px;height:28px;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;
+  justify-content:center;transition:all .15s;flex-shrink:0}
+.rec-view-btn:hover{color:var(--text);border-color:var(--border)}
+.rec-view-btn.active{color:var(--accent-l);background:rgba(37,99,235,.12);border-color:var(--accent)}
+/* ── Timeline ── */
+.tl-wrap{display:flex;flex-direction:column;gap:0;padding-bottom:4px}
+.tl-zoom{display:flex;align-items:center;gap:8px;margin-bottom:10px}
+.tl-zoom-btn{width:26px;height:26px;border-radius:6px;background:var(--s2);border:1px solid var(--border2);
+  color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;
+  justify-content:center;transition:all .15s}
+.tl-zoom-btn:hover:not(:disabled){background:var(--s3);border-color:var(--border)}
+.tl-zoom-btn:disabled{opacity:.3;cursor:default}
+.tl-zoom-lbl{font-size:12px;color:var(--muted);min-width:34px;text-align:center}
+.tl-scroll{overflow-x:auto;overflow-y:visible;padding-bottom:28px;margin-bottom:12px}
+.tl-scroll::-webkit-scrollbar{height:4px}
+.tl-scroll::-webkit-scrollbar-track{background:transparent}
+.tl-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
+.tl-inner{min-width:100%;display:flex;flex-direction:column;gap:14px}
+.tl-day-label{position:sticky;left:0;z-index:2;background:var(--s1);padding-right:10px;
+  font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;
+  letter-spacing:.05em;margin-bottom:6px}
+.tl-bar{position:relative;height:28px;background:var(--s2);border:1px solid var(--border);
+  border-radius:4px;overflow:visible}
+.tl-tick{position:absolute;top:30px;font-size:10px;color:var(--muted2);transform:translateX(-50%);
+  pointer-events:none;white-space:nowrap}
+.tl-tick::before{content:'';position:absolute;top:-30px;left:50%;width:1px;height:28px;
+  background:var(--border);opacity:.5}
+.tl-block{position:absolute;top:2px;height:calc(100% - 4px);min-width:4px;
+  background:var(--accent);border-radius:3px;cursor:pointer;opacity:.85;
+  transition:opacity .15s,filter .15s}
+.tl-block:hover{opacity:1;filter:brightness(1.2)}
+.tl-block[data-tag="Motion"]{background:var(--yellow)}
+.tl-block[data-tag="Alert"]{background:var(--orange)}
+/* ── Video nav ── */
+#vid-nav{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px}
+#vid-nav button{background:var(--s3);border:1px solid var(--border2);color:var(--text);
+  padding:5px 14px;border-radius:var(--radius);cursor:pointer;font-size:13px;transition:all .15s;
+  white-space:nowrap}
+#vid-nav button:hover:not(:disabled){background:rgba(37,99,235,.2);border-color:var(--accent);color:var(--accent-l)}
+#vid-nav button:disabled{opacity:.3;cursor:default}
+#vid-pos{font-size:12px;color:var(--muted);white-space:nowrap}
+#rec-scroll{flex:1;overflow-y:auto;padding:10px 12px}
+#rec-scroll::-webkit-scrollbar{width:5px}
+#rec-scroll::-webkit-scrollbar-track{background:transparent}
+#rec-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
+.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px}
+.rec-tile{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);
+  overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
+.rec-tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.45);border-color:var(--border2)}
+.rec-tile:active{transform:translateY(0)}
+.rec-thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
+.rec-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
+.rec-tile:hover .rec-thumb{transform:scale(1.04)}
+.rec-play-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
+  opacity:0;background:rgba(0,0,0,.35);transition:opacity .15s}
+.rec-tile:hover .rec-play-icon{opacity:1}
+.rec-play-icon svg{filter:drop-shadow(0 2px 6px #000)}
+.rec-badges{position:absolute;top:var(--rec-badge-top,5px);bottom:var(--rec-badge-bot,auto);right:var(--rec-badge-right,5px);left:var(--rec-badge-left,auto);display:flex;flex-direction:column;align-items:var(--rec-badge-align,flex-end);gap:3px}
+.badge{background:rgba(0,0,0,.65);border-radius:4px;padding:2px 6px;font-size:10px;
+  font-weight:500;letter-spacing:.3px;border:1px solid rgba(255,255,255,.1)}
+.badge.tag{color:var(--accent-l);border-color:rgba(37,99,235,.35)}
+.rec-info{padding:8px 10px 9px}
+.rec-date{font-size:12px;font-weight:600;color:var(--text)}
+.rec-meta{font-size:11px;color:var(--muted);margin-top:2px}
+.rec-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
+/* ── Persistent video panel ── */
+#vid-panel{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
+  background:rgba(0,0,0,.88)}
+#vid-panel.open{display:flex}
+#vid-box{position:relative;background:var(--s2);border:1px solid var(--border2);border-radius:12px;
+  padding:14px;width:min(1000px,97vw);box-shadow:0 24px 64px rgba(0,0,0,.7)}
+#vid-hdr{margin-bottom:10px;padding-right:36px}
+#vid-title{font-size:13px;font-weight:600}
+#vid-cam{font-size:11px;color:var(--muted);margin-top:1px}
+#vid-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
+  background:var(--s3);border:1px solid var(--border2);
+  color:var(--text);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
+#vid-close:hover{background:var(--red);border-color:var(--red)}
+#vid-el{width:100%;max-height:74dvh;background:#000;border-radius:6px;display:block;outline:none}
+#vid-meta{margin-top:8px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:12px}
+#vid-dl{margin-left:auto;color:var(--accent-l);text-decoration:none;display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;border:1px solid rgba(37,99,235,.35);transition:background .15s}
+#vid-dl:hover{background:rgba(37,99,235,.15)}
+/* ── Fullscreen cam ── */
+#fs-panel{position:fixed;inset:0;z-index:250;display:none;background:#000;flex-direction:column}
+#fs-panel.open{display:flex}
+#fs-hdr{height:44px;background:rgba(0,0,0,.7);display:flex;align-items:center;
+  padding:0 12px;gap:12px;flex-shrink:0}
+#fs-name{font-size:14px;font-weight:600}
+#fs-btns{display:flex;gap:6px;align-items:center;margin-left:auto}
+#fs-btns .tile-btn{opacity:1;width:32px;height:32px;font-size:16px}
+#fs-close{margin-left:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);
+  border:none;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}
+#fs-close:hover{background:rgba(255,255,255,.2)}
+#fs-body{flex:1;position:relative;min-height:0;display:flex}
+#fs-img{flex:1;width:100%;object-fit:contain;display:block;min-height:0}
+#fs-body .ptz-overlay{position:absolute;inset:0}
+/* ── Status bar ── */
+#sbar{height:24px;background:rgba(8,11,15,.97);border-top:1px solid var(--border);
+  display:flex;align-items:center;padding:0 14px;gap:16px;flex-shrink:0}
+#sbar-msg{font-size:11px;color:var(--muted);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+#sbar-msg.err{color:var(--red)}
+/* ── Info banner ── */
+#info-banner{display:none;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);
+  color:var(--orange);padding:9px 14px;margin:var(--gap);margin-bottom:0;border-radius:var(--radius);
+  font-size:12px;line-height:1.6;flex-shrink:0}
+#info-banner.visible{display:block}
+#info-banner button{margin-top:6px;background:var(--orange);color:#000;border:none;padding:3px 10px;
+  border-radius:4px;cursor:pointer;font-size:12px}
+/* ── Scrollbar global ── */
+::-webkit-scrollbar{width:5px;height:5px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
+/* ── WebRTC video in tiles ── */
+.cam-tile video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
+</style>
+</head>
+<body>
+<div id="app">
+<div id="hdr">
+  <div id="nav">
+    <button class="nav-btn active" onclick="showView('live')">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
+      Live
+    </button>
+    <button class="nav-btn" onclick="showView('rec')">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="14" height="3" rx="1"/><rect x="1" y="7" width="14" height="3" rx="1"/><rect x="1" y="12" width="14" height="3" rx="1"/></svg>
+      Aufnahmen
+    </button>
+  </div>
+  <div class="hdr-r">
+    <span id="conn-wrap"><div id="conn-dot"></div></span>
+  </div>
+</div>
+<main>
+  <!-- Live -->
+  <div id="view-live" class="view active">
+    <div id="info-banner"></div>
+    <div id="chip-bar"></div>
+    <div id="cam-grid"></div>
+  </div>
+  <!-- Recordings -->
+  <div id="view-rec" class="view">
+    <div id="rec-filter-bar">
+      <input id="rec-search" type="search" placeholder="&#128269; Suchen…" oninput="filterRec()">
+      <select id="rec-cam-sel" onchange="loadAndFilterRec()">
+        <option value="">Kamera wählen…</option>
+      </select>
+      <div id="rec-tags"></div>
+      <div id="rec-toolbar">
+        <span id="rec-count"></span>
+        <button id="rec-view-grid" class="rec-view-btn active" title="Rasteransicht" onclick="setRecView('grid')">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+            <rect x="0" y="0" width="6" height="6" rx="1"/><rect x="8" y="0" width="6" height="6" rx="1"/>
+            <rect x="0" y="8" width="6" height="6" rx="1"/><rect x="8" y="8" width="6" height="6" rx="1"/>
+          </svg>
+        </button>
+        <button id="rec-view-tl" class="rec-view-btn" title="Timeline" onclick="setRecView('timeline')">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+            <line x1="0" y1="4" x2="14" y2="4"/><rect x="2" y="2" width="4" height="4" rx="1" fill="currentColor"/>
+            <line x1="0" y1="10" x2="14" y2="10"/><rect x="7" y="8" width="5" height="4" rx="1" fill="currentColor"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div id="rec-scroll">
+      <div id="rec-grid" class="rec-grid"></div>
+    </div>
+  </div>
+</main>
+<div id="sbar"><span id="sbar-msg">Lade…</span></div>
+</div><!-- #app -->
+<!-- Video panel (persistent overlay, survives tab switch) -->
+<div id="vid-panel">
+  <div id="vid-box">
+    <button id="vid-close" onclick="closeVideo()">&#10005;</button>
+    <div id="vid-hdr">
+      <div id="vid-title"></div>
+      <div id="vid-cam"></div>
+    </div>
+    <video id="vid-el" controls playsinline preload="auto"></video>
+    <div id="vid-nav">
+      <button id="vid-prev" onclick="playRecIdx(recPlayIdx - 1)">&#8249; Vorherige</button>
+      <span id="vid-pos"></span>
+      <button id="vid-next" onclick="playRecIdx(recPlayIdx + 1)">Nächste &#8250;</button>
+    </div>
+    <div id="vid-meta">
+      <span id="vid-meta-txt"></span>
+      <a id="vid-dl" download>
+        <svg width="12" height="12" viewBox="0 0 10 11" fill="currentColor"><path d="M4.5 0h1v6.3l2.1-2.1.7.7L5 8.2 1.7 4.9l.7-.7 2.1 2.1V0zM0 10h10v1H0v-1z"/></svg>
+        Download
+      </a>
+    </div>
+  </div>
+</div>
+<!-- Fullscreen live cam -->
+<div id="fs-panel">
+  <div id="fs-hdr">
+    <span id="fs-name"></span>
+    <div id="fs-btns"></div>
+    <button id="fs-close" onclick="closeFs()">&#10005;</button>
+  </div>
+  <div id="fs-body">
+    <img id="fs-img" src="" alt="">
+    <video id="fs-vid" autoplay muted playsinline style="display:none;flex:1;width:100%;object-fit:contain;min-height:0;background:#000"></video>
+  </div>
+</div>
+<script>
+'use strict';
+/* ─────────────────────────── State ─────────────────────────── */
+let INST = 'agent-dvr.0', BASE = '', cameras = {}, hasPtz = false;
+let hidden = new Set(JSON.parse(localStorage.getItem('advr_hidden') || '[]'));
+let recAllItems = [];
+let recFilters  = { tag: '' };
+let recViewMode = localStorage.getItem('advr_rec_view') || 'grid';
+let recPlayList = [], recPlayIdx = -1;
+const TL_ZOOMS  = [1, 2, 4, 8, 24, 48];
+let tlZoomLevel = parseInt(localStorage.getItem('advr_tl_zoom') || '1', 10);
+if (!TL_ZOOMS.includes(tlZoomLevel)) tlZoomLevel = 1;
+let ptzHeld      = null;
+let refreshTimer = null;
+let go2rtcMap    = {}; // populated from CFG.go2rtcMapping after loadConfig()
+/* ─────────────────────────── Dashboard config ──────────────── */
+let CFG = {
+  dashDefaultView:     'live',
+  dashShowOffline:     true,
+  dashGridCols:        0,
+  dashBtnsVisible:     false,
+  dashRefreshSec:      60,
+  dashStreamReconnect: true,
+  dashColorBg:         '',
+  dashColorSurface:    '',
+  dashColorAccent:     '',
+  dashColorText:       '',
+  dashColorBorder:     '',
+  dashColorOnline:     '',
+  dashColorOffline:    '',
+  dashTagPosition:     'top-right',
+  go2rtcEnabled:       false,
+  go2rtcUrl:           '',
+  go2rtcMapping:       [],
+};
+const DASH_CSS_VARS = {
+  dashColorBg:      '--bg',
+  dashColorSurface: '--s1',
+  dashColorAccent:  '--accent',
+  dashColorText:    '--text',
+  dashColorBorder:  '--border',
+  dashColorOnline:  '--green',
+  dashColorOffline: '--red',
+};
+async function loadConfig() {
+  try {
+    const r = await fetch('/agent-dvr/api/config', { signal: AbortSignal.timeout(5000) });
+    if (r.ok) Object.assign(CFG, await r.json());
+  } catch (_) {}
+  document.documentElement.style.setProperty('--btn-base-opacity', CFG.dashBtnsVisible ? '1' : '0');
+  go2rtcMap = {};
+  (Array.isArray(CFG.go2rtcMapping) ? CFG.go2rtcMapping : []).forEach(row => {
+    if (row.camKey && row.stream) go2rtcMap[row.camKey] = row.stream;
+  });
+  for (const [key, prop] of Object.entries(DASH_CSS_VARS)) {
+    if (CFG[key]) document.documentElement.style.setProperty(prop, CFG[key]);
+  }
+  const [bv, bh] = (CFG.dashTagPosition || 'top-right').split('-');
+  document.documentElement.style.setProperty('--rec-badge-top',   bv === 'top'    ? '5px' : 'auto');
+  document.documentElement.style.setProperty('--rec-badge-bot',   bv === 'bottom' ? '5px' : 'auto');
+  document.documentElement.style.setProperty('--rec-badge-right', bh === 'right'  ? '5px' : 'auto');
+  document.documentElement.style.setProperty('--rec-badge-left',  bh === 'left'   ? '5px' : 'auto');
+  document.documentElement.style.setProperty('--rec-badge-align', bh === 'right'  ? 'flex-end' : 'flex-start');
+}
+/* ─────────────────────────── Init ──────────────────────────── */
+async function loadData() {
+  sbar('Lade Kameras…');
+  try {
+    const r = await fetch('/agent-dvr/api/cameras', { signal: AbortSignal.timeout(8000) });
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    const d = await r.json();
+    if (d.error) throw new Error(d.error);
+    INST = d.instance || 'agent-dvr.0';
+    BASE = d.base    || '';
+    cameras = d.cameras || {};
+    hasPtz  = Object.values(cameras).some(c => c.hasPtz);
+    const n = Object.keys(cameras).length;
+    if (!n) {
+      showBanner('<strong>Keine Kameras</strong><br>AgentDVR erreichbar? IP/Port in Adapter-Config prüfen.', true);
+      sbar('Keine Kameras · ' + INST, true);
+      return;
+    }
+    hideBanner();
+    sbar(n + ' Kamera(s) · ' + INST + (BASE ? ' · ' + BASE : ''));
+    syncChips();
+    syncGrid();
+    buildRecCamSel();
+    trySocket();
+    if (!refreshTimer) showView(CFG.dashDefaultView || 'live'); // only on first load
+    // Periodic refresh
+    if (refreshTimer) clearInterval(refreshTimer);
+    if (CFG.dashRefreshSec >= 10) {
+      refreshTimer = setInterval(() => loadData(), CFG.dashRefreshSec * 1000);
+    }
+  } catch (e) {
+    showBanner('<strong>Ladefehler</strong><br>' + esc(e.message), true);
+    sbar('Fehler: ' + e.message, true);
+  }
+}
+/* ─────────────────────────── Socket (live dot updates) ─────── */
+function trySocket() {
+  if (typeof io === 'undefined') return;
+  try {
+    const s = io({ transports: ['websocket','polling'], reconnection: true });
+    s.on('connect', () => {
+      connDot(true);
+      ['data.online','status.recording','status.detected','status.alerted'].forEach(p =>
+        s.emit('subscribe', INST + '.cam_*.' + p, () => {}));
+    });
+    s.on('disconnect', () => connDot(false));
+    s.on('stateChange', (id, state) => {
+      if (!state || !id.startsWith(INST + '.')) return;
+      const rel = id.slice(INST.length + 1);
+      const ck  = rel.split('.')[0];
+      if (!cameras[ck]) return;
+      if (rel.endsWith('.data.online')) {
+        cameras[ck].online = !!state.val;
+        const d = document.querySelector('.cam-tile[data-cam="' + ck + '"] .cam-dot');
+        if (d) d.className = 'cam-dot ' + (state.val ? 'on' : 'off');
+      } else if (rel.endsWith('.status.recording')) {
+        cameras[ck].recording = !!state.val;
+        const t = document.querySelector('.cam-tile[data-cam="' + ck + '"]');
+        if (t) { const rb = t.querySelector('.rec-btn'); if (rb) setTileRecording(t, rb, !!state.val); }
+      } else if (rel.endsWith('.status.detected')) {
+        cameras[ck].detected = !!state.val;
+        setTileStatus(ck, 'detected', !!state.val);
+      } else if (rel.endsWith('.status.alerted')) {
+        cameras[ck].alerted = !!state.val;
+        setTileStatus(ck, 'alerted', !!state.val);
+      }
+    });
+  } catch (_) {}
+}
+/* ─────────────────────────── Views ─────────────────────────── */
+function showView(name) {
+  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+  document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
+  document.getElementById('view-' + name).classList.add('active');
+  [...document.querySelectorAll('.nav-btn')].find(b => b.textContent.trim().toLowerCase().includes(name === 'live' ? 'live' : 'aufn'))?.classList.add('active');
+  if (name === 'live') updateLayout();
+}
+/* ─────────────────────────── Chips ─────────────────────────── */
+function syncChips() {
+  const bar = document.getElementById('chip-bar');
+  bar.innerHTML = '';
+  if (!Object.keys(cameras).length) return;
+  addChip(bar, 'Alle', hidden.size === 0, () => { hidden.clear(); save(); syncChips(); syncGrid(); });
+  Object.entries(cameras).forEach(([k, cam]) => {
+    addChip(bar, cam.name, !hidden.has(k), () => {
+      hidden.has(k) ? hidden.delete(k) : hidden.add(k);
+      save(); syncChips(); syncGrid();
+    });
+  });
+}
+function addChip(p, label, on, fn) {
+  const c = document.createElement('span');
+  c.className = 'chip' + (on ? ' on' : '');
+  c.textContent = label; c.onclick = fn;
+  p.appendChild(c);
+}
+function save() { localStorage.setItem('advr_hidden', JSON.stringify([...hidden])); }
+/* ─────────────────────────── Camera grid (smart update) ────── */
+function syncGrid() {
+  const grid = document.getElementById('cam-grid');
+  const want = Object.keys(cameras).filter(k => {
+    if (hidden.has(k)) return false;
+    if (!CFG.dashShowOffline && !cameras[k].online) return false;
+    return true;
+  });
+  // Remove tiles no longer needed (without touching others → streams keep running)
+  [...grid.querySelectorAll('.cam-tile')].forEach(t => {
+    if (!want.includes(t.dataset.cam)) t.remove();
+  });
+  // Add missing tiles, update recording state on existing ones
+  const have = new Set([...grid.querySelectorAll('.cam-tile')].map(t => t.dataset.cam));
+  want.forEach(k => {
+    if (!have.has(k)) {
+      grid.appendChild(makeTile(k, cameras[k]));
+    } else {
+      const t = grid.querySelector('.cam-tile[data-cam="' + k + '"]');
+      if (t) { const rb = t.querySelector('.rec-btn'); if (rb) setTileRecording(t, rb, !!cameras[k].recording); }
+    }
+  });
+  if (!grid.querySelector('.cam-tile')) {
+    grid.innerHTML = `<div class="empty-state">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+        <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/>
+        <line x1="2" y1="2" x2="22" y2="22" stroke-width="1.5"/>
+      </svg>Keine Kameras sichtbar</div>`;
+  }
+  updateLayout();
+}
+function makeTile(key, cam) {
+  const tile = document.createElement('div');
+  tile.className = 'cam-tile'; tile.dataset.cam = key;
+  // Decide stream type: WebRTC (go2rtc) or MJPEG/snapshot
+  const g2mStream = typeof go2rtcMap[key] === 'string' ? go2rtcMap[key] : '';
+  const useWrtc   = CFG.go2rtcEnabled && CFG.go2rtcUrl && !!g2mStream;
+  let mediaEl;
+  if (useWrtc) {
+    const vid = document.createElement('video');
+    vid.autoplay = true; vid.muted = true; vid.playsInline = true;
+    vid.dataset.stream = g2mStream;
+    connectWebRTC(vid, CFG.go2rtcUrl, g2mStream);
+    mediaEl = vid;
+  } else {
+    const img = document.createElement('img'); img.alt = cam.name;
+    if (cam.mjpegUrl) {
+      img.dataset.mjpeg = cam.mjpegUrl;
+      img.src = cam.mjpegUrl;
+      img.onerror = () => {
+        if (img.dataset.hiding) return;
+        if (cam.snapshotUrl && img.src !== cam.snapshotUrl) {
+          img.src = cam.snapshotUrl;
+        } else if (CFG.dashStreamReconnect && cam.mjpegUrl && img.dataset.retry !== '1') {
+          img.dataset.retry = '1';
+          setTimeout(() => { img.dataset.retry = '0'; img.src = cam.mjpegUrl; }, 8000);
+        }
+      };
+    } else if (cam.snapshotUrl) { img.src = cam.snapshotUrl; }
+    mediaEl = img;
+  }
+  const bottom = document.createElement('div'); bottom.className = 'cam-bottom';
+  const name   = document.createElement('div'); name.className = 'cam-name'; name.textContent = cam.name;
+  const dot    = document.createElement('div'); dot.className = 'cam-dot ' + (cam.online ? 'on' : 'off');
+  bottom.append(name, dot);
+  // Click on media → fullscreen (not on buttons)
+  mediaEl.onclick = () => openFs(cam, key);
+  bottom.onclick  = () => openFs(cam, key);
+  tile.onclick    = e => { if (e.target === tile) openFs(cam, key); };
+  // Button container (rec + optional PTZ)
+  const btnBox = document.createElement('div'); btnBox.className = 'tile-btns';
+  const recBtn = document.createElement('div');
+  recBtn.className = 'tile-btn rec-btn'; recBtn.title = 'Aufnahme starten';
+  recBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4" fill="currentColor"/></svg>`;
+  recBtn.addEventListener('click', e => { e.stopPropagation(); toggleRec(key, recBtn, tile); });
+  btnBox.appendChild(recBtn);
+  if (cam.hasPtz) {
+    const ptzToggle = document.createElement('div');
+    ptzToggle.className = 'tile-btn ptz-btn'; ptzToggle.title = 'PTZ';
+    ptzToggle.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </svg>`;
+    ptzToggle.addEventListener('click', e => { e.stopPropagation(); togglePtz(tile, key); });
+    btnBox.appendChild(ptzToggle);
+    tile.appendChild(makePtzOverlay(key));
+  }
+  tile.appendChild(btnBox);
+  if (cam.detected) tile.classList.add('detected');
+  if (cam.alerted)  tile.classList.add('alerted');
+  if (cam.recording) setTileRecording(tile, recBtn, true);
+  tile.append(mediaEl, bottom);
+  return tile;
+}
+/* ─────────────────────────── PTZ ────────────────────────────── */
+function makePtzOverlay(camKey) {
+  const ov = document.createElement('div'); ov.className = 'ptz-overlay';
+  // d-pad: 3×3 grid, empty corners except diagonals
+  const pad = document.createElement('div'); pad.className = 'ptz-pad';
+  const LAYOUT = [
+    ['upLeft','up','upRight'],
+    ['left','center','right'],
+    ['downLeft','down','downRight'],
+  ];
+  const ICONS = {
+    upLeft:'↖',up:'↑',upRight:'↗',
+    left:'←',center:'⊙',right:'→',
+    downLeft:'↙',down:'↓',downRight:'↘',
+  };
+  const HOLD_DIRS = new Set(['left','upLeft','up','upRight','right','downRight','down','downLeft','zoomIn','zoomOut']);
+  LAYOUT.forEach(row => {
+    row.forEach(dir => {
+      const btn = document.createElement('div');
+      btn.className = 'ptz-key'; btn.textContent = ICONS[dir]; btn.dataset.dir = dir;
+      btn.addEventListener('contextmenu', e => e.preventDefault());
+      btn.addEventListener('pointerdown', e => {
+        e.stopPropagation(); e.preventDefault();
+        btn.setPointerCapture(e.pointerId);
+        btn.classList.add('held');
+        const isHold = HOLD_DIRS.has(dir);
+        if (isHold) { ptzHeld = { camKey, dir }; ptzSend(camKey, dir, true); }
+        else { ptzSend(camKey, dir, true); }
+      });
+      btn.addEventListener('pointerup', e => {
+        e.stopPropagation();
+        btn.classList.remove('held');
+        if (ptzHeld && ptzHeld.camKey === camKey && ptzHeld.dir === dir) {
+          ptzSend(camKey, dir, false); ptzHeld = null;
+        }
+      });
+      btn.addEventListener('pointercancel', () => {
+        btn.classList.remove('held');
+        if (ptzHeld && ptzHeld.camKey === camKey) { ptzSend(camKey, ptzHeld.dir, false); ptzHeld = null; }
+      });
+      pad.appendChild(btn);
+    });
+  });
+  // Zoom row
+  const zoom = document.createElement('div'); zoom.className = 'ptz-zoom';
+  [['zoomIn','🔍+'],['zoomOut','🔍−']].forEach(([dir, icon]) => {
+    const btn = document.createElement('div');
+    btn.className = 'ptz-key'; btn.textContent = icon; btn.dataset.dir = dir;
+    btn.addEventListener('contextmenu', e => e.preventDefault());
+    btn.addEventListener('pointerdown', e => {
+      e.stopPropagation(); e.preventDefault(); btn.setPointerCapture(e.pointerId);
+      btn.classList.add('held'); ptzHeld = { camKey, dir }; ptzSend(camKey, dir, true);
+    });
+    btn.addEventListener('pointerup', e => {
+      e.stopPropagation(); btn.classList.remove('held');
+      if (ptzHeld && ptzHeld.dir === dir) { ptzSend(camKey, dir, false); ptzHeld = null; }
+    });
+    btn.addEventListener('pointercancel', () => {
+      btn.classList.remove('held');
+      if (ptzHeld) { ptzSend(camKey, ptzHeld.dir, false); ptzHeld = null; }
+    });
+    zoom.appendChild(btn);
+  });
+  const closeBtn = document.createElement('div'); closeBtn.className = 'ptz-close';
+  closeBtn.textContent = '✕';
+  closeBtn.addEventListener('click', e => { e.stopPropagation(); ov.classList.remove('open'); });
+  ov.append(closeBtn, pad, zoom);
+  return ov;
+}
+function togglePtz(tile, camKey) {
+  const ov = tile.querySelector('.ptz-overlay');
+  if (!ov) return;
+  const btn = tile.querySelector('.ptz-btn');
+  const open = !ov.classList.contains('open');
+  ov.classList.toggle('open', open);
+  btn.classList.toggle('active', open);
+}
+async function ptzSend(camKey, dir, val) {
+  try {
+    await fetch(`/agent-dvr/api/ptz?camKey=${encodeURIComponent(camKey)}&dir=${dir}&val=${val?1:0}`);
+  } catch (_) {}
+}
+// Safety: release any held PTZ if pointer leaves document
+document.addEventListener('pointerup', () => {
+  if (ptzHeld) { ptzSend(ptzHeld.camKey, ptzHeld.dir, false); ptzHeld = null; }
+});
+/* ─────────────────────────── Grid layout ───────────────────── */
+let layoutObserver = null;
+function calcLayout(n, W, H, gap) {
+  if (CFG.dashGridCols > 0) {
+    const cols = Math.min(CFG.dashGridCols, n);
+    return { cols, rows: Math.ceil(n / cols) };
+  }
+  let bestCols = 1, best = -1;
+  for (let c = 1; c <= n; c++) {
+    const r  = Math.ceil(n / c);
+    const tw = (W - gap * (c - 1)) / c;
+    const th = (H - gap * (r - 1)) / r;
+    const cw = Math.min(tw, th * 16 / 9);
+    const score = cw * cw * (9 / 16);
+    if (score > best) { best = score; bestCols = c; }
+  }
+  return { cols: bestCols, rows: Math.ceil(n / bestCols) };
+}
+function updateLayout() {
+  const grid  = document.getElementById('cam-grid');
+  const tiles = grid.querySelectorAll('.cam-tile').length;
+  if (!tiles) return;
+  const W = grid.clientWidth, H = grid.clientHeight;
+  if (W < 10 || H < 10) return;
+  const { cols, rows } = calcLayout(tiles, W, H, 6);
+  grid.style.gridTemplateColumns = `repeat(${cols},1fr)`;
+  grid.style.gridTemplateRows    = `repeat(${rows},1fr)`;
+}
+function ensureLayoutObserver() {
+  if (layoutObserver) return;
+  layoutObserver = new ResizeObserver(updateLayout);
+  layoutObserver.observe(document.getElementById('cam-grid'));
+}
+/* ─────────────────────────── Motion / Alert status ─────────── */
+function setTileStatus(ck, cls, on) {
+  const t = document.querySelector('.cam-tile[data-cam="' + ck + '"]');
+  if (t) t.classList.toggle(cls, on);
+  const fs = document.getElementById('fs-panel');
+  if (fs.dataset.cam === ck) fs.classList.toggle(cls, on);
+}
+/* ─────────────────────────── Recording ─────────────────────── */
+function setTileRecording(tile, btn, recording) {
+  tile.classList.toggle('recording', recording);
+  btn.classList.toggle('active', recording);
+  btn.title = recording ? 'Aufnahme stoppen' : 'Aufnahme starten';
+  const svgRec  = `<svg width="12" height="12" viewBox="0 0 12 12"><rect x="2" y="2" width="8" height="8" rx="1" fill="currentColor"/></svg>`;
+  const svgStop = `<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4" fill="currentColor"/></svg>`;
+  btn.innerHTML = recording ? svgRec : svgStop;
+  const camKey = tile.dataset.cam;
+  // Sync fs-panel red border + its rec button
+  const fs = document.getElementById('fs-panel');
+  if (fs.dataset.cam === camKey) {
+    fs.classList.toggle('recording', recording);
+    const fsBtn = fs.querySelector('#fs-btns .rec-btn');
+    if (fsBtn && fsBtn !== btn) { fsBtn.classList.toggle('active', recording); fsBtn.title = btn.title; fsBtn.innerHTML = btn.innerHTML; }
+  }
+  // Sync grid tile if we were called from fs-panel
+  if (tile === fs) {
+    const gridTile = document.querySelector('.cam-tile[data-cam="' + camKey + '"]');
+    if (gridTile) {
+      gridTile.classList.toggle('recording', recording);
+      const tBtn = gridTile.querySelector('.rec-btn');
+      if (tBtn) { tBtn.classList.toggle('active', recording); tBtn.title = btn.title; tBtn.innerHTML = btn.innerHTML; }
+    }
+  }
+}
+function toggleRec(key, btn, tile) {
+  const isRec = btn.classList.contains('active');
+  fetch('/agent-dvr/api/record?camKey=' + encodeURIComponent(key) + '&action=' + (isRec ? 'stop' : 'start'))
+    .then(r => { if (r.ok) setTileRecording(tile, btn, !isRec); })
+    .catch(() => {});
+}
+/* ─────────────────────────── Fullscreen ────────────────────── */
+function openFs(cam, key) {
+  document.getElementById('fs-name').textContent = cam.name;
+  const fi  = document.getElementById('fs-img');
+  const fv  = document.getElementById('fs-vid');
+  const fs  = document.getElementById('fs-panel');
+  // Stop any running fullscreen stream first
+  fi.src = '';
+  disconnectWebRTC(fv);
+  // Check if we should use WebRTC for this camera
+  const g2mStream = typeof go2rtcMap[key] === 'string' ? go2rtcMap[key] : '';
+  const useWrtc   = CFG.go2rtcEnabled && CFG.go2rtcUrl && !!g2mStream;
+  if (useWrtc) {
+    fi.style.display = 'none';
+    fv.style.display = 'block';
+    connectWebRTC(fv, CFG.go2rtcUrl, g2mStream);
+  } else {
+    fi.style.display = 'block';
+    fv.style.display = 'none';
+    fi.src = cam.mjpegUrl || cam.snapshotUrl || '';
+  }
+  fs.dataset.cam = key || '';
+  // Determine current recording state from live tile (more up-to-date than cam object)
+  const gridTile = document.querySelector('.cam-tile[data-cam="' + key + '"]');
+  const isRec = gridTile ? gridTile.classList.contains('recording') : !!cam.recording;
+  fs.classList.toggle('recording', isRec);
+  // Build header buttons
+  const btnBox = document.getElementById('fs-btns');
+  btnBox.innerHTML = '';
+  const recBtn = document.createElement('div');
+  recBtn.className = 'tile-btn rec-btn';
+  recBtn.classList.toggle('active', isRec);
+  recBtn.title = isRec ? 'Aufnahme stoppen' : 'Aufnahme starten';
+  recBtn.innerHTML = isRec
+    ? `<svg width="12" height="12" viewBox="0 0 12 12"><rect x="2" y="2" width="8" height="8" rx="1" fill="currentColor"/></svg>`
+    : `<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4" fill="currentColor"/></svg>`;
+  recBtn.addEventListener('click', e => { e.stopPropagation(); toggleRec(key, recBtn, fs); });
+  btnBox.appendChild(recBtn);
+  if (cam.hasPtz) {
+    const ptzBtn = document.createElement('div');
+    ptzBtn.className = 'tile-btn ptz-btn';
+    ptzBtn.title = 'PTZ';
+    ptzBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </svg>`;
+    btnBox.appendChild(ptzBtn);
+    const body = document.getElementById('fs-body');
+    const ov = makePtzOverlay(key);
+    body.appendChild(ov);
+    ptzBtn.addEventListener('click', e => {
+      e.stopPropagation();
+      const open = ov.classList.toggle('open');
+      ptzBtn.classList.toggle('active', open);
+    });
+  }
+  fs.classList.add('open');
+}
+function closeFs() {
+  const fi = document.getElementById('fs-img');
+  const fv = document.getElementById('fs-vid');
+  fi.src = ''; fi.style.display = 'block';
+  disconnectWebRTC(fv); fv.style.display = 'none';
+  const fs = document.getElementById('fs-panel');
+  fs.classList.remove('open', 'recording');
+  fs.dataset.cam = '';
+  document.getElementById('fs-btns').innerHTML = '';
+  const ov = document.getElementById('fs-body').querySelector('.ptz-overlay');
+  if (ov) ov.remove();
+}
+document.getElementById('fs-panel').addEventListener('click', e => {
+  if (e.target === document.getElementById('fs-panel')) closeFs();
+});
+/* ─────────────────────────── Recordings ────────────────────── */
+function buildRecCamSel() {
+  const sel = document.getElementById('rec-cam-sel');
+  const last = localStorage.getItem('advr_rec_cam') || '';
+  sel.innerHTML = '<option value="">Kamera wählen…</option>';
+  Object.entries(cameras).forEach(([k, cam]) => {
+    const o = document.createElement('option'); o.value = k; o.textContent = cam.name;
+    sel.appendChild(o);
+  });
+  document.getElementById('rec-view-grid').classList.toggle('active', recViewMode === 'grid');
+  document.getElementById('rec-view-tl').classList.toggle('active', recViewMode === 'timeline');
+  if (last && cameras[last]) { sel.value = last; loadAndFilterRec(); }
+}
+async function loadAndFilterRec() {
+  const key = document.getElementById('rec-cam-sel').value;
+  if (!key) return;
+  localStorage.setItem('advr_rec_cam', key);
+  const grid = document.getElementById('rec-grid');
+  grid.innerHTML = '<div class="rec-empty">Lade…</div>';
+  document.getElementById('rec-tags').innerHTML = '';
+  recAllItems = [];
+  try {
+    const r = await fetch('/agent-dvr/api/recordings?camKey=' + encodeURIComponent(key),
+                          { signal: AbortSignal.timeout(8000) });
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    const data = await r.json();
+    recAllItems = Array.isArray(data) ? data : [];
+    if (!recAllItems.length) {
+      grid.innerHTML = '<div class="rec-empty">Keine Aufnahmen.<br><small>enableEventDps in Adapter-Config prüfen.</small></div>';
+      return;
+    }
+    // Build tag chips
+    const tags = [...new Set(recAllItems.map(r => r.tag).filter(Boolean))];
+    const tagBar = document.getElementById('rec-tags');
+    recFilters.tag = '';
+    if (tags.length) {
+      const all = document.createElement('span'); all.className = 'tag-chip on'; all.textContent = 'Alle';
+      all.onclick = () => { recFilters.tag = ''; setActiveTag(null); renderRec(); };
+      tagBar.appendChild(all);
+      tags.forEach(t => {
+        const tc = document.createElement('span'); tc.className = 'tag-chip'; tc.textContent = t; tc.dataset.tag = t;
+        tc.onclick = () => { recFilters.tag = t; setActiveTag(t); renderRec(); };
+        tagBar.appendChild(tc);
+      });
+    }
+    renderRec();
+  } catch (e) {
+    grid.innerHTML = '<div class="rec-empty">Fehler: ' + esc(e.message) + '</div>';
+  }
+}
+function setActiveTag(tag) {
+  document.querySelectorAll('#rec-tags .tag-chip').forEach(c => {
+    c.classList.toggle('on', tag === null ? c.textContent === 'Alle' : c.dataset.tag === tag);
+  });
+}
+function filterRec() { renderRec(); }
+function setRecView(mode) {
+  recViewMode = mode;
+  localStorage.setItem('advr_rec_view', mode);
+  document.getElementById('rec-view-grid').classList.toggle('active', mode === 'grid');
+  document.getElementById('rec-view-tl').classList.toggle('active', mode === 'timeline');
+  renderRec();
+}
+function renderRec() {
+  const q      = (document.getElementById('rec-search').value || '').toLowerCase();
+  const tag    = recFilters.tag;
+  const grid   = document.getElementById('rec-grid');
+  const camKey = document.getElementById('rec-cam-sel').value;
+  const cam    = cameras[camKey];
+  const items = recAllItems.filter(r => {
+    if (tag && r.tag !== tag) return false;
+    if (q) {
+      const hay = (r.date + ' ' + r.time + ' ' + (r.tag || '')).toLowerCase();
+      if (!hay.includes(q)) return false;
+    }
+    return true;
+  });
+  document.getElementById('rec-count').textContent = items.length + ' Aufnahme' + (items.length !== 1 ? 'n' : '');
+  grid.innerHTML = '';
+  if (!items.length) {
+    grid.innerHTML = '<div class="rec-empty">Keine Treffer.</div>';
+    return;
+  }
+  // Sort oldest→newest so "Nächste" (+1) = chronologically later recording
+  recPlayList = [...items].sort((a, b) => {
+    const da = (a.date || '') + 'T' + (a.time || '');
+    const db = (b.date || '') + 'T' + (b.time || '');
+    return da.localeCompare(db);
+  });
+  if (recViewMode === 'timeline') { renderTimeline(items, cam); return; }
+  grid.className = 'rec-grid';
+  items.forEach(rec => {
+    const tile = document.createElement('div'); tile.className = 'rec-tile';
+    const wrap = document.createElement('div'); wrap.className = 'rec-thumb-wrap';
+    const img  = document.createElement('img'); img.className = 'rec-thumb'; img.alt = '';
+    img.loading = 'lazy';
+    img.src = rec.thumb || (cam && cam.snapshotUrl) || '';
+    const play = document.createElement('div'); play.className = 'rec-play-icon';
+    play.innerHTML = `<svg width="40" height="40" viewBox="0 0 40 40">
+      <circle cx="20" cy="20" r="20" fill="rgba(0,0,0,.6)"/>
+      <polygon points="16,12 30,20 16,28" fill="#fff"/>
+    </svg>`;
+    const badges = document.createElement('div'); badges.className = 'rec-badges';
+    if (rec.tag) {
+      const b = document.createElement('span'); b.className = 'badge tag'; b.textContent = rec.tag; badges.appendChild(b);
+    }
+    wrap.append(img, play, badges);
+    const info = document.createElement('div'); info.className = 'rec-info';
+    const date = document.createElement('div'); date.className = 'rec-date'; date.textContent = rec.date + ' ' + rec.time;
+    const meta = document.createElement('div'); meta.className = 'rec-meta';
+    meta.textContent = [rec.size ? rec.size + ' MB' : '', rec.dur ? rec.dur + 's' : ''].filter(Boolean).join(' · ');
+    info.append(date, meta);
+    tile.append(wrap, info);
+    tile.onclick = () => playRec(rec, cam, recPlayList.indexOf(rec));
+    grid.appendChild(tile);
+  });
+}
+function tlZoom(dir) {
+  const idx    = TL_ZOOMS.indexOf(tlZoomLevel);
+  const newIdx = Math.max(0, Math.min(TL_ZOOMS.length - 1, idx + dir));
+  if (newIdx === idx) return;
+  tlZoomLevel = TL_ZOOMS[newIdx];
+  localStorage.setItem('advr_tl_zoom', tlZoomLevel);
+  renderRec();
+}
+function tlTickInterval(zoom) {
+  const hoursVisible = 24 / zoom;
+  if (hoursVisible <= 1)  return 0.25;
+  if (hoursVisible <= 3)  return 0.5;
+  if (hoursVisible <= 6)  return 1;
+  if (hoursVisible <= 12) return 2;
+  return 6;
+}
+function renderTimeline(items, cam) {
+  const grid = document.getElementById('rec-grid');
+  grid.className = 'tl-wrap';
+  // ── Zoom control ──
+  const zoomRow = document.createElement('div'); zoomRow.className = 'tl-zoom';
+  const zOut = document.createElement('button'); zOut.className = 'tl-zoom-btn';
+  zOut.textContent = '−'; zOut.title = 'Rauszoomen';
+  zOut.disabled = TL_ZOOMS.indexOf(tlZoomLevel) === 0;
+  zOut.addEventListener('click', () => tlZoom(-1));
+  const zLbl = document.createElement('span'); zLbl.className = 'tl-zoom-lbl';
+  const hoursVis = 24 / tlZoomLevel;
+  zLbl.textContent = hoursVis < 1 ? (hoursVis * 60) + 'min' : hoursVis + 'h';
+  const zIn = document.createElement('button'); zIn.className = 'tl-zoom-btn';
+  zIn.textContent = '+'; zIn.title = 'Reinzoomen';
+  zIn.disabled = TL_ZOOMS.indexOf(tlZoomLevel) === TL_ZOOMS.length - 1;
+  zIn.addEventListener('click', () => tlZoom(+1));
+  zoomRow.append(zOut, zLbl, zIn);
+  grid.appendChild(zoomRow);
+  // ── Scrollable container ──
+  const scroll = document.createElement('div'); scroll.className = 'tl-scroll';
+  const inner  = document.createElement('div'); inner.className = 'tl-inner';
+  inner.style.width = (tlZoomLevel * 100) + '%';
+  scroll.appendChild(inner);
+  grid.appendChild(scroll);
+  // ── Days ──
+  const byDate = {};
+  items.forEach(r => { (byDate[r.date] = byDate[r.date] || []).push(r); });
+  const tickInterval = tlTickInterval(tlZoomLevel);
+  Object.keys(byDate).sort().reverse().forEach(date => {
+    const recs = byDate[date].sort((a, b) => a.time.localeCompare(b.time));
+    const row   = document.createElement('div'); row.className = 'tl-day';
+    const label = document.createElement('div'); label.className = 'tl-day-label'; label.textContent = date;
+    const bar   = document.createElement('div'); bar.className = 'tl-bar';
+    // Adaptive ticks
+    for (let h = 0; h < 24; h += tickInterval) {
+      const tick = document.createElement('span'); tick.className = 'tl-tick';
+      tick.style.left = (h / 24 * 100) + '%';
+      const hh = Math.floor(h), mm = Math.round((h - hh) * 60);
+      tick.textContent = String(hh).padStart(2,'0') + ':' + String(mm).padStart(2,'0');
+      bar.appendChild(tick);
+    }
+    recs.forEach(rec => {
+      const [hh, mm, ss] = rec.time.split(':').map(Number);
+      const startSec = (hh||0)*3600 + (mm||0)*60 + (ss||0);
+      const dur      = rec.dur || 60;
+      const left     = (startSec / 86400 * 100).toFixed(3);
+      const width    = Math.max(0.2 / tlZoomLevel, dur / 86400 * 100).toFixed(3);
+      const globalIdx = recPlayList.indexOf(rec);
+      const block = document.createElement('div'); block.className = 'tl-block';
+      block.style.left  = left + '%';
+      block.style.width = width + '%';
+      if (rec.tag) block.dataset.tag = rec.tag;
+      block.title = rec.time
+        + (rec.dur  ? '  ·  ' + rec.dur  + 's'  : '')
+        + (rec.size ? '  ·  ' + rec.size + ' MB' : '')
+        + (rec.tag  ? '  ·  ' + rec.tag          : '');
+      block.addEventListener('click', () => playRec(rec, cam, globalIdx));
+      bar.appendChild(block);
+    });
+    row.append(label, bar);
+    inner.appendChild(row);
+  });
+}
+function updateNavBtns() {
+  document.getElementById('vid-prev').disabled = recPlayIdx <= 0;
+  document.getElementById('vid-next').disabled = recPlayIdx >= recPlayList.length - 1;
+  document.getElementById('vid-pos').textContent =
+    recPlayList.length ? (recPlayIdx + 1) + ' / ' + recPlayList.length : '';
+}
+function playRecIdx(idx) {
+  if (idx < 0 || idx >= recPlayList.length) return;
+  const camKey = document.getElementById('rec-cam-sel').value;
+  playRec(recPlayList[idx], cameras[camKey], idx);
+}
+function playRec(rec, cam, idx) {
+  const url = rec.video || rec.url || '';
+  if (!url) return;
+  const src = url.startsWith('http') ? url : BASE + url;
+  const el  = document.getElementById('vid-el');
+  if (el.src !== src) { el.src = src; el.load(); }
+  recPlayIdx = idx !== undefined ? idx : recPlayList.indexOf(rec);
+  document.getElementById('vid-title').textContent = rec.date + ' ' + rec.time;
+  document.getElementById('vid-cam').textContent   = cam ? cam.name : '';
+  document.getElementById('vid-meta-txt').textContent =
+    [rec.size ? rec.size + ' MB' : '', rec.dur ? rec.dur + 's' : '', rec.tag || ''].filter(Boolean).join(' · ');
+  document.getElementById('vid-dl').href = src;
+  updateNavBtns();
+  document.getElementById('vid-panel').classList.add('open');
+  el.play().catch(() => {});
+}
+function closeVideo() {
+  const el = document.getElementById('vid-el');
+  el.pause(); el.removeAttribute('src'); el.load();
+  document.getElementById('vid-panel').classList.remove('open');
+}
+document.getElementById('vid-panel').addEventListener('click', e => {
+  if (e.target === document.getElementById('vid-panel')) closeVideo();
+});
+/* ─────────────────────────── Banner / Status ─────────────────── */
+function showBanner(html, retry) {
+  const b = document.getElementById('info-banner');
+  b.innerHTML = html + (retry ? '<button onclick="location.reload()">Neu laden</button>' : '');
+  b.classList.add('visible');
+}
+function hideBanner() { document.getElementById('info-banner').classList.remove('visible'); }
+function sbar(msg, err) {
+  const s = document.getElementById('sbar-msg');
+  s.textContent = msg; s.className = err ? 'err' : '';
+}
+function connDot(on) { document.getElementById('conn-dot').className = on ? 'on' : ''; }
+function esc(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+/* ─────────────────────────── Keyboard shortcuts ─────────────── */
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') { closeFs(); closeVideo(); }
+  if (document.getElementById('vid-panel').classList.contains('open')) {
+    if (e.key === 'ArrowLeft')  { e.preventDefault(); playRecIdx(recPlayIdx - 1); }
+    if (e.key === 'ArrowRight') { e.preventDefault(); playRecIdx(recPlayIdx + 1); }
+  }
+  if (e.key === 'f' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT') {
+    const fp = document.getElementById('fs-panel');
+    if (fp.classList.contains('open')) closeFs();
+  }
+});
+/* Tab hidden → stop streams; tab visible → restart */
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) {
+    // Stop MJPEG
+    document.querySelectorAll('.cam-tile img[data-mjpeg]').forEach(img => {
+      img.dataset.hiding = '1';
+      img.src = '';
+      setTimeout(() => { delete img.dataset.hiding; }, 400);
+    });
+    // Stop WebRTC on tiles
+    document.querySelectorAll('.cam-tile video[data-stream]').forEach(vid => disconnectWebRTC(vid));
+    // Stop fullscreen streams
+    const fi = document.getElementById('fs-img');
+    if (fi.src) { fi.dataset.s = fi.src; fi.src = ''; }
+    const fv = document.getElementById('fs-vid');
+    if (fv && fv.dataset.stream) disconnectWebRTC(fv);
+  } else {
+    // Restart MJPEG
+    document.querySelectorAll('.cam-tile img[data-mjpeg]').forEach(img => {
+      img.dataset.retry = '0';
+      img.src = img.dataset.mjpeg;
+    });
+    // Restart WebRTC on tiles
+    if (CFG.go2rtcUrl) {
+      document.querySelectorAll('.cam-tile video[data-stream]').forEach(vid =>
+        connectWebRTC(vid, CFG.go2rtcUrl, vid.dataset.stream));
+    }
+    // Restart fullscreen streams
+    const fi = document.getElementById('fs-img');
+    if (!fi.src && fi.dataset.s) { fi.src = fi.dataset.s; }
+    const fv = document.getElementById('fs-vid');
+    if (fv && fv.dataset.stream && CFG.go2rtcUrl) connectWebRTC(fv, CFG.go2rtcUrl, fv.dataset.stream);
+  }
+});
+/* ─────────────────────────── WebRTC (go2rtc) ───────────────── */
+async function connectWebRTC(vid, baseUrl, streamName) {
+  disconnectWebRTC(vid);
+  if (!baseUrl || !streamName) return;
+  try {
+    const pc = new RTCPeerConnection({
+      iceServers: [{urls:['stun:stun.cloudflare.com:3478','stun:stun.l.google.com:19302']}]
+    });
+    vid._rtcPc = pc;
+    vid.dataset.stream = streamName;
+    const stream = new MediaStream();
+    vid.srcObject = stream;
+    pc.addEventListener('track', ev => stream.addTrack(ev.track));
+    pc.addTransceiver('video', {direction:'recvonly'});
+    pc.addTransceiver('audio', {direction:'recvonly'});
+    // Route through ioBroker proxy to avoid browser cross-origin block on go2rtc
+    const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = wsProto + '//' + location.host + '/agent-dvr/api/ws?src=' + encodeURIComponent(streamName);
+    console.log('[go2rtc] connecting via proxy', wsUrl);
+    const ws = new WebSocket(wsUrl);
+    vid._rtcWs = ws;
+    ws.addEventListener('open', () => {
+      console.log('[go2rtc] WS open, creating offer for', streamName);
+      pc.addEventListener('icecandidate', ev => {
+        if (!ev.candidate || ws.readyState !== WebSocket.OPEN) return;
+        ws.send(JSON.stringify({type:'webrtc/candidate', value:ev.candidate.candidate}));
+      });
+      pc.createOffer()
+        .then(o => pc.setLocalDescription(o))
+        .then(() => {
+          if (ws.readyState === WebSocket.OPEN)
+            ws.send(JSON.stringify({type:'webrtc/offer', value:pc.localDescription.sdp}));
+        });
+    });
+    ws.addEventListener('message', ev => {
+      try {
+        const msg = JSON.parse(ev.data);
+        if (msg.type === 'webrtc/candidate') {
+          pc.addIceCandidate({candidate:msg.value, sdpMid:'0'}).catch(() => {});
+        } else if (msg.type === 'webrtc/answer') {
+          console.log('[go2rtc] got answer for', streamName);
+          pc.setRemoteDescription({type:'answer', sdp:msg.value});
+        }
+      } catch (_) {}
+    });
+    ws.addEventListener('error', () => console.warn('[go2rtc] WS error for stream', streamName));
+    ws.addEventListener('close', ev => console.warn('[go2rtc] WS closed', ev.code, streamName));
+    pc.addEventListener('connectionstatechange', () =>
+      console.log('[go2rtc] PC state:', pc.connectionState, streamName));
+  } catch (err) {
+    console.error('[go2rtc] connectWebRTC failed:', err);
+  }
+}
+function disconnectWebRTC(vid) {
+  if (!vid) return;
+  try { if (vid._rtcWs) { vid._rtcWs.close(); vid._rtcWs = null; } } catch (_) {}
+  try { if (vid._rtcPc) { vid._rtcPc.close(); vid._rtcPc = null; } } catch (_) {}
+  vid.srcObject = null;
+}
+/* ─────────────────────────── Boot ──────────────────────────── */
+loadConfig().then(() => loadData()).then(() => ensureLayoutObserver());
+</script>
+<script src="/socket.io/socket.io.js"></script>
+</body>
+</html>