Merge branch 'livekit' into toger5/track-processor-blur

src/room/CallEndedView.tsx

@@ -14,8 +14,8 @@ import {
 } from "react";
 import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
 import { Button, Heading, Text } from "@vector-im/compound-web";
+import { useNavigate } from "react-router-dom";
 
 import styles from "./CallEndedView.module.css";
 import feedbackStyle from "../input/FeedbackInput.module.css";
@@ -46,7 +46,7 @@ export const CallEndedView: FC<Props> = ({
   reconnect,
 }) => {
   const { t } = useTranslation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { displayName } = useProfile(client);
   const [surveySubmitted, setSurveySubmitted] = useState(false);
@@ -76,12 +76,12 @@ export const CallEndedView: FC<Props> = ({
             setSurveySubmitted(true);
           } else if (!confineToRoom) {
             // if the user already has an account immediately go back to the home screen
-            history.push("/");
+            navigate("/");
           }
         }, 1000);
       }, 1000);
     },
-    [endedCallId, history, isPasswordlessUser, confineToRoom, starRating],
+    [endedCallId, navigate, isPasswordlessUser, confineToRoom, starRating],
   );
 
   const createAccountDialog = isPasswordlessUser && (

src/room/GroupCallView.test.tsx

@@ -11,8 +11,7 @@ import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 import { of } from "rxjs";
 import { JoinRule, type RoomState } from "matrix-js-sdk/src/matrix";
-import { Router } from "react-router-dom";
-import { createBrowserHistory } from "history";
+import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/src/models/relations-container";
 
@@ -78,7 +77,6 @@ function createGroupCallView(widget: WidgetHelpers | null): {
   rtcSession: MockRTCSession;
   getByText: ReturnType<typeof render>["getByText"];
 } {
-  const history = createBrowserHistory();
   const client = {
     getUser: () => null,
     getUserId: () => localRtcMember.sender,
@@ -111,7 +109,7 @@ function createGroupCallView(widget: WidgetHelpers | null): {
     video: { enabled: false },
   } as MuteStates;
   const { getByText } = render(
-    <Router history={history}>
+    <BrowserRouter>
       <GroupCallView
         client={client}
         isPasswordlessUser={false}
@@ -123,7 +121,7 @@ function createGroupCallView(widget: WidgetHelpers | null): {
         muteStates={muteState}
         widget={widget}
       />
-    </Router>,
+    </BrowserRouter>,
   );
   return {
     getByText,

src/room/GroupCallView.tsx

@@ -13,7 +13,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { useHistory } from "react-router-dom";
 import { type MatrixClient } from "matrix-js-sdk/src/client";
 import {
   Room,
@@ -24,6 +23,7 @@ import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSess
 import { JoinRule } from "matrix-js-sdk/src/matrix";
 import { Heading, Text } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -234,7 +234,7 @@ export const GroupCallView: FC<Props> = ({
 
   const [left, setLeft] = useState(false);
   const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const onLeave = useCallback(
     (leaveError?: Error): void => {
@@ -263,7 +263,7 @@ export const GroupCallView: FC<Props> = ({
             !confineToRoom &&
             !PosthogAnalytics.instance.isEnabled()
           ) {
-            history.push("/");
+            navigate("/");
           }
         })
         .catch((e) => {
@@ -276,7 +276,7 @@ export const GroupCallView: FC<Props> = ({
       isPasswordlessUser,
       confineToRoom,
       leaveSoundContext,
-      history,
+      navigate,
     ],
   );
 

src/room/LobbyView.tsx

@@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";
 import classNames from "classnames";
-import { useHistory } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 import { usePreviewTracks } from "@livekit/components-react";
 import {
@@ -20,11 +19,11 @@ import {
 } from "livekit-client";
 import { useObservable } from "observable-hooks";
 import { map } from "rxjs";
+import { useNavigate } from "react-router-dom";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { useLocationNavigation } from "../useLocationNavigation";
 import { type MatrixInfo, VideoPreview } from "./VideoPreview";
 import { type MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
@@ -73,7 +72,6 @@ export const LobbyView: FC<Props> = ({
   waitingForInvite,
 }) => {
   const { t } = useTranslation();
-  useLocationNavigation();
 
   const onAudioPress = useCallback(
     () => muteStates.audio.setEnabled?.((e) => !e),
@@ -96,8 +94,8 @@ export const LobbyView: FC<Props> = ({
     [setSettingsModalOpen],
   );
 
-  const history = useHistory();
-  const onLeaveClick = useCallback(() => history.push("/"), [history]);
+  const navigate = useNavigate();
+  const onLeaveClick = useCallback(() => navigate("/"), [navigate]);
 
   const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
   const recentsButton = !confineToRoom && (