chore(release): 3.23.0 [CI SKIP]

fix(useQuickAccessVisible): use the "Page Visibility API" instead of focus/blur

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.23.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.22.1...v3.23.0) (2023-10-11)
+
+
+### Features
+
+* **static-classes:** add more css classes ([#94](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/94)) ([30e3194](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/30e319425bd4b0ee481dd7bd3245dacd90806afb))
+
+## [3.22.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.22.0...v3.22.1) (2023-10-10)
+
+
+### Bug Fixes
+
+* **useQuickAccessVisible:** use the "Page Visibility API" instead of focus/blur ([4c4fda4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4c4fda47e3d9fd936b493c5965634a0ff443014f))
+
 # [3.22.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.21.8...v3.22.0) (2023-08-09)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.22.0",
+  "version": "3.23.0",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/custom-hooks/useQuickAccessVisible.tsx

@@ -9,14 +9,7 @@ function getQuickAccessWindow(): Window | null {
 /**
  * Returns state indicating the visibility of quick access menu.
  *
- * @remarks
- * During development it is possible to open the quick access menu without giving it
- * focus in some cases. In such cases, the quick access menu state is invisible.
- *
- * This seems to be impossible to replicate when running the deck normally. Even in
- * the edge cases it always seems to have a focus.
- *
- * @returns `true` if quick access menu is visible (focused) and `false` otherwise.
+ * @returns `true` if quick access menu is visible and `false` otherwise.
  *
  * @example
  * import { VFC, useEffect } from "react";
@@ -44,7 +37,10 @@ function getQuickAccessWindow(): Window | null {
  * };
  */
 export function useQuickAccessVisible(): boolean {
-  const [isVisible, setIsVisible] = useState(getQuickAccessWindow()?.document.hasFocus() ?? true);
+  // By default we say that document is not hidden, unless we know otherwise.
+  // This would cover the cases when Valve breaks something and the quick access window
+  // cannot be accessed anymore - the plugins that use this would continue working somewhat.
+  const [isHidden, setIsHidden] = useState(getQuickAccessWindow()?.document.hidden ?? false);
 
   useEffect(() => {
     const quickAccessWindow = getQuickAccessWindow();
@@ -53,16 +49,12 @@ export function useQuickAccessVisible(): boolean {
       return;
     }
 
-    const onBlur = () => setIsVisible(false);
-    const onFocus = () => setIsVisible(true);
-
-    quickAccessWindow.addEventListener('blur', onBlur);
-    quickAccessWindow.addEventListener('focus', onFocus);
+    const onVisibilityChange = () => setIsHidden(quickAccessWindow.document.hidden);
+    quickAccessWindow.addEventListener('visibilitychange', onVisibilityChange);
     return () => {
-      quickAccessWindow.removeEventListener('blur', onBlur);
-      quickAccessWindow.removeEventListener('focus', onFocus);
+      quickAccessWindow.removeEventListener('visibilitychange', onVisibilityChange);
     };
   }, []);
 
-  return isVisible;
+  return !isHidden;
 }

src/deck-components/static-classes.ts

@@ -504,6 +504,169 @@ type GamepadUIClasses = Record<
   string
 >;
 
+type GamepadTabbedPageClasses = Record<
+  | 'duration-app-launch'
+  | 'headerHeight'
+  | 'contentPadding'
+  | 'GamepadTabbedPage'
+  | 'TabHeaderRowWrapper'
+  | 'Floating'
+  | 'TabRow'
+  | 'TabRowTabs'
+  | 'BleedGlyphs'
+  | 'TabsRowScroll'
+  | 'FixCenterAlignScroll'
+  | 'Tab'
+  | 'Selected'
+  | 'HasAddon'
+  | 'RightAddon'
+  | 'TabTitle'
+  | 'LeftAddon'
+  | 'TabCount'
+  | 'Active'
+  | 'TabBadge'
+  | 'TabCountBadge'
+  | 'TabRowSpacer'
+  | 'Glyphs'
+  | 'Show'
+  | 'TabContents'
+  | 'ContentTransition'
+  | 'TabContentsScroll'
+  | 'Right'
+  | 'Enter'
+  | 'EnterActive'
+  | 'Exit'
+  | 'ExitActive'
+  | 'Left'
+  | 'TabIcon',
+  string
+>;
+
+type GamepadContextMenuClasses = Record<
+  | "duration-app-launch"
+  | "BasicContextMenuModal"
+  | "BasicContextMenuHeader"
+  | "BasicContextMenuHeaderShrinkableSpacing"
+  | "BasicContextMenuContainer"
+  | "slideInAnimation"
+  | "contextMenu"
+  | "contextMenuContents"
+  | "hasSubMenu"
+  | "contextMenuFade"
+  | "contextMenuItem"
+  | "active"
+  | "Selected"
+  | "Focused"
+  | "Positive"
+  | "Emphasis"
+  | "Destructive"
+  | "Capitalized"
+  | "MenuSectionHeader"
+  | "UpperCase"
+  | "SubMenu"
+  | "ContextMenuSeparator"
+  | "Label"
+  | "Arrow"
+  | "ItemFocusAnim-darkerGrey-nocolor"
+  | "ItemFocusAnim-darkerGrey"
+  | "ItemFocusAnim-darkGrey"
+  | "ItemFocusAnim-grey"
+  | "ItemFocusAnimBorder-darkGrey"
+  | "ItemFocusAnim-green"
+  | "focusAnimation"
+  | "hoverAnimation",
+  string
+>;
+
+type AchievementClasses = Record<
+  | "nAchievementHeight"
+  | "nGlobalAchievementHeight"
+  | "nAchievementsListTitleHeight"
+  | "nAchievementGap"
+  | "AchievementList"
+  | "ListTitle"
+  | "AchievementListItemBase"
+  | "Container"
+  | "Content"
+  | "Right"
+  | "Footer"
+  | "AchievementTitle"
+  | "AchievementDescription"
+  | "AchievementGlobalPercentage"
+  | "InBody"
+  | "VerticalContent"
+  | "UnlockDate"
+  | "AlignEnd"
+  | "ProgressBar"
+  | "ProgressCount"
+  | "AchievementContent"
+  | "HiddenAchievementContent"
+  | "FriendAchievementFooter"
+  | "GlobalPercentage"
+  | "UserUnlockDateTime"
+  | "GlobalAchievementsListHeader"
+  | "SearchField"
+  | "Avatar"
+  | "HeaderText"
+  | "GlobalAchievementListItem"
+  | "UnlockContainer"
+  | "Info"
+  | "Title"
+  | "Description"
+  | "Percent"
+  | "ImageContainer"
+  | "ProgressFill"
+  | "SpoilerWarning"
+  | "Hidden"
+  | "ComparisonAchieverColumn"
+  | "ComparisonAchieverInfo"
+  | "ProgressContainer"
+  | "ProgressLabel"
+  | "Secondary"
+  | "AvatarContainer"
+  | "Unachieved",
+  string
+>;
+
+type MainMenuAppRunningClasses = Record<
+  | "duration-app-launch"
+  | "ScrollMask"
+  | "HideMask"
+  | "MainMenuAppRunning"
+  | "MenuOpen"
+  | "NavigationColumn"
+  | "ControllerColumnFocused"
+  | "NavColumnFocused"
+  | "NavigationBox"
+  | "NavigationMenuItem"
+  | "ItemFocusAnim-darkerGrey"
+  | "Active"
+  | "Disabled"
+  | "SwitchAppsTitle"
+  | "SelectableAppWindow"
+  | "ActiveDot"
+  | "NavigationMenuItemSeparator"
+  | "AppColumn"
+  | "FocusedColumn"
+  | "AppColumnContent"
+  | "ActiveContent"
+  | "CurrentGameBackground"
+  | "CurrentGameLogo"
+  | "OverlayAchievements"
+  | "Container"
+  | "OverlayGuides"
+  | "OverlayNotes"
+  | "OverlayInplaceBrowser"
+  | "ItemFocusAnim-darkerGrey-nocolor"
+  | "ItemFocusAnim-darkGrey"
+  | "ItemFocusAnim-grey"
+  | "ItemFocusAnimBorder-darkGrey"
+  | "ItemFocusAnim-green"
+  | "focusAnimation"
+  | "hoverAnimation",
+  string
+>;
+
 export const quickAccessMenuClasses: QuickAccessMenuClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.Title?.includes('quickaccessmenu'),
 );
@@ -541,4 +704,16 @@ export const appDetailsClasses: AppDetailsClasses = findModule(
 );
 export const gamepadUIClasses: GamepadUIClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.BasicUiRoot?.includes('gamepadui_'),
+);
+export const gamepadTabbedPageClasses: GamepadTabbedPageClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.GamepadTabbedPage?.includes('gamepadtabbedpage_')
+);
+export const gamepadContextMenuClasses: GamepadContextMenuClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.BasicContextMenuModal?.includes('gamepadcontextmenu')
+);
+export const achievementClasses: AchievementClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.AchievementListItemBase?.includes('achievementslist')
+);
+export const mainMenuAppRunningClasses: MainMenuAppRunningClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.MainMenuAppRunning?.includes('mainmenuapprunning')
 );