@capytale/meta-player 0.4.3 → 0.5.0

package/package.json

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

package/src/MetaPlayer.tsx

@@ -34,16 +34,11 @@ import {
 import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
 import ExitWarning from "./features/activityData/ExitWarning";
 import type { AntiCheatOptions, UIOptions } from "./types";
-import {
-  AttachedFilesOptions,
-  defaultAttachedFilesOptions,
-} from "./features/functionalities/functionalitiesSlice";
 
 type MetaPlayerProps = PropsWithChildren<{
   activityJSOptions?: LoadOptions;
   antiCheatOptions?: Partial<AntiCheatOptions>;
   uiOptions?: Partial<UIOptions>;
-  attachedFilesOptions?: AttachedFilesOptions;
 }>;
 
 const MetaPlayer: FC<MetaPlayerProps> = (props) => {
@@ -61,10 +56,6 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
     noSaveForStudents: false,
     ...props.uiOptions,
   };
-  const attachedFilesOptions: AttachedFilesOptions = {
-    ...defaultAttachedFilesOptions,
-    ...props.attachedFilesOptions,
-  };
   const store = useMemo(
     () =>
       makeStore({
@@ -74,9 +65,6 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
           showWorkflow: !uiOptions.noWorkflow,
           showSaveForStudents: !uiOptions.noSaveForStudents,
         },
-        functionalities: {
-          attachedFilesOptions,
-        },
       }),
     [],
   );

package/src/features/functionalities/AttachedFilesFunctionality.ts

@@ -0,0 +1,28 @@
+import { FC, useEffect } from "react";
+import { AttachedFilesOptions, setAttachedFilesOptions } from "./functionalitiesSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type AttachedFilesFunctionalityProps = {
+  options: Omit<AttachedFilesOptions, "enabled">;
+};
+
+const AttachedFilesFunctionality: FC<AttachedFilesFunctionalityProps> = ({
+  options,
+}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setAttachedFilesOptions({
+      ...options,
+      enabled: true,
+    }));
+    return () => {
+      dispatch(setAttachedFilesOptions({
+        ...options,
+        enabled: false,
+      }));
+    };
+  });
+  return null;
+}
+
+export default AttachedFilesFunctionality;

package/src/features/functionalities/functionalitiesSlice.ts

@@ -4,7 +4,9 @@ import { createAppSlice } from "../../app/createAppSlice";
 export type AttachedFileData = {
   name: string;
   isTemporary: boolean;
-  interactionMode: "download" | "preview" | "preview-or-download" | "custom";
+  canDownload: boolean;
+  canCopyLink: boolean;
+  interactionMode: "download" | "preview" | "custom" | "none";
   urlOrId: string;
 }
 

package/src/features/functionalities/hooks.ts

@@ -20,7 +20,9 @@ export const useAttachedFiles = () => {
         name: name,
         urlOrId: file,
         isTemporary: false,
-        interactionMode: "download",
+        canDownload: true,
+        canCopyLink: true,
+        interactionMode: "preview",
       };
     });
   }, [files]);

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

@@ -0,0 +1,26 @@
+.attachedFiles {
+  margin: 4px 0;
+}
+
+.fileRow {
+  display: flex;
+  align-items: center;
+}
+
+.fileInteraction {
+  flex-shrink: 1;
+  flex-grow: 1;
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
+  & :global(.p-button-label) {
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    font-size: 0.8rem;
+  }
+}
+
+.fileSmallInteraction {
+  flex-shrink: 0;
+  flex-grow: 0;
+}

package/src/features/navbar/AttachedFilesSidebarContent.tsx

@@ -1,44 +1,109 @@
-import { FC } from "react";
+import { FC, useRef } from "react";
 import { useAttachedFiles } from "../functionalities/hooks";
 import { useAppSelector } from "../../app/hooks";
