diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index 8cd0c57d..c543f5d8 100644 --- a/src/renderer/store/modules/utils.js +++ b/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 }, diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css index c6ad6abd..4255d98b 100644 --- a/src/renderer/views/Trending/Trending.css +++ b/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%; diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js index e576ea8c..45023c12 100644 --- a/src/renderer/views/Trending/Trending.js +++ b/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) { - this.getVideoInformationInvidious() + if (this.trendingCache && this.trendingCache.length > 0) { + this.shownResults = this.trendingCache } else { - switch (this.backendPreference) { - case 'local': - this.getTrendingInfoLocal() - break - case 'invidious': - this.getTrendingInfoInvidious() - break - } + this.getTrendingInfo() } }, 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)') diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue index 54eef065..eed230d6 100644 --- a/src/renderer/views/Trending/Trending.vue +++ b/src/renderer/views/Trending/Trending.vue @@ -13,6 +13,13 @@ :data="shownResults" /> +