1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-21 01:39:04 +02:00
video.js/src/css
Borut Zizmond 21b4a5225b
feat: implement spatial navigation (#8570)
* feat(player): add spatialNavigation feature

Adds spatialNavigation feature to enhance user experience

- Implemented spatial navigation in slider component
- Enhanced player functionality for improved navigation

* feat(player): add spatialNavigation class
Adds spatialNavigation class to manage spatial-navigation-polyfill
- Set class SpatialNavigation on its own file
- Imported SpatialNavigation class on component class

* feat(player): update spatialNavigation 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

* feat(player): modify spatialNavigation class & modify component class
Modify spatialNavigation class:
-Remove unrequired version of function ‘getComponents’
Modify component class:
-Add function ‘getIsFocusable’

* Added methods getPositions, handleFocus and handleBLur for spatial navigation needs

* feat(player): modify Component class, BigPlayButton class & ClickableComponent 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’

* Added import in player.js, Created base methods inside spatial-navigation.js

* feat(player): modify Component class & SpatialNavigation class
Modify Component class:
-Modify method getIsAvailableToBeFocused to be more strict on candidates
Modify spatialNavigation class:
-Modify method getComponents to get all focusable components

* feat(player): modify Component class
Modify Component class:
-Add documentation to ‘isVisible’ function

* added keydown event logic for spatial-navigation

* feat(player): modify SpatialNavigation class
Modify SpatialNavigation class:
-Modify documentation of functions

* feat(player): modify SpatialNavigation class
Modify SpatialNavigation class:
-Add ‘clear’ & ‘remove’ methods

* feat(player): modify SpatialNavigation class
Modify SpatialNavigation class:
-Add documentation of functions

* feat(player): modify SpatialNavigation class
Modify SpatialNavigation class:
-Add function ‘getCurretComponent’‘’

* feat(player): modify SpatialNavigation class
Modify SpatialNavigation class:
-Add documentation for ‘findBestCandidate’ method

* Added logic for moving focus to the best candidate

* Implemented move, findBestCandidate, isInDirection, and calculateDistance methods for spatial navigation logic

* Added a new player option enableKeydownListener, Added gap: 1px to control-bar for spatial-navigation-polyfill needs

* feat(player): modify SpatialNavigation class  & Component class
Modify SpatialNavigation class:
-Add function ‘handlePlayerBlur’
-Add function ‘handlePlayerFocus’
Modify Component class:
-Modify ‘handleBlur’
-Modify ‘handleFocus’

* Removed enableKeydownListener flag, as user should start the SpatialNavigation manually

* Added functionality to track changes in the focusableComponents list (custom event focusableComponentsChanged)

* feat(player): modify SpatialNavigation class, ModalDialog  & Component 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 ModalDialog
Modify ModalDialog:
-Add condition to close Modal on Backspace

* Refactor SpatialNavigation to use player.spatialNavigation

* Added a new custom event endOfFocusableComponents

* Added new styles for focused elements in case spatial navigation is enabled

* feat(player): modify SpatialNavigation class:
-Add condition so getComponents can get as candidates the UI elements from the playlist-ui

* Changed to window.SpatialNabigation to this.player_.spatialNavigation

* feat(player): modify text-track-settings, created test-track-settings-colors.js, text-track-settings-font.js,text-track-fieldset.js & text-track-select.js:
Modify text-track-settings class:
- Add changes so newly created components can work as content of the modal.
- Create new components as a refactor of  the contents of text-track-settings

* changed handleKeyDown inside component.js, getComponents method is now iterating player.children

* feat(player): create TrackSettingsControls Component & Modify TextTrackSettings
Create TrackSettingsControls Component:
-Create Component to show buttons reset & done as components.
Modify TextTrackSettings:
-Add Component TrackSettingsControls in TextTrackSettings

* feat(player): Modify ModalDialog
Modify ModalDialog:
-Add condition for stop propagation of event inside of ModalDialog when spatialNavigation is enabled

* getIsFocusable and getIsAvailableToBeFocused methods are now accepting el as a parameter, added a new methods findSuitableDOMChild and focus for spatialNavigation class

* feat(player): Modify TextTrackSettings:
Modify TextTrackSettings:
-Remove unrequired methods to create DOM elements since now those are created by Components.

* feat(player): Modify CaptionSettingsMenuItem:
Modify CaptionSettingsMenuItem:
-Add condition to focus component of TextTrackSelect when modal is open

* feat(player): Modify TextTrackSelect & TextTrackFieldset:
Modify TextTrackSelect :
Modify TextTrackFieldset:
-Add comments to certain functions to explain the code

* feat(player): Modify TrackSettingsControls:
Modify TrackSettingsControls:
-Remove unrequired comments & add comments to certain functions to explain the code

* feat(player): Modify SpatialNavigation, Component & ModalDialog:
Modify SpatialNavigation:
Modify Component:
Modify ModalDialog:
-Add & update comments of documentation.

* Handle ENTER keydown in Modals when spatial navigation is enabled

* feat(player): Modify ModalDialog, spatialNavigation, TrackSettingsControls, TextTrackFieldset, TextTrackSelect, TrackSettingsColors, TrackSettingsFont:
Modify ModalDialog:
Modify spatialNavigation:
Modify TrackSettingsControls:
Modify TextTrackFieldset:
Modify TextTrackSelect:
Modify TrackSettingsColors:
Modify TrackSettingsFont:
-Add & update comments of documentation.

* Implement additional RCU controls

* feat(player): Modify Component class:
Modify Component :
-Remove unrequired condition inside of handleFocus method.

* feat(player): Modify ModalDialog & CaptionSettingsMenuItem
Modify ModalDialog:
Modify CaptionSettingsMenuItem:
-Modify spatialNavigation condition to be more specific regarding spatialNavigation implementation.

* feat(player): Modify SpatialNavigation class:
Modify SpatialNavigation :
-Fix bug where ‘enter’ press was not working properly on select component inside of the ‘vjs-text-track-settings’ modal.

* feat(player): Modify SpatialNavigation class:
Modify SpatialNavigation :
-Minor improvements on the loops of certain functions to stop when they have found the element they are looking for.
-Implement minor spacing formatting on switch statement.

* Update src/js/component.js

More understandable documentation.

Co-authored-by: Dzianis Dashkevich <98566601+dzianis-dashkevich@users.noreply.github.com>

* Update src/js/component.js

More understandable documentation.

Co-authored-by: Dzianis Dashkevich <98566601+dzianis-dashkevich@users.noreply.github.com>

* feat(player): Modify SpatialNavigation & Component class:
Modify Component class :
Modify SpatialNavigation class :
-Modify ‘getIsFocusable’ function to use ‘this.el_’ instead of ‘el’ parameter

* feat(player): Modify SpatialNavigation class:
Modify SpatialNavigation class :
-Refactor onKeyDown function to use static data & return when pause is true.

* feat(player): Modify SpatialNavigation class:
Modify SpatialNavigation class :
-Refactor to use ‘.el()’ instead of ‘.el_’

* Update src/js/spatial-navigation.js

Co-authored-by: Walter Seymour <walterseymour15@gmail.com>

* feat(player): Modify ModalDialog class & MenuItem class:
Modify ModalDialog class :
Modify MenuItem class :
-Correct typo of ‘isSpatialNavlistening’ to  ‘isSpatialNavListening’.

* removed unused property, remove this.focus, which was added for testing purposes

* Changed parameters to private, removed redundant code, removed initialFocusedComponent parameter, change STEP_SECONDS to static

* feat(player): solve remaining  conflict:
Modify Spatial Navigation class :
- Solve conflict

* feat(player): Rename TrackSettingsColors & TrackSettingsFont

* feat(player): Remove unrequired functions calls from components TextTrackSettingsColors & TextTrackSettingsFont.

* feat(player):  Update spatial-navigation.js's keypress return keyword.

* bind focus and blur just if spatial navigation is enabled, add 1px gap if spatial navigation is enabled

* feat(player): Modify calls on 'isListening' & 'isPaused' for ModalDialog & TextTrackMenuItem

* feat(player): remove unrequired object on component 'TrackSettingsControls'

* Removed 1px gap

* feat(player): Rename function ‘getComponents’ to ‘updateFocusableComponents’

* Changed SpatialNavigation class to extend EventTarget, removed redundant methods for events

* fix(player): fix call of 'getIsAvailableToBeFocused' that was throwing an error.

* removed Static maps for key presses and extended keycode with the missing keys

* refactor(player): Modify functions of 'getIsDisabled', 'getIsExpresslyInert' & 'getIsFocusable' to be more in pair when stablished code of the player.

* Conditional assignment for keycode.codes.back based on platform, changed Backspace to Back key for Modal closing

* Extend the  object for reverse lookup, prenet Up/down keys to open a menu if spatial navigation is anabled

* refactor(player): Refactor 'SpatialNavKeycodes' file to not patch 'keycode' dependency

* fix(pllayer): fix issue related to 'back' not  being used properly in function 'isEventKey'

* feat(player): Rename imports  of 'spatial-navigation-keycode' to have their extension

* feat(player): Add example of use of 'Client app uses a global spatial-navigation solution'

* feat(player): rename 'spatial-navigation-keycode.js' filename

* Fix on src chnage issue, ESC button closing modal, expand vjs-modal-dialog

* change file name and object name

* fix: Update ids of labels to use 'guid' so unit test works properly

* fix: update localized text in text-track-settings-font & text-track-settings

* Mark some methods as private

* fix: modify content of modal 'text-track-settings' to change language properly

* fix: add missing '.' in jsdoc of text-track components

* feature: add unit test for 'text-track-select' component

* Add test for Spatial Navigation

* test(player): Add minor test related to 'handleBlur' & 'handleFocus'

* feat(player): Remove unrequired files from 'react-video-nav-app'

* test(player): Add small test to check if 'getPositions' returns required properties

* test(player): add test to verify 'getPositions()' properties are not empty

* Add missing tests for performMediaAction_ and move

* test(player): add test to for 'component.js' related to 'handleBlur'

* test(player): add minor test in component related to test keypress propagation event

* test(player): add test for component related to 'getIsAvailableToBeFocused' function

* test(player): add test for Modal Dialog related to call function of spatial navigation

* test(player): add tests  for 'spatial-navigation-key-codes'

* test(player): add tests for keycodes related to 'should return event name if keyCode is not available'

* test(player): add minor test for case when not required parametters are passed

* test(player): add test for 'caption-settings-menu-item'

* feat(player): remove 'react-video-nav-app'

* Move handleFocus and handleBlur from components.js to spatial-navigation.js

* refactor(player): refactor 'searchForTrackSelect' to be handled in the spatial navigation

* remove unrequired code in function 'searchForTrackSelect'

* update documentation comment to be in pair to its current use

* remove spatial navigation keydown from modal dialog and move it to spatial navigation class, modify the modal-dialog test accordingly

* remove useless tests

* Remove caption-settings-menu-item.test.js

* Add minor test to 'searchForTrackSelect' in spatial-navigation.test.js

* Add unit test for back key and listening to events

---------

Co-authored-by: CarlosVillasenor <carlosdeveloper9@gmail.com>
Co-authored-by: Dzianis Dashkevich <98566601+dzianis-dashkevich@users.noreply.github.com>
Co-authored-by: Walter Seymour <walterseymour15@gmail.com>
Co-authored-by: Carlos Villasenor Castillo <cvillasenor@Carloss-MacBook-Pro.local>
2024-04-17 19:34:52 -06:00
..
components feat: implement spatial navigation (#8570) 2024-04-17 19:34:52 -06:00
utilities chore: remove legacy prefixes (#8276) 2023-05-31 10:34:01 -04:00
_icons.scss fix(svg-icons): default icons color (#8382) 2023-08-17 21:48:43 +02:00
_print.scss @hartman added default print styling. closes #3304 2016-06-27 23:02:50 -04:00
_private-variables.scss fix icon pos (#5785) 2019-02-11 14:04:17 -05:00
_utilities.scss chore: remove legacy prefixes (#8276) 2023-05-31 10:34:01 -04:00
_variables.scss @gkatsev Use fonts 2.0 that do not require wrapping codepoints. closes #3252 2016-04-13 20:43:51 +02:00
video-js.scss feat: Add useSVGIcons option (#8260) 2023-06-12 13:31:06 -05:00
vjs-cdn.scss @misteroneill added alt css as video-js-cdn.css. closes #3118 2016-02-19 14:17:47 -05:00
vjs.scss @gkatsev Use fonts 2.0 that do not require wrapping codepoints. closes #3252 2016-04-13 20:43:51 +02:00