@capytale/meta-player 0.5.12 → 0.5.14

package/README.md

@@ -1,27 +1,13 @@
-# vite-template-redux
+# Meta Player Capytale
 
-Uses [Vite](https://vitejs.dev/), [Vitest](https://vitest.dev/), and [React Testing Library](https://github.com/testing-library/react-testing-library) to create a modern [React](https://react.dev/) app compatible with [Create React App](https://create-react-app.dev/)
+## To put in player HTML
 
-```sh
-npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
+- CSS used by the meta-player:
+```html
+    <link id="theme-link" rel="stylesheet" href="https://cdn.ac-paris.fr/capytale/meta-player/themes/lara-light-blue/theme.css">
 ```
-
-## Goals
-
-- Easy migration from Create React App or Vite
-- As beginner friendly as Create React App
-- Optimized performance compared to Create React App
-- Customizable without ejecting
-
-## Scripts
-
-- `dev`/`start` - start dev server and open browser
-- `build` - build for production
-- `preview` - locally preview production build
-- `test` - launch test runner
-
-## Inspiration
-
-- [Create React App](https://github.com/facebook/create-react-app/tree/main/packages/cra-template)
-- [Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react)
-- [Vitest](https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib)
+- If using the attached files preview capability:
+```html
+    <link rel="stylesheet" href="https://cdn.ac-paris.fr/highlight/styles/default.css">
+    <script src="https://cdn.ac-paris.fr/highlight/highlight.min.js"></script>
+```

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.12",
+  "version": "0.5.14",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,11 +16,12 @@
     }
   },
   "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",
     "@uidotdev/usehooks": "^2.4.1",
+    "mime": "^4.0.6",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.3",
     "react-dropzone": "^14.2.9",
@@ -30,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",
@@ -37,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/App.tsx

@@ -26,6 +26,7 @@ import {
 import settings from "./settings";
 import ReviewNavbar from "./features/navbar/review-navbar";
 import { useSave } from "./features/activityData/hooks";
+import PreviewDialog from "./features/functionalities/PreviewDialog";
 
 type AppProps = PropsWithChildren<{}>;
 
@@ -130,6 +131,7 @@ const App: FC<AppProps> = (props) => {
           </SplitterPanel>
         </Splitter>
       </div>
+      <PreviewDialog />
     </div>
   );
 };

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/functionalities/PreviewDialog.tsx

@@ -0,0 +1,76 @@
+import { FC, memo, useEffect, useRef, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  PreviewFile,
+  selectPreviewFile,
+  setPreviewFile,
+} from "./functionalitiesSlice";
+import { Dialog } from "primereact/dialog";
+
+const HighlightedCode = memo(({ code }: { code: string }) => {
+  const codeRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (codeRef.current != null) {
+      if ((window as any).hljs) {
+        (window as any).hljs.highlightBlock(codeRef.current);
+      } else {
+        console.warn("Highlight.js not loaded");
+      }
+    }
+  }, [code]);
+
+  return (
+    <pre>
+      <code
+        ref={codeRef}
+        style={{ padding: 0, background: "white", maxWidth: "100%" }}
+      >
+        {code}
+      </code>
+    </pre>
+  );
+});
+
+const PreviewDialog: FC = () => {
+  const previewFile = useAppSelector(selectPreviewFile);
+  const [persistentPreviewFile, setPersistentPreviewFile] =
+    useState<PreviewFile | null>(null);
+
+  const dispatch = useAppDispatch();
+  const visible = previewFile != null;
+
+  useEffect(() => {
+    if (previewFile != null) {
+      setPersistentPreviewFile(previewFile);
+    }
+  }, [previewFile]);
+
+  if (persistentPreviewFile == null) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      visible={visible}
+      header={persistentPreviewFile.title}
+      onHide={() => {
+        dispatch(setPreviewFile(null));
+      }}
+      style={{ maxWidth: "100%" }}
+    >
+      {persistentPreviewFile.type === "text" ? (
+        <HighlightedCode code={persistentPreviewFile.content} />
+      ) : (
+        <img
+          src={persistentPreviewFile.url}
+          alt={persistentPreviewFile.title}
+          style={{
+            maxWidth: "100%",
+          }}
+        />
+      )}
+    </Dialog>
+  );
+};
+
+export default PreviewDialog;

package/src/features/functionalities/functionalitiesSlice.ts

@@ -34,9 +34,15 @@ export type AttachedFilesOptions = {
   onViewFiles?: () => any;
 };
 
-export interface FunctionalitiesState {
+export type PreviewFile = { title: string } & (
+  { type: "text", content: string } |
+  { type: "image", url: string }
+);
+
+export type FunctionalitiesState = {
   attachedFilesOptions: AttachedFilesOptions;
   attachedFilesRefresher: number;
+  previewFile: PreviewFile | null;
 }
 
 export const defaultAttachedFilesOptions: AttachedFilesOptions = {
@@ -46,6 +52,7 @@ export const defaultAttachedFilesOptions: AttachedFilesOptions = {
 export const initialState: FunctionalitiesState = {
   attachedFilesOptions: defaultAttachedFilesOptions,
   attachedFilesRefresher: 0,
+  previewFile: null,
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -61,6 +68,9 @@ export const functionalitiesSlice = createAppSlice({
     refreshAttachedFiles: create.reducer((state) => {
       state.attachedFilesRefresher += 1;
     }),
+    setPreviewFile: create.reducer((state, action: PayloadAction<PreviewFile | null>) => {
+      state.previewFile = action.payload;
+    }),
   }),
   // You can define your selectors here. These selectors receive the slice
   // state as their first argument.
@@ -68,6 +78,7 @@ export const functionalitiesSlice = createAppSlice({
     selectAttachedFilesOptions: (state) => state.attachedFilesOptions,
     selectAttachedFilesEnabled: (state) => state.attachedFilesOptions.enabled,
     selectAttachedFilesRefresher: (state) => state.attachedFilesRefresher,
+    selectPreviewFile: (state) => state.previewFile,
   },
 });
 
@@ -75,6 +86,7 @@ export const functionalitiesSlice = createAppSlice({
 export const {
   setAttachedFilesOptions,
   refreshAttachedFiles,
+  setPreviewFile,
 } = functionalitiesSlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.
@@ -82,4 +94,5 @@ export const {
   selectAttachedFilesOptions,
   selectAttachedFilesEnabled,
   selectAttachedFilesRefresher,
+  selectPreviewFile,
 } = functionalitiesSlice.selectors;

package/src/features/functionalities/hooks.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks"
 import { useActivityJS } from "../activityJS/ActivityJSProvider";
-import { AttachedFileData, refreshAttachedFiles, selectAttachedFilesOptions, selectAttachedFilesRefresher } from "./functionalitiesSlice"
+import { AttachedFileData, refreshAttachedFiles, selectAttachedFilesOptions, selectAttachedFilesRefresher, setPreviewFile } from "./functionalitiesSlice"
 
 export const useAttachedFiles = () => {
   const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
@@ -36,9 +36,35 @@ export const useAttachedFiles = () => {
   }, [filesData, attachedFilesOptions, attachedFilesRefresher]);
 
   return treatedFilesData;
-}
+};
 
 export const useRefreshAttachedFiles = () => {
   const dispatch = useAppDispatch();
   return () => dispatch(refreshAttachedFiles());
-}
+};
+
+export const usePreviewTextFile = () => {
+  const dispatch = useAppDispatch();
+  return (title: string, content: string) => {
+    dispatch(
+      setPreviewFile({
+        title,
+        type: "text",
+        content,
+      }),
+    );
+  }
+};
+
+export const usePreviewImageFile = () => {
+  const dispatch = useAppDispatch();
+  return (title: string, url: string) => {
+    dispatch(
+      setPreviewFile({
+        title,
+        type: "image",
+        url,
+      }),
+    );
+  }
+};

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/navbar/sidebars/AttachedFilesSidebarContent.tsx

@@ -1,5 +1,9 @@
 import { FC, useRef } from "react";
-import { useAttachedFiles } from "../../functionalities/hooks";
+import {
+  useAttachedFiles,
+  usePreviewImageFile,
+  usePreviewTextFile,
+} from "../../functionalities/hooks";
 import { useAppSelector } from "../../../app/hooks";
 import {
   AttachedFileData,
@@ -12,6 +16,7 @@ import styles from "./AttachedFilesSidebarContent.module.scss";
 import { copyToClipboard } from "../../../utils/clipboard";
 import { downloadFile } from "../../../utils/download";
 import { useFileUpload } from "use-file-upload";
+import mime from "mime";
 
 const AttachedFilesSidebarContent: FC = () => {
   const filesData = useAttachedFiles();
@@ -72,6 +77,8 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
 }) => {
   const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
   const toast = useRef<Toast>(null);
+  const previewTextFile = usePreviewTextFile();
+  const previewImageFile = usePreviewImageFile();
 
   return (
     <div className={styles.fileRow}>
@@ -80,18 +87,31 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
         label={fileData.name}
         severity={fileData.isTemporary ? "warning" : "secondary"}
         disabled={fileData.interactMode === "none"}
-        onClick={() => {
+        onClick={async () => {
           if (fileData.interactMode === "custom") {
             attachedFilesOptions.customHandlers?.interactWithFile?.(fileData);
           } else if (fileData.interactMode === "download") {
             window.open(fileData.urlOrId, "_blank")?.focus();
           } else if (fileData.interactMode === "preview") {
-            toast.current?.show({
-              severity: "info",
-              summary: "Aperçu non disponible",
-              detail: fileData.name,
-              life: 3000,
-            });
+            const mimeType = mime.getType(fileData.name);
+            if (
+              mimeType?.startsWith("text") ||
+              mimeType === "application/json"
+            ) {
+              // fetch file content
+              const response = await fetch(fileData.urlOrId);
+              const content = await response.text();
+              previewTextFile(fileData.name, content);
+            } else if (mimeType?.startsWith("image")) {
+              previewImageFile(fileData.name, fileData.urlOrId);
+            } else {
+              toast.current?.show({
+                severity: "info",
+                summary: `Impossible de prévisualiser {fileData.name}`,
+                detail: `Aperçu non disponible pour ce type de fichier (${mimeType})`,
+                life: 3000,
+              });
+            }
           }
         }}
         className={styles.fileInteraction}

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/index.tsx

@@ -13,7 +13,11 @@ import {
   useActivityJS,
   useActivityJsEssentials,
 } from "./features/activityJS/ActivityJSProvider";
-import { useNotifyIsDirty, useCanSave, useSave } from "./features/activityData/hooks";
+import {
+  useNotifyIsDirty,
+  useCanSave,
+  useSave,
+} from "./features/activityData/hooks";
 import { useOrientation } from "./features/layout/hooks";
 import { ActivitySidebarActionsSetter } from "./features/navbar/sidebars/ActivitySidebarActions";
 import { ActivityQuickActionsSetter } from "./features/navbar/activity-menu/ActivityQuickActions";
@@ -22,6 +26,10 @@ import IsDirtySetter from "./features/activityData/IsDirtySetter";
 import AttachedFilesFunctionality from "./features/functionalities/AttachedFilesFunctionality";
 import { useRefreshAttachedFiles } from "./features/functionalities/hooks";
 import { useActivitySettings } from "./features/activitySettings/hooks";
+import {
+  usePreviewTextFile,
+  usePreviewImageFile,
+} from "./features/functionalities/hooks";
 import { Toast } from "./external/prime";
 import type { ToastMessage } from "./external/prime";
 import type {
@@ -46,6 +54,8 @@ export {
   useOrientation,
   useThemeType,
   useActivitySettings,
+  usePreviewTextFile,
+  usePreviewImageFile,
   ActivitySidebarActionsSetter,
   ActivityQuickActionsSetter,
   ActivitySettingsSetter,

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",