Improve performance of RoomContext in RoomHeader (#28574)

* Improve performance of RoomContext in RoomHeader

This allows a component to subscribe to only part of the RoomContext so they do not need to re-render on every single change

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Prettier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

test/unit-tests/components/views/audio_messages/RecordingPlayback-test.tsx

@@ -15,10 +15,11 @@ import RecordingPlayback, {
     PlaybackLayout,
 } from "../../../../../src/components/views/audio_messages/RecordingPlayback";
 import { Playback } from "../../../../../src/audio/Playback";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { createAudioContext } from "../../../../../src/audio/compat";
 import { flushPromises } from "../../../../test-utils";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
+import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
 
 jest.mock("../../../../../src/WorkerManager", () => ({
     WorkerManager: jest.fn(() => ({
@@ -56,9 +57,9 @@ describe("<RecordingPlayback />", () => {
     const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File } as IRoomState;
     const getComponent = (props: React.ComponentProps<typeof RecordingPlayback>, room = defaultRoom) =>
         render(
-            <RoomContext.Provider value={room}>
+            <ScopedRoomContextProvider {...room}>
                 <RecordingPlayback {...props} />
-            </RoomContext.Provider>,
+            </ScopedRoomContextProvider>,
         );
 
     beforeEach(() => {