@capytale/meta-player 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.1.8",
+    "@capytale/activity.js": "^3.1.10",
     "@capytale/capytale-anti-triche": "^0.2.1",
     "@capytale/capytale-rich-text-editor": "^0.4.3",
     "@reduxjs/toolkit": "^2.0.1",

package/src/App.tsx

@@ -34,7 +34,7 @@ const App: FC<AppProps> = (props) => {
   const isPedagoVisible = useAppSelector(selectIsPedagoVisible) as boolean;
   const hasInstructions = useAppSelector(selectHasInstructions);
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
-  const hasPedago = hasInstructions || hasGradingOrComments;
+  const hasPedago = hasInstructions || hasGradingOrComments || mode === "review";
   const dispatch = useAppDispatch();
   const showPedago = hasPedago && isPedagoVisible;
   const isDirty = useAppSelector(selectIsDirty);
@@ -52,6 +52,12 @@ const App: FC<AppProps> = (props) => {
     [isDirty, save],
   );
 
+  const pedagoOpenLabel = hasPedago
+    ? "Afficher les consignes"
+    : mode === "create"
+      ? "Ce type d'activité n'accepte pas de consigne"
+      : "Pas de consignes ni de note";
+
   return (
     <div
       className={classNames(
@@ -80,16 +86,8 @@ const App: FC<AppProps> = (props) => {
             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"
-            }
+            data-pr-tooltip={pedagoOpenLabel}
+            aria-label={pedagoOpenLabel}
             role={hasPedago ? "button" : "note"}
           >
             <i

package/src/MetaPlayer.tsx

@@ -33,22 +33,17 @@ import {
 
 import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
 import ExitWarning from "./features/activityData/ExitWarning";
-
-type AntiCheatOptions = {
-  preserveDom: boolean;
-  hasIframes: boolean;
-};
-
-type UIOptions = {
-  closePedagoByDefault: boolean;
-  noWorkflow: boolean;
-  noSaveForStudents: boolean;
-};
+import type { AntiCheatOptions, UIOptions } from "./types";
+import {
+  AttachedFilesOptions,
+  defaultAttachedFilesOptions,
+} from "./features/functionalities/functionalitiesSlice";
 
 type MetaPlayerProps = PropsWithChildren<{
   activityJSOptions?: LoadOptions;
   antiCheatOptions?: Partial<AntiCheatOptions>;
   uiOptions?: Partial<UIOptions>;
+  attachedFilesOptions?: AttachedFilesOptions;
 }>;
 
 const MetaPlayer: FC<MetaPlayerProps> = (props) => {
@@ -66,6 +61,10 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
     noSaveForStudents: false,
     ...props.uiOptions,
   };
+  const attachedFilesOptions: AttachedFilesOptions = {
+    ...defaultAttachedFilesOptions,
+    ...props.attachedFilesOptions,
+  };
   const store = useMemo(
     () =>
       makeStore({
@@ -75,6 +74,9 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
           showWorkflow: !uiOptions.noWorkflow,
           showSaveForStudents: !uiOptions.noSaveForStudents,
         },
+        functionalities: {
+          attachedFilesOptions,
+        },
       }),
     [],
   );

package/src/activityJs.ts

@@ -0,0 +1,5 @@
+import evaluationApi from "@capytale/activity.js/backend/capytale/evaluation";
+import type { Evaluation } from "@capytale/activity.js/activity/evaluation/evaluation";
+
+export { evaluationApi };
+export type { Evaluation };

package/src/app/store.ts

@@ -7,6 +7,7 @@ import { activityDataSlice } from "../features/activityData/activityDataSlice";
 import { navbarSlice } from "../features/navbar/navbarSlice";
 import { saverSlice } from "../features/activityJS/saverSlice";
 import { activitySettingsSlice } from "../features/activitySettings/activitySettingsSlice";
+import { functionalitiesSlice } from "../features/functionalities/functionalitiesSlice";
 
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
@@ -17,6 +18,7 @@ const rootReducer = combineSlices(
   navbarSlice,
   saverSlice,
   activitySettingsSlice,
+  functionalitiesSlice,
 );
 // Infer the `RootState` type from the root reducer
 export type RootState = ReturnType<typeof rootReducer>;
@@ -27,6 +29,10 @@ export const makeStore = (preloadedState?: Partial<RootState>) => {
   const store = configureStore({
     reducer: rootReducer,
     preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        serializableCheck: false
+      }),
   });
   // configure listeners using the provided defaults
   // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors

package/src/features/activityData/activityDataSlice.ts

@@ -33,7 +33,7 @@ interface ActivityJSData {
   mode: ActivityMode;
   returnUrl: string;
   helpUrl: string;
-  code: string;
+  code: string | null;
   nid: number;
   activityNid: number;
   accessTrMode: string;
@@ -44,7 +44,7 @@ interface ActivityJSData {
   pdfInstructions: Blob | null;
   sharedNotesContent: InitialEditorStateType | null;
   sharedNotesType: EditorType;
-  codeLink: string;
+  codeLink: string | null;
   icon: Icon | null;
   friendlyType: string;
   comments: string | null;
@@ -77,7 +77,7 @@ const initialState: ActivityDataState = {
   mode: "view",
   returnUrl: "",
   helpUrl: "",
-  code: "",
+  code: null,
   nid: 0,
   activityNid: 0,
   accessTrMode: "",
@@ -92,7 +92,7 @@ const initialState: ActivityDataState = {
   pdfInstructions: null,
   sharedNotesContent: null,
   sharedNotesType: "none",
-  codeLink: "",
+  codeLink: null,
   icon: null,
   friendlyType: "",
   comments: null,

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -55,7 +55,8 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
         helpUrl: data.type.helpUrl,
         nid: ab.mainNode.nid,
         activityNid: ab.activityNode.nid,
-        code: ab.code.value || "",
+        code: data.code,
+        codeLink: data.codeLink,
         accessTrMode: ab.access_tr_mode.value || "",
         accessTimerange: ab.access_timerange.value,
         studentInfo: data.student
@@ -85,7 +86,6 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
         pdfInstructions: null,
         sharedNotesContent: sharedNotesContent,
         sharedNotesType: sharedNotesContent == null ? "none" : "rich",
-        codeLink: data.codeLink || "",
         icon: data.icon || null,
         friendlyType: data.friendlyType,
         comments: ab.assignmentNode?.comments.value || null,

package/src/features/functionalities/functionalitiesSlice.ts

@@ -0,0 +1,63 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+export type AttachedFileData = {
+  name: string;
+  isTemporary: boolean;
+  interactionMode: "download" | "preview" | "preview-or-download" | "custom";
+  urlOrId: string;
+}
+
+export type AttachedFilesOptions = {
+  enabled: boolean;
+  uploadTemporaryFiles?: {
+    mimeTypes: string[];
+    handler: (files: File[]) => any;
+  };
+  middleware?: {
+    listFiles: (originalFiles: AttachedFileData[]) => AttachedFileData[];
+    handleFileClick?: ((originalFile: AttachedFileData) => any);
+  };
+};
+
+export interface FunctionalitiesState {
+  attachedFilesOptions: AttachedFilesOptions;
+}
+
+export const defaultAttachedFilesOptions: AttachedFilesOptions = {
+  enabled: false,
+};
+
+export const initialState: FunctionalitiesState = {
+  attachedFilesOptions: defaultAttachedFilesOptions
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const functionalitiesSlice = createAppSlice({
+  name: "functionalities",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    setAttachedFilesOptions: create.reducer((state, action: PayloadAction<AttachedFilesOptions>) => {
+      state.attachedFilesOptions = action.payload;
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectAttachedFilesOptions: (state) => state.attachedFilesOptions,
+    selectAttachedFilesEnabled: (state) => state.attachedFilesOptions.enabled,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const {
+  setAttachedFilesOptions,
+} = functionalitiesSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const {
+  selectAttachedFilesOptions,
+  selectAttachedFilesEnabled,
+} = functionalitiesSlice.selectors;

package/src/features/functionalities/hooks.ts

@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+import { useAppSelector } from "../../app/hooks"
+import { useActivityJS } from "../activityJS/ActivityJSProvider";
+import { AttachedFileData, selectAttachedFilesOptions } from "./functionalitiesSlice"
+
+export const useAttachedFiles = () => {
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+
+  const activityJS = useActivityJS();
+  const files = useMemo(
+    () =>
+      activityJS.activitySession?.activityBunch.activityNode.attached_files
+        .items || [],
+    [activityJS],
+  );
+  const filesData = useMemo<AttachedFileData[]>(() => {
+    return files.map((file) => {
+      const name = decodeURIComponent(file.split("/").pop() || "");
+      return {
+        name: name,
+        urlOrId: file,
+        isTemporary: false,
+        interactionMode: "download",
+      };
+    });
+  }, [files]);
+
+  const treatedFilesData = useMemo(() => {
+    if (!attachedFilesOptions.enabled || !attachedFilesOptions.middleware?.listFiles) {
+      return filesData;
+    }
+    return attachedFilesOptions.middleware.listFiles(filesData);
+  }, [filesData, attachedFilesOptions]);
+
+  return treatedFilesData;
+}

package/src/features/navbar/ActivityMenu.tsx

@@ -3,7 +3,7 @@ import styles from "./style.module.scss";
 
 import { Button } from "primereact/button";
 import { Sidebar } from "primereact/sidebar";
-import SidebarContent from "./SidebarContent";
+import SettingsSidebarContent from "./SettingsSidebarContent";
 import settings from "../../settings";
 import ActivityQuickActions from "./ActivityQuickActions";
 import useFullscreen from "../../utils/useFullscreen";
@@ -12,9 +12,15 @@ import { Dialog } from "primereact/dialog";
 import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 import { useAppSelector } from "../../app/hooks";
 import { selectHasAntiCheat } from "../activityData/activityDataSlice";
+import AttachedFilesSidebarContent from "./AttachedFilesSidebarContent";
+import { Badge } from "primereact/badge";
+import { useAttachedFiles } from "../functionalities/hooks";
+import { selectAttachedFilesEnabled } from "../functionalities/functionalitiesSlice";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
+  const [attachedFilesSidebarVisible, setAttachedFilesSidebarVisible] =
+    useState(false);
   const [wantFullscreen, setWantFullscreen] = useState(false);
   const isFullscreen = useFullscreen(wantFullscreen, () =>
     setWantFullscreen(false),
@@ -23,9 +29,32 @@ const ActivityMenu: React.FC = memo(() => {
   const [helpDialogVisible, setHelpDialogVisible] = useState(false);
   const activityJS = useActivityJS();
   const hasAntiCheat = useAppSelector(selectHasAntiCheat);
+  const attachedFiles = useAttachedFiles();
+  const attachedFilesEnabled = useAppSelector(selectAttachedFilesEnabled);
   return (
     <div className={styles.activityMenu}>
       <ActivityQuickActions />
+      {attachedFilesEnabled && (
+        <Button
+          severity="secondary"
+          size="small"
+          icon={
+            <i className="pi pi-paperclip p-overlay-badge">
+              {attachedFiles.length > 0 && (
+                <Badge value={attachedFiles.length}></Badge>
+              )}
+            </i>
+          }
+          outlined
+          tooltip="Fichiers joints"
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          className="p-overlay-badge"
+          onClick={() => setAttachedFilesSidebarVisible(true)}
+        />
+      )}
       <Button
         severity="secondary"
         size="small"
@@ -72,7 +101,7 @@ const ActivityMenu: React.FC = memo(() => {
         position="right"
         onHide={() => setSettingsSidebarVisible(false)}
       >
-        <SidebarContent
+        <SettingsSidebarContent
           showHelp={
             activityJS.activitySession?.type.helpUrl
               ? () => {
@@ -83,6 +112,14 @@ const ActivityMenu: React.FC = memo(() => {
           }
         />
       </Sidebar>
+      <Sidebar
+        header="Fichiers joints"
+        visible={attachedFilesSidebarVisible}
+        position="right"
+        onHide={() => setAttachedFilesSidebarVisible(false)}
+      >
+        <AttachedFilesSidebarContent />
+      </Sidebar>
       {activityJS.activitySession?.type.helpUrl && (
         <Dialog
           id="metaPlayerHelpDialog"

package/src/features/navbar/AttachedFilesSidebarContent.tsx

@@ -0,0 +1,44 @@
+import { FC } from "react";
+import { useAttachedFiles } from "../functionalities/hooks";
+import { useAppSelector } from "../../app/hooks";
+import { selectAttachedFilesOptions } from "../functionalities/functionalitiesSlice";
+
+const AttachedFilesSidebarContent: FC = () => {
+  const filesData = useAttachedFiles();
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+
+  return (
+    <div>
+      {filesData.map((file) => (
+        <p key={file.urlOrId}>
+          <a
+            href={file.urlOrId}
+            target="_blank"
+            rel="noreferrer"
+            download={file.name}
+            style={{
+              color: file.isTemporary ? "rgb(200, 0, 0)" : "rgb(0, 50, 200)",
+              textDecoration:
+                file.interactionMode === "download" ? "underline" : "none",
+            }}
+            onClick={(e) => {
+              if (file.interactionMode !== "download") {
+                e.preventDefault();
+                if (
+                  file.interactionMode === "custom" &&
+                  attachedFilesOptions.middleware?.handleFileClick
+                ) {
+                  attachedFilesOptions.middleware.handleFileClick(file);
+                }
+              }
+            }}
+          >
+            {file.name}
+          </a>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default AttachedFilesSidebarContent;

package/src/features/navbar/CapytaleMenu.tsx

@@ -115,7 +115,7 @@ const CapytaleMenu: React.FC = () => {
             }} */
         }
 
-        {mode === "create" && (
+        {mode === "create" && sharingInfo.code && (
           <SplitButton
             label={isLarge ? sharingInfo.code : undefined}
             severity="secondary"
@@ -130,7 +130,7 @@ const CapytaleMenu: React.FC = () => {
               },
             }}
             onClick={async () => {
-              await copyToClipboard(sharingInfo.code);
+              await copyToClipboard(sharingInfo.code!);
               toast.current!.show({
                 summary: "Code copié",
                 detail: "Le code de partage a été copié dans le presse-papier.",
@@ -143,7 +143,7 @@ const CapytaleMenu: React.FC = () => {
                 label: "Copier l'URL de partage",
                 icon: "pi pi-link",
                 command: () => {
-                  copyToClipboard(sharingInfo.codeLink).then(() => {
+                  copyToClipboard(sharingInfo.codeLink!).then(() => {
                     toast.current!.show({
                       summary: "URL copiée",
                       detail:

package/src/features/navbar/{SidebarContent.tsx → SettingsSidebarContent.tsx}

@@ -25,11 +25,11 @@ import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
 import settings from "../../settings";
 import { useReset } from "../activityJS/hooks";
 
-type SidebarContentProps = {
+type SettingsSidebarContentProps = {
   showHelp?: () => void;
 };
 
-const SidebarContent: FC<SidebarContentProps> = (props) => {
+const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
   const canChooseOrientation = useAppSelector(selectCanChoosePedagoLayout);
   const canChooseTheme = useAppSelector(selectCanChooseTheme);
   const orientation = useAppSelector(selectOrientation);
@@ -182,4 +182,4 @@ const SidebarContent: FC<SidebarContentProps> = (props) => {
   );
 };
 
-export default SidebarContent;
+export default SettingsSidebarContent;

package/src/features/pedago/index.tsx

@@ -15,23 +15,22 @@ import {
   selectComments,
   selectGrading,
   selectHasGradingOrComments,
+  selectHasInstructions,
   selectMode,
   setComments,
   setGrading,
   setIsMPDirty,
 } from "../activityData/activityDataSlice";
-import { ChangeEventHandler } from "react";
+import { ChangeEventHandler, FC } from "react";
 import { DivProps } from "react-html-props";
 import SharedNotesEditor from "./SharedNotesEditor";
 import { PedagoCommands } from "./PedagoCommands";
 import { PdfEditor } from "./PdfEditor";
 
 const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
-  const dispatch = useAppDispatch();
   const mode = useAppSelector(selectMode);
-  const comments = useAppSelector(selectComments);
-  const grading = useAppSelector(selectGrading);
   const pedagoTab = useAppSelector(selectPedagoTab);
+  const hasInstructions = useAppSelector(selectHasInstructions);
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
   const isGradingVisible =
     useAppSelector(selectIsGradingVisible) &&
@@ -41,19 +40,13 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
     ? (tab: Array<any>) => tab.toReversed()
     : (tab: Array<any>) => tab;
 
-  const handleCommentsChange: ChangeEventHandler<HTMLTextAreaElement> = (
-    event,
-  ) => {
-    dispatch(setComments(event.target.value));
-    dispatch(setIsMPDirty(true));
-  };
-
-  const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
-    event,
-  ) => {
-    dispatch(setGrading(event.target.value));
-    dispatch(setIsMPDirty(true));
-  };
+  if (!hasInstructions) {
+    return (
+      <div className={styles.gradingPanel}>
+        <Grading />
+      </div>
+    );
+  }
 
   return (
     // @ts-ignore - Incompatibility for props in TS
@@ -82,56 +75,7 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
                 size={40}
                 className={styles.gradingPanel}
               >
-                <Panel
-                  className={classNames(
-                    styles.fullSizePanel,
-                    styles.pedagoFeedbackPanel,
-                  )}
-                  header="Appréciation"
-                >
-                  <div className={styles.pedagoFeedback}>
-                    {(comments || mode !== "assignment") && (
-                      <textarea
-                        value={comments || ""}
-                        placeholder={
-                          mode !== "review" ? "" : "Rédigez ici l'appréciation."
-                        }
-                        id="comments"
-                        name="comments"
-                        rows={2}
-                        readOnly={mode !== "review"}
-                        onChange={handleCommentsChange}
-                        className={styles.fullTextarea}
-                      />
-                    )}
-                  </div>
-                </Panel>
-                <Panel
-                  className={classNames(
-                    styles.fullSizePanel,
-                    styles.pedagoGradePanel,
-                  )}
-                  header="Évaluation"
-                >
-                  <div className={styles.pedagoGrade}>
-                    {(grading || mode !== "assignment") && (
-                      <textarea
-                        value={grading || ""}
-                        placeholder={
-                          mode !== "review"
-                            ? ""
-                            : "Écrivez ici l'évaluation libre (chiffrée ou non)."
-                        }
-                        id="grading"
-                        name="grading"
-                        rows={1}
-                        readOnly={mode !== "review"}
-                        onChange={handleGradingChange}
-                        className={styles.fullTextarea}
-                      />
-                    )}
-                  </div>
-                </Panel>
+                <Grading />
               </SplitterPanel>,
               <SplitterPanel
                 key="pedagoPanel"
@@ -162,4 +106,74 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   );
 };
 
+const Grading: FC = () => {
+  const mode = useAppSelector(selectMode);
+  const comments = useAppSelector(selectComments);
+  const grading = useAppSelector(selectGrading);
+  const dispatch = useAppDispatch();
+
+  const handleCommentsChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    dispatch(setComments(event.target.value));
+    dispatch(setIsMPDirty(true));
+  };
+
+  const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    dispatch(setGrading(event.target.value));
+    dispatch(setIsMPDirty(true));
+  };
+
+  return (
+    <>
+      <Panel
+        className={classNames(styles.fullSizePanel, styles.pedagoFeedbackPanel)}
+        header="Appréciation"
+      >
+        <div className={styles.pedagoFeedback}>
+          {(comments || mode !== "assignment") && (
+            <textarea
+              value={comments || ""}
+              placeholder={
+                mode !== "review" ? "" : "Rédigez ici l'appréciation."
+              }
+              id="comments"
+              name="comments"
+              rows={2}
+              readOnly={mode !== "review"}
+              onChange={handleCommentsChange}
+              className={styles.fullTextarea}
+            />
+          )}
+        </div>
+      </Panel>
+      <Panel
+        className={classNames(styles.fullSizePanel, styles.pedagoGradePanel)}
+        header="Évaluation"
+      >
+        <div className={styles.pedagoGrade}>
+          {(grading || mode !== "assignment") && (
+            <textarea
+              value={grading || ""}
+              placeholder={
+                mode !== "review"
+                  ? ""
+                  : "Écrivez ici l'évaluation libre (chiffrée ou non)."
+              }
+              id="grading"
+              name="grading"
+              rows={1}
+              readOnly={mode !== "review"}
+              onChange={handleGradingChange}
+              className={styles.fullTextarea}
+            />
+          )}
+        </div>
+      </Panel>
+    </>
+  );
+};
+
 export default Pedago;

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

@@ -129,6 +129,7 @@
 .gradingPanel {
   display: flex;
   gap: 4px;
+  width: 100%;
 }
 
 *:has(> .fullSizePanel) {

package/src/types.ts

@@ -0,0 +1,10 @@
+export type AntiCheatOptions = {
+  preserveDom: boolean;
+  hasIframes: boolean;
+};
+
+export type UIOptions = {
+  closePedagoByDefault: boolean;
+  noWorkflow: boolean;
+  noSaveForStudents: boolean;
+};