@capytale/meta-player 0.8.2 → 0.8.3

package/src/features/navbar/sidebars/SettingsSidebarContent.tsx

@@ -1,192 +1,192 @@
-import { FC } from "react";
-
-import { Fieldset } from "primereact/fieldset";
-
-import { selectOrientation, setLayout } from "../../layout/layoutSlice";
-import { useAppDispatch, useAppSelector } from "../../../app/hooks";
-import { RadioButton } from "primereact/radiobutton";
-
-import styles from "./style.module.scss";
-import {
-  selectThemeNameOrAuto,
-  setAutoSwitch,
-  switchToTheme,
-} from "../../theming/themingSlice";
-import { selectSidebarActions } from "../navbarSlice";
-import ActivitySidebarActions from "./ActivitySidebarActions";
-import { classNames } from "primereact/utils";
-import {
-  selectCanChoosePedagoLayout,
-  selectCanChooseTheme,
-} from "../../activityData/activityDataSlice";
-import { ActivitySettingsDisplay } from "../../activitySettings";
-import { Button } from "primereact/button";
-import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
-import settings from "../../../settings";
-import { useReset } from "../../activityJS/hooks";
-
-type SettingsSidebarContentProps = {
-  showHelp?: () => void;
-};
-
-const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
-  const canChooseOrientation = useAppSelector(selectCanChoosePedagoLayout);
-  const canChooseTheme = useAppSelector(selectCanChooseTheme);
-  const orientation = useAppSelector(selectOrientation);
-  const themeName = useAppSelector(selectThemeNameOrAuto);
-  const sidebarActions = useAppSelector(selectSidebarActions);
-  const reset = useReset({ onError: console.error });
-  const dispatch = useAppDispatch();
-  return (
-    <>
-      <div className={styles.sidebarCapytaleActions}>
-        {props.showHelp && (
-          <Button
-            aria-label="Voir la documentation"
-            severity="secondary"
-            size="small"
-            icon={"pi pi-question-circle"}
-            onClick={() => {
-              props.showHelp!();
-            }}
-            outlined
-            label="Documentation"
-            tooltip="Voir la documentation"
-            tooltipOptions={{
-              position: "left",
-              showDelay: settings.TOOLTIP_SHOW_DELAY,
-            }}
-          />
-        )}
-        {reset && (
-          <>
-            <ConfirmPopup />
-            <Button
-              aria-label="Réinitialiser l'activité"
-              severity="secondary"
-              size="small"
-              icon={"pi pi-undo"}
-              onClick={(event) => {
-                confirmPopup({
-                  target: event.currentTarget,
-                  message:
-                    "Toutes vos modifications seront perdues. Continuer ?",
-                  icon: "pi pi-exclamation-triangle",
-                  defaultFocus: "reject",
-                  acceptClassName: "p-button-danger",
-                  accept: reset,
-                  acceptLabel: "Oui",
-                  rejectLabel: "Non",
-                });
-              }}
-              outlined
-              label="Réinitialiser l'activité"
-              tooltip="Revenir à la version de l'enseignant"
-              tooltipOptions={{
-                position: "left",
-                showDelay: settings.TOOLTIP_SHOW_DELAY,
-              }}
-            />
-          </>
-        )}
-      </div>
-      {sidebarActions.length > 0 && (
-        <Fieldset
-          legend="Actions"
-          className={classNames(
-            "sidebarFieldset",
-            styles.sidebarFieldsetButtons,
-          )}
-        >
-          <ActivitySidebarActions />
-        </Fieldset>
-      )}
-      {canChooseOrientation && (
-        <Fieldset legend="Disposition" className="sidebarFieldset">
-          <div className="sidebarRadioButtons">
-            <div className="sidebarRadioGroup">
-              <RadioButton
-                aria-label="Option de disposition horizontale"
-                inputId="rb-horizontal"
-                name="horizontal"
-                value="horizontal"
-                onChange={(e) => dispatch(setLayout(e.value))}
-                checked={orientation === "horizontal"}
-              />
-              <label htmlFor="rb-horizontal" className="ml-2">
-                Horizontale
-              </label>
-            </div>
-            <div className="sidebarRadioGroup">
-              <RadioButton
-                aria-label="Option de disposition verticale"
-                inputId="rb-vertical"
-                name="vertical"
-                value="vertical"
-                onChange={(e) => dispatch(setLayout(e.value))}
-                checked={orientation === "vertical"}
-              />
-              <label htmlFor="rb-vertical" className="ml-2">
-                Verticale
-              </label>
-            </div>
-          </div>
-        </Fieldset>
-      )}
-      {canChooseTheme && (
-        <Fieldset legend="Thème" className="sidebarFieldset">
-          <div className="sidebarRadioButtons">
-            <div className="sidebarRadioGroup">
-              <RadioButton
-                aria-label="Option de thème clair"
-                inputId="rb-light"
-                name="light"
-                value="light"
-                onChange={(_e) => {
-                  dispatch(setAutoSwitch(false));
-                  dispatch(switchToTheme("light"));
-                }}
-                checked={themeName === "Clair"}
-              />
-              <label htmlFor="rb-light" className="ml-2">
-                Clair
-              </label>
-            </div>
-            <div className="sidebarRadioGroup">
-              <RadioButton
-                aria-label="Option de thème sombre"
-                inputId="rb-dark"
-                name="dark"
-                value="dark"
-                onChange={(_e) => {
-                  dispatch(setAutoSwitch(false));
-                  dispatch(switchToTheme("dark"));
-                }}
-                checked={themeName === "Sombre"}
-              />
-              <label htmlFor="rb-dark" className="ml-2">
-                Sombre
-              </label>
-            </div>
-            <div className="sidebarRadioGroup">
-              <RadioButton
-                aria-label="Option de thème système"
-                inputId="rb-auto"
-                name="auto"
-                value="auto"
-                onChange={(_e) => dispatch(setAutoSwitch(true))}
-                checked={themeName === "Système (auto)"}
-              />
-              <label htmlFor="rb-auto" className="ml-2">
-                Système (auto)
-              </label>
-            </div>
-          </div>
-        </Fieldset>
-      )}
-      <ActivitySettingsDisplay />
-    </>
-  );
-};
-
-export default SettingsSidebarContent;
+import { FC } from "react";
+
+import { Fieldset } from "primereact/fieldset";
+
+import { selectOrientation, setLayout } from "../../layout/layoutSlice";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
+import { RadioButton } from "primereact/radiobutton";
+
+import styles from "./style.module.scss";
+import {
+  selectThemeNameOrAuto,
+  setAutoSwitch,
+  switchToTheme,
+} from "../../theming/themingSlice";
+import { selectSidebarActions } from "../navbarSlice";
+import ActivitySidebarActions from "./ActivitySidebarActions";
+import { classNames } from "primereact/utils";
+import {
+  selectCanChoosePedagoLayout,
+  selectCanChooseTheme,
+} from "../../activityData/activityDataSlice";
+import { ActivitySettingsDisplay } from "../../activitySettings";
+import { Button } from "primereact/button";
+import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
+import settings from "../../../settings";
+import { useReset } from "../../activityJS/hooks";
+
+type SettingsSidebarContentProps = {
+  showHelp?: () => void;
+};
+
+const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
+  const canChooseOrientation = useAppSelector(selectCanChoosePedagoLayout);
+  const canChooseTheme = useAppSelector(selectCanChooseTheme);
+  const orientation = useAppSelector(selectOrientation);
+  const themeName = useAppSelector(selectThemeNameOrAuto);
+  const sidebarActions = useAppSelector(selectSidebarActions);
+  const reset = useReset({ onError: console.error });
+  const dispatch = useAppDispatch();
+  return (
+    <>
+      <div className={styles.sidebarCapytaleActions}>
+        {props.showHelp && (
+          <Button
+            aria-label="Voir la documentation"
+            severity="secondary"
+            size="small"
+            icon={"pi pi-question-circle"}
+            onClick={() => {
+              props.showHelp!();
+            }}
+            outlined
+            label="Documentation"
+            tooltip="Voir la documentation"
+            tooltipOptions={{
+              position: "left",
+              showDelay: settings.TOOLTIP_SHOW_DELAY,
+            }}
+          />
+        )}
+        {reset && (
+          <>
+            <ConfirmPopup />
+            <Button
+              aria-label="Réinitialiser l'activité"
+              severity="secondary"
+              size="small"
+              icon={"pi pi-undo"}
+              onClick={(event) => {
+                confirmPopup({
+                  target: event.currentTarget,
+                  message:
+                    "Toutes vos modifications seront perdues. Continuer ?",
+                  icon: "pi pi-exclamation-triangle",
+                  defaultFocus: "reject",
+                  acceptClassName: "p-button-danger",
+                  accept: reset,
+                  acceptLabel: "Oui",
+                  rejectLabel: "Non",
+                });
+              }}
+              outlined
+              label="Réinitialiser l'activité"
+              tooltip="Revenir à la version de l'enseignant"
+              tooltipOptions={{
+                position: "left",
+                showDelay: settings.TOOLTIP_SHOW_DELAY,
+              }}
+            />
+          </>
+        )}
+      </div>
+      {sidebarActions.length > 0 && (
+        <Fieldset
+          legend="Actions"
+          className={classNames(
+            "sidebarFieldset",
+            styles.sidebarFieldsetButtons,
+          )}
+        >
+          <ActivitySidebarActions />
+        </Fieldset>
+      )}
+      {canChooseOrientation && (
+        <Fieldset legend="Disposition" className="sidebarFieldset">
+          <div className="sidebarRadioButtons">
+            <div className="sidebarRadioGroup">
+              <RadioButton
+                aria-label="Option de disposition horizontale"
+                inputId="rb-horizontal"
+                name="horizontal"
+                value="horizontal"
+                onChange={(e) => dispatch(setLayout(e.value))}
+                checked={orientation === "horizontal"}
+              />
+              <label htmlFor="rb-horizontal" className="ml-2">
+                Horizontale
+              </label>
+            </div>
+            <div className="sidebarRadioGroup">
+              <RadioButton
+                aria-label="Option de disposition verticale"
+                inputId="rb-vertical"
+                name="vertical"
+                value="vertical"
+                onChange={(e) => dispatch(setLayout(e.value))}
+                checked={orientation === "vertical"}
+              />
+              <label htmlFor="rb-vertical" className="ml-2">
+                Verticale
+              </label>
+            </div>
+          </div>
+        </Fieldset>
+      )}
+      {canChooseTheme && (
+        <Fieldset legend="Thème" className="sidebarFieldset">
+          <div className="sidebarRadioButtons">
+            <div className="sidebarRadioGroup">
+              <RadioButton
+                aria-label="Option de thème clair"
+                inputId="rb-light"
+                name="light"
+                value="light"
+                onChange={(_e) => {
+                  dispatch(setAutoSwitch(false));
+                  dispatch(switchToTheme("light"));
+                }}
+                checked={themeName === "Clair"}
+              />
+              <label htmlFor="rb-light" className="ml-2">
+                Clair
+              </label>
+            </div>
+            <div className="sidebarRadioGroup">
+              <RadioButton
+                aria-label="Option de thème sombre"
+                inputId="rb-dark"
+                name="dark"
+                value="dark"
+                onChange={(_e) => {
+                  dispatch(setAutoSwitch(false));
+                  dispatch(switchToTheme("dark"));
+                }}
+                checked={themeName === "Sombre"}
+              />
+              <label htmlFor="rb-dark" className="ml-2">
+                Sombre
+              </label>
+            </div>
+            <div className="sidebarRadioGroup">
+              <RadioButton
+                aria-label="Option de thème système"
+                inputId="rb-auto"
+                name="auto"
+                value="auto"
+                onChange={(_e) => dispatch(setAutoSwitch(true))}
+                checked={themeName === "Système (auto)"}
+              />
+              <label htmlFor="rb-auto" className="ml-2">
+                Système (auto)
+              </label>
+            </div>
+          </div>
+        </Fieldset>
+      )}
+      <ActivitySettingsDisplay />
+    </>
+  );
+};
+
+export default SettingsSidebarContent;

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

