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>

component/index.tsx

@@ -74,7 +74,7 @@ import {
 import { MediaDevicesContext } from "../src/MediaDevicesContext";
 import { MediaDevices } from "../src/state/MediaDevices";
 import { ObservableScope } from "../src/state/ObservableScope";
-import { ProcessorProvider } from "../src/livekit/TrackProcessorContext";
+import { BackgroundEffectsProvider } from "../src/livekit/BackgroundEffectsContext";
 import { Config } from "../src/config/Config";
 import { type ConfigOptions } from "../src/config/ConfigOptions";
 import { i18n } from "../src/utils/i18n";
@@ -252,7 +252,7 @@ export const ElementCall: FC<ElementCallProps> = ({
                       <TooltipProvider>
                         <ClientProvider client={client}>
                           <MediaDevicesContext value={mediaDevices}>
-                            <ProcessorProvider>
+                            <BackgroundEffectsProvider>
                               <CallView
                                 client={client}
                                 rtcSession={rtcSession}
@@ -261,7 +261,7 @@ export const ElementCall: FC<ElementCallProps> = ({
                                 preload={params.preload}
                                 skipLobby={params.skipLobby}
                               />
-                            </ProcessorProvider>
+                            </BackgroundEffectsProvider>
                           </MediaDevicesContext>
                         </ClientProvider>
                       </TooltipProvider>

src/App.tsx

@@ -35,7 +35,7 @@ import { ErrorPage, LoadingPage } from "./FullScreenView";
 import { Initializer } from "./initializer";
 import { type WidgetHelpers } from "./widget";
 import { useTheme } from "./useTheme";
-import { ProcessorProvider } from "./livekit/TrackProcessorContext";
+import { BackgroundEffectsProvider } from "./livekit/BackgroundEffectsContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import {
@@ -148,7 +148,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
     loaded && clientReady ? (
       <ClientProvider client={widgetClient}>
         <MediaDevicesContext value={vm.mediaDevices}>
-          <ProcessorProvider>
+          <BackgroundEffectsProvider>
             <Sentry.ErrorBoundary
               fallback={(error) => <ErrorPage error={error} />}
             >
@@ -159,7 +159,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
                 <SentryRoute path="*" element={<RoomPage />} />
               </Routes>
             </Sentry.ErrorBoundary>
-          </ProcessorProvider>
+          </BackgroundEffectsProvider>
         </MediaDevicesContext>
       </ClientProvider>
     ) : (

src/livekit/BackgroundEffectsContext.test.ts

@@ -16,12 +16,12 @@ import {
 
 import {
   applyProcessor,
-  ProcessorProvider,
-  type ProcessorState,
-  trackProcessorSync,
-  useTrackProcessor,
-  useTrackProcessorSync,
-} from "./TrackProcessorContext";
+  BackgroundEffectsProvider,
+  type BackgroundEffectsState,
+  syncBackgroundEffects,
+  useBackgroundEffects,
+  useSyncBackgroundEffects,
+} from "./BackgroundEffectsContext";
 import { backgroundBlur } from "../settings/settings";
 import { constant } from "../state/Behavior";
 import { flushPromises, testScope } from "../utils/test";
@@ -112,10 +112,10 @@ describe("applyProcessor", () => {
   });
 });
 
-describe("trackProcessorSync", () => {
+describe("syncBackgroundEffects", () => {
   it("applies the processor to the current track", () => {
     const track = mockTrack("live");
-    trackProcessorSync(
+    syncBackgroundEffects(
       testScope(),
       constant(track),
       constant({ supported: true, processor }),
@@ -124,7 +124,7 @@ describe("trackProcessorSync", () => {
   });
 });
 
-describe("ProcessorProvider", () => {
+describe("BackgroundEffectsProvider", () => {
   /** A camera track that holds whatever processor it is given. */
   function cameraTrack(): LocalVideoTrack {
     let current: unknown;
@@ -142,17 +142,17 @@ describe("ProcessorProvider", () => {
     } as unknown as LocalVideoTrack;
   }
 
-  let seen: ProcessorState[];
+  let seen: BackgroundEffectsState[];
   const Surface: FC<{ track: LocalVideoTrack | null }> = ({ track }) => {
-    seen.push(useTrackProcessor());
-    useTrackProcessorSync(track);
+    seen.push(useBackgroundEffects());
+    useSyncBackgroundEffects(track);
     return null;
   };
   // One component for every render, so a rerender updates the tree rather than
   // mounting a second provider with a pipeline of its own.
   const Surfaces: FC<{ tracks: (LocalVideoTrack | null)[] }> = ({ tracks }) =>
     createElement(
-      ProcessorProvider,
+      BackgroundEffectsProvider,
       null,
       createElement(
         "div",
@@ -169,7 +169,7 @@ describe("ProcessorProvider", () => {
       await flushPromises();
     });
   };
-  const latest = (): ProcessorState => seen[seen.length - 1];
+  const latest = (): BackgroundEffectsState => seen[seen.length - 1];
 
   beforeEach(() => {
     seen = [];

src/livekit/BackgroundEffectsContext.tsx

@@ -35,24 +35,24 @@ import { useBehavior } from "../useBehavior";
 // it is a combination of exposing observable and react hooks.
 // preferably we should not make this a context anymore and instead just a vm?
 
-export type ProcessorState = {
+export type BackgroundEffectsState = {
   supported: boolean | undefined;
   processor: undefined | ProcessorWrapper<BackgroundOptions>;
 };
 
-const ProcessorContext = createContext<BackgroundEffects | undefined>(
+const BackgroundEffectsContext = createContext<BackgroundEffects | undefined>(
   undefined,
 );
 
-export function useTrackProcessor(): ProcessorState {
-  return useBehavior(useTrackProcessorState$());
+export function useBackgroundEffects(): BackgroundEffectsState {
+  return useBehavior(useBackgroundEffectsState$());
 }
 
-export function useTrackProcessorState$(): Behavior<ProcessorState> {
-  const effects = use(ProcessorContext);
+export function useBackgroundEffectsState$(): Behavior<BackgroundEffectsState> {
+  const effects = use(BackgroundEffectsContext);
   if (effects === undefined)
     throw new Error(
-      "useTrackProcessor must be used within a ProcessorProvider",
+      "useBackgroundEffects must be used within a BackgroundEffectsProvider",
     );
   return effects.state$;
 }
@@ -91,24 +91,24 @@ export function applyProcessor(
 /**
  * Updates your video tracks to always use the given processor.
  */
-export const trackProcessorSync = (
+export const syncBackgroundEffects = (
   scope: ObservableScope,
   videoTrack$: Behavior<LocalVideoTrack | null>,
-  processor$: Behavior<ProcessorState>,
+  backgroundEffectsState$: Behavior<BackgroundEffectsState>,
 ): void => {
-  combineLatest([videoTrack$, processor$])
+  combineLatest([videoTrack$, backgroundEffectsState$])
     .pipe(scope.bind())
-    .subscribe(([videoTrack, processorState]) => {
-      if (!processorState) return;
+    .subscribe(([videoTrack, backgroundEffectsState]) => {
+      if (!backgroundEffectsState) return;
       if (!videoTrack) return;
-      applyProcessor(videoTrack, processorState.processor);
+      applyProcessor(videoTrack, backgroundEffectsState.processor);
     });
 };
 
-export const useTrackProcessorSync = (
+export const useSyncBackgroundEffects = (
   videoTrack: LocalVideoTrack | null,
 ): void => {
-  const { processor } = useTrackProcessor();
+  const { processor } = useBackgroundEffects();
   useEffect(() => {
     if (!videoTrack) return;
     applyProcessor(videoTrack, processor);
@@ -119,7 +119,7 @@ interface Props {
   children: JSX.Element;
 }
 
-export const ProcessorProvider: FC<Props> = ({ children }) => {
+export const BackgroundEffectsProvider: FC<Props> = ({ children }) => {
   const [effects, setEffects] = useState<BackgroundEffects | null>(null);
   useEffect(() => {
     const scope = new ObservableScope();
@@ -137,5 +137,9 @@ export const ProcessorProvider: FC<Props> = ({ children }) => {
   }, []);
 
   if (effects === null) return null;
-  return <ProcessorContext value={effects}>{children}</ProcessorContext>;
+  return (
+    <BackgroundEffectsContext value={effects}>
+      {children}
+    </BackgroundEffectsContext>
+  );
 };

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,

src/settings/SettingsModal.tsx

@@ -28,7 +28,7 @@ import {
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
-import { useTrackProcessor } from "../livekit/TrackProcessorContext";
+import { useBackgroundEffects } from "../livekit/BackgroundEffectsContext";
 import {
   DeveloperSettingsTab,
   type DeveloperSettingsSnapshot,
@@ -81,7 +81,7 @@ export const SettingsModal: FC<Props> = ({
 
   // Generate a `Checkbox` input to turn blur on or off.
   const BlurCheckbox: React.FC = (): ReactNode => {
-    const { supported } = useTrackProcessor();
+    const { supported } = useBackgroundEffects();
 
     const [blurActive, setBlurActive] = useSetting(backgroundBlurSetting);
 

src/state/BackgroundEffects.test.ts

@@ -13,7 +13,7 @@ import {
   BackgroundEffects,
   type BackgroundEffectsOptions,
 } from "./BackgroundEffects";
-import { type ProcessorState } from "../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
 import { flushPromises, testScope, withTestScheduler } from "../utils/test";
 
 /** A pipeline that records what it is switched to. */
@@ -45,7 +45,7 @@ function fakePipeline(): {
 }
 
 /** One letter per state: idle, attached. */
-function letter(state: ProcessorState): string {
+function letter(state: BackgroundEffectsState): string {
   return state.processor === undefined ? "i" : "a";
 }
 

src/state/BackgroundEffects.ts

@@ -15,7 +15,7 @@ import { deepCompare } from "matrix-js-sdk/lib/utils";
 
 import { type Behavior } from "./Behavior";
 import { type ObservableScope } from "./ObservableScope";
-import { type ProcessorState } from "../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
 
 const blurRadius = 15;
 
@@ -30,7 +30,7 @@ export interface BackgroundEffectsOptions {
 
 /** The background effect pipeline, as the camera tracks and the menus see it. */
 export class BackgroundEffects {
-  public readonly state$: Behavior<ProcessorState>;
+  public readonly state$: Behavior<BackgroundEffectsState>;
 
   public constructor(
     scope: ObservableScope,
@@ -38,7 +38,7 @@ export class BackgroundEffects {
   ) {
     this.state$ = scope.behavior(
       blur$.pipe(
-        scan<boolean, ProcessorState>(
+        scan<boolean, BackgroundEffectsState>(
           (previous, wanted) => {
             // Attached the first time an effect is wanted and never detached
             // after, so someone who never turns one on pays for none of it.

src/state/CallViewModel/CallViewModel.ts

@@ -89,7 +89,7 @@ import { E2eeType } from "../../e2ee/e2eeType";
 import { MatrixKeyProvider } from "../../e2ee/matrixKeyProvider";
 import { type MuteStates } from "../MuteStates";
 import { HeaderStyle, type UrlParams } from "../../UrlParams";
-import { type ProcessorState } from "../../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../../livekit/BackgroundEffectsContext";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
   layoutShallowEquals,
@@ -501,7 +501,7 @@ export function createCallViewModel$(
   options: CallViewModelOptions,
   handsRaisedSubject$: Observable<Record<string, RaisedHandInfo>>,
   reactionsSubject$: Observable<Record<string, ReactionInfo>>,
-  trackProcessorState$: Behavior<ProcessorState>,
+  backgroundEffectsState$: Behavior<BackgroundEffectsState>,
 ): CallViewModel {
   const logger = rootLogger.getChild("[CallViewModel]");
   const client = matrixRoom.client;
@@ -590,7 +590,7 @@ export function createCallViewModel$(
       client,
       matrixRoom.roomId,
       mediaDevices,
-      trackProcessorState$,
+      backgroundEffectsState$,
       livekitKeyProvider,
       controlledAudioDevices,
       options.livekitRoomFactory,
@@ -645,7 +645,7 @@ export function createCallViewModel$(
         connection,
         mediaDevices,
         muteStates,
-        trackProcessorState$,
+        backgroundEffectsState$,
         logger.getChild(
           "[Publisher " + connection.transport.livekit_service_url + "]",
         ),

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -54,7 +54,7 @@ import {
   localRtcMember,
 } from "../../utils/test-fixtures";
 import { type Behavior, constant } from "../Behavior";
-import { type ProcessorState } from "../../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../../livekit/BackgroundEffectsContext";
 import { type MediaDevices } from "../MediaDevices";
 import { type MatrixRTCMode } from "../../config/ConfigOptions";
 
@@ -240,7 +240,7 @@ export function withCallViewModel(mode: MatrixRTCMode) {
       },
       raisedHands$,
       reactions$,
-      new BehaviorSubject<ProcessorState>({
+      new BehaviorSubject<BackgroundEffectsState>({
         processor: undefined,
         supported: undefined,
       }),

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -209,7 +209,7 @@ describe("LocalMembership", () => {
       leave: vi.fn(),
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
-    trackProcessorState$: constant({
+    backgroundEffectsState$: constant({
       supported: false,
       processor: undefined,
     }),

src/state/CallViewModel/localMember/Publisher.test.ts

@@ -30,7 +30,7 @@ import {
   mockMediaDevices,
 } from "../../../utils/test";
 import { Publisher } from "./Publisher";
-import { type ProcessorState } from "../../../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../../../livekit/BackgroundEffectsContext";
 import { type Connection } from "../remoteMembers/Connection";
 import { type MuteStates } from "../../MuteStates";
 
@@ -409,13 +409,13 @@ describe("Bug fix", () => {
 
 describe("turning the camera on with an effect chosen", () => {
   const processor = {} as ProcessorWrapper<BackgroundOptions>;
-  let state$: BehaviorSubject<ProcessorState>;
+  let state$: BehaviorSubject<BackgroundEffectsState>;
   let publisher: Publisher;
   /** The processor the SDK would give each camera track it made. */
   let madeWith: unknown[];
 
   beforeEach(() => {
-    state$ = new BehaviorSubject<ProcessorState>({
+    state$ = new BehaviorSubject<BackgroundEffectsState>({
       supported: true,
       processor: undefined,
     });

src/state/CallViewModel/localMember/Publisher.ts

@@ -26,9 +26,9 @@ import type { Behavior } from "../../Behavior.ts";
 import type { MediaDevices, SelectedDevice } from "../../MediaDevices.ts";
 import type { MuteStates } from "../../MuteStates.ts";
 import {
-  type ProcessorState,
-  trackProcessorSync,
-} from "../../../livekit/TrackProcessorContext.tsx";
+  type BackgroundEffectsState,
+  syncBackgroundEffects,
+} from "../../../livekit/BackgroundEffectsContext.tsx";
 
 import { observeTrackReference$ } from "../../observeTrackReference";
 import { type Connection } from "../remoteMembers/Connection.ts";
@@ -54,7 +54,7 @@ export class Publisher {
    * @param connection - The connection to use for publishing.
    * @param devices - The media devices to use for audio and video input.
    * @param muteStates - The mute states for audio and video.
-   * @param trackerProcessorState$ - The processor state for the video track processor (e.g. background blur).
+   * @param backgroundEffectsState$ - The processor state for the video track processor (e.g. background blur).
    * @param logger - The logger to use for logging :D.
    * @param controlledAudioDevices - Whether the app hosting Element Call
    *   controls the audio output devices, rather than the browser.
@@ -63,7 +63,7 @@ export class Publisher {
     private connection: Pick<Connection, "livekitRoom" | "state$">, //setE2EEEnabled,
     devices: MediaDevices,
     private readonly muteStates: MuteStates,
-    private readonly trackerProcessorState$: Behavior<ProcessorState>,
+    private readonly backgroundEffectsState$: Behavior<BackgroundEffectsState>,
     private logger: Logger,
     controlledAudioDevices: boolean,
   ) {
@@ -73,8 +73,11 @@ export class Publisher {
       this.logger.error("Failed to set E2EE enabled on room", e);
     });
 
-    // Setup track processor syncing (blur)
-    this.observeTrackProcessors(this.scope, room, this.trackerProcessorState$);
+    this.observeBackgroundEffects(
+      this.scope,
+      room,
+      this.backgroundEffectsState$,
+    );
     // Observe media device changes and update LiveKit active devices accordingly
     this.observeMediaDevices(this.scope, devices, controlledAudioDevices);
 
@@ -412,7 +415,7 @@ export class Publisher {
     this.muteStates.video.setHandler(async (enable) => {
       try {
         this.logger.debug(`handler: Setting LiveKit camera enabled: ${enable}`);
-        const { processor } = this.trackerProcessorState$.value;
+        const { processor } = this.backgroundEffectsState$.value;
         if (enable && processor) await this.dropCameraWithoutEffect(lkRoom);
         await lkRoom.localParticipant.setCameraEnabled(enable);
         // Unmute will restart the track if it was paused upstream,
@@ -441,10 +444,10 @@ export class Publisher {
       await lkRoom.localParticipant.unpublishTrack(track);
   }
 
-  private observeTrackProcessors(
+  private observeBackgroundEffects(
     scope: ObservableScope,
     room: LivekitRoom,
-    trackerProcessorState$: Behavior<ProcessorState>,
+    backgroundEffectsState$: Behavior<BackgroundEffectsState>,
   ): void {
     const track$ = scope.behavior(
       observeTrackReference$(room.localParticipant, Track.Source.Camera).pipe(
@@ -455,11 +458,11 @@ export class Publisher {
       ),
       null,
     );
-    trackProcessorSync(scope, track$, trackerProcessorState$);
+    syncBackgroundEffects(scope, track$, backgroundEffectsState$);
     // Every camera track the SDK makes, on joining or on turning the camera
     // on, then starts with the pipeline on. One attached after publishing lets
     // the room through while it is built.
-    trackerProcessorState$.pipe(scope.bind()).subscribe(({ processor }) => {
+    backgroundEffectsState$.pipe(scope.bind()).subscribe(({ processor }) => {
       room.options.videoCaptureDefaults = {
         ...room.options.videoCaptureDefaults,
         processor,

src/state/CallViewModel/remoteMembers/Connection.test.ts

@@ -655,7 +655,7 @@ describe("remote track logging", () => {
 //   function createSetup(): void {
 //     setUpPublishConnection();
 
-//     const fakeTrackProcessorSubject$ = new BehaviorSubject<ProcessorState>({
+//     const fakeTrackProcessorSubject$ = new BehaviorSubject<BackgroundEffectsState>({
 //       supported: true,
 //       processor: undefined,
 //     });

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -26,7 +26,7 @@ import type {
 } from "../../../livekit/openIDSFU.ts";
 import type { MediaDevices } from "../../MediaDevices.ts";
 import type { Behavior } from "../../Behavior.ts";
-import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
+import type { BackgroundEffectsState } from "../../../livekit/BackgroundEffectsContext.tsx";
 import { getLiveKitOptions } from "../../../livekit/options.ts";
 import {
   advancedCamera,
@@ -60,7 +60,7 @@ export class ECConnectionFactory implements ConnectionFactory {
    * @param client - The OpenID client parts for authentication, needed to get openID and JWT tokens.
    * @param roomId - The current room ID.
    * @param devices - Used for video/audio out/in capture options.
-   * @param processorState$ - Effects like background blur (only for publishing connection?)
+   * @param backgroundEffectsState$ - Effects like background blur (only for publishing connection?)
    * @param livekitKeyProvider - Optional key provider for end-to-end encryption.
    * @param controlledAudioDevices - Option to indicate whether audio output device is controlled externally (native mobile app).
    * @param livekitRoomFactory - Optional factory function (for testing) to create LivekitRoom instances. If not provided, a default factory is used.
@@ -69,7 +69,7 @@ export class ECConnectionFactory implements ConnectionFactory {
     private client: OpenIDClientParts,
     private readonly roomId: string,
     private devices: MediaDevices,
-    private processorState$: Behavior<ProcessorState>,
+    private backgroundEffectsState$: Behavior<BackgroundEffectsState>,
     livekitKeyProvider: BaseKeyProvider | undefined,
     private controlledAudioDevices: boolean,
     livekitRoomFactory?: () => LivekitRoom,
@@ -77,7 +77,7 @@ export class ECConnectionFactory implements ConnectionFactory {
     const defaultFactory = (): LivekitRoom => {
       const roomOptions = generateRoomOption({
         devices: this.devices,
-        processorState: this.processorState$.value,
+        backgroundEffectsState: this.backgroundEffectsState$.value,
         e2eeLivekitOptions: livekitKeyProvider && {
           keyProvider: livekitKeyProvider,
           // It's important that every room use a separate E2EE worker.
@@ -129,12 +129,12 @@ export class ECConnectionFactory implements ConnectionFactory {
  */
 function generateRoomOption({
   devices,
-  processorState,
+  backgroundEffectsState,
   e2eeLivekitOptions,
   controlledAudioDevices,
 }: {
   devices: MediaDevices;
-  processorState: ProcessorState;
+  backgroundEffectsState: BackgroundEffectsState;
   e2eeLivekitOptions:
     | E2EEManagerOptions
     | { e2eeManager: BaseE2EEManager }
@@ -147,7 +147,7 @@ function generateRoomOption({
   let videoCaptureDefaults = {
     ...liveKitOptions.videoCaptureDefaults,
     deviceId: devices.videoInput.selected$.value?.id,
-    processor: processorState.processor,
+    processor: backgroundEffectsState.processor,
   };
   let publishDefaults = liveKitOptions.publishDefaults;
 

src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts

@@ -20,7 +20,7 @@ import {
   mockMediaDevices,
   ownMemberMock,
 } from "../../../utils/test.ts";
-import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
+import type { BackgroundEffectsState } from "../../../livekit/BackgroundEffectsContext.tsx";
 import { constant } from "../../Behavior";
 import {
   echoCancellationSetting,
@@ -80,7 +80,7 @@ describe("ECConnectionFactory - Audio inputs options", () => {
         mockClient,
         "!roomid:example.org",
         mockMediaDevices({}),
-        new BehaviorSubject<ProcessorState>({
+        new BehaviorSubject<BackgroundEffectsState>({
           supported: true,
           processor: undefined,
         }),
@@ -128,7 +128,7 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
             select: () => {},
           },
         }),
-        new BehaviorSubject<ProcessorState>({
+        new BehaviorSubject<BackgroundEffectsState>({
           supported: true,
           processor: undefined,
         }),
@@ -163,7 +163,7 @@ describe("ECConnectionFactory - Camera quality settings", () => {
       mockClient,
       "!roomid:example.org",
       mockMediaDevices({}),
-      new BehaviorSubject<ProcessorState>({
+      new BehaviorSubject<BackgroundEffectsState>({
         supported: true,
         processor: undefined,
       }),
@@ -200,7 +200,7 @@ describe("ECConnectionFactory - Camera quality settings", () => {
       mockClient,
       "!roomid:example.org",
       mockMediaDevices({}),
-      new BehaviorSubject<ProcessorState>({
+      new BehaviorSubject<BackgroundEffectsState>({
         supported: true,
         processor: undefined,
       }),
@@ -238,7 +238,7 @@ describe("ECConnectionFactory - Camera quality settings", () => {
       mockClient,
       "!roomid:example.org",
       mockMediaDevices({}),
-      new BehaviorSubject<ProcessorState>({
+      new BehaviorSubject<BackgroundEffectsState>({
         supported: true,
         processor: undefined,
       }),

src/state/CallViewModel/remoteMembers/integration.test.ts

@@ -26,7 +26,7 @@ import {
   ownMemberMock,
   withTestScheduler,
 } from "../../../utils/test.ts";
-import { type ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
+import { type BackgroundEffectsState } from "../../../livekit/BackgroundEffectsContext.tsx";
 import {
   areLivekitTransportsEqual,
   createRemoteMatrixLivekitMembers$,
@@ -72,7 +72,7 @@ beforeEach(() => {
     mockClient,
     "!roomid:example.org",
     mockMediaDevices({}),
-    new BehaviorSubject<ProcessorState>({
+    new BehaviorSubject<BackgroundEffectsState>({
       supported: true,
       processor: undefined,
     }),