diff --git a/src/components/playerButtons/InfoButton.tsx b/src/components/playerButtons/InfoButton.tsx index 570f800d..8b0e9a9a 100644 --- 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(function ( - { popupOpen = false, infoCallback }, - ref -) { +const InfoButtonComponent = forwardRef(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(funct imageName="PlayerInfoIconSponsorBlocker.svg" isDraggable={false} show={showInfoButton()} - onClick={infoCallback} + onClick={handleInfoBUttonClick} > ); }); diff --git a/src/components/playerButtons/PlayerButtonGroupComponent.tsx b/src/components/playerButtons/PlayerButtonGroupComponent.tsx index 4356c109..3e76a819 100644 --- a/src/components/playerButtons/PlayerButtonGroupComponent.tsx +++ b/src/components/playerButtons/PlayerButtonGroupComponent.tsx @@ -31,7 +31,7 @@ function PlayerButtonGroupComponent({ return ( - + {/*