@capytale/meta-player 0.6.15 → 0.6.16

package/package.json

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

package/src/MetaPlayer.tsx

@@ -34,6 +34,7 @@ import {
 import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
 import ExitWarning from "./features/activityData/ExitWarning";
 import type { AntiCheatOptions, UIOptions } from "./types";
+import { ToastProvider } from "./features/toast";
 
 type MetaPlayerProps = PropsWithChildren<{
   activityJSOptions?: LoadOptions;
@@ -45,11 +46,14 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
   const primeSettings: Partial<APIOptions> = {
     ripple: true,
   };
-  const antiCheatOptions: AntiCheatOptions = useMemo(() => ({
-    preserveDom: true,
-    hasIframes: false,
-    ...props.antiCheatOptions,
-  }), [props.antiCheatOptions]);
+  const antiCheatOptions: AntiCheatOptions = useMemo(
+    () => ({
+      preserveDom: true,
+      hasIframes: false,
+      ...props.antiCheatOptions,
+    }),
+    [props.antiCheatOptions],
+  );
   const uiOptions: UIOptions = {
     closePedagoByDefault: false,
     noWorkflow: false,
@@ -70,33 +74,35 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
   );
   return (
     <PrimeReactProvider value={primeSettings}>
-      <Provider store={store}>
-        <ThemeSwitcher />
-        <ExitWarning />
-        <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
-          <ActivityJSProvider
-            options={props.activityJSOptions}
-            loadingFallback={<div>Chargement de l'activité...</div>}
-            errorFallback={({ children }) => (
-              <div style={{ marginLeft: "1rem", marginRight: "1rem" }}>
-                <p>Erreur lors du chargement de l'activité : {children}</p>
-                <p>
-                  Êtes-vous bien connecté(e) à Capytale ? Avez-vous bien le
-                  droit d'accéder à cette ressource ?
-                </p>
-                <p>
-                  <a href="/">Retour à l'accueil</a>
-                </p>
-              </div>
-            )}
-          >
-            <Saver />
-            <MetaPlayerContent antiCheatOptions={antiCheatOptions}>
-              <App>{props.children}</App>
-            </MetaPlayerContent>
-          </ActivityJSProvider>
-        </ErrorBoundary>
-      </Provider>
+      <ToastProvider>
+        <Provider store={store}>
+          <ThemeSwitcher />
+          <ExitWarning />
+          <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
+            <ActivityJSProvider
+              options={props.activityJSOptions}
+              loadingFallback={<div>Chargement de l'activité...</div>}
+              errorFallback={({ children }) => (
+                <div style={{ marginLeft: "1rem", marginRight: "1rem" }}>
+                  <p>Erreur lors du chargement de l'activité : {children}</p>
+                  <p>
+                    Êtes-vous bien connecté(e) à Capytale ? Avez-vous bien le
+                    droit d'accéder à cette ressource ?
+                  </p>
+                  <p>
+                    <a href="/">Retour à l'accueil</a>
+                  </p>
+                </div>
+              )}
+            >
+              <Saver />
+              <MetaPlayerContent antiCheatOptions={antiCheatOptions}>
+                <App>{props.children}</App>
+              </MetaPlayerContent>
+            </ActivityJSProvider>
+          </ErrorBoundary>
+        </Provider>
+      </ToastProvider>
     </PrimeReactProvider>
   );
 };

package/src/features/activityJS/Saver.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from "react";
+import { FC, useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   selectSharedNotesContent,
@@ -14,8 +14,8 @@ import {
   selectInstructionsType,
 } from "../activityData/activityDataSlice";
 import { useActivityJS } from "./ActivityJSProvider";
-import { Toast } from "primereact/toast";
 import { selectBeforeSave, selectAfterSave } from "./saverSlice";
+import { useToast } from "../toast";
 
 const Saver: FC<{}> = () => {
   const dispatch = useAppDispatch();
@@ -29,7 +29,7 @@ const Saver: FC<{}> = () => {
   const beforeSave = useAppSelector(selectBeforeSave);
   const afterSave = useAppSelector(selectAfterSave);
 
-  const toast = useRef<Toast>(null);
+  const toast = useToast();
 
   const executePrepareSave = () => {};
   const save = async () => {
@@ -45,7 +45,7 @@ const Saver: FC<{}> = () => {
       } catch (e) {
         console.error("Error in beforeSave callback", e);
         dispatch(setSaveState("idle"));
-        toast.current!.show({
+        toast.show({
           summary: "Erreur : enregistrement annulé",
           detail: (e as any).toString(),
           severity: "error",
@@ -105,7 +105,7 @@ const Saver: FC<{}> = () => {
       }
       dispatch(setIsPlayerDirty(false));
       dispatch(setIsMPDirty(false));
-      toast.current!.show({
+      toast.show({
         summary: "Sauvegarde réussie",
         detail: "L'activité a bien été enregistrée.",
         severity: "success",
@@ -120,7 +120,7 @@ const Saver: FC<{}> = () => {
         } catch (e) {
           console.error("Error in afterSave callback", e);
           dispatch(setSaveState("idle"));
-          toast.current!.show({
+          toast.show({
             summary: "Erreur après sauvegarde",
             detail: (e as any).toString(),
             severity: "error",
@@ -131,7 +131,7 @@ const Saver: FC<{}> = () => {
     } catch (error: any) {
       console.error("Error saving", error);
       dispatch(setSaveState("idle"));
-      toast.current!.show({
+      toast.show({
         summary: "Erreur lors de l'enregistrement",
         detail: error.toString(),
         severity: "error",
@@ -148,11 +148,7 @@ const Saver: FC<{}> = () => {
       save();
     }
   }, [saveState]);
-  return (
-    <>
-      <Toast position="bottom-right" ref={toast} />
-    </>
-  );
+  return null;
 };
 
 export default Saver;

package/src/features/activitySettings/ActivitySettingsSetter.tsx

@@ -5,7 +5,7 @@ import { setSettings } from "./activitySettingsSlice";
 import { deepEqual } from "../../utils/equality";
 
 type ActivitySettingsSetterProps = {
-  settings: ActivitySettings;
+  settings: ActivitySettings | null;
 };
 
 const ActivitySettingsSetter: FC<ActivitySettingsSetterProps> = ({
@@ -18,7 +18,7 @@ const ActivitySettingsSetter: FC<ActivitySettingsSetterProps> = ({
       return;
     }
     oldSettings.current = settings;
-    dispatch(setSettings(settings));
+    dispatch(setSettings(settings || undefined));
   }, [dispatch, settings]);
   return null;
 };

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

@@ -3,7 +3,10 @@ import { useInterval } from "primereact/hooks";
 import { Toast } from "primereact/toast";
 import { useActivityJS } from "../../activityJS/ActivityJSProvider";
 import { useAppSelector } from "../../../app/hooks";
-import { selectIsDirty, selectMode } from "../../activityData/activityDataSlice";
+import {
+  selectIsDirty,
+  selectMode,
+} from "../../activityData/activityDataSlice";
 import { Button } from "primereact/button";
 import { useSave } from "../../activityData/hooks";
 import serverClock from "../../../utils/server-clock";
@@ -17,7 +20,7 @@ const MS_PER_DAY = MS_PER_MINUTE * 60 * 24;
 const MS_PER_YEAR = MS_PER_DAY * 365;
 
 const Countdown: FC = () => {
-  const toast = useRef<Toast>(null);
+  const toast = useRef<Toast>(null); // Using its own toast because it may clear it
   const mode = useAppSelector(selectMode);
   const isDirty = useAppSelector(selectIsDirty);
   const oneMinuteWarningShown = useRef(false);

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

@@ -1,7 +1,6 @@
 import { Button } from "primereact/button";
 import { ButtonGroup } from "primereact/buttongroup";
 import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
-import { Toast } from "primereact/toast";
 import { OverlayPanel } from "primereact/overlaypanel";
 
 import styles from "./style.module.scss";
@@ -25,6 +24,7 @@ import { useActivityJS } from "../../activityJS/ActivityJSProvider";
 import { selectShowWorkflow } from "../../layout/layoutSlice";
 import CountdownAndSaveButton from "./CountdownAndSaveButton";
 import CloneDialog from "./CloneDialog";
+import { useToast } from "../../toast";
 
 const CapytaleMenu: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -40,7 +40,7 @@ const CapytaleMenu: React.FC = () => {
     [windowsSize.width],
   );
   const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
-  const toast = useRef<Toast>(null);
+  const toast = useToast();
   const changeWorkflow = (value: wf) => {
     activityJS.activitySession!.activityBunch.assignmentNode!.workflow = value;
     dispatch(setSaveState("should-save"));
@@ -60,7 +60,6 @@ const CapytaleMenu: React.FC = () => {
   const overlayPanelWorkflow = useRef<OverlayPanel>(null);
   return (
     <>
-      <Toast ref={toast} position="bottom-right" />
       <div className={styles.capytaleMenu}>
         {isInIframe && (
           <Button
@@ -116,7 +115,7 @@ const CapytaleMenu: React.FC = () => {
               }}
               onClick={async () => {
                 await copyToClipboard(sharingInfo.code!);
-                toast.current!.show({
+                toast.show({
                   summary: "Code copié",
                   detail:
                     "Le code de partage a été copié dans le presse-papier.",
@@ -138,7 +137,7 @@ const CapytaleMenu: React.FC = () => {
               }}
               onClick={() => {
                 copyToClipboard(sharingInfo.codeLink!).then(() => {
-                  toast.current!.show({
+                  toast.show({
                     summary: "URL copiée",
                     detail:
                       "L'URL de partage a été copiée dans le presse-papier.",

package/src/features/navbar/sidebars/AttachedFilesSidebarContent.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from "react";
+import { FC } from "react";
 import {
   useAttachedFiles,
   usePreviewImageFile,
@@ -10,13 +10,13 @@ import {
   selectAttachedFilesOptions,
 } from "../../functionalities/functionalitiesSlice";
 import { Button } from "primereact/button";
-import { Toast } from "primereact/toast";
 
 import styles from "./AttachedFilesSidebarContent.module.scss";
 import { copyToClipboard } from "../../../utils/clipboard";
 import { downloadFile } from "../../../utils/download";
 import { useFileUpload } from "use-file-upload";
 import mime from "mime";
+import { useToast } from "../../toast";
 
 const AttachedFilesSidebarContent: FC = () => {
   const filesData = useAttachedFiles();
@@ -76,13 +76,12 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
   fileData,
 }) => {
   const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
-  const toast = useRef<Toast>(null);
+  const toast = useToast();
   const previewTextFile = usePreviewTextFile();
   const previewImageFile = usePreviewImageFile();
 
   return (
     <div className={styles.fileRow}>
-      <Toast ref={toast} position="bottom-right" />
       <Button
         label={fileData.name}
         severity={fileData.isTemporary ? "warning" : "secondary"}
@@ -105,7 +104,7 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
             } else if (mimeType?.startsWith("image")) {
               previewImageFile(fileData.name, fileData.urlOrId);
             } else {
-              toast.current?.show({
+              toast.show({
                 severity: "info",
                 summary: `Impossible de prévisualiser {fileData.name}`,
                 detail: `Aperçu non disponible pour ce type de fichier (${mimeType})`,
@@ -127,7 +126,7 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
               return;
             } else if (fileData.downloadMode === "default") {
               downloadFile(fileData.urlOrId, fileData.name);
-              toast.current?.show({
+              toast.show({
                 severity: "success",
                 summary: "Téléchargement lancé",
                 detail: fileData.name,
@@ -151,14 +150,14 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
               // copy link to clipboard
               copyToClipboard(fileData.urlOrId, (success, error) => {
                 if (success) {
-                  toast.current?.show({
+                  toast.show({
                     severity: "success",
                     summary: "Lien copié",
                     detail: fileData.name,
                     life: 3000,
                   });
                 } else {
-                  toast.current?.show({
+                  toast.show({
                     severity: "error",
                     summary: "Erreur lors de la copie du lien",
                     detail: error,

package/src/features/pedago/InstructionsEditor.tsx

@@ -10,14 +10,14 @@ import {
   setLexicalInstructionsState,
 } from "../activityData/activityDataSlice";
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
-import { Toast } from "primereact/toast";
 import settings from "../../settings";
 import { Button } from "primereact/button";
+import { useToast } from "../toast";
 
 const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
   const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
   const dispatch = useAppDispatch();
-  const toast = useRef<Toast>(null);
+  const toast = useToast();
   const mode = useAppSelector(selectMode);
   const isEditable = mode === "create";
   const initialInstructions = useAppSelector(selectInstructions);
@@ -47,7 +47,6 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
 
   return (
     <>
-      <Toast position="bottom-right" ref={toast} />
       <>
         {instructionsType === "none" && (
           <>
@@ -76,7 +75,7 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
             }}
             onJsonSizeLimitExceeded={() => {
               dispatch(setCanSaveInstructions(false));
-              toast.current!.show({
+              toast.show({
                 summary: "Erreur",
                 detail: `Le contenu de la consigne est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
                 severity: "error",
@@ -85,7 +84,7 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
             }}
             onJsonSizeLimitMet={() => {
               dispatch(setCanSaveInstructions(true));
-              toast.current!.show({
+              toast.show({
                 summary: "Succès",
                 detail: `Le contenu de la consigne ne dépasse plus la taille limite.`,
                 severity: "success",

package/src/features/pedago/SharedNotesEditor.tsx

@@ -11,15 +11,15 @@ import {
   setSharedNotesType,
 } from "../activityData/activityDataSlice";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { Toast } from "primereact/toast";
 import settings from "../../settings";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
+import { useToast } from "../toast";
 
 const SharedNotesEditor: React.FC = forwardRef((_props, ref) => {
   const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
   const dispatch = useAppDispatch();
-  const toast = useRef<Toast>(null);
+  const toast = useToast();
   const mode = useAppSelector(selectMode);
   const workflow = useAppSelector(selectWorkflow);
   const isEditable =
@@ -43,103 +43,100 @@ const SharedNotesEditor: React.FC = forwardRef((_props, ref) => {
 
   return (
     <>
-      <Toast position="bottom-right" ref={toast} />
-      <>
-        {sharedNotesType === "none" && (
-          <>
-            <p>Pas de notes partagées.</p>
-            {mode === "create" && (
-              <Button
-                label="Créer des notes partagées"
-                onClick={() => dispatch(setSharedNotesType("rich"))}
-              />
-            )}
-            <div style={{ textAlign: "start", padding: "16px" }}>
-              <h3>Que sont les notes partagées ?</h3>
-              <p>
-                Les notes partagées permettent aux élèves de communiquer avec
-                leur enseignant. L'enseignant donne le contenu initial des notes
-                partagées, et les élèves peuvent le modifier, notamment pour
-                répondre à des questions, expliciter une démarche ou faire des
-                remarques sur leur travail. L'enseignant peut également modifier
-                les notes partagées pour répondre aux élèves.
-              </p>
-              <p>
-                Les notes partagées peuvent contenir du texte, des images, des
-                liens, etc., tout comme les consignes. La différence principale
-                avec les consignes est que les élèves peuvent modifier le
-                contenu des notes partagées. Elles sont un outil de
-                communication supplémentaire entre l'enseignant et les élèves.
-              </p>
-            </div>
+      {sharedNotesType === "none" && (
+        <>
+          <p>Pas de notes partagées.</p>
+          {mode === "create" && (
             <Button
-              severity="secondary"
-              size="small"
-              icon={"pi pi-question-circle"}
-              onClick={() => {
-                setHelpDialogVisible(true);
-              }}
-              outlined
-              label="En savoir plus"
-              style={{ marginBottom: "16px" }}
+              label="Créer des notes partagées"
+              onClick={() => dispatch(setSharedNotesType("rich"))}
             />
-            <Dialog
-              id="metaPlayerHelpDialog"
-              header="Documentation"
-              visible={helpDialogVisible}
-              onHide={() => setHelpDialogVisible(false)}
-              maximizable={true}
-            >
-              <iframe
-                src={
-                  "https://capytale2.ac-paris.fr/wiki/doku.php?id=notes_partagees"
-                }
-                style={{ width: "100%", height: "100%" }}
-                title="Documentation"
-              />
-            </Dialog>
-          </>
-        )}
-        {sharedNotesType === "rich" && (
-          <Editor
-            placeholderText={
-              mode === "create"
-                ? "Écrivez le contenu initial des notes partagées ici..."
-                : "Les notes partagées sont vides, vous pouvez les remplir ici..."
-            }
-            htmlInitialContent={initialEditorState ? undefined : ""}
-            initialEditorState={initialEditorState || undefined}
-            jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
-            onChange={(editorState) => {
-              dispatch(setLexicalSharedNotesState(editorState));
-              if (initialStateOnChangeDone.current) {
-                dispatch(setIsMPDirty(true));
-              } else {
-                initialStateOnChangeDone.current = true;
-              }
-            }}
-            onJsonSizeLimitExceeded={() => {
-              dispatch(setCanSaveSharedNotes(false));
-              toast.current!.show({
-                summary: "Erreur",
-                detail: `Le contenu des notes partagées est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
-                severity: "error",
-                life: 10000,
-              });
-            }}
-            onJsonSizeLimitMet={() => {
-              dispatch(setCanSaveSharedNotes(true));
-              toast.current!.show({
-                summary: "Succès",
-                detail: `Le contenu des notes partagées ne dépasse plus la taille limite.`,
-                severity: "success",
-                life: 4000,
-              });
+          )}
+          <div style={{ textAlign: "start", padding: "16px" }}>
+            <h3>Que sont les notes partagées ?</h3>
+            <p>
+              Les notes partagées permettent aux élèves de communiquer avec leur
+              enseignant. L'enseignant donne le contenu initial des notes
+              partagées, et les élèves peuvent le modifier, notamment pour
+              répondre à des questions, expliciter une démarche ou faire des
+              remarques sur leur travail. L'enseignant peut également modifier
+              les notes partagées pour répondre aux élèves.
+            </p>
+            <p>
+              Les notes partagées peuvent contenir du texte, des images, des
+              liens, etc., tout comme les consignes. La différence principale
+              avec les consignes est que les élèves peuvent modifier le contenu
+              des notes partagées. Elles sont un outil de communication
+              supplémentaire entre l'enseignant et les élèves.
+            </p>
+          </div>
+          <Button
+            severity="secondary"
+            size="small"
+            icon={"pi pi-question-circle"}
+            onClick={() => {
+              setHelpDialogVisible(true);
             }}
-            isEditable={isEditable}
+            outlined
+            label="En savoir plus"
+            style={{ marginBottom: "16px" }}
           />
-        )}
-      </>
+          <Dialog
+            id="metaPlayerHelpDialog"
+            header="Documentation"
+            visible={helpDialogVisible}
+            onHide={() => setHelpDialogVisible(false)}
+            maximizable={true}
+          >
+            <iframe
+              src={
+                "https://capytale2.ac-paris.fr/wiki/doku.php?id=notes_partagees"
+              }
+              style={{ width: "100%", height: "100%" }}
+              title="Documentation"
+            />
+          </Dialog>
+        </>
+      )}
+      {sharedNotesType === "rich" && (
+        <Editor
+          placeholderText={
+            mode === "create"
+              ? "Écrivez le contenu initial des notes partagées ici..."
+              : "Les notes partagées sont vides, vous pouvez les remplir ici..."
+          }
+          htmlInitialContent={initialEditorState ? undefined : ""}
+          initialEditorState={initialEditorState || undefined}
+          jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
+          onChange={(editorState) => {
+            dispatch(setLexicalSharedNotesState(editorState));
+            if (initialStateOnChangeDone.current) {
+              dispatch(setIsMPDirty(true));
+            } else {
+              initialStateOnChangeDone.current = true;
+            }
+          }}
+          onJsonSizeLimitExceeded={() => {
+            dispatch(setCanSaveSharedNotes(false));
+            toast.show({
+              summary: "Erreur",
+              detail: `Le contenu des notes partagées est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
+              severity: "error",
+              life: 10000,
+            });
+          }}
+          onJsonSizeLimitMet={() => {
+            dispatch(setCanSaveSharedNotes(true));
+            toast.show({
+              summary: "Succès",
+              detail: `Le contenu des notes partagées ne dépasse plus la taille limite.`,
+              severity: "success",
+              life: 4000,
+            });
+          }}
+          isEditable={isEditable}
+        />
+      )}
     </>
   );
 });

package/src/features/toast.tsx

@@ -0,0 +1,38 @@
+import { Toast } from "primereact/toast";
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+const ToastContext = createContext<Toast | null>(null);
+
+export const ToastProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const toast = useRef<Toast>(null);
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    setLoaded(true);
+  }, []);
+  return (
+    <>
+      <Toast ref={toast} position="bottom-right" />
+      {loaded && (
+        <ToastContext.Provider value={toast.current}>
+          {children}
+        </ToastContext.Provider>
+      )}
+    </>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};

package/src/index.ts

@@ -33,6 +33,7 @@ import {
   usePreviewImageFile,
 } from "./features/functionalities/hooks";
 import { Toast } from "./external/prime";
+import { useToast } from "./features/toast";
 import type { ToastMessage } from "./external/prime";
 import type {
   AttachedFileData,
@@ -40,6 +41,7 @@ import type {
 } from "./features/functionalities/functionalitiesSlice";
 
 import type { ActivityMode } from "@capytale/activity.js/activity/activitySession";
+import type { ActivitySettings } from "./features/activitySettings/types";
 import type { Workflow } from "./features/activityData/activityJsData";
 import type { BinaryDataMode } from "./features/activityJS/ActivityJSProvider";
 
@@ -70,10 +72,12 @@ export {
   IsDirtySetter,
   AttachedFilesFunctionality,
   useRefreshAttachedFiles,
+  useToast,
   Toast,
 };
 export type {
   ActivityMode,
+  ActivitySettings,
   AttachedFileData,
   BinaryDataMode,
   ToastMessage,