[FEATURE] [FRONTEND] Update H5P editor on-init event hook (#631)

* change editor-on-init to use element polling * #fix Public folder on production should be mounted to avoid content deletion on re-deployment Co-authored-by: Moses Okemwa <[email protected]>
tunapanda · Mar 19, 2021 · 5815855 · 5815855
1 parent c7f521e
commit 5815855
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/docker-compose-prod.yml b/docker-compose-prod.yml
@@ -25,12 +25,17 @@ services:
     restart: "on-failure"
     env_file: .env
     ports:
-      - "$FRONTED_PORT:80"
-
+      - "${FRONTED_PORT}:80"
+    volumes:
+      - public:/usr/src/app/public
     networks:
       - wikonnect
 
 networks:
   wikonnect:
     name: wikonnect
     driver: bridge
+
+volumes:
+  public:
+    name: wikonnect-public
diff --git a/frontend/app/components/h5p/editor.js b/frontend/app/components/h5p/editor.js
@@ -39,9 +39,6 @@ export default class H5pEditorComponent extends Component {
       )
         .then((res) => res.json())
         .then((rs) => {
-          if (this.args.onEditorInit) {
-            this.args.onEditorInit(element);
-          }
           this.editor = element; //initialize the editor now
           return rs.model;
         });
@@ -56,5 +53,30 @@ export default class H5pEditorComponent extends Component {
         body: JSON.stringify(requestBody),
       }).then((res) => res.json());
     };
+    if (this.args.onEditorInit) {
+      this.pollUntilIframeIsDrawn(element);
+    }
+  }
+
+  pollUntilIframeIsDrawn(elem) {
+    const editorIframe = elem.querySelector(
+      '.h5p-editor-component-root  .h5p-create iframe'
+    );
+
+    const editorSearchInput = editorIframe?.contentWindow.document.querySelector(
+      '.h5p-hub'
+    );
+
+    if (!editorIframe && !this.elementVisible(editorSearchInput)) {
+      setTimeout(() => this.pollUntilIframeIsDrawn(elem), 40);
+    } else {
+      this.args.onEditorInit(elem);
+    }
+  }
+
+  elementVisible(e) {
+    return e
+      ? !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length)
+      : false;
   }
 }