@capytale/meta-player 0.8.2 → 0.8.3

package/src/features/navbar/activity-menu/index.tsx

@@ -1,153 +1,154 @@
-import { useMemo, useState } from "react";
-import styles from "./style.module.scss";
-
-import { Button } from "primereact/button";
-import { Sidebar } from "primereact/sidebar";
-import SettingsSidebarContent from "../sidebars/SettingsSidebarContent";
-import settings from "../../../settings";
-import ActivityQuickActions from "./ActivityQuickActions";
-import useFullscreen from "../../../utils/useFullscreen";
-import { useActivityJS } from "../../activityJS/ActivityJSProvider";
-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 "../sidebars/AttachedFilesSidebarContent";
-import { Badge } from "primereact/badge";
-import { useAttachedFiles } from "../../functionalities/hooks";
-import {
-  selectAttachedFilesEnabled,
-  selectAttachedFilesOptions,
-} from "../../functionalities/functionalitiesSlice";
-
-const ActivityMenu: React.FC = () => {
-  const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
-  const [attachedFilesSidebarVisible, setAttachedFilesSidebarVisible] =
-    useState(false);
-  const [wantFullscreen, setWantFullscreen] = useState(false);
-  const isFullscreen = useFullscreen(wantFullscreen, () =>
-    setWantFullscreen(false),
-  );
-  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
-  const [helpDialogVisible, setHelpDialogVisible] = useState(false);
-  const activityJS = useActivityJS();
-  const hasAntiCheat = useAppSelector(selectHasAntiCheat);
-  const attachedFiles = useAttachedFiles(); // causes a bug for now - TODO: debug
-  const attachedFilesEnabled = useAppSelector(selectAttachedFilesEnabled);
-  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
-  return (
-    <div className={styles.activityMenu}>
-      <ActivityQuickActions />
-      {attachedFilesEnabled && (
-        <Button
-          aria-label="Afficher les fichiers joints"
-          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={() => {
-            attachedFilesOptions.onViewFiles?.();
-            setAttachedFilesSidebarVisible(true);
-          }}
-        />
-      )}
-      <Button
-        aria-label="Afficher les paramètres"
-        severity="secondary"
-        size="small"
-        icon="pi pi-cog" // pi-ellipsis-v
-        outlined
-        tooltip="Paramètres"
-        tooltipOptions={{
-          position: "left",
-          showDelay: settings.TOOLTIP_SHOW_DELAY,
-        }}
-        onClick={() => setSettingsSidebarVisible(true)}
-      />
-      {!hasAntiCheat && (
-        <Button
-          aria-label="Mettre en plein écran"
-          severity="secondary"
-          size="small"
-          icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
-          text
-          tooltip="Plein écran"
-          tooltipOptions={{
-            position: "left",
-            showDelay: settings.TOOLTIP_SHOW_DELAY,
-          }}
-          onClick={() => setWantFullscreen((prev) => !prev)}
-        />
-      )}
-      {isInIframe && (
-        <Button
-          aria-label="Retour à la liste des activités (droite)"
-          severity="secondary"
-          size="small"
-          icon={"pi pi-times"}
-          text
-          tooltip="Retour à la liste des activités"
-          tooltipOptions={{
-            position: "left",
-            showDelay: settings.TOOLTIP_SHOW_DELAY,
-          }}
-          onClick={() => capytaleUI.closeCapytaleIframe()}
-        />
-      )}
-      <Sidebar
-        header="Paramètres"
-        visible={settingsSidebarVisible}
-        position="right"
-        onHide={() => setSettingsSidebarVisible(false)}
-      >
-        <SettingsSidebarContent
-          showHelp={
-            activityJS.activitySession?.type.helpUrl
-              ? () => {
-                  setHelpDialogVisible(true);
-                  setSettingsSidebarVisible(false);
-                }
-              : undefined
-          }
-        />
-      </Sidebar>
-      <Sidebar
-        header="Fichiers joints"
-        visible={attachedFilesSidebarVisible}
-        position="right"
-        onHide={() => setAttachedFilesSidebarVisible(false)}
-      >
-        <AttachedFilesSidebarContent />
-      </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>
-  );
-};
-
-export default ActivityMenu;
+import { useMemo, useState } from "react";
+import styles from "./style.module.scss";
+
+import { Button } from "primereact/button";
+import { Sidebar } from "primereact/sidebar";
+import SettingsSidebarContent from "../sidebars/SettingsSidebarContent";
+import settings from "../../../settings";
+import ActivityQuickActions from "./ActivityQuickActions";
+import useFullscreen from "../../../utils/useFullscreen";
+import { useActivityJS } from "../../activityJS/ActivityJSProvider";
+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 "../sidebars/AttachedFilesSidebarContent";
+import { Badge } from "primereact/badge";
+import { useAttachedFiles } from "../../functionalities/hooks";
+import {
+  selectAttachedFilesEnabled,
+  selectAttachedFilesOptions,
+} from "../../functionalities/functionalitiesSlice";
+
+const ActivityMenu: React.FC = () => {
+  const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
+  const [attachedFilesSidebarVisible, setAttachedFilesSidebarVisible] =
+    useState(false);
+  const [wantFullscreen, setWantFullscreen] = useState(false);
+  const isFullscreen = useFullscreen(wantFullscreen, () =>
+    setWantFullscreen(false),
+  );
+  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
+  const [helpDialogVisible, setHelpDialogVisible] = useState(false);
+  const activityJS = useActivityJS();
+  const hasAntiCheat = useAppSelector(selectHasAntiCheat);
+  const attachedFiles = useAttachedFiles(); // causes a bug for now - TODO: debug
+  const attachedFilesEnabled = useAppSelector(selectAttachedFilesEnabled);
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+  return (
+    <div className={styles.activityMenu}>
+      <ActivityQuickActions />
+      {attachedFilesEnabled && (
+        <Button
+          aria-label="Afficher les fichiers joints"
+          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={() => {
+            attachedFilesOptions.onViewFiles?.();
+            setAttachedFilesSidebarVisible(true);
+          }}
+        />
+      )}
+      <Button
+        aria-label="Afficher les paramètres"
+        severity="secondary"
+        size="small"
+        icon="pi pi-cog" // pi-ellipsis-v
+        outlined
+        tooltip="Paramètres"
+        tooltipOptions={{
+          position: "left",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+        }}
+        onClick={() => setSettingsSidebarVisible(true)}
+      />
+      {!hasAntiCheat && (
+        <Button
+          aria-label="Mettre en plein écran"
+          severity="secondary"
+          size="small"
+          icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
+          text
+          tooltip="Plein écran"
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          onClick={() => setWantFullscreen((prev) => !prev)}
+        />
+      )}
+      {isInIframe && (
+        <Button
+          aria-label="Retour à la liste des activités (droite)"
+          severity="secondary"
+          size="small"
+          icon={"pi pi-times"}
+          text
+          tooltip="Retour à la liste des activités"
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          onClick={() => capytaleUI.closeCapytaleIframe()}
+        />
+      )}
+      <Sidebar
+        header="Paramètres"
+        visible={settingsSidebarVisible}
+        position="right"
+        onHide={() => setSettingsSidebarVisible(false)}
+        style={{ width: "24rem", maxWidth: "100%" }}
+      >
+        <SettingsSidebarContent
+          showHelp={
+            activityJS.activitySession?.type.helpUrl
+              ? () => {
+                  setHelpDialogVisible(true);
+                  setSettingsSidebarVisible(false);
+                }
+              : undefined
+          }
+        />
+      </Sidebar>
+      <Sidebar
+        header="Fichiers joints"
+        visible={attachedFilesSidebarVisible}
+        position="right"
+        onHide={() => setAttachedFilesSidebarVisible(false)}
+      >
+        <AttachedFilesSidebarContent />
+      </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>
+  );
+};
+
+export default ActivityMenu;

