Add visibility trigger

Author: MrDesjardins

docs/http_requests.md

@@ -550,6 +550,7 @@ All 33 endpoints across 5 route files plus `main.py`:
 | Method | Path | Description |
 |--------|------|-------------|
 | GET | `/` | Main HTML page with injected `window.appConfig` |
+| GET | `/vpn-status` | Check if client IP is within the WireGuard subnet |
 
 ### routes/stream.py
 | Method | Path | Description |

main.py

@@ -10,7 +10,7 @@
 import uvicorn
 from dotenv import load_dotenv
 from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
@@ -205,6 +205,16 @@ def _is_on_wireguard(client_ip: str, wireguard_subnet: Optional[str]) -> bool:
         return True
 
 
+@app.get("/vpn-status")
+def vpn_status(request: Request) -> JSONResponse:
+    """Return whether the client is currently on the WireGuard VPN."""
+    client = request.client
+    client_ip = client.host if client else ""
+    on_vpn = _is_on_wireguard(client_ip, config.wireguard_subnet)
+    vpn_warning = config.wireguard_subnet is not None and not on_vpn
+    return JSONResponse({"vpn_warning": vpn_warning})
+
+
 @app.get("/")
 def index(request: Request) -> HTMLResponse:
     """Serve the main HTML page."""

static/app.js

@@ -2342,6 +2342,22 @@ document.addEventListener('visibilitychange', async function () {
 })();
 // ── End Player Bar Drag-to-Snap ──────────────────────────────────────────────
 
+// Re-check VPN status when the tab regains focus so the banner auto-dismisses
+// if the user turns on WireGuard and switches back.
+document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+        fetch('/vpn-status')
+            .then(r => r.json())
+            .then(data => {
+                const banner = document.getElementById('vpn-banner');
+                if (banner && !data.vpn_warning) {
+                    banner.remove();
+                }
+            })
+            .catch(() => {}); // Silently ignore network errors
+    }
+});
+
 // Poll status every 3 seconds
 setInterval(fetchStatus, 3000);
 

templates/index.html

@@ -241,7 +241,7 @@ <h2>
     <script src="/static/update-checker.js?v=1737842302"></script>
 
     <!-- Main Application Script -->
-    <script src="/static/app.js?v=1772075939"></script>
+    <script src="/static/app.js?v=1772075940"></script>
 </body>
 
 </html>