feat(voip): auto-show controls on call state changes

Show controls automatically when stateChange, trackStateChange events
fire or when toggling focus, so users never miss important state updates.

Author: diegolmello

app/lib/services/voip/useCallStore.test.ts

@@ -19,7 +19,7 @@ jest.mock('react-native-incall-manager', () => ({
 	setForceSpeakerphoneOn: jest.fn()
 }));
 
-function createMockCall(callId: string): IClientMediaCall {
+function createMockCall(callId: string) {
 	const listeners: Record<string, Set<(...args: unknown[]) => void>> = {};
 	const emitter = {
 		on: (ev: string, fn: (...args: unknown[]) => void) => {
@@ -30,7 +30,10 @@ function createMockCall(callId: string): IClientMediaCall {
 			listeners[ev]?.delete(fn);
 		}
 	};
-	return {
+	const emit = (ev: string) => {
+		listeners[ev]?.forEach(fn => fn());
+	};
+	const call = {
 		callId,
 		state: 'active',
 		muted: false,
@@ -48,6 +51,7 @@ function createMockCall(callId: string): IClientMediaCall {
 		accept: jest.fn(),
 		reject: jest.fn()
 	} as unknown as IClientMediaCall;
+	return { call, emit };
 }
 
 describe('useCallStore controlsVisible', () => {
@@ -74,6 +78,37 @@ describe('useCallStore controlsVisible', () => {
 		expect(useCallStore.getState().controlsVisible).toBe(true);
 	});
 
+	it('auto-shows controls on stateChange event', () => {
+		const { call, emit } = createMockCall('c1');
+		useCallStore.getState().setCall(call);
+		useCallStore.getState().toggleControlsVisible();
+		expect(useCallStore.getState().controlsVisible).toBe(false);
+
+		emit('stateChange');
+
+		expect(useCallStore.getState().controlsVisible).toBe(true);
+	});
+
+	it('auto-shows controls on trackStateChange event', () => {
+		const { call, emit } = createMockCall('c2');
+		useCallStore.getState().setCall(call);
+		useCallStore.getState().toggleControlsVisible();
+		expect(useCallStore.getState().controlsVisible).toBe(false);
+
+		emit('trackStateChange');
+
+		expect(useCallStore.getState().controlsVisible).toBe(true);
+	});
+
+	it('toggleFocus always shows controls', () => {
+		useCallStore.getState().toggleControlsVisible();
+		expect(useCallStore.getState().controlsVisible).toBe(false);
+
+		useCallStore.getState().toggleFocus();
+
+		expect(useCallStore.getState().controlsVisible).toBe(true);
+	});
+
 	it('reset restores controlsVisible to true', () => {
 		useCallStore.getState().toggleControlsVisible();
 		expect(useCallStore.getState().controlsVisible).toBe(false);
@@ -136,7 +171,7 @@ describe('useCallStore native accepted + stale timer', () => {
 
 	it('setCall clears native id and cancels stale timer so advance does not clear bound call context', () => {
 		useCallStore.getState().setNativeAcceptedCallId('x');
-		useCallStore.getState().setCall(createMockCall('x'));
+		useCallStore.getState().setCall(createMockCall('x').call);
 		jest.advanceTimersByTime(15_000);
 		expect(useCallStore.getState().call).not.toBeNull();
 		expect(useCallStore.getState().nativeAcceptedCallId).toBeNull();

app/lib/services/voip/useCallStore.ts

@@ -163,7 +163,7 @@ export const useCallStore = create<CallStore>((set, get) => ({
 			if (!currentCall) return;
 
 			const newState = currentCall.state;
-			set({ callState: newState });
+			set({ callState: newState, controlsVisible: true });
 
 			// Set start time when call becomes active
 			if (newState === 'active' && !get().callStartTime) {
@@ -179,7 +179,8 @@ export const useCallStore = create<CallStore>((set, get) => ({
 				isMuted: currentCall.muted,
 				isOnHold: currentCall.held,
 				remoteMute: currentCall.remoteMute,
-				remoteHeld: currentCall.remoteHeld
+				remoteHeld: currentCall.remoteHeld,
+				controlsVisible: true
 			});
 		};
 
@@ -240,7 +241,7 @@ export const useCallStore = create<CallStore>((set, get) => ({
 
 	toggleFocus: () => {
 		const isFocused = get().focused;
-		set({ focused: !isFocused });
+		set({ focused: !isFocused, controlsVisible: true });
 		if (isFocused) {
 			Navigation.back();
 		} else {