Remember previous mute states when devices disappear and reappear (#2957)

src/room/MuteStates.test.tsx

@@ -6,9 +6,10 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
-import { type ReactNode } from "react";
+import { type FC, useCallback, useState, type ReactNode } from "react";
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
 
 import { useMuteStates } from "./MuteStates";
 import {
@@ -21,11 +22,16 @@ import { mockConfig } from "../utils/test";
 
 function TestComponent(): ReactNode {
   const muteStates = useMuteStates();
+  const onToggleAudio = useCallback(
+    () => muteStates.audio.setEnabled?.(!muteStates.audio.enabled),
+    [muteStates],
+  );
   return (
     <div>
       <div data-testid="audio-enabled">
         {muteStates.audio.enabled.toString()}
       </div>
+      <button onClick={onToggleAudio}>Toggle audio</button>
       <div data-testid="video-enabled">
         {muteStates.video.enabled.toString()}
       </div>
@@ -174,4 +180,50 @@ describe("useMuteStates", () => {
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
     expect(screen.getByTestId("video-enabled").textContent).toBe("false");
   });
+
+  it("remembers previous state when devices disappear and reappear", async () => {
+    const user = userEvent.setup();
+    mockConfig();
+    const noDevices = mockMediaDevices({ microphone: false, camera: false });
+    const someDevices = mockMediaDevices();
+    const ReappearanceTest: FC = () => {
+      const [devices, setDevices] = useState(someDevices);
+      const onConnectDevicesClick = useCallback(
+        () => setDevices(someDevices),
+        [],
+      );
+      const onDisconnectDevicesClick = useCallback(
+        () => setDevices(noDevices),
+        [],
+      );
+
+      return (
+        <MemoryRouter>
+          <MediaDevicesContext.Provider value={devices}>
+            <TestComponent />
+            <button onClick={onConnectDevicesClick}>Connect devices</button>
+            <button onClick={onDisconnectDevicesClick}>
+              Disconnect devices
+            </button>
+          </MediaDevicesContext.Provider>
+        </MemoryRouter>
+      );
+    };
+
+    render(<ReappearanceTest />);
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+    await user.click(screen.getByRole("button", { name: "Toggle audio" }));
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+    await user.click(
+      screen.getByRole("button", { name: "Disconnect devices" }),
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+    await user.click(screen.getByRole("button", { name: "Connect devices" }));
+    // Audio should remember that it was muted, while video should re-enable
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+  });
 });

src/room/MuteStates.ts

@@ -57,8 +57,9 @@ function useMuteState(
   enabledByDefault: () => boolean,
 ): MuteState {
   const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
+    // Determine the default value once devices are actually connected
     (prev) =>
-      device.available.size > 0 ? (prev ?? enabledByDefault()) : undefined,
+      prev ?? (device.available.size > 0 ? enabledByDefault() : undefined),
     [device],
   );
   return useMemo(