-import { selectAttachedFilesOptions } from "../functionalities/functionalitiesSlice";
+import {
+  AttachedFileData,
+  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";
 
 const AttachedFilesSidebarContent: FC = () => {
   const filesData = useAttachedFiles();
-  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
 
   return (
-    <div>
+    <div className={styles.attachedFiles}>
       {filesData.map((file) => (
-        <p key={file.urlOrId}>
-          <a
-            href={file.urlOrId}
-            target="_blank"
-            rel="noreferrer"
-            download={file.name}
-            style={{
-              color: file.isTemporary ? "rgb(200, 0, 0)" : "rgb(0, 50, 200)",
-              textDecoration:
-                file.interactionMode === "download" ? "underline" : "none",
-            }}
-            onClick={(e) => {
-              if (file.interactionMode !== "download") {
-                e.preventDefault();
-                if (
-                  file.interactionMode === "custom" &&
-                  attachedFilesOptions.middleware?.handleFileClick
-                ) {
-                  attachedFilesOptions.middleware.handleFileClick(file);
-                }
-              }
-            }}
-          >
-            {file.name}
-          </a>
-        </p>
+        <AttachedFileLinks key={file.name} fileData={file} />
       ))}
     </div>
   );
 };
 
+const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
+  fileData,
+}) => {
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+  const toast = useRef<Toast>(null);
+
+  return (
+    <div className={styles.fileRow}>
+      <Toast ref={toast} position="bottom-right" />
+      <Button
+        label={fileData.name}
+        severity={fileData.isTemporary ? "warning" : "secondary"}
+        disabled={fileData.interactionMode === "none"}
+        onClick={() => {
+          if (fileData.interactionMode === "custom") {
+            attachedFilesOptions.middleware?.handleFileClick?.(fileData);
+          } else if (fileData.interactionMode === "download") {
+            window.open(fileData.urlOrId, "_blank")?.focus();
+          } else if (fileData.interactionMode === "preview") {
+            toast.current?.show({
+              severity: "info",
+              summary: "Aperçu non disponible",
+              detail: fileData.name,
+              life: 3000,
+            });
+          }
+        }}
+        className={styles.fileInteraction}
+        text
+      />
+      {fileData.canDownload && (
+        <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,
+            });
+          }}
+          className={styles.fileSmallInteraction}
+          text
+        />
+      )}
+      {fileData.canCopyLink && (
+        <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,
+                });
+              }
+            });
+          }}
+          style={{
+            flexGrow: 0,
+            flexShrink: 0,
+          }}
+          text
+        />
+      )}
+    </div>
+  );
+};
+
 export default AttachedFilesSidebarContent;

package/src/features/pedago/PedagoCommands.tsx

@@ -43,8 +43,8 @@ export const CloseOnlyPedagoCommands: FC = () => {
         icon="pi pi-times"
         rounded
         text
-        aria-label="Masquer les consignes"
-        tooltip="Masquer les consignes"
+        aria-label="Masquer l'évaluation"
+        tooltip="Masquer l'évaluation"
         tooltipOptions={{
           position: "left",
           showDelay: settings.TOOLTIP_SHOW_DELAY,

package/src/index.tsx

@@ -18,6 +18,7 @@ import { ActivitySidebarActionsSetter } from "./features/navbar/ActivitySidebarA
 import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActions";
 import ActivitySettingsSetter from "./features/activitySettings/ActivitySettingsSetter";
 import IsDirtySetter from "./features/activityData/IsDirtySetter";
+import AttachedFilesFunctionality from "./features/functionalities/AttachedFilesFunctionality";
 import { Toast } from "./external/prime";
 import type { ToastMessage } from "./external/prime";
 
@@ -39,6 +40,7 @@ export {
   ActivityQuickActionsSetter,
   ActivitySettingsSetter,
   IsDirtySetter,
+  AttachedFilesFunctionality,
   Toast,
 };
 export type { ToastMessage };

package/src/utils/download.ts

@@ -0,0 +1,8 @@
+export function downloadFile(url: string, name?: string) {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name || url.split("/").pop() || "download";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}