Add shortcuts for refresh buttons on Subscription, Trending, and Popular views (FreeTubeApp#2689)

* add shortcut to subscription refresh button

* add shortcut to most popular refresh button

* add shortcut to trending refresh button

* prevent refresh if currently loading

Author: Aiz0

src/renderer/views/Popular/Popular.js

@@ -25,11 +25,16 @@ export default Vue.extend({
     }
   },
   mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
+
     this.shownResults = this.popularCache
     if (!this.shownResults || this.shownResults.length < 1) {
       this.fetchPopularInfo()
     }
   },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     fetchPopularInfo: async function () {
       const searchPayload = {
@@ -56,6 +61,21 @@ export default Vue.extend({
       this.$store.commit('setPopularCache', this.shownResults)
     },
 
+    // This function should always be at the bottom of this file
+    keyboardShortcutHandler: function (event) {
+      if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
+        return
+      }
+      switch (event.key) {
+        case 'r':
+        case 'R':
+          if (!this.isLoading) {
+            this.fetchPopularInfo()
+          }
+          break
+      }
+    },
+
     ...mapActions([
       'invidiousAPICall'
     ])

src/renderer/views/Subscriptions/Subscriptions.js

@@ -98,6 +98,8 @@ export default Vue.extend({
     }
   },
   mounted: async function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
+
     this.isLoading = true
     const dataLimit = sessionStorage.getItem('subscriptionLimit')
     if (dataLimit !== null) {
@@ -132,6 +134,9 @@ export default Vue.extend({
       this.isLoading = false
     }
   },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     goToChannel: function (id) {
       this.$router.push({ path: `/channel/${id}` })
@@ -471,6 +476,21 @@ export default Vue.extend({
       sessionStorage.setItem('subscriptionLimit', this.dataLimit)
     },
 
+    // This function should always be at the bottom of this file
+    keyboardShortcutHandler: function (event) {
+      if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
+        return
+      }
+      switch (event.key) {
+        case 'r':
+        case 'R':
+          if (!this.isLoading) {
+            this.getSubscriptions()
+          }
+          break
+      }
+    },
+
     ...mapActions([
       'showToast',
       'invidiousAPICall',

src/renderer/views/Trending/Trending.js

@@ -42,12 +42,17 @@ export default Vue.extend({
     }
   },
   mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
+
     if (this.trendingCache[this.currentTab] && this.trendingCache[this.currentTab].length > 0) {
       this.getTrendingInfoCache()
     } else {
       this.getTrendingInfo()
     }
   },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     changeTab: function (tab) {
       this.currentTab = tab
@@ -125,7 +130,6 @@ export default Vue.extend({
         })
       })
     },
-
     getTrendingInfoInvidious: function () {
       this.isLoading = true
 
@@ -176,6 +180,21 @@ export default Vue.extend({
       })
     },
 
+    // This function should always be at the bottom of this file
+    keyboardShortcutHandler: function (event) {
+      if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
+        return
+      }
+      switch (event.key) {
+        case 'r':
+        case 'R':
+          if (!this.isLoading) {
+            this.getTrendingInfo()
+          }
+          break
+      }
+    },
+
     ...mapActions([
       'showToast',
       'invidiousAPICall',