@capytale/meta-player 0.9.7 → 0.9.9

package/src/features/navbar/capytale-menu/Countdown.tsx

@@ -1,312 +1,313 @@
-import { FC, ReactNode, useCallback, useMemo, useRef, useState } from "react";
-import { useInterval } from "primereact/hooks";
-import { Toast } from "primereact/toast";
-import { useActivityJS } from "../../activityJS/ActivityJSProvider";
-import { useAppSelector } from "../../../app/hooks";
-import {
-  selectIsDirty,
-  selectMode,
-} from "../../activityData/activityDataSlice";
-import { Button } from "primereact/button";
-import { useSave } from "../../activityData/hooks";
-import serverClock from "../../../utils/server-clock";
-import { selectShowSaveForStudents } from "../../layout/layoutSlice";
-
-// TODO use https://capytale2.ac-paris.fr/vanilla/time-s.php
-// https://forge.apps.education.fr/capytale/activity-js/-/blob/main/src/backend/capytale/clock.ts?ref_type=heads
-// https://forge.apps.education.fr/capytale/activity-js/-/blob/main/src/api/time/clock.ts?ref_type=heads
-
-const MS_PER_MINUTE = 1000 * 60;
-const MS_PER_DAY = MS_PER_MINUTE * 60 * 24;
-const MS_PER_YEAR = MS_PER_DAY * 365;
-
-const Countdown: FC = () => {
-  const toast = useRef<Toast>(null); // Using its own toast because it may clear it
-  const mode = useAppSelector(selectMode);
-  const isDirty = useAppSelector(selectIsDirty);
-  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
-  const showWarningsBecauseNoSave = useMemo(
-    () => mode === "assignment" && !showSaveForStudents,
-    [mode, showSaveForStudents],
-  );
-  const oneMinuteWarningShown = useRef(false);
-  const fifteenSecondsWarningShown = useRef(false);
-  const shouldSaveAt30s = useRef(true);
-  const save30sAttempted = useRef(false);
-  const zeroSecondsWarningShown = useRef(false);
-  const save = useSave();
-
-  const showOneMinuteWarning = useCallback(() => {
-    oneMinuteWarningShown.current = true;
-    toast.current?.show({
-      severity: "warn",
-      summary: showWarningsBecauseNoSave ? "Temps presque écoulé" : "Activité non sauvegardée",
-      detail: (
-        <>
-          <div>
-            {showWarningsBecauseNoSave ? (
-              <>Il vous reste moins d'une minute pour vérifier vos réponses.</>
-            ) : (
-              <>
-                Il vous reste moins d'une minute pour enregistrer votre
-                activité. Elle sera sauvegardée automatiquement 30 secondes
-                avant la fin.
-              </>
-            )}
-          </div>
-          {!showWarningsBecauseNoSave && (
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px",
-                marginTop: "8px",
-                alignItems: "stretch",
-              }}
-            >
-              <Button
-                severity="danger"
-                onClick={() => {
-                  shouldSaveAt30s.current = false;
-                  toast.current?.clear();
-                }}
-              >
-                Ne pas sauvegarder (danger)
-              </Button>
-              <Button severity="success" onClick={save}>
-                Sauvegarder maintenant
-              </Button>
-            </div>
-          )}
-        </>
-      ),
-      sticky: true,
-      closable: false,
-    });
-  }, [save, showWarningsBecauseNoSave]);
-
-  const showFifteenSecondsWarning = useCallback(() => {
-    fifteenSecondsWarningShown.current = true;
-    toast.current?.show({
-      severity: "error",
-      summary: showWarningsBecauseNoSave ? "Temps presque écoulé" : "Activité non sauvegardée",
-      detail: (
-        <>
-          <div>
-            {showWarningsBecauseNoSave ? (
-              <>
-                Il vous reste moins de 15 secondes pour vérifier vos réponses.
-              </>
-            ) : (
-              <>
-                Il vous reste moins de 15 secondes pour enregistrer votre
-                activité.
-              </>
-            )}
-          </div>
-          {!showWarningsBecauseNoSave && (
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px",
-                marginTop: "8px",
-                alignItems: "stretch",
-              }}
-            >
-              <Button
-                severity="danger"
-                onClick={() => {
-                  save();
-                  toast.current?.clear();
-                }}
-              >
-                Sauvegarder maintenant
-              </Button>
-            </div>
-          )}
-        </>
-      ),
-      sticky: true,
-    });
-  }, [save, showWarningsBecauseNoSave]);
-
-  const activityJS = useActivityJS();
-  const deadlineMode =
-    activityJS.activitySession?.activityBunch.access_tr_mode.value;
-  const deadline =
-    !deadlineMode || deadlineMode === "none"
-      ? null
-      : activityJS.activitySession?.activityBunch.access_timerange.value?.end;
-
-  const [diffMs, setDiffMs] = useState<number | null>(null);
-
-  const updateDiffMs = useCallback(() => {
-    if (!deadline) {
-      return;
-    }
-    const deadlineUTC = deadline.getTime();
-    const nowUTC = serverClock.now();
-    const newDiffMs = deadlineUTC - nowUTC;
-    setDiffMs(newDiffMs);
-    if (mode !== "assignment") {
-      return;
-    }
-    if (
-      newDiffMs != null &&
-      newDiffMs < MS_PER_MINUTE &&
-      newDiffMs > 35000 &&
-      (isDirty || showWarningsBecauseNoSave) &&
-      !oneMinuteWarningShown.current
-    ) {
-      showOneMinuteWarning();
-    }
-    if (
-      newDiffMs != null &&
-      newDiffMs < 30000 &&
-      newDiffMs > 0 &&
-      shouldSaveAt30s.current &&
-      !save30sAttempted.current
-    ) {
-      if (isDirty) {
-        save();
-      }
-      toast.current?.clear();
-      save30sAttempted.current = true;
-    }
-    if (
-      (isDirty || showWarningsBecauseNoSave) &&
-      newDiffMs != null &&
-      newDiffMs < 15000 &&
-      newDiffMs > 0 &&
-      !fifteenSecondsWarningShown.current
-    ) {
-      showFifteenSecondsWarning();
-    }
-    if (newDiffMs <= 0 && !zeroSecondsWarningShown.current) {
-      zeroSecondsWarningShown.current = true;
-      toast.current?.clear();
-      setTimeout(() => {
-        toast.current?.show({
-          severity: "info",
-          summary: "Temps écoulé",
-          detail: "Le temps est écoulé, il n'est plus possible de sauvegarder.",
-          sticky: true,
-        });
-      }, 500);
-    }
-  }, [deadline, mode, isDirty, showWarningsBecauseNoSave]);
-
-  useInterval(updateDiffMs, 1000, !!deadline);
-
-  const displayed = useMemo<ReactNode>(() => {
-    if (!deadline || diffMs == null) {
-      return null;
-    }
-    if (diffMs >= MS_PER_DAY) {
-      return (
-        <div
-          aria-label="Deadline"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            marginRight: "8px",
-          }}
-        >
-          <i className="pi pi-calendar-clock" />
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-            }}
-          >
-            {deadline
-              .toLocaleString("fr-FR", {
-                year: diffMs >= MS_PER_YEAR ? "numeric" : undefined,
-                month: "short",
-                day: "numeric",
-                hour: "numeric",
-                minute: "numeric",
-              })
-              .split(", ")
-              .map((s, i) => (
-                <div
-                  key={i}
-                  aria-label={i === 0 ? "Date limite" : "Heure limite"}
-                >
-                  {s}
-                </div>
-              ))}
-          </div>
-        </div>
-      );
-    }
-    if (diffMs <= 0) {
-      return (
-        <div
-          aria-label="Temps écoulé"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            marginRight: "8px",
-            background: "#ef4444",
-            borderRadius: "100px",
-            padding: "5px 10px",
-            fontWeight: "bold",
-          }}
-        >
-          <i className="pi pi-calendar-times" />
-          <span>Temps écoulé</span>
-        </div>
-      );
-    }
-    const diffSeconds = Math.floor(diffMs / 1000);
-    const seconds = diffSeconds % 60;
-    const minutes = Math.floor(diffSeconds / 60) % 60;
-    const hours = Math.floor(diffSeconds / 3600) % 24;
-    return (
-      <div
-        aria-label="Temps restant"
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          marginRight: "8px",
-          ...(hours === 0 && minutes < 5
-            ? {
-                background: "#ef4444",
-                borderRadius: "100px",
-                padding: "5px 10px",
-                fontWeight: "bold",
-              }
-            : {}),
-        }}
-      >
-        <i className="pi pi-hourglass" />
-        {`${hours.toString().padStart(2, "0")}:${minutes
-          .toString()
-          .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`}
-      </div>
-    );
-  }, [deadline, diffMs]);
-
-  if (!deadline) {
-    return null;
-  }
-
-  return (
-    <div
-      style={{
-        userSelect: "none",
-      }}
-    >
-      {displayed}
-      <Toast position="bottom-right" ref={toast} />
-    </div>
-  );
-};
-
-export default Countdown;
+import {
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { Toast } from "primereact/toast";
+import { useActivityJS } from "../../activityJS/ActivityJSProvider";
+import { useAppSelector } from "../../../app/hooks";
+import {
+  selectIsDirty,
+  selectMode,
+} from "../../activityData/activityDataSlice";
+import { Button } from "primereact/button";
+import { useSave } from "../../activityData/hooks";
+import { selectShowSaveForStudents } from "../../layout/layoutSlice";
+import useRemainingTimeMs from "./useRemainingTimeMs";
+
+// TODO use https://capytale2.ac-paris.fr/vanilla/time-s.php
+// https://forge.apps.education.fr/capytale/activity-js/-/blob/main/src/backend/capytale/clock.ts?ref_type=heads
+// https://forge.apps.education.fr/capytale/activity-js/-/blob/main/src/api/time/clock.ts?ref_type=heads
+
+const MS_PER_MINUTE = 1000 * 60;
+const MS_PER_DAY = MS_PER_MINUTE * 60 * 24;
+const MS_PER_YEAR = MS_PER_DAY * 365;
+
+const Countdown: FC = () => {
+  const toast = useRef<Toast>(null); // Using its own toast because it may clear it
+  const mode = useAppSelector(selectMode);
+  const isDirty = useAppSelector(selectIsDirty);
+  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
+  const showWarningsBecauseNoSave = useMemo(
+    () => mode === "assignment" && !showSaveForStudents,
+    [mode, showSaveForStudents],
+  );
+  const oneMinuteWarningShown = useRef(false);
+  const fifteenSecondsWarningShown = useRef(false);
+  const shouldSaveAt30s = useRef(true);
+  const save30sAttempted = useRef(false);
+  const zeroSecondsWarningShown = useRef(false);
+  const save = useSave();
+
+  const showOneMinuteWarning = useCallback(() => {
+    oneMinuteWarningShown.current = true;
+    toast.current?.show({
+      severity: "warn",
+      summary: showWarningsBecauseNoSave
+        ? "Temps presque écoulé"
+        : "Activité non sauvegardée",
+      detail: (
+        <>
+          <div>
+            {showWarningsBecauseNoSave ? (
+              <>Il vous reste moins d'une minute pour vérifier vos réponses.</>
+            ) : (
+              <>
+                Il vous reste moins d'une minute pour enregistrer votre
+                activité. Elle sera sauvegardée automatiquement 30 secondes
+                avant la fin.
+              </>
+            )}
+          </div>
+          {!showWarningsBecauseNoSave && (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+                marginTop: "8px",
+                alignItems: "stretch",
+              }}
+            >
+              <Button
+                severity="danger"
+                onClick={() => {
+                  shouldSaveAt30s.current = false;
+                  toast.current?.clear();
+                }}
+              >
+                Ne pas sauvegarder (danger)
+              </Button>
+              <Button severity="success" onClick={save}>
+                Sauvegarder maintenant
+              </Button>
+            </div>
+          )}
+        </>
+      ),
+      sticky: true,
+      closable: false,
+    });
+  }, [save, showWarningsBecauseNoSave]);
+
+  const showFifteenSecondsWarning = useCallback(() => {
+    fifteenSecondsWarningShown.current = true;
+    toast.current?.show({
+      severity: "error",
+      summary: showWarningsBecauseNoSave
+        ? "Temps presque écoulé"
+        : "Activité non sauvegardée",
+      detail: (
+        <>
+          <div>
+            {showWarningsBecauseNoSave ? (
+              <>
+                Il vous reste moins de 15 secondes pour vérifier vos réponses.
+              </>
+            ) : (
+              <>
+                Il vous reste moins de 15 secondes pour enregistrer votre
+                activité.
+              </>
+            )}
+          </div>
+          {!showWarningsBecauseNoSave && (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+                marginTop: "8px",
+                alignItems: "stretch",
+              }}
+            >
+              <Button
+                severity="danger"
+                onClick={() => {
+                  save();
+                  toast.current?.clear();
+                }}
+              >
+                Sauvegarder maintenant
+              </Button>
+            </div>
+          )}
+        </>
+      ),
+      sticky: true,
+    });
+  }, [save, showWarningsBecauseNoSave]);
+
+  const activityJS = useActivityJS();
+  const deadlineMode =
+    activityJS.activitySession?.activityBunch.access_tr_mode.value;
+  const deadline =
+    !deadlineMode || deadlineMode === "none"
+      ? null
+      : activityJS.activitySession?.activityBunch.access_timerange.value?.end;
+
+  const diffMs = useRemainingTimeMs();
+
+  useEffect(() => {
+    if (!diffMs || mode !== "assignment") {
+      return;
+    }
+    if (
+      diffMs != null &&
+      diffMs < MS_PER_MINUTE &&
+      diffMs > 35000 &&
+      (isDirty || showWarningsBecauseNoSave) &&
+      !oneMinuteWarningShown.current
+    ) {
+      showOneMinuteWarning();
+    }
+    if (
+      diffMs != null &&
+      diffMs < 30000 &&
+      diffMs > 0 &&
+      shouldSaveAt30s.current &&
+      !save30sAttempted.current
+    ) {
+      if (isDirty) {
+        save();
+      }
+      toast.current?.clear();
+      save30sAttempted.current = true;
+    }
+    if (
+      (isDirty || showWarningsBecauseNoSave) &&
+      diffMs != null &&
+      diffMs < 15000 &&
+      diffMs > 0 &&
+      !fifteenSecondsWarningShown.current
+    ) {
+      showFifteenSecondsWarning();
+    }
+    if (diffMs <= 0 && !zeroSecondsWarningShown.current) {
+      zeroSecondsWarningShown.current = true;
+      toast.current?.clear();
+      setTimeout(() => {
+        toast.current?.show({
+          severity: "info",
+          summary: "Temps écoulé",
+          detail: "Le temps est écoulé, il n'est plus possible de sauvegarder.",
+          sticky: true,
+        });
+      }, 500);
+    }
+  }, [diffMs, mode, isDirty, showWarningsBecauseNoSave]);
+
+  const displayed = useMemo<ReactNode>(() => {
+    if (!deadline || diffMs == null) {
+      return null;
+    }
+    if (diffMs >= MS_PER_DAY) {
+      return (
+        <div
+          aria-label="Deadline"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginRight: "8px",
+          }}
+        >
+          <i className="pi pi-calendar-clock" />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            {deadline
+              .toLocaleString("fr-FR", {
+                year: diffMs >= MS_PER_YEAR ? "numeric" : undefined,
+                month: "short",
+                day: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+              })
+              .split(", ")
+              .map((s, i) => (
+                <div
+                  key={i}
+                  aria-label={i === 0 ? "Date limite" : "Heure limite"}
+                >
+                  {s}
+                </div>
+              ))}
+          </div>
+        </div>
+      );
+    }
+    if (diffMs <= 0) {
+      return (
+        <div
+          aria-label="Temps écoulé"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginRight: "8px",
+            background: "#ef4444",
+            borderRadius: "100px",
+            padding: "5px 10px",
+            fontWeight: "bold",
+          }}
+        >
+          <i className="pi pi-calendar-times" />
+          <span>Temps écoulé</span>
+        </div>
+      );
+    }
+    const diffSeconds = Math.floor(diffMs / 1000);
+    const seconds = diffSeconds % 60;
+    const minutes = Math.floor(diffSeconds / 60) % 60;
+    const hours = Math.floor(diffSeconds / 3600) % 24;
+    return (
+      <div
+        aria-label="Temps restant"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          marginRight: "8px",
+          ...(hours === 0 && minutes < 5
+            ? {
+                background: "#ef4444",
+                borderRadius: "100px",
+                padding: "5px 10px",
+                fontWeight: "bold",
+              }
+            : {}),
+        }}
+      >
+        <i className="pi pi-hourglass" />
+        {`${hours.toString().padStart(2, "0")}:${minutes
+          .toString()
+          .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`}
+      </div>
+    );
+  }, [deadline, diffMs]);
+
+  if (!deadline) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        userSelect: "none",
+      }}
+    >
+      {displayed}
+      <Toast position="bottom-right" ref={toast} />
+    </div>
+  );
+};
+
+export default Countdown;