@capytale/meta-player 0.8.3 → 0.9.0

package/src/MetaPlayer.tsx

@@ -1,170 +1,170 @@
-import React, { FC, PropsWithChildren, useCallback, useMemo } from "react";
-
-import { Provider } from "react-redux";
-
-import { APIOptions, PrimeReactProvider } from "primereact/api";
-import "primeicons/primeicons.css";
-
-import App from "./App";
-import { makeStore } from "./app/store";
-import "./index.css";
-import ThemeSwitcher from "./features/theming/ThemeSwitcher";
-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";
-
-import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
-import ExitWarning from "./features/activityData/ExitWarning";
-import type { AntiCheatOptions, UIOptions } from "./types";
-import { ToastProvider } from "./features/toast";
-
-type MetaPlayerProps = PropsWithChildren<{
-  activityJSOptions?: LoadOptions;
-  antiCheatOptions?: Partial<AntiCheatOptions>;
-  uiOptions?: Partial<UIOptions>;
-}>;
-
-const MetaPlayer: FC<MetaPlayerProps> = (props) => {
-  const primeSettings: Partial<APIOptions> = {
-    ripple: true,
-  };
-  const antiCheatOptions: AntiCheatOptions = useMemo(
-    () => ({
-      preserveDom: true,
-      hasIframes: false,
-      ...props.antiCheatOptions,
-    }),
-    [props.antiCheatOptions],
-  );
-  const uiOptions: UIOptions = {
-    closePedagoByDefault: false,
-    noWorkflow: false,
-    noSaveForStudents: false,
-    ...props.uiOptions,
-  };
-  const store = useMemo(
-    () =>
-      makeStore({
-        layout: {
-          ...layoutInitialState,
-          isPedagoVisible: !uiOptions.closePedagoByDefault,
-          showWorkflow: !uiOptions.noWorkflow,
-          showSaveForStudents: !uiOptions.noSaveForStudents,
-        },
-      }),
-    [],
-  );
-  return (
-    <PrimeReactProvider value={primeSettings}>
-      <ToastProvider>
-        <Provider store={store}>
-          <ThemeSwitcher />
-          <ExitWarning />
-          <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
-            <ActivityJSProvider
-              options={props.activityJSOptions}
-              loadingFallback={<div>Chargement de l'activité...</div>}
-              errorFallback={({ children }) => (
-                <div style={{ marginLeft: "1rem", marginRight: "1rem" }}>
-                  <p>Erreur lors du chargement de l'activité : {children}</p>
-                  <p>
-                    Êtes-vous bien connecté(e) à Capytale ? Avez-vous bien le
-                    droit d'accéder à cette ressource ?
-                  </p>
-                  <p>
-                    <a href="/">Retour à l'accueil</a>
-                  </p>
-                </div>
-              )}
-            >
-              <Saver />
-              <MetaPlayerContent antiCheatOptions={antiCheatOptions}>
-                <App>{props.children}</App>
-              </MetaPlayerContent>
-            </ActivityJSProvider>
-          </ErrorBoundary>
-        </Provider>
-      </ToastProvider>
-    </PrimeReactProvider>
-  );
-};
-
-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 = useCallback(() => {
-    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();
-    }
-  }, [activityJS.activitySession]);
-
-  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;
+import React, { FC, PropsWithChildren, useCallback, useMemo } from "react";
+
+import { Provider } from "react-redux";
+
+import { APIOptions, PrimeReactProvider } from "primereact/api";
+import "primeicons/primeicons.css";
+
+import App from "./App";
+import { makeStore } from "./app/store";
+import "./index.css";
+import ThemeSwitcher from "./features/theming/ThemeSwitcher";
+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";
+
+import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
+import ExitWarning from "./features/activityData/ExitWarning";
+import type { AntiCheatOptions, UIOptions } from "./types";
+import { ToastProvider } from "./features/toast";
+
+type MetaPlayerProps = PropsWithChildren<{
+  activityJSOptions?: LoadOptions;
+  antiCheatOptions?: Partial<AntiCheatOptions>;
+  uiOptions?: Partial<UIOptions>;
+}>;
+
+const MetaPlayer: FC<MetaPlayerProps> = (props) => {
+  const primeSettings: Partial<APIOptions> = {
+    ripple: true,
+  };
+  const antiCheatOptions: AntiCheatOptions = useMemo(
+    () => ({
+      preserveDom: true,
+      hasIframes: false,
+      ...props.antiCheatOptions,
+    }),
+    [props.antiCheatOptions],
+  );
+  const uiOptions: UIOptions = {
+    closePedagoByDefault: false,
+    noWorkflow: false,
+    noSaveForStudents: false,
+    ...props.uiOptions,
+  };
+  const store = useMemo(
+    () =>
+      makeStore({
+        layout: {
+          ...layoutInitialState,
+          isPedagoVisible: !uiOptions.closePedagoByDefault,
+          showWorkflow: !uiOptions.noWorkflow,
+          showSaveForStudents: !uiOptions.noSaveForStudents,
+        },
+      }),
+    [],
+  );
+  return (
+    <PrimeReactProvider value={primeSettings}>
+      <ToastProvider>
+        <Provider store={store}>
+          <ThemeSwitcher />
+          <ExitWarning />
+          <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
+            <ActivityJSProvider
+              options={props.activityJSOptions}
+              loadingFallback={<div>Chargement de l'activité...</div>}
+              errorFallback={({ children }) => (
+                <div style={{ marginLeft: "1rem", marginRight: "1rem" }}>
+                  <p>Erreur lors du chargement de l'activité : {children}</p>
+                  <p>
+                    Êtes-vous bien connecté(e) à Capytale ? Avez-vous bien le
+                    droit d'accéder à cette ressource ?
+                  </p>
+                  <p>
+                    <a href="/">Retour à l'accueil</a>
+                  </p>
+                </div>
+              )}
+            >
+              <Saver />
+              <MetaPlayerContent antiCheatOptions={antiCheatOptions}>
+                <App>{props.children}</App>
+              </MetaPlayerContent>
+            </ActivityJSProvider>
+          </ErrorBoundary>
+        </Provider>
+      </ToastProvider>
+    </PrimeReactProvider>
+  );
+};
+
+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 = useCallback(() => {
+    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();
+    }
+  }, [activityJS.activitySession]);
+
+  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/activityJs.ts

