From cec78a383d548de052d9110f22b77f6af8f7209f Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 2 Jun 2026 11:14:47 +0200
Subject: [PATCH] Fix footer stories

---
 src/components/CallFooter.stories.tsx       | 29 +++++++++++++--------
 src/components/MediaMuteAndSwitchButton.tsx |  2 +-
 src/settings/SettingsModal.tsx              |  2 +-
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/CallFooter.stories.tsx b/src/components/CallFooter.stories.tsx
index e9a7537c..7006d809 100644
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -17,6 +17,9 @@ import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
 import { type GridMode } from "../state/CallViewModel/CallViewModel";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { MediaDevices } from "../state/MediaDevices";
+import { globalScope } from "../state/ObservableScope";
 // consts for tests
 const reactionIdentifier = "@user:example.com:DEVICE";
 const reactionData = {
@@ -24,6 +27,8 @@ const reactionData = {
   reactions$: new BehaviorSubject({}),
 };
 
+const mediaDevices = new MediaDevices(globalScope);
+
 /**
  * A wrapper component that is used for:
  *  - exposing the snapshot via props so the storybook documents the snapshot properties (basically unpack them form the vm)
@@ -41,17 +46,19 @@ function CallFooterStoryWrapper({
 }): ReactNode {
   const vm = useStaticViewModel(vmSnapshot);
   return (
-    <div className={inCallViewStyles.inRoom}>
-      <ReactionsSenderContext
-        value={{
-          supportsReactions: false,
-          toggleRaisedHand: async () => Promise.resolve(),
-          sendReaction: async (reaction: ReactionOption) => Promise.resolve(),
-        }}
-      >
-        <CallFooter vm={vm} />
-      </ReactionsSenderContext>
-    </div>
+    <MediaDevicesContext value={mediaDevices}>
+      <div className={inCallViewStyles.inRoom}>
+        <ReactionsSenderContext
+          value={{
+            supportsReactions: false,
+            toggleRaisedHand: async () => Promise.resolve(),
+            sendReaction: async (reaction: ReactionOption) => Promise.resolve(),
+          }}
+        >
+          <CallFooter vm={vm} />
+        </ReactionsSenderContext>
+      </div>
+    </MediaDevicesContext>
   );
 }
 
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index b5c07b94..e2309e1a 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -73,7 +73,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   const devices = useMediaDevices();
 
   useEffect(() => {
-    if (menuOpen) devices.requestDeviceNames();
+    if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
   let button;
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 30ac3618..4eb1efdd 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -100,7 +100,7 @@ export const SettingsModal: FC<Props> = ({
 
   const devices = useMediaDevices();
   useEffect(() => {
-    if (open) devices.requestDeviceNames();
+    if (open) devices.requestDeviceNames(); // No-op after the first call
   }, [open, devices]);
 
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);