@capytale/meta-player 0.9.11 → 0.10.0

package/src/App.tsx

@@ -1,140 +1,145 @@
-import { Splitter, SplitterPanel } from "primereact/splitter";
-import Navbar from "./features/navbar";
-
-import styles from "./app.module.scss";
-import Pedago from "./features/pedago";
-import { useAppDispatch, useAppSelector } from "./app/hooks";
-import { selectThemeIsDark } from "./features/theming/themingSlice";
-
-import { Ripple } from "primereact/ripple";
-import { classNames } from "primereact/utils";
-import {
-  selectShowSaveForStudents,
-  setIsPedagoVisible,
-} from "./features/layout/layoutSlice";
-import {
-  FC,
-  KeyboardEvent,
-  PropsWithChildren,
-  useCallback,
-  useMemo,
-} from "react";
-import { Tooltip } from "primereact/tooltip";
-import {
-  selectIsDirty,
-  selectMode,
-  selectShowSaveButton,
-} from "./features/activityData/activityDataSlice";
-import settings from "./settings";
-import ReviewNavbar from "./features/navbar/review-navbar";
-import { useSave } from "./features/activityData/hooks";
-import PreviewDialog from "./features/functionalities/PreviewDialog";
-import { usePedagoOptions } from "./features/pedago/hooks";
-
-type AppProps = PropsWithChildren<{}>;
-
-const App: FC<AppProps> = (props) => {
-  const isDark = useAppSelector(selectThemeIsDark) as boolean;
-  const mode = useAppSelector(selectMode);
-  const { showPedago, hasPedago, isHorizontal } = usePedagoOptions();
-
-  const dispatch = useAppDispatch();
-  const isDirty = useAppSelector(selectIsDirty);
-  const save = useSave();
-
-  const showSaveButton = useAppSelector(selectShowSaveButton);
-  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
-  const hasSaveButton =
-    showSaveButton && !(mode === "assignment" && !showSaveForStudents);
-
-  const handleCtrlS = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
-        e.preventDefault();
-        if (hasSaveButton && isDirty) save(); // Checks if can save inside of save()
-      }
-    },
-    [hasSaveButton, isDirty, save],
-  );
-
-  const pedagoOpenLabel = hasPedago
-    ? "Afficher les consignes"
-    : mode === "create"
-      ? "Ce type d'activité n'accepte pas de consigne"
-      : "Pas de consignes ni de note";
-
-  const togglePedago = useMemo(() => {
-    if (!hasPedago) return undefined;
-    return () => dispatch(setIsPedagoVisible(!showPedago));
-  }, [hasPedago, showPedago]);
-
-  return (
-    <div
-      className={classNames(
-        styles.app,
-        isDark ? "dark-theme" : "light-theme",
-        isHorizontal ? "layout-horizontal" : "layout-vertical",
-      )}
-      onKeyDown={handleCtrlS}
-    >
-      <div className={styles.navbarContainer}>
-        <Navbar />
-        {mode === "review" && <ReviewNavbar />}
-      </div>
-      <div className={styles.pedagoContainer} data-show-pedago={showPedago}>
-        <div
-          className={classNames(
-            styles.hiddenPedago,
-            hasPedago ? null : styles.noPedago,
-          )}
-        >
-          <div
-            className={classNames(
-              styles.hiddenPedagoButton,
-              hasPedago ? "p-ripple" : null,
-            )}
-            onClick={togglePedago}
-            data-pr-tooltip={pedagoOpenLabel}
-            aria-label={pedagoOpenLabel}
-            role={hasPedago ? "button" : "note"}
-          >
-            <i
-              className={classNames(
-                "pi",
-                hasPedago
-                  ? isHorizontal
-                    ? "pi-angle-double-down"
-                    : "pi-angle-double-right"
-                  : "pi-minus-circle",
-              )}
-            />
-            <Ripple />
-          </div>
-          <Tooltip
-            target={"." + styles.hiddenPedagoButton}
-            showDelay={settings.TOOLTIP_SHOW_DELAY}
-            position={isHorizontal ? "bottom" : "right"}
-            mouseTrack={!isHorizontal}
-          />
-        </div>
-        <Splitter
-          className={styles.appPedagoSplitter}
-          layout={isHorizontal ? "vertical" : "horizontal"}
-        >
-          <SplitterPanel minSize={15} size={30} className={styles.pedagoPanel}>
-            <Pedago key="pedago" />
-          </SplitterPanel>
-          <SplitterPanel minSize={40} size={70} className={styles.contentPanel}>
-            <div className="meta-player-content-cover"></div>
-            <div id="meta-player-content" aria-label="Activité">
-              {props.children}
-            </div>
-          </SplitterPanel>
-        </Splitter>
-      </div>
-      <PreviewDialog />
-    </div>
-  );
-};
-
-export default App;
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import Navbar from "./features/navbar";
+
+import styles from "./app.module.scss";
+import Pedago from "./features/pedago";
+import { useAppDispatch, useAppSelector } from "./app/hooks";
+import { selectThemeIsDark } from "./features/theming/themingSlice";
+
+import { Ripple } from "primereact/ripple";
+import { classNames } from "primereact/utils";
+import {
+  selectShowSaveForStudents,
+  setIsPedagoVisible,
+} from "./features/layout/layoutSlice";
+import {
+  FC,
+  KeyboardEvent,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+} from "react";
+import { Tooltip } from "primereact/tooltip";
+import {
+  selectIsDirty,
+  selectMode,
+  selectShowSaveButton,
+} from "./features/activityData/activityDataSlice";
+import settings from "./settings";
+import ReviewNavbar from "./features/navbar/review-navbar";
+import { useSave } from "./features/activityData/hooks";
+import PreviewDialog from "./features/functionalities/PreviewDialog";
+import { usePedagoOptions } from "./features/pedago/hooks";
+import PreviewNavbar from "./features/navbar/preview-navbar";
+import { useZustandStore } from "./zustandStore";
+
+type AppProps = PropsWithChildren<{}>;
+
+const App: FC<AppProps> = (props) => {
+  const isDark = useAppSelector(selectThemeIsDark) as boolean;
+  const mode = useAppSelector(selectMode);
+  const { showPedago, hasPedago, isHorizontal } = usePedagoOptions();
+
+  const dispatch = useAppDispatch();
+  const isDirty = useAppSelector(selectIsDirty);
+  const save = useSave();
+
+  const showSaveButton = useAppSelector(selectShowSaveButton);
+  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
+  const hasSaveButton =
+    showSaveButton && !(mode === "assignment" && !showSaveForStudents);
+
+  const handleCtrlS = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        if (hasSaveButton && isDirty) save(); // Checks if can save inside of save()
+      }
+    },
+    [hasSaveButton, isDirty, save],
+  );
+
+  const pedagoOpenLabel = hasPedago
+    ? "Afficher les consignes"
+    : mode === "create"
+      ? "Ce type d'activité n'accepte pas de consigne"
+      : "Pas de consignes ni de note";
+
+  const togglePedago = useMemo(() => {
+    if (!hasPedago) return undefined;
+    return () => dispatch(setIsPedagoVisible(!showPedago));
+  }, [hasPedago, showPedago]);
+
+  const isPreviewing = useZustandStore((state) => state.isPreviewing);
+
+  return (
+    <div
+      className={classNames(
+        styles.app,
+        isDark ? "dark-theme" : "light-theme",
+        isHorizontal ? "layout-horizontal" : "layout-vertical",
+      )}
+      onKeyDown={handleCtrlS}
+    >
+      <div className={styles.navbarContainer}>
+        <Navbar />
+        {mode === "review" && <ReviewNavbar />}
+        {isPreviewing && mode === "create" && <PreviewNavbar />}
+      </div>
+      <div className={styles.pedagoContainer} data-show-pedago={showPedago}>
+        <div
+          className={classNames(
+            styles.hiddenPedago,
+            hasPedago ? null : styles.noPedago,
+          )}
+        >
+          <div
+            className={classNames(
+              styles.hiddenPedagoButton,
+              hasPedago ? "p-ripple" : null,
+            )}
+            onClick={togglePedago}
+            data-pr-tooltip={pedagoOpenLabel}
+            aria-label={pedagoOpenLabel}
+            role={hasPedago ? "button" : "note"}
+          >
+            <i
+              className={classNames(
+                "pi",
+                hasPedago
+                  ? isHorizontal
+                    ? "pi-angle-double-down"
+                    : "pi-angle-double-right"
+                  : "pi-minus-circle",
+              )}
+            />
+            <Ripple />
+          </div>
+          <Tooltip
+            target={"." + styles.hiddenPedagoButton}
+            showDelay={settings.TOOLTIP_SHOW_DELAY}
+            position={isHorizontal ? "bottom" : "right"}
+            mouseTrack={!isHorizontal}
+          />
+        </div>
+        <Splitter
+          className={styles.appPedagoSplitter}
+          layout={isHorizontal ? "vertical" : "horizontal"}
+        >
+          <SplitterPanel minSize={15} size={30} className={styles.pedagoPanel}>
+            <Pedago key="pedago" />
+          </SplitterPanel>
+          <SplitterPanel minSize={40} size={70} className={styles.contentPanel}>
+            <div className="meta-player-content-cover"></div>
+            <div id="meta-player-content" aria-label="Activité">
+              {props.children}
+            </div>
+          </SplitterPanel>
+        </Splitter>
+      </div>
+      <PreviewDialog />
+    </div>
+  );
+};
+
+export default App;

package/src/AppRedux.css

@@ -1,39 +1,39 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-float infinite 3s ease-in-out;
-  }
-}
-
-.App-header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-  color: rgb(112, 76, 182);
-}
-
-@keyframes App-logo-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-float infinite 3s ease-in-out;
+  }
+}
+
+.App-header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-link {
+  color: rgb(112, 76, 182);
+}
+
+@keyframes App-logo-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}