Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-03-19 06:20:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify our context providers

Browse Source 
React 19 lets you omit the '.Provider' bit.
This commit is contained in:
Robin
2025-06-23 22:59:58 -04:00
parent d4b38563e7
commit 4df74c7134
10 changed files with 38 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -77,7 +77,7 @@ export const App: FC<Props> = ({ vm }) => {
{loaded ? (
<Suspense fallback={null}>
<ClientProvider>
<MediaDevicesContext.Provider value={vm.mediaDevices}>
<MediaDevicesContext value={vm.mediaDevices}>
<ProcessorProvider>
<Sentry.ErrorBoundary
fallback={(error) => (
@@ -96,7 +96,7 @@ export const App: FC<Props> = ({ vm }) => {
</Routes>
</Sentry.ErrorBoundary>
</ProcessorProvider>
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</ClientProvider>
</Suspense>
) : (

4
src/ClientContext.tsx
View File

@@ -349,9 +349,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
}
return (
<ClientContext.Provider value={state}>{children}</ClientContext.Provider>
);
return <ClientContext value={state}>{children}</ClientContext>;
};
export type InitResult = {

4
src/grid/Grid.tsx
View File

@@ -532,14 +532,14 @@ export function Grid<
className={classNames(className, styles.grid)}
style={style}
>
<LayoutContext.Provider value={context}>
<LayoutContext value={context}>
<LayoutMemo
ref={setLayoutRoot}
Layout={Layout}
model={model}
Slot={Slot}
/>
</LayoutContext.Provider>
</LayoutContext>
{tileTransitions((spring, { id, model, onDrag, width, height }) => (
<TileWrapper
key={id}

6
src/livekit/TrackProcessorContext.tsx
View File

@@ -83,9 +83,5 @@ export const ProcessorProvider: FC<Props> = ({ children }) => {
[supported, blurActivated, blur],
);
return (
<ProcessorContext.Provider value={processorState}>
{children}
</ProcessorContext.Provider>
);
return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
};

4
src/reactions/useReactionsSender.tsx
View File

@@ -157,7 +157,7 @@ export const ReactionsSenderProvider = ({
);
return (
<ReactionsSenderContext.Provider
<ReactionsSenderContext
value={{
supportsReactions,
toggleRaisedHand,
@@ -165,6 +165,6 @@ export const ReactionsSenderProvider = ({
}}
>
{children}
</ReactionsSenderContext.Provider>
</ReactionsSenderContext>
);
};

4
src/room/GroupCallView.test.tsx
View File

@@ -149,7 +149,7 @@ function createGroupCallView(
const { getByText } = render(
<BrowserRouter>
<TooltipProvider>
<MediaDevicesContext.Provider value={mockMediaDevices({})}>
<MediaDevicesContext value={mockMediaDevices({})}>
<ProcessorProvider>
<GroupCallView
client={client}
@@ -164,7 +164,7 @@ function createGroupCallView(
widget={widget}
/>
</ProcessorProvider>
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</TooltipProvider>
</BrowserRouter>,
);

8
src/room/InCallView.test.tsx
View File

@@ -149,13 +149,13 @@ function createInCallView(): RenderResult & {
rtcSession.joined = true;
const renderResult = render(
<BrowserRouter>
<MediaDevicesContext.Provider value={mockMediaDevices({})}>
<MediaDevicesContext value={mockMediaDevices({})}>
<ReactionsSenderProvider
vm={vm}
rtcSession={rtcSession as unknown as MatrixRTCSession}
>
<TooltipProvider>
<RoomContext.Provider value={livekitRoom}>
<RoomContext value={livekitRoom}>
<InCallView
client={client}
hideHeader={true}
@@ -182,10 +182,10 @@ function createInCallView(): RenderResult & {
connState={ConnectionState.Connected}
onShareClick={null}
/>
</RoomContext.Provider>
</RoomContext>
</TooltipProvider>
</ReactionsSenderProvider>
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</BrowserRouter>,
);
return {

4
src/room/InCallView.tsx
View File

@@ -172,7 +172,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
if (livekitRoom === undefined || vm === null) return null;
return (
<RoomContext.Provider value={livekitRoom}>
<RoomContext value={livekitRoom}>
<ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
<InCallView
{...props}
@@ -181,7 +181,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
connState={connState}
/>
</ReactionsSenderProvider>
</RoomContext.Provider>
</RoomContext>
);
};

24
src/room/MuteStates.test.tsx
View File

@@ -124,14 +124,14 @@ describe("useMuteStates", () => {
render(
<MemoryRouter>
<MediaDevicesContext.Provider
<MediaDevicesContext
value={mockMediaDevices({
microphone: false,
camera: false,
})}
>
<TestComponent />
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</MemoryRouter>,
);
expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -143,9 +143,9 @@ describe("useMuteStates", () => {
render(
<MemoryRouter>
<MediaDevicesContext.Provider value={mockMediaDevices()}>
<MediaDevicesContext value={mockMediaDevices()}>
<TestComponent />
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</MemoryRouter>,
);
expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
@@ -159,9 +159,9 @@ describe("useMuteStates", () => {
render(
<MemoryRouter>
<MediaDevicesContext.Provider value={mockMediaDevices()}>
<MediaDevicesContext value={mockMediaDevices()}>
<TestComponent isJoined />
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</MemoryRouter>,
);
expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -178,9 +178,9 @@ describe("useMuteStates", () => {
render(
<MemoryRouter>
<MediaDevicesContext.Provider value={mockMediaDevices()}>
<MediaDevicesContext value={mockMediaDevices()}>
<TestComponent />
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</MemoryRouter>,
);
expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -192,9 +192,9 @@ describe("useMuteStates", () => {
render(
<MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
<MediaDevicesContext.Provider value={mockMediaDevices()}>
<MediaDevicesContext value={mockMediaDevices()}>
<TestComponent />
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</MemoryRouter>,
);
expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -224,13 +224,13 @@ describe("useMuteStates", () => {
return (
<MemoryRouter>
<MediaDevicesContext.Provider value={devices}>
<MediaDevicesContext value={devices}>
<TestComponent />
<button onClick={onConnectDevicesClick}>Connect devices</button>
<button onClick={onDisconnectDevicesClick}>
Disconnect devices
</button>
</MediaDevicesContext.Provider>
</MediaDevicesContext>
</MemoryRouter>
);
};

20
src/useAudioContext.test.tsx
View File

@@ -105,9 +105,9 @@ afterEach(() => {
test("can play a single sound", async () => {
const { findByText } = render(
<MediaDevicesContext.Provider value={mockMediaDevices({})}>
<MediaDevicesContext value={mockMediaDevices({})}>
<TestComponentWrapper />
</MediaDevicesContext.Provider>,
</MediaDevicesContext>,
);
await user.click(await findByText("Valid sound"));
expect(testAudioContext.createBufferSource).toHaveBeenCalledOnce();
@@ -115,9 +115,9 @@ test("can play a single sound", async () => {
test("will ignore sounds that are not registered", async () => {
const { findByText } = render(
<MediaDevicesContext.Provider value={mockMediaDevices({})}>
<MediaDevicesContext value={mockMediaDevices({})}>
<TestComponentWrapper />
</MediaDevicesContext.Provider>,
</MediaDevicesContext>,
);
await user.click(await findByText("Invalid sound"));
expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
@@ -125,7 +125,7 @@ test("will ignore sounds that are not registered", async () => {
test("will use the correct device", () => {
render(
<MediaDevicesContext.Provider
<MediaDevicesContext
value={mockMediaDevices({
audioOutput: {
available$: of(new Map<never, never>()),
@@ -135,7 +135,7 @@ test("will use the correct device", () => {
})}
>
<TestComponentWrapper />
</MediaDevicesContext.Provider>,
</MediaDevicesContext>,
);
expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
expect(testAudioContext.setSinkId).toHaveBeenCalledWith("chosen-device");
@@ -144,9 +144,9 @@ test("will use the correct device", () => {
test("will use the correct volume level", async () => {
soundEffectVolumeSetting.setValue(0.33);
const { findByText } = render(
<MediaDevicesContext.Provider value={mockMediaDevices({})}>
<MediaDevicesContext value={mockMediaDevices({})}>
<TestComponentWrapper />
</MediaDevicesContext.Provider>,
</MediaDevicesContext>,
);
await user.click(await findByText("Valid sound"));
expect(testAudioContext.gain.gain.setValueAtTime).toHaveBeenCalledWith(
@@ -158,7 +158,7 @@ test("will use the correct volume level", async () => {
test("will use the pan if earpiece is selected", async () => {
const { findByText } = render(
<MediaDevicesContext.Provider
<MediaDevicesContext
value={mockMediaDevices({
audioOutput: {
available$: of(new Map<never, never>()),
@@ -168,7 +168,7 @@ test("will use the pan if earpiece is selected", async () => {
})}
>
<TestComponentWrapper />
</MediaDevicesContext.Provider>,
</MediaDevicesContext>,
);
await user.click(await findByText("Valid sound"));
expect(testAudioContext.pan.pan.setValueAtTime).toHaveBeenCalledWith(1, 0);