diff --git a/src/components/moondecklaunchbutton/moondecklaunchbutton.tsx b/src/components/moondecklaunchbutton/moondecklaunchbutton.tsx index 4a42b49..b5d1088 100644 --- a/src/components/moondecklaunchbutton/moondecklaunchbutton.tsx +++ b/src/components/moondecklaunchbutton/moondecklaunchbutton.tsx @@ -73,38 +73,43 @@ const MoonDeckLaunchButton: VFC = ({ appId, appName, appType, moonDeckApp ); }; -export const MoonDeckLaunchButtonAnchor: VFC = (props) => { - const ref = useRef(null); - const [show, setShow] = useState(true); +function findTopCapsuleParent(ref: HTMLDivElement | null): Element | null { + const children = ref?.parentElement?.children; + if (!children) { + return null; + } - useEffect(() => { - const children = ref?.current?.parentElement?.children; - if (!children) { - logger.error("Children not found!"); - return; + let headerContainer: Element | undefined; + for (const child of children) { + if (child.className.includes(appDetailsClasses.Header)) { + headerContainer = child; + break; } + } - let headerContainer: Element | undefined; - for (const child of children) { - if (child.className.includes(appDetailsClasses.Header)) { - headerContainer = child; - break; - } - } + if (!headerContainer) { + return null; + } - if (!headerContainer) { - logger.error("Header container not found!"); - return; + let topCapsule: Element | null = null; + for (const child of headerContainer.children) { + if (child.className.includes(appDetailsHeaderClasses.TopCapsule)) { + topCapsule = child; + break; } + } - let topCapsule: Element | undefined; - for (const child of headerContainer.children) { - if (child.className.includes(appDetailsHeaderClasses.TopCapsule)) { - topCapsule = child; - break; - } - } + return topCapsule; +} +export const MoonDeckLaunchButtonAnchor: VFC = (props) => { + // There will be no mutation when the page is loaded (either from exiting the game + // or just newly opening the page), therefore it's visible by default. + const [show, setShow] = useState(true); + const ref = useRef(null); + + useEffect(() => { + const topCapsule = findTopCapsuleParent(ref?.current); if (!topCapsule) { logger.error("TopCapsule container not found!"); return; @@ -117,8 +122,16 @@ export const MoonDeckLaunchButtonAnchor: VFC = (props) => { } const className = (entry.target as Element).className; - const hide = className.includes("Fullscreen") && !className.includes(appDetailsHeaderClasses.FullscreenExitDone); - setShow(!hide); + const fullscreenMode = + className.includes(appDetailsHeaderClasses.FullscreenEnterStart) || + className.includes(appDetailsHeaderClasses.FullscreenEnterActive) || + className.includes(appDetailsHeaderClasses.FullscreenEnterDone) || + className.includes(appDetailsHeaderClasses.FullscreenExitStart) || + className.includes(appDetailsHeaderClasses.FullscreenExitActive); + const fullscreenAborted = + className.includes(appDetailsHeaderClasses.FullscreenExitDone); + + setShow(!fullscreenMode || fullscreenAborted); } }); mutationObserver.observe(topCapsule, { attributes: true, attributeFilter: ["class"] });