From cd07d6b0fef58e3cda6746f5873f5e59ded5bf27 Mon Sep 17 00:00:00 2001
From: hanyd <hanyd@bsbsb.top>
Date: Mon, 9 Sep 2024 13:05:37 +0800
Subject: [PATCH] Separate info button into component

---
 src/components/playerButtons/InfoButton.tsx   | 37 +++++++++++++++++++
 .../PlayerButtonGroupComponent.tsx            |  8 ++--
 2 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/components/playerButtons/InfoButton.tsx

diff --git a/src/components/playerButtons/InfoButton.tsx b/src/components/playerButtons/InfoButton.tsx
new file mode 100644
index 00000000..adeecb95
--- /dev/null
+++ 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
index 8ce4c326..7fbfe94b 100644
--- 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"