Separate player button to different components

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

Hide file tree

Showing 4 changed files with 45 additions and 47 deletions.
diff --git a/src/components/PlayerButtonComponent.tsx → ...yerButtons/PlayerButtonGroupComponent.tsx b/src/components/PlayerButtonComponent.tsx → ...yerButtons/PlayerButtonGroupComponent.tsx
@@ -1,39 +1,7 @@
 import { ConfigProvider, Popconfirm, theme } from "antd";
 import * as React from "react";
-import { forwardRef } from "react";
-
-interface PlayerButtonProps {
-    baseID: string;
-    title: string;
-    imageName: string;
-    isDraggable?: boolean;
-    onClick?: () => void;
-}
-
-const PlayerButtonComponent = forwardRef<HTMLButtonElement, PlayerButtonProps>(function (
-    { baseID, title, imageName, isDraggable = false, onClick },
-    ref
-) {
-    return (
-        <button
-            ref={ref}
-            id={baseID + "Button"}
-            className="playerButton bpx-player-ctrl-btn"
-            style={{ maxWidth: "40px" }}
-            title={chrome.i18n.getMessage(title)}
-            draggable={isDraggable}
-            onClick={onClick}
-        >
-            <img
-                id={baseID + "Image"}
-                className="playerButtonImage bpx-player-ctrl-btn-icon"
-                src={chrome.runtime.getURL("icons/" + imageName)}
-                draggable={isDraggable}
-            ></img>
-        </button>
-    );
-});
-PlayerButtonComponent.displayName = "PlayerButtonComponent";
+import Config from "../../config";
+import PlayerButtonComponent from "./playerButtonComponent";
 
 interface PlayerButtonGroupProps {
     startSegmentCallback: () => void;
@@ -43,7 +11,7 @@ interface PlayerButtonGroupProps {
     infoCallback: () => void;
 }
 
-export function PlayerButtonGroupComponent({
+function PlayerButtonGroupComponent({
     startSegmentCallback,
     cancelSegmentCallback,
     deleteCallback,
@@ -68,6 +36,7 @@ export function PlayerButtonGroupComponent({
                 title="openPopup"
                 imageName="PlayerInfoIconSponsorBlocker.svg"
                 isDraggable={false}
+                show={!Config.config.hideInfoButtonPlayerControls && !document.URL.includes("/embed/")}
                 onClick={infoCallback}
             ></PlayerButtonComponent>
 
@@ -112,3 +81,5 @@ export function PlayerButtonGroupComponent({
         </ConfigProvider>
     );
 }
+
+export default PlayerButtonGroupComponent;
diff --git a/src/components/playerButtons/playerButtonComponent.tsx b/src/components/playerButtons/playerButtonComponent.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { forwardRef } from "react";
+
+interface PlayerButtonProps {
+    baseID: string;
+    title: string;
+    imageName: string;
+    isDraggable?: boolean;
+    show?: boolean;
+    onClick?: () => void;
+}
+
+const PlayerButtonComponent = forwardRef<HTMLButtonElement, PlayerButtonProps>(function (
+    { baseID, title, imageName, isDraggable = false, show = true, onClick },
+    ref
+) {
+    return (
+        <button
+            ref={ref}
+            id={baseID + "Button"}
+            className="playerButton bpx-player-ctrl-btn"
+            style={{ maxWidth: "40px", display: show ? "unset" : "none" }}
+            title={chrome.i18n.getMessage(title)}
+            draggable={isDraggable}
+            onClick={onClick}
+        >
+            <img
+                id={baseID + "Image"}
+                className="playerButtonImage bpx-player-ctrl-btn-icon"
+                src={chrome.runtime.getURL("icons/" + imageName)}
+                draggable={isDraggable}
+            ></img>
+        </button>
+    );
+});
+PlayerButtonComponent.displayName = "PlayerButtonComponent";
+
+export default PlayerButtonComponent;
diff --git a/src/content.ts b/src/content.ts
@@ -1918,17 +1918,6 @@ async function updateVisibilityOfPlayerControlsButton(): Promise<void> {
     playerButtons = await playerButton.createButtons();
 
     updateEditButtonsOnPlayer();
-
-    // Don't show the info button on embeds
-    if (
-        Config.config.hideInfoButtonPlayerControls ||
-        document.URL.includes("/embed/") ||
-        document.getElementById("sponsorBlockPopupContainer") != null
-    ) {
-        playerButtons.info.button.style.display = "none";
-    } else {
-        playerButtons.info.button.style.removeProperty("display");
-    }
 }
 
 /** Updates the visibility of buttons on the player related to creating segments. */

diff --git a/src/render/PlayerButton.tsx b/src/render/PlayerButton.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createRoot, Root } from "react-dom/client";
-import { PlayerButtonGroupComponent } from "../components/PlayerButtonComponent";
+import PlayerButtonGroupComponent from "../components/playerButtons/PlayerButtonGroupComponent";
 import Config from "../config";
 import { AnimationUtils } from "../utils/animationUtils";
 import { waitForElement } from "../utils/dom";