@capytale/meta-player 0.0.1

package/src/App.tsx

@@ -0,0 +1,116 @@
+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 {
+  selectIsPedagoVisible,
+  selectOrientation,
+  toggleIsPedagoVisible,
+} from "./features/layout/layoutSlice";
+import { FC, PropsWithChildren } from "react";
+import { Tooltip } from "primereact/tooltip";
+import {
+  selectHasGradingOrComments,
+  selectHasInstructions,
+  selectMode,
+} from "./features/activityData/activityDataSlice";
+import settings from "./settings";
+import ReviewNavbar from "./features/navbar/ReviewNavbar";
+
+type AppProps = PropsWithChildren<{}>;
+
+const App: FC<AppProps> = (props) => {
+  const isDark = useAppSelector(selectThemeIsDark) as boolean;
+  const mode = useAppSelector(selectMode);
+  const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
+  const isPedagoVisible = useAppSelector(selectIsPedagoVisible) as boolean;
+  const hasInstructions = useAppSelector(selectHasInstructions);
+  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
+  const hasPedago = hasInstructions || hasGradingOrComments;
+  const dispatch = useAppDispatch();
+  return (
+    <div
+      className={classNames(
+        styles.app,
+        isDark ? "dark-theme" : "light-theme",
+        isHorizontal ? "layout-horizontal" : "layout-vertical",
+      )}
+    >
+      <div>
+        <Navbar />
+        {mode === "review" && <ReviewNavbar />}
+      </div>
+      {hasPedago && isPedagoVisible && (
+        <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}>
+            {props.children}
+          </SplitterPanel>
+        </Splitter>
+      )}
+      {(!hasPedago || !isPedagoVisible) && (
+        <div className={styles.hiddenPedagoContainer}>
+          <div
+            className={classNames(
+              styles.hiddenPedago,
+              hasPedago ? null : styles.noPedago,
+            )}
+          >
+            <div
+              className={classNames(
+                styles.hiddenPedagoButton,
+                hasPedago ? "p-ripple" : null,
+              )}
+              onClick={
+                hasPedago ? () => dispatch(toggleIsPedagoVisible()) : undefined
+              }
+              data-pr-tooltip={
+                hasPedago
+                  ? "Afficher les consignes"
+                  : "Pas de consignes ni de note"
+              }
+              aria-label={
+                hasPedago
+                  ? "Afficher les consignes"
+                  : "Pas de consignes ni de note"
+              }
+              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>
+          <div className={styles.hiddenPedagoContent}>{props.children}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;

package/src/AppRedux.css

@@ -0,0 +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);
+  }
+}

package/src/MetaPlayer.tsx

@@ -0,0 +1,51 @@
+import React, { PropsWithChildren, useMemo } from "react";
+
+import { Provider } from "react-redux";
+
+import { APIOptions, PrimeReactProvider } from "primereact/api";
+import "primeicons/primeicons.css";
+
+import App from "./App";
+import { store } from "./app/store";
+import "./index.css";
+import ThemeSwitcher from "./features/theming/ThemeSwitcher";
+import { ActivityJSProvider } from "./features/activityJS/ActivityJSProvider";
+import { LoadOptions } from "./features/activityJS/hooks";
+import { ErrorBoundary } from "./utils/ErrorBoundary";
+import {
+  MetaPlayerOptions,
+  defaultMetaPlayerOptions,
+} from "./features/activityData/metaPlayerOptions";
+import OptionSetter from "./features/activityData/OptionSetter";
+import Saver from "./features/activityJS/Saver";
+
+type MetaPlayerProps = PropsWithChildren<{
+  activityJSOptions?: LoadOptions;
+  options?: Partial<MetaPlayerOptions>;
+}>;
+
+const MetaPlayer: React.FC<MetaPlayerProps> = (props) => {
+  const primeSettings: Partial<APIOptions> = {
+    ripple: true,
+  };
+  const options = useMemo(
+    () => ({ ...defaultMetaPlayerOptions, ...props.options }),
+    [props.options],
+  );
+  return (
+    <PrimeReactProvider value={primeSettings}>
+      <Provider store={store}>
+        <OptionSetter options={options} />
+        <ThemeSwitcher />
+        <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
+          <ActivityJSProvider options={props.activityJSOptions}>
+            <Saver />
+            <App>{props.children}</App>
+          </ActivityJSProvider>
+        </ErrorBoundary>
+      </Provider>
+    </PrimeReactProvider>
+  );
+};
+
+export default MetaPlayer;

package/src/app/createAppSlice.ts

@@ -0,0 +1,6 @@
+import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit"
+
+// `buildCreateSlice` allows us to create a slice with async thunks.
+export const createAppSlice = buildCreateSlice({
+  creators: { asyncThunk: asyncThunkCreator },
+})

package/src/app/hooks.ts

@@ -0,0 +1,12 @@
+// This file serves as a central hub for re-exporting pre-typed Redux hooks.
+// These imports are restricted elsewhere to ensure consistent
+// usage of typed hooks throughout the application.
+// We disable the ESLint rule here because this is the designated place
+// for importing and re-exporting the typed versions of hooks.
+/* eslint-disable @typescript-eslint/no-restricted-imports */
+import { useDispatch, useSelector } from "react-redux"
+import type { AppDispatch, RootState } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()

package/src/app/store.ts

@@ -0,0 +1,46 @@
+import type { Action, ThunkAction } from "@reduxjs/toolkit";
+import { combineSlices, configureStore } from "@reduxjs/toolkit";
+import { setupListeners } from "@reduxjs/toolkit/query";
+import { themingSlice } from "../features/theming/themingSlice";
+import { layoutSlice } from "../features/layout/layoutSlice";
+import { activityDataSlice } from "../features/activityData/activityDataSlice";
+import { navbarSlice } from "../features/navbar/navbarSlice";
+import { saverSlice } from "../features/activityJS/saverSlice";
+
+// `combineSlices` automatically combines the reducers using
+// their `reducerPath`s, therefore we no longer need to call `combineReducers`.
+const rootReducer = combineSlices(
+  activityDataSlice,
+  themingSlice,
+  layoutSlice,
+  navbarSlice,
+  saverSlice,
+);
+// Infer the `RootState` type from the root reducer
+export type RootState = ReturnType<typeof rootReducer>;
+
+// The store setup is wrapped in `makeStore` to allow reuse
+// when setting up tests that need the same store config
+export const makeStore = (preloadedState?: Partial<RootState>) => {
+  const store = configureStore({
+    reducer: rootReducer,
+    preloadedState,
+  });
+  // configure listeners using the provided defaults
+  // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors
+  setupListeners(store.dispatch);
+  return store;
+};
+
+export const store = makeStore();
+
+// Infer the type of `store`
+export type AppStore = typeof store;
+// Infer the `AppDispatch` type from the store itself
+export type AppDispatch = AppStore["dispatch"];
+export type AppThunk<ThunkReturnType = void> = ThunkAction<
+  ThunkReturnType,
+  RootState,
+  unknown,
+  Action
+>;

package/src/app.module.scss

