Fix the trending and watch pages swallowing the arrow key events (#3170)

* Fix the trending page swallowing the arrow key events * Fix the watch page too
FreeTubeApp · Feb 10, 2023 · a26c8e0 · a26c8e0
1 parent 4c65982
commit a26c8e0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js
@@ -1838,8 +1838,11 @@ export default defineComponent({
     },
 
     // This function should always be at the bottom of this file
+    /**
+     * @param {KeyboardEvent} event
+     */
     keyboardShortcutHandler: function (event) {
-      if (document.activeElement.classList.contains('ft-input')) {
+      if (document.activeElement.classList.contains('ft-input') || event.altKey) {
         return
       }
 

diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
@@ -69,9 +69,16 @@ export default defineComponent({
       }
     },
 
-    focusTab: function (tab) {
-      this.$refs[tab].focus()
-      this.$emit('showOutlines')
+    /**
+     * @param {KeyboardEvent} event
+     * @param {string} tab
+     */
+    focusTab: function (event, tab) {
+      if (!event.altKey) {
+        event.preventDefault()
+        this.$refs[tab].focus()
+        this.$emit('showOutlines')
+      }
     },
 
     getTrendingInfo: function () {

diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
@@ -24,8 +24,8 @@
           :class="{ selectedTab: currentTab === 'default' }"
           @click="changeTab('default')"
           @keydown.space.enter.prevent="changeTab('default')"
-          @keydown.left.prevent="focusTab('movies')"
-          @keydown.right.prevent="focusTab('music')"
+          @keydown.left="focusTab($event, 'movies')"
+          @keydown.right="focusTab($event, 'music')"
         >
           {{ $t("Trending.Default").toUpperCase() }}
         </div>
@@ -39,8 +39,8 @@
           :class="{ selectedTab: currentTab === 'music' }"
           @click="changeTab('music')"
           @keydown.space.enter.prevent="changeTab('music')"
-          @keydown.left.prevent="focusTab('default')"
-          @keydown.right.prevent="focusTab('gaming')"
+          @keydown.left="focusTab($event, 'default')"
+          @keydown.right="focusTab($event, 'gaming')"
         >
           {{ $t("Trending.Music").toUpperCase() }}
         </div>
@@ -54,8 +54,8 @@
           :class="{ selectedTab: currentTab === 'gaming' }"
           @click="changeTab('gaming')"
           @keydown.space.enter.prevent="changeTab('gaming')"
-          @keydown.left.prevent="focusTab('music')"
-          @keydown.right.prevent="focusTab('movies')"
+          @keydown.left="focusTab($event, 'music')"
+          @keydown.right="focusTab($event, 'movies')"
         >
           {{ $t("Trending.Gaming").toUpperCase() }}
         </div>
@@ -69,8 +69,8 @@
           :class="{ selectedTab: currentTab === 'movies' }"
           @click="changeTab('movies')"
           @keydown.space.enter.prevent="changeTab('movies')"
-          @keydown.left.prevent="focusTab('gaming')"
-          @keydown.right.prevent="focusTab('default')"
+          @keydown.left="focusTab($event, 'gaming')"
+          @keydown.right="focusTab($event, 'default')"
         >
           {{ $t("Trending.Movies").toUpperCase() }}
         </div>