Add caching for trending videos

src/renderer/store/modules/utils.js

@@ -4,6 +4,7 @@ const state = {
   isSideNavOpen: false,
   sessionSearchHistory: [],
   popularCache: null,
+  trendingCache: null,
   searchSettings: {
     sortBy: 'relevance',
     time: '',
@@ -47,6 +48,10 @@ const getters = {
     return state.popularCache
   },
 
+  getTrendingCache () {
+    return state.trendingCache
+  },
+
   getSearchSettings () {
     return state.searchSettings
   }
@@ -122,6 +127,10 @@ const mutations = {
     state.popularCache = value
   },
 
+  setTrendingCache (state, value) {
+    state.trendingCache = value
+  },
+
   setSearchSortBy (state, value) {
     state.searchSettings.sortBy = value
   },

src/renderer/views/Trending/Trending.css

@@ -4,6 +4,12 @@
   margin-bottom: 60px;
 }
 
+.floatingTopButton {
+  position: absolute;
+  top: 70px;
+  right: 10px;
+}
+
 @media only screen and (max-width: 680px) {
   .card {
     width: 90%;

src/renderer/views/Trending/Trending.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
+import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 
 import ytrend from 'yt-trending-scraper'
 
@@ -10,7 +11,8 @@ export default Vue.extend({
   components: {
     'ft-card': FtCard,
     'ft-loader': FtLoader,
-    'ft-element-list': FtElementList
+    'ft-element-list': FtElementList,
+    'ft-icon-button': FtIconButton
   },
   data: function () {
     return {
@@ -30,23 +32,34 @@ export default Vue.extend({
     },
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
+    },
+    trendingCache () {
+      return this.$store.getters.getTrendingCache
     }
   },
   mounted: function () {
-    if (!this.usingElectron) {
+    if (this.trendingCache && this.trendingCache.length > 0) {
-      this.getVideoInformationInvidious()
+      this.shownResults = this.trendingCache
     } else {
-      switch (this.backendPreference) {
+      this.getTrendingInfo()
-        case 'local':
-          this.getTrendingInfoLocal()
-          break
-        case 'invidious':
-          this.getTrendingInfoInvidious()
-          break
-      }
     }
   },
   methods: {
+    getTrendingInfo () {
+      if (!this.usingElectron) {
+        this.getVideoInformationInvidious()
+      } else {
+        switch (this.backendPreference) {
+          case 'local':
+            this.getTrendingInfoLocal()
+            break
+          case 'invidious':
+            this.getTrendingInfoInvidious()
+            break
+        }
+      }
+    },
+
     getTrendingInfoLocal: function () {
       this.isLoading = true
 
@@ -59,6 +72,7 @@ export default Vue.extend({
 
         this.shownResults = this.shownResults.concat(returnData)
         this.isLoading = false
+        this.$store.commit('setTrendingCache', this.shownResults)
       }).catch((err) => {
         console.log(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
@@ -102,6 +116,7 @@ export default Vue.extend({
 
         this.shownResults = this.shownResults.concat(returnData)
         this.isLoading = false
+        this.$store.commit('setTrendingCache', this.shownResults)
       }).catch((err) => {
         console.log(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')

src/renderer/views/Trending/Trending.vue

@@ -13,6 +13,13 @@
         :data="shownResults"
       />
     </ft-card>
+    <ft-icon-button
+      icon="sync"
+      class="floatingTopButton"
+      :size="12"
+      theme="primary"
+      @click="getTrendingInfo"
+    />
   </div>
 </template>