feat: Add 'call' support to improve 2-way audio experience (#2486)

Draws significant inspiration (and direct styling) from
https://github.com/dermotduffy/advanced-camera-card/pull/2447 . Thank
you @Maudfer !

BREAKING CHANGE:

The microphone condition previously bundled two unrelated signals —
whether a two-way-audio session was connected and whether the microphone
was muted. Connection state is now its own dedicated call condition, and
microphone is reserved purely for mute state. Configs are upgraded
automatically (the card rewrites affected conditions under overrides,
elements, and automations). If you maintain config by hand, convert as
follows:

If you only used connected:

# Before
```yaml
condition: microphone
connected: true
```

# After
```yaml
condition: call
call: true
```
If you used both connected and muted — they must be split into two
conditions, since they no longer live together:

# Before
```yaml
condition: microphone
connected: true
muted: false
```

# After
```yaml
condition: and
conditions:
  - condition: call
    call: true
  - condition: microphone
    muted: false
```

tests/components-lib/auto-hide.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { isAutoHidden, resolveAutoHideState } from '../../src/components-lib/auto-hide';
+
+describe('isAutoHidden', () => {
+  it('should not hide with an empty condition list', () => {
+    expect(isAutoHidden([], { call: true, casting: true })).toBe(false);
+  });
+
+  it('should hide when a configured condition is active', () => {
+    expect(isAutoHidden(['call'], { call: true, casting: false })).toBe(true);
+  });
+
+  it('should not hide when no configured condition is active', () => {
+    expect(isAutoHidden(['call'], { call: false, casting: true })).toBe(false);
+  });
+
+  it('should hide when any of multiple configured conditions is active', () => {
+    expect(isAutoHidden(['call', 'casting'], { call: false, casting: true })).toBe(true);
+  });
+});
+
+describe('resolveAutoHideState', () => {
+  it('should resolve with the supplied call state', () => {
+    expect(resolveAutoHideState(true)).toEqual({ call: true, casting: false });
+  });
+
+  it('should default the call state to false', () => {
+    expect(resolveAutoHideState()).toEqual({ call: false, casting: false });
+  });
+});

tests/components-lib/live/microphone-actions-controller.test.ts

@@ -294,6 +294,81 @@ describe('MicrophoneActionsController', () => {
     });
   });
 
