From 51ad54fda5c04eb19fdf836213bc1fa9396d6bf1 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 27 Apr 2026 20:13:43 +0200
Subject: [PATCH] refactor(camera): unify toggle paths through
 handleCameraAction

- Voice-bar and mobile camera buttons now use the canonical handler
  (fixes mobile no-op and voice-bar wrong-preset bugs)
- Remove dead useLiveKit.toggleCamera
- Add _intentionalCameraOff flag with mark/consume helpers
---
 .../layout/MobileVoiceFullScreen.tsx          |  4 +--
 .../src/components/voice/VoiceControls.tsx    | 17 ++---------
 packages/web/src/hooks/useLiveKit.ts          | 13 +-------
 packages/web/src/utils/voiceActions.ts        | 30 +++++++++++++++++--
 4 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/web/src/components/layout/MobileVoiceFullScreen.tsx b/packages/web/src/components/layout/MobileVoiceFullScreen.tsx
index 72d4073d..5f5811db 100644
--- a/packages/web/src/components/layout/MobileVoiceFullScreen.tsx
+++ b/packages/web/src/components/layout/MobileVoiceFullScreen.tsx
@@ -8,6 +8,7 @@ import { useContextMenuStore, type ContextMenuItem } from '../../stores/contextM
 import { buildVoiceModMenuItems, VolumeSliderItem } from '../voice/voiceMenuItems';
 import { wsSend } from '../../hooks/useWebSocket';
 import { getChannelOrigin } from '../../stores/spaceStore';