@@ -1,7 +1,7 @@
-import evaluationApi from "@capytale/activity.js/backend/capytale/evaluation";
-import type { ActivityMode } from "@capytale/activity.js/activity/activitySession";
-import type { Evaluation } from "@capytale/activity.js/activity/evaluation/evaluation";
-import devconf from "@capytale/activity.js/util/devconf";
-
-export { evaluationApi, devconf };
-export type { Evaluation, ActivityMode };
+import evaluationApi from "@capytale/activity.js/backend/capytale/evaluation";
+import type { ActivityMode } from "@capytale/activity.js/activity/activitySession";
+import type { Evaluation } from "@capytale/activity.js/activity/evaluation/evaluation";
+import devconf from "@capytale/activity.js/util/devconf";
+
+export { evaluationApi, devconf };
+export type { Evaluation, ActivityMode };

package/src/app/createAppSlice.ts

@@ -1,6 +1,6 @@
-import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit"
-
-// `buildCreateSlice` allows us to create a slice with async thunks.
-export const createAppSlice = buildCreateSlice({
-  creators: { asyncThunk: asyncThunkCreator },
-})
+import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit"
+
+// `buildCreateSlice` allows us to create a slice with async thunks.
+export const createAppSlice = buildCreateSlice({
+  creators: { asyncThunk: asyncThunkCreator },
+})

package/src/app/hooks.ts

