@capytale/meta-player 0.0.3 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.tsx

@@ -94,21 +94,18 @@ const App: FC<AppProps> = (props) => {
             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}>
-              <div id="meta-player-content">{props.children}</div>
-            </SplitterPanel>
-          </Splitter>
+        <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}>
+            <div id="meta-player-content-cover"></div>
+            <div id="meta-player-content">{props.children}</div>
+          </SplitterPanel>
+        </Splitter>
       </div>
     </div>
   );

package/src/MetaPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useMemo } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { Provider } from "react-redux";
 
@@ -12,30 +12,19 @@ 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}>

package/src/app/store.ts

@@ -6,6 +6,7 @@ import { layoutSlice } from "../features/layout/layoutSlice";
 import { activityDataSlice } from "../features/activityData/activityDataSlice";
 import { navbarSlice } from "../features/navbar/navbarSlice";
 import { saverSlice } from "../features/activityJS/saverSlice";
+import { activitySettingsSlice } from "../features/activitySettings/activitySettingsSlice";
 
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
@@ -15,6 +16,7 @@ const rootReducer = combineSlices(
   layoutSlice,
   navbarSlice,
   saverSlice,
+  activitySettingsSlice,
 );
 // Infer the `RootState` type from the root reducer
 export type RootState = ReturnType<typeof rootReducer>;

package/src/app.module.scss

@@ -26,6 +26,7 @@
 }
 
 .pedagoContainer {
+  overflow-y: hidden;
   display: grid;
   :global(.layout-horizontal) & {
     grid-template-columns: 1fr;

package/src/demo.tsx

@@ -6,6 +6,7 @@ import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActio
 import { ActivitySidebarActionsSetter } from "./features/navbar/ActivitySidebarActions";
 // import { useActivityJS } from "./features/activityJS/ActivityJSProvider";
 import BeforeSaveAction from "./features/activityJS/BeforeSaveAction";
+import MetaPlayerOptionsSetter from "./features/activityData/MetaPlayerOptionsSetter";
 
 const DemoActivity: FC = () => {
   // const activityJs = useActivityJS();
@@ -62,14 +63,15 @@ if (container) {
 
   root.render(
     <React.StrictMode>
-      <MetaPlayer
-        options={{
-          hasInstructions: true,
-          pedagoLayout: "default-horizontal",
-          supportsLightTheme: true,
-          supportsDarkTheme: true,
-        }}
-      >
+      <MetaPlayer>
+        <MetaPlayerOptionsSetter
+          options={{
+            hasInstructions: true,
+            pedagoLayout: "default-horizontal",
+            supportsLightTheme: true,
+            supportsDarkTheme: true,
+          }}
+        />
         <DemoActivity />
       </MetaPlayer>
     </React.StrictMode>,

package/src/external/prime.ts

@@ -0,0 +1,5 @@
+import { Toast } from "primereact/toast";
+import type { ToastMessage } from "primereact/toast";
+
+export { Toast };
+export type { ToastMessage };

package/src/features/activityData/IsDirtySetter.tsx

@@ -14,10 +14,4 @@ const IsDirtySetter: FC<IsDirtySetterProps> = (props) => {
   return null;
 };
 
-const notifyIsDirty = (isDirty: boolean = true) => {
-  const dispatch = useAppDispatch();
-  dispatch(setIsPlayerDirty(isDirty));
-};
-
 export default IsDirtySetter;
-export { notifyIsDirty };

package/src/features/activityData/MetaPlayerOptionsSetter.tsx

@@ -0,0 +1,41 @@
+import { FC, useEffect } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { setPlayerSettings } from "./activityDataSlice";
+import { setLayout } from "../layout/layoutSlice";
+import { setAutoSwitch, switchToTheme } from "../theming/themingSlice";
+import {
+  defaultMetaPlayerOptions,
+  MetaPlayerOptions,
+} from "./metaPlayerOptions";
+
+type MetaPlayerOptionsSetterProps = {
+  options: Partial<MetaPlayerOptions>;
+};
+
+const MetaPlayerOptionsSetter: FC<MetaPlayerOptionsSetterProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const options = { ...defaultMetaPlayerOptions, ...props.options };
+    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"));
+    }
+  }, [dispatch, props.options]);
+  return null;
+};
+
+export default MetaPlayerOptionsSetter;

package/src/features/activityData/hooks.ts

@@ -0,0 +1,9 @@
+import { useAppDispatch } from "../../app/hooks";
+import { setIsPlayerDirty } from "./activityDataSlice";
+
+const useNotifyIsDirty = (isDirty: boolean = true) => {
+  const dispatch = useAppDispatch();
+  return () => dispatch(setIsPlayerDirty(isDirty));
+};
+
+export { useNotifyIsDirty };

package/src/features/activityJS/Saver.tsx

@@ -89,7 +89,6 @@ const Saver: FC<{}> = () => {
       activityJs.activitySession.mode === "assignment" ||
       activityJs.activitySession.mode === "review"
     ) {
-      console.log("Workflow:", workflow);
       ab.assignmentNode!.workflow = workflow!;
     }
     try {

package/src/features/activitySettings/ActivitySettingsSetter.tsx

@@ -0,0 +1,26 @@
+import { FC, useEffect, useRef } from "react";
+import { useAppDispatch } from "../../app/hooks";
+import { ActivitySettings } from "./types";
+import { setSettings } from "./activitySettingsSlice";
+import { deepEqual } from "../../utils/equality";
+
+type ActivitySettingsSetterProps = {
+  settings: ActivitySettings;
+};
+
+const ActivitySettingsSetter: FC<ActivitySettingsSetterProps> = ({
+  settings,
+}) => {
+  const oldSettings = useRef<ActivitySettings | null>(null);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    if (deepEqual(oldSettings.current, settings)) {
+      return;
+    }
+    oldSettings.current = settings;
+    dispatch(setSettings(settings));
+  }, [dispatch, settings]);
+  return null;
+};
+
+export default ActivitySettingsSetter;

