Fix prev/next browser actions

client/src/components/Pagination.vue

@@ -1,14 +1,14 @@
 <template>
 
   <div class="pagination" v-if="searchDone">
-    <router-link class="previous" v-bind:class="{ 'none-opacity': currentPage === 1 }" :to="{ query: buildPageUrlQuery(currentPage - 1) }">
+    <router-link class="previous" v-bind:class="{ 'none-opacity': value === 1 }" :to="{ query: buildPageUrlQuery(value - 1) }">
       <translate>Previous page</translate>
     </router-link>
 
     <div class="pages">
       <template v-for="page in pages">
 
-        <router-link v-if="page !== currentPage" class="go-to-page" :to="{ query: buildPageUrlQuery(page) }" :key="page">
+        <router-link v-if="page !== value" class="go-to-page" :to="{ query: buildPageUrlQuery(page) }" :key="page">
           {{ page }}
         </router-link>
 
@@ -17,7 +17,7 @@
       </template>
     </div>
 
-    <router-link class="next" v-bind:class="{ 'none-opacity': currentPage >= maxPage }" :to="{ query: buildPageUrlQuery(+currentPage + 1) }">
+    <router-link class="next" v-bind:class="{ 'none-opacity': value >= maxPage }" :to="{ query: buildPageUrlQuery(+value + 1) }">
       <translate>Next page</translate>
     </router-link>
   </div>
@@ -71,7 +71,7 @@
     props: {
       maxPage: Number,
       searchDone: Boolean,
-      currentPage: Number,
+      value: Number,
       pages: Array as () => number[]
     },
 

client/src/views/Search.vue

@@ -177,7 +177,7 @@
           <channel-result v-else v-bind:channel="result"></channel-result>
         </div>
 
-        <pagination v-bind:maxPage="getMaxPage()" v-bind:searchDone="searchDone" v-bind:currentPage="currentPage" v-bind:pages="pages"></pagination>
+        <pagination v-bind:maxPage="getMaxPage()" v-bind:searchDone="searchDone" v-model="currentPage" v-bind:pages="pages"></pagination>
       </div>
     </main>
   </div>
@@ -472,7 +472,8 @@
       this.indexedInstancesUrl = config.indexedInstancesUrl
       this.indexName = config.searchInstanceName
 
-      if (this.loadUrl()) {
+      if (Object.keys(this.$route.query).length !== 0) {
+        this.loadUrl()
         this.doSearch()
       }
     },
@@ -480,15 +481,13 @@
     watch: {
       // For pagination change
       $route(to, from) {
-        if (!this.searchDone) return
-
         const urlPage = this.$route.query.page
 
-        if (urlPage && parseInt(urlPage) !== this.currentPage) {
-          this.loadUrl()
-          this.doSearch(false)
-          this.scrollToResults()
-        }
+        const scrollToResults = urlPage && parseInt(urlPage) !== this.currentPage
+
+        this.loadUrl()
+        this.doSearch()
+        if (scrollToResults) this.scrollToResults()
       },
 
       formSort () {
@@ -618,18 +617,16 @@
 
     methods: {
 
-      doNewSearch (updateUrl = true) {
+      doNewSearch () {
         this.currentPage = 1
         this.channelsCount = null
         this.videosCount = null
         this.resultsCount = null
 
-        return this.doSearch(updateUrl)
+        this.updateUrl()
       },
 
-      async doSearch (updateUrl = true) {
-        if (updateUrl) this.updateUrl()
-
+      async doSearch () {
         this.results = []
 
         Nprogress.start()
@@ -699,25 +696,42 @@
 
       loadUrl () {
         const query = this.$route.query as SearchUrl & { page: number }
-        if (Object.keys(query).length === 0) return false
 
         if (query.search) this.formSearch = query.search
+        else this.formSearch = undefined
+
         if (query.nsfw) this.formNSFW = query.nsfw
+        else this.formNSFW = undefined
+
         if (query.publishedDateRange) this.formPublishedDateRange = query.publishedDateRange
+        else this.formPublishedDateRange = undefined
+
         if (query.durationRange) this.formDurationRange = query.durationRange
+        else this.formDurationRange = undefined
+
         if (query.categoryOneOf) this.formCategoryOneOf = query.categoryOneOf
+        else this.formCategoryOneOf = undefined
+
         if (query.licenceOneOf) this.formLicenceOneOf = query.licenceOneOf
+        else this.formLicenceOneOf = undefined
+
         if (query.languageOneOf) this.formLanguageOneOf = query.languageOneOf
+        else this.formLanguageOneOf = undefined
+
         if (query.tagsAllOf) this.formTagsAllOf = extractTagsFromQuery(query.tagsAllOf)
+        else this.formTagsAllOf = []
+
         if (query.tagsOneOf) this.formTagsOneOf = extractTagsFromQuery(query.tagsOneOf)
+        else this.formTagsOneOf = []
 
         if (query.sort) this.formSort = query.sort
+        else this.formSort = '-match'
 
         if (query.page && this.currentPage !== query.page) {
           this.currentPage = parseInt(query.page + '')
+        } else {
+          this.currentPage = 1
         }
-
-        return true
       },
 
       buildVideoSearchQuery () {