add beforeunload

codeforkjeff · codeforkjeff · commit 09304d948bd5 · 2022-10-12T20:08:06.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "bootstrap": "5.2.2",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
+    "react-beforeunload": "^2.5.3",
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-icons": "1.9.1",
     "react-dom": "^18.2.0",
diff --git a/src/components/Player.js b/src/components/Player.js
@@ -11,6 +11,7 @@ import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import { useParams } from 'react-router-dom';
+import { useBeforeunload } from 'react-beforeunload';
 
 function Player() {
 
@@ -126,6 +127,12 @@ function Player() {
     isPlaying: false,
   });
 
+  useBeforeunload((event) => {
+    if (playerState.dirty) {
+      event.preventDefault()
+    }
+  });
+
   const [ error, setError ] = useState(false)
 
   return (
