@capytale/meta-player 0.0.3 → 0.1.1

package/src/features/navbar/CapytaleMenu.tsx

@@ -1,9 +1,10 @@
 import { Button } from "primereact/button";
 import { SplitButton } from "primereact/splitbutton";
 import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
+import { Toast } from "primereact/toast";
 
 import styles from "./style.module.scss";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { useWindowSize } from "@uidotdev/usehooks";
 import { ML, XL } from "../../utils/breakpoints";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
@@ -38,6 +39,7 @@ const CapytaleMenu: React.FC = () => {
     () => windowsSize.width && windowsSize.width < ML,
     [windowsSize.width],
   );
+  const toast = useRef<Toast>(null);
   const changeWorkflow = (value: wf) => {
     dispatch(setWorkflow(value));
     dispatch(setSaveState("should-save"));
@@ -55,135 +57,151 @@ const CapytaleMenu: React.FC = () => {
     });
   };
   return (
-    <div className={styles.capytaleMenu}>
-      {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}
-          severity="secondary"
-          size="small"
-          icon="pi pi-share-alt"
-          outlined
-          buttonProps={{
-            tooltip: "Copier le code de partage",
-            tooltipOptions: {
+    <>
+      <Toast ref={toast} position="bottom-right" />
+      <div className={styles.capytaleMenu}>
+        {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,
-            },
-          }}
-          onClick={() => {
-            copyToClipboard(sharingInfo.code);
-          }}
-          model={[
-            {
-              label: "Copier l'URL de partage",
-              icon: "pi pi-link",
-              command: () => {
-                copyToClipboard(sharingInfo.codeLink);
+              showOnDisabled: true,
+            }}
+            onClick={() => {
+              dispatch(setSaveState("should-save"));
+            }}
+          />
+        )}
+
+        {mode === "create" && (
+          <SplitButton
+            label={isLarge ? sharingInfo.code : undefined}
+            severity="secondary"
+            size="small"
+            icon="pi pi-share-alt"
+            outlined
+            buttonProps={{
+              tooltip: "Copier le code de partage",
+              tooltipOptions: {
+                position: "bottom",
+                showDelay: settings.TOOLTIP_SHOW_DELAY,
+              },
+            }}
+            onClick={async () => {
+              await copyToClipboard(sharingInfo.code);
+              toast.current!.show({
+                summary: "Code copié",
+                detail: "Le code de partage a été copié dans le presse-papier.",
+                severity: "info",
+                life: 2000,
+              });
+            }}
+            model={[
+              {
+                label: "Copier l'URL de partage",
+                icon: "pi pi-link",
+                command: () => {
+                  copyToClipboard(sharingInfo.codeLink).then(() => {
+                    toast.current!.show({
+                      summary: "URL copiée",
+                      detail:
+                        "L'URL de partage a été copiée dans le presse-papier.",
+                      severity: "info",
+                      life: 2000,
+                    });
+                  });
+                },
               },
-            },
-          ]}
-        />
-      )}
-      {mode === "assignment" && workflow === "current" && (
-        <Button
-          outlined
-          label="Rendre"
-          icon="pi pi-envelope"
-          onClick={() => {
-            console.log("Hey");
-            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" && (
-        <SplitButton
-          label={
-            workflow === "current"
-              ? "En cours"
-              : workflow === "finished"
-                ? "Rendue"
-                : "Corrigée"
-          }
-          severity="secondary"
-          size="small"
-          icon={
-            workflow === "current"
-              ? "pi pi-pencil"
-              : workflow === "finished"
-                ? "pi pi-envelope"
-                : "pi pi-check-square"
-          }
-          outlined
-          model={[
-            ...(workflow === "current"
-              ? []
-              : [
-                  {
-                    label: "Réautoriser la modification",
-                    icon: "pi pi-pencil",
-                    command: () => {
-                      changeWorkflow("current");
+            ]}
+          />
+        )}
+        {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" && (
+          <SplitButton
+            label={
+              workflow === "current"
+                ? "En cours"
+                : workflow === "finished"
+                  ? "Rendue"
+                  : "Corrigée"
+            }
+            severity="secondary"
+            size="small"
+            icon={
+              workflow === "current"
+                ? "pi pi-pencil"
+                : workflow === "finished"
+                  ? "pi pi-envelope"
+                  : "pi pi-check-square"
+            }
+            outlined
+            model={[
+              ...(workflow === "current"
+                ? []
+                : [
+                    {
+                      label: "Réautoriser la modification",
+                      icon: "pi pi-pencil",
+                      command: () => {
+                        changeWorkflow("current");
+                      },
                     },
-                  },
-                ]),
-            ...(workflow === "finished"
-              ? []
-              : [
-                  {
-                    label: "Marquer comme rendue",
-                    icon: "pi pi-envelope",
-                    command: () => {
-                      changeWorkflow("finished");
+                  ]),
+              ...(workflow === "finished"
+                ? []
+                : [
+                    {
+                      label: "Marquer comme rendue",
+                      icon: "pi pi-envelope",
+                      command: () => {
+                        changeWorkflow("finished");
+                      },
                     },
-                  },
-                ]),
-            ...(workflow === "corrected"
-              ? []
-              : [
-                  {
-                    label: "Marquer comme corrigée",
-                    icon: "pi pi-check-square",
-                    command: () => {
-                      changeWorkflow("corrected");
+                  ]),
+              ...(workflow === "corrected"
+                ? []
+                : [
+                    {
+                      label: "Marquer comme corrigée",
+                      icon: "pi pi-check-square",
+                      command: () => {
+                        changeWorkflow("corrected");
+                      },
                     },
-                  },
-                ]),
-          ]}
-        />
-      )}
-      <ConfirmDialog />
-    </div>
+                  ]),
+            ]}
+          />
+        )}
+        <ConfirmDialog />
+      </div>
+    </>
   );
 };
 

