@capytale/meta-player 0.7.0 → 0.7.2

package/src/features/layout/layoutSlice.ts

@@ -1,90 +1,90 @@
-import type { PayloadAction } from "@reduxjs/toolkit";
-import { createAppSlice } from "../../app/createAppSlice";
-
-export type Orientation = "horizontal" | "vertical";
-
-export type PedagoTab = "instructions" | "sharedNotes" | "pdf";
-
-export interface LayoutState {
-  orientation: Orientation;
-  isPedagoVisible: boolean;
-  isGradingVisible: boolean;
-  pedagoTab: PedagoTab;
-  showWorkflow: boolean;
-  showSaveForStudents: boolean;
-}
-
-export const initialState: LayoutState = {
-  orientation: "horizontal",
-  isPedagoVisible: true,
-  isGradingVisible: true,
-  pedagoTab: "instructions",
-  showWorkflow: true,
-  showSaveForStudents: true,
-};
-
-// If you are not using async thunks you can use the standalone `createSlice`.
-export const layoutSlice = createAppSlice({
-  name: "layout",
-  // `createSlice` will infer the state type from the `initialState` argument
-  initialState,
-  // The `reducers` field lets us define reducers and generate associated actions
-  reducers: (create) => ({
-    toggleLayout: create.reducer((state) => {
-      // Redux Toolkit allows us to write "mutating" logic in reducers. It
-      // doesn't actually mutate the state because it uses the Immer library,
-      // which detects changes to a "draft state" and produces a brand new
-      // immutable state based off those changes
-      state.orientation =
-        state.orientation === "horizontal" ? "vertical" : "horizontal";
-    }),
-    // Use the `PayloadAction` type to declare the contents of `action.payload`
-    setLayout: create.reducer((state, action: PayloadAction<Orientation>) => {
-      state.orientation = action.payload;
-    }),
-    toggleIsPedagoVisible: create.reducer((state) => {
-      state.isPedagoVisible = !state.isPedagoVisible;
-    }),
-    setIsGradingVisible: create.reducer(
-      (state, action: PayloadAction<boolean>) => {
-        state.isGradingVisible = action.payload;
-      },
-    ),
-    toggleIsGradingVisible: create.reducer((state) => {
-      state.isGradingVisible = !state.isGradingVisible;
-    }),
-    setPedagoTab: create.reducer((state, action: PayloadAction<PedagoTab>) => {
-      state.pedagoTab = action.payload;
-    }),
-  }),
-  // You can define your selectors here. These selectors receive the slice
-  // state as their first argument.
-  selectors: {
-    selectOrientation: (layout) => layout.orientation,
-    selectIsPedagoVisible: (layout) => layout.isPedagoVisible,
-    selectIsGradingVisible: (layout) => layout.isGradingVisible,
-    selectPedagoTab: (layout) => layout.pedagoTab,
-    selectShowWorkflow: (layout) => layout.showWorkflow,
-    selectShowSaveForStudents: (layout) => layout.showSaveForStudents,
-  },
-});
-
-// Action creators are generated for each case reducer function.
-export const {
-  toggleLayout,
-  setLayout,
-  toggleIsPedagoVisible,
-  setIsGradingVisible,
-  toggleIsGradingVisible,
-  setPedagoTab,
-} = layoutSlice.actions;
-
-// Selectors returned by `slice.selectors` take the root state as their first argument.
-export const {
-  selectOrientation,
-  selectIsPedagoVisible,
-  selectIsGradingVisible,
-  selectPedagoTab,
-  selectShowWorkflow,
-  selectShowSaveForStudents,
-} = layoutSlice.selectors;
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+export type Orientation = "horizontal" | "vertical";
+
+export type PedagoTab = "instructions" | "sharedNotes" | "pdf";
+
+export interface LayoutState {
+  orientation: Orientation;
+  isPedagoVisible: boolean;
+  isGradingVisible: boolean;
+  pedagoTab: PedagoTab;
+  showWorkflow: boolean;
+  showSaveForStudents: boolean;
+}
+
+export const initialState: LayoutState = {
+  orientation: "horizontal",
+  isPedagoVisible: true,
+  isGradingVisible: true,
+  pedagoTab: "instructions",
+  showWorkflow: true,
+  showSaveForStudents: true,
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const layoutSlice = createAppSlice({
+  name: "layout",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    toggleLayout: create.reducer((state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.orientation =
+        state.orientation === "horizontal" ? "vertical" : "horizontal";
+    }),
+    // Use the `PayloadAction` type to declare the contents of `action.payload`
+    setLayout: create.reducer((state, action: PayloadAction<Orientation>) => {
+      state.orientation = action.payload;
+    }),
+    toggleIsPedagoVisible: create.reducer((state) => {
+      state.isPedagoVisible = !state.isPedagoVisible;
+    }),
+    setIsGradingVisible: create.reducer(
+      (state, action: PayloadAction<boolean>) => {
+        state.isGradingVisible = action.payload;
+      },
+    ),
+    toggleIsGradingVisible: create.reducer((state) => {
+      state.isGradingVisible = !state.isGradingVisible;
+    }),
+    setPedagoTab: create.reducer((state, action: PayloadAction<PedagoTab>) => {
+      state.pedagoTab = action.payload;
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectOrientation: (layout) => layout.orientation,
+    selectIsPedagoVisible: (layout) => layout.isPedagoVisible,
+    selectIsGradingVisible: (layout) => layout.isGradingVisible,
+    selectPedagoTab: (layout) => layout.pedagoTab,
+    selectShowWorkflow: (layout) => layout.showWorkflow,
+    selectShowSaveForStudents: (layout) => layout.showSaveForStudents,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const {
+  toggleLayout,
+  setLayout,
+  toggleIsPedagoVisible,
+  setIsGradingVisible,
+  toggleIsGradingVisible,
+  setPedagoTab,
+} = layoutSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const {
+  selectOrientation,
+  selectIsPedagoVisible,
+  selectIsGradingVisible,
+  selectPedagoTab,
+  selectShowWorkflow,
+  selectShowSaveForStudents,
+} = layoutSlice.selectors;

package/src/features/navbar/activity-info/index.tsx

@@ -1,54 +1,54 @@
-import { useAppSelector } from "../../../app/hooks";
-import {
-  selectActivityInfo,
-  selectIcon,
-  selectMode,
-} from "../../activityData/activityDataSlice";
-import { studentNameFromInfo } from "../student-utils";
-import styles from "./style.module.scss";
-
-const ActivityInfo: React.FC = () => {
-  const icon = useAppSelector(selectIcon);
-  const mode = useAppSelector(selectMode);
-  const activityInfo = useAppSelector(selectActivityInfo);
-  const studentName = studentNameFromInfo(activityInfo.studentInfo);
-  return (
-    <div className={styles.activityInfo}>
-      <div className={styles.activityInfoText}>
-        <div
-          className={styles.activityInfoTitle}
-          aria-label="Titre de l'activité"
-        >
-          {activityInfo.title}
-        </div>
-        {mode === "assignment" && studentName && (
-          <div
-            className={styles.activityInfoStudentName}
-            aria-label="Nom de l'élève"
-          >
-            {studentName}
-          </div>
-        )}
-        {mode === "create" && (
-          <div className={styles.activityInfoStudentName} aria-label="Mode">
-            Création d'activité
-          </div>
-        )}
-      </div>
-      {icon?.path && (
-        <img
-          className={styles.activityLogo}
-          aria-label="Logo de l'activité"
-          src={icon.path}
-          style={{
-            backgroundColor: icon.style
-              ? icon.style["background-color"] || "white"
-              : "white",
-          }}
-        />
-      )}
-    </div>
-  );
-};
-
-export default ActivityInfo;
+import { useAppSelector } from "../../../app/hooks";
+import {
+  selectActivityInfo,
+  selectIcon,
+  selectMode,
+} from "../../activityData/activityDataSlice";
+import { studentNameFromInfo } from "../student-utils";
+import styles from "./style.module.scss";
+
+const ActivityInfo: React.FC = () => {
+  const icon = useAppSelector(selectIcon);
+  const mode = useAppSelector(selectMode);
+  const activityInfo = useAppSelector(selectActivityInfo);
+  const studentName = studentNameFromInfo(activityInfo.studentInfo);
+  return (
+    <div className={styles.activityInfo}>
+      <div className={styles.activityInfoText}>
+        <div
+          className={styles.activityInfoTitle}
+          aria-label="Titre de l'activité"
+        >
+          {activityInfo.title}
+        </div>
+        {mode === "assignment" && studentName && (
+          <div
+            className={styles.activityInfoStudentName}
+            aria-label="Nom de l'élève"
+          >
+            {studentName}
+          </div>
+        )}
+        {mode === "create" && (
+          <div className={styles.activityInfoStudentName} aria-label="Mode">
+            Création d'activité
+          </div>
+        )}
+      </div>
+      {icon?.path && (
+        <img
+          className={styles.activityLogo}
+          aria-label="Logo de l'activité"
+          src={icon.path}
+          style={{
+            backgroundColor: icon.style
+              ? icon.style["background-color"] || "white"
+              : "white",
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ActivityInfo;

package/src/features/navbar/activity-info/style.module.scss

@@ -1,38 +1,38 @@
-.activityInfo {
-  flex-shrink: 1 !important;
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  gap: 12px;
-}
-
-.activityInfoText {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  & > * {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-  }
-}
-
-.activityInfoTitle {
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.activityLogo {
-  width: 35px;
-  height: 37px;
-  border-radius: 6px;
-  flex-shrink: 0;
-  @media only screen and (max-width: 992px) {
-    display: none;
-  }
-}
+.activityInfo {
+  flex-shrink: 1 !important;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  gap: 12px;
+}
+
+.activityInfoText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  & > * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+}
+
+.activityInfoTitle {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.activityLogo {
+  width: 35px;
+  height: 37px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  @media only screen and (max-width: 992px) {
+    display: none;
+  }
+}

package/src/features/navbar/activity-menu/ActivityQuickActions.tsx

@@ -1,57 +1,57 @@
-import { FC, useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../../../app/hooks";
-import {
-  QuickAction,
-  selectQuickActions,
-  setQuickActions,
-  usePerformQuickAction,
-} from "../navbarSlice";
-import { Button } from "primereact/button";
-import settings from "../../../settings";
-
-const ActivityQuickActions: FC<{}> = () => {
-  const quickActions = useAppSelector(selectQuickActions);
-  const performQuickAction = usePerformQuickAction();
-  return (
-    <>
-      {quickActions.map((action) => (
-        <Button
-          aria-label={action.title}
-          key={action.title}
-          severity="secondary"
-          size="small"
-          icon={action.icon}
-          onClick={() => {
-            performQuickAction(action);
-          }}
-          outlined
-          tooltip={action.title}
-          tooltipOptions={{
-            position: "bottom",
-            showDelay: settings.TOOLTIP_SHOW_DELAY,
-          }}
-        />
-      ))}
-    </>
-  );
-};
-
-type ActivityQuickActionsSetterProps = {
-  actions: QuickAction[];
-};
-
-export const ActivityQuickActionsSetter: FC<ActivityQuickActionsSetterProps> = (
-  props,
-) => {
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(setQuickActions(props.actions));
-    return () => {
-      dispatch(setQuickActions([]));
-    };
-  }, [props.actions]);
-
-  return <></>;
-};
-
-export default ActivityQuickActions;
+import { FC, useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
+import {
+  QuickAction,
+  selectQuickActions,
+  setQuickActions,
+  usePerformQuickAction,
+} from "../navbarSlice";
+import { Button } from "primereact/button";
+import settings from "../../../settings";
+
+const ActivityQuickActions: FC<{}> = () => {
+  const quickActions = useAppSelector(selectQuickActions);
+  const performQuickAction = usePerformQuickAction();
+  return (
+    <>
+      {quickActions.map((action) => (
+        <Button
+          aria-label={action.title}
+          key={action.title}
+          severity="secondary"
+          size="small"
+          icon={action.icon}
+          onClick={() => {
+            performQuickAction(action);
+          }}
+          outlined
+          tooltip={action.title}
+          tooltipOptions={{
+            position: "bottom",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+type ActivityQuickActionsSetterProps = {
+  actions: QuickAction[];
+};
+
+export const ActivityQuickActionsSetter: FC<ActivityQuickActionsSetterProps> = (
+  props,
+) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setQuickActions(props.actions));
+    return () => {
+      dispatch(setQuickActions([]));
+    };
+  }, [props.actions]);
+
+  return <></>;
+};
+
+export default ActivityQuickActions;