@capytale/meta-player 0.1.5 → 0.2.0

package/.eslintrc.json

@@ -3,7 +3,8 @@
     "eslint:recommended",
     "react-app",
     "plugin:react/jsx-runtime",
-    "prettier"
+    "prettier",
+    "plugin:react-hooks/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": { "project": true, "tsconfigRootDir": "./" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,13 +15,12 @@
   },
   "dependencies": {
     "@capytale/activity.js": "^3.1.0",
+    "@capytale/capytale-anti-triche": "^0.2.1",
     "@capytale/capytale-rich-text-editor": "^0.4.2",
     "@reduxjs/toolkit": "^2.0.1",
     "@uidotdev/usehooks": "^2.4.1",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-html-props": "^2.0.9",
     "react-redux": "^9.1.0",
     "screenfull": "^6.0.2"
@@ -31,18 +30,25 @@
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jsdom": "^23.2.0",
     "prettier": "^3.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sass": "^1.75.0",
     "typescript": "^5.3.3",
     "vite": "^5.4.6",
     "vitest": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/src/MetaPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { FC, PropsWithChildren } from "react";
 
 import { Provider } from "react-redux";
 
@@ -9,19 +9,47 @@ import App from "./App";
 import { store } from "./app/store";
 import "./index.css";
 import ThemeSwitcher from "./features/theming/ThemeSwitcher";
-import { ActivityJSProvider } from "./features/activityJS/ActivityJSProvider";
+import {
+  ActivityJSProvider,
+  useActivityJS,
+} from "./features/activityJS/ActivityJSProvider";
 import { LoadOptions } from "./features/activityJS/internal-hooks";
 import { ErrorBoundary } from "./utils/ErrorBoundary";
 import Saver from "./features/activityJS/Saver";
+import {
+  CapytaleAntiCheat,
+  ContentHidingMethod,
+  ExitDetectionMethod,
+} from "@capytale/capytale-anti-triche";
+import { useAppSelector } from "./app/hooks";
+import {
+  selectActivityInfo,
+  selectAntiCheat,
+  selectHasAntiCheat,
+  selectIsAntiCheatExitDetectionDisabled,
+  selectIsDirty,
+  selectReturnUrl,
+} from "./features/activityData/activityDataSlice";
+
+type AntiCheatOptions = {
+  preserveDom: boolean;
+  hasIframes: boolean;
+};
 
 type MetaPlayerProps = PropsWithChildren<{
   activityJSOptions?: LoadOptions;
+  antiCheatOptions?: Partial<AntiCheatOptions>;
 }>;
 
-const MetaPlayer: React.FC<MetaPlayerProps> = (props) => {
+const MetaPlayer: FC<MetaPlayerProps> = (props) => {
   const primeSettings: Partial<APIOptions> = {
     ripple: true,
   };
+  const antiCheatOptions: AntiCheatOptions = {
+    preserveDom: true,
+    hasIframes: false,
+    ...props.antiCheatOptions,
+  };
   return (
     <PrimeReactProvider value={primeSettings}>
       <Provider store={store}>
@@ -29,7 +57,9 @@ const MetaPlayer: React.FC<MetaPlayerProps> = (props) => {
         <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
           <ActivityJSProvider options={props.activityJSOptions}>
             <Saver />
-            <App>{props.children}</App>
+            <MetaPlayerContent antiCheatOptions={antiCheatOptions}>
+              <App>{props.children}</App>
+            </MetaPlayerContent>
           </ActivityJSProvider>
         </ErrorBoundary>
       </Provider>
@@ -37,4 +67,64 @@ const MetaPlayer: React.FC<MetaPlayerProps> = (props) => {
   );
 };
 
+type MetaPlayerContentProps = {
+  antiCheatOptions: AntiCheatOptions;
+};
+
+const MetaPlayerContent: React.FC<PropsWithChildren<MetaPlayerContentProps>> = (
+  props,
+) => {
+  const isDirty = useAppSelector(selectIsDirty);
+  const antiCheat = useAppSelector(selectAntiCheat);
+  const hasAntiCheat = useAppSelector(selectHasAntiCheat);
+  const activityInfo = useAppSelector(selectActivityInfo);
+  const returnUrl = useAppSelector(selectReturnUrl);
+  const isAntiCheatExitDetectionDisabled = useAppSelector(
+    selectIsAntiCheatExitDetectionDisabled,
+  );
+  const studentName = activityInfo.studentInfo
+    ? `${activityInfo.studentInfo.firstName} ${activityInfo.studentInfo.lastName}`
+    : "";
+  const activityJS = useActivityJS();
+
+  const touch = () => {
+    if (
+      activityJS.activitySession == null ||
+      activityJS.activitySession.activityBunch.assignmentNode == null
+    ) {
+      console.error("ActivityJS data not loaded or touch not available");
+      return Promise.resolve();
+    } else {
+      return activityJS.activitySession.activityBunch.assignmentNode.touch();
+    }
+  };
+
+  return (
+    <CapytaleAntiCheat
+      enabled={hasAntiCheat}
+      hashedPassword={antiCheat?.passwordHash || null}
+      startLocked={antiCheat?.startLocked || null}
+      activityTitle={activityInfo.title}
+      studentName={studentName}
+      isDirty={isDirty}
+      returnUrl={returnUrl}
+      dbTouchFunction={touch}
+      disableExitDetection={isAntiCheatExitDetectionDisabled}
+      contentClassName="anti-cheat-content"
+      exitDetectionMethod={
+        props.antiCheatOptions.hasIframes
+          ? ExitDetectionMethod.VISIBILITY_CHANGE
+          : ExitDetectionMethod.BLUR
+      }
+      contentHidingMethod={
+        props.antiCheatOptions.preserveDom
+          ? ContentHidingMethod.DISPLAY_NONE
+          : ContentHidingMethod.REMOVE_FROM_DOM
+      }
+    >
+      {props.children}
+    </CapytaleAntiCheat>
+  );
+};
+
 export default MetaPlayer;

package/src/features/activityData/IsAntiCheatExitDetectionDisabledSetter.tsx

@@ -0,0 +1,19 @@
+import { FC, useEffect } from "react";
+import { setIsAntiCheatExitDetectionDisabled } from "./activityDataSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type IsAntiCheatExitDetectionDisabledSetterProps = {
+  isDisabled: boolean;
+};
+
+const IsAntiCheatExitDetectionDisabledSetter: FC<
+  IsAntiCheatExitDetectionDisabledSetterProps
+> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setIsAntiCheatExitDetectionDisabled(props.isDisabled));
+  }, [props]);
+  return null;
+};
+
+export default IsAntiCheatExitDetectionDisabledSetter;

