Separate info button into component

hanydd · Sep 9, 2024 · cd07d6b · cd07d6b
1 parent 0a916a0
commit cd07d6b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/src/components/playerButtons/InfoButton.tsx b/src/components/playerButtons/InfoButton.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { forwardRef } from "react";
+import Config from "../../config";
+import PlayerButtonComponent from "./playerButtonComponent";
+
+interface InfoButtonProps {
+    popupOpen: boolean;
+    infoCallback: () => void;
+}
+
+const InfoButtonComponent = forwardRef<HTMLButtonElement, InfoButtonProps>(function (
+    { popupOpen = false, infoCallback },
+    ref
+) {
+    function initialShowInfoButton() {
+        return !Config.config.hideInfoButtonPlayerControls && !document.URL.includes("/embed/");
+    }
+
+    function showInfoButton() {
+        return initialShowInfoButton();
+    }
+
+    return (
+        <PlayerButtonComponent
+            ref={ref}
+            baseID="info"
+            title="openPopup"
+            imageName="PlayerInfoIconSponsorBlocker.svg"
+            isDraggable={false}
+            show={showInfoButton()}
+            onClick={infoCallback}
+        ></PlayerButtonComponent>
+    );
+});
+InfoButtonComponent.displayName = "InfoButtonComponent";
+
+export default InfoButtonComponent;
diff --git a/src/components/playerButtons/PlayerButtonGroupComponent.tsx b/src/components/playerButtons/PlayerButtonGroupComponent.tsx
@@ -1,6 +1,6 @@
 import { ConfigProvider, Popconfirm, theme } from "antd";
 import * as React from "react";
-import Config from "../../config";
+import InfoButtonComponent from "./InfoButton";
 import PlayerButtonComponent from "./playerButtonComponent";
 
 interface PlayerButtonGroupProps {
@@ -31,14 +31,16 @@ function PlayerButtonGroupComponent({
 
     return (
         <ConfigProvider theme={{ token: { colorPrimary: "#00aeec" }, algorithm: theme.darkAlgorithm }}>
-            <PlayerButtonComponent
+            <InfoButtonComponent popupOpen={false} infoCallback={infoCallback}></InfoButtonComponent>
+
+            {/* <PlayerButtonComponent
                 baseID="info"
                 title="openPopup"
                 imageName="PlayerInfoIconSponsorBlocker.svg"
                 isDraggable={false}
                 show={!Config.config.hideInfoButtonPlayerControls && !document.URL.includes("/embed/")}
                 onClick={infoCallback}
-            ></PlayerButtonComponent>
+            ></PlayerButtonComponent> */}
 
             <PlayerButtonComponent
                 baseID="submit"