bandwidth savings configs

webui/src/spectate/SpectatorApp/SpectatorContent.jsx

@@ -23,6 +23,8 @@ export default function SpectatorContent() {
   const latestReplay = useSessionSelector((state) => state.latestReplay);
   const { clearLatestReplay } = useSessionActions();
   const inLockdown = session?.mode === 'lockdown';
+  const canUseSpectatorAccess = session?.bandwidthSavings?.canUseExternalSpectatorAccess !== false;
+  const spectatorAccessMode = session?.bandwidthSavings?.externalSpectatorAccess || 'on';
   useDefaultNickname();
   // The spectator route is not rendered through App.jsx, so it must opt into
   // the same persisted identity heartbeat here. That keeps the existing
@@ -44,6 +46,26 @@ export default function SpectatorContent() {
     );
   }
 
+  if (session && !canUseSpectatorAccess) {
+    /*
+      The server keeps this socket in the normal user role when external
+      spectating is blocked. Rendering a full-page gate makes that intentional
+      state obvious instead of showing an empty spectator shell that repeatedly
+      fails to subscribe.
+    */
+    const message = spectatorAccessMode === 'admin'
+      ? 'This external spectator identity needs admin approval before it can view the spectator page.'
+      : 'External spectator access is disabled on this server.';
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-black text-slate-200">
+        <div className="surface max-w-md space-y-0.5 p-1 text-center text-sm">
+          <p className="text-lg font-semibold text-white">Spectate access required.</p>
+          <p className="text-slate-300">{message}</p>
+        </div>
+      </div>
+    );
+  }
+
   const mainClass = isPortraitLayout
     ? 'flex min-h-screen flex-col bg-black text-slate-100 md:h-screen md:overflow-hidden'
     : 'grid min-h-screen grid-cols-1 gap-0.5 bg-black text-slate-100 md:h-full md:min-h-0 md:grid-cols-[minmax(0,1fr)_18rem] lg:grid-cols-[minmax(0,1fr)_20rem]';

webui/src/spectate/SpectatorApp/components/PtzSpectatorCard.jsx

@@ -81,6 +81,19 @@ function PtzSnapshotFallback({ label, source }) {
 }
 
 function PtzLiveOrSnapshot({ label }) {
+  const isExternalSpectatorSnapshotOnly = useSessionSelector((state) =>
+    state.session?.role === 'spectator' &&
+    state.session?.isLocalNetwork === false &&
+    state.session?.bandwidthSavings?.externalSpectatorVideo === 'snapshots',
+  );
+  /*
+    PTZ live authorization is server-owned, but the spectator page knows when
+    the configured outcome is snapshot-only. Rendering the fallback directly
+    avoids a guaranteed denied WHEP request for every external spectator card.
+  */
+  if (isExternalSpectatorSnapshotOnly) {
+    return <PtzSnapshotFallback label={label} source={null} />;
+  }
   return (
     <PtzLiveVideo
       enabled