package/src/features/activityData/activityDataSlice.ts

@@ -45,6 +45,10 @@ interface ActivityJSData {
   comments: string | null;
   grading: string | null;
   workflow: wf | null | undefined;
+  antiCheat?: null | {
+    passwordHash?: string | null;
+    startLocked: boolean;
+  };
 }
 
 type SaveState = "idle" | "should-save" | "saving";
@@ -55,6 +59,7 @@ interface UIState {
   saveState: SaveState;
   isPlayerDirty: boolean;
   isMPDirty: boolean;
+  isAntiCheatExitDetectionDisabled: boolean;
 }
 
 export interface ActivityDataState
@@ -93,6 +98,8 @@ const initialState: ActivityDataState = {
   saveState: "idle",
   isPlayerDirty: false,
   isMPDirty: false,
+
+  isAntiCheatExitDetectionDisabled: false,
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -125,6 +132,7 @@ export const activityDataSlice = createAppSlice({
         state.nid = action.payload.nid;
         state.activityNid = action.payload.activityNid;
         state.workflow = action.payload.workflow;
+        state.antiCheat = action.payload.antiCheat;
       },
     ),
     setPlayerSettings: create.reducer(
@@ -179,6 +187,11 @@ export const activityDataSlice = createAppSlice({
     setIsMPDirty: create.reducer((state, action: PayloadAction<boolean>) => {
       state.isMPDirty = action.payload;
     }),
+    setIsAntiCheatExitDetectionDisabled: create.reducer(
+      (state, action: PayloadAction<boolean>) => {
+        state.isAntiCheatExitDetectionDisabled = action.payload;
+      },
+    ),
   }),
   // You can define your selectors here. These selectors receive the slice
   // state as their first argument.
@@ -220,6 +233,17 @@ export const activityDataSlice = createAppSlice({
       data.mode === "create" ||
       data.mode === "review" ||
       (data.mode === "assignment" && data.workflow === "current"),
+
+    selectAntiCheat: (data) => data.antiCheat,
+    selectHasAntiCheat: (data) =>
+      !!(
+        data.antiCheat &&
+        data.antiCheat.passwordHash &&
+        data.mode === "assignment" &&
+        data.workflow === "current"
+      ),
+    selectIsAntiCheatExitDetectionDisabled: (data) =>
+      data.isAntiCheatExitDetectionDisabled,
   },
 });
 
@@ -238,6 +262,7 @@ export const {
   setWorkflow,
   setIsPlayerDirty,
   setIsMPDirty,
+  setIsAntiCheatExitDetectionDisabled,
 } = activityDataSlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.
@@ -265,4 +290,8 @@ export const {
   selectCanChoosePedagoLayout,
   selectCanChooseTheme,
   selectShowSaveButton,
+
+  selectAntiCheat,
+  selectHasAntiCheat,
+  selectIsAntiCheatExitDetectionDisabled,
 } = activityDataSlice.selectors;

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -92,6 +92,12 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
         comments: ab.assignmentNode?.comments.value || null,
         grading: ab.assignmentNode?.grading.value || null,
         workflow: ab.assignmentNode?.workflow,
+        antiCheat: ab.hasAntiCheat
+          ? {
+              passwordHash: ab.antiCheatPasswd,
+              startLocked: !ab.assignmentNode?.isNew,
+            }
+          : null,
       }),
     );
     tracker.trackActivity(data);

