@capytale/meta-player 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +24,6 @@
     "react-dom": "^18.2.0",
     "react-html-props": "^2.0.9",
     "react-redux": "^9.1.0",
-    "react-reverse-portal": "^2.1.2",
     "screenfull": "^6.0.2"
   },
   "devDependencies": {

package/src/App.tsx

@@ -13,7 +13,7 @@ import {
   selectOrientation,
   toggleIsPedagoVisible,
 } from "./features/layout/layoutSlice";
-import { FC, PropsWithChildren, useMemo } from "react";
+import { FC, PropsWithChildren } from "react";
 import { Tooltip } from "primereact/tooltip";
 import {
   selectHasGradingOrComments,
@@ -23,8 +23,6 @@ import {
 import settings from "./settings";
 import ReviewNavbar from "./features/navbar/ReviewNavbar";
 
-import * as portals from "react-reverse-portal";
-
 type AppProps = PropsWithChildren<{}>;
 
 const App: FC<AppProps> = (props) => {
@@ -36,8 +34,7 @@ const App: FC<AppProps> = (props) => {
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
   const hasPedago = hasInstructions || hasGradingOrComments;
   const dispatch = useAppDispatch();
-
-  const portalNode = useMemo(() => portals.createHtmlPortalNode(), []);
+  const showPedago = hasPedago && isPedagoVisible;
 
   return (
     <div
@@ -47,78 +44,72 @@ const App: FC<AppProps> = (props) => {
         isHorizontal ? "layout-horizontal" : "layout-vertical",
       )}
     >
-      <portals.InPortal node={portalNode}>
-        <div id="meta-player-content">{props.children}</div>
-      </portals.InPortal>
       <div>
         <Navbar />
         {mode === "review" && <ReviewNavbar />}
       </div>
-      {hasPedago && isPedagoVisible && (
-        <Splitter
-          className={styles.appPedagoSplitter}
-          layout={isHorizontal ? "vertical" : "horizontal"}
+      <div className={styles.pedagoContainer} data-show-pedago={showPedago}>
+        <div
+          className={classNames(
+            styles.hiddenPedago,
+            hasPedago ? null : styles.noPedago,
+          )}
         >
-          <SplitterPanel minSize={15} size={30} className={styles.pedagoPanel}>
-            <Pedago key="pedago" />
-          </SplitterPanel>
-          <SplitterPanel minSize={40} size={70}>
-            <portals.OutPortal node={portalNode} />
-          </SplitterPanel>
-        </Splitter>
-      )}
-      {(!hasPedago || !isPedagoVisible) && (
-        <div className={styles.hiddenPedagoContainer}>
           <div
             className={classNames(
-              styles.hiddenPedago,
-              hasPedago ? null : styles.noPedago,
+              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"}
           >
-            <div
+            <i
               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={
+                "pi",
                 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}
+                  ? isHorizontal
+                    ? "pi-angle-double-down"
+                    : "pi-angle-double-right"
+                  : "pi-minus-circle",
+              )}
             />
+            <Ripple />
           </div>
-          <div className={styles.hiddenPedagoContent}>
-            <portals.OutPortal node={portalNode} />
-          </div>
+          <Tooltip
+            target={"." + styles.hiddenPedagoButton}
+            showDelay={settings.TOOLTIP_SHOW_DELAY}
+            position={isHorizontal ? "bottom" : "right"}
+            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>
+      </div>
     </div>
   );
 };

package/src/app.module.scss

@@ -9,6 +9,14 @@
   border: none;
   border-radius: 0;
   overflow-y: hidden;
+  .pedagoContainer[data-show-pedago="false"] & {
+    & > :first-child {
+      display: none;
+    }
+    & > :nth-child(2) {
+      display: none;
+    }
+  }
 }
 
 .pedagoPanel {
@@ -17,7 +25,7 @@
   overflow-y: hidden;
 }
 
-.hiddenPedagoContainer {
+.pedagoContainer {
   display: grid;
   :global(.layout-horizontal) & {
     grid-template-columns: 1fr;
@@ -27,10 +35,16 @@
     grid-template-rows: 1fr;
     grid-template-columns: 1.2rem 1fr;
   }
+  &[data-show-pedago="true"] {
+    display: block;
+  }
 }
 
 .hiddenPedago {
   background-color: var(--surface-200);
+  .pedagoContainer[data-show-pedago="true"] & {
+    display: none;
+  }
 }
 
 .hiddenPedagoButton {
@@ -50,7 +64,3 @@
     background-color: rgba(128, 128, 128, 0.2);
   }
 }
-
-.hiddenPedagoContent {
-  background-color: var(--surface-a);
-}

package/src/index.css

@@ -36,4 +36,5 @@ body,
 #meta-player-content,
 :has(> #meta-player-content) {
   height: 100%;
+  background-color: var(--surface-a);
 }