@capytale/meta-player 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,6 +24,7 @@
     "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 } from "react";
+import { FC, PropsWithChildren, useMemo } from "react";
 import { Tooltip } from "primereact/tooltip";
 import {
   selectHasGradingOrComments,
@@ -23,6 +23,8 @@ 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) => {
@@ -34,6 +36,9 @@ const App: FC<AppProps> = (props) => {
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
   const hasPedago = hasInstructions || hasGradingOrComments;
   const dispatch = useAppDispatch();
+
+  const portalNode = useMemo(() => portals.createHtmlPortalNode(), []);
+
   return (
     <div
       className={classNames(
@@ -42,6 +47,9 @@ 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 />}
@@ -55,7 +63,7 @@ const App: FC<AppProps> = (props) => {
             <Pedago key="pedago" />
           </SplitterPanel>
           <SplitterPanel minSize={40} size={70}>
-            {props.children}
+            <portals.OutPortal node={portalNode} />
           </SplitterPanel>
         </Splitter>
       )}
@@ -106,7 +114,9 @@ const App: FC<AppProps> = (props) => {
               mouseTrack={!isHorizontal}
             />
           </div>
-          <div className={styles.hiddenPedagoContent}>{props.children}</div>
+          <div className={styles.hiddenPedagoContent}>
+            <portals.OutPortal node={portalNode} />
+          </div>
         </div>
       )}
     </div>

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,18 @@ 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%;
+}