* Make channel page remember last query string only when going back

PikachuEXE · Sep 3, 2024 · 2f8fa91 · 2f8fa91
1 parent d7ce328
commit 2f8fa91
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 10 deletions.
diff --git a/src/renderer/components/ChannelDetails/ChannelDetails.vue b/src/renderer/components/ChannelDetails/ChannelDetails.vue
@@ -206,6 +206,7 @@
           v-if="showSearchBar"
           ref="searchBar"
           :placeholder="$t('Channel.Search Channel')"
+          :value="props.query"
           :show-clear-text-button="true"
           class="channelSearch"
           :maxlength="255"
@@ -274,7 +275,11 @@ const props = defineProps({
   currentTab: {
     type: String,
     default: 'videos'
-  }
+  },
+  query: {
+    type: String,
+    default: ''
+  },
 })
 
 const emit = defineEmits(['change-tab', 'search'])

diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
@@ -41,6 +41,7 @@ import {
   parseLocalSubscriberCount,
   getLocalArtistTopicChannelReleasesContinuation
 } from '../../helpers/api/local'
+import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 
 export default defineComponent({
   name: 'Channel',
@@ -57,6 +58,7 @@ export default defineComponent({
   },
   data: function () {
     return {
+      skipRouteChangeWatcherOnce: false,
       isLoading: true,
       isElementListLoading: false,
       currentTab: 'videos',
@@ -281,6 +283,10 @@ export default defineComponent({
   watch: {
     $route() {
       // react to route changes...
+      if (this.skipRouteChangeWatcherOnce) {
+        this.skipRouteChangeWatcherOnce = false
+        return
+      }
       this.isLoading = true
 
       if (this.$route.query.url) {
@@ -337,8 +343,9 @@ export default defineComponent({
 
       // Re-enable auto refresh on sort value change AFTER update done
       if (!process.env.SUPPORTS_LOCAL_API || this.backendPreference === 'invidious') {
-        this.getChannelInfoInvidious()
-        this.autoRefreshOnSortByChangeEnabled = true
+        this.getChannelInfoInvidious().finally(() => {
+          this.autoRefreshOnSortByChangeEnabled = true
+        })
       } else {
         this.getChannelLocal().finally(() => {
           this.autoRefreshOnSortByChangeEnabled = true
@@ -415,9 +422,9 @@ export default defineComponent({
       }
     }
   },
-  mounted: function () {
+  mounted: async function () {
     if (this.$route.query.url) {
-      this.resolveChannelUrl(this.$route.query.url, this.$route.params.currentTab)
+      await this.resolveChannelUrl(this.$route.query.url, this.$route.params.currentTab)
       return
     }
 
@@ -433,13 +440,19 @@ export default defineComponent({
 
     // Enable auto refresh on sort value change AFTER initial update done
     if (!process.env.SUPPORTS_LOCAL_API || this.backendPreference === 'invidious') {
-      this.getChannelInfoInvidious()
-      this.autoRefreshOnSortByChangeEnabled = true
+      await this.getChannelInfoInvidious().finally(() => {
+        this.autoRefreshOnSortByChangeEnabled = true
+      })
     } else {
-      this.getChannelLocal().finally(() => {
+      await this.getChannelLocal().finally(() => {
         this.autoRefreshOnSortByChangeEnabled = true
       })
     }
+
+    const oldQuery = this.$route.query.searchQueryText ?? ''
+    if (oldQuery !== null && oldQuery !== '') {
+      this.newSearch(oldQuery)
+    }
   },
   methods: {
     resolveChannelUrl: async function (url, tab = undefined) {
@@ -963,7 +976,7 @@ export default defineComponent({
       this.channelInstance = null
 
       const expectedId = this.id
-      invidiousGetChannelInfo(this.id).then((response) => {
+      return invidiousGetChannelInfo(this.id).then((response) => {
         if (expectedId !== this.id) {
           return
         }
@@ -1850,6 +1863,10 @@ export default defineComponent({
           break
       }
     },
+    newSearchWithStatePersist(query) {
+      this.saveStateInRouter(query)
+      this.newSearch(query)
+    },
 
     searchChannelLocal: async function () {
       const isNewSearch = this.searchContinuationData === null
@@ -1941,6 +1958,35 @@ export default defineComponent({
       })
     },
 
+    async saveStateInRouter(query) {
+      this.skipRouteChangeWatcherOnce = true
+      if (query === '') {
+        await this.$router.replace({ path: `/channel/${this.id}` }).catch(failure => {
+          if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+            return
+          }
+
+          throw failure
+        })
+        return
+      }
+
+      await this.$router.replace({
+        path: `/channel/${this.id}`,
+        query: {
+          currentTab: 'search',
+          searchQueryText: query,
+        },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          return
+        }
+
+        throw failure
+      })
+      this.skipRouteChangeWatcherOnce = false
+    },
+
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([

diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
@@ -17,9 +17,10 @@
       :is-subscribed="isSubscribed"
       :visible-tabs="tabInfoValues"
       :current-tab="currentTab"
+      :query="lastSearchQuery"
       class="card channelDetails"
       @change-tab="changeTab"
-      @search="newSearch"
+      @search="(v) => newSearchWithStatePersist(v)"
     />
     <ft-card
       v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"