Add useLocationNavigation to fix navigation during browser media prompts

This commit is contained in:
Robert Long 2022-02-03 16:56:13 -08:00
parent a33d1364b6
commit 1d8cd8c3c8
3 changed files with 32 additions and 0 deletions

View file

@ -7,6 +7,7 @@ import { LobbyView } from "./LobbyView";
import { InCallView } from "./InCallView";
import { CallEndedView } from "./CallEndedView";
import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
import { useLocationNavigation } from "../useLocationNavigation";
export function GroupCallView({
client,
@ -42,6 +43,7 @@ export function GroupCallView({
toggleLocalVideoMuted,
toggleMicrophoneMuted,
toggleScreensharing,
requestingScreenshare,
isScreensharing,
localScreenshareFeed,
screenshareFeeds,
@ -54,6 +56,8 @@ export function GroupCallView({
useSentryGroupCallHandler(groupCall);
useLocationNavigation(requestingScreenshare);
const [left, setLeft] = useState(false);
const history = useHistory();

View file

@ -14,6 +14,7 @@ import { getAvatarUrl } from "../matrix-utils";
import { useProfile } from "../profile/useProfile";
import useMeasure from "react-use-measure";
import { ResizeObserver } from "@juggle/resize-observer";
import { useLocationNavigation } from "../useLocationNavigation";
export function LobbyView({
client,
@ -40,6 +41,8 @@ export function LobbyView({
onInitLocalCallFeed();
}, [onInitLocalCallFeed]);
useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed);
return (
<div className={styles.room}>
<Header>

View file

@ -0,0 +1,25 @@
import { useEffect } from "react";
import { useHistory } from "react-router-dom";
export function useLocationNavigation(enabled = false) {
const history = useHistory();
useEffect(() => {
let unblock;
if (enabled) {
unblock = history.block((tx) => {
const url = new URL(tx.pathname, window.location.href);
url.search = tx.search;
url.hash = tx.hash;
window.location = url.href;
});
}
return () => {
if (unblock) {
unblock();
}
};
}, [history, enabled]);
}