@capytale/meta-player 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,13 +19,14 @@
     }
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.1.0",
+    "@capytale/activity.js": "^3.1.6",
     "@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-dropzone": "^14.2.9",
     "react-html-props": "^2.0.9",
     "react-redux": "^9.1.0",
     "screenfull": "^6.0.2",

package/src/App.tsx

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

package/src/MetaPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren } from "react";
+import React, { FC, PropsWithChildren, useMemo } from "react";
 
 import { Provider } from "react-redux";
 
@@ -6,7 +6,7 @@ import { APIOptions, PrimeReactProvider } from "primereact/api";
 import "primeicons/primeicons.css";
 
 import App from "./App";
-import { store } from "./app/store";
+import { makeStore } from "./app/store";
 import "./index.css";
 import ThemeSwitcher from "./features/theming/ThemeSwitcher";
 import {
@@ -31,14 +31,23 @@ import {
   selectReturnUrl,
 } from "./features/activityData/activityDataSlice";
 
+import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
+
 type AntiCheatOptions = {
   preserveDom: boolean;
   hasIframes: boolean;
 };
 
+type UIOptions = {
+  closePedagoByDefault: boolean;
+  noWorkflow: boolean;
+  noSaveForStudents: boolean;
+};
+
 type MetaPlayerProps = PropsWithChildren<{
   activityJSOptions?: LoadOptions;
   antiCheatOptions?: Partial<AntiCheatOptions>;
+  uiOptions?: Partial<UIOptions>;
 }>;
 
 const MetaPlayer: FC<MetaPlayerProps> = (props) => {
@@ -50,6 +59,24 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
     hasIframes: false,
     ...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}>
       <Provider store={store}>

package/src/features/activityData/activityDataSlice.ts

@@ -26,6 +26,8 @@ export type Icon = {
   style?: any;
 };
 
+export type EditorType = "rich" | "none";
+
 interface ActivityJSData {
   title: string;
   mode: ActivityMode;
@@ -38,7 +40,10 @@ interface ActivityJSData {
   accessTimerange: TimeRange | null;
   studentInfo: StudentInfo | null;
   instructions: Instructions | null;
-  answerSheetContent: InitialEditorStateType | null;
+  instructionsType: EditorType;
+  pdfInstructions: Blob | null;
+  sharedNotesContent: InitialEditorStateType | null;
+  sharedNotesType: EditorType;
   codeLink: string;
   icon: Icon | null;
   friendlyType: string;
@@ -55,7 +60,7 @@ type SaveState = "idle" | "should-save" | "saving";
 
 interface UIState {
   canSaveInstructions: boolean;
-  canSaveAnswerSheet: boolean;
+  canSaveSharedNotes: boolean;
   saveState: SaveState;
   isPlayerDirty: boolean;
   isMPDirty: boolean;
@@ -83,7 +88,10 @@ const initialState: ActivityDataState = {
     class: "",
   },
   instructions: null,
-  answerSheetContent: null,
+  instructionsType: "rich",
+  pdfInstructions: null,
+  sharedNotesContent: null,
+  sharedNotesType: "none",
   codeLink: "",
   icon: null,
   friendlyType: "",
@@ -94,7 +102,7 @@ const initialState: ActivityDataState = {
   ...defaultMetaPlayerOptions,
 
   canSaveInstructions: true,
-  canSaveAnswerSheet: true,
+  canSaveSharedNotes: true,
   saveState: "idle",
   isPlayerDirty: false,
   isMPDirty: false,
@@ -124,6 +132,9 @@ export const activityDataSlice = createAppSlice({
         state.accessTimerange = action.payload.accessTimerange;
         state.studentInfo = action.payload.studentInfo;
         state.instructions = action.payload.instructions;
+        state.instructionsType = action.payload.instructionsType;
+        state.sharedNotesContent = action.payload.sharedNotesContent;
+        state.sharedNotesType = action.payload.sharedNotesType;
         state.codeLink = action.payload.codeLink;
         state.icon = action.payload.icon;
         state.friendlyType = action.payload.friendlyType;
@@ -148,9 +159,9 @@ export const activityDataSlice = createAppSlice({
         state.canSaveInstructions = action.payload;
       },
     ),
-    setCanSaveAnswerSheet: create.reducer(
+    setCanSaveSharedNotes: create.reducer(
       (state, action: PayloadAction<boolean>) => {
-        state.canSaveAnswerSheet = action.payload;
+        state.canSaveSharedNotes = action.payload;
       },
     ),
     setLexicalInstructionsState: create.reducer(
@@ -162,9 +173,24 @@ export const activityDataSlice = createAppSlice({
         };
       },
     ),
-    setLexicalAnswerSheetState: create.reducer(
+    setLexicalSharedNotesState: create.reducer(
       (state, action: PayloadAction<InitialEditorStateType>) => {
-        state.answerSheetContent = action.payload;
+        state.sharedNotesContent = action.payload;
+      },
+    ),
+    setPdfInstructions: create.reducer(
+      (state, action: PayloadAction<Blob | null>) => {
+        state.pdfInstructions = action.payload;
+      },
+    ),
+    setInstructionsType: create.reducer(
+      (state, action: PayloadAction<EditorType>) => {
+        state.instructionsType = action.payload;
+      },
+    ),
+    setSharedNotesType: create.reducer(
+      (state, action: PayloadAction<EditorType>) => {
+        state.sharedNotesType = action.payload;
       },
     ),
     setSaveState: create.reducer((state, action: PayloadAction<SaveState>) => {
@@ -206,7 +232,10 @@ export const activityDataSlice = createAppSlice({
       codeLink: data.codeLink,
     }),
     selectInstructions: (data) => data.instructions,
-    selectAnswerSheetContent: (data) => data.answerSheetContent,
+    selectInstructionsType: (data) => data.instructionsType,
+    selectPdfInstructions: (data) => data.pdfInstructions,
+    selectSharedNotesContent: (data) => data.sharedNotesContent,
+    selectSharedNotesType: (data) => data.sharedNotesType,
     selectComments: (data) => data.comments,
     selectGrading: (data) => data.grading,
     selectHasInstructions: (data) => data.hasInstructions,
@@ -253,9 +282,12 @@ export const {
   setActivityJSData,
   setPlayerSettings,
   setCanSaveInstructions,
-  setCanSaveAnswerSheet,
+  setCanSaveSharedNotes,
   setLexicalInstructionsState,
-  setLexicalAnswerSheetState,
+  setLexicalSharedNotesState,
+  setPdfInstructions,
+  setInstructionsType,
+  setSharedNotesType,
   setSaveState,
   setGrading,
   setComments,
@@ -271,7 +303,10 @@ export const {
   selectActivityInfo,
   selectSharingInfo,
   selectInstructions,
-  selectAnswerSheetContent,
+  selectInstructionsType,
+  selectPdfInstructions,
+  selectSharedNotesContent,
+  selectSharedNotesType,
   selectComments,
   selectGrading,
   selectHasInstructions,

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -44,18 +44,9 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
     window.capy = data;
 
     const ab = data.activityBunch;
-    /*
-    console.log("Test accès");
-    console.log(ab.assignmentNode?.answer_sheet.value);
-    console.log(ab.activityNode.answer_sheet.value);
-    */
-    /*
-    const answerSheetContent = 
-    ab.assignmentNode?.answer_sheet.value ||
-    ab.activityNode.answer_sheet.value ||
-    null;
-    */
-    const answerSheetContent = null;
+
+    const sharedNotesContent = ab.shared_notes.value;
+
     dispatch(
       setActivityJSData({
         title: ab.title.value || "",
@@ -82,10 +73,18 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
             }
           : {
               value: null,
-              htmlValue: ab.instructions.value.html,
+              htmlValue: ab.instructions.value.html || "",
               format: "html",
             },
-        answerSheetContent: answerSheetContent,
+        instructionsType:
+          ab.instructions.value.lexical ||
+          ab.instructions.value.html ||
+          (data.mode === "create" && ab.activityNode.isNew)
+            ? "rich"
+            : "none",
+        pdfInstructions: null,
+        sharedNotesContent: sharedNotesContent,
+        sharedNotesType: sharedNotesContent == null ? "none" : "rich",
         codeLink: data.codeLink || "",
         icon: data.icon || null,
         friendlyType: data.friendlyType,

package/src/features/activityJS/Saver.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
-  selectAnswerSheetContent,
+  selectSharedNotesContent,
   selectComments,
   selectGrading,
   selectInstructions,
@@ -10,6 +10,8 @@ import {
   setIsPlayerDirty,
   setSaveState,
   setWorkflow,
+  selectSharedNotesType,
+  selectInstructionsType,
 } from "../activityData/activityDataSlice";
 import { useActivityJS } from "./ActivityJSProvider";
 import { Toast } from "primereact/toast";
@@ -19,7 +21,9 @@ const Saver: FC<{}> = () => {
   const dispatch = useAppDispatch();
   const activityJs = useActivityJS();
   const instructions = useAppSelector(selectInstructions);
-  const answerSheetContent = useAppSelector(selectAnswerSheetContent);
+  const instructionsType = useAppSelector(selectInstructionsType);
+  const sharedNotesContent = useAppSelector(selectSharedNotesContent);
+  const sharedNotesType = useAppSelector(selectSharedNotesType);
   const comments = useAppSelector(selectComments);
   const grading = useAppSelector(selectGrading);
   const beforeSave = useAppSelector(selectBeforeSave);
@@ -52,37 +56,43 @@ const Saver: FC<{}> = () => {
     }
     const ab = activityJs.activitySession.activityBunch;
     if (activityJs.activitySession.mode === "create") {
-      ab.instructions.value = {
-        lexical:
-          instructions?.format === "lexical"
-            ? typeof instructions.value === "string"
-              ? instructions.value
-              : JSON.stringify(instructions.value)
-            : null,
-        html:
-          instructions?.format === "lexical"
-            ? instructions.htmlValue
-            : (instructions?.value as string),
-      };
-      /*
-      ab.activityNode.answer_sheet.value =
-        typeof answerSheetContent === "string"
-          ? answerSheetContent
-          : JSON.stringify(answerSheetContent);
-      */
+      if (instructionsType === "rich") {
+        ab.instructions.value = {
+          lexical:
+            instructions?.format === "lexical"
+              ? typeof instructions.value === "string"
+                ? instructions.value
+                : JSON.stringify(instructions.value)
+              : null,
+          html:
+            instructions?.format === "lexical"
+              ? instructions.htmlValue
+              : (instructions?.value as string),
+        };
+      } else {
+        ab.instructions.value = {
+          lexical: null,
+          html: null,
+        };
+      }
     }
     if (activityJs.activitySession.mode === "review") {
       ab.assignmentNode!.comments.value = comments || "";
       ab.assignmentNode!.grading.value = grading || "";
     }
     if (
+      activityJs.activitySession.mode === "create" ||
       activityJs.activitySession.mode === "review" ||
       activityJs.activitySession.mode === "assignment"
     ) {
-      ab.assignmentNode!.answer_sheet.value =
-        typeof answerSheetContent === "string"
-          ? answerSheetContent
-          : JSON.stringify(answerSheetContent);
+      if (sharedNotesContent && sharedNotesType === "rich") {
+        ab.shared_notes.value =
+          typeof sharedNotesContent === "string"
+            ? sharedNotesContent
+            : JSON.stringify(sharedNotesContent);
+      } else {
+        ab.shared_notes.value = null;
+      }
     }
     try {
       const saveData = await ab.save();

package/src/features/layout/layoutSlice.ts

@@ -3,20 +3,24 @@ import { createAppSlice } from "../../app/createAppSlice";
 
 export type Orientation = "horizontal" | "vertical";
 
-type PedagoTab = "instructions" | "answerSheet";
+export type PedagoTab = "instructions" | "sharedNotes" | "pdf";
 
 export interface LayoutState {
   orientation: Orientation;
   isPedagoVisible: boolean;
   isGradingVisible: boolean;
   pedagoTab: PedagoTab;
+  showWorkflow: boolean;
+  showSaveForStudents: boolean;
 }
 
-const initialState: LayoutState = {
+export const initialState: LayoutState = {
   orientation: "horizontal",
   isPedagoVisible: true,
   isGradingVisible: true,
   pedagoTab: "instructions",
+  showWorkflow: true,
+  showSaveForStudents: true,
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -41,6 +45,11 @@ export const layoutSlice = createAppSlice({
     toggleIsPedagoVisible: create.reducer((state) => {
       state.isPedagoVisible = !state.isPedagoVisible;
     }),
+    setIsGradingVisible: create.reducer(
+      (state, action: PayloadAction<boolean>) => {
+        state.isGradingVisible = action.payload;
+      },
+    ),
     toggleIsGradingVisible: create.reducer((state) => {
       state.isGradingVisible = !state.isGradingVisible;
     }),
@@ -55,6 +64,8 @@ export const layoutSlice = createAppSlice({
     selectIsPedagoVisible: (layout) => layout.isPedagoVisible,
     selectIsGradingVisible: (layout) => layout.isGradingVisible,
     selectPedagoTab: (layout) => layout.pedagoTab,
+    selectShowWorkflow: (layout) => layout.showWorkflow,
+    selectShowSaveForStudents: (layout) => layout.showSaveForStudents,
   },
 });
 
@@ -63,6 +74,7 @@ export const {
   toggleLayout,
   setLayout,
   toggleIsPedagoVisible,
+  setIsGradingVisible,
   toggleIsGradingVisible,
   setPedagoTab,
 } = layoutSlice.actions;
@@ -73,4 +85,6 @@ export const {
   selectIsPedagoVisible,
   selectIsGradingVisible,
   selectPedagoTab,
+  selectShowWorkflow,
+  selectShowSaveForStudents,
 } = layoutSlice.selectors;

package/src/features/navbar/CapytaleMenu.tsx

@@ -25,6 +25,10 @@ import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 import ButtonDoubleIcon from "../../utils/ButtonDoubleIcon";
 import CardSelector from "../../utils/CardSelector";
 import { useActivityJS } from "../activityJS/ActivityJSProvider";
+import {
+  selectShowSaveForStudents,
+  selectShowWorkflow,
+} from "../layout/layoutSlice";
 
 const CapytaleMenu: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -36,6 +40,10 @@ const CapytaleMenu: React.FC = () => {
   const workflow = useAppSelector(selectWorkflow);
   const isDirty = useAppSelector(selectIsDirty);
   const showSaveButton = useAppSelector(selectShowSaveButton);
+  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
+  const hasSaveButton =
+    showSaveButton && !(mode === "assignment" && !showSaveForStudents);
+  const showWorkflow = useAppSelector(selectShowWorkflow);
   const isLarge = useMemo(
     () => windowsSize.width && windowsSize.width >= XL,
     [windowsSize.width],
@@ -82,7 +90,7 @@ const CapytaleMenu: React.FC = () => {
           />
         )}
         {
-          showSaveButton && (
+          hasSaveButton && (
             <Button
               label={isQuiteSmall ? undefined : "Enregistrer"}
               disabled={!isDirty}
@@ -145,86 +153,92 @@ const CapytaleMenu: React.FC = () => {
             ]}
           />
         )}
-        {mode === "assignment" && workflow === "current" && (
-          <Button
-            outlined
-            label="Rendre"
-            icon="pi pi-envelope"
-            onClick={() => {
-              confirmFinishAssignment();
-            }}
-          />
-        )}
-        {mode === "assignment" && workflow !== "current" && (
-          <Button
-            outlined
-            label={workflow === "finished" ? "Rendue" : "Corrigée"}
-            disabled
-            icon={
-              workflow === "finished" ? "pi pi-envelope" : "pi pi-check-square"
-            }
-            tooltip="Copie déjà rendue"
-          />
-        )}
-        {mode === "review" && (
-          <div>
-            <ButtonDoubleIcon
-              severity="secondary"
-              size="small"
-              outlined
-              onClick={(e) => {
-                overlayPanelWorkflow.current!.toggle(e);
-              }}
-              label={
-                workflow === "current"
-                  ? "En cours"
-                  : workflow === "finished"
-                    ? "Rendue"
-                    : "Corrigée"
-              }
-              leftIcon={
-                "pi " +
-                (workflow === "current"
-                  ? "pi pi-pencil"
-                  : workflow === "finished"
-                    ? "pi pi-envelope"
-                    : "pi pi-check-square")
-              }
-              rightIcon="pi pi-angle-down"
-            />
-            <OverlayPanel ref={overlayPanelWorkflow}>
-              <h3 className={styles.overlayPanelWorkflowTitle}>
-                État de la copie
-              </h3>
-              <CardSelector
-                selected={workflow}
-                onChange={(option: wf) => {
-                  changeWorkflow(option);
-
-                  overlayPanelWorkflow.current!.hide();
+        {showWorkflow && (
+          <>
+            {mode === "assignment" && workflow === "current" && (
+              <Button
+                outlined
+                label="Rendre"
+                icon="pi pi-envelope"
+                onClick={() => {
+                  confirmFinishAssignment();
                 }}
-                options={[
-                  {
-                    value: "current",
-                    title: "En cours",
-                    description:
-                      "L'élève peut modifier sa copie à tout moment.",
-                  },
-                  {
-                    value: "finished",
-                    title: "Rendue",
-                    description: "L'élève ne peut plus modifier sa copie.",
-                  },
-                  {
-                    value: "corrected",
-                    title: "Corrigée",
-                    description:
-                      "L'élève ne peut plus modifier sa copie et a reçu une correction.",
-                  },
-                ]}
               />
-            </OverlayPanel>
-          </div>
+            )}
+            {mode === "assignment" && workflow !== "current" && (
+              <Button
+                outlined
+                label={workflow === "finished" ? "Rendue" : "Corrigée"}
+                disabled
+                icon={
+                  workflow === "finished"
+                    ? "pi pi-envelope"
+                    : "pi pi-check-square"
+                }
+                tooltip="Copie déjà rendue"
+              />
+            )}
+            {mode === "review" && (
+              <div>
+                <ButtonDoubleIcon
+                  severity="secondary"
+                  size="small"
+                  outlined
+                  onClick={(e) => {
+                    overlayPanelWorkflow.current!.toggle(e);
+                  }}
+                  label={
+                    workflow === "current"
+                      ? "En cours"
+                      : workflow === "finished"
+                        ? "Rendue"
+                        : "Corrigée"
+                  }
+                  leftIcon={
+                    "pi " +
+                    (workflow === "current"
+                      ? "pi pi-pencil"
+                      : workflow === "finished"
+                        ? "pi pi-envelope"
+                        : "pi pi-check-square")
+                  }
+                  rightIcon="pi pi-angle-down"
+                />
+                <OverlayPanel ref={overlayPanelWorkflow}>
+                  <h3 className={styles.overlayPanelWorkflowTitle}>
+                    État de la copie
+                  </h3>
+                  <CardSelector
+                    selected={workflow}
+                    onChange={(option: wf) => {
+                      changeWorkflow(option);
+
+                      overlayPanelWorkflow.current!.hide();
+                    }}
+                    options={[
+                      {
+                        value: "current",
+                        title: "En cours",
+                        description:
+                          "L'élève peut modifier sa copie à tout moment.",
+                      },
+                      {
+                        value: "finished",
+                        title: "Rendue",
+                        description: "L'élève ne peut plus modifier sa copie.",
+                      },
+                      {
+                        value: "corrected",
+                        title: "Corrigée",
+                        description:
+                          "L'élève ne peut plus modifier sa copie et a reçu une correction.",
+                      },
+                    ]}
+                  />
+                </OverlayPanel>
+              </div>
+            )}
+          </>
         )}
         <ConfirmDialog />
       </div>