feat(call): in-call soundboard, quality controls, room call-permissions

Element Call is now consumed as our self-built fork
(@lotusguild/element-call-embedded); wire up its previously-dormant
capabilities and document the fork as live.

Soundboard (P5-15): a call-bar button plays user-uploaded audio clips into the
call as a real published track (io.lotus.inject_audio) plus local playback.
Clips are uploadable like emoji/sticker packs, stored in io.lotus.soundboard
account data (synced across devices). Gated by a Settings toggle + volume.

Quality controls (P5-31): per-user mic/screenshare bitrate + screenshare
framerate (Settings -> Calls), applied via io.lotus.set_quality clamped to any
room cap. Room admins set caps and hard call-permissions (allow_screenshare /
allow_camera) in Room Settings -> Voice; the call bar hides blocked buttons.

- New: CallSoundboard, useSoundboard, soundboardClips; RoomQuality,
  useCallQuality, callQuality (+ unit tests).
- Optimistic-write RoomQuality admin UI (no stale-state clobber).
- Docs: mark EC fork live across README/FEATURES/TODO/BUGS/TESTING; add D2
  manual-test steps.

Numeric quality caps are client-cooperative; screenshare/camera permissions are
hard-enforced server-side (see LotusGuild/matrix voice-limit-guard).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/call/CallControls.tsx

@@ -37,6 +37,10 @@ import { stopPropagation } from '../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useCallEmbedRef } from '../../hooks/useCallEmbed';
 import { useAfkAutoMute } from '../../hooks/useAfkAutoMute';
+import { CallSoundboard } from './CallSoundboard';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { StateEvent } from '../../../types/matrix/room';
+import { RoomQualityContent } from '../../utils/callQuality';
 
 type CallControlsProps = {
   callEmbed: CallEmbed;
@@ -88,6 +92,19 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   const [pttMode] = useSetting(settingsAtom, 'pttMode');
   const [pttKey] = useSetting(settingsAtom, 'pttKey');
   const [deafenKey] = useSetting(settingsAtom, 'deafenKey');
+  const [soundboardEnabled] = useSetting(settingsAtom, 'soundboardEnabled');
+
+  // [P5-31] Hard room publish policy — hide controls the server will refuse so
+  // users don't click dead buttons. Absent/true = allowed.
+  const roomQualityEvent = useStateEvent(callEmbed.room, StateEvent.LotusRoomQuality);
+  const roomQuality = roomQualityEvent?.getContent<RoomQualityContent>();
+  const cameraAllowed = roomQuality?.allow_camera !== false;
+  const screenshareAllowed = roomQuality?.allow_screenshare !== false;
+  // Keep a forbidden control visible while its track is still live (so the user
+  // can stop it); otherwise hide it entirely.
+  const showCamera = cameraAllowed || video;
+  const showScreenshare = screenshareAllowed || screenshare;
+  const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
   const [pttActive, setPttActive] = useState(false);
 
   // Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
@@ -339,24 +356,31 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               onToggle={() => callEmbed.control.toggleScreenshareAudio()}
             />
           </Box>
-          {!compact && <ControlDivider />}
-          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <VideoButton enabled={video} onToggle={handleVideoToggle} />
-            <ScreenShareButton
-              enabled={screenshare}
-              onToggle={() =>
-                screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-              }
-            />
-            {!!document.fullscreenEnabled && (
-              <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
-            )}
-          </Box>
+          {!compact && showVideoGroup && <ControlDivider />}
+          {showVideoGroup && (
+            <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+              {/* Show a forbidden control while its track is still live so the
+                  user can stop it; once stopped it hides and can't be restarted. */}
+              {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
+              {showScreenshare && (
+                <ScreenShareButton
+                  enabled={screenshare}
+                  onToggle={() =>
+                    screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
+                  }
+                />
+              )}
+              {!!document.fullscreenEnabled && (
+                <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
+              )}
+            </Box>
+          )}
         </Box>
         {!compact && <ControlDivider />}
         <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
             <ChatButton />
+            {soundboardEnabled && <CallSoundboard callEmbed={callEmbed} />}
             <PopOut
               anchor={cords}
               position="Top"