@capytale/meta-player 0.9.11 → 0.10.0

package/src/features/theming/themingSlice.ts

@@ -1,93 +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;
+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/features/toast.tsx

@@ -1,38 +1,38 @@
-import { Toast } from "primereact/toast";
-import {
-  createContext,
-  FC,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-const ToastContext = createContext<Toast | null>(null);
-
-export const ToastProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const toast = useRef<Toast>(null);
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
-    setLoaded(true);
-  }, []);
-  return (
-    <>
-      <Toast ref={toast} position="bottom-right" />
-      {loaded && (
-        <ToastContext.Provider value={toast.current}>
-          {children}
-        </ToastContext.Provider>
-      )}
-    </>
-  );
-};
-
-export const useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-};
+import { Toast } from "primereact/toast";
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+const ToastContext = createContext<Toast | null>(null);
+
+export const ToastProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const toast = useRef<Toast>(null);
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    setLoaded(true);
+  }, []);
+  return (
+    <>
+      <Toast ref={toast} position="bottom-right" />
+      {loaded && (
+        <ToastContext.Provider value={toast.current}>
+          {children}
+        </ToastContext.Provider>
+      )}
+    </>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};

package/src/hooks/index.ts

@@ -1,16 +1,55 @@
-import { ActivityMode } from "@capytale/activity.js/activity/activitySession";
-import { useAppSelector } from "../app/hooks";
-import {
-  selectMode,
-  selectWorkflow,
-} from "../features/activityData/activityDataSlice";
-
-export const useMode = () => {
-  const mode: ActivityMode = useAppSelector(selectMode);
-  return mode;
-};
-
-export const useWorkflow = () => {
-  const workflow = useAppSelector(selectWorkflow);
-  return workflow;
-};
+import { ActivityMode } from "@capytale/activity.js/activity/activitySession";
+import { useAppSelector } from "../app/hooks";
+import {
+  selectMode,
+  selectWorkflow,
+} from "../features/activityData/activityDataSlice";
+import { useZustandStore } from "../zustandStore";
+import { useEffect, useMemo } from "react";
+
+export const useMode = () => {
+  const isPreviewing = useZustandStore((state) => state.isPreviewing);
+  const realMode: ActivityMode = useAppSelector(selectMode);
+  const mode = useMemo(() => {
+    if (realMode === "create" && isPreviewing === "forced") {
+      return "create";
+    }
+    return realMode;
+  }, [isPreviewing, realMode]);
+  return mode;
+};
+
+export const useWorkflow = () => {
+  const workflow = useAppSelector(selectWorkflow);
+  return workflow;
+};
+
+export const usePreview = ({
+  onStart,
+  onStop,
+  mustSave,
+}: {
+  onStart: () => void | Promise<void>;
+  onStop: () => void | Promise<void>;
+  mustSave: boolean;
+}) => {
+  const isPreviewing = useZustandStore((state) => state.isPreviewing);
+  const setStartStopPreviewing = useZustandStore(
+    (state) => state.setStartStopPreviewing,
+  );
+  useEffect(() => {
+    setStartStopPreviewing({
+      startPreviewing: onStart,
+      stopPreviewing: onStop,
+      mustSave,
+    });
+    return () => {
+      setStartStopPreviewing({
+        startPreviewing: null,
+        stopPreviewing: null,
+        mustSave: true,
+      });
+    };
+  }, [onStart, onStop, setStartStopPreviewing]);
+  return isPreviewing;
+};

package/src/index.css

@@ -1,133 +1,133 @@
-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 {
-  overscroll-behavior: none;
-}
-
-html,
-body,
-#root {
-  height: 100%;
-}
-
-.p-splitter-horizontal > .p-splitter-gutter {
-  width: 6px !important;
-}
-.p-splitter-vertical > .p-splitter-gutter {
-  height: 6px !important;
-}
-
-@media (pointer: coarse) {
-  .p-splitter-horizontal > .p-splitter-gutter {
-    width: 12px !important;
-  }
-  .p-splitter-vertical > .p-splitter-gutter {
-    height: 12px !important;
-  }
-}
-
-.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;
-}
-
-.editor-shell {
-  text-align: start;
-  width: 100%;
-}
-
-.p-splitter-panel:has(> .meta-player-content-cover) {
-  position: relative;
-}
-
-.meta-player-content-cover {
-  display: none;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  background-color: rgba(0, 0, 0, 0);
-  .p-splitter-resizing & {
-    display: block;
-  }
-}
-
-#meta-player-content {
-  height: 100%;
-  background-color: var(--surface-a);
-}
-
-:has(> #meta-player-content) {
-  height: 100%;
-  background-color: var(--surface-a);
-}
-
-.sidebarFieldset {
-  margin-bottom: 8px;
-}
-
-.sidebarRadioButtons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.sidebarRadioGroup {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-#metaPlayerHelpDialog {
-  width: 80vw;
-  height: 80vh;
-}
-
-#metaPlayerHelpDialog_content {
-  padding: 0;
-  & iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
-    display: block;
-  }
-}
-
-.anti-cheat-content {
-  height: 100vh;
-  height: 100dvh;
-  width: 100vw;
-  overflow: hidden;
-}
-
-.anti-cheat h1:first-child {
-  margin-top: 0;
-}
-
-.p-button-group .p-button:not(:last-child):not(:active):not(:focus) {
-  border-right: 0 !important;
+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 {
+  overscroll-behavior: none;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+  width: 6px !important;
+}
+.p-splitter-vertical > .p-splitter-gutter {
+  height: 6px !important;
+}
+
+@media (pointer: coarse) {
+  .p-splitter-horizontal > .p-splitter-gutter {
+    width: 12px !important;
+  }
+  .p-splitter-vertical > .p-splitter-gutter {
+    height: 12px !important;
+  }
+}
+
+.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;
+}
+
+.editor-shell {
+  text-align: start;
+  width: 100%;
+}
+
+.p-splitter-panel:has(> .meta-player-content-cover) {
+  position: relative;
+}
+
+.meta-player-content-cover {
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0);
+  .p-splitter-resizing & {
+    display: block;
+  }
+}
+
+#meta-player-content {
+  height: 100%;
+  background-color: var(--surface-a);
+}
+
+:has(> #meta-player-content) {
+  height: 100%;
+  background-color: var(--surface-a);
+}
+
+.sidebarFieldset {
+  margin-bottom: 8px;
+}
+
+.sidebarRadioButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebarRadioGroup {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+#metaPlayerHelpDialog {
+  width: 80vw;
+  height: 80vh;
+}
+
+#metaPlayerHelpDialog_content {
+  padding: 0;
+  & iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+  }
+}
+
+.anti-cheat-content {
+  height: 100vh;
+  height: 100dvh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.anti-cheat h1:first-child {
+  margin-top: 0;
+}
+
+.p-button-group .p-button:not(:last-child):not(:active):not(:focus) {
+  border-right: 0 !important;
 }