Skip to content

Commit

Permalink
fix: ensure spatial navigation starts without error without an ErrorD… (
Browse files Browse the repository at this point in the history
#8830)

…isplay component

## Description
By default a Video.js player has an ErrorDisplay, but in the event it is
created without one, an error will be thrown when starting spatial
navigation.

## Specific Changes proposed
Only add an event listener to `player.errorDisplay` if it exists.

## Requirements Checklist
- [x] Feature implemented / Bug fixed
- [ ] If necessary, more likely in a feature request than a bug fix
- [x] Change has been verified in an actual browser (Chrome, Firefox,
IE)
  - [x] Unit Tests updated or fixed
  - [ ] Docs/guides updated
- [ ] Example created ([starter template on
JSBin](https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0))
- [x] Has no DOM changes which impact accessiblilty or trigger warnings
(e.g. Chrome issues tab)
  - [x] Has no changes to JSDoc which cause `npm run docs:api` to error
- [ ] Reviewed by Two Core Contributors
  • Loading branch information
mister-ben committed Aug 22, 2024
1 parent 65f8546 commit 73db132
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 14 deletions.
30 changes: 16 additions & 14 deletions src/js/spatial-navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,25 +59,27 @@ class SpatialNavigation extends EventTarget {
this.player_.on('focusin', this.handlePlayerFocus_.bind(this));
this.player_.on('focusout', this.handlePlayerBlur_.bind(this));
this.isListening_ = true;
this.player_.errorDisplay.on('aftermodalfill', () => {
this.updateFocusableComponents();
if (this.player_.errorDisplay) {
this.player_.errorDisplay.on('aftermodalfill', () => {
this.updateFocusableComponents();

if (this.focusableComponents.length) {
// The modal has focusable components:
if (this.focusableComponents.length) {
// The modal has focusable components:

if (this.focusableComponents.length > 1) {
// The modal has close button + some additional buttons.
// Focusing first additional button:
if (this.focusableComponents.length > 1) {
// The modal has close button + some additional buttons.
// Focusing first additional button:

this.focusableComponents[1].focus();
} else {
// The modal has only close button,
// Focusing it:
this.focusableComponents[1].focus();
} else {
// The modal has only close button,
// Focusing it:

this.focusableComponents[0].focus();
this.focusableComponents[0].focus();
}
}
}
});
});
}
}

/**
Expand Down
8 changes: 8 additions & 0 deletions test/unit/spatial-navigation.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -612,3 +612,11 @@ QUnit.test('If component passes the required functions it should be added to foc
assert.strictEqual(this.spatialNav.focusableComponents.length, 1, 'focusableComponents array should have 1 component');
assert.strictEqual(this.spatialNav.focusableComponents[0].name_, 'firstComponent', 'the name of the component in focusableComponents array should be "firstComponent"');
});

QUnit.test('Doesn\'t error if no ErrorDisplay component is present', function(assert) {
this.player.errorDisplay.dispose();
delete this.player.errorDisplay;

this.spatialNav.start();
assert.ok(true, 'started without throwing when errorDisplay not present');
});

0 comments on commit 73db132

Please sign in to comment.