@capytale/meta-player 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.tsx

@@ -34,6 +34,8 @@ const App: FC<AppProps> = (props) => {
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
   const hasPedago = hasInstructions || hasGradingOrComments;
   const dispatch = useAppDispatch();
+  const showPedago = hasPedago && isPedagoVisible;
+
   return (
     <div
       className={classNames(
@@ -46,69 +48,68 @@ const App: FC<AppProps> = (props) => {
         <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}>
-            {props.children}
-          </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={
+                "pi",
                 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"}
-            >
-              <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}>{props.children}</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">{props.children}</div>
+            </SplitterPanel>
+          </Splitter>
+      </div>
     </div>
   );
 };

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,7 @@
   overflow-y: hidden;
 }
 
-.hiddenPedagoContainer {
+.pedagoContainer {
   display: grid;
   :global(.layout-horizontal) & {
     grid-template-columns: 1fr;
@@ -27,10 +35,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 +64,3 @@
     background-color: rgba(128, 128, 128, 0.2);
   }
 }
-
-.hiddenPedagoContent {
-  background-color: var(--surface-a);
-}

package/src/features/activityData/IsDirtySetter.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect } from "react";
-import { setIsDirty } from "./activityDataSlice";
+import { setIsPlayerDirty } from "./activityDataSlice";
 import { useAppDispatch } from "../../app/hooks";
 
 type IsDirtySetterProps = {
@@ -9,9 +9,15 @@ type IsDirtySetterProps = {
 const IsDirtySetter: FC<IsDirtySetterProps> = (props) => {
   const dispatch = useAppDispatch();
   useEffect(() => {
-    dispatch(setIsDirty(props.isDirty));
+    dispatch(setIsPlayerDirty(props.isDirty));
   }, [props]);
   return null;
 };
 
+const notifyIsDirty = (isDirty: boolean = true) => {
+  const dispatch = useAppDispatch();
+  dispatch(setIsPlayerDirty(isDirty));
+};
+
 export default IsDirtySetter;
+export { notifyIsDirty };

package/src/features/activityData/activityDataSlice.ts

@@ -29,7 +29,6 @@ export type Icon = {
 interface ActivityJSData {
   title: string;
   mode: ActivityMode;
-  isDirty: boolean;
   returnUrl: string;
   helpUrl: string;
   code: string;
@@ -54,6 +53,8 @@ interface UIState {
   canSaveInstructions: boolean;
   canSaveAnswerSheet: boolean;
   saveState: SaveState;
+  isPlayerDirty: boolean;
+  isMPDirty: boolean;
 }
 
 export interface ActivityDataState
@@ -64,7 +65,6 @@ export interface ActivityDataState
 const initialState: ActivityDataState = {
   title: "",
   mode: "view",
-  isDirty: false,
   returnUrl: "",
   helpUrl: "",
   code: "",
@@ -91,6 +91,8 @@ const initialState: ActivityDataState = {
   canSaveInstructions: true,
   canSaveAnswerSheet: true,
   saveState: "idle",
+  isPlayerDirty: false,
+  isMPDirty: false,
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -169,8 +171,13 @@ export const activityDataSlice = createAppSlice({
     setWorkflow: create.reducer((state, action: PayloadAction<wf>) => {
       state.workflow = action.payload;
     }),
-    setIsDirty: create.reducer((state, action: PayloadAction<boolean>) => {
-      state.isDirty = action.payload;
+    setIsPlayerDirty: create.reducer(
+      (state, action: PayloadAction<boolean>) => {
+        state.isPlayerDirty = action.payload;
+      },
+    ),
+    setIsMPDirty: create.reducer((state, action: PayloadAction<boolean>) => {
+      state.isMPDirty = action.payload;
     }),
   }),
   // You can define your selectors here. These selectors receive the slice
@@ -198,7 +205,9 @@ export const activityDataSlice = createAppSlice({
     selectActivityNid: (data) => data.activityNid,
     selectIcon: (data) => data.icon,
     selectWorkflow: (data) => data.workflow,
-    selectIsDirty: (data) => data.isDirty,
+    selectIsPlayerDirty: (data) => data.isPlayerDirty,
+    selectIsMPDirty: (data) => data.isMPDirty,
+    selectIsDirty: (data) => data.isPlayerDirty || data.isMPDirty,
 
     selectCanChoosePedagoLayout: (data) =>
       data.pedagoLayout === "default-horizontal" ||
@@ -206,6 +215,11 @@ export const activityDataSlice = createAppSlice({
 
     selectCanChooseTheme: (data) =>
       data.supportsDarkTheme && data.supportsLightTheme,
+
+    selectShowSaveButton: (data) =>
+      data.mode === "create" ||
+      data.mode === "review" ||
+      (data.mode === "assignment" && data.workflow === "current"),
   },
 });
 
@@ -222,7 +236,8 @@ export const {
   setGrading,
   setComments,
   setWorkflow,
-  setIsDirty,
+  setIsPlayerDirty,
+  setIsMPDirty,
 } = activityDataSlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.
@@ -243,8 +258,11 @@ export const {
   selectActivityNid,
   selectIcon,
   selectWorkflow,
+  selectIsPlayerDirty,
+  selectIsMPDirty,
   selectIsDirty,
 
   selectCanChoosePedagoLayout,
   selectCanChooseTheme,
+  selectShowSaveButton,
 } = activityDataSlice.selectors;

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -53,7 +53,6 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
       setActivityJSData({
         title: ab.title.value || "",
         mode: data.mode,
-        isDirty: false,
         returnUrl: data.returnUrl,
         helpUrl: data.type.helpUrl,
         nid: ab.mainNode.nid,

package/src/features/activityJS/Saver.tsx

@@ -7,6 +7,8 @@ import {
   selectInstructions,
   selectSaveState,
   selectWorkflow,
+  setIsMPDirty,
+  setIsPlayerDirty,
   setSaveState,
 } from "../activityData/activityDataSlice";
 import { useActivityJS } from "./ActivityJSProvider";
@@ -94,6 +96,8 @@ const Saver: FC<{}> = () => {
       const saveData = await ab.save();
       console.log("Save return data", saveData);
       dispatch(setSaveState("idle"));
+      dispatch(setIsPlayerDirty(false));
+      dispatch(setIsMPDirty(false));
       toast.current!.show({
         summary: "Sauvegarde réussie",
         detail: "L'activité a bien été enregistrée.",

package/src/features/navbar/CapytaleMenu.tsx

@@ -12,6 +12,7 @@ import {
   selectMode,
   selectSaveState,
   selectSharingInfo,
+  selectShowSaveButton,
   selectWorkflow,
   setSaveState,
   setWorkflow,
@@ -28,6 +29,7 @@ const CapytaleMenu: React.FC = () => {
   const mode = useAppSelector(selectMode);
   const workflow = useAppSelector(selectWorkflow);
   const isDirty = useAppSelector(selectIsDirty);
+  const showSaveButton = useAppSelector(selectShowSaveButton);
   const isLarge = useMemo(
     () => windowsSize.width && windowsSize.width >= XL,
     [windowsSize.width],
@@ -54,21 +56,26 @@ const CapytaleMenu: React.FC = () => {
   };
   return (
     <div className={styles.capytaleMenu}>
-      <Button
-        label={isQuiteSmall ? undefined : "Enregistrer"}
-        severity={isDirty ? "danger" : "warning"}
-        size="small"
-        icon="pi pi-save"
-        loading={saveState !== "idle"}
-        tooltip="Enregistrer l'activité"
-        tooltipOptions={{
-          position: "bottom",
-          showDelay: settings.TOOLTIP_SHOW_DELAY,
-        }}
-        onClick={() => {
-          dispatch(setSaveState("should-save"));
-        }}
-      />
+      {showSaveButton && (
+        <Button
+          label={isQuiteSmall ? undefined : "Enregistrer"}
+          disabled={!isDirty}
+          severity={"warning"}
+          size="small"
+          icon="pi pi-save"
+          loading={saveState !== "idle"}
+          tooltip={isDirty ? "Enregistrer l'activité" : "Rien à enregistrer"}
+          tooltipOptions={{
+            position: "bottom",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+            showOnDisabled: true,
+          }}
+          onClick={() => {
+            dispatch(setSaveState("should-save"));
+          }}
+        />
+      )}
+
       {mode === "create" && (
         <SplitButton
           label={isLarge ? sharingInfo.code : undefined}

package/src/features/pedago/AnswerSheetEditor.tsx

@@ -4,6 +4,7 @@ import {
   selectAnswerSheetContent,
   selectMode,
   setCanSaveAnswerSheet,
+  setIsMPDirty,
   setLexicalAnswerSheetState,
 } from "../activityData/activityDataSlice";
 import { forwardRef, useImperativeHandle, useRef } from "react";
@@ -18,6 +19,7 @@ const AnswerSheetEditor: React.FC = forwardRef((_props, ref) => {
   const isEditable =
     mode === "create" || mode === "assignment" || mode === "review";
   const initialEditorState = useAppSelector(selectAnswerSheetContent);
+  const initialStateOnChangeDone = useRef<boolean>(false);
 
   useImperativeHandle(ref, () => {
     return {
@@ -37,6 +39,11 @@ const AnswerSheetEditor: React.FC = forwardRef((_props, ref) => {
         jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
         onChange={(editorState) => {
           dispatch(setLexicalAnswerSheetState(editorState));
+          if (initialStateOnChangeDone.current) {
+            dispatch(setIsMPDirty(true));
+          } else {
+            initialStateOnChangeDone.current = true;
+          }
         }}
         onJsonSizeLimitExceeded={() => {
           dispatch(setCanSaveAnswerSheet(false));

package/src/features/pedago/InstructionsEditor.tsx

@@ -4,14 +4,10 @@ import {
   selectInstructions,
   selectMode,
   setCanSaveInstructions,
+  setIsMPDirty,
   setLexicalInstructionsState,
 } from "../activityData/activityDataSlice";
-import {
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { Toast } from "primereact/toast";
 import settings from "../../settings";
 
@@ -34,6 +30,7 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
       ? initialInstructions?.value
       : undefined;
   }, [initialInstructions]);
+  const initialStateOnChangeDone = useRef<boolean>(false);
 
   useImperativeHandle(ref, () => {
     return {
@@ -54,6 +51,11 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
         jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
         onChange={(editorState) => {
           dispatch(setLexicalInstructionsState(editorState));
+          if (initialStateOnChangeDone.current) {
+            dispatch(setIsMPDirty(true));
+          } else {
+            initialStateOnChangeDone.current = true;
+          }
         }}
         onJsonSizeLimitExceeded={() => {
           dispatch(setCanSaveInstructions(false));

package/src/features/pedago/index.tsx

@@ -21,6 +21,7 @@ import {
   selectMode,
   setComments,
   setGrading,
+  setIsMPDirty,
 } from "../activityData/activityDataSlice";
 import { ChangeEventHandler } from "react";
 import settings from "../../settings";
@@ -45,15 +46,17 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   const handleCommentsChange: ChangeEventHandler<HTMLTextAreaElement> = (
     event,
   ) => {
-    console.log("Comments change:", event.target.value);
     dispatch(setComments(event.target.value));
+    dispatch(setIsMPDirty(true));
+    console.log("51");
   };
 
   const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
     event,
   ) => {
-    console.log("Grading change:", event.target.value);
     dispatch(setGrading(event.target.value));
+    dispatch(setIsMPDirty(true));
+    console.log("59");
   };
 
   return (

package/src/index.css

@@ -12,7 +12,9 @@ code {
     monospace;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }
 
@@ -20,11 +22,19 @@ html, body, #root {
   background-color: var(--surface-200);
 }
 
-.p-splitter-gutter-handle, .p-splitter-gutter-resizing {
+.p-splitter-gutter-handle,
+.p-splitter-gutter-resizing {
   background-color: var(--surface-400);
 }
 
-*:has(>.editor-shell) { /* Rich text editor */
+*:has(> .editor-shell) {
+  /* Rich text editor */
   background-color: white;
   color-scheme: light;
-}
+}
+
+#meta-player-content,
+:has(> #meta-player-content) {
+  height: 100%;
+  background-color: var(--surface-a);
+}