@@ -0,0 +1,56 @@
+.app {
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.appPedagoSplitter {
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  overflow-y: hidden;
+}
+
+.pedagoPanel {
+  width: 100%;
+  height: 100%;
+  overflow-y: hidden;
+}
+
+.hiddenPedagoContainer {
+  display: grid;
+  :global(.layout-horizontal) & {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1.2rem 1fr;
+  }
+  :global(.layout-vertical) & {
+    grid-template-rows: 1fr;
+    grid-template-columns: 1.2rem 1fr;
+  }
+}
+
+.hiddenPedago {
+  background-color: var(--surface-200);
+}
+
+.hiddenPedagoButton {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  & > i {
+    font-size: 1rem;
+  }
+  &:hover {
+    background-color: rgba(128, 128, 128, 0.05);
+  }
+  &:active {
+    background-color: rgba(128, 128, 128, 0.2);
+  }
+}
+
+.hiddenPedagoContent {
+  background-color: var(--surface-a);
+}

package/src/demo.tsx

@@ -0,0 +1,81 @@
+import React, { FC } from "react";
+import { createRoot } from "react-dom/client";
+
+import { MetaPlayer } from ".";
+import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActions";
+import { ActivitySidebarActionsSetter } from "./features/navbar/ActivitySidebarActions";
+// import { useActivityJS } from "./features/activityJS/ActivityJSProvider";
+import BeforeSaveAction from "./features/activityJS/BeforeSaveAction";
+
+const DemoActivity: FC = () => {
+  // const activityJs = useActivityJS();
+  return (
+    <>
+      <ActivityQuickActionsSetter
+        actions={[
+          {
+            title: "Pause",
+            icon: "pi pi-pause",
+            action: () => console.log("Pause"),
+          },
+          {
+            title: "Play",
+            icon: "pi pi-play",
+            action: () => console.log("Play"),
+          },
+        ]}
+      />
+      <ActivitySidebarActionsSetter
+        actions={[
+          {
+            title: "Pause",
+            icon: "pi pi-pause",
+            action: () => console.log("Pause"),
+          },
+          {
+            title: "Play",
+            icon: "pi pi-play",
+            action: () => console.log("Play"),
+          },
+        ]}
+      />
+      <BeforeSaveAction
+        name="demo"
+        callback={() => console.log("Before save")}
+      />
+      <BeforeSaveAction
+        name="demo2"
+        callback={() => {
+          console.log("Before save 2");
+          // throw new Error("Error in before save 2");
+        }}
+      />
+      Activité
+    </>
+  );
+};
+
+const container = document.getElementById("root");
+
+if (container) {
+  const root = createRoot(container);
+
+  root.render(
+    <React.StrictMode>
+      <MetaPlayer
+        options={{
+          hasInstructions: true,
+          pedagoLayout: "default-horizontal",
+          supportsLightTheme: true,
+          supportsDarkTheme: true,
+        }}
+      >
+        <DemoActivity />
+      </MetaPlayer>
+    </React.StrictMode>,
+  );
+} else {
+  throw new Error(
+    "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.",
+  );
+}

package/src/features/activityData/IsDirtySetter.tsx

@@ -0,0 +1,17 @@
+import { FC, useEffect } from "react";
+import { setIsDirty } from "./activityDataSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type IsDirtySetterProps = {
+  isDirty: boolean;
+};
+
+const IsDirtySetter: FC<IsDirtySetterProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setIsDirty(props.isDirty));
+  }, [props]);
+  return null;
+};
+
+export default IsDirtySetter;

package/src/features/activityData/OptionSetter.tsx

@@ -0,0 +1,35 @@
+import { FC } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { setPlayerSettings } from "./activityDataSlice";
+import { setLayout } from "../layout/layoutSlice";
+import { setAutoSwitch, switchToTheme } from "../theming/themingSlice";
+import { MetaPlayerOptions } from "./metaPlayerOptions";
+
+type OptionSetterProps = {
+  options: MetaPlayerOptions;
+};
+
+const OptionSetter: FC<OptionSetterProps> = ({ options }) => {
+  const dispatch = useAppDispatch();
+  if (!options.supportsLightTheme && !options.supportsDarkTheme) {
+    throw new Error("At least one theme must be supported");
+  }
+  dispatch(setPlayerSettings(options));
+  dispatch(
+    setLayout(
+      options.pedagoLayout === "horizontal" ||
+        options.pedagoLayout === "default-horizontal"
+        ? "horizontal"
+        : "vertical",
+    ),
+  );
+  if (options.supportsDarkTheme && options.supportsLightTheme) {
+    dispatch(setAutoSwitch(true));
+  } else {
+    dispatch(setAutoSwitch(false));
+    dispatch(switchToTheme(options.supportsLightTheme ? "light" : "dark"));
+  }
+  return null;
+};
+
+export default OptionSetter;