Move toggle info button logic into component

hanydd · Sep 9, 2024 · 11ae144 · 11ae144
1 parent ed26da0
commit 11ae144
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/src/components/playerButtons/InfoButton.tsx b/src/components/playerButtons/InfoButton.tsx
@@ -4,20 +4,29 @@ import Config from "../../config";
 import PlayerButtonComponent from "./PlayerButtonComponent";
 
 interface InfoButtonProps {
-    popupOpen: boolean;
     infoCallback: () => void;
 }
 
-const InfoButtonComponent = forwardRef<HTMLButtonElement, InfoButtonProps>(function (
-    { popupOpen = false, infoCallback },
-    ref
-) {
+const InfoButtonComponent = forwardRef<HTMLButtonElement, InfoButtonProps>(function ({ infoCallback }, ref) {
+    const [popupOpen, setPopupOpen] = React.useState(false);
+
+    React.useEffect(() => {
+        const handleShowInfoButton = () => setPopupOpen(false);
+        window.addEventListener("closePopupMenu", handleShowInfoButton);
+        return () => window.removeEventListener("closePopupMenu", handleShowInfoButton);
+    }, []);
+
     function initialShowInfoButton() {
         return !Config.config.hideInfoButtonPlayerControls && !document.URL.includes("/embed/");
     }
 
     function showInfoButton() {
-        return initialShowInfoButton();
+        return !popupOpen && initialShowInfoButton();
+    }
+
+    function handleInfoBUttonClick() {
+        setPopupOpen(true);
+        infoCallback();
     }
 
     return (
@@ -28,7 +37,7 @@ const InfoButtonComponent = forwardRef<HTMLButtonElement, InfoButtonProps>(funct
             imageName="PlayerInfoIconSponsorBlocker.svg"
             isDraggable={false}
             show={showInfoButton()}
-            onClick={infoCallback}
+            onClick={handleInfoBUttonClick}
         ></PlayerButtonComponent>
     );
 });

diff --git a/src/components/playerButtons/PlayerButtonGroupComponent.tsx b/src/components/playerButtons/PlayerButtonGroupComponent.tsx
@@ -31,7 +31,7 @@ function PlayerButtonGroupComponent({
 
     return (
         <ConfigProvider theme={{ token: { colorPrimary: "#00aeec" }, algorithm: theme.darkAlgorithm }}>
-            <InfoButtonComponent popupOpen={false} infoCallback={infoCallback}></InfoButtonComponent>
+            <InfoButtonComponent infoCallback={infoCallback}></InfoButtonComponent>
 
             {/* <PlayerButtonComponent
                 baseID="info"

diff --git a/src/content.ts b/src/content.ts
@@ -2095,9 +2095,6 @@ function openInfoMenu() {
 
     popupInitialised = false;
 
-    //hide info button
-    if (playerButtons.info) playerButtons.info.button.style.display = "none";
-
     const popup = document.createElement("div");
     popup.id = "sponsorBlockPopupContainer";
 
@@ -2134,10 +2131,8 @@ function closeInfoMenu() {
 
     popup.remove();
 
-    // Show info button if it's not an embed
-    if (!document.URL.includes("/embed/") && playerButtons.info) {
-        playerButtons.info.button.style.display = "unset";
-    }
+    // show info button again
+    window.dispatchEvent(new Event("closePopupMenu"));
 }
 
 function clearSponsorTimes() {