@@ -1,12 +1,12 @@
-// This file serves as a central hub for re-exporting pre-typed Redux hooks.
-// These imports are restricted elsewhere to ensure consistent
-// usage of typed hooks throughout the application.
-// We disable the ESLint rule here because this is the designated place
-// for importing and re-exporting the typed versions of hooks.
-/* eslint-disable @typescript-eslint/no-restricted-imports */
-import { useDispatch, useSelector } from "react-redux"
-import type { AppDispatch, RootState } from "./store"
-
-// Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
-export const useAppSelector = useSelector.withTypes<RootState>()
+// This file serves as a central hub for re-exporting pre-typed Redux hooks.
+// These imports are restricted elsewhere to ensure consistent
+// usage of typed hooks throughout the application.
+// We disable the ESLint rule here because this is the designated place
+// for importing and re-exporting the typed versions of hooks.
+/* eslint-disable @typescript-eslint/no-restricted-imports */
+import { useDispatch, useSelector } from "react-redux"
+import type { AppDispatch, RootState } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()

package/src/app/store.ts

@@ -1,52 +1,52 @@
-import type { Action, ThunkAction } from "@reduxjs/toolkit";
-import { combineSlices, configureStore } from "@reduxjs/toolkit";
-import { setupListeners } from "@reduxjs/toolkit/query";
-import { themingSlice } from "../features/theming/themingSlice";
-import { layoutSlice } from "../features/layout/layoutSlice";
-import { activityDataSlice } from "../features/activityData/activityDataSlice";
-import { navbarSlice } from "../features/navbar/navbarSlice";
-import { saverSlice } from "../features/activityJS/saverSlice";
-import { functionalitiesSlice } from "../features/functionalities/functionalitiesSlice";
-
-// `combineSlices` automatically combines the reducers using
-// their `reducerPath`s, therefore we no longer need to call `combineReducers`.
-const rootReducer = combineSlices(
-  activityDataSlice,
-  themingSlice,
-  layoutSlice,
-  navbarSlice,
-  saverSlice,
-  functionalitiesSlice,
-);
-// Infer the `RootState` type from the root reducer
-export type RootState = ReturnType<typeof rootReducer>;
-
-// The store setup is wrapped in `makeStore` to allow reuse
-// when setting up tests that need the same store config
-export const makeStore = (preloadedState?: Partial<RootState>) => {
-  const store = configureStore({
-    reducer: rootReducer,
-    preloadedState,
-    middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware({
-        serializableCheck: false
-      }),
-  });
-  // configure listeners using the provided defaults
-  // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors
-  setupListeners(store.dispatch);
-  return store;
-};
-
-export const store = makeStore();
-
-// Infer the type of `store`
-export type AppStore = typeof store;
-// Infer the `AppDispatch` type from the store itself
-export type AppDispatch = AppStore["dispatch"];
-export type AppThunk<ThunkReturnType = void> = ThunkAction<
-  ThunkReturnType,
-  RootState,
-  unknown,
-  Action
->;
+import type { Action, ThunkAction } from "@reduxjs/toolkit";
+import { combineSlices, configureStore } from "@reduxjs/toolkit";
+import { setupListeners } from "@reduxjs/toolkit/query";
+import { themingSlice } from "../features/theming/themingSlice";
+import { layoutSlice } from "../features/layout/layoutSlice";
+import { activityDataSlice } from "../features/activityData/activityDataSlice";
+import { navbarSlice } from "../features/navbar/navbarSlice";
+import { saverSlice } from "../features/activityJS/saverSlice";
+import { functionalitiesSlice } from "../features/functionalities/functionalitiesSlice";
+
+// `combineSlices` automatically combines the reducers using
+// their `reducerPath`s, therefore we no longer need to call `combineReducers`.
+const rootReducer = combineSlices(
+  activityDataSlice,
+  themingSlice,
+  layoutSlice,
+  navbarSlice,
+  saverSlice,
+  functionalitiesSlice,
+);
+// Infer the `RootState` type from the root reducer
+export type RootState = ReturnType<typeof rootReducer>;
+
+// The store setup is wrapped in `makeStore` to allow reuse
+// when setting up tests that need the same store config
+export const makeStore = (preloadedState?: Partial<RootState>) => {
+  const store = configureStore({
+    reducer: rootReducer,
+    preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        serializableCheck: false
+      }),
+  });
+  // configure listeners using the provided defaults
+  // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors
+  setupListeners(store.dispatch);
+  return store;
+};
+
+export const store = makeStore();
+
+// Infer the type of `store`
+export type AppStore = typeof store;
+// Infer the `AppDispatch` type from the store itself
+export type AppDispatch = AppStore["dispatch"];
+export type AppThunk<ThunkReturnType = void> = ThunkAction<
+  ThunkReturnType,
+  RootState,
+  unknown,
+  Action
+>;

