Add Trending Scraper for Local API

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",

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",

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
+        }
       })
     }
   }