@capytale/meta-player 0.8.2 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -39,7 +39,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.1.4",
     "eslint": "^9.19.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
@@ -51,7 +51,7 @@
     "sass": "^1.75.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0"
+    "vite": "^7.3.1"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/App.tsx

@@ -9,16 +9,18 @@ import { selectThemeIsDark } from "./features/theming/themingSlice";
 import { Ripple } from "primereact/ripple";
 import { classNames } from "primereact/utils";
 import {
-  selectIsPedagoVisible,
-  selectOrientation,
   selectShowSaveForStudents,
-  toggleIsPedagoVisible,
+  setIsPedagoVisible,
 } from "./features/layout/layoutSlice";
-import { FC, KeyboardEvent, PropsWithChildren, useCallback } from "react";
+import {
+  FC,
+  KeyboardEvent,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+} from "react";
 import { Tooltip } from "primereact/tooltip";
 import {
-  selectHasGradingOrComments,
-  selectHasInstructions,
   selectIsDirty,
   selectMode,
   selectShowSaveButton,
@@ -27,20 +29,16 @@ import settings from "./settings";
 import ReviewNavbar from "./features/navbar/review-navbar";
 import { useSave } from "./features/activityData/hooks";
 import PreviewDialog from "./features/functionalities/PreviewDialog";
+import { usePedagoOptions } from "./features/pedago/hooks";
 
 type AppProps = PropsWithChildren<{}>;
 
 const App: FC<AppProps> = (props) => {
   const isDark = useAppSelector(selectThemeIsDark) as boolean;
   const mode = useAppSelector(selectMode);
-  const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
-  const isPedagoVisible = useAppSelector(selectIsPedagoVisible) as boolean;
-  const hasInstructions = useAppSelector(selectHasInstructions);
-  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
-  const hasPedago =
-    hasInstructions || hasGradingOrComments || mode === "review";
+  const { showPedago, hasPedago, isHorizontal } = usePedagoOptions();
+
   const dispatch = useAppDispatch();
-  const showPedago = hasPedago && isPedagoVisible;
   const isDirty = useAppSelector(selectIsDirty);
   const save = useSave();
 
@@ -65,6 +63,11 @@ const App: FC<AppProps> = (props) => {
       ? "Ce type d'activité n'accepte pas de consigne"
       : "Pas de consignes ni de note";
 
+  const togglePedago = useMemo(() => {
+    if (!hasPedago) return undefined;
+    return () => dispatch(setIsPedagoVisible(!showPedago));
+  }, [hasPedago, showPedago]);
+
   return (
     <div
       className={classNames(
@@ -90,9 +93,7 @@ const App: FC<AppProps> = (props) => {
               styles.hiddenPedagoButton,
               hasPedago ? "p-ripple" : null,
             )}
-            onClick={
-              hasPedago ? () => dispatch(toggleIsPedagoVisible()) : undefined
-            }
+            onClick={togglePedago}
             data-pr-tooltip={pedagoOpenLabel}
             aria-label={pedagoOpenLabel}
             role={hasPedago ? "button" : "note"}

package/src/demo.tsx

@@ -70,7 +70,7 @@ if (container) {
       <MetaPlayer>
         <MetaPlayerOptionsSetter
           options={{
-            hasInstructions: true,
+            showPedagoByDefault: true,
             pedagoLayout: "default-horizontal",
             supportsLightTheme: true,
             supportsDarkTheme: true,

package/src/features/activityData/activityDataSlice.ts

@@ -28,9 +28,6 @@ export const activityDataSlice = createAppSlice({
   initialState,
   // The `reducers` field lets us define reducers and generate associated actions
   reducers: (create) => ({
-    toRemove: create.reducer((state) => {
-      state.hasInstructions = false;
-    }),
     // Use the `PayloadAction` type to declare the contents of `action.payload`
     setActivityJSData: create.reducer(
       (state, action: PayloadAction<ActivityJSData>) => {
@@ -60,7 +57,7 @@ export const activityDataSlice = createAppSlice({
     ),
     setPlayerSettings: create.reducer(
       (state, action: PayloadAction<MetaPlayerOptions>) => {
-        state.hasInstructions = action.payload.hasInstructions;
+        state.showPedagoByDefault = action.payload.showPedagoByDefault;
         state.canReset = action.payload.canReset;
         state.pedagoLayout = action.payload.pedagoLayout;
         state.supportsLightTheme = action.payload.supportsLightTheme;
@@ -154,7 +151,7 @@ export const activityDataSlice = createAppSlice({
     selectSharedNotesType: (data) => data.sharedNotesType,
     selectComments: (data) => data.comments,
     selectGrading: (data) => data.grading,
-    selectHasInstructions: (data) => data.hasInstructions,
+    selectShowPedagoByDefault: (data) => data.showPedagoByDefault,
     selectCanReset: (data) => data.canReset,
     selectPedagoLayout: (data) => data.pedagoLayout,
     selectHasGradingOrComments: (data) => !!(data.grading || data.comments),
@@ -199,7 +196,6 @@ export const activityDataSlice = createAppSlice({
 
 // Action creators are generated for each case reducer function.
 export const {
-  toRemove,
   setActivityJSData,
   setPlayerSettings,
   setCanSaveInstructions,
@@ -230,7 +226,7 @@ export const {
   selectSharedNotesType,
   selectComments,
   selectGrading,
-  selectHasInstructions,
+  selectShowPedagoByDefault,
   selectCanReset,
   selectPedagoLayout,
   selectHasGradingOrComments,

package/src/features/activityData/metaPlayerOptions.ts

@@ -1,19 +1,19 @@
 export type MetaPlayerOptions = {
-  hasInstructions: boolean;
+  showPedagoByDefault: boolean;
   canReset: boolean;
   preventEditIfHasEvaluations: boolean;
   pedagoLayout:
-  | "horizontal"
-  | "vertical"
-  | "default-horizontal"
-  | "default-vertical";
+    | "horizontal"
+    | "vertical"
+    | "default-horizontal"
+    | "default-vertical";
   supportsLightTheme: boolean;
   supportsDarkTheme: boolean;
   hideSaveButton: boolean;
 };
 
 export const defaultMetaPlayerOptions: MetaPlayerOptions = {
-  hasInstructions: true,
+  showPedagoByDefault: true,
   canReset: true,
   preventEditIfHasEvaluations: false,
   pedagoLayout: "default-horizontal",

package/src/features/layout/layoutSlice.ts

@@ -7,7 +7,8 @@ export type PedagoTab = "instructions" | "sharedNotes" | "pdf";
 
 export interface LayoutState {
   orientation: Orientation;
-  isPedagoVisible: boolean;
+  /** true if open, false if closed, null if default (determined by mode and content of instructions) */
+  isPedagoVisible: boolean | null;
   isGradingVisible: boolean;
   pedagoTab: PedagoTab;
   showWorkflow: boolean;
@@ -16,7 +17,7 @@ export interface LayoutState {
 
 export const initialState: LayoutState = {
   orientation: "horizontal",
-  isPedagoVisible: true,
+  isPedagoVisible: null,
   isGradingVisible: true,
   pedagoTab: "instructions",
   showWorkflow: true,
@@ -42,9 +43,11 @@ export const layoutSlice = createAppSlice({
     setLayout: create.reducer((state, action: PayloadAction<Orientation>) => {
       state.orientation = action.payload;
     }),
-    toggleIsPedagoVisible: create.reducer((state) => {
-      state.isPedagoVisible = !state.isPedagoVisible;
-    }),
+    setIsPedagoVisible: create.reducer(
+      (state, action: PayloadAction<boolean | null>) => {
+        state.isPedagoVisible = action.payload;
+      },
+    ),
     setIsGradingVisible: create.reducer(
       (state, action: PayloadAction<boolean>) => {
         state.isGradingVisible = action.payload;
@@ -73,7 +76,7 @@ export const layoutSlice = createAppSlice({
 export const {
   toggleLayout,
   setLayout,
-  toggleIsPedagoVisible,
+  setIsPedagoVisible,
   setIsGradingVisible,
   toggleIsGradingVisible,
   setPedagoTab,

package/src/features/navbar/activity-menu/index.tsx

@@ -111,6 +111,7 @@ const ActivityMenu: React.FC = () => {
         visible={settingsSidebarVisible}
         position="right"
         onHide={() => setSettingsSidebarVisible(false)}
+        style={{ width: "24rem", maxWidth: "100%" }}
       >
         <SettingsSidebarContent
           showHelp={

package/src/features/pedago/PedagoCommands.tsx

@@ -15,7 +15,7 @@ import {
   selectPedagoTab,
   setPedagoTab,
   toggleIsGradingVisible,
-  toggleIsPedagoVisible,
+  setIsPedagoVisible,
 } from "../layout/layoutSlice";
 import styles from "./style.module.scss";
 import { Button } from "primereact/button";
@@ -49,7 +49,7 @@ export const CloseOnlyPedagoCommands: FC = () => {
           position: "left",
           showDelay: settings.TOOLTIP_SHOW_DELAY,
         }}
-        onClick={() => dispatch(toggleIsPedagoVisible())}
+        onClick={() => dispatch(setIsPedagoVisible(false))}
         style={{ flexShrink: 0 }}
       />
     </div>
@@ -96,7 +96,7 @@ const HorizontalPedagoCommands = () => {
             position: "left",
             showDelay: settings.TOOLTIP_SHOW_DELAY,
           }}
-          onClick={() => dispatch(toggleIsPedagoVisible())}
+          onClick={() => dispatch(setIsPedagoVisible(false))}
           style={{ flexShrink: 0 }}
         />
       </div>
@@ -250,7 +250,7 @@ const VerticalPedagoCommands = () => {
           position: "left",
           showDelay: settings.TOOLTIP_SHOW_DELAY,
         }}
-        onClick={() => dispatch(toggleIsPedagoVisible())}
+        onClick={() => dispatch(setIsPedagoVisible(false))}
         style={{ flexShrink: 0 }}
       />
     </div>

package/src/features/pedago/hooks.ts

@@ -0,0 +1,99 @@
+import { useMemo } from "react";
+import { useAppSelector } from "../../app/hooks";
+import {
+  selectHasGradingOrComments,
+  selectShowPedagoByDefault,
+  selectInstructions,
+  selectInstructionsType,
+  selectMode,
+} from "../activityData/activityDataSlice";
+import {
+  selectIsGradingVisible,
+  selectIsPedagoVisible,
+  selectOrientation,
+} from "../layout/layoutSlice";
+
+export const usePedagoOptions = () => {
+  const mode = useAppSelector(selectMode);
+  const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
+  const isPedagoVisible = useAppSelector(selectIsPedagoVisible);
+  const isGradingVisible = useAppSelector(selectIsGradingVisible);
+  const showPedagoByDefault = useAppSelector(selectShowPedagoByDefault);
+  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
+  const instructionsType = useAppSelector(selectInstructionsType);
+  const instructions = useAppSelector(selectInstructions);
+  const hasNonEmptyInstructions = useMemo(() => {
+    if (instructionsType === "none" || !instructions) {
+      return false;
+    }
+    if (instructions.format === "html") {
+      if (typeof instructions.value !== "string") {
+        console.warn("HTML instructions value is not a string");
+        return true;
+      }
+      return (
+        instructions.value.trim() !== "" &&
+        instructions.value.trim() !== "<p></p>"
+      );
+    } else if (instructions.format === "markdown") {
+      if (typeof instructions.value !== "string") {
+        console.warn("Markdown instructions value is not a string");
+        return true;
+      }
+      return instructions.value.trim() !== "";
+    } else if (instructions.format === "lexical") {
+      if (typeof instructions.value !== "string") {
+        console.warn("Lexical instructions value is not a string");
+        return true;
+      }
+      try {
+        const parsedInstructions = JSON.parse(instructions.value);
+        if (
+          !parsedInstructions.root ||
+          !parsedInstructions.root.children ||
+          parsedInstructions.root.children.length === 0
+        ) {
+          return false;
+        }
+        if (parsedInstructions.root.children.length > 1) {
+          return true;
+        }
+        const singleNode = parsedInstructions.root.children[0];
+        if (singleNode.type !== "paragraph") {
+          return true;
+        }
+        return singleNode.children && singleNode.children.length > 0;
+      } catch (error) {
+        console.warn("Lexical instructions value is not valid JSON");
+        return true;
+      }
+    }
+    return false;
+  }, [instructionsType, instructions]);
+
+  const hasPedago =
+    mode === "review"
+      ? true
+      : mode === "detached"
+        ? false
+        : mode === "create"
+          ? true
+          : hasNonEmptyInstructions || hasGradingOrComments;
+
+  const showPedago =
+    isPedagoVisible ?? (mode === "create" ? showPedagoByDefault : hasPedago);
+
+  const showInstructions = mode === "create" ? true : hasNonEmptyInstructions;
+  const hasGrading = mode === "review" || hasGradingOrComments;
+  const showGrading = hasGrading && isGradingVisible;
+
+  return {
+    hasPedago,
+    showPedago,
+    isHorizontal,
+    hasNonEmptyInstructions,
+    showInstructions,
+    hasGrading,
+    showGrading,
+  };
+};

package/src/features/pedago/index.tsx

@@ -1,11 +1,7 @@
 import { Panel } from "primereact/panel";
 import styles from "./style.module.scss";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import {
-  selectIsGradingVisible,
-  selectOrientation,
-  selectPedagoTab,
-} from "../layout/layoutSlice";
+import { selectPedagoTab } from "../layout/layoutSlice";
 
 import "@capytale/capytale-rich-text-editor/style.css";
 import { Splitter, SplitterPanel } from "primereact/splitter";
@@ -14,37 +10,34 @@ import InstructionsEditor from "./InstructionsEditor";
 import {
   selectComments,
   selectGrading,
-  selectHasGradingOrComments,
-  selectHasInstructions,
   selectMode,
   setComments,
   setGrading,
   setIsMPDirty,
 } from "../activityData/activityDataSlice";
-import { ChangeEventHandler, FC } from "react";
+import { ChangeEventHandler, FC, useCallback } from "react";
 import { DivProps } from "react-html-props";
 import SharedNotesEditor from "./SharedNotesEditor";
 import { CloseOnlyPedagoCommands, PedagoCommands } from "./PedagoCommands";
 import { PdfEditor } from "./PdfEditor";
+import { usePedagoOptions } from "./hooks";
 
 const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
-  const mode = useAppSelector(selectMode);
   const pedagoTab = useAppSelector(selectPedagoTab);
-  const hasInstructions = useAppSelector(selectHasInstructions);
-  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
-  const isGradingVisible =
-    useAppSelector(selectIsGradingVisible) &&
-    (hasGradingOrComments || mode === "review");
-  const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
-  const mayReverse = isHorizontal
-    ? (tab: Array<any>) => {
-        const reversed = [...tab];
-        reversed.reverse();
-        return reversed;
-      }
-    : (tab: Array<any>) => tab;
+  const { showInstructions, showGrading, isHorizontal } = usePedagoOptions();
+
+  const mayReverse = useCallback(
+    isHorizontal
+      ? (tab: Array<any>) => {
+          const reversed = [...tab];
+          reversed.reverse();
+          return reversed;
+        }
+      : (tab: Array<any>) => tab,
+    [isHorizontal],
+  );
 
-  if (!hasInstructions) {
+  if (!showInstructions) {
     return (
       <div className={styles.onlyGradingPedago}>
         <CloseOnlyPedagoCommands />
@@ -68,16 +61,16 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
               ? "PDF"
               : "Notes partagées"
         }
-        data-grading-visible={isGradingVisible}
+        data-grading-visible={showGrading}
       >
-        {!isGradingVisible && (
+        {!showGrading && (
           <>
             {pedagoTab === "instructions" && <InstructionsEditor />}
             {pedagoTab === "sharedNotes" && <SharedNotesEditor />}
             {pedagoTab === "pdf" && <PdfEditor />}
           </>
         )}
-        {isGradingVisible && (
+        {showGrading && (
           <Splitter
             layout={isHorizontal ? "horizontal" : "vertical"}
             className={styles.pedagoSplitter}