From dada396e6d6ebbd703330cae50ffc8a66aa3c46d Mon Sep 17 00:00:00 2001
From: cvillasenor <carlosdeveloper9@gmail.com>
Date: Mon, 15 Apr 2024 15:22:39 -0600
Subject: [PATCH 1/2] refactor(player): refactor 'searchForTrackSelect' to be
 handled in the spatial navigation

---
 .../caption-settings-menu-item.js             | 27 -------------------
 src/js/spatial-navigation.js                  | 26 ++++++++++++++++++
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/js/control-bar/text-track-controls/caption-settings-menu-item.js b/src/js/control-bar/text-track-controls/caption-settings-menu-item.js
index 2977b01f86..fdd128a2e5 100644
--- a/src/js/control-bar/text-track-controls/caption-settings-menu-item.js
+++ b/src/js/control-bar/text-track-controls/caption-settings-menu-item.js
@@ -53,33 +53,6 @@ class CaptionSettingsMenuItem extends TextTrackMenuItem {
    */
   handleClick(event) {
     this.player().getChild('textTrackSettings').open();
-
-    const spatialNavigation = this.player_.spatialNavigation;
-    const isSpatialNavListening = spatialNavigation && spatialNavigation.isListening_ && !spatialNavigation.isPaused_;
-
-    if (isSpatialNavListening) {
-      this.searchForTrackSelect();
-    }
-  }
-
-  /**
-   * This gets called by 'handleClick' if 'spatialNavigation' is enabled.
-   * Searches for the first 'TextTrackSelect' inside of modal to focus.
-   */
-  searchForTrackSelect() {
-    const spatialNavigation = this.player().spatialNavigation;
-    let componentToFocus = null;
-
-    for (const component of (spatialNavigation.updateFocusableComponents())) {
-      if (component.constructor.name === 'TextTrackSelect') {
-        componentToFocus = component;
-        break;
-      }
-    }
-
-    if (componentToFocus) {
-      spatialNavigation.focus(componentToFocus);
-    }
   }
 
   /**
diff --git a/src/js/spatial-navigation.js b/src/js/spatial-navigation.js
index 91c475cde7..65dea76adf 100644
--- a/src/js/spatial-navigation.js
+++ b/src/js/spatial-navigation.js
@@ -175,6 +175,11 @@ class SpatialNavigation extends EventTarget {
 
     if (nextFocusedElement) {
       isChildrenOfPlayer = Boolean(nextFocusedElement.closest('.video-js'));
+
+      // If nextFocusedElement is the 'TextTrackSettings' component
+      if (nextFocusedElement.classList.contains('vjs-text-track-settings') && !this.isPaused_) {
+        this.searchForTrackSelect();
+      }
     }
 
     if (!(event.currentTarget.contains(event.relatedTarget)) && !isChildrenOfPlayer || !nextFocusedElement) {
@@ -184,6 +189,7 @@ class SpatialNavigation extends EventTarget {
         this.pause();
 
         if (currentComponent && currentComponent.el()) {
+          // Store last focused component
           this.lastFocusedComponent_ = currentComponent;
         }
       }
@@ -517,6 +523,26 @@ class SpatialNavigation extends EventTarget {
 
     return distance;
   }
+
+  /**
+   * This gets called by 'handleClick' if 'spatialNavigation' is enabled.
+   * Searches for the first 'TextTrackSelect' inside of modal to focus.
+   */
+  searchForTrackSelect() {
+    const spatialNavigation = this;
+    let componentToFocus = null;
+
+    for (const component of (spatialNavigation.updateFocusableComponents())) {
+      if (component.constructor.name === 'TextTrackSelect') {
+        componentToFocus = component;
+        break;
+      }
+    }
+
+    if (componentToFocus) {
+      spatialNavigation.focus(componentToFocus);
+    }
+  }
 }
 
 export default SpatialNavigation;

From c89b7cd756bf8be694bd772575ca515ff5b5cf3a Mon Sep 17 00:00:00 2001
From: cvillasenor <carlosdeveloper9@gmail.com>
Date: Tue, 16 Apr 2024 08:52:50 -0600
Subject: [PATCH 2/2] remove unrequired code in function 'searchForTrackSelect'

---
 src/js/spatial-navigation.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/js/spatial-navigation.js b/src/js/spatial-navigation.js
index 65dea76adf..ec0860c514 100644
--- a/src/js/spatial-navigation.js
+++ b/src/js/spatial-navigation.js
@@ -530,18 +530,13 @@ class SpatialNavigation extends EventTarget {
    */
   searchForTrackSelect() {
     const spatialNavigation = this;
-    let componentToFocus = null;
 
     for (const component of (spatialNavigation.updateFocusableComponents())) {
       if (component.constructor.name === 'TextTrackSelect') {
-        componentToFocus = component;
+        spatialNavigation.focus(component);
         break;
       }
     }
-
-    if (componentToFocus) {
-      spatialNavigation.focus(componentToFocus);
-    }
   }
 }