Fix mouse backward and forward buttons not updating the in-app buttons (

#5242)
FreeTubeApp · Jun 11, 2024 · b9146b1 · b9146b1
1 parent 0050909
commit b9146b1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 60 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -21,9 +21,6 @@ const IpcChannels = {
   OPEN_URL: 'open-url',
   CHANGE_VIEW: 'change-view',
 
-  HISTORY_BACK: 'history-back',
-  HISTORY_FORWARD: 'history-forward',
-
   DB_SETTINGS: 'db-settings',
   DB_HISTORY: 'db-history',
   DB_PROFILES: 'db-profiles',

diff --git a/src/main/index.js b/src/main/index.js
@@ -1494,9 +1494,7 @@ function runApp() {
             click: (_menuItem, browserWindow, _event) => {
               if (browserWindow == null) { return }
 
-              browserWindow.webContents.send(
-                IpcChannels.HISTORY_BACK
-              )
+              browserWindow.webContents.goBack()
             },
             type: 'normal',
           },
@@ -1506,9 +1504,7 @@ function runApp() {
             click: (_menuItem, browserWindow, _event) => {
               if (browserWindow == null) { return }
 
-              browserWindow.webContents.send(
-                IpcChannels.HISTORY_FORWARD
-              )
+              browserWindow.webContents.goForward()
             },
             type: 'normal',
           },

diff --git a/src/renderer/App.js b/src/renderer/App.js
@@ -183,7 +183,6 @@ export default defineComponent({
           ipcRenderer = require('electron').ipcRenderer
           this.setupListenersToSyncWindows()
           this.activateKeyboardShortcuts()
-          this.activateIPCListeners()
           this.openAllLinksExternally()
           this.enableSetSearchQueryText()
           this.enableOpenUrl()
@@ -199,10 +198,6 @@ export default defineComponent({
         }, 500)
       })
 
-      this.$router.afterEach((to, from) => {
-        this.$refs.topNav?.navigateHistory()
-      })
-
       this.$router.onReady(() => {
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
@@ -334,16 +329,6 @@ export default defineComponent({
       })
     },
 
-    activateIPCListeners: function () {
-      // handle menu event updates from main script
-      ipcRenderer.on(IpcChannels.HISTORY_BACK, (_event) => {
-        this.$refs.topNav.historyBack()
-      })
-      ipcRenderer.on(IpcChannels.HISTORY_FORWARD, (_event) => {
-        this.$refs.topNav.historyForward()
-      })
-    },
-
     handleKeyboardShortcuts: function (event) {
       if (event.altKey) {
         switch (event.key) {

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
@@ -17,13 +17,20 @@ export default defineComponent({
     FtProfileSelector
   },
   data: () => {
+    let isArrowBackwardDisabled = true
+    let isArrowForwardDisabled = true
+
+    // If the Navigation API isn't supported (Firefox and Safari)
+    // keep the back and forwards buttons always enabled
+    if (!('navigation' in window)) {
+      isArrowBackwardDisabled = false
+      isArrowForwardDisabled = false
+    }
+
     return {
-      component: this,
       showSearchContainer: true,
-      historyIndex: 1,
-      isForwardOrBack: false,
-      isArrowBackwardDisabled: true,
-      isArrowForwardDisabled: true,
+      isArrowBackwardDisabled,
+      isArrowForwardDisabled,
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
@@ -96,6 +103,14 @@ export default defineComponent({
       return this.$t('Open New Window')
     }
   },
+  watch: {
+    $route: function () {
+      if ('navigation' in window) {
+        this.isArrowForwardDisabled = !window.navigation.canGoForward
+        this.isArrowBackwardDisabled = !window.navigation.canGoBack
+      }
+    }
+  },
   mounted: function () {
     let previousWidth = window.innerWidth
     if (window.innerWidth <= MOBILE_WIDTH_THRESHOLD) {
@@ -295,41 +310,12 @@ export default defineComponent({
       this.showSearchContainer = !this.showSearchContainer
     },
 
-    navigateHistory: function () {
-      if (!this.isForwardOrBack) {
-        this.historyIndex = window.history.length
-        this.isArrowBackwardDisabled = false
-        this.isArrowForwardDisabled = true
-      } else {
-        this.isForwardOrBack = false
-      }
-    },
-
     historyBack: function () {
-      this.isForwardOrBack = true
-      window.history.back()
-
-      if (this.historyIndex > 1) {
-        this.historyIndex--
-        this.isArrowForwardDisabled = false
-        if (this.historyIndex === 1) {
-          this.isArrowBackwardDisabled = true
-        }
-      }
+      this.$router.back()
     },
 
     historyForward: function () {
-      this.isForwardOrBack = true
-      window.history.forward()
-
-      if (this.historyIndex < window.history.length) {
-        this.historyIndex++
-        this.isArrowBackwardDisabled = false
-
-        if (this.historyIndex === window.history.length) {
-          this.isArrowForwardDisabled = true
-        }
-      }
+      this.$router.forward()
     },
 
     toggleSideNav: function () {