From: =?UTF-8?q?Jaras=C5=82a=C5=AD=20Viktor=C4=8Dyk?= <ugzuzg@gmail.com>
To: ~avery/public-inbox@lists.sr.ht
Cc: =?UTF-8?q?Jaras=C5=82a=C5=AD=20Viktor=C4=8Dyk?= <ugzuzg@gmail.com>
Subject: [PATCH crankshaft v2 1/3] Integrate plugins into gamepadui
Date: Thu,  1 Sep 2022 18:57:43 +0200
Message-Id: <20220901165745.197501-1-ugzuzg@gmail.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit

---
 .../menu-manager/deck/menu-injector-deck.css  | 13 +---
 .../menu-manager/deck/menu-injector-deck.tsx  | 70 +++++--------------
 injected/src/smm.ts                           | 18 +++++
 injected/src/tab-observer.ts                  |  5 ++
 injected/src/types/global.d.ts                |  2 +
 5 files changed, 46 insertions(+), 62 deletions(-)

diff --git a/injected/src/menu-manager/deck/menu-injector-deck.css b/injected/src/menu-manager/deck/menu-injector-deck.css
index 4f78a23..2621f37 100644
--- a/injected/src/menu-manager/deck/menu-injector-deck.css
+++ b/injected/src/menu-manager/deck/menu-injector-deck.css
@@ -1,21 +1,12 @@
 [data-smm-menu-page-container] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: auto;
-  z-index: 999;
-
   width: 100%;
-  height: calc(100% - 40px);
+  height: 100%;
+  padding-top: calc(0px + var(--basicui-header-height));
 
   display: flex;
   overflow: auto;
 
   background-color: #23262e;
