Skip to content

Implement Big Picture Mode with controller support and TV-optimized UI #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
Copilot wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Implement Big Picture Mode with controller support and TV-optimized UI #73

Copilot wants to merge 6 commits into from

Conversation

Copy link
Contributor

Copilot AI commented Dec 31, 2025 •
edited
Loading

Summary

  • Implements controller-friendly full-screen interface for couch gaming with Xbox/PlayStation gamepad support, haptic feedback, on-screen keyboard, and multi-monitor detection

Core Components

Controller Integration

  • useGamepadNavigation hook: Polls Gamepad API at 60fps, handles button mapping and haptic feedback via Vibration API
  • Default Xbox/PlayStation button layouts with customizable remapping
  • Proper cleanup to prevent fullscreen conflicts across components via useFullscreenMode hook

UI Components

  • BigPictureModePage: Main grid view with dynamic column calculation (auto-scales 3-6 columns based on viewport)
  • BigPictureDownloadsPage: Real-time download monitoring with controller navigation
  • OnScreenKeyboard: QWERTY layout with D-pad/analog stick navigation, memoized handlers to prevent stale closures

State Management

  • bigPictureSlice: Persists button mappings, haptic settings, grid size preferences, and detected monitor count
  • Multi-monitor detection via Screen Management API with graceful fallback

Settings Integration

  • Big Picture toggle and configuration in main settings page
  • Monitor selection UI (when multiple displays detected)
  • Grid size and haptic feedback controls

Testing

  • TypeScript type checks pass
  • ESLint validation complete
  • Builds successfully for production
  • All useEffect dependencies properly declared
  • Functions memoized with useCallback where appropriate

Checklist

  • Added a semantic version comment to this PR using /semver: patch, /semver: minor, or /semver: major. (See template for examples)
  • Confirmed workflows and automation updates (if any) have appropriate permissions.
Original prompt

This section details on the original issue you should resolve

<issue_title>This issue tracks planned enhancements for Big Picture Mode beyond the MVP implementation</issue_title>
<issue_description>

Input & Controls

  • Test with physical Xbox/PlayStation controllers
  • Add haptic feedback support (if controller supports it)
  • Customizable button mappings
  • Page/shoulder button scrolling

UI/UX Features

  • Implement on-screen keyboard component for text input
  • Add search functionality in Big Picture mode
  • Add downloads/queue view with progress bars
  • Add complete settings page within Big Picture
  • Add boxart/metadata display from Crocdb in grid
  • Dynamic grid calculation based on screen size

System Integration

  • Multi-monitor awareness and selection

Priority Labels

Suggest adding labels: enhancement, big-picture-mode, tracking-issue
</issue_description>

<agent_instructions>Implement this features to production level caring for code quality and industry standard patterns</agent_instructions>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 5 commits December 31, 2025 12:04
@luandev
Implement core Big Picture Mode infrastructure
2d8fac1 
- Add useGamepadNavigation hook for Xbox/PlayStation controller support
- Create BigPictureStore slice for settings management
- Implement OnScreenKeyboard component for text input
- Build BigPictureModePage with controller-friendly navigation
- Add haptic feedback support for supported controllers
- Integrate Big Picture mode into settings page
- Support dynamic grid sizing based on screen resolution
- Add fullscreen API integration

Co-authored-by: luandev <6452989+luandev@users.noreply.github.com>
@luandev
Add Big Picture downloads view and multi-monitor support
c930da0 
- Create BigPictureDownloadsPage for controller-friendly downloads view
- Add multi-monitor detection and selection
- Integrate downloads page into Big Picture menu
- Update settings page with monitor selection
- Add route for /big-picture/downloads

Co-authored-by: luandev <6452989+luandev@users.noreply.github.com>
@luandev
Add Big Picture Mode documentation and polish
81081f3 
- Create comprehensive BIG_PICTURE_MODE.md documentation
- Add controller setup and usage guide
- Document all keyboard and controller mappings
- Include troubleshooting section
- Add performance optimization notes
- Update main README with Big Picture Mode feature highlight

Co-authored-by: luandev <6452989+luandev@users.noreply.github.com>
@luandev
Address code review feedback and refactor
f82b1dc 
- Remove duplicate assignment in useGamepadNavigation
- Fix isExtended API call to use method instead of property
- Create useFullscreenMode hook to reduce duplication
- Fix fullscreen cleanup to only exit if component entered it
- Add missing dependencies to OnScreenKeyboard useEffect
- Improve error handling in monitor detection

Co-authored-by: luandev <6452989+luandev@users.noreply.github.com>
@luandev
Fix remaining code review issues
184b056 
- Refactor gamepad polling to properly include all dependencies
- Add useCallback to OnScreenKeyboard functions to prevent recreation
- Fix focusedCol dependency in normalization effect
- Simplify polling logic by removing intermediate ref
- Improve memoization to avoid stale closures

Co-authored-by: luandev <6452989+luandev@users.noreply.github.com>
Copilot AI changed the title [WIP] Add enhancements for Big Picture Mode features Implement Big Picture Mode with controller support and TV-optimized UI Dec 31, 2025
Copilot AI requested a review from luandev December 31, 2025 12:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@luandev luandev Awaiting requested review from luandev

Assignees

@luandev luandev

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

This issue tracks planned enhancements for Big Picture Mode beyond the MVP implementation

2 participants

@luandev