8000 fix(spatial-navigation): keep navigation going when player has an err… · videojs/video.js@76e99b7 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 76e99b7

Browse files
fix(spatial-navigation): keep navigation going when player has an error (#8805)
## Description The bug: Focus is lost when playback error is displayed. This small PR will update the spatial-navigation logic so when the error modal is shown the spatial-navigation will try to focus the components present in the error modal, in most cases this will be the vjs close button. ## Specific Changes proposed Keep navigation working when player shows the error modal by focusing a component in that modal. ## Requirements Checklist - [x] 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](https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0)) - [ ] Has no DOM changes which impact accessiblilty or trigger warnings (e.g. Chrome issues tab) - [ ] Has no changes to JSDoc which cause `npm run docs:api` to error - [ ] Reviewed by Two Core Contributors
1 parent 86d29cd commit 76e99b7

File tree

2 files changed

+25
-3
lines changed

2 files changed

+25
-3
lines changed

src/js/spatial-navigation.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ class SpatialNavigation extends EventTarget {
5656
this.player_.on('modalclose', () => {
5757
this.refocusComponent();
5858
});
59+
this.player_.on('error', () => {
60+
this.focus(this.updateFocusableComponents()[0]);
61+
});
5962
this.player_.on('focusin', this.handlePlayerFocus_.bind(this));
6063
this.player_.on('focusout', this.handlePlayerBlur_.bind(this));
6164
this.isListening_ = true;
@@ -196,7 +199,7 @@ class SpatialNavigation extends EventTarget {
196199
}
197200

198201
if (!(event.currentTarget.contains(event.relatedTarget)) && !isChildrenOfPlayer || !nextFocusedElement) {
199-
if (currentComponent.name() === 'CloseButton') {
202+
if (currentComponent && currentComponent.name() === 'CloseButton') {
200203
this.refocusComponent();
201204
} else {
202205
this.pause();
@@ -307,7 +310,11 @@ class SpatialNavigation extends EventTarget {
307310
return null;
308311
}
309312

310-
return searchForSuitableChild(component.el());
313+
if (component.el()) {
314+
return searchForSuitableChild(component.el());
315+
}
316+
return null;
317+
311318
}
312319

313320
/**
@@ -464,7 +471,7 @@ class SpatialNavigation extends EventTarget {
464471
*/
465472
refocusComponent() {
466473
if (this.lastFocusedComponent_) {
467-
// If use is not active, set it to active.
474+
// If user is not active, set it to active.
468475
if (!this.player_.userActive()) {
469476
this.player_.userActive(true);
470477
}
@@ -492,6 +499,10 @@ class SpatialNavigation extends EventTarget {
492499
* @param {Component} component - The component to be focused.
493500
*/
494501
focus(component) {
502+
if (typeof component !== 'object') {
503+
return;
504+
}
505+
495506
if (component.getIsAvailableToBeFocused(component.el())) {
496507
component.focus();
497508
} else if (this.findSuitableDOMChild(component)) {

test/unit/spatial-navigation.test.js

+11
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ QUnit.test('start method initializes event listeners', function(assert) {
4444
assert.ok(onSpy.calledWith('loadedmetadata'), 'loadedmetadata event listener added');
4545
assert.ok(onSpy.calledWith('modalKeydown'), 'modalKeydown event listener added');
4646
assert.ok(onSpy.calledWith('modalclose'), 'modalclose event listener added');
47+
assert.ok(onSpy.calledWith('error'), 'error event listener added');
4748

4849
// Additionally, check if isListening_ flag is set
4950
assert.ok(this.spatialNav.isListening_, 'isListening_ flag is set');
@@ -491,3 +492,13 @@ QUnit.test('should call `searchForTrackSelect()` if spatial navigation is enable
491492

492493
assert.ok(trackSelectSpy.calledOnce);
493494
});
495+
496+
QUnit.test('error on player calls updateFocusableComponents', function(assert) {
497+
const updateFocusableComponentsSpy = sinon.spy(this.spatialNav, 'updateFocusableComponents');
498+
499+
this.spatialNav.start();
500+
501+
this.player.error('Error 1');
502+
503+
assert.ok(updateFocusableComponentsSpy.calledOnce, 'on error event spatial navigation should call "updateFocusableComponents"');
504+
});

0 commit comments

Comments
 (0)
0