-  opacity: 0;
-
-  pointer-events: none;
 }
 
 [data-smm-menu-page-container] > ul:first-child {
diff --git a/injected/src/menu-manager/deck/menu-injector-deck.tsx b/injected/src/menu-manager/deck/menu-injector-deck.tsx
index 67b7497..f6949a9 100644
--- a/injected/src/menu-manager/deck/menu-injector-deck.tsx
+++ b/injected/src/menu-manager/deck/menu-injector-deck.tsx
@@ -34,6 +34,7 @@ export class MenuInjectorDeck implements MenuInjector {
     this.createPageContainer();
     this.addPluginsMenuItem();
     this.listenToClickEvents();
+    this.listenToNavigationChanges();
   }
 
   private injectMenuStyles() {
@@ -56,21 +57,24 @@ export class MenuInjectorDeck implements MenuInjector {
         {this.menuPage}
       </div>
     );
-
-    document
-      .querySelector<HTMLDivElement>(DECK_SELECTORS.mainNavMenu)
-      ?.appendChild(this.pageContainer);
   }
 
   private listenToClickEvents() {
     this.smm.IPC.on<{ id: string }>(
       'csMenuItemClicked',
       async ({ data: { id: _id } }) => {
-        this.openPluginsPage();
+        window.coolClass.Navigate('/blank/cs-plugins');
+        window.coolClass.CloseSideMenus();
       }
     );
   }
 
+  private listenToNavigationChanges() {
+    this.smm.addEventListener('switchToPlugins', () => {
+      this.openPluginsPage();
+    });
+  }
+
   private addPluginsMenuItem() {
     window.csMenuItems = [
       {
@@ -82,23 +86,11 @@ export class MenuInjectorDeck implements MenuInjector {
   }
 
   private openPluginsPage() {
-    window.csMenuActiveItem = 'plugins';
-
-    // Close menu
-    window.coolClass.OpenSideMenu();
+    if (this.pageContainer.isConnected) return;
 
-    // Make sure we're on a page where we can show the plugin page
-    // (we'll navigate back when the page is closed)
-    if (
-      document.querySelector(DECK_SELECTORS.topLevelTransitionSwitch)?.children
-        ?.length === 0
-    ) {
-      window.coolClass.NavigateToLibraryTab();
-      this.enteredWithNavigate = true;
-    }
+    window.csMenuActiveItem = 'plugins';
 
     this.showPageContainer();
-
     this.menuListGamepad = new GamepadHandler({
       smm: this.smm,
       root: this.menuList,
@@ -110,44 +102,20 @@ export class MenuInjectorDeck implements MenuInjector {
     });
   }
 
-  private async closePluginsPage() {
-    // Fade out the plugin page before removing it
-    const animation = await this.pageContainer.animate([{ opacity: 0 }], {
-      duration: 300,
-      fill: 'forwards',
-    }).finished;
-    this.hidePageContainer();
-    animation.cancel();
-
+  private async closePluginsPage(forward = false) {
     // Clear active menu item
     window.csMenuActiveItem = undefined;
     window.csMenuUpdate?.();
 
-    if (this.enteredWithNavigate) {
-      window.coolClass.NavigateBackOrOpenMenu();
-    }
-  }
+    deleteAll('[data-smm-menu-page-container]');
 
-  private showPageContainer() {
-    this.pageContainer.style.opacity = '1';
-    this.pageContainer.style.pointerEvents = 'all';
-    const header = document.querySelector<HTMLDivElement>(
-      DECK_SELECTORS.header
-    );
-    if (header) {
-      header.style.display = 'none';
-    }
+    if (!forward) window.coolClass.NavigateBackOrOpenMenu();
   }
 
-  private hidePageContainer() {
-    this.pageContainer.style.opacity = '0';
-    this.pageContainer.style.pointerEvents = 'none';
-    const header = document.querySelector<HTMLDivElement>(
-      DECK_SELECTORS.header
-    );
-    if (header) {
-      header.style.display = 'flex';
-    }
+  private showPageContainer() {
+    document
+      .querySelector<HTMLDivElement>(DECK_SELECTORS.topLevelTransitionSwitch)
+      ?.appendChild(this.pageContainer);
   }
 
   createMenuItem({ id, label, render }: MenuItem) {
@@ -181,7 +149,7 @@ export class MenuInjectorDeck implements MenuInjector {
   closeActivePage() {
     this.activePluginGamepad?.cleanup();
     this.menuListGamepad?.cleanup();
-    this.closePluginsPage();
+    this.closePluginsPage(true);
   }
 
   private openPluginPage(render: MenuItem['render']) {
diff --git a/injected/src/smm.ts b/injected/src/smm.ts
index a375f9b..2689405 100644
--- a/injected/src/smm.ts
+++ b/injected/src/smm.ts
@@ -29,6 +29,7 @@ type SMMEventType =
   | typeof eventTypeSwitchToCollections
   | typeof eventTypeSwitchToAppDetails
   | typeof eventTypeSwitchToAppProperties
+  | typeof eventTypeSwitchToPlugins
   | typeof eventTypeLockScreenOpened
   | typeof eventTypeLockScreenClosed;
 
@@ -38,6 +39,7 @@ type SMMEvent =
   | EventSwitchToCollections
   | EventSwitchToAppDetails
   | EventSwitchToAppProperties
+  | EventSwitchToPlugins
   | EventLockScreenOpened
   | EventLockScreenClosed;
 
@@ -77,6 +79,13 @@ class EventSwitchToAppProperties extends CustomEvent<AppPropsApp> {
   }
 }
 
+const eventTypeSwitchToPlugins = 'switchToPlugins' as const;
+class EventSwitchToPlugins extends CustomEvent<void> {
+  constructor() {
+    super(eventTypeSwitchToPlugins);
+  }
+}
+
 const eventTypeLockScreenOpened = 'lockScreenOpened' as const;
 class EventLockScreenOpened extends CustomEvent<void> {
   constructor() {
@@ -275,6 +284,15 @@ export class SMM extends EventTarget {
     this.dispatchEvent(new EventSwitchToAppProperties(app));
   }
 
+  /**
+   * @internal
+   */
+  switchToPlugins() {
+    info('Switched to plugins');
+
+    this.dispatchEvent(new EventSwitchToPlugins());
+  }
+
   /**
    * @internal
    */
diff --git a/injected/src/tab-observer.ts b/injected/src/tab-observer.ts
index c66c3eb..d8ea9ee 100644
--- a/injected/src/tab-observer.ts
+++ b/injected/src/tab-observer.ts
@@ -81,6 +81,11 @@ export const createTabObserver = (smm: SMM, mainLibraryEl: HTMLElement) => {
       }
     }
 
+    if (location.pathname === '/routes/blank/cs-plugins') {
+      smm.switchToPlugins();
+      return;
+    }
+
     smm.switchToUnknownPage();
   });
 
diff --git a/injected/src/types/global.d.ts b/injected/src/types/global.d.ts
index 0b0c628..f082cbf 100644
--- a/injected/src/types/global.d.ts
+++ b/injected/src/types/global.d.ts
@@ -68,9 +68,11 @@ declare global {
       // other/none = close menu
       OpenSideMenu: (menu?: number) => void;
       ToggleSideMenu: (menu?: number) => void;
+      CloseSideMenus: () => void;
       // Currently open menu (same number values as above)
       m_eOpenSideMenu?: number;
 
+      Navigate: (target: string) => void;
       NavigateToLibraryTab: () => void;
       NavigateBackOrOpenMenu: () => void;
 
-- 
2.37.3