@capytale/meta-player 0.0.2 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +24,6 @@
     "react-dom": "^18.2.0",
     "react-html-props": "^2.0.9",
     "react-redux": "^9.1.0",
-    "react-reverse-portal": "^2.1.2",
     "screenfull": "^6.0.2"
   },
   "devDependencies": {

package/src/App.tsx

@@ -13,7 +13,7 @@ import {
   selectOrientation,
   toggleIsPedagoVisible,
 } from "./features/layout/layoutSlice";
-import { FC, PropsWithChildren, useMemo } from "react";
+import { FC, PropsWithChildren } from "react";
 import { Tooltip } from "primereact/tooltip";
 import {
   selectHasGradingOrComments,
@@ -23,8 +23,6 @@ import {
 import settings from "./settings";
 import ReviewNavbar from "./features/navbar/ReviewNavbar";
 
-import * as portals from "react-reverse-portal";
-
 type AppProps = PropsWithChildren<{}>;
 
 const App: FC<AppProps> = (props) => {
@@ -36,8 +34,7 @@ const App: FC<AppProps> = (props) => {
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
   const hasPedago = hasInstructions || hasGradingOrComments;
   const dispatch = useAppDispatch();
-
-  const portalNode = useMemo(() => portals.createHtmlPortalNode(), []);
+  const showPedago = hasPedago && isPedagoVisible;
 
   return (
     <div
@@ -47,78 +44,69 @@ const App: FC<AppProps> = (props) => {
         isHorizontal ? "layout-horizontal" : "layout-vertical",
       )}
     >
-      <portals.InPortal node={portalNode}>
-        <div id="meta-player-content">{props.children}</div>
-      </portals.InPortal>
       <div>
         <Navbar />
         {mode === "review" && <ReviewNavbar />}
       </div>
-      {hasPedago && isPedagoVisible && (
-        <Splitter
-          className={styles.appPedagoSplitter}
-          layout={isHorizontal ? "vertical" : "horizontal"}
+      <div className={styles.pedagoContainer} data-show-pedago={showPedago}>
+        <div
+          className={classNames(
+            styles.hiddenPedago,
+            hasPedago ? null : styles.noPedago,
+          )}
         >
-          <SplitterPanel minSize={15} size={30} className={styles.pedagoPanel}>
-            <Pedago key="pedago" />
-          </SplitterPanel>
-          <SplitterPanel minSize={40} size={70}>
-            <portals.OutPortal node={portalNode} />
-          </SplitterPanel>
-        </Splitter>
-      )}
-      {(!hasPedago || !isPedagoVisible) && (
-        <div className={styles.hiddenPedagoContainer}>
           <div
             className={classNames(
-              styles.hiddenPedago,
-              hasPedago ? null : styles.noPedago,
+              styles.hiddenPedagoButton,
+              hasPedago ? "p-ripple" : null,
             )}
+            onClick={
+              hasPedago ? () => dispatch(toggleIsPedagoVisible()) : undefined
+            }
+            data-pr-tooltip={
+              hasPedago
+                ? "Afficher les consignes"
+                : "Pas de consignes ni de note"
+            }
+            aria-label={
+              hasPedago
+                ? "Afficher les consignes"
+                : "Pas de consignes ni de note"
+            }
+            role={hasPedago ? "button" : "note"}
           >
-            <div
+            <i
               className={classNames(
-                styles.hiddenPedagoButton,
-                hasPedago ? "p-ripple" : null,
-              )}
-              onClick={
-                hasPedago ? () => dispatch(toggleIsPedagoVisible()) : undefined
-              }
-              data-pr-tooltip={
-                hasPedago
-                  ? "Afficher les consignes"
-                  : "Pas de consignes ni de note"
-              }
-              aria-label={
+                "pi",
                 hasPedago
-                  ? "Afficher les consignes"
-                  : "Pas de consignes ni de note"
-              }
-              role={hasPedago ? "button" : "note"}
-            >
-              <i
-                className={classNames(
-                  "pi",
-                  hasPedago
-                    ? isHorizontal
-                      ? "pi-angle-double-down"
-                      : "pi-angle-double-right"
-                    : "pi-minus-circle",
-                )}
-              />
-              <Ripple />
-            </div>
-            <Tooltip
-              target={"." + styles.hiddenPedagoButton}
-              showDelay={settings.TOOLTIP_SHOW_DELAY}
-              position={isHorizontal ? "bottom" : "right"}
-              mouseTrack={!isHorizontal}
+                  ? isHorizontal
+                    ? "pi-angle-double-down"
+                    : "pi-angle-double-right"
+                  : "pi-minus-circle",
+              )}
             />
+            <Ripple />
           </div>
-          <div className={styles.hiddenPedagoContent}>
-            <portals.OutPortal node={portalNode} />
-          </div>
+          <Tooltip
+            target={"." + styles.hiddenPedagoButton}
+            showDelay={settings.TOOLTIP_SHOW_DELAY}
+            position={isHorizontal ? "bottom" : "right"}
+            mouseTrack={!isHorizontal}
+          />
         </div>
-      )}
+        <Splitter
+          className={styles.appPedagoSplitter}
+          layout={isHorizontal ? "vertical" : "horizontal"}
+        >
+          <SplitterPanel minSize={15} size={30} className={styles.pedagoPanel}>
+            <Pedago key="pedago" />
+          </SplitterPanel>
+          <SplitterPanel minSize={40} size={70}>
+            <div id="meta-player-content-cover"></div>
+            <div id="meta-player-content">{props.children}</div>
+          </SplitterPanel>
+        </Splitter>
+      </div>
     </div>
   );
 };

package/src/MetaPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useMemo } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { Provider } from "react-redux";
 