+import { handleCameraAction } from '../../utils/voiceActions';
 
 export function MobileVoiceFullScreen() {
   const popMobileScreen = useUIStore((s) => s.popMobileScreen);
@@ -20,7 +21,6 @@ export function MobileVoiceFullScreen() {
   const isScreenSharing = useVoiceStore((s) => s.isScreenSharing);
   const toggleMute = useVoiceStore((s) => s.toggleMic);
   const toggleDeafen = useVoiceStore((s) => s.toggleDeafen);
-  const toggleCamera = useVoiceStore((s) => s.toggleCamera);
   const toggleScreenShare = useVoiceStore((s) => s.toggleScreenShare);
   const leaveVoice = useVoiceStore((s) => s.leaveVoice);
   const voiceUsers = useVoiceStore((s) => s.voiceUsers);
@@ -283,7 +283,7 @@ export function MobileVoiceFullScreen() {
 
         {/* Camera */}
         <button
-          onClick={toggleCamera}
+          onClick={handleCameraAction}
           className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
             isCameraOn ? 'bg-accent-mint/20 text-accent-mint' : 'bg-surface-elevated text-txt-primary hover:bg-interactive-hover'
           }`}
diff --git a/packages/web/src/components/voice/VoiceControls.tsx b/packages/web/src/components/voice/VoiceControls.tsx
index 5861b5a6..c0e45c60 100644
--- a/packages/web/src/components/voice/VoiceControls.tsx
+++ b/packages/web/src/components/voice/VoiceControls.tsx
@@ -8,6 +8,7 @@ import { ConnectionInfoPopover } from './ConnectionInfoPopover';
 import { startScreenShare, stopScreenShare } from '../../utils/screenShare';
 import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import { broadcastVoiceStatus } from '../../utils/voice';
+import { handleCameraAction } from '../../utils/voiceActions';
 
 /**
  * VoiceControls renders the voice status + button rows.
@@ -17,7 +18,6 @@ export function VoiceControls() {
   const currentVoiceChannelId = useVoiceStore((s) => s.currentVoiceChannelId);
   const isCameraOn = useVoiceStore((s) => s.isCameraOn);
   const isScreenSharing = useVoiceStore((s) => s.isScreenSharing);
-  const toggleCamera = useVoiceStore((s) => s.toggleCamera);
   const rnnoiseEnabled = useVoiceStore((s) => s.rnnoiseEnabled);
   const setRnnoiseEnabled = useVoiceStore((s) => s.setRnnoiseEnabled);
   const connectionError = useVoiceStore((s) => s.connectionError);
@@ -44,19 +44,6 @@ export function VoiceControls() {
   const channel = channels.find(c => c.id === currentVoiceChannelId);
   const channelName = channel?.name ?? (activeDmCall ? 'DM Call' : 'Voice Channel');
 
-  const handleCamera = async () => {
-    const room = getActiveRoom();
-    if (!room) return;
-    try {
-      const willEnable = !isCameraOn;
-      await room.localParticipant.setCameraEnabled(willEnable);
-      toggleCamera();
-      broadcastVoiceStatus();
-    } catch (err) {
-      console.error('[VoiceControls] Failed to toggle camera:', err);
-    }
-  };
-
   const handleScreenShare = async () => {
     const room = getActiveRoom();
     console.log('[SS] handleScreenShare clicked, room:', !!room, 'isScreenSharing:', isScreenSharing);
@@ -162,7 +149,7 @@ export function VoiceControls() {
       <div className="relative flex items-center gap-1 px-3 pb-2 pt-1">
         {canSpeak && (
           <button
-            onClick={handleCamera}
+            onClick={handleCameraAction}
             className={`${btnBase} ${
               isCameraOn
                 ? 'bg-surface-base text-status-online hover:bg-surface-channel'
diff --git a/packages/web/src/hooks/useLiveKit.ts b/packages/web/src/hooks/useLiveKit.ts
index 91fed92d..2a93768d 100644
--- a/packages/web/src/hooks/useLiveKit.ts
+++ b/packages/web/src/hooks/useLiveKit.ts
@@ -22,7 +22,6 @@ import { broadcastVoiceStatus } from '../utils/voice';
 import { AudioManager } from '../audio/AudioManager';
 import { SpeakingDetector } from '../audio/SpeakingDetector';
 import {
-  CAMERA_PRESET,
   CAMERA_OVERDRIVE,
   buildScreenShareOptions,
   applyOverdrive,
@@ -644,16 +643,6 @@ export function useLiveKit() {
     useVoiceStore.getState().toggleMic();
   }, []);
 
-  const toggleCamera = useCallback(async () => {
-    if (roomRef.current) {
-      if (!isCameraOn) {
-        await roomRef.current.localParticipant.setCameraEnabled(true, { resolution: CAMERA_PRESET.resolution, frameRate: CAMERA_PRESET.encoding.maxFramerate }, { videoCodec: CAMERA_PRESET.codec, videoEncoding: CAMERA_PRESET.encoding, simulcast: true });
-        setTimeout(() => { if (roomRef.current) applyOverdrive(roomRef.current, Track.Source.Camera, CAMERA_OVERDRIVE); }, 2000);
-      } else { await roomRef.current.localParticipant.setCameraEnabled(false); }
-      updateParticipants();
-    }
-  }, [isCameraOn, updateParticipants]);
-
   const toggleScreenShare = useCallback(async () => {
     if (!roomRef.current) return;
     if (!useVoiceStore.getState().isScreenSharing) {
@@ -721,5 +710,5 @@ export function useLiveKit() {
   }, []);
 
 
-  return { room, isConnected, isConnecting, connectionState, connectedChannelId, connectionError, connect, disconnect, toggleMic, toggleCamera, toggleScreenShare };
+  return { room, isConnected, isConnecting, connectionState, connectedChannelId, connectionError, connect, disconnect, toggleMic, toggleScreenShare };
 }
diff --git a/packages/web/src/utils/voiceActions.ts b/packages/web/src/utils/voiceActions.ts
index 33b33162..cf2eece7 100644
--- a/packages/web/src/utils/voiceActions.ts
+++ b/packages/web/src/utils/voiceActions.ts
@@ -6,6 +6,25 @@ import { getChannelOrigin } from '../stores/spaceStore';
 import { broadcastVoiceStatus, broadcastDeafenViaLiveKit } from './voice';
 import { CAMERA_PRESET, startScreenShare, stopScreenShare } from './screenShare';
 
+/**
+ * One-shot flag used to distinguish user-initiated camera-off from unexpected
+ * track-end events (hardware unplug, OS permission revoke). Set right before
+ * `setCameraEnabled(false)` in any deliberate disable path; consumed-and-cleared
+ * by the camera-track `ended` handler in useLiveKit. Module-level by design:
+ * never persisted, never on the store, single producer + single consumer.
+ */
+let _intentionalCameraOff = false;
+
+export function markIntentionalCameraOff(): void {
+  _intentionalCameraOff = true;
+}
+
+export function consumeIntentionalCameraOff(): boolean {
+  const v = _intentionalCameraOff;
+  _intentionalCameraOff = false;
+  return v;
+}
+
 /**
  * Toggle mute. Respects space-mute/deafen guards.
  * Extracted from VoiceControlBar so keybinds and buttons share the same logic.
@@ -31,7 +50,8 @@ export function handleDeafenAction(isSpaceDeafened: boolean): void {
 }
 
 /**
- * Toggle camera. Requires LiveKit room.
+ * Toggle camera. Requires LiveKit room. Sole canonical camera-toggle path —
+ * the voice-bar button, mobile button, and keybind all funnel through here.
  */
 export async function handleCameraAction(): Promise<void> {
   const room = getActiveRoom();
@@ -40,8 +60,9 @@ export async function handleCameraAction(): Promise<void> {
   try {
     const willEnable = !isCameraOn;
     if (willEnable) {
-      await room.localParticipant.setCameraEnabled(true,
-        { resolution: CAMERA_PRESET.resolution },
+      await room.localParticipant.setCameraEnabled(
+        true,
+        { resolution: CAMERA_PRESET.resolution, frameRate: CAMERA_PRESET.encoding.maxFramerate },
         {
           videoCodec: CAMERA_PRESET.codec,
           videoEncoding: CAMERA_PRESET.encoding,
@@ -49,6 +70,9 @@ export async function handleCameraAction(): Promise<void> {
         }
       );
     } else {
+      // Mark this disable as intentional so the track-`ended` handler skips
+      // its unplug/permission-revoke probe + toast.
+      markIntentionalCameraOff();
       await room.localParticipant.setCameraEnabled(false);
     }
     useVoiceStore.getState().toggleCamera();