@capytale/meta-player 0.1.0 → 0.1.1

package/package.json

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

package/src/features/navbar/ActivityMenu.tsx

@@ -7,6 +7,8 @@ import SidebarContent from "./SidebarContent";
 import settings from "../../settings";
 import ActivityQuickActions from "./ActivityQuickActions";
 import useFullscreen from "../../utils/useFullscreen";
+import { useActivityJS } from "../activityJS/ActivityJSProvider";
+import { Dialog } from "primereact/dialog";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
@@ -14,13 +16,15 @@ const ActivityMenu: React.FC = memo(() => {
   const isFullscreen = useFullscreen(wantFullscreen, () =>
     setWantFullscreen(false),
   );
+  const [helpDialogVisible, setHelpDialogVisible] = useState(false);
+  const activityJS = useActivityJS();
   return (
     <div className={styles.activityMenu}>
       <ActivityQuickActions />
       <Button
         severity="secondary"
         size="small"
-        icon={isFullscreen ? "pi pi-expand" : "pi pi-expand" }
+        icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
         text
         tooltip="Plein écran"
         tooltipOptions={{
@@ -47,8 +51,32 @@ const ActivityMenu: React.FC = memo(() => {
         position="right"
         onHide={() => setSettingsSidebarVisible(false)}
       >
-        <SidebarContent />
+        <SidebarContent
+          showHelp={
+            activityJS.activitySession?.type.helpUrl
+              ? () => {
+                  setHelpDialogVisible(true);
+                  setSettingsSidebarVisible(false);
+                }
+              : undefined
+          }
+        />
       </Sidebar>
+      {activityJS.activitySession?.type.helpUrl && (
+        <Dialog
+          id="metaPlayerHelpDialog"
+          header="Documentation"
+          visible={helpDialogVisible}
+          onHide={() => setHelpDialogVisible(false)}
+          maximizable={true}
+        >
+          <iframe
+            src={activityJS.activitySession?.type.helpUrl}
+            style={{ width: "100%", height: "100%" }}
+            title="Documentation"
+          />
+        </Dialog>
+      )}
     </div>
   );
 });

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,134 +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={() => {
-            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/SidebarContent.tsx

@@ -20,8 +20,14 @@ import {
   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);
@@ -30,6 +36,25 @@ 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"

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

@@ -144,3 +144,10 @@
   flex-direction: column;
   gap: 6px;
 }
+
+.sidebarCapytaleActions {
+  margin-bottom: 8px;
+  & > button {
+    width: 100%;
+  }
+}

package/src/index.css

@@ -59,9 +59,6 @@ body,
 
 .sidebarFieldset {
   margin-bottom: 8px;
-  & .p-button-label {
-    text-align: left;
-  }
 }
 
 .sidebarRadioButtons {
@@ -75,3 +72,18 @@ body,
   gap: 8px;
   align-items: center;
 }
+
+#metaPlayerHelpDialog {
+  width: 80vw;
+  height: 80vh;
+}
+
+#metaPlayerHelpDialog_content {
+  padding: 0;
+  & iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+  }
+}