+  describe('on call state change', () => {
+    it('should unmute on call start when call is a configured unmute condition', () => {
+      const microphoneManager = createMicrophoneManager();
+      const controller = new MicrophoneActionsController();
+      controller.setOptions({
+        microphoneManager,
+        autoUnmuteConditions: ['call' as const],
+      });
+
+      controller.setCallActive(false);
+      controller.setCallActive(true);
+
+      expect(microphoneManager.unmute).toBeCalledTimes(1);
+    });
+
+    it('should unmute when the call is already active on first notification', () => {
+      const microphoneManager = createMicrophoneManager();
+      const controller = new MicrophoneActionsController();
+      controller.setOptions({
+        microphoneManager,
+        autoUnmuteConditions: ['call' as const],
+      });
+
+      // `setCallActive(true)` is the first call-state signal, with no preceding
+      // `false` -- as for a live view that mounts while a call is already
+      // active. The initial state must not be swallowed as a baseline.
+      controller.setCallActive(true);
+
+      expect(microphoneManager.unmute).toBeCalledTimes(1);
+    });
+
+    it('should mute on call end when call is a configured mute condition', () => {
+      const microphoneManager = createMicrophoneManager();
+      const controller = new MicrophoneActionsController();
+      controller.setOptions({
+        microphoneManager,
+        autoMuteConditions: ['call' as const],
+      });
+
+      controller.setCallActive(true);
+      controller.setCallActive(false);
+
+      expect(microphoneManager.mute).toBeCalledTimes(1);
+    });
+
+    it('should not act on the initial call state', () => {
+      const microphoneManager = createMicrophoneManager();
+      const controller = new MicrophoneActionsController();
+      controller.setOptions({
+        microphoneManager,
+        autoMuteConditions: ['call' as const],
+        autoUnmuteConditions: ['call' as const],
+      });
+
+      controller.setCallActive(false);
+
+      expect(microphoneManager.mute).not.toBeCalled();
+      expect(microphoneManager.unmute).not.toBeCalled();
+    });
+
+    it('should not act on call start when call is not a configured condition', () => {
+      const microphoneManager = createMicrophoneManager();
+      const controller = new MicrophoneActionsController();
+      controller.setOptions({
+        microphoneManager,
+        autoUnmuteConditions: [],
+      });
+
+      controller.setCallActive(false);
+      controller.setCallActive(true);
+
+      expect(microphoneManager.unmute).not.toBeCalled();
+    });
+  });
+
   describe('lifecycle', () => {
     it('should be idempotent on setRoot for the same element', () => {
       const controller = new MicrophoneActionsController();

tests/components-lib/media-actions-controller.test.ts

@@ -631,19 +631,15 @@ describe('MediaActionsController', () => {
       controller.setOptions({
         autoUnmuteConditions: ['microphone' as const],
         playerSelector: 'video',
-        microphoneState: createMicrophoneState({ muted: true }),
       });
+      controller.setMicrophoneState(createMicrophoneState({ muted: true }));
 
       const children = createPlayerSlideNodes();
       controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
 
-      controller.setOptions({
-        autoUnmuteConditions: ['microphone' as const],
-        playerSelector: 'video',
-        microphoneState: createMicrophoneState({ muted: false }),
-      });
+      controller.setMicrophoneState(createMicrophoneState({ muted: false }));
 
       expect(
         (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
@@ -656,19 +652,15 @@ describe('MediaActionsController', () => {
       controller.setOptions({
         autoMuteConditions: ['microphone' as const],
         playerSelector: 'video',
-        microphoneState: createMicrophoneState({ muted: false }),
       });
+      controller.setMicrophoneState(createMicrophoneState({ muted: false }));
 
       const children = createPlayerSlideNodes();
       controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
 
-      controller.setOptions({
-        autoMuteConditions: ['microphone' as const],
-        playerSelector: 'video',
-        microphoneState: createMicrophoneState({ muted: true }),
-      });
+      controller.setMicrophoneState(createMicrophoneState({ muted: true }));
 
       vi.runOnlyPendingTimers();
 
@@ -683,19 +675,15 @@ describe('MediaActionsController', () => {
       controller.setOptions({
         autoMuteConditions: [],
         playerSelector: 'video',
-        microphoneState: createMicrophoneState({ muted: false }),
       });
+      controller.setMicrophoneState(createMicrophoneState({ muted: false }));
 
       const children = createPlayerSlideNodes();
       controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
 
-      controller.setOptions({
-        autoMuteConditions: ['microphone' as const],
-        playerSelector: 'video',
-        microphoneState: createMicrophoneState({ muted: true }),
-      });
+      controller.setMicrophoneState(createMicrophoneState({ muted: true }));
 
       vi.runOnlyPendingTimers();
 
@@ -703,5 +691,192 @@ describe('MediaActionsController', () => {
         (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.mute,
       ).not.toBeCalled();
     });
+
+    it('should not act on the initial microphone state', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoUnmuteConditions: ['microphone' as const],
+        playerSelector: 'video',
+      });
+
+      const children = createPlayerSlideNodes();
+      controller.setRoot(createParent({ children: children }));
+      await controller.setTarget(0, true);
+
+      controller.setMicrophoneState(createMicrophoneState({ muted: false }));
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).not.toBeCalled();
+    });
+  });
+
+  describe('should take action on call state changes', () => {
+    it('should unmute the target on call start', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoUnmuteConditions: ['call' as const],
+        playerSelector: 'video',
+      });
+      controller.setCallActive(false);
+
+      const children = createPlayerSlideNodes();
+      controller.setRoot(createParent({ children: children }));
+
+      await controller.setTarget(0, true);
+
+      controller.setCallActive(true);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalled();
+    });
+
+    it('should mute the target on call end', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoMuteConditions: ['call' as const],
+        playerSelector: 'video',
+      });
+      controller.setCallActive(true);
+
+      const children = createPlayerSlideNodes();
+      controller.setRoot(createParent({ children: children }));
+
+      await controller.setTarget(0, true);
+
+      controller.setCallActive(false);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.mute,
+      ).toBeCalled();
+    });
+
+    it('should not act on the initial call state', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoMuteConditions: ['call' as const],
+        autoUnmuteConditions: ['call' as const],
+        playerSelector: 'video',
+      });
+
+      const children = createPlayerSlideNodes();
+      controller.setRoot(createParent({ children: children }));
+      await controller.setTarget(0, true);
+
+      controller.setCallActive(false);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.mute,
+      ).not.toBeCalled();
+    });
+
+    it('should not act when call is not a configured condition', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoUnmuteConditions: [],
+        playerSelector: 'video',
+      });
+      controller.setCallActive(false);
+
+      const children = createPlayerSlideNodes();
+      controller.setRoot(createParent({ children: children }));
+      await controller.setTarget(0, true);
+
+      controller.setCallActive(true);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).not.toBeCalled();
+    });
+
+    it('should apply the call-start unmute when the target arrives after the call', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoUnmuteConditions: ['call' as const],
+        playerSelector: 'video',
+      });
+
+      const children = createPlayerSlideNodes();
+      controller.setRoot(createParent({ children: children }));
+
+      // The call becomes active before any target is selected: with no
+      // target, the unmute cannot be applied yet.
+      controller.setCallActive(true);
+      await flushPromises();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).not.toBeCalled();
+
+      await controller.setTarget(0, true);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalled();
+    });
+
+    it('should unmute when the call is already active on the first call-state signal', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoUnmuteConditions: ['call' as const],
+        playerSelector: 'video',
+      });
+
+      const children = createPlayerSlideNodes();
+      controller.setRoot(createParent({ children: children }));
+      await controller.setTarget(0, true);
+
+      // `setCallActive(true)` is the first call-state signal, with no preceding
+      // `false` -- as for a carousel that loads while a call is already
+      // active. The initial state must not be swallowed as a baseline.
+      controller.setCallActive(true);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalled();
+    });
+
+    it('should defer the call-start unmute until the media player is ready', async () => {
+      const controller = new MediaActionsController();
+
+      controller.setOptions({
+        autoUnmuteConditions: ['call' as const],
+        playerSelector: 'video',
+      });
+      controller.setCallActive(false);
+
+      // A player whose media player controller is not ready on first request.
+      const mediaPlayerController = mock<MediaPlayerController>();
+      const player = document.createElement('video');
+      player['getMediaPlayerController'] = vi
+        .fn()
+        .mockResolvedValueOnce(null)
+        .mockResolvedValue(mediaPlayerController);
+      const child = createTestSlideNodes({ n: 1 })[0];
+      child.appendChild(player as unknown as MediaPlayerElement);
+
+      controller.setRoot(createParent({ children: [child] }));
+      await controller.setTarget(0, true);
+
+      // The call starts while the player is still not ready: no unmute yet.
+      controller.setCallActive(true);
+      await flushPromises();
+      expect(mediaPlayerController.unmute).not.toBeCalled();
+
+      // Once the media loads the deferred unmute is applied -- exactly once,
+      // so a later reload cannot clobber a manual mute made during the call.
+      player.dispatchEvent(new Event('advanced-camera-card:media:loaded'));
+      await flushPromises();
+      player.dispatchEvent(new Event('advanced-camera-card:media:loaded'));
+      await flushPromises();
+      expect(mediaPlayerController.unmute).toBeCalledTimes(1);
+    });
   });
 });

