From 739dddf74cbe45827808c4ca9ee0e1352c7f12ef Mon Sep 17 00:00:00 2001 From: Mykyta Poturai Date: Thu, 13 Aug 2020 17:26:20 +0300 Subject: [PATCH 1/4] Add caching for popular videos Also add the button to refresh the cache --- src/renderer/store/modules/utils.js | 9 ++++ src/renderer/views/Popular/Popular.css | 6 +++ src/renderer/views/Popular/Popular.js | 58 ++++++++++++++++++-------- src/renderer/views/Popular/Popular.vue | 6 +++ 4 files changed, 61 insertions(+), 18 deletions(-) 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" /> + From 5bc2e70e88da155eaed5ac5afdc01e6d0a988e9b Mon Sep 17 00:00:00 2001 From: Mykyta Poturai Date: Tue, 18 Aug 2020 18:51:56 +0300 Subject: [PATCH 2/4] Refactor popular page --- src/renderer/store/modules/utils.js | 2 +- src/renderer/views/Popular/Popular.js | 30 +++++++++----------------- src/renderer/views/Popular/Popular.vue | 3 ++- 3 files changed, 13 insertions(+), 22 deletions(-) diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index d839ae11..8cd0c57d 100644 --- a/src/renderer/store/modules/utils.js +++ b/src/renderer/store/modules/utils.js @@ -3,7 +3,7 @@ import FtToastEvents from '../../components/ft-toast/ft-toast-events' const state = { isSideNavOpen: false, sessionSearchHistory: [], - popularCache: undefined, + popularCache: null, searchSettings: { sortBy: 'relevance', time: '', diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js index bd0f14fb..cd80eeab 100644 --- a/src/renderer/views/Popular/Popular.js +++ b/src/renderer/views/Popular/Popular.js @@ -24,12 +24,14 @@ export default Vue.extend({ } }, mounted: function () { - this.getTrendingInfo() + this.shownResults = this.popularCache + if (!this.shownResults || this.shownResults.length < 1) { + this.fetchTrendingInfo() + } }, methods: { - refreshTrendingInfo: async function () { - await this.fetchTrendingInfo() - await this.getTrendingInfo() + refreshTrendingInfo: function () { + this.fetchTrendingInfo() }, fetchTrendingInfo: async function () { const searchPayload = { @@ -38,35 +40,23 @@ export default Vue.extend({ params: {} } + this.isLoading = true const result = await this.$store.dispatch('invidiousAPICall', searchPayload).catch((err) => { console.log(err) }) if (!result) { + this.isLoading = false return } console.log(result) - const returnData = result.filter((item) => { + this.shownResults = 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 + this.$store.commit('setPopularCache', this.shownResults) } } }) diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue index 3efba2f8..d16346c9 100644 --- a/src/renderer/views/Popular/Popular.vue +++ b/src/renderer/views/Popular/Popular.vue @@ -16,7 +16,8 @@ From 60a315f360dd3f9a794addacb49a632eec4ff6d5 Mon Sep 17 00:00:00 2001 From: Mykyta Poturai Date: Sat, 22 Aug 2020 23:10:52 +0300 Subject: [PATCH 3/4] Refactor popular page V2 --- src/renderer/views/Popular/Popular.js | 7 ++----- src/renderer/views/Popular/Popular.vue | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js index cd80eeab..e45b4a9c 100644 --- a/src/renderer/views/Popular/Popular.js +++ b/src/renderer/views/Popular/Popular.js @@ -26,14 +26,11 @@ export default Vue.extend({ mounted: function () { this.shownResults = this.popularCache if (!this.shownResults || this.shownResults.length < 1) { - this.fetchTrendingInfo() + this.fetchPopularInfo() } }, methods: { - refreshTrendingInfo: function () { - this.fetchTrendingInfo() - }, - fetchTrendingInfo: async function () { + fetchPopularInfo: async function () { const searchPayload = { resource: 'popular', id: '', diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue index d16346c9..b133588f 100644 --- a/src/renderer/views/Popular/Popular.vue +++ b/src/renderer/views/Popular/Popular.vue @@ -17,8 +17,8 @@ icon="sync" class="floatingTopButton" :size="12" - :theme="primary" - @click="refreshTrendingInfo" + theme="primary" + @click="fetchPopularInfo" /> From 69dada2df48e87140d2d5f9b2d7a27d25e6c279a Mon Sep 17 00:00:00 2001 From: Mykyta Poturai Date: Sat, 22 Aug 2020 23:37:09 +0300 Subject: [PATCH 4/4] Add caching for trending videos --- src/renderer/store/modules/utils.js | 9 ++++++ src/renderer/views/Trending/Trending.css | 6 ++++ src/renderer/views/Trending/Trending.js | 37 +++++++++++++++++------- src/renderer/views/Trending/Trending.vue | 7 +++++ 4 files changed, 48 insertions(+), 11 deletions(-) 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" /> +