package/src/features/navbar/GradingNav.tsx

@@ -19,7 +19,6 @@ const GradingNav: React.FC = () => {
   const nid = useAppSelector(selectNid) as number;
   const mode = useAppSelector(selectMode);
   const activityNid = useAppSelector(selectActivityNid) as number;
-  console.log("Le nid est : ", nid);
   useEffect(() => {
     evalApi.listSa(activityNid).then((j) => {
       setStudentList(j);

package/src/features/navbar/SidebarContent.tsx

@@ -19,8 +19,15 @@ import {
   selectCanChoosePedagoLayout,
   selectCanChooseTheme,
 } from "../activityData/activityDataSlice";
+import { ActivitySettingsDisplay } from "../activitySettings";
+import { Button } from "primereact/button";
+import settings from "../../settings";
 
-const SidebarContent: FC = () => {
+type SidebarContentProps = {
+  showHelp?: () => void;
+};
+
+const SidebarContent: FC<SidebarContentProps> = (props) => {
   const canChooseOrientation = useAppSelector(selectCanChoosePedagoLayout);
   const canChooseTheme = useAppSelector(selectCanChooseTheme);
   const orientation = useAppSelector(selectOrientation);
@@ -29,11 +36,30 @@ const SidebarContent: FC = () => {
   const dispatch = useAppDispatch();
   return (
     <>
+      {props.showHelp && (
+        <div className={styles.sidebarCapytaleActions}>
+          <Button
+            severity="secondary"
+            size="small"
+            icon={"pi pi-question-circle"}
+            onClick={() => {
+              props.showHelp!();
+            }}
+            outlined
+            label="Documentation"
+            tooltip="Voir la documentation"
+            tooltipOptions={{
+              position: "left",
+              showDelay: settings.TOOLTIP_SHOW_DELAY,
+            }}
+          />
+        </div>
+      )}
       {sidebarActions.length > 0 && (
         <Fieldset
           legend="Actions"
           className={classNames(
-            styles.sidebarFieldset,
+            "sidebarFieldset",
             styles.sidebarFieldsetButtons,
           )}
         >
@@ -41,9 +67,9 @@ const SidebarContent: FC = () => {
         </Fieldset>
       )}
       {canChooseOrientation && (
-        <Fieldset legend="Disposition" className={styles.sidebarFieldset}>
-          <div className={styles.sidebarRadioButtons}>
-            <div className={styles.sidebarRadioGroup}>
+        <Fieldset legend="Disposition" className="sidebarFieldset">
+          <div className="sidebarRadioButtons">
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-horizontal"
                 name="horizontal"
@@ -55,7 +81,7 @@ const SidebarContent: FC = () => {
                 Horizontale
               </label>
             </div>
-            <div className={styles.sidebarRadioGroup}>
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-vertical"
                 name="vertical"
@@ -71,9 +97,9 @@ const SidebarContent: FC = () => {
         </Fieldset>
       )}
       {canChooseTheme && (
-        <Fieldset legend="Thème" className={styles.sidebarFieldset}>
-          <div className={styles.sidebarRadioButtons}>
-            <div className={styles.sidebarRadioGroup}>
+        <Fieldset legend="Thème" className="sidebarFieldset">
+          <div className="sidebarRadioButtons">
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-light"
                 name="light"
@@ -88,7 +114,7 @@ const SidebarContent: FC = () => {
                 Clair
               </label>
             </div>
-            <div className={styles.sidebarRadioGroup}>
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-dark"
                 name="dark"
@@ -103,7 +129,7 @@ const SidebarContent: FC = () => {
                 Sombre
               </label>
             </div>
-            <div className={styles.sidebarRadioGroup}>
+            <div className="sidebarRadioGroup">
               <RadioButton
                 inputId="rb-auto"
                 name="auto"
@@ -118,6 +144,7 @@ const SidebarContent: FC = () => {
           </div>
         </Fieldset>
       )}
+      <ActivitySettingsDisplay />
     </>
   );
 };

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

@@ -139,24 +139,15 @@
   align-items: center;
 }
 
-.sidebarFieldset {
-  margin-bottom: 8px;
-}
-
 .sidebarFieldsetButtons :global(.p-fieldset-content) {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
-.sidebarRadioButtons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.sidebarRadioGroup {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+.sidebarCapytaleActions {
+  margin-bottom: 8px;
+  & > button {
+    width: 100%;
+  }
 }

package/src/features/pedago/index.tsx

@@ -48,7 +48,6 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   ) => {
     dispatch(setComments(event.target.value));
     dispatch(setIsMPDirty(true));
-    console.log("51");
   };
 
   const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
@@ -56,7 +55,6 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   ) => {
     dispatch(setGrading(event.target.value));
     dispatch(setIsMPDirty(true));
-    console.log("59");
   };
 
   return (

package/src/index.css

@@ -33,8 +33,57 @@ body,
   color-scheme: light;
 }
 
+.p-splitter-panel:has(> #meta-player-content-cover) {
+  position: relative;
+}
+
+#meta-player-content-cover {
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0);
+  .p-splitter-resizing & {
+    display: block;
+  }
+}
+
 #meta-player-content,
 :has(> #meta-player-content) {
   height: 100%;
   background-color: var(--surface-a);
 }
+
+.sidebarFieldset {
+  margin-bottom: 8px;
+}
+
+.sidebarRadioButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebarRadioGroup {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+#metaPlayerHelpDialog {
+  width: 80vw;
+  height: 80vh;
+}
+
+#metaPlayerHelpDialog_content {
+  padding: 0;
+  & iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+  }
+}

package/src/utils/equality.ts

@@ -0,0 +1,32 @@
+// https://medium.com/@stheodorejohn/javascript-object-deep-equality-comparison-in-javascript-7aa227e889d4
+
+export function deepEqual(obj1: any, obj2: any): boolean {
+  // Base case: If both objects are identical, return true.
+  if (obj1 === obj2) {
+    return true;
+  }
+  // Check if both objects are objects and not null.
+  if (
+    typeof obj1 !== "object" ||
+    typeof obj2 !== "object" ||
+    obj1 === null ||
+    obj2 === null
+  ) {
+    return false;
+  }
+  // Get the keys of both objects.
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  // Check if the number of keys is the same.
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  // Iterate through the keys and compare their values recursively.
+  for (const key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+  // If all checks pass, the objects are deep equal.
+  return true;
+}

package/src/features/activityData/OptionSetter.tsx

@@ -1,35 +0,0 @@
-import { FC } from "react";
-import { useAppDispatch } from "../../app/hooks";
-import { setPlayerSettings } from "./activityDataSlice";
-import { setLayout } from "../layout/layoutSlice";
-import { setAutoSwitch, switchToTheme } from "../theming/themingSlice";
-import { MetaPlayerOptions } from "./metaPlayerOptions";
-
-type OptionSetterProps = {
-  options: MetaPlayerOptions;
-};
-
-const OptionSetter: FC<OptionSetterProps> = ({ options }) => {
-  const dispatch = useAppDispatch();
-  if (!options.supportsLightTheme && !options.supportsDarkTheme) {
-    throw new Error("At least one theme must be supported");
-  }
-  dispatch(setPlayerSettings(options));
-  dispatch(
-    setLayout(
-      options.pedagoLayout === "horizontal" ||
-        options.pedagoLayout === "default-horizontal"
-        ? "horizontal"
-        : "vertical",
-    ),
-  );
-  if (options.supportsDarkTheme && options.supportsLightTheme) {
-    dispatch(setAutoSwitch(true));
-  } else {
-    dispatch(setAutoSwitch(false));
-    dispatch(switchToTheme(options.supportsLightTheme ? "light" : "dark"));
-  }
-  return null;
-};
-
-export default OptionSetter;