@capytale/meta-player 0.0.1

package/src/features/pedago/index.tsx

@@ -0,0 +1,219 @@
+import { Button } from "primereact/button";
+import { Panel } from "primereact/panel";
+import styles from "./style.module.scss";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectIsGradingVisible,
+  selectOrientation,
+  selectPedagoTab,
+  toggleIsGradingVisible,
+  toggleIsPedagoVisible,
+} from "../layout/layoutSlice";
+
+import "@capytale/capytale-rich-text-editor/style.css";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { classNames } from "primereact/utils";
+import InstructionsEditor from "./InstructionsEditor";
+import {
+  selectComments,
+  selectGrading,
+  selectHasGradingOrComments,
+  selectMode,
+  setComments,
+  setGrading,
+} from "../activityData/activityDataSlice";
+import { ChangeEventHandler } from "react";
+import settings from "../../settings";
+import { DivProps } from "react-html-props";
+import AnswerSheetEditor from "./AnswerSheetEditor";
+
+const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
+  const dispatch = useAppDispatch();
+  const mode = useAppSelector(selectMode);
+  const comments = useAppSelector(selectComments);
+  const grading = useAppSelector(selectGrading);
+  const pedagoTab = useAppSelector(selectPedagoTab);
+  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
+  const isGradingVisible =
+    useAppSelector(selectIsGradingVisible) &&
+    (hasGradingOrComments || mode === "review");
+  const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
+  const mayReverse = isHorizontal
+    ? (tab: Array<any>) => tab.toReversed()
+    : (tab: Array<any>) => tab;
+
+  const handleCommentsChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    console.log("Comments change:", event.target.value);
+    dispatch(setComments(event.target.value));
+  };
+
+  const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    console.log("Grading change:", event.target.value);
+    dispatch(setGrading(event.target.value));
+  };
+
+  return (
+    // @ts-ignore - Incompatibility for props in TS
+    <div className={classNames(styles.pedago, className)} {...props}>
+      <div className={styles.pedagoCommands}>
+        <Button
+          severity="secondary"
+          icon="pi pi-times"
+          rounded
+          text
+          aria-label="Masquer les consignes"
+          tooltip="Masquer les consignes"
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          onClick={() => dispatch(toggleIsPedagoVisible())}
+        />
+        {/*
+        <Button
+          rounded
+          text
+          icon="pi pi-times"
+          label="H"
+          onClick={() => {
+            dispatch(
+              setPedagoTab(
+                pedagoTab === "instructions" ? "answerSheet" : "instructions",
+              ),
+            );
+          }}
+        />
+        */}
+        <div className={styles.pedagoSeparator}></div>
+        {(mode === "assignment" || mode === "review") && (
+          <ShowHideGradingButton />
+        )}
+      </div>
+      <div
+        className={styles.pedagoContent}
+        data-grading-visible={isGradingVisible}
+      >
+        {!isGradingVisible && (
+          <>
+            {pedagoTab === "instructions" && <InstructionsEditor />}
+            {pedagoTab === "answerSheet" && <AnswerSheetEditor />}
+          </>
+        )}
+        {isGradingVisible && (
+          <Splitter
+            layout={isHorizontal ? "horizontal" : "vertical"}
+            className={styles.pedagoSplitter}
+          >
+            {mayReverse([
+              <SplitterPanel
+                key="gradingPanel"
+                minSize={30}
+                size={40}
+                className={styles.gradingPanel}
+              >
+                <Panel
+                  className={classNames(
+                    styles.fullSizePanel,
+                    styles.pedagoFeedbackPanel,
+                  )}
+                  header="Appréciation"
+                >
+                  <div className={styles.pedagoFeedback}>
+                    {(comments || mode !== "assignment") && (
+                      <textarea
+                        value={comments || ""}
+                        placeholder={
+                          mode !== "review" ? "" : "Rédigez ici l'appréciation."
+                        }
+                        id="comments"
+                        name="comments"
+                        rows={2}
+                        readOnly={mode !== "review"}
+                        onChange={handleCommentsChange}
+                        className={styles.fullTextarea}
+                      />
+                    )}
+                  </div>
+                </Panel>
+                <Panel
+                  className={classNames(
+                    styles.fullSizePanel,
+                    styles.pedagoGradePanel,
+                  )}
+                  header="Évaluation"
+                >
+                  <div className={styles.pedagoGrade}>
+                    {(grading || mode !== "assignment") && (
+                      <textarea
+                        value={grading || ""}
+                        placeholder={
+                          mode !== "review"
+                            ? ""
+                            : "Écrivez ici l'évaluation libre (chiffrée ou non)."
+                        }
+                        id="grading"
+                        name="grading"
+                        rows={1}
+                        readOnly={mode !== "review"}
+                        onChange={handleGradingChange}
+                        className={styles.fullTextarea}
+                      />
+                    )}
+                  </div>
+                </Panel>
+              </SplitterPanel>,
+              <SplitterPanel
+                key="pedagoPanel"
+                minSize={50}
+                size={60}
+                className={styles.pedagoPanel}
+              >
+                <Panel className={styles.fullSizePanel} header="Consignes">
+                  {pedagoTab === "instructions" && <InstructionsEditor />}
+                  {pedagoTab === "answerSheet" && <AnswerSheetEditor />}
+                </Panel>
+              </SplitterPanel>
+            ])}
+          </Splitter>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ShowHideGradingButton: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const mode = useAppSelector(selectMode);
+  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
+  const isGradingVisible = useAppSelector(selectIsGradingVisible);
+  const tooltip =
+    hasGradingOrComments || mode === "review"
+      ? isGradingVisible
+        ? "Masquer la notation"
+        : "Afficher la notation"
+      : "Pas de note";
+
+  return (
+    <Button
+      severity="secondary"
+      icon="pi pi-graduation-cap"
+      disabled={!(hasGradingOrComments || mode === "review")}
+      rounded
+      text={!isGradingVisible || !(hasGradingOrComments || mode === "review")}
+      aria-label={tooltip}
+      tooltip={tooltip}
+      tooltipOptions={{
+        position: "left",
+        showDelay: settings.TOOLTIP_SHOW_DELAY,
+        showOnDisabled: true,
+      }}
+      onClick={() => dispatch(toggleIsGradingVisible())}
+    />
+  );
+};
+
+export default Pedago;

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

@@ -0,0 +1,104 @@
+.pedago {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  :global(.layout-horizontal) & {
+    grid-template-columns: 1fr calc(3rem + 8px);
+    grid-template-rows: 1fr;
+  }
+  :global(.layout-vertical) & {
+    grid-template-rows: calc(3rem + 8px) 1fr;
+    grid-template-columns: 1fr;
+  }
+}
+
+.pedagoCommands {
+  flex-direction: column;
+  padding: 4px;
+  display: flex;
+  gap: 8px;
+  background-color: var(--surface-200);
+  :global(.layout-horizontal) & {
+    grid-column-start: 2;
+    grid-row-start: 1;
+  }
+  :global(.layout-vertical) & {
+    flex-direction: row-reverse;
+  }
+}
+
+.pedagoSeparator {
+  flex-grow: 1;
+}
+
+.pedagoSplitter {
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  background-color: var(--surface-0);
+  & > :global(.p-splitter-panel) {
+    overflow-y: hidden;
+  }
+}
+
+.gradingPanel {
+  display: flex;
+  gap: 4px;
+}
+
+*:has(> .fullSizePanel) {
+  padding: 4px;
+}
+
+.fullSizePanel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  & > :global(.p-panel-header) {
+    flex-shrink: 0;
+  }
+  & > :global(.p-toggleable-content) {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+  & > :global(.p-toggleable-content) > * {
+    height: 100%;
+    padding: 0;
+    overflow: auto;
+    display: flex;
+  }
+}
+
+.pedagoContent {
+  overflow-y: auto;
+  :global(.layout-horizontal) & {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+}
+
+.pedagoFeedbackPanel {
+  flex-grow: 3;
+  flex-basis: 0;
+}
+
+.pedagoGradePanel {
+  flex-grow: 2;
+  flex-basis: 0;
+}
+
+.fullTextarea {
+  width: 100%;
+  padding: 0.7em;
+  border: 1px solid transparent;
+  resize: none;
+  height: 100%;
+  background-color: transparent;
+}
+
+*:has(> .fullTextarea) {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}

package/src/features/theming/ThemeSwitcher.tsx

@@ -0,0 +1,51 @@
+import { FC, useCallback, useContext, useEffect, useMemo } from "react";
+import { PrimeReactContext } from "primereact/api";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectAutoSwitch,
+  selectPreviousThemePath,
+  selectThemePath,
+  switchToTheme,
+} from "./themingSlice";
+
+const ThemeSwitcher: FC = () => {
+  const dispatch = useAppDispatch();
+  const mediaMatch = useMemo(
+    () => window.matchMedia("(prefers-color-scheme: dark)"),
+    [],
+  );
+  const { changeTheme } = useContext(PrimeReactContext);
+  const themePath = useAppSelector(selectThemePath);
+  const previousThemePath = useAppSelector(selectPreviousThemePath);
+  const autoSwitch = useAppSelector(selectAutoSwitch);
+  const handlePrefersColorScheme = useCallback((e: MediaQueryListEvent) => {
+    dispatch(switchToTheme(e.matches ? "dark" : "light"));
+  }, []);
+  useEffect(() => {
+    if (themePath !== previousThemePath) {
+      changeTheme &&
+        changeTheme(
+          previousThemePath as string,
+          themePath as string,
+          "theme-link",
+        );
+    }
+  }, [themePath]);
+  useEffect(() => {
+    if (autoSwitch) {
+      if (mediaMatch.matches) {
+        dispatch(switchToTheme("dark"));
+      } else {
+        dispatch(switchToTheme("light"));
+      }
+      mediaMatch.addEventListener("change", handlePrefersColorScheme);
+      return () => {
+        mediaMatch.removeEventListener("change", handlePrefersColorScheme);
+      };
+    }
+  }, [autoSwitch]);
+
+  return <></>;
+};
+
+export default ThemeSwitcher;

package/src/features/theming/themingSlice.ts

@@ -0,0 +1,93 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+type ThemeData = {
+  id: string;
+  name: string;
+  path: string;
+  isDark: boolean;
+};
+
+export interface ThemingState {
+  themes: ThemeData[];
+  currentTheme: number;
+  previousTheme: number;
+  autoSwitch: boolean;
+}
+
+const initialState: ThemingState = {
+  themes: [
+    {
+      id: "light",
+      name: "Clair",
+      path: "https://cdn.ac-paris.fr/capytale/meta-player/themes/lara-light-blue/theme.css",
+      isDark: false,
+    },
+    {
+      id: "dark",
+      name: "Sombre",
+      path: "https://cdn.ac-paris.fr/capytale/meta-player/themes/lara-dark-blue/theme.css",
+      isDark: true,
+    },
+  ],
+  currentTheme: 0,
+  previousTheme: 0,
+  autoSwitch: false,
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const themingSlice = createAppSlice({
+  name: "theming",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    switchToNextTheme: create.reducer((state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.previousTheme = state.currentTheme;
+      state.currentTheme = (state.currentTheme + 1) % state.themes.length;
+    }),
+    // Use the `PayloadAction` type to declare the contents of `action.payload`
+    switchToTheme: create.reducer((state, action: PayloadAction<string>) => {
+      state.previousTheme = state.currentTheme;
+      state.currentTheme = state.themes.findIndex(
+        (theme) => theme.id === action.payload,
+      );
+    }),
+    setAutoSwitch: create.reducer((state, action: PayloadAction<boolean>) => {
+      state.autoSwitch = action.payload;
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectThemePath: (theming) => theming.themes[theming.currentTheme].path,
+    selectPreviousThemePath: (theming) =>
+      theming.themes[theming.previousTheme].path,
+    selectThemeName: (theming) => theming.themes[theming.currentTheme].name,
+    selectThemeIsDark: (theming) => theming.themes[theming.currentTheme].isDark,
+    selectAutoSwitch: (theming) => theming.autoSwitch,
+    selectThemeNameOrAuto: (theming) => {
+      return theming.autoSwitch
+        ? "Système (auto)"
+        : theming.themes[theming.currentTheme].name;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const { switchToNextTheme, switchToTheme, setAutoSwitch } =
+  themingSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const {
+  selectThemePath,
+  selectPreviousThemePath,
+  selectThemeName,
+  selectThemeIsDark,
+  selectAutoSwitch,
+  selectThemeNameOrAuto,
+} = themingSlice.selectors;

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+import { ActivityMode } from "@capytale/activity.js/activity/activitySession";
+import { useAppSelector } from "../app/hooks";
+import { selectMode } from "../features/activityData/activityDataSlice";
+
+export const useMode = () => {
+  const mode: ActivityMode = useAppSelector(selectMode);
+  return mode;
+};

package/src/index.css

@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+.p-splitter-gutter {
+  background-color: var(--surface-200);
+}
+
+.p-splitter-gutter-handle, .p-splitter-gutter-resizing {
+  background-color: var(--surface-400);
+}
+
+*:has(>.editor-shell) { /* Rich text editor */
+  background-color: white;
+  color-scheme: light;
+}

package/src/index.tsx

@@ -0,0 +1,6 @@
+import "primeicons/primeicons.css";
+import "./index.css";
+
+import MetaPlayer from "./MetaPlayer";
+
+export { MetaPlayer };

package/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="#764ABC"><path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/><path d="M83.2 53c-7.6-8.9-18.8-13.8-31.6-13.8H50c-.9-1.8-2.8-3-4.9-3h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 3 2.6 5.4 5.6 5.4h.2c2.2-.1 4.1-1.5 4.9-3.4H52c7.6 0 14.8 2.2 21.3 6.5 5 3.3 8.6 7.6 10.6 12.8 1.7 4.2 1.6 8.3-.2 11.8-2.8 5.3-7.5 8.2-13.7 8.2-4 0-7.8-1.2-9.8-2.1-1.1 1-3.1 2.6-4.5 3.6 4.3 2 8.7 3.1 12.9 3.1 9.6 0 16.7-5.3 19.4-10.6 2.9-5.8 2.7-15.8-4.8-24.3z"/><path d="M32.4 67.1c.1 3 2.6 5.4 5.6 5.4h.2c3.1-.1 5.5-2.7 5.4-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-.2 0-.5 0-.7.1-4.1-6.8-5.8-14.2-5.2-22.2.4-6 2.4-11.2 5.9-15.5 2.9-3.7 8.5-5.5 12.3-5.6 10.6-.2 15.1 13 15.4 18.3 1.3.3 3.5 1 5 1.5-1.2-16.2-11.2-24.6-20.8-24.6-9 0-17.3 6.5-20.6 16.1-4.6 12.8-1.6 25.1 4 34.8-.5.7-.8 1.8-.7 2.9z"/></g></svg>