diff --git a/component/index.tsx b/component/index.tsx index 8f901c139..d49d87d53 100644 --- a/component/index.tsx +++ b/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 = ({ - + = ({ preload={params.preload} skipLobby={params.skipLobby} /> - + diff --git a/src/App.tsx b/src/App.tsx index c07553afc..e11e76088 100644 --- a/src/App.tsx +++ b/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 = ({ vm, widget }) => { loaded && clientReady ? ( - + } > @@ -159,7 +159,7 @@ export const App: FC = ({ vm, widget }) => { } /> - + ) : ( diff --git a/src/livekit/TrackProcessorContext.test.ts b/src/livekit/BackgroundEffectsContext.test.ts similarity index 93% rename from src/livekit/TrackProcessorContext.test.ts rename to src/livekit/BackgroundEffectsContext.test.ts index 178e39dc6..409b54afd 100644 --- a/src/livekit/TrackProcessorContext.test.ts +++ b/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 = []; diff --git a/src/livekit/TrackProcessorContext.tsx b/src/livekit/BackgroundEffectsContext.tsx similarity index 77% rename from src/livekit/TrackProcessorContext.tsx rename to src/livekit/BackgroundEffectsContext.tsx index ab78179fe..af3ca41f2 100644 --- a/src/livekit/TrackProcessorContext.tsx +++ b/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; }; -const ProcessorContext = createContext( +const BackgroundEffectsContext = createContext( undefined, ); -export function useTrackProcessor(): ProcessorState { - return useBehavior(useTrackProcessorState$()); +export function useBackgroundEffects(): BackgroundEffectsState { + return useBehavior(useBackgroundEffectsState$()); } -export function useTrackProcessorState$(): Behavior { - const effects = use(ProcessorContext); +export function useBackgroundEffectsState$(): Behavior { + 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, - processor$: Behavior, + backgroundEffectsState$: Behavior, ): 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 = ({ children }) => { +export const BackgroundEffectsProvider: FC = ({ children }) => { const [effects, setEffects] = useState(null); useEffect(() => { const scope = new ObservableScope(); @@ -137,5 +137,9 @@ export const ProcessorProvider: FC = ({ children }) => { }, []); if (effects === null) return null; - return {children}; + return ( + + {children} + + ); }; diff --git a/src/room/CallView.test.tsx b/src/room/CallView.test.tsx index 8ac920b84..1968222db 100644 --- a/src/room/CallView.test.tsx +++ b/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( - + {options.withErrorBoundary ? ( {callView} @@ -201,7 +201,7 @@ function createCallView( ) : ( callView )} - + diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx index 357bc186e..542880afd 100644 --- a/src/room/InCallView.test.tsx +++ b/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( - + { /> - + , ); @@ -292,7 +292,7 @@ describe("ActiveCall", () => { - + { /> - + , diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index b8d7ab89d..e0f8764a8 100644 --- a/src/room/InCallView.tsx +++ b/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 = (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 = (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 = (props) => { urlParams, hostBridge, mediaDevices, - trackProcessorState$, + backgroundEffectsState$, props.client, rootElement, ]); @@ -201,7 +201,7 @@ export const ActiveCall: FC = (props) => { props.onLeft, urlParams, mediaDevices, - trackProcessorState$, + backgroundEffectsState$, props.client, vm, ]); diff --git a/src/room/KnockLobbyView.test.tsx b/src/room/KnockLobbyView.test.tsx index a513952b7..bcee84544 100644 --- a/src/room/KnockLobbyView.test.tsx +++ b/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", () => ({ diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx index aedd9fdd5..da8fa698f 100644 --- a/src/room/LobbyView.test.tsx +++ b/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", () => ({ diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 5814e4316..1ab282885 100644 --- a/src/room/LobbyView.tsx +++ b/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 = ({ }, ); - const { processor } = useTrackProcessor(); + const { processor } = useBackgroundEffects(); const initialProcessor = useInitial(() => processor); const localTrackOptions = useMemo( @@ -183,7 +183,7 @@ export const LobbyView: FC = ({ } }, [devices, videoInputId, videoTrack]); - useTrackProcessorSync(videoTrack); + useSyncBackgroundEffects(videoTrack); const [footerVm, setFooterVm] = useState | null>( null, diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 933ac66f5..83166bcd6 100644 --- a/src/settings/SettingsModal.tsx +++ b/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 = ({ // 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); diff --git a/src/state/BackgroundEffects.test.ts b/src/state/BackgroundEffects.test.ts index 6be4fe8e8..6901c0be5 100644 --- a/src/state/BackgroundEffects.test.ts +++ b/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"; } diff --git a/src/state/BackgroundEffects.ts b/src/state/BackgroundEffects.ts index 3252d2c69..51e4b081b 100644 --- a/src/state/BackgroundEffects.ts +++ b/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; + public readonly state$: Behavior; public constructor( scope: ObservableScope, @@ -38,7 +38,7 @@ export class BackgroundEffects { ) { this.state$ = scope.behavior( blur$.pipe( - scan( + scan( (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. diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts index ea7f3cc78..f99b57666 100644 --- a/src/state/CallViewModel/CallViewModel.ts +++ b/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>, reactionsSubject$: Observable>, - trackProcessorState$: Behavior, + backgroundEffectsState$: Behavior, ): 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 + "]", ), diff --git a/src/state/CallViewModel/CallViewModelTestUtils.ts b/src/state/CallViewModel/CallViewModelTestUtils.ts index 0863ea2b7..35e98e640 100644 --- a/src/state/CallViewModel/CallViewModelTestUtils.ts +++ b/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({ + new BehaviorSubject({ processor: undefined, supported: undefined, }), diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts index 282759fdd..851093a02 100644 --- a/src/state/CallViewModel/localMember/LocalMember.test.ts +++ b/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, }), diff --git a/src/state/CallViewModel/localMember/Publisher.test.ts b/src/state/CallViewModel/localMember/Publisher.test.ts index 6884ce0e3..b91b5f160 100644 --- a/src/state/CallViewModel/localMember/Publisher.test.ts +++ b/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; - let state$: BehaviorSubject; + let state$: BehaviorSubject; let publisher: Publisher; /** The processor the SDK would give each camera track it made. */ let madeWith: unknown[]; beforeEach(() => { - state$ = new BehaviorSubject({ + state$ = new BehaviorSubject({ supported: true, processor: undefined, }); diff --git a/src/state/CallViewModel/localMember/Publisher.ts b/src/state/CallViewModel/localMember/Publisher.ts index 176e3c2e0..439971f9e 100644 --- a/src/state/CallViewModel/localMember/Publisher.ts +++ b/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, //setE2EEEnabled, devices: MediaDevices, private readonly muteStates: MuteStates, - private readonly trackerProcessorState$: Behavior, + private readonly backgroundEffectsState$: Behavior, 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, + backgroundEffectsState$: Behavior, ): 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, diff --git a/src/state/CallViewModel/remoteMembers/Connection.test.ts b/src/state/CallViewModel/remoteMembers/Connection.test.ts index 62dc17a31..f9588e396 100644 --- a/src/state/CallViewModel/remoteMembers/Connection.test.ts +++ b/src/state/CallViewModel/remoteMembers/Connection.test.ts @@ -655,7 +655,7 @@ describe("remote track logging", () => { // function createSetup(): void { // setUpPublishConnection(); -// const fakeTrackProcessorSubject$ = new BehaviorSubject({ +// const fakeTrackProcessorSubject$ = new BehaviorSubject({ // supported: true, // processor: undefined, // }); diff --git a/src/state/CallViewModel/remoteMembers/ConnectionFactory.ts b/src/state/CallViewModel/remoteMembers/ConnectionFactory.ts index 96a28d5ad..0c7157555 100644 --- a/src/state/CallViewModel/remoteMembers/ConnectionFactory.ts +++ b/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, + private backgroundEffectsState$: Behavior, 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; diff --git a/src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts b/src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts index 411ae2001..189992c23 100644 --- a/src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts +++ b/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({ + new BehaviorSubject({ supported: true, processor: undefined, }), @@ -128,7 +128,7 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => { select: () => {}, }, }), - new BehaviorSubject({ + new BehaviorSubject({ supported: true, processor: undefined, }), @@ -163,7 +163,7 @@ describe("ECConnectionFactory - Camera quality settings", () => { mockClient, "!roomid:example.org", mockMediaDevices({}), - new BehaviorSubject({ + new BehaviorSubject({ supported: true, processor: undefined, }), @@ -200,7 +200,7 @@ describe("ECConnectionFactory - Camera quality settings", () => { mockClient, "!roomid:example.org", mockMediaDevices({}), - new BehaviorSubject({ + new BehaviorSubject({ supported: true, processor: undefined, }), @@ -238,7 +238,7 @@ describe("ECConnectionFactory - Camera quality settings", () => { mockClient, "!roomid:example.org", mockMediaDevices({}), - new BehaviorSubject({ + new BehaviorSubject({ supported: true, processor: undefined, }), diff --git a/src/state/CallViewModel/remoteMembers/integration.test.ts b/src/state/CallViewModel/remoteMembers/integration.test.ts index 4c0f4fea7..abfc68acf 100644 --- a/src/state/CallViewModel/remoteMembers/integration.test.ts +++ b/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({ + new BehaviorSubject({ supported: true, processor: undefined, }),