@capytale/meta-player 0.3.7 → 0.3.8

package/package.json

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

package/src/features/navbar/CapytaleMenu.tsx

@@ -29,6 +29,7 @@ import {
   selectShowSaveForStudents,
   selectShowWorkflow,
 } from "../layout/layoutSlice";
+import Countdown from "./Countdown";
 
 const CapytaleMenu: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -91,17 +92,20 @@ const CapytaleMenu: React.FC = () => {
         )}
         {
           hasSaveButton && (
-            <Button
-              label={isQuiteSmall ? undefined : "Enregistrer"}
-              disabled={!isDirty}
-              severity={"warning"}
-              size="small"
-              icon="pi pi-save"
-              loading={saveState !== "idle"}
-              onClick={() => {
-                dispatch(setSaveState("should-save"));
-              }}
-            />
+            <>
+              <Countdown />
+              <Button
+                label={isQuiteSmall ? undefined : "Enregistrer"}
+                disabled={!isDirty}
+                severity={"warning"}
+                size="small"
+                icon="pi pi-save"
+                loading={saveState !== "idle"}
+                onClick={() => {
+                  dispatch(setSaveState("should-save"));
+                }}
+              />
+            </>
           ) /**
             tooltip={isDirty ? "Enregistrer l'activité" : "Rien à enregistrer"}
             tooltipOptions={{

package/src/features/navbar/Countdown.tsx

@@ -0,0 +1,276 @@
+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";
+
+// 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);
+  const mode = useAppSelector(selectMode);
+  const isDirty = useAppSelector(selectIsDirty);
+  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 = () => {
+    console.log("showOneMinuteWarning");
+    oneMinuteWarningShown.current = true;
+    toast.current?.show({
+      severity: "warn",
+      summary: "Activité non sauvegardée",
+      detail: (
+        <>
+          <div>
+            Il vous reste moins d'une minute pour rendre votre activité. Elle
+            sera sauvegardée automatiquement 30 secondes avant la fin.
+          </div>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              marginTop: "8px",
+              alignItems: "stretch",
+            }}
+          >
+            <Button
+              severity="secondary"
+              outlined
+              onClick={() => {
+                shouldSaveAt30s.current = false;
+                toast.current?.clear();
+              }}
+            >
+              Ne pas sauvegarder (danger)
+            </Button>
+            <Button severity="warning" onClick={save}>
+              Sauvegarder maintenant
+            </Button>
+          </div>
+        </>
+      ),
+      sticky: true,
+      closable: false,
+    });
+  };
+
+  const showFifteenSecondsWarning = () => {
+    fifteenSecondsWarningShown.current = true;
+    toast.current?.show({
+      severity: "error",
+      summary: "Activité non sauvegardée",
+      detail: (
+        <>
+          <div>
+            Il vous reste moins de 15 secondes pour rendre votre activité.
+          </div>
+          <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,
+    });
+  };
+
+  const activityJS = useActivityJS();
+  const deadline =
+    activityJS.activitySession?.activityBunch.access_timerange.value?.end;
+
+  const [diffMs, setDiffMs] = useState<number | null>(null);
+
+  const updateDiffMs = useCallback(() => {
+    if (!deadline) {
+      return;
+    }
+    const deadlineUTC = Date.UTC(
+      deadline.getFullYear(),
+      deadline.getMonth(),
+      deadline.getDate(),
+      deadline.getHours(),
+      deadline.getMinutes(),
+      deadline.getSeconds(),
+      deadline.getMilliseconds(),
+    );
+    const now = new Date();
+    const nowUTC = Date.UTC(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate(),
+      now.getHours(),
+      now.getMinutes(),
+      now.getSeconds(),
+      now.getMilliseconds(),
+    );
+    const newDiffMs = deadlineUTC - nowUTC;
+    setDiffMs(newDiffMs);
+    if (mode !== "assignment") {
+      return;
+    }
+    console.log("check", newDiffMs, isDirty, oneMinuteWarningShown.current);
+    if (
+      newDiffMs != null &&
+      newDiffMs < MS_PER_MINUTE &&
+      newDiffMs > 35000 &&
+      isDirty &&
+      !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 &&
+      newDiffMs != null &&
+      newDiffMs < 15000 &&
+      newDiffMs > 0 &&
+      !fifteenSecondsWarningShown.current
+    ) {
+      showFifteenSecondsWarning();
+    }
+    if (newDiffMs <= 0 && !zeroSecondsWarningShown.current) {
+      zeroSecondsWarningShown.current = true;
+      toast.current?.clear();
+      toast.current?.show({
+        severity: "info",
+        summary: "Temps écoulé",
+        detail: "Le temps est écoulé, il n'est plus possible de sauvegarder.",
+        sticky: true,
+      });
+    }
+  }, [deadline, mode, isDirty]);
+
+  useInterval(updateDiffMs, 1000, !!deadline);
+
+  const displayed = useMemo<ReactNode>(() => {
+    if (!deadline || diffMs == null) {
+      return null;
+    }
+    if (diffMs >= MS_PER_DAY) {
+      return (
+        <div
+          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}>{s}</div>
+              ))}
+          </div>
+        </div>
+      );
+    }
+    if (diffMs <= 0) {
+      return (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginRight: "8px",
+          }}
+        >
+          <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
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          marginRight: "8px",
+        }}
+      >
+        <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;

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

@@ -88,6 +88,7 @@
 }
 
 .capytaleMenu {
+  align-items: center;
   display: flex;
   gap: 8px;
 }
@@ -157,4 +158,4 @@
 
 .overlayPanelWorkflowTitle {
   margin-top: 0;
-}
+}