2020-02-16 19:30:00 +01:00
|
|
|
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'
|
2020-08-22 22:37:09 +02:00
|
|
|
import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
|
2020-02-16 19:30:00 +01:00
|
|
|
|
2020-08-09 22:14:51 +02:00
|
|
|
import ytrend from 'yt-trending-scraper'
|
|
|
|
|
2020-02-16 19:30:00 +01:00
|
|
|
export default Vue.extend({
|
|
|
|
name: 'Trending',
|
|
|
|
components: {
|
|
|
|
'ft-card': FtCard,
|
|
|
|
'ft-loader': FtLoader,
|
2020-08-22 22:37:09 +02:00
|
|
|
'ft-element-list': FtElementList,
|
|
|
|
'ft-icon-button': FtIconButton
|
2020-02-16 19:30:00 +01:00
|
|
|
},
|
|
|
|
data: function () {
|
|
|
|
return {
|
|
|
|
isLoading: false,
|
|
|
|
shownResults: []
|
|
|
|
}
|
|
|
|
},
|
2020-08-09 22:14:51 +02:00
|
|
|
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
|
2020-08-22 22:37:09 +02:00
|
|
|
},
|
|
|
|
trendingCache () {
|
|
|
|
return this.$store.getters.getTrendingCache
|
2020-08-09 22:14:51 +02:00
|
|
|
}
|
|
|
|
},
|
2020-02-16 19:30:00 +01:00
|
|
|
mounted: function () {
|
2020-08-22 22:37:09 +02:00
|
|
|
if (this.trendingCache && this.trendingCache.length > 0) {
|
|
|
|
this.shownResults = this.trendingCache
|
2020-08-09 22:14:51 +02:00
|
|
|
} else {
|
2020-08-22 22:37:09 +02:00
|
|
|
this.getTrendingInfo()
|
2020-08-09 22:14:51 +02:00
|
|
|
}
|
2020-02-16 19:30:00 +01:00
|
|
|
},
|
|
|
|
methods: {
|
2020-08-22 22:37:09 +02:00
|
|
|
getTrendingInfo () {
|
|
|
|
if (!this.usingElectron) {
|
|
|
|
this.getVideoInformationInvidious()
|
|
|
|
} else {
|
|
|
|
switch (this.backendPreference) {
|
|
|
|
case 'local':
|
|
|
|
this.getTrendingInfoLocal()
|
|
|
|
break
|
|
|
|
case 'invidious':
|
|
|
|
this.getTrendingInfoInvidious()
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-08-09 22:14:51 +02:00
|
|
|
getTrendingInfoLocal: function () {
|
2020-02-16 19:30:00 +01:00
|
|
|
this.isLoading = true
|
|
|
|
|
2020-08-09 22:14:51 +02:00
|
|
|
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
|
2020-08-22 22:37:09 +02:00
|
|
|
this.$store.commit('setTrendingCache', this.shownResults)
|
2020-08-09 22:14:51 +02:00
|
|
|
}).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 = {
|
2020-02-16 19:30:00 +01:00
|
|
|
resource: 'trending',
|
|
|
|
id: '',
|
|
|
|
params: {}
|
|
|
|
}
|
|
|
|
|
2020-08-09 22:14:51 +02:00
|
|
|
this.$store.dispatch('invidiousAPICall', trendingPayload).then((result) => {
|
2020-02-16 19:30:00 +01:00
|
|
|
if (!result) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(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
|
2020-08-22 22:37:09 +02:00
|
|
|
this.$store.commit('setTrendingCache', this.shownResults)
|
2020-02-16 19:30:00 +01:00
|
|
|
}).catch((err) => {
|
|
|
|
console.log(err)
|
2020-08-09 22:14:51 +02:00
|
|
|
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
|
|
|
|
}
|
2020-02-16 19:30:00 +01:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|