@capytale/meta-player 0.3.14 → 0.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,7 @@
     }
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.1.6",
+    "@capytale/activity.js": "^3.1.7",
     "@capytale/capytale-anti-triche": "^0.2.1",
     "@capytale/capytale-rich-text-editor": "^0.4.3",
     "@reduxjs/toolkit": "^2.0.1",

package/src/App.tsx

@@ -101,7 +101,7 @@ const App: FC<AppProps> = (props) => {
           <SplitterPanel minSize={15} size={30} className={styles.pedagoPanel}>
             <Pedago key="pedago" />
           </SplitterPanel>
-          <SplitterPanel minSize={40} size={70}>
+          <SplitterPanel minSize={40} size={70} className={styles.contentPanel}>
             <div className="meta-player-content-cover"></div>
             <div id="meta-player-content">{props.children}</div>
           </SplitterPanel>

package/src/MetaPlayer.tsx

@@ -32,6 +32,7 @@ import {
 } from "./features/activityData/activityDataSlice";
 
 import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
+import ExitWarning from "./features/activityData/ExitWarning";
 
 type AntiCheatOptions = {
   preserveDom: boolean;
@@ -81,6 +82,7 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
     <PrimeReactProvider value={primeSettings}>
       <Provider store={store}>
         <ThemeSwitcher />
+        <ExitWarning />
         <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
           <ActivityJSProvider options={props.activityJSOptions}>
             <Saver />

package/src/app.module.scss

@@ -29,6 +29,11 @@
   overflow-y: hidden;
 }
 
+.contentPanel {
+  height: 100%;
+  background-color: var(--surface-a);
+}
+
 .pedagoContainer {
   overflow-y: hidden;
   display: grid;

package/src/features/activityData/ExitWarning.ts

@@ -0,0 +1,26 @@
+import { FC, useEffect } from "react";
+import { useAppSelector } from "../../app/hooks";
+import { selectIsDirty } from "./activityDataSlice";
+
+const ExitWarning: FC = () => {
+  const isDirty = useAppSelector(selectIsDirty);
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        e.preventDefault();
+        e.returnValue = true;
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty]);
+
+  return null;
+};
+
+export default ExitWarning;

package/src/index.css

@@ -75,7 +75,11 @@ body,
   }
 }
 
-#meta-player-content,
+#meta-player-content {
+  height: 100%;
+  background-color: var(--surface-a);
+}
+
 :has(> #meta-player-content) {
   height: 100%;
   background-color: var(--surface-a);