From 1d8cd8c3c81cbc7a3e09836497bbb1f0aa799a4f Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Thu, 3 Feb 2022 16:56:13 -0800
Subject: [PATCH] Add useLocationNavigation to fix navigation during browser
 media prompts

---
 src/room/GroupCallView.jsx   |  4 ++++
 src/room/LobbyView.jsx       |  3 +++
 src/useLocationNavigation.js | 25 +++++++++++++++++++++++++
 3 files changed, 32 insertions(+)
 create mode 100644 src/useLocationNavigation.js

diff --git a/src/room/GroupCallView.jsx b/src/room/GroupCallView.jsx
index 5808f1f..a7c5f50 100644
--- a/src/room/GroupCallView.jsx
+++ b/src/room/GroupCallView.jsx
@@ -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();
 
diff --git a/src/room/LobbyView.jsx b/src/room/LobbyView.jsx
index 4921c2d..08ad346 100644
--- a/src/room/LobbyView.jsx
+++ b/src/room/LobbyView.jsx
@@ -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>
diff --git a/src/useLocationNavigation.js b/src/useLocationNavigation.js
new file mode 100644
index 0000000..2ae5234
--- /dev/null
+++ b/src/useLocationNavigation.js
@@ -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]);
+}