package/src/features/activitySettings/activitySettingsSlice.ts

@@ -0,0 +1,43 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+import { ActivitySettings } from "./types";
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const activitySettingsSlice = createAppSlice({
+  name: "activitySettings",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState: {
+    settings: undefined as ActivitySettings | undefined,
+  },
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    setSettings: create.reducer(
+      (state, action: PayloadAction<ActivitySettings | undefined>) => {
+        state.settings = action.payload;
+      },
+    ),
+    updateSettings: create.reducer(
+      (
+        state,
+        action: PayloadAction<
+          (
+            oldSettings: ActivitySettings | undefined,
+          ) => ActivitySettings | undefined
+        >,
+      ) => {
+        state.settings = action.payload(state.settings);
+      },
+    ),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectSettings: (data) => data.settings,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const { setSettings, updateSettings } = activitySettingsSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const { selectSettings } = activitySettingsSlice.selectors;

package/src/features/activitySettings/hooks.ts

@@ -0,0 +1,6 @@
+import { useAppSelector } from "../../app/hooks";
+import { selectSettings } from "./activitySettingsSlice";
+
+export const useActivitySettings = () => {
+  return useAppSelector(selectSettings);
+};

package/src/features/activitySettings/index.tsx

@@ -0,0 +1,32 @@
+import { Fieldset } from "primereact/fieldset";
+import { useActivitySettings } from "./hooks";
+import {
+  ActivitySettingsFormDisplay,
+  ActivitySettingsOptionsDisplay,
+} from "./ui";
+
+type ActivitySettingsDisplayProps = {};
+
+export function ActivitySettingsDisplay({}: ActivitySettingsDisplayProps) {
+  const settings = useActivitySettings();
+  if (!settings) return null;
+  return (
+    <div>
+      {Object.keys(settings).map((id) => {
+        const section = settings[id];
+        return (
+          <Fieldset key={id} legend={section.title} className="sidebarFieldset">
+            {section.type === "form" ? (
+              <ActivitySettingsFormDisplay form={section} sectionId={id} />
+            ) : (
+              <ActivitySettingsOptionsDisplay
+                options={section}
+                sectionId={id}
+              />
+            )}
+          </Fieldset>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+.formLabel {
+}
+.formGroup {
+}

package/src/features/activitySettings/types.ts

@@ -0,0 +1,88 @@
+export type ActivitySettingsSelect = {
+  type: "select";
+  options: {
+    label: string;
+    name: string;
+  }[];
+  selectedOptionName: string;
+};
+
+export type ActivitySettingsRange = {
+  type: "range";
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+};
+
+export type ActivitySettingsTextArea = {
+  type: "textarea";
+  value: string;
+};
+
+export type ActivitySettingsOption = {
+  type: "checkbox" | "switch";
+  value: boolean;
+};
+
+export type ActivitySettingsInput = {
+  type: "input";
+  inputType:
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "month"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week";
+  value: string | number;
+};
+
+export type ActivitySettingsFormSection = {
+  type: "form";
+  fields: {
+    [name: string]: (
+      | ActivitySettingsRange
+      | ActivitySettingsInput
+      | ActivitySettingsTextArea
+      | ActivitySettingsOption
+      | ActivitySettingsSelect
+    ) & {
+      label: string;
+    };
+  };
+};
+
+export type ActivitySettingsMultipleOptionsSection = {
+  type: "checkboxes" | "switches";
+  options: {
+    label: string;
+    name: string;
+  }[];
+  selectedOptionNames: string[];
+};
+
+export type ActivitySettingsRadioOptionsSection = {
+  type: "radio";
+  options: {
+    label: string;
+    name: string;
+  }[];
+  selectedOptionName: string | null;
+};
+
+export type ActivitySettingsSection = (
+  | ActivitySettingsMultipleOptionsSection
+  | ActivitySettingsRadioOptionsSection
+  | ActivitySettingsFormSection
+) & {
+  title: string;
+};
+
+export type ActivitySettings = { [id: string]: ActivitySettingsSection };