Add WireGuard VPN support and warning banner

Author: MrDesjardins

.env.example

@@ -161,6 +161,12 @@ ELEVENLABS_MODEL_ID=eleven_flash_v2_5
 # Directory to store weekly summary audio files
 WEEKLY_SUMMARY_AUDIO_DIR=/var/audio-summaries
 
+# WireGuard VPN Check (Optional)
+# If set, a warning banner is shown when the app is accessed from outside this subnet
+# Set this to your WireGuard peer subnet (e.g. the IP range assigned to VPN clients)
+# Example: WIREGUARD_SUBNET=10.13.13.0/24
+# WIREGUARD_SUBNET=
+
 # Client-Side Logging (Optional)
 # Remote logging helps debug issues on mobile/car displays where console access is limited
 # Logs are batched and sent to the server at this interval (in milliseconds)

config.py

@@ -116,6 +116,11 @@ class Config:
     # Client-side logging settings
     client_log_batch_interval: int  # Milliseconds between log batches
 
+    # WireGuard VPN settings
+    wireguard_subnet: Optional[
+        str
+    ]  # e.g. "10.13.13.0/24" — warn if client is not in this subnet
+
     @classmethod
     def load_from_env(cls) -> "Config":
         """Load configuration from environment variables."""
@@ -218,6 +223,8 @@ def load_from_env(cls) -> "Config":
             client_log_batch_interval=_parse_int(
                 os.getenv("CLIENT_LOG_BATCH_INTERVAL", "5000"), 5000, 1000, 60000
             ),  # 1-60 seconds
+            # WireGuard VPN settings
+            wireguard_subnet=os.getenv("WIREGUARD_SUBNET") or None,
         )
 
         # Validate configuration if transcription is enabled

main.py

@@ -5,6 +5,8 @@
 import threading
 import signal
 import atexit
+import ipaddress
+from typing import Optional
 import uvicorn
 from dotenv import load_dotenv
 from fastapi import FastAPI, Request
@@ -191,15 +193,31 @@ def shutdown_handler(signum=None, frame=None) -> None:
 app.include_router(weekly_summaries_router)
 
 
+def _is_on_wireguard(client_ip: str, wireguard_subnet: Optional[str]) -> bool:
+    """Return True if client IP is within the configured WireGuard subnet (or no subnet is set)."""
+    if not wireguard_subnet:
+        return True
+    try:
+        network = ipaddress.ip_network(wireguard_subnet, strict=False)
+        return ipaddress.ip_address(client_ip) in network
+    except ValueError:
+        logger.warning(f"Invalid WIREGUARD_SUBNET value: {wireguard_subnet!r}")
+        return True
+
+
 @app.get("/")
 def index(request: Request) -> HTMLResponse:
     """Serve the main HTML page."""
     server_host = request.url.hostname
     client = request.client
-    logger.info(f"📄 Index page requested by {client.host if client else 'unknown'}")
+    client_ip = client.host if client else ""
+    logger.info(f"📄 Index page requested by {client_ip or 'unknown'}")
     logger.info(
         f"   Audio files served from: http://{server_host}:{api_port}/audio/{{video_id}}"
     )
+    vpn_warning = config.wireguard_subnet is not None and not _is_on_wireguard(
+        client_ip, config.wireguard_subnet
+    )
     return templates.TemplateResponse(
         "index.html",
         {
@@ -213,6 +231,7 @@ def index(request: Request) -> HTMLResponse:
             "prefetch_threshold_seconds": config.prefetch_threshold_seconds,
             "trilium_url": config.trilium_url,
             "client_log_batch_interval": config.client_log_batch_interval,
+            "vpn_warning": vpn_warning,
         },
     )
 

static/style.css

@@ -188,6 +188,46 @@ body {
     flex-direction: column;
 }
 
+/* VPN Warning Banner */
+.vpn-banner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(245, 158, 11, 0.15);
+    border: 1px solid rgba(245, 158, 11, 0.4);
+    border-radius: 10px;
+    padding: 12px 16px;
+    margin-bottom: 16px;
+    color: #f59e0b;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.vpn-banner i.fa-shield-alt {
+    font-size: 1.1rem;
+    flex-shrink: 0;
+}
+
+.vpn-banner span {
+    flex: 1;
+}
+
+.vpn-banner-close {
+    background: none;
+    border: none;
+    color: #f59e0b;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    opacity: 0.7;
+    flex-shrink: 0;
+}
+
+.vpn-banner-close:hover {
+    opacity: 1;
+    background: rgba(245, 158, 11, 0.2);
+}
+
 /* Header */
 header {
     text-align: center;

templates/index.html

@@ -18,6 +18,16 @@
             <h1><i class="fab fa-youtube"></i> Private YouTube Radio</h1>
         </header>
 
+        {% if vpn_warning %}
+        <div class="vpn-banner" id="vpn-banner">
+            <i class="fas fa-shield-alt"></i>
+            <span>You are not connected to the WireGuard VPN. Turn it on for a secure connection.</span>
+            <button class="vpn-banner-close" onclick="document.getElementById('vpn-banner').remove()" aria-label="Dismiss">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        {% endif %}
+
         <main>
             <div class="control-section">
                 <div class="input-group">