Make a single IPC call for the navigation history

src/constants.js

@@ -5,10 +5,7 @@ const IpcChannels = {
   OPEN_EXTERNAL_LINK: 'open-external-link',
   GET_SYSTEM_LOCALE: 'get-system-locale',
   GET_PICTURES_PATH: 'get-pictures-path',
-  GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX: 'get-navigation-history-entry-at-index',
-  GET_NAV_HISTORY_ACTIVE_INDEX: 'get-navigation-history-active-index',
-  GET_NAV_HISTORY_LENGTH: 'get-navigation-history-length',
-  GO_TO_NAV_HISTORY_OFFSET: 'go-to-navigation-history-index',
+  GET_NAVIGATION_HISTORY: 'get-navigation-history',
   SHOW_OPEN_DIALOG: 'show-open-dialog',
   SHOW_SAVE_DIALOG: 'show-save-dialog',
   STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',

src/main/index.js

@@ -898,20 +898,37 @@ function runApp() {
 
   // #region navigation history
 
-  ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, ({ sender }, offset) => {
-    sender.navigationHistory.goToOffset(offset)
-  })
+  const NAV_HISTORY_DISPLAY_LIMIT = 15
+  // Math.trunc but with a bitwise OR so that it can be calcuated at build time and the number inlined
+  const HALF_OF_NAV_HISTORY_DISPLAY_LIMIT = (NAV_HISTORY_DISPLAY_LIMIT / 2) | 0
 
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
-    return sender.navigationHistory.getEntryAtIndex(index)?.title
-  })
+  ipcMain.handle(IpcChannels.GET_NAVIGATION_HISTORY, ({ sender }) => {
+    const activeIndex = sender.navigationHistory.getActiveIndex()
+    const length = sender.navigationHistory.length()
 
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
-    return sender.navigationHistory.getActiveIndex()
-  })
+    let end
+
+    if (activeIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT) {
+      end = Math.min(length - 1, NAV_HISTORY_DISPLAY_LIMIT - 1)
+    } else if (length - activeIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT + 1) {
+      end = length - 1
+    } else {
+      end = activeIndex + HALF_OF_NAV_HISTORY_DISPLAY_LIMIT
+    }
+
+    const dropdownOptions = []
+
+    for (let index = end; index >= Math.max(0, end + 1 - NAV_HISTORY_DISPLAY_LIMIT); --index) {
+      const routeLabel = sender.navigationHistory.getEntryAtIndex(index)?.title
+
+      dropdownOptions.push({
+        label: routeLabel,
+        value: index - activeIndex,
+        active: index === activeIndex
+      })
+    }
 
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
-    return sender.navigationHistory.length()
+    return dropdownOptions
   })
 
   // #endregion navigation history

src/renderer/App.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
+import { mapActions, mapMutations } from 'vuex'
 import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue'
 import TopNav from './components/top-nav/top-nav.vue'
 import SideNav from './components/SideNav/SideNav.vue'
