cleanup

src/components/CallFooterViewModel.tsx

@@ -110,10 +110,11 @@ function buildDeviceBehaviors(
     toggleBlur$: scope.behavior(
       combineLatest([backgroundBlurSettings.value$, disableSwitcher$]).pipe(
         map(([current, switcherDisabled]) => {
-          return () =>
+          return !switcherDisabled && supportsBackgroundProcessors()
-            !switcherDisabled && supportsBackgroundProcessors()
+            ? (): void => {
-              ? (): void => backgroundBlurSettings.setValue(!current)
+                backgroundBlurSettings.setValue(!current);
-              : constant(undefined);
+              }
+            : undefined;
         }),
       ),
     ),

src/components/MediaMuteAndSwitchButton.tsx

@@ -70,16 +70,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   const [menuOpen, setMenuOpen] = useState(false);
   const { t } = useTranslation();
   let button;
-  let toggles =
+  let toggles: { label: string; enabled: boolean; id: string }[] = [];
-    backgroundBlurToggleClick === undefined
-      ? []
-      : [
-          {
-            label: t("action.blur_background"),
-            enabled: videoBlurEnabled,
-            id: BLUR_ID,
-          },
-        ];
   switch (iconsAndLabels) {
     case "video":
       button = (
@@ -94,7 +85,15 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           data-testid="incall_videomute"
         />
       );
-      toggles = [];
+      if (backgroundBlurToggleClick !== undefined) {
+        toggles = [
+          {
+            label: t("action.blur_background"),
+            enabled: videoBlurEnabled ?? false,
+            id: BLUR_ID,
+          },
+        ];
+      }
       break;
     case "audio":
       button = (

src/room/InCallView.tsx

@@ -108,7 +108,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
     null,
   );
-  const { supportsReactions } = useReactionsSender();
   const urlParams = useUrlParams();
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
@@ -135,16 +134,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       reactionsReader.reactions$,
       scope.behavior(trackProcessorState$),
     );
-    const footerVm = createCallFooterViewModel(
-      scope,
-      vm,
-      props.muteStates,
-      mediaDevices,
-      supportsReactions
-        ? `${props.client.getUserId()}:${props.client.getDeviceId()}`
-        : undefined,
-    );
-    setFooterVm(footerVm);
     // TODO move this somewhere else once we use the callViewModel in the lobby as well!
     vm.join();
     setVm(vm);
@@ -164,7 +153,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     mediaDevices,
     trackProcessorState$,
     props.client,
-    supportsReactions,
   ]);
 
   useEffect(() => {
@@ -176,9 +164,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       vm,
       props.muteStates,
       mediaDevices,
-      supportsReactions
+      `${props.client.getUserId()}:${props.client.getDeviceId()}`,
-        ? `${props.client.getUserId()}:${props.client.getDeviceId()}`
-        : undefined,
     );
     setFooterVm(footerVm);
 
@@ -195,7 +181,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     mediaDevices,
     trackProcessorState$,
     props.client,
-    supportsReactions,
     vm,
   ]);