@capytale/meta-player 0.9.8 → 0.9.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.9.8",
+  "version": "0.9.10",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -51,7 +51,7 @@
     "sass": "^1.75.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.22.0",
-    "vite": "^7.3.1"
+    "vite": "^7.3.5"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -1,5 +1,11 @@
-import { FC, ReactNode, useCallback, useMemo, useRef, useState } from "react";
-import { useInterval } from "primereact/hooks";
+import {
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import { Toast } from "primereact/toast";
 import { useActivityJS } from "../../activityJS/ActivityJSProvider";
 import { useAppSelector } from "../../../app/hooks";
@@ -9,8 +15,8 @@ import {
 } from "../../activityData/activityDataSlice";
 import { Button } from "primereact/button";
 import { useSave } from "../../activityData/hooks";
-import serverClock from "../../../utils/server-clock";
 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
@@ -40,7 +46,9 @@ const Countdown: FC = () => {
     oneMinuteWarningShown.current = true;
     toast.current?.show({
       severity: "warn",
-      summary: showWarningsBecauseNoSave ? "Temps presque écoulé" : "Activité non sauvegardée",
+      summary: showWarningsBecauseNoSave
+        ? "Temps presque écoulé"
+        : "Activité non sauvegardée",
       detail: (
         <>
           <div>
@@ -89,7 +97,9 @@ const Countdown: FC = () => {
     fifteenSecondsWarningShown.current = true;
     toast.current?.show({
       severity: "error",
-      summary: showWarningsBecauseNoSave ? "Temps presque écoulé" : "Activité non sauvegardée",
+      summary: showWarningsBecauseNoSave
+        ? "Temps presque écoulé"
+        : "Activité non sauvegardée",
       detail: (
         <>
           <div>
@@ -139,32 +149,25 @@ const Countdown: FC = () => {
       ? null
       : activityJS.activitySession?.activityBunch.access_timerange.value?.end;
 
-  const [diffMs, setDiffMs] = useState<number | null>(null);
+  const diffMs = useRemainingTimeMs();
 
-  const updateDiffMs = useCallback(() => {
-    if (!deadline) {
-      return;
-    }
-    const deadlineUTC = deadline.getTime();
-    const nowUTC = serverClock.now();
-    const newDiffMs = deadlineUTC - nowUTC;
-    setDiffMs(newDiffMs);
-    if (mode !== "assignment") {
+  useEffect(() => {
+    if (!diffMs || mode !== "assignment") {
       return;
     }
     if (
-      newDiffMs != null &&
-      newDiffMs < MS_PER_MINUTE &&
-      newDiffMs > 35000 &&
+      diffMs != null &&
+      diffMs < MS_PER_MINUTE &&
+      diffMs > 35000 &&
       (isDirty || showWarningsBecauseNoSave) &&
       !oneMinuteWarningShown.current
     ) {
       showOneMinuteWarning();
     }
     if (
-      newDiffMs != null &&
-      newDiffMs < 30000 &&
-      newDiffMs > 0 &&
+      diffMs != null &&
+      diffMs < 30000 &&
+      diffMs > 0 &&
       shouldSaveAt30s.current &&
       !save30sAttempted.current
     ) {
@@ -176,14 +179,14 @@ const Countdown: FC = () => {
     }
     if (
       (isDirty || showWarningsBecauseNoSave) &&
-      newDiffMs != null &&
-      newDiffMs < 15000 &&
-      newDiffMs > 0 &&
+      diffMs != null &&
+      diffMs < 15000 &&
+      diffMs > 0 &&
       !fifteenSecondsWarningShown.current
     ) {
       showFifteenSecondsWarning();
     }
-    if (newDiffMs <= 0 && !zeroSecondsWarningShown.current) {
+    if (diffMs <= 0 && !zeroSecondsWarningShown.current) {
       zeroSecondsWarningShown.current = true;
       toast.current?.clear();
       setTimeout(() => {
@@ -195,9 +198,7 @@ const Countdown: FC = () => {
         });
       }, 500);
     }
-  }, [deadline, mode, isDirty, showWarningsBecauseNoSave]);
-
-  useInterval(updateDiffMs, 1000, !!deadline);
+  }, [diffMs, mode, isDirty, showWarningsBecauseNoSave]);
 
   const displayed = useMemo<ReactNode>(() => {
     if (!deadline || diffMs == null) {

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

@@ -16,6 +16,7 @@ import {
 import { useWindowSize } from "@uidotdev/usehooks";
 import { selectShowSaveForStudents } from "../../layout/layoutSlice";
 import settings from "../../../settings";
+import useRemainingTimeMs from "./useRemainingTimeMs";
 
 const CountdownAndSaveButton: FC = () => {
   const dispatch = useAppDispatch();
@@ -31,12 +32,21 @@ const CountdownAndSaveButton: FC = () => {
   );
   const hasEvaluations = useAppSelector(selectHasEvaluations);
 
+  const remainingTimeMs = useRemainingTimeMs();
+  const timeOver = useMemo(
+    () => remainingTimeMs !== null && remainingTimeMs <= 0,
+    [remainingTimeMs],
+  );
+
   const mode = useAppSelector(selectMode);
   const showSaveButton = useAppSelector(selectShowSaveButton);
   const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
   const hasSaveButton = useMemo(
-    () => showSaveButton && !(mode === "assignment" && !showSaveForStudents),
-    [showSaveButton, mode, showSaveForStudents],
+    () =>
+      showSaveButton &&
+      !(mode === "assignment" && !showSaveForStudents) &&
+      !timeOver,
+    [showSaveButton, mode, showSaveForStudents, timeOver],
   );
 
   const [editForbiddenDialogVisible, setEditForbiddenDialogVisible] =

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

@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+import { useActivityJS } from "../../activityJS/ActivityJSProvider";
+import serverClock from "../../../utils/server-clock";
+import { useInterval } from "primereact/hooks";
+
+const useRemainingTimeMs = () => {
+  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);
+  }, [deadline]);
+
+  useInterval(updateDiffMs, 1000, !!deadline);
+
+  return diffMs;
+};
+
+export default useRemainingTimeMs;