tests/components-lib/menu-button-controller.test.ts

@@ -4,12 +4,13 @@ import { mock } from 'vitest-mock-extended';
 import { Capabilities } from '../../src/camera-manager/capabilities.js';
 import { CameraManager } from '../../src/camera-manager/manager.js';
 import { CameraManagerCameraMetadata } from '../../src/camera-manager/types.js';
+import { CallManager } from '../../src/card-controller/call/manager.js';
 import { FoldersManager } from '../../src/card-controller/folders/manager.js';
 import { FolderQuery } from '../../src/card-controller/folders/types';
 import { FullscreenManager } from '../../src/card-controller/fullscreen/fullscreen-manager.js';
 import { MediaPlayerManager } from '../../src/card-controller/media-player-manager.js';
-import { PIPManager } from '../../src/card-controller/pip-manager.js';
 import { MicrophoneManager } from '../../src/card-controller/microphone-manager.js';
+import { PIPManager } from '../../src/card-controller/pip-manager.js';
 import { ViewManager } from '../../src/card-controller/view/view-manager.js';
 import {
   MenuButtonController,
@@ -1167,9 +1168,166 @@ describe('MenuButtonController', () => {
     });
   });
 
+  describe('should have call button', () => {
+    it('with no view', () => {
+      const buttons = calculateButtons(controller, {
+        cameraManager: createCameraManager(),
+        view: null,
+      });
+
+      expect(buttons).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ title: 'Start 2-way audio call' }),
+        ]),
+      );
+    });
+
+    it('with a non-live view', () => {
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: 'camera-1',
+            capabilities: createCapabilities({ '2-way-audio': true }),
+          },
+        ]),
+      );
+      const buttons = calculateButtons(controller, {
+        cameraManager,
+        view: createView({ camera: 'camera-1', view: 'clips' }),
+      });
+
+      expect(buttons).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ title: 'Start 2-way audio call' }),
+        ]),
+      );
+    });
+
+    it('when no camera supports 2-way audio', () => {
+      const cameraManager = createCameraManager(
+        createStore([{ cameraID: 'camera-1', capabilities: createCapabilities() }]),
+      );
+      const buttons = calculateButtons(controller, { cameraManager });
+
+      expect(buttons).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ title: 'Start 2-way audio call' }),
+        ]),
+      );
+    });
+
+    it('with a single 2-way-audio target', () => {
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: 'camera-1',
+            capabilities: createCapabilities({ '2-way-audio': true }),
+          },
+        ]),
+      );
+      const buttons = calculateButtons(controller, { cameraManager });
+
+      expect(buttons).toContainEqual({
+        alignment: 'matching',
+        state_color: true,
+        permanent: false,
+        icon: 'mdi:phone',
+        enabled: true,
+        priority: 50,
+        type: 'custom:advanced-camera-card-menu-icon',
+        title: 'Start 2-way audio call',
+        tap_action: {
+          action: 'fire-dom-event',
+          advanced_camera_card_action: 'call_start',
+        },
+      });
+    });
+
+    it('with multiple 2-way-audio targets', () => {
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: 'camera-1',
+            capabilities: createCapabilities({ '2-way-audio': true }),
+            config: createCameraConfig({ dependencies: { cameras: ['camera-2'] } }),
+          },
+          {
+            cameraID: 'camera-2',
+            capabilities: createCapabilities({ '2-way-audio': true }),
+          },
+        ]),
+      );
+      const buttons = calculateButtons(controller, { cameraManager });
+
+      expect(buttons).toContainEqual(
+        expect.objectContaining({
+          icon: 'mdi:phone',
+          title: 'Start 2-way audio call',
+          type: 'custom:advanced-camera-card-menu-submenu',
+          items: [
+            expect.objectContaining({
+              tap_action: {
+                action: 'fire-dom-event',
+                advanced_camera_card_action: 'call_start',
+                camera: 'camera-1',
+              },
+            }),
+            expect.objectContaining({
+              tap_action: {
+                action: 'fire-dom-event',
+                advanced_camera_card_action: 'call_start',
+                camera: 'camera-1',
+                stream: 'camera-2',
+              },
+            }),
+          ],
+        }),
+      );
+    });
+
+    it('when a call is active', () => {
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: 'camera-1',
+            capabilities: createCapabilities({ '2-way-audio': true }),
+          },
+        ]),
+      );
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
+      const buttons = calculateButtons(controller, {
+        cameraManager,
+        callManager,
+        view: createView({ camera: 'camera-1' }),
+      });
+
+      expect(buttons).toContainEqual({
+        alignment: 'matching',
+        state_color: true,
+        permanent: false,
+        icon: 'mdi:phone-hangup',
+        enabled: true,
+        priority: 50,
+        type: 'custom:advanced-camera-card-menu-icon',
+        title: 'End 2-way audio call',
+        style: {
+          animation: 'pulse 3s infinite',
+          color: 'var(--advanced-camera-card-menu-button-critical-color)',
+        },
+        tap_action: {
+          action: 'fire-dom-event',
+          advanced_camera_card_action: 'call_end',
+        },
+      });
+    });
+  });
+
   describe('should have microphone button', () => {
     it('when camera has 2-way-audio capability', () => {
       const microphoneManager = mock<MicrophoneManager>();
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
       vi.mocked(microphoneManager.isForbidden).mockReturnValue(false);
       vi.mocked(microphoneManager.isMuted).mockReturnValue(false);
       vi.mocked(microphoneManager.isSupported).mockReturnValue(true);
@@ -1185,6 +1343,7 @@ describe('MenuButtonController', () => {
       const buttons = calculateButtons(controller, {
         cameraManager,
         microphoneManager: microphoneManager,
+        callManager,
       });
 
       expect(buttons).toContainEqual({
@@ -1213,6 +1372,8 @@ describe('MenuButtonController', () => {
 
     it('when camera does not have 2-way-audio capability', () => {
       const microphoneManager = mock<MicrophoneManager>();
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
       vi.mocked(microphoneManager.isForbidden).mockReturnValue(false);
       vi.mocked(microphoneManager.isMuted).mockReturnValue(false);
       vi.mocked(microphoneManager.isSupported).mockReturnValue(true);
@@ -1223,6 +1384,34 @@ describe('MenuButtonController', () => {
       const buttons = calculateButtons(controller, {
         cameraManager,
         microphoneManager: microphoneManager,
+        callManager,
+      });
+
+      expect(buttons).not.toEqual(
+        expect.arrayContaining([expect.objectContaining({ title: 'Microphone' })]),
+      );
+    });
+
+    it('is not shown without an active call', () => {
+      const microphoneManager = mock<MicrophoneManager>();
+      vi.mocked(microphoneManager.isForbidden).mockReturnValue(false);
+      vi.mocked(microphoneManager.isMuted).mockReturnValue(false);
+      vi.mocked(microphoneManager.isSupported).mockReturnValue(true);
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(false);
+
+      const cameraManager = createCameraManager(
+        createStore([
+          {
+            cameraID: 'camera-1',
+            capabilities: createCapabilities({ '2-way-audio': true }),
+          },
+        ]),
+      );
+      const buttons = calculateButtons(controller, {
+        cameraManager,
+        microphoneManager,
+        callManager,
       });
 
       expect(buttons).not.toEqual(
@@ -1232,6 +1421,8 @@ describe('MenuButtonController', () => {
 
     it('with forbidden microphone', () => {
       const microphoneManager = mock<MicrophoneManager>();
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
       vi.mocked(microphoneManager.isForbidden).mockReturnValue(true);
 
       const cameraManager = createCameraManager(
@@ -1245,6 +1436,7 @@ describe('MenuButtonController', () => {
       const buttons = calculateButtons(controller, {
         cameraManager,
         microphoneManager: microphoneManager,
+        callManager,
       });
 
       expect(buttons).toContainEqual({
@@ -1262,6 +1454,8 @@ describe('MenuButtonController', () => {
 
     it('with muted microphone', () => {
       const microphoneManager = mock<MicrophoneManager>();
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
       vi.mocked(microphoneManager.isForbidden).mockReturnValue(false);
       vi.mocked(microphoneManager.isMuted).mockReturnValue(true);
       vi.mocked(microphoneManager.isSupported).mockReturnValue(true);
@@ -1277,6 +1471,7 @@ describe('MenuButtonController', () => {
       const buttons = calculateButtons(controller, {
         cameraManager,
         microphoneManager: microphoneManager,
+        callManager,
       });
 
       expect(buttons).toContainEqual({
@@ -1302,6 +1497,8 @@ describe('MenuButtonController', () => {
 
     it('with unsupported microphone', () => {
       const microphoneManager = mock<MicrophoneManager>();
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
       vi.mocked(microphoneManager.isForbidden).mockReturnValue(false);
       vi.mocked(microphoneManager.isMuted).mockReturnValue(true);
       vi.mocked(microphoneManager.isSupported).mockReturnValue(false);
@@ -1317,6 +1514,7 @@ describe('MenuButtonController', () => {
       const buttons = calculateButtons(controller, {
         cameraManager,
         microphoneManager: microphoneManager,
+        callManager,
       });
 
       expect(buttons).toContainEqual({
@@ -1334,6 +1532,8 @@ describe('MenuButtonController', () => {
 
     it('with muted toggle type microphone', () => {
       const microphoneManager = mock<MicrophoneManager>();
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
       vi.mocked(microphoneManager.isForbidden).mockReturnValue(false);
       vi.mocked(microphoneManager.isMuted).mockReturnValue(true);
       vi.mocked(microphoneManager.isSupported).mockReturnValue(true);
@@ -1349,6 +1549,7 @@ describe('MenuButtonController', () => {
       const buttons = calculateButtons(controller, {
         cameraManager,
         microphoneManager: microphoneManager,
+        callManager,
         config: createConfig({
           menu: { buttons: { microphone: { type: 'toggle' } } },
         }),
@@ -1373,6 +1574,8 @@ describe('MenuButtonController', () => {
 
     it('with unmuted toggle type microphone', () => {
       const microphoneManager = mock<MicrophoneManager>();
+      const callManager = mock<CallManager>();
+      vi.mocked(callManager.isActive).mockReturnValue(true);
       vi.mocked(microphoneManager.isForbidden).mockReturnValue(false);
       vi.mocked(microphoneManager.isMuted).mockReturnValue(false);
       vi.mocked(microphoneManager.isSupported).mockReturnValue(true);
@@ -1388,6 +1591,7 @@ describe('MenuButtonController', () => {
       const buttons = calculateButtons(controller, {
         cameraManager,
         microphoneManager: microphoneManager,
+        callManager,
         config: createConfig({
           menu: { buttons: { microphone: { type: 'toggle' } } },
         }),

tests/components-lib/menu-controller.test.ts

@@ -681,4 +681,37 @@ describe('MenuController', () => {
       });
     });
   });
+
+  describe('auto-hide', () => {
+    it('should not render before a config is set', () => {
+      const controller = new MenuController(createLitElement());
+      expect(controller.shouldRender()).toBe(false);
+    });
+
+    it('should not render when the style is none', () => {
+      const controller = new MenuController(createLitElement());
+      controller.setMenuConfig(createMenuConfig({ style: 'none' }));
+      expect(controller.shouldRender()).toBe(false);
+    });
+
+    it('should render with a config and no auto-hide state', () => {
+      const controller = new MenuController(createLitElement());
+      controller.setMenuConfig(createMenuConfig({ auto_hide: ['call'] }));
+      expect(controller.shouldRender()).toBe(true);
+    });
+
+    it('should render when no auto-hide condition is active', () => {
+      const controller = new MenuController(createLitElement());
+      controller.setMenuConfig(createMenuConfig({ auto_hide: ['call'] }));
+      controller.setAutoHideState({ call: false, casting: true });
+      expect(controller.shouldRender()).toBe(true);
+    });
+
+    it('should not render when a configured auto-hide condition is active', () => {
+      const controller = new MenuController(createLitElement());
+      controller.setMenuConfig(createMenuConfig({ auto_hide: ['call'] }));
+      controller.setAutoHideState({ call: true, casting: false });
+      expect(controller.shouldRender()).toBe(false);
+    });
+  });
 });

tests/components-lib/status-bar-controller.test.ts

@@ -429,4 +429,35 @@ describe('StatusBarController', () => {
       );
     });
   });
+
+  describe('auto-hide', () => {
+    const sufficientItem = {
+      type: 'custom:advanced-camera-card-status-bar-string' as const,
+      string: 'Item',
+      sufficient: true,
+    };
+
+    it('should render with a config and no auto-hide state', () => {
+      const controller = new StatusBarController(createLitElement());
+      controller.setConfig(createConfig({ auto_hide: ['call'] }));
+      controller.setItems([sufficientItem]);
+      expect(controller.shouldRender()).toBe(true);
+    });
+
+    it('should render when no auto-hide condition is active', () => {
+      const controller = new StatusBarController(createLitElement());
+      controller.setConfig(createConfig({ auto_hide: ['call'] }));
+      controller.setItems([sufficientItem]);
+      controller.setAutoHideState({ call: false, casting: true });
+      expect(controller.shouldRender()).toBe(true);
+    });
+
+    it('should not render when a configured auto-hide condition is active', () => {
+      const controller = new StatusBarController(createLitElement());
+      controller.setConfig(createConfig({ auto_hide: ['call'] }));
+      controller.setItems([sufficientItem]);
+      controller.setAutoHideState({ call: true, casting: false });
+      expect(controller.shouldRender()).toBe(false);
+    });
+  });
 });