Add hideActionButtons prop to H5Player to hide actions buttons of h5p.

EscolaLMS · Oct 4, 2023 · 028fd49 · 028fd49
1 parent 409e6db
commit 028fd49
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/players/H5Player/H5Player.md b/src/components/players/H5Player/H5Player.md
@@ -146,6 +146,7 @@ useEffect(() => {
           key={uuid}
           onXAPI={(e) => console.log("onXAPI ", e)}
           onTopicEnd={() => console.log("H5P progress")}
+          hideActionButtons
           {...playerProps}
         />
       </div>

diff --git a/src/components/players/H5Player/H5Player.tsx b/src/components/players/H5Player/H5Player.tsx
@@ -22,6 +22,7 @@ export interface H5PProps extends ExtendableStyledComponent {
   overwriteFileName?: string;
   h5pObject?: API.H5PObject;
   onTopicEnd?: () => void;
+  hideActionButtons?: boolean;
 }
 
 export const H5Player: React.FC<H5PProps> = ({
@@ -32,6 +33,7 @@ export const H5Player: React.FC<H5PProps> = ({
   h5pObject,
   loading = false,
   className = "",
+  hideActionButtons,
 }) => {
   const { fetchH5P, h5p } = useContext(EscolaLMSContext);
 
@@ -530,9 +532,12 @@ export const H5Player: React.FC<H5PProps> = ({
       themeContext.primaryColor
     )}!important;
    }
+   .h5p-content ul.h5p-actions {
+    display: ${hideActionButtons ? 'none' : 'block'};
+  }
   `;
     return `data:text/css;base64,${btoa(css)}`;
-  }, [themeContext]);
+  }, [themeContext, hideActionButtons]);
 
   return (
     <StyledH5P className={`wellms-component ${className}`}>