diff --git a/src/components/CallFooter.stories.tsx b/src/components/CallFooter.stories.tsx index 93dbe562d..3dcfe48ce 100644 --- a/src/components/CallFooter.stories.tsx +++ b/src/components/CallFooter.stories.tsx @@ -136,7 +136,6 @@ export const Default: Story = { videoBlurEnabled: true, backgroundEffect: "none", selectBackgroundEffect: fn(), - beforeJoining: false, hangup: fn(), buttonSize: "lg", showFooter: true, diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx index bc99cbec7..a0fd79bc3 100644 --- a/src/components/CallFooter.tsx +++ b/src/components/CallFooter.tsx @@ -99,12 +99,6 @@ export interface FooterState { videoBlurEnabled: boolean; /** The chosen background effect, in its stored form. */ backgroundEffect: string; - /** - * Whether this footer is shown before joining. An image added there becomes - * the background at once; one added in a call waits to be chosen, because - * putting it on would change what everyone sees with no further word. - */ - beforeJoining: boolean; showFooter: boolean; /* This is needed for WindowMode = "flat" */ @@ -189,7 +183,6 @@ export const CallFooter: FC = ({ const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$); const backgroundEffect = useBehavior(vm.backgroundEffect$); const selectBackgroundEffect = useBehavior(vm.selectBackgroundEffect$); - const beforeJoining = useBehavior(vm.beforeJoining$); const { added, addBackground, removeBackground } = useAddedBackgrounds(); const { settling, cameraTrack } = useBackgroundProcessing(); @@ -241,26 +234,21 @@ export const CallFooter: FC = ({ const onAddBackgroundImage = useCallback( (file: File): void => { setBackgroundEffectError(undefined); - addBackground(file) - .then((id) => { - // Before joining, nobody sees the change, so the picture goes on at - // once. In a call it waits to be chosen: otherwise choosing a file - // would change what everyone sees, with no further word from the - // user. Teams draws the line in the same place. - if (beforeJoining) - selectBackgroundEffect?.(serializeEffect({ kind: "added", id })); - }) - .catch((e) => { - setBackgroundEffectError(whyRefused(e)); - logger.warn( - e instanceof UnusableImage - ? `Cannot use that file as a background: ${e.reason}` - : "Could not keep that background", - e, - ); - }); + // Added, not put on — before joining and during a call alike. It joins + // the backgrounds on offer and is in force once the user chooses it: + // choosing a file and choosing to wear it are two decisions, and one + // rule for both places is one less thing to know. + addBackground(file).catch((e) => { + setBackgroundEffectError(whyRefused(e)); + logger.warn( + e instanceof UnusableImage + ? `Cannot use that file as a background: ${e.reason}` + : "Could not keep that background", + e, + ); + }); }, - [addBackground, beforeJoining, selectBackgroundEffect, whyRefused], + [addBackground, whyRefused], ); // The catalogue is named here rather than in the view model: the names are diff --git a/src/components/CallFooterViewModel.tsx b/src/components/CallFooterViewModel.tsx index a7d9c6ed3..33d68b394 100644 --- a/src/components/CallFooterViewModel.tsx +++ b/src/components/CallFooterViewModel.tsx @@ -181,7 +181,6 @@ export function createCallFooterViewModel( return { ...buildMuteBehaviors(scope, muteStates), ...buildDeviceBehaviors(scope, mediaDevices, disableDeviceSwitcher$), - beforeJoining$: constant(false), // candidat to move into the FooterViewModel showFooter$: callModel.showFooter$, hideControls$: constant(!showControls), @@ -295,6 +294,5 @@ export function createLobbyFooterViewModel( }), ...buildMuteBehaviors(scope, muteStates), ...buildDeviceBehaviors(scope, mediaDevices, constant(false)), - beforeJoining$: constant(true), }; } diff --git a/src/components/MediaMuteAndSwitchButton.stories.tsx b/src/components/MediaMuteAndSwitchButton.stories.tsx index ecde1aba4..d413fc11d 100644 --- a/src/components/MediaMuteAndSwitchButton.stories.tsx +++ b/src/components/MediaMuteAndSwitchButton.stories.tsx @@ -1097,7 +1097,9 @@ export const BackgroundEffectsShowThereIsMore: Story = { edge.classList.contains(styles.scrollEdgeShown); // Opened at the top: more below, nothing above. - await waitFor(async () => expect(shown(bottom)).toBe(true)); + await waitFor(async () => expect(shown(bottom)).toBe(true), { + timeout: 4000, + }); await expect(shown(top)).toBe(false); // And the fade is at the foot of what is in view, not of the content. await expect( @@ -1109,8 +1111,12 @@ export const BackgroundEffectsShowThereIsMore: Story = { // At the end: nothing below, more above. list.scrollTop = list.scrollHeight; - await waitFor(async () => expect(shown(bottom)).toBe(false)); - await waitFor(async () => expect(shown(top)).toBe(true)); + await waitFor(async () => expect(shown(bottom)).toBe(false), { + timeout: 4000, + }); + await waitFor(async () => expect(shown(top)).toBe(true), { + timeout: 4000, + }); // Standing just below the heading holding the top, where the content comes // out from under it — not behind the heading, where it could not be seen. @@ -1124,13 +1130,15 @@ export const BackgroundEffectsShowThereIsMore: Story = { ) < 2, )!; await expect(stuck).toBeDefined(); - await waitFor(async () => - expect( - Math.round( - top.getBoundingClientRect().top - - stuck.getBoundingClientRect().bottom, - ), - ).toBe(0), + await waitFor( + async () => + expect( + Math.round( + top.getBoundingClientRect().top - + stuck.getBoundingClientRect().bottom, + ), + ).toBe(0), + { timeout: 4000 }, ); }, };