package/src/features/activityJS/Saver.tsx

@@ -6,10 +6,10 @@ import {
   selectGrading,
   selectInstructions,
   selectSaveState,
-  selectWorkflow,
   setIsMPDirty,
   setIsPlayerDirty,
   setSaveState,
+  setWorkflow,
 } from "../activityData/activityDataSlice";
 import { useActivityJS } from "./ActivityJSProvider";
 import { Toast } from "primereact/toast";
@@ -24,7 +24,6 @@ const Saver: FC<{}> = () => {
   const grading = useAppSelector(selectGrading);
   const beforeSave = useAppSelector(selectBeforeSave);
   const afterSave = useAppSelector(selectAfterSave);
-  const workflow = useAppSelector(selectWorkflow);
 
   const toast = useRef<Toast>(null);
 
@@ -85,16 +84,16 @@ const Saver: FC<{}> = () => {
           ? answerSheetContent
           : JSON.stringify(answerSheetContent);
     }
-    if (
-      activityJs.activitySession.mode === "assignment" ||
-      activityJs.activitySession.mode === "review"
-    ) {
-      ab.assignmentNode!.workflow = workflow!;
-    }
     try {
       const saveData = await ab.save();
       console.log("Save return data", saveData);
       dispatch(setSaveState("idle"));
+      if (
+        activityJs.activitySession.mode === "assignment" ||
+        activityJs.activitySession.mode === "review"
+      ) {
+        dispatch(setWorkflow(ab.assignmentNode!.workflow));
+      }
       dispatch(setIsPlayerDirty(false));
       dispatch(setIsMPDirty(false));
       toast.current!.show({

package/src/features/navbar/ActivityMenu.tsx

@@ -10,6 +10,8 @@ import useFullscreen from "../../utils/useFullscreen";
 import { useActivityJS } from "../activityJS/ActivityJSProvider";
 import { Dialog } from "primereact/dialog";
 import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
+import { useAppSelector } from "../../app/hooks";
+import { selectHasAntiCheat } from "../activityData/activityDataSlice";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
@@ -20,6 +22,7 @@ const ActivityMenu: React.FC = memo(() => {
   const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const [helpDialogVisible, setHelpDialogVisible] = useState(false);
   const activityJS = useActivityJS();
+  const hasAntiCheat = useAppSelector(selectHasAntiCheat);
   return (
     <div className={styles.activityMenu}>
       <ActivityQuickActions />
@@ -35,18 +38,20 @@ const ActivityMenu: React.FC = memo(() => {
         }}
         onClick={() => setSettingsSidebarVisible(true)}
       />
-      <Button
-        severity="secondary"
-        size="small"
-        icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
-        text
-        tooltip="Plein écran"
-        tooltipOptions={{
-          position: "bottom",
-          showDelay: settings.TOOLTIP_SHOW_DELAY,
-        }}
-        onClick={() => setWantFullscreen((prev) => !prev)}
-      />
+      {!hasAntiCheat && (
+        <Button
+          severity="secondary"
+          size="small"
+          icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
+          text
+          tooltip="Plein écran"
+          tooltipOptions={{
+            position: "bottom",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          onClick={() => setWantFullscreen((prev) => !prev)}
+        />
+      )}
       {isInIframe && (
         <Button
           severity="secondary"

package/src/features/navbar/CapytaleMenu.tsx

@@ -17,7 +17,6 @@ import {
   selectShowSaveButton,
   selectWorkflow,
   setSaveState,
-  setWorkflow,
 } from "../activityData/activityDataSlice";
 import { copyToClipboard } from "../../utils/clipboard";
 import settings from "../../settings";
@@ -25,9 +24,11 @@ import { wf } from "@capytale/activity.js/activity/field/workflow";
 import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 import ButtonDoubleIcon from "../../utils/ButtonDoubleIcon";
 import CardSelector from "../../utils/CardSelector";
+import { useActivityJS } from "../activityJS/ActivityJSProvider";
 
 const CapytaleMenu: React.FC = () => {
   const dispatch = useAppDispatch();
+  const activityJS = useActivityJS();
   const sharingInfo = useAppSelector(selectSharingInfo);
   const saveState = useAppSelector(selectSaveState);
   const windowsSize = useWindowSize();
@@ -46,7 +47,7 @@ const CapytaleMenu: React.FC = () => {
   const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const toast = useRef<Toast>(null);
   const changeWorkflow = (value: wf) => {
-    dispatch(setWorkflow(value));
+    activityJS.activitySession!.activityBunch.assignmentNode!.workflow = value;
     dispatch(setSaveState("should-save"));
   };
   const confirmFinishAssignment = () => {
@@ -80,25 +81,27 @@ const CapytaleMenu: React.FC = () => {
             }}
           />
         )}
-        {showSaveButton && (
-          <Button
-            label={isQuiteSmall ? undefined : "Enregistrer"}
-            disabled={!isDirty}
-            severity={"warning"}
-            size="small"
-            icon="pi pi-save"
-            loading={saveState !== "idle"}
+        {
+          showSaveButton && (
+            <Button
+              label={isQuiteSmall ? undefined : "Enregistrer"}
+              disabled={!isDirty}
+              severity={"warning"}
+              size="small"
+              icon="pi pi-save"
+              loading={saveState !== "idle"}
+              onClick={() => {
+                dispatch(setSaveState("should-save"));
+              }}
+            />
+          ) /**
             tooltip={isDirty ? "Enregistrer l'activité" : "Rien à enregistrer"}
             tooltipOptions={{
               position: "bottom",
               showDelay: settings.TOOLTIP_SHOW_DELAY,
               showOnDisabled: true,
-            }}
-            onClick={() => {
-              dispatch(setSaveState("should-save"));
-            }}
-          />
-        )}
+            }} */
+        }
 
         {mode === "create" && (
           <SplitButton

package/src/index.css

@@ -87,3 +87,13 @@ body,
     display: block;
   }
 }
+
+.anti-cheat-content {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.anti-cheat h1:first-child {
+  margin-top: 0;
+}