@capytale/meta-player 0.4.2 → 0.4.3

package/package.json

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

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/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 les consignes"
+        tooltip="Masquer les consignes"
+        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;