diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index c92cdba4..d839ae11 100644 --- a/src/renderer/store/modules/utils.js +++ b/src/renderer/store/modules/utils.js @@ -3,6 +3,7 @@ import FtToastEvents from '../../components/ft-toast/ft-toast-events' const state = { isSideNavOpen: false, sessionSearchHistory: [], + popularCache: undefined, searchSettings: { sortBy: 'relevance', time: '', @@ -42,6 +43,10 @@ const getters = { return state.sessionSearchHistory }, + getPopularCache () { + return state.popularCache + }, + getSearchSettings () { return state.searchSettings } @@ -113,6 +118,10 @@ const mutations = { } }, + setPopularCache (state, value) { + state.popularCache = value + }, + setSearchSortBy (state, value) { state.searchSettings.sortBy = value }, diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css index c6ad6abd..4255d98b 100644 --- a/src/renderer/views/Popular/Popular.css +++ b/src/renderer/views/Popular/Popular.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%; diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js index dc8979d4..bd0f14fb 100644 --- a/src/renderer/views/Popular/Popular.js +++ b/src/renderer/views/Popular/Popular.js @@ -2,13 +2,15 @@ import Vue from 'vue' import FtLoader from '../../components/ft-loader/ft-loader.vue' import FtCard from '../../components/ft-card/ft-card.vue' import FtElementList from '../../components/ft-element-list/ft-element-list.vue' +import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue' export default Vue.extend({ name: 'Popular', components: { 'ft-loader': FtLoader, 'ft-card': FtCard, - 'ft-element-list': FtElementList + 'ft-element-list': FtElementList, + 'ft-icon-button': FtIconButton }, data: function () { return { @@ -16,35 +18,55 @@ export default Vue.extend({ shownResults: [] } }, + computed: { + popularCache: function () { + return this.$store.getters.getPopularCache + } + }, mounted: function () { this.getTrendingInfo() }, methods: { - getTrendingInfo: function () { - this.isLoading = true - + refreshTrendingInfo: async function () { + await this.fetchTrendingInfo() + await this.getTrendingInfo() + }, + fetchTrendingInfo: async function () { const searchPayload = { resource: 'popular', id: '', params: {} } - this.$store.dispatch('invidiousAPICall', searchPayload).then((result) => { - if (!result) { - return - } - - console.log(result) - - const returnData = result.filter((item) => { - return item.type === 'video' || item.type === 'shortVideo' || item.type === 'channel' || item.type === 'playlist' - }) - - this.shownResults = this.shownResults.concat(returnData) - this.isLoading = false - }).catch((err) => { + const result = await this.$store.dispatch('invidiousAPICall', searchPayload).catch((err) => { console.log(err) }) + + if (!result) { + return + } + + console.log(result) + + const returnData = result.filter((item) => { + return item.type === 'video' || item.type === 'shortVideo' || item.type === 'channel' || item.type === 'playlist' + }) + this.$store.commit('setPopularCache', returnData) + return returnData + }, + + getTrendingInfo: async function () { + this.isLoading = true + let data = this.popularCache + if (!data || data.length < 1) { + data = await this.fetchTrendingInfo() + } + if (!data) { + return + } + + this.shownResults = this.shownResults.concat(data) + this.isLoading = false } } }) diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue index c148cd79..3efba2f8 100644 --- a/src/renderer/views/Popular/Popular.vue +++ b/src/renderer/views/Popular/Popular.vue @@ -13,6 +13,12 @@ :data="shownResults" /> +