fix(spatial-navigation): keep navigation going when player has an error

videojs · Jul 19, 2024 · 4fa9f8b · 4fa9f8b
1 parent e78bcc7
commit 4fa9f8b
Showing 1 changed file with 17 additions and 7 deletions.
diff --git a/src/js/spatial-navigation.js b/src/js/spatial-navigation.js
@@ -56,6 +56,10 @@ class SpatialNavigation extends EventTarget {
     this.player_.on('modalclose', () => {
       this.refocusComponent();
     });
+    this.player_.on('error', () => {
+      // focus vjs close button when error modal appears
+      this.focus(this.updateFocusableComponents()[0]);
+    });
     this.player_.on('focusin', this.handlePlayerFocus_.bind(this));
     this.player_.on('focusout', this.handlePlayerBlur_.bind(this));
     this.isListening_ = true;
@@ -196,7 +200,7 @@ class SpatialNavigation extends EventTarget {
     }
 
     if (!(event.currentTarget.contains(event.relatedTarget)) && !isChildrenOfPlayer || !nextFocusedElement) {
-      if (currentComponent.name() === 'CloseButton') {
+      if (currentComponent && currentComponent.name() === 'CloseButton') {
         this.refocusComponent();
       } else {
         this.pause();
@@ -307,7 +311,11 @@ class SpatialNavigation extends EventTarget {
       return null;
     }
 
-    return searchForSuitableChild(component.el());
+    if (component.el()) {
+      return searchForSuitableChild(component.el());
+    }
+    return null;
+
   }
 
   /**
@@ -464,7 +472,7 @@ class SpatialNavigation extends EventTarget {
    */
   refocusComponent() {
     if (this.lastFocusedComponent_) {
-      // If use is not active, set it to active.
+      // If user is not active, set it to active.
       if (!this.player_.userActive()) {
         this.player_.userActive(true);
       }
@@ -492,10 +500,12 @@ class SpatialNavigation extends EventTarget {
    * @param {Component} component - The component to be focused.
    */
   focus(component) {
-    if (component.getIsAvailableToBeFocused(component.el())) {
-      component.focus();
-    } else if (this.findSuitableDOMChild(component)) {
-      this.findSuitableDOMChild(component).focus();
+    if (component) {
+      if (component.getIsAvailableToBeFocused(component.el())) {
+        component.focus();
+      } else if (this.findSuitableDOMChild(component)) {
+        this.findSuitableDOMChild(component).focus();
+      }
     }
   }