@capytale/meta-player 0.9.11 → 0.10.0

package/src/features/navbar/index.tsx

@@ -1,39 +1,39 @@
-import { MD } from "../../utils/breakpoints";
-import { useWindowSize } from "@uidotdev/usehooks";
-import ActivityInfo from "./activity-info";
-import ActivityMenu from "./activity-menu";
-import CapytaleMenu from "./capytale-menu";
-import styles from "./style.module.scss";
-import { useMemo } from "react";
-import { useAppSelector } from "../../app/hooks";
-import { selectReturnUrl } from "../activityData/activityDataSlice";
-import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
-
-const Navbar: React.FC = () => {
-  const returnUrl = useAppSelector(selectReturnUrl);
-  const windowsSize = useWindowSize();
-  const isSmall = useMemo(
-    () => windowsSize.width && windowsSize.width < MD,
-    [windowsSize.width],
-  );
-  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
-  const logoText = isSmall ? "C" : "CAPYTALE";
-  return (
-    <div className={styles.navbar}>
-      <div className={styles.navbarContainer}>
-        <div className={styles.navbarLogo}>
-          {!isInIframe && (
-            <a href={returnUrl} aria-label="Capytale (accueil)">
-              {logoText}
-            </a>
-          )}
-        </div>
-        <CapytaleMenu />
-        <ActivityInfo />
-        <ActivityMenu />
-      </div>
-    </div>
-  );
-};
-
-export default Navbar;
+import { MD } from "../../utils/breakpoints";
+import { useWindowSize } from "@uidotdev/usehooks";
+import ActivityInfo from "./activity-info";
+import ActivityMenu from "./activity-menu";
+import CapytaleMenu from "./capytale-menu";
+import styles from "./style.module.scss";
+import { useMemo } from "react";
+import { useAppSelector } from "../../app/hooks";
+import { selectReturnUrl } from "../activityData/activityDataSlice";
+import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
+
+const Navbar: React.FC = () => {
+  const returnUrl = useAppSelector(selectReturnUrl);
+  const windowsSize = useWindowSize();
+  const isSmall = useMemo(
+    () => windowsSize.width && windowsSize.width < MD,
+    [windowsSize.width],
+  );
+  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
+  const logoText = isSmall ? "C" : "CAPYTALE";
+  return (
+    <div className={styles.navbar}>
+      <div className={styles.navbarContainer}>
+        <div className={styles.navbarLogo}>
+          {!isInIframe && (
+            <a href={returnUrl} aria-label="Capytale (accueil)">
+              {logoText}
+            </a>
+          )}
+        </div>
+        <CapytaleMenu />
+        <ActivityInfo />
+        <ActivityMenu />
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

package/src/features/navbar/navbarSlice.ts

@@ -1,79 +1,79 @@
-import type { PayloadAction } from "@reduxjs/toolkit";
-import { createAppSlice } from "../../app/createAppSlice";
-import { Callback, useFileUpload } from "use-file-upload";
-export type QuickAction =
-  | {
-      type: "action";
-      title: string;
-      icon: string;
-      action: () => void;
-    }
-  | {
-      type: "file-upload";
-      accept?: string;
-      title: string;
-      icon: string;
-      action: (file: {
-        source: URL;
-        name: string;
-        size: number;
-        file: File;
-      }) => void;
-    };
-
-export function usePerformQuickAction() {
-  const [_, selectFile] = useFileUpload();
-  return (action: QuickAction) => {
-    if (action.type === "action") {
-      action.action();
-    } else if (action.type === "file-upload") {
-      selectFile(
-        { accept: action.accept, multiple: false },
-        action.action as Callback,
-      );
-    }
-  };
-}
-
-export interface NavbarState {
-  quickActions: QuickAction[];
-  sidebarActions: QuickAction[];
-}
-
-const initialState: NavbarState = {
-  quickActions: [],
-  sidebarActions: [],
-};
-
-// If you are not using async thunks you can use the standalone `createSlice`.
-export const navbarSlice = createAppSlice({
-  name: "navbar",
-  // `createSlice` will infer the state type from the `initialState` argument
-  initialState,
-  // The `reducers` field lets us define reducers and generate associated actions
-  reducers: (create) => ({
-    setQuickActions: create.reducer(
-      (state, action: PayloadAction<QuickAction[]>) => {
-        state.quickActions = action.payload;
-      },
-    ),
-    setSidebarActions: create.reducer(
-      (state, action: PayloadAction<QuickAction[]>) => {
-        state.sidebarActions = action.payload;
-      },
-    ),
-  }),
-  // You can define your selectors here. These selectors receive the slice
-  // state as their first argument.
-  selectors: {
-    selectQuickActions: (navbar) => navbar.quickActions,
-    selectSidebarActions: (navbar) => navbar.sidebarActions,
-  },
-});
-
-// Action creators are generated for each case reducer function.
-export const { setQuickActions, setSidebarActions } = navbarSlice.actions;
-
-// Selectors returned by `slice.selectors` take the root state as their first argument.
-export const { selectQuickActions, selectSidebarActions } =
-  navbarSlice.selectors;
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+import { Callback, useFileUpload } from "use-file-upload";
+export type QuickAction =
+  | {
+      type: "action";
+      title: string;
+      icon: string;
+      action: () => void;
+    }
+  | {
+      type: "file-upload";
+      accept?: string;
+      title: string;
+      icon: string;
+      action: (file: {
+        source: URL;
+        name: string;
+        size: number;
+        file: File;
+      }) => void;
+    };
+
+export function usePerformQuickAction() {
+  const [_, selectFile] = useFileUpload();
+  return (action: QuickAction) => {
+    if (action.type === "action") {
+      action.action();
+    } else if (action.type === "file-upload") {
+      selectFile(
+        { accept: action.accept, multiple: false },
+        action.action as Callback,
+      );
+    }
+  };
+}
+
+export interface NavbarState {
+  quickActions: QuickAction[];
+  sidebarActions: QuickAction[];
+}
+
+const initialState: NavbarState = {
+  quickActions: [],
+  sidebarActions: [],
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const navbarSlice = createAppSlice({
+  name: "navbar",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    setQuickActions: create.reducer(
+      (state, action: PayloadAction<QuickAction[]>) => {
+        state.quickActions = action.payload;
+      },
+    ),
+    setSidebarActions: create.reducer(
+      (state, action: PayloadAction<QuickAction[]>) => {
+        state.sidebarActions = action.payload;
+      },
+    ),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectQuickActions: (navbar) => navbar.quickActions,
+    selectSidebarActions: (navbar) => navbar.sidebarActions,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const { setQuickActions, setSidebarActions } = navbarSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const { selectQuickActions, selectSidebarActions } =
+  navbarSlice.selectors;

package/src/features/navbar/preview-navbar/index.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+import styles from "./style.module.scss";
+import { Button } from "primereact/button";
+import { useZustandStore } from "../../../zustandStore";
+
+const PreviewNavbar: FC = () => {
+  const stopPreviewing = useZustandStore((state) => state.stopPreviewing);
+
+  return (
+    <div className={styles.previewNavbar}>
+      <div aria-label="Indicateur de mode correction">Prévisualisation du point de vue élève</div>
+      <Button onClick={stopPreviewing}>Quitter</Button>
+    </div>
+  );
+};
+
+export default PreviewNavbar;

package/src/features/navbar/preview-navbar/style.module.scss

@@ -0,0 +1,17 @@
+.previewNavbar {
+  color-scheme: dark;
+  background-color: var(--surface-500);
+  --review-navbar-text-color: rgba(255, 255, 255, 0.95);
+  color: var(--review-navbar-text-color);
+  padding: 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & :global(.p-button-secondary) {
+    border-color: var(--review-navbar-text-color);
+    color: var(--review-navbar-text-color);
+  }
+  :global(.dark-theme) & {
+    background-color: var(--surface-100);
+  }
+}

package/src/features/navbar/review-navbar/GradingNav.tsx

@@ -1,128 +1,128 @@
-import { useState, useEffect, useMemo, useCallback } from "react";
-import evalApi from "@capytale/activity.js/backend/capytale/evaluation";
-import { Dropdown } from "primereact/dropdown";
-
-import { useAppSelector } from "../../../app/hooks";
-import {
-  selectActivityInfo,
-  selectActivityNid,
-  selectMode,
-  selectNid,
-} from "../../activityData/activityDataSlice";
-import { studentNameFromInfo } from "../student-utils";
-
-import { SaInfo } from "@capytale/activity.js/activity/evaluation/evaluation";
-import { SelectItem, SelectItemOptionsType } from "primereact/selectitem";
-import { Button } from "primereact/button";
-
-const GradingNav: React.FC = () => {
-  const activityInfo = useAppSelector(selectActivityInfo);
-  const [studentList, setStudentList] = useState<SaInfo[]>([]);
-  const nid = useAppSelector(selectNid) as number;
-  const mode = useAppSelector(selectMode);
-  const activityNid = useAppSelector(selectActivityNid) as number;
-  useEffect(() => {
-    evalApi.listSa(activityNid).then((j) => {
-      setStudentList(j);
-    });
-  }, []);
-
-  const goToStudent = useCallback(
-    (snid: string | number) => {
-      const redir = new URL(window.location.href);
-      redir.searchParams.set("id", snid.toString());
-      redir.searchParams.set("mode", mode);
-      location.href = redir.toString();
-    },
-    [mode],
-  );
-
-  const handlePrev = useCallback(() => {
-    if (studentList == null) return;
-    const i = studentList.findIndex((el) => (el.nid as number) == nid);
-    if (i <= 0) return;
-    goToStudent(studentList[i - 1].nid);
-  }, [studentList, nid, goToStudent]);
-
-  const handleNext = useCallback(() => {
-    if (studentList == null) return;
-    const i = studentList.findIndex((el) => el.nid == nid);
-    if (i < 0 || i >= studentList.length - 1) return;
-    goToStudent(studentList[i + 1].nid);
-  }, [studentList, nid, goToStudent]);
-
-  function getWf(el: SaInfo) {
-    if (el.workflow == "100") return { icon: "pi pi-pencil", color: "blue" };
-    if (el.workflow == "200")
-      return { icon: "pi pi-envelope", color: "orange" };
-    if (el.workflow == "300")
-      return { icon: "pi pi-list-check", color: "green" };
-    throw new Error("Unknown workflow");
-  }
-
-  const options: SelectItemOptionsType = useMemo(() => {
-    return studentList.map((el) => {
-      const item: SelectItem = {
-        label:
-          studentNameFromInfo({
-            firstName: el.firstname,
-            lastName: el.lastname,
-            class: el.classe,
-          }) || undefined,
-        value: el.nid,
-        icon: getWf(el).icon,
-      };
-      return item;
-    });
-  }, [studentList]);
-
-  if (studentList.length === 0) {
-    return <span>{studentNameFromInfo(activityInfo.studentInfo)}</span>;
-  }
-
-  const firstNid = studentList[0].nid as number;
-  const lastNid = studentList[Object.keys(studentList).length - 1]
-    .nid as number;
-
-  return (
-    <div className="p-inputgroup flex-1">
-      <Button
-        aria-label="Passer à la copie précédente"
-        size="small"
-        icon="pi pi-chevron-left"
-        severity="secondary"
-        onClick={handlePrev}
-        tooltip="Copie précédente"
-        tooltipOptions={{
-          position: "left",
-        }}
-        disabled={nid == firstNid}
-        outlined
-      />
-      <Dropdown
-        aria-label="Sélectionner une copie"
-        value={nid}
-        options={options}
-        filter
-        onChange={(e) => {
-          goToStudent(e.value);
-        }}
-      />
-      <Button
-        aria-label="Passer à la copie suivante"
-        size="small"
-        icon="pi pi-chevron-right"
-        severity="secondary"
-        onClick={handleNext}
-        tooltip="Copie suivante"
-        tooltipOptions={{
-          position: "right",
-        }}
-        disabled={nid == lastNid}
-        outlined
-      />
-    </div>
-  );
-};
-
-export default GradingNav;
+import { useState, useEffect, useMemo, useCallback } from "react";
+import evalApi from "@capytale/activity.js/backend/capytale/evaluation";
+import { Dropdown } from "primereact/dropdown";
+
+import { useAppSelector } from "../../../app/hooks";
+import {
+  selectActivityInfo,
+  selectActivityNid,
+  selectMode,
+  selectNid,
+} from "../../activityData/activityDataSlice";
+import { studentNameFromInfo } from "../student-utils";
+
+import { SaInfo } from "@capytale/activity.js/activity/evaluation/evaluation";
+import { SelectItem, SelectItemOptionsType } from "primereact/selectitem";
+import { Button } from "primereact/button";
+
+const GradingNav: React.FC = () => {
+  const activityInfo = useAppSelector(selectActivityInfo);
+  const [studentList, setStudentList] = useState<SaInfo[]>([]);
+  const nid = useAppSelector(selectNid) as number;
+  const mode = useAppSelector(selectMode);
+  const activityNid = useAppSelector(selectActivityNid) as number;
+  useEffect(() => {
+    evalApi.listSa(activityNid).then((j) => {
+      setStudentList(j);
+    });
+  }, []);
+
+  const goToStudent = useCallback(
+    (snid: string | number) => {
+      const redir = new URL(window.location.href);
+      redir.searchParams.set("id", snid.toString());
+      redir.searchParams.set("mode", mode);
+      location.href = redir.toString();
+    },
+    [mode],
+  );
+
+  const handlePrev = useCallback(() => {
+    if (studentList == null) return;
+    const i = studentList.findIndex((el) => (el.nid as number) == nid);
+    if (i <= 0) return;
+    goToStudent(studentList[i - 1].nid);
+  }, [studentList, nid, goToStudent]);
+
+  const handleNext = useCallback(() => {
+    if (studentList == null) return;
+    const i = studentList.findIndex((el) => el.nid == nid);
+    if (i < 0 || i >= studentList.length - 1) return;
+    goToStudent(studentList[i + 1].nid);
+  }, [studentList, nid, goToStudent]);
+
+  function getWf(el: SaInfo) {
+    if (el.workflow == "100") return { icon: "pi pi-pencil", color: "blue" };
+    if (el.workflow == "200")
+      return { icon: "pi pi-envelope", color: "orange" };
+    if (el.workflow == "300")
+      return { icon: "pi pi-list-check", color: "green" };
+    throw new Error("Unknown workflow");
+  }
+
+  const options: SelectItemOptionsType = useMemo(() => {
+    return studentList.map((el) => {
+      const item: SelectItem = {
+        label:
+          studentNameFromInfo({
+            firstName: el.firstname,
+            lastName: el.lastname,
+            class: el.classe,
+          }) || undefined,
+        value: el.nid,
+        icon: getWf(el).icon,
+      };
+      return item;
+    });
+  }, [studentList]);
+
+  if (studentList.length === 0) {
+    return <span>{studentNameFromInfo(activityInfo.studentInfo)}</span>;
+  }
+
+  const firstNid = studentList[0].nid as number;
+  const lastNid = studentList[Object.keys(studentList).length - 1]
+    .nid as number;
+
+  return (
+    <div className="p-inputgroup flex-1">
+      <Button
+        aria-label="Passer à la copie précédente"
+        size="small"
+        icon="pi pi-chevron-left"
+        severity="secondary"
+        onClick={handlePrev}
+        tooltip="Copie précédente"
+        tooltipOptions={{
+          position: "left",
+        }}
+        disabled={nid == firstNid}
+        outlined
+      />
+      <Dropdown
+        aria-label="Sélectionner une copie"
+        value={nid}
+        options={options}
+        filter
+        onChange={(e) => {
+          goToStudent(e.value);
+        }}
+      />
+      <Button
+        aria-label="Passer à la copie suivante"
+        size="small"
+        icon="pi pi-chevron-right"
+        severity="secondary"
+        onClick={handleNext}
+        tooltip="Copie suivante"
+        tooltipOptions={{
+          position: "right",
+        }}
+        disabled={nid == lastNid}
+        outlined
+      />
+    </div>
+  );
+};
+
+export default GradingNav;

package/src/features/navbar/review-navbar/index.tsx

@@ -1,18 +1,18 @@
-import { FC } from "react";
-import GradingNav from "./GradingNav";
-
-import styles from "./style.module.scss";
-
-const ReviewNavbar: FC = () => {
-  return (
-    <div className={styles.reviewNavbar}>
-      <div aria-label="Indicateur de mode correction">Mode correction</div>
-      <div>
-        <GradingNav />
-      </div>
-      <div></div>
-    </div>
-  );
-};
-
-export default ReviewNavbar;
+import { FC } from "react";
+import GradingNav from "./GradingNav";
+
+import styles from "./style.module.scss";
+
+const ReviewNavbar: FC = () => {
+  return (
+    <div className={styles.reviewNavbar}>
+      <div aria-label="Indicateur de mode correction">Mode correction</div>
+      <div>
+        <GradingNav />
+      </div>
+      <div></div>
+    </div>
+  );
+};
+
+export default ReviewNavbar;

package/src/features/navbar/review-navbar/style.module.scss

@@ -1,22 +1,22 @@
-.reviewNavbar {
-  color-scheme: dark;
-  background-color: var(--surface-500);
-  --review-navbar-text-color: rgba(255, 255, 255, 0.95);
-  color: var(--review-navbar-text-color);
-  padding: 4px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  & :global(.p-button-secondary) {
-    border-color: var(--review-navbar-text-color);
-    color: var(--review-navbar-text-color);
-  }
-  & :global(.p-dropdown) {
-    border-color: var(--review-navbar-text-color);
-    border-left-width: 0;
-    border-right-width: 0;
-  }
-  :global(.dark-theme) & {
-    background-color: var(--surface-100);
-  }
-}
+.reviewNavbar {
+  color-scheme: dark;
+  background-color: var(--surface-500);
+  --review-navbar-text-color: rgba(255, 255, 255, 0.95);
+  color: var(--review-navbar-text-color);
+  padding: 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & :global(.p-button-secondary) {
+    border-color: var(--review-navbar-text-color);
+    color: var(--review-navbar-text-color);
+  }
+  & :global(.p-dropdown) {
+    border-color: var(--review-navbar-text-color);
+    border-left-width: 0;
+    border-right-width: 0;
+  }
+  :global(.dark-theme) & {
+    background-color: var(--surface-100);
+  }
+}