package/src/app.module.scss

@@ -1,80 +1,80 @@
-.app {
-  height: 100%;
-  height: 100dvh;
-  display: grid;
-  grid-template-rows: auto 1fr;
-}
-
-.navbarContainer {
-  min-width: 0;
-}
-
-.appPedagoSplitter {
-  height: 100%;
-  border: none;
-  border-radius: 0;
-  overflow-y: hidden;
-  & > * {
-    overflow-y: hidden;
-  }
-  .pedagoContainer[data-show-pedago="false"] & {
-    & > :first-child {
-      display: none;
-    }
-    & > :nth-child(2) {
-      display: none;
-    }
-  }
-}
-
-.pedagoPanel {
-  width: 100%;
-  height: 100%;
-  overflow-y: hidden;
-}
-
-.contentPanel {
-  height: 100%;
-  background-color: var(--surface-a);
-}
-
-.pedagoContainer {
-  overflow-y: hidden;
-  display: grid;
-  :global(.layout-horizontal) & {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1.2rem 1fr;
-  }
-  :global(.layout-vertical) & {
-    grid-template-rows: 1fr;
-    grid-template-columns: 1.2rem 1fr;
-  }
-  &[data-show-pedago="true"] {
-    display: block;
-  }
-}
-
-.hiddenPedago {
-  background-color: var(--surface-200);
-  .pedagoContainer[data-show-pedago="true"] & {
-    display: none;
-  }
-}
-
-.hiddenPedagoButton {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  & > i {
-    font-size: 1rem;
-  }
-  &:hover {
-    background-color: rgba(128, 128, 128, 0.05);
-  }
-  &:active {
-    background-color: rgba(128, 128, 128, 0.2);
-  }
-}
+.app {
+  height: 100%;
+  height: 100dvh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.navbarContainer {
+  min-width: 0;
+}
+
+.appPedagoSplitter {
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  overflow-y: hidden;
+  & > * {
+    overflow-y: hidden;
+  }
+  .pedagoContainer[data-show-pedago="false"] & {
+    & > :first-child {
+      display: none;
+    }
+    & > :nth-child(2) {
+      display: none;
+    }
+  }
+}
+
+.pedagoPanel {
+  width: 100%;
+  height: 100%;
+  overflow-y: hidden;
+}
+
+.contentPanel {
+  height: 100%;
+  background-color: var(--surface-a);
+}
+
+.pedagoContainer {
+  overflow-y: hidden;
+  display: grid;
+  :global(.layout-horizontal) & {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1.2rem 1fr;
+  }
+  :global(.layout-vertical) & {
+    grid-template-rows: 1fr;
+    grid-template-columns: 1.2rem 1fr;
+  }
+  &[data-show-pedago="true"] {
+    display: block;
+  }
+}
+
+.hiddenPedago {
+  background-color: var(--surface-200);
+  .pedagoContainer[data-show-pedago="true"] & {
+    display: none;
+  }
+}
+
+.hiddenPedagoButton {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  & > i {
+    font-size: 1rem;
+  }
+  &:hover {
+    background-color: rgba(128, 128, 128, 0.05);
+  }
+  &:active {
+    background-color: rgba(128, 128, 128, 0.2);
+  }
+}