package/src/features/navbar/activity-menu/style.module.scss

@@ -1,7 +1,7 @@
-.activityMenu {
-  padding-right: 16px;
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  align-items: center;
-}
+.activityMenu {
+  padding-right: 16px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+}

package/src/features/navbar/capytale-menu/CloneDialog.tsx

@@ -1,75 +1,75 @@
-import { FC, useCallback, useEffect, useState } from "react";
-import { useAppSelector } from "../../../app/hooks";
-import { Dialog } from "primereact/dialog";
-import { selectActivityInfo } from "../../activityData/activityDataSlice";
-import { Button } from "primereact/button";
-import { apiCloneActivity } from "../../../utils/capytale";
-import { useActivityJsEssentials } from "../../activityJS/ActivityJSProvider";
-import { InputText } from "primereact/inputtext";
-
-const CloneDialog: FC<{ visible: boolean; onHide: () => any }> = ({
-  visible,
-  onHide,
-}) => {
-  const { nid } = useActivityJsEssentials();
-  const activityTitle = useAppSelector(selectActivityInfo).title;
-  const [newTitle, setNewTitle] = useState<string>(activityTitle);
-  const clone = useCallback(async () => {
-    const clone = await apiCloneActivity(nid, newTitle);
-    const newNid = clone.nid;
-    const url = `/web/c-act/n/${newNid}/play/create`;
-    // redirect to the new activity in a new tab
-    window.open(url, "_blank");
-    onHide();
-  }, [nid, newTitle, onHide]);
-
-  useEffect(() => {
-    setNewTitle(activityTitle);
-  }, [activityTitle, visible]);
-
-  return (
-    <Dialog
-      visible={visible}
-      header={"Choisissez le titre du clone"}
-      onHide={onHide}
-      style={{ width: "750px", maxWidth: "100%" }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "0.5rem",
-          marginBottom: "1rem",
-        }}
-      >
-        <label htmlFor="title-input">Titre</label>
-        <InputText
-          id="title-input"
-          value={newTitle}
-          onChange={(e) => setNewTitle(e.target.value)}
-        />
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-end",
-            gap: "0.5rem",
-          }}
-        >
-          <Button
-            aria-label="Annuler le clonage"
-            label="Annuler"
-            onClick={onHide}
-            severity="secondary"
-          />
-          <Button
-            aria-label="Confirmer le clonage"
-            label="Cloner"
-            onClick={clone}
-          />
-        </div>
-      </div>
-    </Dialog>
-  );
-};
-
-export default CloneDialog;
+import { FC, useCallback, useEffect, useState } from "react";
+import { useAppSelector } from "../../../app/hooks";
+import { Dialog } from "primereact/dialog";
+import { selectActivityInfo } from "../../activityData/activityDataSlice";
+import { Button } from "primereact/button";
+import { apiCloneActivity } from "../../../utils/capytale";
+import { useActivityJsEssentials } from "../../activityJS/ActivityJSProvider";
+import { InputText } from "primereact/inputtext";
+
+const CloneDialog: FC<{ visible: boolean; onHide: () => any }> = ({
+  visible,
+  onHide,
+}) => {
+  const { nid } = useActivityJsEssentials();
+  const activityTitle = useAppSelector(selectActivityInfo).title;
+  const [newTitle, setNewTitle] = useState<string>(activityTitle);
+  const clone = useCallback(async () => {
+    const clone = await apiCloneActivity(nid, newTitle);
+    const newNid = clone.nid;
+    const url = `/web/c-act/n/${newNid}/play/create`;
+    // redirect to the new activity in a new tab
+    window.open(url, "_blank");
+    onHide();
+  }, [nid, newTitle, onHide]);
+
+  useEffect(() => {
+    setNewTitle(activityTitle);
+  }, [activityTitle, visible]);
+
+  return (
+    <Dialog
+      visible={visible}
+      header={"Choisissez le titre du clone"}
+      onHide={onHide}
+      style={{ width: "750px", maxWidth: "100%" }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5rem",
+          marginBottom: "1rem",
+        }}
+      >
+        <label htmlFor="title-input">Titre</label>
+        <InputText
+          id="title-input"
+          value={newTitle}
+          onChange={(e) => setNewTitle(e.target.value)}
+        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "0.5rem",
+          }}
+        >
+          <Button
+            aria-label="Annuler le clonage"
+            label="Annuler"
+            onClick={onHide}
+            severity="secondary"
+          />
+          <Button
+            aria-label="Confirmer le clonage"
+            label="Cloner"
+            onClick={clone}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default CloneDialog;