@capytale/meta-player 0.4.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.4.2",
+  "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/activityData/activityDataSlice.ts

@@ -149,6 +149,7 @@ export const activityDataSlice = createAppSlice({
     setPlayerSettings: create.reducer(
       (state, action: PayloadAction<MetaPlayerOptions>) => {
         state.hasInstructions = action.payload.hasInstructions;
+        state.canReset = action.payload.canReset;
         state.pedagoLayout = action.payload.pedagoLayout;
         state.supportsLightTheme = action.payload.supportsLightTheme;
         state.supportsDarkTheme = action.payload.supportsDarkTheme;
@@ -239,6 +240,7 @@ export const activityDataSlice = createAppSlice({
     selectComments: (data) => data.comments,
     selectGrading: (data) => data.grading,
     selectHasInstructions: (data) => data.hasInstructions,
+    selectCanReset: (data) => data.canReset,
     selectPedagoLayout: (data) => data.pedagoLayout,
     selectHasGradingOrComments: (data) => !!(data.grading || data.comments),
     selectSaveState: (data) => data.saveState,
@@ -310,6 +312,7 @@ export const {
   selectComments,
   selectGrading,
   selectHasInstructions,
+  selectCanReset,
   selectPedagoLayout,
   selectHasGradingOrComments,
   selectSaveState,

package/src/features/activityData/metaPlayerOptions.ts

@@ -1,5 +1,6 @@
 export type MetaPlayerOptions = {
   hasInstructions: boolean;
+  canReset: boolean;
   pedagoLayout:
     | "horizontal"
     | "vertical"
@@ -11,6 +12,7 @@ export type MetaPlayerOptions = {
 
 export const defaultMetaPlayerOptions: MetaPlayerOptions = {
   hasInstructions: true,
+  canReset: true,
   pedagoLayout: "default-horizontal",
   supportsLightTheme: true,
   supportsDarkTheme: false,

package/src/features/activityJS/hooks.ts

@@ -1,5 +1,6 @@
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
+  selectCanReset,
   selectMode,
   selectWorkflow,
   setSaveState,
@@ -13,6 +14,7 @@ type UseResetProps = {
 
 export const useReset = (props: UseResetProps) => {
   const dispatch = useAppDispatch();
+  const canReset = useAppSelector(selectCanReset);
   const beforeReset = useAppSelector(selectBeforeReset);
   const afterReset = useAppSelector(selectAfterReset);
   const activityJs = useActivityJS();
@@ -21,6 +23,9 @@ export const useReset = (props: UseResetProps) => {
   if (mode !== "assignment" || workflow !== "current") {
     return null;
   }
+  if (!canReset) {
+    return null;
+  }
   return async (reload: boolean = true) => {
     if (!activityJs.activitySession) {
       throw new Error("No activity session to reset");

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

@@ -34,6 +34,28 @@ export const PedagoCommands = () => {
   );
 };
 
+export const CloseOnlyPedagoCommands: FC = () => {
+  const dispatch = useAppDispatch();
+  return (
+    <div className={styles.closeOnlyPedagoCommands}>
+      <Button
+        severity="secondary"
+        icon="pi pi-times"
+        rounded
+        text
+        aria-label="Masquer l'évaluation"
+        tooltip="Masquer l'évaluation"
+        tooltipOptions={{
+          position: "left",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+        }}
+        onClick={() => dispatch(toggleIsPedagoVisible())}
+        style={{ flexShrink: 0 }}
+      />
+    </div>
+  );
+};
+
 type DocumentSelectorHzItem = {
   name: string;
   value: PedagoTab;

package/src/features/pedago/index.tsx

@@ -24,7 +24,7 @@ import {
 import { ChangeEventHandler, FC } from "react";
 import { DivProps } from "react-html-props";
 import SharedNotesEditor from "./SharedNotesEditor";
-import { PedagoCommands } from "./PedagoCommands";
+import { CloseOnlyPedagoCommands, PedagoCommands } from "./PedagoCommands";
 import { PdfEditor } from "./PdfEditor";
 
 const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
@@ -42,8 +42,11 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
 
   if (!hasInstructions) {
     return (
-      <div className={styles.gradingPanel}>
-        <Grading />
+      <div className={styles.onlyGradingPedago}>
+        <CloseOnlyPedagoCommands />
+        <div className={styles.gradingPanel}>
+          <Grading />
+        </div>
       </div>
     );
   }

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

@@ -1,3 +1,14 @@
+.onlyGradingPedago {
+  display: flex;
+  width: 100%;
+  :global(.layout-horizontal) & {
+    flex-direction: row-reverse;
+  }
+  :global(.layout-vertical) & {
+    flex-direction: column;
+  }
+}
+
 .pedago {
   display: flex;
   height: 100%;
@@ -10,6 +21,18 @@
   }
 }
 
+.closeOnlyPedagoCommands {
+  flex-direction: column;
+  flex-shrink: 0;
+  display: flex;
+  background-color: var(--surface-200);
+  :global(.layout-vertical) & {
+    gap: 8px;
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+}
+
 .pedagoCommands {
   flex-direction: column;
   flex-shrink: 0;

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);
+}