@@ -1,15 +1,15 @@
-.sidebarCapytaleActions {
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  & > button {
-    width: 100%;
-  }
-}
-
-.sidebarFieldsetButtons :global(.p-fieldset-content) {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
+.sidebarCapytaleActions {
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  & > button {
+    width: 100%;
+  }
+}
+
+.sidebarFieldsetButtons :global(.p-fieldset-content) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

package/src/features/navbar/student-utils.ts

@@ -1,11 +1,11 @@
-import { StudentInfo } from "../activityData/activityJsData";
-
-export function studentNameFromInfo(studentInfo: StudentInfo | null) {
-  if (!studentInfo || (!studentInfo.firstName && !studentInfo.lastName)) {
-    return null;
-  }
-  if (studentInfo.class && studentInfo.class !== "enseignants") {
-    return `${studentInfo.firstName} ${studentInfo.lastName} — ${studentInfo.class}`;
-  }
-  return `${studentInfo.firstName} ${studentInfo.lastName}`;
-}
+import { StudentInfo } from "../activityData/activityJsData";
+
+export function studentNameFromInfo(studentInfo: StudentInfo | null) {
+  if (!studentInfo || (!studentInfo.firstName && !studentInfo.lastName)) {
+    return null;
+  }
+  if (studentInfo.class && studentInfo.class !== "enseignants") {
+    return `${studentInfo.firstName} ${studentInfo.lastName} — ${studentInfo.class}`;
+  }
+  return `${studentInfo.firstName} ${studentInfo.lastName}`;
+}

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

@@ -1,65 +1,65 @@
-.navbar {
-  --navbar-text-color: rgba(255, 255, 255, 0.95);
-  background-color: var(--surface-800);
-  display: flex;
-  align-items: center;
-  color: var(--navbar-text-color);
-  overflow: hidden;
-  color-scheme: dark;
-  :global(.dark-theme) & {
-    --navbar-text-color: var(--text-color);
-    background-color: var(--surface-50);
-  }
-  & :global(.p-button-outlined),
-  & :global(.p-button-text) {
-    color: var(--navbar-text-color);
-  }
-  & :global(.p-button-outlined) {
-    border-color: var(--navbar-text-color);
-  }
-  :global(.light-theme) & :global(.p-button.p-button-secondary:enabled:focus) {
-    box-shadow:
-      0 0 0 2px #1c2127,
-      0 0 0 4px rgba(255, 255, 255, 0.7),
-      0 1px 2px 0 rgba(0, 0, 0, 0);
-  }
-  :global(.light-theme) & :global(.p-button.p-button-warning:enabled:focus) {
-    box-shadow:
-      0 0 0 2px #1c2127,
-      0 0 0 4px rgba(249, 115, 22, 0.7),
-      0 1px 2px 0 rgba(0, 0, 0, 0);
-  }
-}
-
-.navbarContainer {
-  height: 60px;
-  flex-grow: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-  overflow: hidden;
-  & > * {
-    flex-shrink: 0;
-  }
-}
-
-.navbarLogo {
-  font-family: Ubuntu, Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  font-size: 24px;
-  letter-spacing: 2px;
-  height: 100%;
-  & > * {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 16px;
-    color: var(--navbar-text-color);
-    text-decoration: none;
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-}
+.navbar {
+  --navbar-text-color: rgba(255, 255, 255, 0.95);
+  background-color: var(--surface-800);
+  display: flex;
+  align-items: center;
+  color: var(--navbar-text-color);
+  overflow: hidden;
+  color-scheme: dark;
+  :global(.dark-theme) & {
+    --navbar-text-color: var(--text-color);
+    background-color: var(--surface-50);
+  }
+  & :global(.p-button-outlined),
+  & :global(.p-button-text) {
+    color: var(--navbar-text-color);
+  }
+  & :global(.p-button-outlined) {
+    border-color: var(--navbar-text-color);
+  }
+  :global(.light-theme) & :global(.p-button.p-button-secondary:enabled:focus) {
+    box-shadow:
+      0 0 0 2px #1c2127,
+      0 0 0 4px rgba(255, 255, 255, 0.7),
+      0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  :global(.light-theme) & :global(.p-button.p-button-warning:enabled:focus) {
+    box-shadow:
+      0 0 0 2px #1c2127,
+      0 0 0 4px rgba(249, 115, 22, 0.7),
+      0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+}
+
+.navbarContainer {
+  height: 60px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  overflow: hidden;
+  & > * {
+    flex-shrink: 0;
+  }
+}
+
+.navbarLogo {
+  font-family: Ubuntu, Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  letter-spacing: 2px;
+  height: 100%;
+  & > * {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    color: var(--navbar-text-color);
+    text-decoration: none;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}