diff --git a/src/components/CallFooterViewModel.tsx b/src/components/CallFooterViewModel.tsx index e7f02ada..1ff69a67 100644 --- a/src/components/CallFooterViewModel.tsx +++ b/src/components/CallFooterViewModel.tsx @@ -110,10 +110,11 @@ function buildDeviceBehaviors( toggleBlur$: scope.behavior( combineLatest([backgroundBlurSettings.value$, disableSwitcher$]).pipe( map(([current, switcherDisabled]) => { - return () => - !switcherDisabled && supportsBackgroundProcessors() - ? (): void => backgroundBlurSettings.setValue(!current) - : constant(undefined); + return !switcherDisabled && supportsBackgroundProcessors() + ? (): void => { + backgroundBlurSettings.setValue(!current); + } + : undefined; }), ), ), diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx index a04185ba..7bf5cb79 100644 --- a/src/components/MediaMuteAndSwitchButton.tsx +++ b/src/components/MediaMuteAndSwitchButton.tsx @@ -70,16 +70,7 @@ export const MediaMuteAndSwitchButton: FC = ({ const [menuOpen, setMenuOpen] = useState(false); const { t } = useTranslation(); let button; - let toggles = - backgroundBlurToggleClick === undefined - ? [] - : [ - { - label: t("action.blur_background"), - enabled: videoBlurEnabled, - id: BLUR_ID, - }, - ]; + let toggles: { label: string; enabled: boolean; id: string }[] = []; switch (iconsAndLabels) { case "video": button = ( @@ -94,7 +85,15 @@ export const MediaMuteAndSwitchButton: FC = ({ data-testid="incall_videomute" /> ); - toggles = []; + if (backgroundBlurToggleClick !== undefined) { + toggles = [ + { + label: t("action.blur_background"), + enabled: videoBlurEnabled ?? false, + id: BLUR_ID, + }, + ]; + } break; case "audio": button = ( diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 9f649af4..3a9e7fea 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -108,7 +108,6 @@ export const ActiveCall: FC = (props) => { const [footerVm, setFooterVm] = useState | null>( null, ); - const { supportsReactions } = useReactionsSender(); const urlParams = useUrlParams(); const mediaDevices = useMediaDevices(); const trackProcessorState$ = useTrackProcessorObservable$(); @@ -135,16 +134,6 @@ export const ActiveCall: FC = (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 = (props) => { mediaDevices, trackProcessorState$, props.client, - supportsReactions, ]); useEffect(() => { @@ -176,9 +164,7 @@ export const ActiveCall: FC = (props) => { vm, props.muteStates, mediaDevices, - supportsReactions - ? `${props.client.getUserId()}:${props.client.getDeviceId()}` - : undefined, + `${props.client.getUserId()}:${props.client.getDeviceId()}`, ); setFooterVm(footerVm); @@ -195,7 +181,6 @@ export const ActiveCall: FC = (props) => { mediaDevices, trackProcessorState$, props.client, - supportsReactions, vm, ]);