diff --git a/package-lock.json b/package-lock.json index 6f359876..33cd3838 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20088,6 +20088,14 @@ } } }, + "yt-trending-scraper": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/yt-trending-scraper/-/yt-trending-scraper-1.0.2.tgz", + "integrity": "sha512-dRX7MZ00TM1q/lKE5cCUqmcdeSsrQ25n+OvBfVKeP3INsuW/myJyLZcJHbAG2u/Cz6Nfq4FIqzuzaEs4Lzhkbw==", + "requires": { + "axios": "^0.19.2" + } + }, "yt-xml2vtt": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/yt-xml2vtt/-/yt-xml2vtt-1.1.1.tgz", diff --git a/package.json b/package.json index 4e9fad5a..74f88189 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "youtube-comments-task": "^1.3.15", "youtube-suggest": "^1.1.0", "yt-channel-info": "^1.0.3", + "yt-trending-scraper": "^1.0.2", "yt-xml2vtt": "^1.1.1", "ytdl-core": "^3.2.0", "ytpl": "^0.2.4", diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js index cdc5127c..e576ea8c 100644 --- a/src/renderer/views/Trending/Trending.js +++ b/src/renderer/views/Trending/Trending.js @@ -3,6 +3,8 @@ 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 ytrend from 'yt-trending-scraper' + export default Vue.extend({ name: 'Trending', components: { @@ -16,20 +18,78 @@ export default Vue.extend({ shownResults: [] } }, + computed: { + usingElectron: function () { + return this.$store.getters.getUsingElectron + }, + backendPreference: function () { + return this.$store.getters.getBackendPreference + }, + backendFallback: function () { + return this.$store.getters.getBackendFallback + }, + invidiousInstance: function () { + return this.$store.getters.getInvidiousInstance + } + }, mounted: function () { - this.getTrendingInfo() + if (!this.usingElectron) { + this.getVideoInformationInvidious() + } else { + switch (this.backendPreference) { + case 'local': + this.getTrendingInfoLocal() + break + case 'invidious': + this.getTrendingInfoInvidious() + break + } + } }, methods: { - getTrendingInfo: function () { + getTrendingInfoLocal: function () { this.isLoading = true - const searchPayload = { + console.log('getting local trending') + + ytrend.scrape_trending_page().then((result) => { + const returnData = result.filter((item) => { + return item.type === 'video' || item.type === 'channel' || item.type === 'playlist' + }) + + this.shownResults = this.shownResults.concat(returnData) + this.isLoading = false + }).catch((err) => { + console.log(err) + const errorMessage = this.$t('Local API Error (Click to copy)') + this.showToast({ + message: `${errorMessage}: ${err}`, + time: 10000, + action: () => { + navigator.clipboard.writeText(err) + } + }) + if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback)) { + this.showToast({ + message: this.$t('Falling back to Invidious API') + }) + this.getTrendingInfoInvidious() + } else { + this.isLoading = false + } + }) + }, + + getTrendingInfoInvidious: function () { + this.isLoading = true + + const trendingPayload = { resource: 'trending', id: '', params: {} } - this.$store.dispatch('invidiousAPICall', searchPayload).then((result) => { + this.$store.dispatch('invidiousAPICall', trendingPayload).then((result) => { if (!result) { return } @@ -44,6 +104,23 @@ export default Vue.extend({ this.isLoading = false }).catch((err) => { console.log(err) + const errorMessage = this.$t('Invidious API Error (Click to copy)') + this.showToast({ + message: `${errorMessage}: ${err}`, + time: 10000, + action: () => { + navigator.clipboard.writeText(err) + } + }) + + if (!this.usingElectron || (this.backendPreference === 'invidious' && this.backendFallback)) { + this.showToast({ + message: this.$t('Falling back to Local API') + }) + this.getTrendingInfoLocal() + } else { + this.isLoading = false + } }) } }