@capytale/meta-player 0.5.1 → 0.5.2

package/package.json

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

package/src/features/functionalities/AttachedFilesFunctionality.ts

@@ -2,22 +2,18 @@ import { FC, useEffect } from "react";
 import { AttachedFilesOptions, setAttachedFilesOptions } from "./functionalitiesSlice";
 import { useAppDispatch } from "../../app/hooks";
 
-type AttachedFilesFunctionalityProps = {
-  options: Omit<AttachedFilesOptions, "enabled">;
-};
+type AttachedFilesFunctionalityProps = Omit<AttachedFilesOptions, "enabled">;
 
-const AttachedFilesFunctionality: FC<AttachedFilesFunctionalityProps> = ({
-  options,
-}) => {
+const AttachedFilesFunctionality: FC<AttachedFilesFunctionalityProps> = (props) => {
   const dispatch = useAppDispatch();
   useEffect(() => {
     dispatch(setAttachedFilesOptions({
-      ...options,
+      ...props,
       enabled: true,
     }));
     return () => {
       dispatch(setAttachedFilesOptions({
-        ...options,
+        ...props,
         enabled: false,
       }));
     };

package/src/features/functionalities/functionalitiesSlice.ts

@@ -4,26 +4,39 @@ import { createAppSlice } from "../../app/createAppSlice";
 export type AttachedFileData = {
   name: string;
   isTemporary: boolean;
-  canDownload: boolean;
-  canCopyLink: boolean;
-  interactionMode: "download" | "preview" | "custom" | "none";
+  downloadMode: "default" | "custom" | "none";
+  copyLinkMode: "default" | "custom" | "none";
+  interactMode: "download" | "preview" | "custom" | "none";
   urlOrId: string;
 }
 
+export type UploadedFileInfo = {
+  source: URL,
+  name: string,
+  size: number,
+  file: File,
+};
+
 export type AttachedFilesOptions = {
   enabled: boolean;
   uploadTemporaryFiles?: {
-    mimeTypes: string[];
-    handler: (files: File[]) => any;
+    uploadButtonLabel?: string;
+    mimeTypes?: string[];
+    multiple: boolean;
+    handler: (fileInfos: UploadedFileInfo[]) => any;
   };
-  middleware?: {
-    listFiles: (originalFiles: AttachedFileData[]) => AttachedFileData[];
-    handleFileClick?: ((originalFile: AttachedFileData) => any);
+  listFilesMiddleware?: (originalFiles: AttachedFileData[]) => AttachedFileData[];
+  customHandlers?: {
+    downloadFile?: ((originalFile: AttachedFileData) => any);
+    copyFileLink?: ((originalFile: AttachedFileData) => any);
+    interactWithFile?: ((originalFile: AttachedFileData) => any);
   };
+  onViewFiles?: () => any;
 };
 
 export interface FunctionalitiesState {
   attachedFilesOptions: AttachedFilesOptions;
+  attachedFilesRefresher: number;
 }
 
 export const defaultAttachedFilesOptions: AttachedFilesOptions = {
@@ -31,7 +44,8 @@ export const defaultAttachedFilesOptions: AttachedFilesOptions = {
 };
 
 export const initialState: FunctionalitiesState = {
-  attachedFilesOptions: defaultAttachedFilesOptions
+  attachedFilesOptions: defaultAttachedFilesOptions,
+  attachedFilesRefresher: 0,
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -44,22 +58,28 @@ export const functionalitiesSlice = createAppSlice({
     setAttachedFilesOptions: create.reducer((state, action: PayloadAction<AttachedFilesOptions>) => {
       state.attachedFilesOptions = action.payload;
     }),
+    refreshAttachedFiles: create.reducer((state) => {
+      state.attachedFilesRefresher += 1;
+    }),
   }),
   // 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,
+    selectAttachedFilesRefresher: (state) => state.attachedFilesRefresher,
   },
 });
 
 // Action creators are generated for each case reducer function.
 export const {
   setAttachedFilesOptions,
+  refreshAttachedFiles,
 } = functionalitiesSlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.
 export const {
   selectAttachedFilesOptions,
   selectAttachedFilesEnabled,
+  selectAttachedFilesRefresher,
 } = functionalitiesSlice.selectors;

package/src/features/functionalities/hooks.ts

@@ -1,17 +1,18 @@
 import { useMemo } from "react";
-import { useAppSelector } from "../../app/hooks"
+import { useAppDispatch, useAppSelector } from "../../app/hooks"
 import { useActivityJS } from "../activityJS/ActivityJSProvider";
-import { AttachedFileData, selectAttachedFilesOptions } from "./functionalitiesSlice"
+import { AttachedFileData, refreshAttachedFiles, selectAttachedFilesOptions, selectAttachedFilesRefresher } from "./functionalitiesSlice"
 
 export const useAttachedFiles = () => {
   const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+  const attachedFilesRefresher = useAppSelector(selectAttachedFilesRefresher);
 
   const activityJS = useActivityJS();
   const files = useMemo(
     () =>
       activityJS.activitySession?.activityBunch.activityNode.attached_files
         .items || [],
-    [activityJS],
+    [activityJS, attachedFilesRefresher],
   );
   const filesData = useMemo<AttachedFileData[]>(() => {
     return files.map((file) => {
@@ -20,19 +21,24 @@ export const useAttachedFiles = () => {
         name: name,
         urlOrId: file,
         isTemporary: false,
-        canDownload: true,
-        canCopyLink: true,
-        interactionMode: "preview",
+        downloadMode: "default",
+        copyLinkMode: "default",
+        interactMode: "preview",
       };
     });
   }, [files]);
 
   const treatedFilesData = useMemo(() => {
-    if (!attachedFilesOptions.enabled || !attachedFilesOptions.middleware?.listFiles) {
+    if (!attachedFilesOptions.enabled || !attachedFilesOptions.listFilesMiddleware) {
       return filesData;
     }
-    return attachedFilesOptions.middleware.listFiles(filesData);
-  }, [filesData, attachedFilesOptions]);
+    return attachedFilesOptions.listFilesMiddleware(filesData);
+  }, [filesData, attachedFilesOptions, attachedFilesRefresher]);
 
   return treatedFilesData;
+}
+
+export const useRefreshAttachedFiles = () => {
+  const dispatch = useAppDispatch();
+  return () => dispatch(refreshAttachedFiles());
 }

package/src/features/navbar/ActivityMenu.tsx

@@ -15,7 +15,7 @@ import { selectHasAntiCheat } from "../activityData/activityDataSlice";
 import AttachedFilesSidebarContent from "./AttachedFilesSidebarContent";
 import { Badge } from "primereact/badge";
 import { useAttachedFiles } from "../functionalities/hooks";
-import { selectAttachedFilesEnabled } from "../functionalities/functionalitiesSlice";
+import { selectAttachedFilesEnabled, selectAttachedFilesOptions } from "../functionalities/functionalitiesSlice";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
@@ -31,6 +31,7 @@ const ActivityMenu: React.FC = memo(() => {
   const hasAntiCheat = useAppSelector(selectHasAntiCheat);
   const attachedFiles = useAttachedFiles();
   const attachedFilesEnabled = useAppSelector(selectAttachedFilesEnabled);
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
   return (
     <div className={styles.activityMenu}>
       <ActivityQuickActions />
@@ -52,7 +53,10 @@ const ActivityMenu: React.FC = memo(() => {
             showDelay: settings.TOOLTIP_SHOW_DELAY,
           }}
           className="p-overlay-badge"
-          onClick={() => setAttachedFilesSidebarVisible(true)}
+          onClick={() => {
+            attachedFilesOptions.onViewFiles?.();
+            setAttachedFilesSidebarVisible(true);
+          }}
         />
       )}
       <Button

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

@@ -1,5 +1,14 @@
+.sidebarContent {
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
 .attachedFiles {
   margin: 4px 0;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .fileRow {
@@ -24,3 +33,11 @@
   flex-shrink: 0;
   flex-grow: 0;
 }
+
+.uploadFilesButtonContainer {
+  flex-shrink: 0;
+  flex-grow: 0;
+  & > * {
+    width: 100%;
+  }
+}

package/src/features/navbar/AttachedFilesSidebarContent.tsx

@@ -11,15 +11,57 @@ 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";
 
 const AttachedFilesSidebarContent: FC = () => {
   const filesData = useAttachedFiles();
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+  const [_, selectFile] = useFileUpload();
 
   return (
-    <div className={styles.attachedFiles}>
-      {filesData.map((file) => (
-        <AttachedFileLinks key={file.name} fileData={file} />
-      ))}
+    <div className={styles.sidebarContent}>
+      <div className={styles.attachedFiles}>
+        {filesData.map((file) => (
+          <AttachedFileLinks key={file.name} fileData={file} />
+        ))}
+      </div>
+      {attachedFilesOptions.uploadTemporaryFiles && (
+        <div className={styles.uploadFilesButtonContainer}>
+          <Button
+            icon="pi pi-upload"
+            label={
+              attachedFilesOptions.uploadTemporaryFiles?.uploadButtonLabel ||
+              "Ajouter fichier temporaire"
+            }
+            onClick={() => {
+              selectFile(
+                {
+                  multiple: attachedFilesOptions.uploadTemporaryFiles?.multiple,
+                  accept:
+                    attachedFilesOptions.uploadTemporaryFiles?.mimeTypes?.join(
+                      ",",
+                    ) || undefined,
+                },
+                (filesOrFiles) => {
+                  if (Array.isArray(filesOrFiles)) {
+                    attachedFilesOptions.uploadTemporaryFiles?.handler(
+                      filesOrFiles,
+                    );
+                  } else {
+                    /* Deconstructing the object here so that if there is a
+                  bug, the error will be caught here and not in the handler */
+                    const { source, name, size, file } = filesOrFiles;
+                    attachedFilesOptions.uploadTemporaryFiles?.handler([
+                      { source, name, size, file },
+                    ]);
+                  }
+                },
+              );
+            }}
+            className={styles.uploadButton}
+          />
+        </div>
+      )}
     </div>
   );
 };
@@ -36,13 +78,13 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
       <Button
         label={fileData.name}
         severity={fileData.isTemporary ? "warning" : "secondary"}
-        disabled={fileData.interactionMode === "none"}
+        disabled={fileData.interactMode === "none"}
         onClick={() => {
-          if (fileData.interactionMode === "custom") {
-            attachedFilesOptions.middleware?.handleFileClick?.(fileData);
-          } else if (fileData.interactionMode === "download") {
+          if (fileData.interactMode === "custom") {
+            attachedFilesOptions.customHandlers?.interactWithFile?.(fileData);
+          } else if (fileData.interactMode === "download") {
             window.open(fileData.urlOrId, "_blank")?.focus();
-          } else if (fileData.interactionMode === "preview") {
+          } else if (fileData.interactMode === "preview") {
             toast.current?.show({
               severity: "info",
               summary: "Aperçu non disponible",
@@ -54,46 +96,56 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
         className={styles.fileInteraction}
         text
       />
-      {fileData.canDownload && (
+      {fileData.downloadMode !== "none" && (
         <Button
           icon="pi pi-download"
           severity="secondary"
           onClick={() => {
-            downloadFile(fileData.urlOrId, fileData.name);
-            toast.current?.show({
-              severity: "success",
-              summary: "Téléchargement lancé",
-              detail: fileData.name,
-              life: 3000,
-            });
+            if (fileData.downloadMode === "custom") {
+              attachedFilesOptions.customHandlers?.downloadFile?.(fileData);
+              return;
+            } else if (fileData.downloadMode === "default") {
+              downloadFile(fileData.urlOrId, fileData.name);
+              toast.current?.show({
+                severity: "success",
+                summary: "Téléchargement lancé",
+                detail: fileData.name,
+                life: 3000,
+              });
+            }
           }}
           className={styles.fileSmallInteraction}
           text
         />
       )}
-      {fileData.canCopyLink && (
+      {fileData.copyLinkMode !== "none" && (
         <Button
           icon="pi pi-link"
           severity="secondary"
           onClick={() => {
-            // copy link to clipboard
-            copyToClipboard(fileData.urlOrId, (success, error) => {
-              if (success) {
-                toast.current?.show({
-                  severity: "success",
-                  summary: "Lien copié",
-                  detail: fileData.name,
-                  life: 3000,
-                });
-              } else {
-                toast.current?.show({
-                  severity: "error",
-                  summary: "Erreur lors de la copie du lien",
-                  detail: error,
-                  life: 5000,
-                });
-              }
-            });
+            if (fileData.copyLinkMode === "custom") {
+              attachedFilesOptions.customHandlers?.copyFileLink?.(fileData);
+              return;
+            } else if (fileData.copyLinkMode === "default") {
+              // copy link to clipboard
+              copyToClipboard(fileData.urlOrId, (success, error) => {
+                if (success) {
+                  toast.current?.show({
+                    severity: "success",
+                    summary: "Lien copié",
+                    detail: fileData.name,
+                    life: 3000,
+                  });
+                } else {
+                  toast.current?.show({
+                    severity: "error",
+                    summary: "Erreur lors de la copie du lien",
+                    detail: error,
+                    life: 5000,
+                  });
+                }
+              });
+            }
           }}
           style={{
             flexGrow: 0,

package/src/index.tsx

@@ -20,8 +20,10 @@ import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActio
 import ActivitySettingsSetter from "./features/activitySettings/ActivitySettingsSetter";
 import IsDirtySetter from "./features/activityData/IsDirtySetter";
 import AttachedFilesFunctionality from "./features/functionalities/AttachedFilesFunctionality";
+import { useRefreshAttachedFiles } from "./features/functionalities/hooks";
 import { Toast } from "./external/prime";
 import type { ToastMessage } from "./external/prime";
+import type { AttachedFileData, UploadedFileInfo } from "./features/functionalities/functionalitiesSlice";
 
 export {
   MetaPlayer,
@@ -43,6 +45,7 @@ export {
   ActivitySettingsSetter,
   IsDirtySetter,
   AttachedFilesFunctionality,
+  useRefreshAttachedFiles,
   Toast,
 };
-export type { ToastMessage };
+export type { AttachedFileData, UploadedFileInfo, ToastMessage };