@@ -82,7 +82,7 @@ export default defineComponent({
     },
     windowTitle: function () {
       const routePath = this.$route.path
-      if (!routePath.startsWith('/channel/') && !routePath.startsWith('/watch/') && !routePath.startsWith('/hashtag/') && !routePath.startsWith('/playlist/')) {
+      if (!routePath.startsWith('/channel/') && !routePath.startsWith('/watch/') && !routePath.startsWith('/hashtag/') && !routePath.startsWith('/playlist/') && !routePath.startsWith('/search/')) {
         let title = translateWindowTitle(this.$route.meta.title)
         if (!title) {
           title = packageDetails.productName
@@ -574,14 +574,17 @@ export default defineComponent({
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',
       'fetchInvidiousInstancesFromFile',
-      'setAppTitle',
       'setRandomCurrentInvidiousInstance',
       'setupListenersToSyncWindows',
       'updateBaseTheme',
       'updateMainColor',
       'updateSecColor',
       'showOutlines',
       'hideOutlines',
+    ]),
+
+    ...mapMutations([
+      'setAppTitle'
     ])
   }
 })

src/renderer/components/top-nav/top-nav.js

@@ -11,9 +11,6 @@ import { translateWindowTitle } from '../../helpers/strings'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
 import { getInvidiousSearchSuggestions } from '../../helpers/api/invidious'
 
-const NAV_HISTORY_DISPLAY_LIMIT = 15
-const HALF_OF_NAV_HISTORY_DISPLAY_LIMIT = Math.floor(NAV_HISTORY_DISPLAY_LIMIT / 2)
-
 export default defineComponent({
   name: 'TopNav',
   components: {
@@ -38,6 +35,8 @@ export default defineComponent({
       isArrowForwardDisabled,
       navigationHistoryDropdownActiveEntry: null,
       navigationHistoryDropdownOptions: [],
+      isLoadingNavigationHistory: false,
+      pendingNavigationHistoryLabel: null,
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
@@ -343,52 +342,29 @@ export default defineComponent({
       this.showSearchContainer = !this.showSearchContainer
     },
 
-    getNavigationHistoryResultEndIndex: function (navigationHistoryActiveIndex, navigationHistoryLength) {
-      if (navigationHistoryActiveIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT) {
-        return Math.min(navigationHistoryLength - 1, NAV_HISTORY_DISPLAY_LIMIT - 1)
-      } else if (navigationHistoryLength - navigationHistoryActiveIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT + 1) {
-        return navigationHistoryLength - 1
-      } else {
-        return navigationHistoryActiveIndex + HALF_OF_NAV_HISTORY_DISPLAY_LIMIT
-      }
-    },
+    setNavigationHistoryDropdownOptions: async function() {
+      if (process.env.IS_ELECTRON) {
+        this.isLoadingNavigationHistory = true
+        const { ipcRenderer } = require('electron')
 
-    getNavigationHistoryDropdownOptions: async function (ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength) {
-      const dropdownOptions = []
-      const end = this.getNavigationHistoryResultEndIndex(navigationHistoryActiveIndex, navigationHistoryLength)
-
-      for (let index = end; index >= Math.max(0, end + 1 - NAV_HISTORY_DISPLAY_LIMIT); --index) {
-        const routeLabel = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, index)
-        const isActiveIndex = index === navigationHistoryActiveIndex
-        const dropdownOption = {
-          label: routeLabel,
-          value: index - navigationHistoryActiveIndex,
-          active: isActiveIndex
-        }
+        const dropdownOptions = await ipcRenderer.invoke(IpcChannels.GET_NAVIGATION_HISTORY)
 
-        dropdownOptions.push(dropdownOption)
+        const activeEntry = dropdownOptions.find(option => option.active)
 
-        if (isActiveIndex) {
-          this.navigationHistoryDropdownActiveEntry = dropdownOption
+        if (this.pendingNavigationHistoryLabel) {
+          activeEntry.label = this.pendingNavigationHistoryLabel
         }
-      }
-      return dropdownOptions
-    },
 
-    setNavigationHistoryDropdownOptions: async function() {
-      if (process.env.IS_ELECTRON) {
-        const { ipcRenderer } = require('electron')
-        const navigationHistoryLength = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_LENGTH)
-        const navigationHistoryActiveIndex = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX)
-
-        this.navigationHistoryDropdownOptions = await this.getNavigationHistoryDropdownOptions(ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength)
+        this.navigationHistoryDropdownOptions = dropdownOptions
+        this.navigationHistoryDropdownActiveEntry = activeEntry
+        this.isLoadingNavigationHistory = false
       }
     },
 
     goToOffset: function (offset) {
-      if (process.env.IS_ELECTRON) {
-        const { ipcRenderer } = require('electron')
-        ipcRenderer.send(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, offset)
+      // no point navigating to the current route
+      if (offset !== 0) {
+        this.$router.go(offset)
       }
     },
 
@@ -427,11 +403,11 @@ export default defineComponent({
       this.$refs.searchInput.updateInputData(text)
     },
     setActiveNavigationHistoryEntryTitle(value) {
-      this.$nextTick(() => {
-        if (this.navigationHistoryDropdownActiveEntry?.label) {
-          this.navigationHistoryDropdownActiveEntry.label = value
-        }
-      })
+      if (this.isLoadingNavigationHistory) {
+        this.pendingNavigationHistoryLabel = value
+      } else if (this.navigationHistoryDropdownActiveEntry) {
+        this.navigationHistoryDropdownActiveEntry.label = value
+      }
     },
 
     ...mapActions([

src/renderer/store/modules/utils.js

@@ -799,11 +799,6 @@ const actions = {
       ipcRenderer.send(IpcChannels.OPEN_IN_EXTERNAL_PLAYER, { executable, args })
     }
   },
-
-  // Use this to set the app title / document.title
-  setAppTitle({ commit }, title) {
-    commit('setAppTitle', title)
-  }
 }
 
 const mutations = {
@@ -968,6 +963,7 @@ const mutations = {
     state.externalPlayerCmdArguments = value
   },
 
+  // Use this to set the app title / document.title
   setAppTitle (state, value) {
     state.appTitle = value
   },

src/renderer/views/Channel/Channel.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
+import { mapActions, mapMutations } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -1994,13 +1994,16 @@ export default defineComponent({
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([
-      'setAppTitle',
       'showOutlines',
       'updateSubscriptionDetails',
       'updateSubscriptionVideosCacheByChannel',
       'updateSubscriptionLiveCacheByChannel',
       'updateSubscriptionShortsCacheWithChannelPageShorts',
       'updateSubscriptionPostsCacheByChannel'
+    ]),
+
+    ...mapMutations([
+      'setAppTitle'
     ])
   }
 })

src/renderer/views/Hashtag/Hashtag.vue

@@ -108,7 +108,7 @@ async function getHashtag() {
   } else {
     await getInvidiousHashtag(hashtagInRoute)
   }
-  store.dispatch('setAppTitle', `${hashtag.value} - ${packageDetails.productName}`)
+  store.commit('setAppTitle', `${hashtag.value} - ${packageDetails.productName}`)
 }
 
 /**

src/renderer/views/Playlist/Playlist.js

@@ -645,10 +645,10 @@ export default defineComponent({
       'updatePlaylist',
       'updateUserPlaylistSortOrder',
       'removeVideo',
-      'setAppTitle'
     ]),
 
     ...mapMutations([
+      'setAppTitle',
       'setCachedPlaylist'
     ])
   }

src/renderer/views/Post.vue

@@ -76,7 +76,7 @@ async function loadDataInvidiousAsync() {
   post.value = await getInvidiousCommunityPost(id.value, authorId.value)
   authorId.value = post.value.authorId
 
-  store.dispatch('setAppTitle', `${post.value.author} - ${packageDetails.productName}`)
+  store.commit('setAppTitle', `${post.value.author} - ${packageDetails.productName}`)
   isLoading.value = false
 
   // If the authorId is missing from the URL we should add it,

src/renderer/views/Search/Search.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
+import { mapMutations } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/FtElementList/FtElementList.vue'
@@ -345,7 +345,7 @@ export default defineComponent({
       }
     },
 
-    ...mapActions([
+    ...mapMutations([
       'setAppTitle',
     ]),
   }

src/renderer/views/Watch/Watch.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
+import { mapActions, mapMutations } from 'vuex'
 import shaka from 'shaka-player'
 import { Utils, YTNodes } from 'youtubei.js'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
@@ -1671,12 +1671,15 @@ export default defineComponent({
     },
 
     ...mapActions([
-      'setAppTitle',
       'updateHistory',
       'updateWatchProgress',
       'updateLastViewedPlaylist',
       'updatePlaylistLastPlayedAt',
       'updateSubscriptionDetails',
+    ]),
+
+    ...mapMutations([
+      'setAppTitle'
     ])
   }
 })