@blueharford/scrypted-spatial-awareness 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueharford/scrypted-spatial-awareness",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Cross-camera object tracking for Scrypted NVR with spatial awareness",
   "author": "Joshua Seidel <blueharford>",
   "license": "Apache-2.0",

package/src/main.ts

@@ -335,63 +335,13 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
   async getSettings(): Promise<Setting[]> {
     const settings = await this.storageSettings.getSettings();
 
-    // Topology editor button that opens modal overlay
+    // Topology editor button that opens modal overlay (appended to body for proper z-index)
     settings.push({
       key: 'topologyEditor',
       title: 'Topology Editor',
       type: 'html' as any,
       value: `
         <style>
-          .sa-modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.85);
-            z-index: 999999;
-            align-items: center;
-            justify-content: center;
-          }
-          .sa-modal-overlay.active {
-            display: flex;
-          }
-          .sa-modal-container {
-            width: 95vw;
-            height: 90vh;
-            max-width: 1600px;
-            background: #1a1a2e;
-            border-radius: 12px;
-            overflow: hidden;
-            position: relative;
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-          }
-          .sa-modal-close {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            z-index: 1000000;
-            background: #e94560;
-            color: white;
-            border: none;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            font-size: 20px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .sa-modal-close:hover {
-            background: #ff6b6b;
-          }
-          .sa-modal-iframe {
-            width: 100%;
-            height: 100%;
-            border: none;
-          }
           .sa-open-btn {
             background: linear-gradient(135deg, #e94560 0%, #0f3460 100%);
             color: white;
@@ -424,16 +374,30 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         </style>
         <div class="sa-btn-container">
           <p class="sa-btn-desc">Configure camera positions, connections, and transit times</p>
-          <button class="sa-open-btn" onclick="document.getElementById('sa-topology-modal').classList.add('active')">
+          <button class="sa-open-btn" onclick="window.openSATopologyEditor()">
             <span>&#9881;</span> Open Topology Editor
           </button>
         </div>
-        <div id="sa-topology-modal" class="sa-modal-overlay" onclick="if(event.target===this)this.classList.remove('active')">
-          <div class="sa-modal-container">
-            <button class="sa-modal-close" onclick="document.getElementById('sa-topology-modal').classList.remove('active')">&times;</button>
-            <iframe class="sa-modal-iframe" src="/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor"></iframe>
-          </div>
-        </div>
+        <script>
+          window.openSATopologyEditor = function() {
+            // Remove existing modal if any
+            const existing = document.getElementById('sa-topology-modal');
+            if (existing) existing.remove();
+
+            // Create modal and append to body
+            const modal = document.createElement('div');
+            modal.id = 'sa-topology-modal';
+            modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);z-index:2147483647;display:flex;align-items:center;justify-content:center;';
+            modal.innerHTML = \`
+              <div style="width:95vw;height:92vh;max-width:1800px;background:#1a1a2e;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 25px 50px rgba(0,0,0,0.5);">
+                <button onclick="document.getElementById('sa-topology-modal').remove()" style="position:absolute;top:15px;right:15px;z-index:2147483647;background:#e94560;color:white;border:none;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&times;</button>
+                <iframe src="/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor" style="width:100%;height:100%;border:none;"></iframe>
+              </div>
+            \`;
+            modal.onclick = function(e) { if (e.target === modal) modal.remove(); };
+            document.body.appendChild(modal);
+          };
+        </script>
       `,
       group: 'Topology',
     });