@@ -12,30 +12,19 @@ import ThemeSwitcher from "./features/theming/ThemeSwitcher";
 import { ActivityJSProvider } from "./features/activityJS/ActivityJSProvider";
 import { LoadOptions } from "./features/activityJS/hooks";
 import { ErrorBoundary } from "./utils/ErrorBoundary";
-import {
-  MetaPlayerOptions,
-  defaultMetaPlayerOptions,
-} from "./features/activityData/metaPlayerOptions";
-import OptionSetter from "./features/activityData/OptionSetter";
 import Saver from "./features/activityJS/Saver";
 
 type MetaPlayerProps = PropsWithChildren<{
   activityJSOptions?: LoadOptions;
-  options?: Partial<MetaPlayerOptions>;
 }>;
 
 const MetaPlayer: React.FC<MetaPlayerProps> = (props) => {
   const primeSettings: Partial<APIOptions> = {
     ripple: true,
   };
-  const options = useMemo(
-    () => ({ ...defaultMetaPlayerOptions, ...props.options }),
-    [props.options],
-  );
   return (
     <PrimeReactProvider value={primeSettings}>
       <Provider store={store}>
-        <OptionSetter options={options} />
         <ThemeSwitcher />
         <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
           <ActivityJSProvider options={props.activityJSOptions}>

package/src/app/store.ts

@@ -6,6 +6,7 @@ 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 { activitySettingsSlice } from "../features/activitySettings/activitySettingsSlice";
 
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
@@ -15,6 +16,7 @@ const rootReducer = combineSlices(
   layoutSlice,
   navbarSlice,
   saverSlice,
+  activitySettingsSlice,
 );
 // Infer the `RootState` type from the root reducer
 export type RootState = ReturnType<typeof rootReducer>;

package/src/app.module.scss

@@ -9,6 +9,14 @@
   border: none;
   border-radius: 0;
   overflow-y: hidden;
+  .pedagoContainer[data-show-pedago="false"] & {
+    & > :first-child {
+      display: none;
+    }
+    & > :nth-child(2) {
+      display: none;
+    }
+  }
 }
 
 .pedagoPanel {
@@ -17,7 +25,8 @@
   overflow-y: hidden;
 }
 
-.hiddenPedagoContainer {
+.pedagoContainer {
+  overflow-y: hidden;
   display: grid;
   :global(.layout-horizontal) & {
     grid-template-columns: 1fr;
@@ -27,10 +36,16 @@
     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 {
@@ -50,7 +65,3 @@
     background-color: rgba(128, 128, 128, 0.2);
   }
 }
-
-.hiddenPedagoContent {
-  background-color: var(--surface-a);
-}

package/src/demo.tsx

@@ -6,6 +6,7 @@ import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActio
 import { ActivitySidebarActionsSetter } from "./features/navbar/ActivitySidebarActions";
 // import { useActivityJS } from "./features/activityJS/ActivityJSProvider";
 import BeforeSaveAction from "./features/activityJS/BeforeSaveAction";
+import MetaPlayerOptionsSetter from "./features/activityData/MetaPlayerOptionsSetter";
 
 const DemoActivity: FC = () => {
   // const activityJs = useActivityJS();
@@ -62,14 +63,15 @@ if (container) {
 
   root.render(
     <React.StrictMode>
-      <MetaPlayer
-        options={{
-          hasInstructions: true,
-          pedagoLayout: "default-horizontal",
-          supportsLightTheme: true,
-          supportsDarkTheme: true,
-        }}
-      >
+      <MetaPlayer>
+        <MetaPlayerOptionsSetter
+          options={{
+            hasInstructions: true,
+            pedagoLayout: "default-horizontal",
+            supportsLightTheme: true,
+            supportsDarkTheme: true,
+          }}
+        />
         <DemoActivity />
       </MetaPlayer>
     </React.StrictMode>,

package/src/external/prime.ts

@@ -0,0 +1,5 @@
+import { Toast } from "primereact/toast";
+import type { ToastMessage } from "primereact/toast";
+
+export { Toast };
+export type { ToastMessage };

package/src/features/activityData/IsDirtySetter.tsx

@@ -14,10 +14,4 @@ const IsDirtySetter: FC<IsDirtySetterProps> = (props) => {
   return null;
 };
 
-const notifyIsDirty = (isDirty: boolean = true) => {
-  const dispatch = useAppDispatch();
-  dispatch(setIsPlayerDirty(isDirty));
-};
-
 export default IsDirtySetter;
-export { notifyIsDirty };

package/src/features/activityData/MetaPlayerOptionsSetter.tsx

@@ -0,0 +1,41 @@
+import { FC, useEffect } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { setPlayerSettings } from "./activityDataSlice";
+import { setLayout } from "../layout/layoutSlice";
+import { setAutoSwitch, switchToTheme } from "../theming/themingSlice";
+import {
+  defaultMetaPlayerOptions,
+  MetaPlayerOptions,
+} from "./metaPlayerOptions";
+
+type MetaPlayerOptionsSetterProps = {
+  options: Partial<MetaPlayerOptions>;
+};
+
+const MetaPlayerOptionsSetter: FC<MetaPlayerOptionsSetterProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const options = { ...defaultMetaPlayerOptions, ...props.options };
+    if (!options.supportsLightTheme && !options.supportsDarkTheme) {
+      throw new Error("At least one theme must be supported");
+    }
+    dispatch(setPlayerSettings(options));
+    dispatch(
+      setLayout(
+        options.pedagoLayout === "horizontal" ||
+          options.pedagoLayout === "default-horizontal"
+          ? "horizontal"
+          : "vertical",
+      ),
+    );
+    if (options.supportsDarkTheme && options.supportsLightTheme) {
+      dispatch(setAutoSwitch(true));
+    } else {
+      dispatch(setAutoSwitch(false));
+      dispatch(switchToTheme(options.supportsLightTheme ? "light" : "dark"));
+    }
+  }, [dispatch, props.options]);
+  return null;
+};
+
+export default MetaPlayerOptionsSetter;

package/src/features/activityData/hooks.ts

@@ -0,0 +1,9 @@
+import { useAppDispatch } from "../../app/hooks";
+import { setIsPlayerDirty } from "./activityDataSlice";
+
+const useNotifyIsDirty = (isDirty: boolean = true) => {
+  const dispatch = useAppDispatch();
+  return () => dispatch(setIsPlayerDirty(isDirty));
+};
+
+export { useNotifyIsDirty };

package/src/features/activityJS/Saver.tsx

@@ -89,7 +89,6 @@ const Saver: FC<{}> = () => {
       activityJs.activitySession.mode === "assignment" ||
       activityJs.activitySession.mode === "review"
     ) {
-      console.log("Workflow:", workflow);
       ab.assignmentNode!.workflow = workflow!;
     }
     try {

package/src/features/activitySettings/ActivitySettingsSetter.tsx

@@ -0,0 +1,26 @@
+import { FC, useEffect, useRef } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { ActivitySettings } from "./types";
+import { setSettings } from "./activitySettingsSlice";
+import { deepEqual } from "../../utils/equality";
+
+type ActivitySettingsSetterProps = {
+  settings: ActivitySettings;
+};
+
+const ActivitySettingsSetter: FC<ActivitySettingsSetterProps> = ({
+  settings,
+}) => {
+  const oldSettings = useRef<ActivitySettings | null>(null);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    if (deepEqual(oldSettings.current, settings)) {
+      return;
+    }
+    oldSettings.current = settings;
+    dispatch(setSettings(settings));
+  }, [dispatch, settings]);
+  return null;
+};
+
+export default ActivitySettingsSetter;

package/src/features/activitySettings/activitySettingsSlice.ts

@@ -0,0 +1,43 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+import { ActivitySettings } from "./types";
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const activitySettingsSlice = createAppSlice({
+  name: "activitySettings",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState: {
+    settings: undefined as ActivitySettings | undefined,
+  },
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    setSettings: create.reducer(
+      (state, action: PayloadAction<ActivitySettings | undefined>) => {
+        state.settings = action.payload;
+      },
+    ),
+    updateSettings: create.reducer(
+      (
+        state,
+        action: PayloadAction<
+          (
+            oldSettings: ActivitySettings | undefined,
+          ) => ActivitySettings | undefined
+        >,
+      ) => {
+        state.settings = action.payload(state.settings);
+      },
+    ),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectSettings: (data) => data.settings,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const { setSettings, updateSettings } = activitySettingsSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const { selectSettings } = activitySettingsSlice.selectors;

package/src/features/activitySettings/hooks.ts

@@ -0,0 +1,6 @@
+import { useAppSelector } from "../../app/hooks";
+import { selectSettings } from "./activitySettingsSlice";
+
+export const useActivitySettings = () => {
+  return useAppSelector(selectSettings);
+};

package/src/features/activitySettings/index.tsx

@@ -0,0 +1,32 @@
+import { Fieldset } from "primereact/fieldset";
+import { useActivitySettings } from "./hooks";
+import {
+  ActivitySettingsFormDisplay,
+  ActivitySettingsOptionsDisplay,
+} from "./ui";
+
+type ActivitySettingsDisplayProps = {};
+
+export function ActivitySettingsDisplay({}: ActivitySettingsDisplayProps) {
+  const settings = useActivitySettings();
+  if (!settings) return null;
+  return (
+    <div>
+      {Object.keys(settings).map((id) => {
+        const section = settings[id];
+        return (
+          <Fieldset key={id} legend={section.title} className="sidebarFieldset">
+            {section.type === "form" ? (
+              <ActivitySettingsFormDisplay form={section} sectionId={id} />
+            ) : (
+              <ActivitySettingsOptionsDisplay
+                options={section}
+                sectionId={id}
+              />
+            )}
+          </Fieldset>
+        );
+      })}
+    </div>
+  );
+}

package/src/features/activitySettings/style.module.scss

@@ -0,0 +1,4 @@
+.formLabel {
+}
+.formGroup {
+}

package/src/features/activitySettings/types.ts

@@ -0,0 +1,88 @@
+export type ActivitySettingsSelect = {
+  type: "select";
+  options: {
+    label: string;
+    name: string;
+  }[];
+  selectedOptionName: string;
+};
+
+export type ActivitySettingsRange = {
+  type: "range";
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+};
+
+export type ActivitySettingsTextArea = {
+  type: "textarea";
+  value: string;
+};
+
+export type ActivitySettingsOption = {
+  type: "checkbox" | "switch";
+  value: boolean;
+};
+
+export type ActivitySettingsInput = {
+  type: "input";
+  inputType:
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "month"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week";
+  value: string | number;
+};
+
+export type ActivitySettingsFormSection = {
+  type: "form";
+  fields: {
+    [name: string]: (
+      | ActivitySettingsRange
+      | ActivitySettingsInput
+      | ActivitySettingsTextArea
+      | ActivitySettingsOption
+      | ActivitySettingsSelect
+    ) & {
+      label: string;
+    };
+  };
+};
+
+export type ActivitySettingsMultipleOptionsSection = {
+  type: "checkboxes" | "switches";
+  options: {
+    label: string;
+    name: string;
+  }[];
+  selectedOptionNames: string[];
+};
+
+export type ActivitySettingsRadioOptionsSection = {
+  type: "radio";
+  options: {
+    label: string;
+    name: string;
+  }[];
+  selectedOptionName: string | null;
+};
+
+export type ActivitySettingsSection = (
+  | ActivitySettingsMultipleOptionsSection
+  | ActivitySettingsRadioOptionsSection
+  | ActivitySettingsFormSection
+) & {
+  title: string;
+};
+
+export type ActivitySettings = { [id: string]: ActivitySettingsSection };

package/src/features/activitySettings/ui.tsx

@@ -0,0 +1,393 @@
+import type {
+  ActivitySettings,
+  ActivitySettingsFormSection,
+  ActivitySettingsMultipleOptionsSection,
+  ActivitySettingsRadioOptionsSection,
+} from "./types";
+
+import styles from "./style.module.scss";
+import { Slider } from "primereact/slider";
+import { InputNumber } from "primereact/inputnumber";
+import { InputText } from "primereact/inputtext";
+import { ColorPicker } from "primereact/colorpicker";
+import { InputTextarea } from "primereact/inputtextarea";
+import { Checkbox } from "primereact/checkbox";
+import { InputSwitch } from "primereact/inputswitch";
+import { Dropdown } from "primereact/dropdown";
+import React from "react";
+import { RadioButton } from "primereact/radiobutton";
+import { useAppDispatch } from "../../app/hooks";
+import { updateSettings } from "./activitySettingsSlice";
+
+type ActivitySettingsFormDisplayProps = {
+  form: ActivitySettingsFormSection;
+  sectionId: string;
+};
+
+export function ActivitySettingsFormDisplay({
+  form,
+  sectionId,
+}: ActivitySettingsFormDisplayProps) {
+  const dispatch = useAppDispatch();
+  const selectOnChange = (fieldName: string, value: string) => {
+    dispatch(
+      updateSettings((oldSettings: ActivitySettings | undefined) => {
+        if (!oldSettings) {
+          return undefined;
+        }
+        const oldSection = oldSettings[
+          sectionId
+        ] as ActivitySettingsFormSection;
+        const newSettings = {
+          ...oldSettings,
+          [sectionId]: {
+            ...oldSection,
+            type: "form",
+            fields: {
+              ...oldSection.fields,
+              [fieldName]: {
+                ...oldSection.fields[fieldName],
+                selectedOptionName: value,
+              },
+            },
+          },
+        };
+        return newSettings as ActivitySettings;
+      }),
+    );
+  };
+  const onChange = (fieldName: string, value: string | number | boolean) => {
+    dispatch(
+      updateSettings((oldSettings: ActivitySettings | undefined) => {
+        if (!oldSettings) {
+          return undefined;
+        }
+        const oldSection = oldSettings[
+          sectionId
+        ] as ActivitySettingsFormSection;
+        const newSettings = {
+          ...oldSettings,
+          [sectionId]: {
+            ...oldSection,
+            type: "form",
+            fields: {
+              ...oldSection.fields,
+              [fieldName]: {
+                ...oldSection.fields[fieldName],
+                value,
+              },
+            },
+          },
+        };
+        return newSettings as ActivitySettings;
+      }),
+    );
+  };
+  return (
+    <div className="mb-3">
+      {Object.keys(form.fields).map((name, _) => {
+        const field = form.fields[name];
+        switch (field.type) {
+          case "range":
+            return (
+              <div className={styles.formGroup}>
+                <label
+                  className={styles.formLabel}
+                  htmlFor={sectionId + "-" + name}
+                >
+                  Range
+                </label>
+                <InputNumber
+                  min={field.min}
+                  max={field.max}
+                  step={field.step}
+                  value={field.value}
+                  onChange={(e) => onChange(name, e.value as number)}
+                />
+                <Slider
+                  id={sectionId + "-" + name}
+                  min={field.min}
+                  max={field.max}
+                  step={field.step}
+                  value={field.value}
+                  onChange={(e) => onChange(name, e.value as number)}
+                />
+              </div>
+            );
+          case "input":
+            return (
+              <div className={styles.formGroup}>
+                <label
+                  className={styles.formLabel}
+                  htmlFor={sectionId + "-" + name}
+                >
+                  {field.label}
+                </label>
+                {field.inputType === "text" && (
+                  <InputText
+                    id={sectionId + "-" + name}
+                    value={field.value as string}
+                    onChange={(e) => onChange(name, e.target.value)}
+                  />
+                )}
+                {field.inputType === "number" && (
+                  <InputNumber
+                    inputId={sectionId + "-" + name}
+                    value={field.value as number}
+                    onChange={(e) => e.value != null && onChange(name, e.value)}
+                  />
+                )}
+                {field.inputType === "color" && (
+                  <ColorPicker
+                    inputId={sectionId + "-" + name}
+                    value={field.value as string}
+                    onChange={(e) =>
+                      e.value && onChange(name, e.value as string)
+                    }
+                  />
+                )}
+                {field.inputType !== "color" &&
+                  field.inputType !== "number" &&
+                  field.inputType !== "text" && (
+                    <p>Type d'input {field.inputType} pas implémenté.</p>
+                  )}
+              </div>
+            );
+          case "textarea":
+            return (
+              <div className={styles.formGroup}>
+                <label
+                  className={styles.formLabel}
+                  htmlFor={sectionId + "-" + name}
+                >
+                  {field.label}
+                </label>
+                <InputTextarea
+                  id={sectionId + "-" + name}
+                  value={field.value}
+                  onChange={(e) => onChange(name, e.target.value)}
+                />
+              </div>
+            );
+          case "checkbox":
+            return (
+              <CheckboxGroup
+                inputId={sectionId + "-" + name}
+                checked={field.value}
+                onChange={(value) => onChange(name, value)}
+                label={field.label}
+              />
+            );
+          case "switch":
+            return (
+              <SwitchGroup
+                inputId={sectionId + "-" + name}
+                checked={field.value}
+                onChange={(value) => onChange(name, value)}
+                label={field.label}
+              />
+            );
+          case "select":
+            return (
+              <div className={styles.formGroup}>
+                <label
+                  className={styles.formLabel}
+                  htmlFor={sectionId + "-" + name}
+                >
+                  {field.label}
+                </label>
+                <Dropdown
+                  inputId={sectionId + "-" + name}
+                  value={field.selectedOptionName}
+                  onChange={(e) => selectOnChange(name, e.value)}
+                  options={field.options}
+                  optionLabel="label"
+                  optionValue="name"
+                />
+              </div>
+            );
+        }
+      })}
+    </div>
+  );
+}
+
+type ActivitySettingsOptionsDisplayProps = {
+  options:
+    | ActivitySettingsMultipleOptionsSection
+    | ActivitySettingsRadioOptionsSection;
+  sectionId: string;
+};
+
+export function ActivitySettingsOptionsDisplay({
+  options,
+  sectionId,
+}: ActivitySettingsOptionsDisplayProps) {
+  return (
+    <div>
+      {options.type === "radio" ? (
+        <ActivitySettingsRadioDisplay options={options} sectionId={sectionId} />
+      ) : (
+        <ActivitySettingsCheckboxesDisplay
+          options={options}
+          sectionId={sectionId}
+        />
+      )}
+    </div>
+  );
+}
+
+type ActivitySettingsCheckboxesDisplayProps = {
+  options: ActivitySettingsMultipleOptionsSection;
+  sectionId: string;
+};
+
+function ActivitySettingsCheckboxesDisplay({
+  options,
+  sectionId,
+}: ActivitySettingsCheckboxesDisplayProps) {
+  const dispatch = useAppDispatch();
+  const onChange = (optionName: string, checked: boolean) => {
+    dispatch(
+      updateSettings((oldSettings: ActivitySettings | undefined) => {
+        if (!oldSettings) {
+          return undefined;
+        }
+        const oldSection = oldSettings[
+          sectionId
+        ] as ActivitySettingsMultipleOptionsSection;
+        const newSettings = {
+          ...oldSettings,
+          [sectionId]: {
+            ...oldSection,
+            selectedOptionNames: checked
+              ? [...oldSection.selectedOptionNames, optionName]
+              : oldSection.selectedOptionNames.filter((n) => n !== optionName),
+          },
+        };
+        return newSettings as ActivitySettings;
+      }),
+    );
+  };
+  return (
+    <div className="sidebarRadioButtons">
+      {options.options.map((option) => (
+        <CheckboxGroup
+          key={option.name}
+          inputId={sectionId + "-" + option.name}
+          checked={options.selectedOptionNames.includes(option.name)}
+          onChange={(value) => onChange(option.name, value)}
+          label={option.label}
+        />
+      ))}
+    </div>
+  );
+}
+
+type ActivitySettingsRadioDisplayProps = {
+  options: ActivitySettingsRadioOptionsSection;
+  sectionId: string;
+};
+
+function ActivitySettingsRadioDisplay({
+  options,
+  sectionId,
+}: ActivitySettingsRadioDisplayProps) {
+  const dispatch = useAppDispatch();
+  const onChange = (optionName: string, checked: boolean) => {
+    if (!checked) {
+      return;
+    }
+    dispatch(
+      updateSettings((oldSettings: ActivitySettings | undefined) => {
+        if (!oldSettings) {
+          return undefined;
+        }
+        const oldSection = oldSettings[
+          sectionId
+        ] as ActivitySettingsRadioOptionsSection;
+        const newSettings = {
+          ...oldSettings,
+          [sectionId]: {
+            ...oldSection,
+            selectedOptionName: checked ? optionName : null,
+          },
+        };
+        return newSettings as ActivitySettings;
+      }),
+    );
+  };
+  return (
+    <div className="sidebarRadioButtons">
+      {options.options.map((option) => (
+        <RadioGroup
+          key={option.name}
+          inputId={sectionId + "-" + option.name}
+          checked={options.selectedOptionName === option.name}
+          onChange={(value) => {
+            onChange(option.name, value);
+          }}
+          label={option.label}
+        />
+      ))}
+    </div>
+  );
+}
+
+type CheckboxGroupProps = {
+  inputId: string;
+  label: string;
+  checked: boolean;
+  onChange?: (value: boolean) => void;
+};
+
+const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
+  return (
+    <div className="sidebarRadioGroup">
+      <Checkbox
+        inputId={props.inputId}
+        checked={props.checked}
+        onChange={(e) =>
+          props.onChange && e.checked != null && props.onChange(e.checked)
+        }
+      />
+      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
+        {props.label}
+      </label>
+    </div>
+  );
+};
+
+const RadioGroup: React.FC<CheckboxGroupProps> = (props) => {
+  return (
+    <div className="sidebarRadioGroup">
+      <RadioButton
+        inputId={props.inputId}
+        checked={props.checked}
+        onChange={(e) => {
+          props.onChange && e.checked != null && props.onChange(e.checked);
+        }}
+      />
+      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
+        {props.label}
+      </label>
+    </div>
+  );
+};
+
+const SwitchGroup: React.FC<CheckboxGroupProps> = (props) => {
+  return (
+    <div className="sidebarRadioGroup">
+      <InputSwitch
+        inputId={props.inputId}
+        checked={props.checked}
+        onChange={(e) =>
+          props.onChange && e.checked != null && props.onChange(e.checked)
+        }
+      />
+      <label className={styles.checkboxLabel} htmlFor={props.inputId}>
+        {props.label}
+      </label>
+    </div>
+  );
+};

package/src/features/navbar/CapytaleMenu.tsx

@@ -110,7 +110,6 @@ const CapytaleMenu: React.FC = () => {
           label="Rendre"
           icon="pi pi-envelope"
           onClick={() => {
-            console.log("Hey");
             confirmFinishAssignment();
           }}
         />

package/src/features/navbar/GradingNav.tsx

@@ -19,7 +19,6 @@ const GradingNav: React.FC = () => {
   const nid = useAppSelector(selectNid) as number;
   const mode = useAppSelector(selectMode);
   const activityNid = useAppSelector(selectActivityNid) as number;
-  console.log("Le nid est : ", nid);
   useEffect(() => {
     evalApi.listSa(activityNid).then((j) => {
       setStudentList(j);

package/src/features/navbar/SidebarContent.tsx

@@ -19,6 +19,7 @@ import {
   selectCanChoosePedagoLayout,
   selectCanChooseTheme,
 } from "../activityData/activityDataSlice";
+import { ActivitySettingsDisplay } from "../activitySettings";
 
 const SidebarContent: FC = () => {
   const canChooseOrientation = useAppSelector(selectCanChoosePedagoLayout);
@@ -33,7 +34,7 @@ const SidebarContent: FC = () => {
         <Fieldset
           legend="Actions"
           className={classNames(
-            styles.sidebarFieldset,
+            "sidebarFieldset",
             styles.sidebarFieldsetButtons,
           )}
         >
@@ -41,9 +42,9 @@ const SidebarContent: FC = () => {
         </Fieldset>
       )}
       {canChooseOrientation && (
-        <Fieldset legend="Disposition" className={styles.sidebarFieldset}>
-          <div className={styles.sidebarRadioButtons}>
-            <div className={styles.sidebarRadioGroup}>
+        <Fieldset legend="Disposition" className="sidebarFieldset">
+          <div className="sidebarRadioButtons">
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-horizontal"
                 name="horizontal"
@@ -55,7 +56,7 @@ const SidebarContent: FC = () => {
                 Horizontale
               </label>
             </div>
-            <div className={styles.sidebarRadioGroup}>
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-vertical"
                 name="vertical"
@@ -71,9 +72,9 @@ const SidebarContent: FC = () => {
         </Fieldset>
       )}
       {canChooseTheme && (
-        <Fieldset legend="Thème" className={styles.sidebarFieldset}>
-          <div className={styles.sidebarRadioButtons}>
-            <div className={styles.sidebarRadioGroup}>
+        <Fieldset legend="Thème" className="sidebarFieldset">
+          <div className="sidebarRadioButtons">
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-light"
                 name="light"
@@ -88,7 +89,7 @@ const SidebarContent: FC = () => {
                 Clair
               </label>
             </div>
-            <div className={styles.sidebarRadioGroup}>
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-dark"
                 name="dark"
@@ -103,7 +104,7 @@ const SidebarContent: FC = () => {
                 Sombre
               </label>
             </div>
-            <div className={styles.sidebarRadioGroup}>
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-auto"
                 name="auto"
@@ -118,6 +119,7 @@ const SidebarContent: FC = () => {
           </div>
         </Fieldset>
       )}
+      <ActivitySettingsDisplay />
     </>
   );
 };

package/src/features/navbar/style.module.scss

@@ -139,24 +139,8 @@
   align-items: center;
 }
 
-.sidebarFieldset {
-  margin-bottom: 8px;
-}
-
 .sidebarFieldsetButtons :global(.p-fieldset-content) {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-
-.sidebarRadioButtons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.sidebarRadioGroup {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}

package/src/features/pedago/index.tsx

@@ -48,7 +48,6 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   ) => {
     dispatch(setComments(event.target.value));
     dispatch(setIsMPDirty(true));
-    console.log("51");
   };
 
   const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
@@ -56,7 +55,6 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   ) => {
     dispatch(setGrading(event.target.value));
     dispatch(setIsMPDirty(true));
-    console.log("59");
   };
 
   return (

package/src/index.css

@@ -33,7 +33,45 @@ body,
   color-scheme: light;
 }
 
+.p-splitter-panel:has(> #meta-player-content-cover) {
+  position: relative;
+}
+
+#meta-player-content-cover {
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0);
+  .p-splitter-resizing & {
+    display: block;
+  }
+}
+
 #meta-player-content,
 :has(> #meta-player-content) {
   height: 100%;
+  background-color: var(--surface-a);
+}
+
+.sidebarFieldset {
+  margin-bottom: 8px;
+  & .p-button-label {
+    text-align: left;
+  }
+}
+
+.sidebarRadioButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebarRadioGroup {
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }

package/src/utils/equality.ts

@@ -0,0 +1,32 @@
+// https://medium.com/@stheodorejohn/javascript-object-deep-equality-comparison-in-javascript-7aa227e889d4
+
+export function deepEqual(obj1: any, obj2: any): boolean {
+  // Base case: If both objects are identical, return true.
+  if (obj1 === obj2) {
+    return true;
+  }
+  // Check if both objects are objects and not null.
+  if (
+    typeof obj1 !== "object" ||
+    typeof obj2 !== "object" ||
+    obj1 === null ||
+    obj2 === null
+  ) {
+    return false;
+  }
+  // Get the keys of both objects.
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  // Check if the number of keys is the same.
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  // Iterate through the keys and compare their values recursively.
+  for (const key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+  // If all checks pass, the objects are deep equal.
+  return true;
+}

package/src/features/activityData/OptionSetter.tsx

@@ -1,35 +0,0 @@
-import { FC } from "react";
-import { useAppDispatch } from "../../app/hooks";
-import { setPlayerSettings } from "./activityDataSlice";
-import { setLayout } from "../layout/layoutSlice";
-import { setAutoSwitch, switchToTheme } from "../theming/themingSlice";
-import { MetaPlayerOptions } from "./metaPlayerOptions";
-
-type OptionSetterProps = {
-  options: MetaPlayerOptions;
-};
-
-const OptionSetter: FC<OptionSetterProps> = ({ options }) => {
-  const dispatch = useAppDispatch();
-  if (!options.supportsLightTheme && !options.supportsDarkTheme) {
-    throw new Error("At least one theme must be supported");
-  }
-  dispatch(setPlayerSettings(options));
-  dispatch(
-    setLayout(
-      options.pedagoLayout === "horizontal" ||
-        options.pedagoLayout === "default-horizontal"
-        ? "horizontal"
-        : "vertical",
-    ),
-  );
-  if (options.supportsDarkTheme && options.supportsLightTheme) {
-    dispatch(setAutoSwitch(true));
-  } else {
-    dispatch(setAutoSwitch(false));
-    dispatch(switchToTheme(options.supportsLightTheme ? "light" : "dark"));
-  }
-  return null;
-};
-
-export default OptionSetter;