Controller mode UX: library grouping, theme settings, brighter XMB - #382
Merged
Conversation
- Introduced new settings for controller theme style and color, allowing users to customize the background visuals in controller mode. - Added functions to normalize and clamp theme color values. - Updated the SettingsManager to handle migrations for the new theme settings. - Enhanced the ControllerLibraryPage to utilize the new theme settings for improved visual consistency. - Updated styles to reflect the new theme options, including multiple preset styles. This enhancement improves user experience by providing more personalization options for the controller interface.
- Replaced hardcoded color values with theme-based RGB variables for better customization. - Simplified CSS selectors by removing unnecessary classes and consolidating animations. - Enhanced visual elements in the ControllerLibraryPage to align with the new theme settings. These changes improve the maintainability of the styles and ensure a cohesive look across the application.
- Added new CSS styles for the PS5-themed games hub, including blurred hero art and a horizontal shelf layout. - Enhanced animations for various components within the XMB wrapper to improve visual transitions. - Introduced new class selectors for game items, categories, and menu tiles to align with the PS5 aesthetic. These changes enhance the user interface and provide a more immersive experience for users navigating the game hub.
… and parallax effects - Added new icons for category labels to improve visual representation. - Implemented parallax backdrop tiles for a dynamic background experience. - Enhanced navigation logic to support media browsing alongside games. - Updated state management to handle media selection and transitions effectively. These changes enrich the user interface and provide a more engaging experience while navigating the controller library.
…ality - Introduced state management for PS5 row navigation, allowing transitions between top, main, and detail views. - Added detail rail items for enhanced media and game interaction, improving user engagement. - Updated navigation logic to support new detail rail interactions, including cycling through items and activating selections. - Enhanced CSS styles for PS5 detail cards, improving visual presentation and responsiveness. These changes provide a more dynamic and immersive experience for users navigating the controller library.
Collaborator
Author
|
- Enhanced PS5 row navigation logic to conditionally allow transitions between detail and top views based on active states. - Updated CSS styles for improved visual presentation of detail rails and shelf components, including adjustments to opacity and layout. - Improved responsiveness of shelf track elements to enhance user experience during navigation. These changes contribute to a more intuitive and visually appealing interface for users interacting with the controller library.
- Modified CSS styles for the PS5 menu, enhancing the visual presentation with new background and overlay effects. - Improved navigation logic in the ControllerLibraryPage to better handle transitions between top-level and settings submenus. - Introduced new classes for resume tiles, providing a live snapshot feature for current streaming games. These changes enhance the user experience by creating a more visually appealing and intuitive interface for navigating the controller library.
…Page - Introduced library sorting options, allowing users to sort games by recent playtime, alphabetical order, or favorites. - Updated navigation logic to manage state for spotlight and categories, improving user interaction with the game library. - Enhanced audio feedback for navigation actions with adjusted sound profiles. - Refined CSS styles for better visual presentation and responsiveness of the library interface. These changes improve the overall user experience by providing more intuitive navigation and organization within the controller library.
- Added new properties for lazy-loading shelf art to enhance performance during image rendering. - Implemented a function to compute shelf translation for centering active tiles, improving user experience in dual-shelf navigation. - Updated CSS transitions to utilize a variable for consistent timing across components, ensuring a cohesive feel during interactions. These changes enhance the navigation experience and visual consistency within the ControllerLibraryPage.
…n logic - Added new CSS styles for the full-screen game hub, enhancing the visual layout and user interaction with game tiles and descriptions. - Introduced state management for the game hub, allowing for focused navigation and improved user experience when browsing games. - Updated the ControllerLibraryPage to integrate the game hub functionality, including handling transitions and focus states. These changes provide a more immersive and visually appealing interface for users navigating the game library.
- Added new CSS styles for the game hub, improving layout and visual presentation of game posters and screenshots. - Updated the ControllerGameHub component to utilize local screenshot URLs, enhancing the display of game visuals. - Modified the ControllerLibraryPage to manage and load screenshots dynamically when the game hub is opened. These changes provide a more engaging and visually appealing experience for users interacting with the game hub.
…style loading visuals - Implemented a PS5-style resume tile in the ControllerLibraryPage, allowing users to continue cloud sessions seamlessly. - Added new CSS styles for cloud session visuals, including a resume badge and loading animations. - Updated the ControllerStreamLoading component to utilize PS5-themed loading indicators, improving the user experience during stream setup. - Enhanced logging for session recovery and connection processes to aid in debugging and user feedback. These changes provide a more engaging and visually appealing experience for users resuming cloud sessions and enhance the overall loading experience.
- Introduced a mechanism to deduplicate concurrent claim/resume calls for the same Cloud session, enhancing performance and user experience. - Added a reference to manage in-flight claim promises, ensuring that multiple requests for the same session are handled efficiently. - Updated the claimAndConnectSession function to utilize the new deduplication logic, improving error handling and session management. These changes streamline the session resume process, reducing unnecessary network calls and improving overall responsiveness during session claims.
- Integrated new in-stream menu features, allowing users to toggle microphone and adjust stream volume directly from the overlay. - Updated the ControllerGameHub and ControllerLibraryPage components to support in-stream navigation and actions, improving user interaction during streaming sessions. - Added CSS styles for the in-stream overlay, ensuring a visually appealing and functional interface that maintains readability of the underlying game. - Implemented state management for restoring navigation in the in-stream menu, enhancing user experience by preserving context during gameplay. These changes provide a more seamless and engaging experience for users interacting with the in-stream features of the application.
…lean up CSS - Eliminated the handleApplyStreamPreset and handleCycleAspectRatio functions from the App component, streamlining the codebase. - Removed the associated stream preset props from the ControllerLibraryPage component, enhancing clarity and reducing complexity. - Cleaned up CSS by removing the .cis-elapsed class, which was no longer in use, contributing to a more maintainable style sheet. These changes improve code readability and maintainability by removing obsolete features and associated styles.
…and associated styles - Eliminated the formatRemainingPlaytimeFromSubscription function from the App component, simplifying the codebase. - Removed the remainingPlaytimeText prop from the ControllerInStreamShell component, enhancing clarity and reducing complexity. - Cleaned up CSS by deleting the .cis-remaining class, which was no longer in use, contributing to a more maintainable style sheet. These changes improve code readability and maintainability by removing obsolete features and associated styles.
Jayian1890
added a commit
that referenced
this pull request
May 16, 2026
) * feat(settings): add controller theme customization options - Introduced new settings for controller theme style and color, allowing users to customize the background visuals in controller mode. - Added functions to normalize and clamp theme color values. - Updated the SettingsManager to handle migrations for the new theme settings. - Enhanced the ControllerLibraryPage to utilize the new theme settings for improved visual consistency. - Updated styles to reflect the new theme options, including multiple preset styles. This enhancement improves user experience by providing more personalization options for the controller interface. * refactor(styles): update theme colors in CSS for improved consistency - Replaced hardcoded color values with theme-based RGB variables for better customization. - Simplified CSS selectors by removing unnecessary classes and consolidating animations. - Enhanced visual elements in the ControllerLibraryPage to align with the new theme settings. These changes improve the maintainability of the styles and ensure a cohesive look across the application. * feat(styles): implement PS5-style layout and animations for game hub - Added new CSS styles for the PS5-themed games hub, including blurred hero art and a horizontal shelf layout. - Enhanced animations for various components within the XMB wrapper to improve visual transitions. - Introduced new class selectors for game items, categories, and menu tiles to align with the PS5 aesthetic. These changes enhance the user interface and provide a more immersive experience for users navigating the game hub. * feat(controller): enhance ControllerLibraryPage with media navigation and parallax effects - Added new icons for category labels to improve visual representation. - Implemented parallax backdrop tiles for a dynamic background experience. - Enhanced navigation logic to support media browsing alongside games. - Updated state management to handle media selection and transitions effectively. These changes enrich the user interface and provide a more engaging experience while navigating the controller library. * feat(controller): enhance PS5 row navigation and detail rail functionality - Introduced state management for PS5 row navigation, allowing transitions between top, main, and detail views. - Added detail rail items for enhanced media and game interaction, improving user engagement. - Updated navigation logic to support new detail rail interactions, including cycling through items and activating selections. - Enhanced CSS styles for PS5 detail cards, improving visual presentation and responsiveness. These changes provide a more dynamic and immersive experience for users navigating the controller library. * feat(controller): refine PS5 row navigation and CSS styles - Enhanced PS5 row navigation logic to conditionally allow transitions between detail and top views based on active states. - Updated CSS styles for improved visual presentation of detail rails and shelf components, including adjustments to opacity and layout. - Improved responsiveness of shelf track elements to enhance user experience during navigation. These changes contribute to a more intuitive and visually appealing interface for users interacting with the controller library. * feat(controller): update PS5 menu styles and navigation logic - Modified CSS styles for the PS5 menu, enhancing the visual presentation with new background and overlay effects. - Improved navigation logic in the ControllerLibraryPage to better handle transitions between top-level and settings submenus. - Introduced new classes for resume tiles, providing a live snapshot feature for current streaming games. These changes enhance the user experience by creating a more visually appealing and intuitive interface for navigating the controller library. * feat(controller): enhance navigation and sorting in ControllerLibraryPage - Introduced library sorting options, allowing users to sort games by recent playtime, alphabetical order, or favorites. - Updated navigation logic to manage state for spotlight and categories, improving user interaction with the game library. - Enhanced audio feedback for navigation actions with adjusted sound profiles. - Refined CSS styles for better visual presentation and responsiveness of the library interface. These changes improve the overall user experience by providing more intuitive navigation and organization within the controller library. * feat(controller): improve shelf navigation and CSS transitions - Added new properties for lazy-loading shelf art to enhance performance during image rendering. - Implemented a function to compute shelf translation for centering active tiles, improving user experience in dual-shelf navigation. - Updated CSS transitions to utilize a variable for consistent timing across components, ensuring a cohesive feel during interactions. These changes enhance the navigation experience and visual consistency within the ControllerLibraryPage. * feat(controller): implement full-screen game hub styles and navigation logic - Added new CSS styles for the full-screen game hub, enhancing the visual layout and user interaction with game tiles and descriptions. - Introduced state management for the game hub, allowing for focused navigation and improved user experience when browsing games. - Updated the ControllerLibraryPage to integrate the game hub functionality, including handling transitions and focus states. These changes provide a more immersive and visually appealing interface for users navigating the game library. * feat(controller): enhance game hub visuals and screenshot handling - Added new CSS styles for the game hub, improving layout and visual presentation of game posters and screenshots. - Updated the ControllerGameHub component to utilize local screenshot URLs, enhancing the display of game visuals. - Modified the ControllerLibraryPage to manage and load screenshots dynamically when the game hub is opened. These changes provide a more engaging and visually appealing experience for users interacting with the game hub. * feat(controller): enhance cloud session resume functionality and PS5-style loading visuals - Implemented a PS5-style resume tile in the ControllerLibraryPage, allowing users to continue cloud sessions seamlessly. - Added new CSS styles for cloud session visuals, including a resume badge and loading animations. - Updated the ControllerStreamLoading component to utilize PS5-themed loading indicators, improving the user experience during stream setup. - Enhanced logging for session recovery and connection processes to aid in debugging and user feedback. These changes provide a more engaging and visually appealing experience for users resuming cloud sessions and enhance the overall loading experience. * feat(controller): improve session claim handling and deduplication - Introduced a mechanism to deduplicate concurrent claim/resume calls for the same Cloud session, enhancing performance and user experience. - Added a reference to manage in-flight claim promises, ensuring that multiple requests for the same session are handled efficiently. - Updated the claimAndConnectSession function to utilize the new deduplication logic, improving error handling and session management. These changes streamline the session resume process, reducing unnecessary network calls and improving overall responsiveness during session claims. * feat(controller): enhance in-stream menu functionality and visuals - Integrated new in-stream menu features, allowing users to toggle microphone and adjust stream volume directly from the overlay. - Updated the ControllerGameHub and ControllerLibraryPage components to support in-stream navigation and actions, improving user interaction during streaming sessions. - Added CSS styles for the in-stream overlay, ensuring a visually appealing and functional interface that maintains readability of the underlying game. - Implemented state management for restoring navigation in the in-stream menu, enhancing user experience by preserving context during gameplay. These changes provide a more seamless and engaging experience for users interacting with the in-stream features of the application. * refactor(controller): remove unused stream preset functionality and clean up CSS - Eliminated the handleApplyStreamPreset and handleCycleAspectRatio functions from the App component, streamlining the codebase. - Removed the associated stream preset props from the ControllerLibraryPage component, enhancing clarity and reducing complexity. - Cleaned up CSS by removing the .cis-elapsed class, which was no longer in use, contributing to a more maintainable style sheet. These changes improve code readability and maintainability by removing obsolete features and associated styles. * refactor(controller): remove unused remaining playtime functionality and associated styles - Eliminated the formatRemainingPlaytimeFromSubscription function from the App component, simplifying the codebase. - Removed the remainingPlaytimeText prop from the ControllerInStreamShell component, enhancing clarity and reducing complexity. - Cleaned up CSS by deleting the .cis-remaining class, which was no longer in use, contributing to a more maintainable style sheet. These changes improve code readability and maintainability by removing obsolete features and associated styles.
Chizuui
pushed a commit
to Chizuui/OpenNOW-Modified
that referenced
this pull request
Aug 11, 2026
…penCloudGaming#382) * feat(settings): add controller theme customization options - Introduced new settings for controller theme style and color, allowing users to customize the background visuals in controller mode. - Added functions to normalize and clamp theme color values. - Updated the SettingsManager to handle migrations for the new theme settings. - Enhanced the ControllerLibraryPage to utilize the new theme settings for improved visual consistency. - Updated styles to reflect the new theme options, including multiple preset styles. This enhancement improves user experience by providing more personalization options for the controller interface. * refactor(styles): update theme colors in CSS for improved consistency - Replaced hardcoded color values with theme-based RGB variables for better customization. - Simplified CSS selectors by removing unnecessary classes and consolidating animations. - Enhanced visual elements in the ControllerLibraryPage to align with the new theme settings. These changes improve the maintainability of the styles and ensure a cohesive look across the application. * feat(styles): implement PS5-style layout and animations for game hub - Added new CSS styles for the PS5-themed games hub, including blurred hero art and a horizontal shelf layout. - Enhanced animations for various components within the XMB wrapper to improve visual transitions. - Introduced new class selectors for game items, categories, and menu tiles to align with the PS5 aesthetic. These changes enhance the user interface and provide a more immersive experience for users navigating the game hub. * feat(controller): enhance ControllerLibraryPage with media navigation and parallax effects - Added new icons for category labels to improve visual representation. - Implemented parallax backdrop tiles for a dynamic background experience. - Enhanced navigation logic to support media browsing alongside games. - Updated state management to handle media selection and transitions effectively. These changes enrich the user interface and provide a more engaging experience while navigating the controller library. * feat(controller): enhance PS5 row navigation and detail rail functionality - Introduced state management for PS5 row navigation, allowing transitions between top, main, and detail views. - Added detail rail items for enhanced media and game interaction, improving user engagement. - Updated navigation logic to support new detail rail interactions, including cycling through items and activating selections. - Enhanced CSS styles for PS5 detail cards, improving visual presentation and responsiveness. These changes provide a more dynamic and immersive experience for users navigating the controller library. * feat(controller): refine PS5 row navigation and CSS styles - Enhanced PS5 row navigation logic to conditionally allow transitions between detail and top views based on active states. - Updated CSS styles for improved visual presentation of detail rails and shelf components, including adjustments to opacity and layout. - Improved responsiveness of shelf track elements to enhance user experience during navigation. These changes contribute to a more intuitive and visually appealing interface for users interacting with the controller library. * feat(controller): update PS5 menu styles and navigation logic - Modified CSS styles for the PS5 menu, enhancing the visual presentation with new background and overlay effects. - Improved navigation logic in the ControllerLibraryPage to better handle transitions between top-level and settings submenus. - Introduced new classes for resume tiles, providing a live snapshot feature for current streaming games. These changes enhance the user experience by creating a more visually appealing and intuitive interface for navigating the controller library. * feat(controller): enhance navigation and sorting in ControllerLibraryPage - Introduced library sorting options, allowing users to sort games by recent playtime, alphabetical order, or favorites. - Updated navigation logic to manage state for spotlight and categories, improving user interaction with the game library. - Enhanced audio feedback for navigation actions with adjusted sound profiles. - Refined CSS styles for better visual presentation and responsiveness of the library interface. These changes improve the overall user experience by providing more intuitive navigation and organization within the controller library. * feat(controller): improve shelf navigation and CSS transitions - Added new properties for lazy-loading shelf art to enhance performance during image rendering. - Implemented a function to compute shelf translation for centering active tiles, improving user experience in dual-shelf navigation. - Updated CSS transitions to utilize a variable for consistent timing across components, ensuring a cohesive feel during interactions. These changes enhance the navigation experience and visual consistency within the ControllerLibraryPage. * feat(controller): implement full-screen game hub styles and navigation logic - Added new CSS styles for the full-screen game hub, enhancing the visual layout and user interaction with game tiles and descriptions. - Introduced state management for the game hub, allowing for focused navigation and improved user experience when browsing games. - Updated the ControllerLibraryPage to integrate the game hub functionality, including handling transitions and focus states. These changes provide a more immersive and visually appealing interface for users navigating the game library. * feat(controller): enhance game hub visuals and screenshot handling - Added new CSS styles for the game hub, improving layout and visual presentation of game posters and screenshots. - Updated the ControllerGameHub component to utilize local screenshot URLs, enhancing the display of game visuals. - Modified the ControllerLibraryPage to manage and load screenshots dynamically when the game hub is opened. These changes provide a more engaging and visually appealing experience for users interacting with the game hub. * feat(controller): enhance cloud session resume functionality and PS5-style loading visuals - Implemented a PS5-style resume tile in the ControllerLibraryPage, allowing users to continue cloud sessions seamlessly. - Added new CSS styles for cloud session visuals, including a resume badge and loading animations. - Updated the ControllerStreamLoading component to utilize PS5-themed loading indicators, improving the user experience during stream setup. - Enhanced logging for session recovery and connection processes to aid in debugging and user feedback. These changes provide a more engaging and visually appealing experience for users resuming cloud sessions and enhance the overall loading experience. * feat(controller): improve session claim handling and deduplication - Introduced a mechanism to deduplicate concurrent claim/resume calls for the same Cloud session, enhancing performance and user experience. - Added a reference to manage in-flight claim promises, ensuring that multiple requests for the same session are handled efficiently. - Updated the claimAndConnectSession function to utilize the new deduplication logic, improving error handling and session management. These changes streamline the session resume process, reducing unnecessary network calls and improving overall responsiveness during session claims. * feat(controller): enhance in-stream menu functionality and visuals - Integrated new in-stream menu features, allowing users to toggle microphone and adjust stream volume directly from the overlay. - Updated the ControllerGameHub and ControllerLibraryPage components to support in-stream navigation and actions, improving user interaction during streaming sessions. - Added CSS styles for the in-stream overlay, ensuring a visually appealing and functional interface that maintains readability of the underlying game. - Implemented state management for restoring navigation in the in-stream menu, enhancing user experience by preserving context during gameplay. These changes provide a more seamless and engaging experience for users interacting with the in-stream features of the application. * refactor(controller): remove unused stream preset functionality and clean up CSS - Eliminated the handleApplyStreamPreset and handleCycleAspectRatio functions from the App component, streamlining the codebase. - Removed the associated stream preset props from the ControllerLibraryPage component, enhancing clarity and reducing complexity. - Cleaned up CSS by removing the .cis-elapsed class, which was no longer in use, contributing to a more maintainable style sheet. These changes improve code readability and maintainability by removing obsolete features and associated styles. * refactor(controller): remove unused remaining playtime functionality and associated styles - Eliminated the formatRemainingPlaytimeFromSubscription function from the App component, simplifying the codebase. - Removed the remainingPlaytimeText prop from the ControllerInStreamShell component, enhancing clarity and reducing complexity. - Cleaned up CSS by deleting the .cis-remaining class, which was no longer in use, contributing to a more maintainable style sheet. These changes improve code readability and maintainability by removing obsolete features and associated styles.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This pull request improves controller-mode navigation and personalization in
opennow-stable.Library (Games)
Theme (Settings → System → Theme)
Settings/ main settings merge + normalization on load).--xmb-theme-r/g/b).Files touched
ControllerLibraryPage.tsx,styles.css, sharedgfn.ts,main/settings.ts,App.tsx(pass-through of new settings).Made with Cursor