@capytale/meta-player 0.5.13 → 0.5.14

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.1.14",
+    "@capytale/activity.js": "^3.1.21",
     "@capytale/capytale-anti-triche": "^0.2.1",
     "@capytale/capytale-rich-text-editor": "^0.4.3",
     "@reduxjs/toolkit": "^2.0.1",
@@ -31,6 +31,7 @@
     "use-file-upload": "^1.0.11"
   },
   "devDependencies": {
+    "@eslint/js": "^9.19.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
@@ -38,13 +39,18 @@
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
     "jsdom": "^23.2.0",
     "prettier": "^3.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.75.0",
-    "typescript": "^5.3.3",
-    "vite": "^6.0.2"
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/MetaPlayer.tsx

@@ -74,7 +74,22 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
         <ThemeSwitcher />
         <ExitWarning />
         <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
-          <ActivityJSProvider options={props.activityJSOptions}>
+          <ActivityJSProvider
+            options={props.activityJSOptions}
+            loadingFallback={<div>Chargement de l'activité...</div>}
+            errorFallback={({ children }) => (
+              <div style={{ marginLeft: "1rem", marginRight: "1rem" }}>
+                <p>Erreur lors du chargement de l'activité : {children}</p>
+                <p>
+                  Êtes-vous bien connecté(e) à Capytale ? Avez-vous bien le
+                  droit d'accéder à cette ressource ?
+                </p>
+                <p>
+                  <a href="/">Retour à l'accueil</a>
+                </p>
+              </div>
+            )}
+          >
             <Saver />
             <MetaPlayerContent antiCheatOptions={antiCheatOptions}>
               <App>{props.children}</App>

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -28,6 +28,9 @@ const ActivityJSContext = createContext<ActivitySessionLoaderReturnValue>({
 type ActivityJSProviderProps = PropsWithChildren<{
   options?: LoadOptions;
   loadingFallback?: ReactNode;
+  errorFallback?:
+    | keyof JSX.IntrinsicElements
+    | React.JSXElementConstructor<{ children: ReactNode }>;
 }>;
 
 export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
@@ -109,7 +112,14 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
   }
   const value = useActivitySessionLoader(activityId, props.options, callback);
   if (!loaded) {
-    return <>{props.loadingFallback}</>;
+    if (value.state === "loading") {
+      return <>{props.loadingFallback}</>;
+    } else if (value.state === "error" && props.errorFallback) {
+      console.error(value.error);
+      return (
+        <>{<props.errorFallback>{String(value.error)}</props.errorFallback>}</>
+      );
+    }
   }
   return (
     <ActivityJSContext.Provider value={value}>

package/src/features/navbar/capytale-menu/CloneDialog.tsx

@@ -0,0 +1,74 @@
+import { FC, useCallback, useEffect, useState } from "react";
+import { useAppSelector } from "../../../app/hooks";
+import { Dialog } from "primereact/dialog";
+import { selectActivityInfo } from "../../activityData/activityDataSlice";
+import { Button } from "primereact/button";
+import { apiCloneActivity } from "../../../utils/capytale";
+import { useActivityJsEssentials } from "../../activityJS/ActivityJSProvider";
+import { InputText } from "primereact/inputtext";
+
+const CloneDialog: FC<{ visible: boolean; onHide: () => any }> = ({
+  visible,
+  onHide,
+}) => {
+  const { nid } = useActivityJsEssentials();
+  const activityTitle = useAppSelector(selectActivityInfo).title;
+  const [newTitle, setNewTitle] = useState<string>(activityTitle);
+  const clone = useCallback(async () => {
+    const clone = await apiCloneActivity(nid, newTitle);
+    const newNid = clone.nid;
+    const url = `/web/c-act/n/${newNid}/play/create`;
+    // redirect to the new activity in a new tab
+    window.open(url, "_blank");
+  }, [nid, newTitle]);
+
+  useEffect(() => {
+    setNewTitle(activityTitle);
+  }, [activityTitle, visible]);
+
+  return (
+    <Dialog
+      visible={visible}
+      header={"Choisissez le titre du clone"}
+      onHide={onHide}
+      style={{ width: "750px", maxWidth: "100%" }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5rem",
+          marginBottom: "1rem",
+        }}
+      >
+        <label htmlFor="title-input">Titre</label>
+        <InputText
+          id="title-input"
+          value={newTitle}
+          onChange={(e) => setNewTitle(e.target.value)}
+        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "0.5rem",
+          }}
+        >
+          <Button
+            aria-label="Annuler le clonage"
+            label="Annuler"
+            onClick={onHide}
+            severity="secondary"
+          />
+          <Button
+            aria-label="Confirmer le clonage"
+            label="Cloner"
+            onClick={clone}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default CloneDialog;

package/src/features/navbar/capytale-menu/index.tsx

@@ -5,7 +5,7 @@ import { Toast } from "primereact/toast";
 import { OverlayPanel } from "primereact/overlaypanel";
 
 import styles from "./style.module.scss";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useWindowSize } from "@uidotdev/usehooks";
 import { XL } from "../../../utils/breakpoints";
 import { useAppDispatch, useAppSelector } from "../../../app/hooks";
@@ -24,10 +24,12 @@ import CardSelector from "../../../utils/CardSelector";
 import { useActivityJS } from "../../activityJS/ActivityJSProvider";
 import { selectShowWorkflow } from "../../layout/layoutSlice";
 import CountdownAndSaveButton from "./CountdownAndSaveButton";
+import CloneDialog from "./CloneDialog";
 
 const CapytaleMenu: React.FC = () => {
   const dispatch = useAppDispatch();
   const activityJS = useActivityJS();
+  const [cloneDialogVisible, setCloneDialogVisible] = useState(false);
   const sharingInfo = useAppSelector(selectSharingInfo);
   const windowsSize = useWindowSize();
   const mode = useAppSelector(selectMode);
@@ -76,6 +78,27 @@ const CapytaleMenu: React.FC = () => {
           />
         )}
         <CountdownAndSaveButton />
+        {!isInIframe && mode === "view" && (
+          <>
+            <Button
+              aria-label="Cloner l'activité"
+              label="Cloner"
+              icon="pi pi-clone"
+              size="small"
+              outlined
+              onClick={() => setCloneDialogVisible(true)}
+              tooltip="Cloner l'activité"
+              tooltipOptions={{
+                position: "bottom",
+                showDelay: settings.TOOLTIP_SHOW_DELAY,
+              }}
+            />
+            <CloneDialog
+              visible={cloneDialogVisible}
+              onHide={() => setCloneDialogVisible(false)}
+            />
+          </>
+        )}
 
         {mode === "create" && sharingInfo.code && (
           <ButtonGroup>

package/src/features/pedago/index.tsx

@@ -37,7 +37,11 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
     (hasGradingOrComments || mode === "review");
   const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
   const mayReverse = isHorizontal
-    ? (tab: Array<any>) => tab.toReversed()
+    ? (tab: Array<any>) => {
+        const reversed = [...tab];
+        reversed.reverse();
+        return reversed;
+      }
     : (tab: Array<any>) => tab;
 
   if (!hasInstructions) {

package/src/utils/capytale.ts

@@ -0,0 +1,11 @@
+import httpClient from '@capytale/activity.js/backend/capytale/http';
+
+// Definit le endpoint de l'API
+const myActivitiesApiEp = '/web/c-hdls/api/my-activities';
+
+export async function apiCloneActivity(nid: number | string, title?: string) {
+  return httpClient.postGetJsonAsync<any>(
+    myActivitiesApiEp,
+    { action: 'clone', nid, title },
+  )
+}

package/tsconfig.json

@@ -1,16 +1,18 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": false,
+
     "moduleResolution": "bundler",
-    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "isolatedModules": true,
+    "esModuleInterop": false,
+    "resolveJsonModule": true,
     "noEmit": true,
     "jsx": "react-jsx",