Hide icon during fullscreen transition

FrogTheFrog · Aug 9, 2024 · 0a0db3a · 0a0db3a
1 parent 89de8a0
commit 0a0db3a
Showing 1 changed file with 40 additions and 27 deletions.
diff --git a/src/components/moondecklaunchbutton/moondecklaunchbutton.tsx b/src/components/moondecklaunchbutton/moondecklaunchbutton.tsx
@@ -73,38 +73,43 @@ const MoonDeckLaunchButton: VFC<Props> = ({ appId, appName, appType, moonDeckApp
   );
 };
 
-export const MoonDeckLaunchButtonAnchor: VFC<Props> = (props) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const [show, setShow] = useState<boolean>(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> = (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<boolean>(true);
+  const ref = useRef<HTMLDivElement | null>(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> = (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"] });