Change button container to be rendered when creating buttons

hanydd · Sep 3, 2024 · c09356d · c09356d
1 parent 894f023
commit c09356d
Showing 1 changed file with 78 additions and 52 deletions.
diff --git a/src/render/PlayerButton.tsx b/src/render/PlayerButton.tsx
@@ -3,6 +3,7 @@ import { createRoot, Root } from "react-dom/client";
 import { PlayerButtonGroupComponent } from "../components/PlayerButtonComponent";
 import Config from "../config";
 import { AnimationUtils } from "../utils/animationUtils";
+import { waitForElement } from "../utils/dom";
 import { waitFor } from "../utils/index";
 import { getControls } from "../utils/pageUtils";
 
@@ -13,76 +14,101 @@ export class PlayerButton {
     root: Root;
     container: HTMLElement;
 
+    startSegmentCallback: () => void;
+    cancelSegmentCallback: () => void;
+    deleteCallback: () => void;
+    submitCallback: () => void;
+    infoCallback: () => void;
+
     constructor(
         startSegmentCallback: () => void,
         cancelSegmentCallback: () => void,
         deleteCallback: () => void,
         submitCallback: () => void,
         infoCallback: () => void
     ) {
-        this.ref = React.createRef();
+        this.ref = React.createRef<PlayerButtonGroupComponent>();
         const existingContainer = document.getElementById(containerId);
         if (existingContainer) {
-            this.container = existingContainer;
-            return;
+            existingContainer.remove();
         }
-
-        this.container = document.createElement("div");
-        this.container.id = containerId;
-        this.container.style.display = "contents";
-        this.root = createRoot(this.container);
-        this.root.render(
-            <PlayerButtonGroupComponent
-                ref={this.ref}
-                startSegmentCallback={startSegmentCallback}
-                cancelSegmentCallback={cancelSegmentCallback}
-                deleteCallback={deleteCallback}
-                submitCallback={submitCallback}
-                infoCallback={infoCallback}
-            />
-        );
+        this.startSegmentCallback = startSegmentCallback;
+        this.cancelSegmentCallback = cancelSegmentCallback;
+        this.deleteCallback = deleteCallback;
+        this.submitCallback = submitCallback;
+        this.infoCallback = infoCallback;
     }
 
     public async createButtons(): Promise<
         Record<string, { button: HTMLButtonElement; image: HTMLImageElement; setupListener: boolean }>
     > {
-        const controlsContainer = await waitFor(getControls, 10000).catch();
-        await waitFor(() => getControls().childElementCount > 4); // wait for controls buttons to be loaded
-
-        controlsContainer.prepend(this.container);
+        const controlsContainer = await waitForElement(".bpx-player-control-bottom-right").catch(() => null);
+        console.log("controlsContainer", controlsContainer);
+        if (!controlsContainer) {
+            console.log("Could not find control button containers");
+            return null;
+        }
 
-        const playerButtons = {
-            startSegment: {
-                button: document.getElementById("startSegmentButton") as HTMLButtonElement,
-                image: document.getElementById("startSegmentImage") as HTMLImageElement,
-                setupListener: false,
-            },
-            cancelSegment: {
-                button: document.getElementById("cancelSegmentButton") as HTMLButtonElement,
-                image: document.getElementById("cancelSegmentImage") as HTMLImageElement,
-                setupListener: false,
-            },
-            delete: {
-                button: document.getElementById("deleteButton") as HTMLButtonElement,
-                image: document.getElementById("deleteImage") as HTMLImageElement,
-                setupListener: false,
-            },
-            submit: {
-                button: document.getElementById("submitButton") as HTMLButtonElement,
-                image: document.getElementById("submitImage") as HTMLImageElement,
-                setupListener: false,
-            },
-            info: {
-                button: document.getElementById("infoButton") as HTMLButtonElement,
-                image: document.getElementById("infoImage") as HTMLImageElement,
-                setupListener: false,
-            },
-        };
+        // wait for controls buttons to be loaded
+        await waitFor(() => getControls().childElementCount > 4).catch(() => {
+            console.log("Get control chilren time out");
+        });
 
-        if (Config.config.autoHideInfoButton) {
-            AnimationUtils.setupAutoHideAnimation(playerButtons.info.button, controlsContainer);
+        if (!this.container) {
+            this.container = document.createElement("div");
+            this.container.id = containerId;
+            this.container.style.display = "contents";
+            this.root = createRoot(this.container);
+            this.root.render(
+                <PlayerButtonGroupComponent
+                    ref={this.ref}
+                    startSegmentCallback={this.startSegmentCallback}
+                    cancelSegmentCallback={this.cancelSegmentCallback}
+                    deleteCallback={this.deleteCallback}
+                    submitCallback={this.submitCallback}
+                    infoCallback={this.infoCallback}
+                />
+            );
+            controlsContainer.prepend(this.container);
         }
 
-        return playerButtons;
+        // wait a tick for React to render the buttons
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                const playerButtons = {
+                    startSegment: {
+                        button: document.getElementById("startSegmentButton") as HTMLButtonElement,
+                        image: document.getElementById("startSegmentImage") as HTMLImageElement,
+                        setupListener: false,
+                    },
+                    cancelSegment: {
+                        button: document.getElementById("cancelSegmentButton") as HTMLButtonElement,
+                        image: document.getElementById("cancelSegmentImage") as HTMLImageElement,
+                        setupListener: false,
+                    },
+                    delete: {
+                        button: document.getElementById("deleteButton") as HTMLButtonElement,
+                        image: document.getElementById("deleteImage") as HTMLImageElement,
+                        setupListener: false,
+                    },
+                    submit: {
+                        button: document.getElementById("submitButton") as HTMLButtonElement,
+                        image: document.getElementById("submitImage") as HTMLImageElement,
+                        setupListener: false,
+                    },
+                    info: {
+                        button: document.getElementById("infoButton") as HTMLButtonElement,
+                        image: document.getElementById("infoImage") as HTMLImageElement,
+                        setupListener: false,
+                    },
+                };
+
+                if (Config.config.autoHideInfoButton) {
+                    AnimationUtils.setupAutoHideAnimation(playerButtons.info.button, controlsContainer);
+                }
+
+                resolve(playerButtons);
+            }, 10);
+        });
     }
 }