Skip to content
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.

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

feat: implement spatial navigation #8570

Merged
merged 155 commits into from
Apr 18, 2024

Conversation

bzizmo
Copy link
Contributor

@bzizmo bzizmo commented Jan 25, 2024

Description

This pull request enhances VideoJS by introducing spatial navigation functionality, allowing users to navigate through focusable components within the player using arrow keys.

Spatial Navigation guide videojs/videojs.com#190

Specific Changes proposed

  • Added SpatialNavigation class to manage spatial navigation logic.
  • Implemented getPositions() method in components.js to retrieve component position information.
  • Enhanced focus and blur event handling in components.js.
  • Integrated spatial navigation initialization in player.js.
  • Extended slider navigation capabilities in slider.js.

Requirements Checklist

  • Feature implemented / Bug fixed
  • If necessary, more likely in a feature request than a bug fix
    • Change has been verified in an actual browser (Chrome, Firefox, IE)
    • Unit Tests updated or fixed
    • Docs/guides updated
    • Example created (starter template on JSBin)
  • Reviewed by Two Core Contributors

bzizmo and others added 30 commits November 8, 2023 12:19
Adds spatialNavigation feature to enhance user experience

- Implemented spatial navigation in slider component
- Enhanced player functionality for improved navigation
Adds spatialNavigation class to manage spatial-navigation-polyfill
- Set class SpatialNavigation on its own file
- Imported SpatialNavigation class on component class
Adds 3 methods to spatialNavigation class to manage spatial-navigation-polyfill
- Added start() to: Start listen of keydown events
- Added stop() to: Stop listen key down events
- Added getComponents() to: Get current focusable components
Modify spatialNavigation class:
-Remove unrequired version of function ‘getComponents’
Modify component class:
-Add function ‘getIsFocusable’
…Component class

Modify Component class:
-Add method getIsAvailableToBeFocused
-Modify method getIsFocusable to only focus on finding focusable candidates
Modify spatialNavigation class:
-Remove unrequired method ‘getIsFocusable’
Modify component class:
-Remove unrequired method ‘getIsFocusable’
Modify Component class:
-Modify method getIsAvailableToBeFocused to be more strict on candidates
Modify spatialNavigation class:
-Modify method getComponents to get all focusable components
Modify Component class:
-Add documentation to ‘isVisible’ function
Modify SpatialNavigation class:
-Modify documentation of functions
Modify SpatialNavigation class:
-Add ‘clear’ & ‘remove’ methods
Modify SpatialNavigation class:
-Add documentation of functions
Modify SpatialNavigation class:
-Add function ‘getCurretComponent’‘’
Modify SpatialNavigation class:
-Add documentation for ‘findBestCandidate’ method
…ntrol-bar for spatial-navigation-polyfill needs
Modify SpatialNavigation class:
-Add function ‘handlePlayerBlur’
-Add function ‘handlePlayerFocus’
Modify Component class:
-Modify ‘handleBlur’
-Modify ‘handleFocus’
feat(player): modify SpatialNavigation class  & Component class
… class

Modify SpatialNavigation class:
-Add ‘lastFocusedComponent’
-Add function ‘refocusComponent’
Modify ModalDialog class:
-Add condition on ‘close’ function
Modify Component class:
-Modify ‘handleBlur’ to store blurred component
feat(player): modify SpatialNavigation class, ModalDialog  & Component class
Modify ModalDialog:
-Add condition to close Modal on Backspace
Refactor SpatialNavigation to use player.spatialNavigation
CarlosVillasenor and others added 20 commits April 7, 2024 15:34
Move handleFocus and handleBlur from components.js to spatial-navigation.js
…fortrack

refactor(player): refactor 'searchForTrackSelect' to be handled in the spatial navigation.
…atial navigation class, modify the modal-dialog test accordingly
remove spatial navigation keydown from modal dialog and move it to spatial navigation class, modify the modal-dialog test accordingly
Copy link
Contributor

@wseymour15 wseymour15 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, great work! One nit comment left from me.

@CarlosVillasenor CarlosVillasenor merged commit 21b4a52 into videojs:main Apr 18, 2024
11 checks passed
Copy link

welcome bot commented Apr 18, 2024

Congrats on merging your first pull request! 🎉🎉🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants