Name the background effect pieces after background effects

- One name, as review asked: TrackProcessorContext becomes
  BackgroundEffectsContext, with BackgroundEffectsProvider,
  BackgroundEffectsState, useBackgroundEffects,
  useBackgroundEffectsState$ and useSyncBackgroundEffects.
- The state's Behavior is backgroundEffectsState$ wherever it is passed,
  in place of trackProcessorState$, trackerProcessorState$ and
  processorState$.
- Renames only: nothing changes in behaviour.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/room/CallView.test.tsx

@@ -61,7 +61,7 @@ import {
 } from "../HostBridge";
 import { type JoinCallData } from "../widget";
 import { MatrixRTCTransportMissingError } from "../utils/errors";
-import { ProcessorProvider } from "../livekit/TrackProcessorContext";
+import { BackgroundEffectsProvider } from "../livekit/BackgroundEffectsContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { constant } from "../state/Behavior";
 
@@ -193,7 +193,7 @@ function createCallView(
       <HostBridgeProvider value={hostBridge}>
         <TooltipProvider>
           <MediaDevicesContext value={mockMediaDevices({})}>
-            <ProcessorProvider>
+            <BackgroundEffectsProvider>
               {options.withErrorBoundary ? (
                 <GroupCallErrorBoundary recoveryActionHandler={vi.fn()}>
                   {callView}
@@ -201,7 +201,7 @@ function createCallView(
               ) : (
                 callView
               )}
-            </ProcessorProvider>
+            </BackgroundEffectsProvider>
           </MediaDevicesContext>
         </TooltipProvider>
       </HostBridgeProvider>

src/room/InCallView.test.tsx

@@ -49,7 +49,7 @@ import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { AppBar } from "../AppBar";
 import { type MatrixInfo } from "./VideoPreview";
-import { ProcessorProvider } from "../livekit/TrackProcessorContext";
+import { BackgroundEffectsProvider } from "../livekit/BackgroundEffectsContext";
 import { initializeWidget } from "../widget";
 import { RootElementProvider } from "../RootElementContext";
 
@@ -242,7 +242,7 @@ describe("ActiveCall", () => {
     const { findByTestId } = render(
       <BrowserRouter>
         <MediaDevicesContext value={mediaDevices}>
-          <ProcessorProvider>
+          <BackgroundEffectsProvider>
             <TooltipProvider>
               <RoomContext value={mockLivekitRoom({ localParticipant })}>
                 <ActiveCall
@@ -257,7 +257,7 @@ describe("ActiveCall", () => {
                 />
               </RoomContext>
             </TooltipProvider>
-          </ProcessorProvider>
+          </BackgroundEffectsProvider>
         </MediaDevicesContext>
       </BrowserRouter>,
     );
@@ -292,7 +292,7 @@ describe("ActiveCall", () => {
         <BrowserRouter>
           <RootElementProvider value={root}>
             <MediaDevicesContext value={mediaDevices}>
-              <ProcessorProvider>
+              <BackgroundEffectsProvider>
                 <TooltipProvider>
                   <RoomContext value={mockLivekitRoom({ localParticipant })}>
                     <ActiveCall
@@ -307,7 +307,7 @@ describe("ActiveCall", () => {
                     />
                   </RoomContext>
                 </TooltipProvider>
-              </ProcessorProvider>
+              </BackgroundEffectsProvider>
             </MediaDevicesContext>
           </RootElementProvider>
         </BrowserRouter>,

src/room/InCallView.tsx

@@ -79,7 +79,7 @@ import { useValueBehavior } from "../useValueBehavior.ts";
 import { constant } from "../state/Behavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
-import { useTrackProcessorState$ } from "../livekit/TrackProcessorContext.tsx";
+import { useBackgroundEffectsState$ } from "../livekit/BackgroundEffectsContext.tsx";
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
@@ -120,7 +120,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const urlParams = useUrlParams();
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
-  const trackProcessorState$ = useTrackProcessorState$();
+  const backgroundEffectsState$ = useBackgroundEffectsState$();
   // The element we have to draw the call in: the page, or the container a host
   // gave us. Its size, not the window's, decides how the call is laid out.
   const rootElement = useRootElement();
@@ -150,7 +150,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
-      trackProcessorState$,
+      backgroundEffectsState$,
     );
     // TODO move this somewhere else once we use the callViewModel in the lobby as well!
     vm.join();
@@ -170,7 +170,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     urlParams,
     hostBridge,
     mediaDevices,
-    trackProcessorState$,
+    backgroundEffectsState$,
     props.client,
     rootElement,
   ]);
@@ -201,7 +201,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     props.onLeft,
     urlParams,
     mediaDevices,
-    trackProcessorState$,
+    backgroundEffectsState$,
     props.client,
     vm,
   ]);

src/room/KnockLobbyView.test.tsx

@@ -14,19 +14,19 @@ import { type MatrixClient, type RoomSummary } from "matrix-js-sdk";
 import { KnockLobbyView } from "./KnockLobbyView";
 import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
-import { type ProcessorState } from "../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
 import { mockMediaDevices } from "../utils/test";
 
 vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
 
-vi.mock("../livekit/TrackProcessorContext", () => ({
-  useTrackProcessor: (): ProcessorState => ({
+vi.mock("../livekit/BackgroundEffectsContext", () => ({
+  useBackgroundEffects: (): BackgroundEffectsState => ({
     supported: false,
     processor: undefined,
   }),
-  useTrackProcessorSync: (): void => {},
+  useSyncBackgroundEffects: (): void => {},
 }));
 
 vi.mock("react-use-measure", () => ({

src/room/LobbyView.test.tsx

@@ -28,7 +28,7 @@ import {
 } from "../utils/test";
 import { type MediaDevices } from "../state/MediaDevices";
 import { MediaDevicesContext } from "../MediaDevicesContext";
-import { type ProcessorState } from "../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import lobbyStyles from "./LobbyView.module.css";
 import headerStyles from "../Header.module.css";
@@ -41,12 +41,12 @@ vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
 
-vi.mock("../livekit/TrackProcessorContext", () => ({
-  useTrackProcessor: (): ProcessorState => ({
+vi.mock("../livekit/BackgroundEffectsContext", () => ({
+  useBackgroundEffects: (): BackgroundEffectsState => ({
     supported: false,
     processor: undefined,
   }),
-  useTrackProcessorSync: (): void => {},
+  useSyncBackgroundEffects: (): void => {},
 }));
 
 vi.mock("react-use-measure", () => ({

src/room/LobbyView.tsx

@@ -40,9 +40,9 @@ import { useMediaDevices } from "../MediaDevicesContext";
 import { ObservableScope } from "../state/ObservableScope";
 import { useInitial } from "../useInitial";
 import {
-  useTrackProcessor,
-  useTrackProcessorSync,
-} from "../livekit/TrackProcessorContext";
+  useBackgroundEffects,
+  useSyncBackgroundEffects,
+} from "../livekit/BackgroundEffectsContext";
 import { getValue } from "../utils/observable";
 import { useBehavior } from "../useBehavior";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
@@ -136,7 +136,7 @@ export const LobbyView: FC<Props> = ({
       },
   );
 
-  const { processor } = useTrackProcessor();
+  const { processor } = useBackgroundEffects();
 
   const initialProcessor = useInitial(() => processor);
   const localTrackOptions = useMemo<CreateLocalTracksOptions>(
@@ -183,7 +183,7 @@ export const LobbyView: FC<Props> = ({
     }
   }, [devices, videoInputId, videoTrack]);
 
-  useTrackProcessorSync(videoTrack);
+  useSyncBackgroundEffects(videoTrack);
 
   const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
     null,