@capytale/meta-player 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,12 +14,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.0.8",
+    "@capytale/activity.js": "^3.1.0",
     "@capytale/capytale-rich-text-editor": "^0.4.2",
     "@reduxjs/toolkit": "^2.0.1",
     "@uidotdev/usehooks": "^2.4.1",
     "primeicons": "^7.0.0",
-    "primereact": "^10.6.3",
+    "primereact": "^10.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-html-props": "^2.0.9",
@@ -42,7 +42,7 @@
     "prettier": "^3.2.1",
     "sass": "^1.75.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "vite": "^5.4.6",
     "vitest": "^1.2.0"
   }
 }

package/src/features/navbar/ActivityMenu.tsx

@@ -1,4 +1,4 @@
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import styles from "./style.module.scss";
 
 import { Button } from "primereact/button";
@@ -9,6 +9,7 @@ import ActivityQuickActions from "./ActivityQuickActions";
 import useFullscreen from "../../utils/useFullscreen";
 import { useActivityJS } from "../activityJS/ActivityJSProvider";
 import { Dialog } from "primereact/dialog";
+import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
@@ -16,6 +17,7 @@ const ActivityMenu: React.FC = memo(() => {
   const isFullscreen = useFullscreen(wantFullscreen, () =>
     setWantFullscreen(false),
   );
+  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const [helpDialogVisible, setHelpDialogVisible] = useState(false);
   const activityJS = useActivityJS();
   return (
@@ -24,27 +26,41 @@ const ActivityMenu: React.FC = memo(() => {
       <Button
         severity="secondary"
         size="small"
-        icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
-        text
-        tooltip="Plein écran"
+        icon="pi pi-cog" // pi-ellipsis-v
+        outlined
+        tooltip="Paramètres"
         tooltipOptions={{
-          position: "bottom",
+          position: "left",
           showDelay: settings.TOOLTIP_SHOW_DELAY,
         }}
-        onClick={() => setWantFullscreen((prev) => !prev)}
+        onClick={() => setSettingsSidebarVisible(true)}
       />
       <Button
         severity="secondary"
         size="small"
-        icon="pi pi-cog" // pi-ellipsis-v
-        outlined
-        tooltip="Paramètres"
+        icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
+        text
+        tooltip="Plein écran"
         tooltipOptions={{
-          position: "left",
+          position: "bottom",
           showDelay: settings.TOOLTIP_SHOW_DELAY,
         }}
-        onClick={() => setSettingsSidebarVisible(true)}
+        onClick={() => setWantFullscreen((prev) => !prev)}
       />
+      {isInIframe && (
+        <Button
+          severity="secondary"
+          size="small"
+          icon={"pi pi-times"}
+          text
+          tooltip="Retour à la liste des activités"
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          onClick={() => capytaleUI.closeCapytaleIframe()}
+        />
+      )}
       <Sidebar
         header="Paramètres"
         visible={settingsSidebarVisible}

package/src/features/navbar/CapytaleMenu.tsx

@@ -22,6 +22,7 @@ import {
 import { copyToClipboard } from "../../utils/clipboard";
 import settings from "../../settings";
 import { wf } from "@capytale/activity.js/activity/field/workflow";
+import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 import ButtonDoubleIcon from "../../utils/ButtonDoubleIcon";
 import CardSelector from "../../utils/CardSelector";
 
@@ -42,6 +43,7 @@ const CapytaleMenu: React.FC = () => {
     () => windowsSize.width && windowsSize.width < ML,
     [windowsSize.width],
   );
+  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const toast = useRef<Toast>(null);
   const changeWorkflow = (value: wf) => {
     dispatch(setWorkflow(value));
@@ -64,6 +66,20 @@ const CapytaleMenu: React.FC = () => {
     <>
       <Toast ref={toast} position="bottom-right" />
       <div className={styles.capytaleMenu}>
+        {isInIframe && (
+          <Button
+            label="Retour"
+            icon="pi pi-chevron-left"
+            size="small"
+            outlined
+            onClick={() => capytaleUI.closeCapytaleIframe()}
+            tooltip="Retour à la liste des activités"
+            tooltipOptions={{
+              position: "right",
+              showDelay: settings.TOOLTIP_SHOW_DELAY,
+            }}
+          />
+        )}
         {showSaveButton && (
           <Button
             label={isQuiteSmall ? undefined : "Enregistrer"}
@@ -174,7 +190,9 @@ const CapytaleMenu: React.FC = () => {
               rightIcon="pi pi-angle-down"
             />
             <OverlayPanel ref={overlayPanelWorkflow}>
-              <h3 className={styles.overlayPanelWorkflowTitle}>État de la copie</h3>
+              <h3 className={styles.overlayPanelWorkflowTitle}>
+                État de la copie
+              </h3>
               <CardSelector
                 selected={workflow}
                 onChange={(option: wf) => {

package/src/features/navbar/index.tsx

@@ -7,6 +7,7 @@ import styles from "./style.module.scss";
 import { useMemo } from "react";
 import { useAppSelector } from "../../app/hooks";
 import { selectReturnUrl } from "../activityData/activityDataSlice";
+import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 
 const Navbar: React.FC = () => {
   const returnUrl = useAppSelector(selectReturnUrl);
@@ -15,12 +16,13 @@ const Navbar: React.FC = () => {
     () => windowsSize.width && windowsSize.width < MD,
     [windowsSize.width],
   );
+  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const logoText = isSmall ? "C" : "CAPYTALE";
   return (
     <div className={styles.navbar}>
       <div className={styles.navbarContainer}>
         <div className={styles.navbarLogo}>
-          <a href={returnUrl}>{logoText}</a>
+          {!isInIframe && <a href={returnUrl}>{logoText}</a>}
         </div>
         <CapytaleMenu />
         <ActivityInfo />