2020-02-16 19:30:00 +01:00
|
|
|
import Vue from 'vue'
|
2020-09-07 00:12:25 +02:00
|
|
|
import { mapActions } from 'vuex'
|
2020-02-16 19:30:00 +01:00
|
|
|
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'
|
2021-08-21 23:08:38 +02:00
|
|
|
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
|
2020-02-16 19:30:00 +01:00
|
|
|
|
2021-08-21 23:08:38 +02:00
|
|
|
import $ from 'jquery'
|
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,
|
2021-08-21 23:08:38 +02:00
|
|
|
'ft-icon-button': FtIconButton,
|
|
|
|
'ft-flex-box': FtFlexBox
|
2020-02-16 19:30:00 +01:00
|
|
|
},
|
|
|
|
data: function () {
|
|
|
|
return {
|
|
|
|
isLoading: false,
|
2021-08-21 23:08:38 +02:00
|
|
|
shownResults: [],
|
|
|
|
currentTab: 'default',
|
|
|
|
tabInfoValues: [
|
|
|
|
'default',
|
|
|
|
'music',
|
|
|
|
'gaming',
|
|
|
|
'movies'
|
|
|
|
]
|
2020-02-16 19:30:00 +01:00
|
|
|
}
|
|
|
|
},
|
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
|
|
|
|
},
|
2021-07-03 03:55:56 +02:00
|
|
|
currentInvidiousInstance: function () {
|
|
|
|
return this.$store.getters.getCurrentInvidiousInstance
|
2020-08-22 22:37:09 +02:00
|
|
|
},
|
2020-10-22 20:56:49 +02:00
|
|
|
region: function () {
|
|
|
|
return this.$store.getters.getRegion.toUpperCase()
|
|
|
|
},
|
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 () {
|
2021-08-21 23:08:38 +02:00
|
|
|
if (this.trendingCache[this.currentTab] && this.trendingCache[this.currentTab].length > 0) {
|
2022-04-09 21:34:55 +02:00
|
|
|
this.getTrendingInfoCache()
|
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: {
|
2021-08-21 23:08:38 +02:00
|
|
|
changeTab: function (tab, event) {
|
|
|
|
if (event instanceof KeyboardEvent) {
|
|
|
|
if (event.key === 'Tab') {
|
|
|
|
return
|
|
|
|
} else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
|
|
|
|
// navigate trending tabs with arrow keys
|
|
|
|
const index = this.tabInfoValues.indexOf(tab)
|
|
|
|
// tabs wrap around from leftmost to rightmost, and vice versa
|
|
|
|
tab = (event.key === 'ArrowLeft')
|
|
|
|
? this.tabInfoValues[(index > 0 ? index : this.tabInfoValues.length) - 1]
|
|
|
|
: this.tabInfoValues[(index + 1) % this.tabInfoValues.length]
|
|
|
|
|
|
|
|
const tabNode = $(`#${tab}Tab`)
|
|
|
|
event.target.setAttribute('tabindex', '-1')
|
|
|
|
tabNode.attr('tabindex', '0')
|
|
|
|
tabNode[0].focus()
|
|
|
|
}
|
|
|
|
|
|
|
|
event.preventDefault()
|
|
|
|
if (event.key !== 'Enter' && event.key !== ' ') {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const currentTabNode = $('.trendingInfoTabs > .tab[aria-selected="true"]')
|
|
|
|
const newTabNode = $(`#${tab}Tab`)
|
|
|
|
|
|
|
|
// switch selectability from currently focused tab to new tab
|
|
|
|
$('.trendingInfoTabs > .tab[tabindex="0"]').attr('tabindex', '-1')
|
|
|
|
newTabNode.attr('tabindex', '0')
|
|
|
|
|
|
|
|
currentTabNode.attr('aria-selected', 'false')
|
|
|
|
newTabNode.attr('aria-selected', 'true')
|
|
|
|
this.currentTab = tab
|
2022-04-09 21:34:55 +02:00
|
|
|
if (this.trendingCache[this.currentTab] && this.trendingCache[this.currentTab].length > 0) {
|
|
|
|
this.getTrendingInfoCache()
|
|
|
|
} else {
|
|
|
|
this.getTrendingInfo()
|
|
|
|
}
|
2021-08-21 23:08:38 +02:00
|
|
|
},
|
|
|
|
|
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')
|
2021-05-18 20:59:23 +02:00
|
|
|
const param = {
|
|
|
|
parseCreatorOnRise: false,
|
2021-08-21 23:08:38 +02:00
|
|
|
page: this.currentTab,
|
2021-05-18 20:59:23 +02:00
|
|
|
geoLocation: this.region
|
|
|
|
}
|
|
|
|
|
|
|
|
ytrend.scrape_trending_page(param).then((result) => {
|
2020-08-09 22:14:51 +02:00
|
|
|
const returnData = result.filter((item) => {
|
|
|
|
return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
|
|
|
|
})
|
|
|
|
|
2020-08-24 23:52:39 +02:00
|
|
|
this.shownResults = returnData
|
2020-08-09 22:14:51 +02:00
|
|
|
this.isLoading = false
|
2022-04-09 21:34:55 +02:00
|
|
|
const currentTab = this.currentTab
|
|
|
|
this.$store.commit('setTrendingCache', { value: returnData, page: currentTab })
|
2021-08-21 23:08:38 +02:00
|
|
|
}).then(() => {
|
|
|
|
document.querySelector(`#${this.currentTab}Tab`).focus()
|
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
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
2022-04-09 21:34:55 +02:00
|
|
|
getTrendingInfoCache: function() {
|
|
|
|
this.isLoading = true
|
|
|
|
setTimeout(() => {
|
|
|
|
this.shownResults = this.trendingCache[this.currentTab]
|
|
|
|
this.isLoading = false
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
2020-08-09 22:14:51 +02:00
|
|
|
getTrendingInfoInvidious: function () {
|
|
|
|
this.isLoading = true
|
|
|
|
|
|
|
|
const trendingPayload = {
|
2020-02-16 19:30:00 +01:00
|
|
|
resource: 'trending',
|
|
|
|
id: '',
|
2020-10-22 22:59:16 +02:00
|
|
|
params: { region: this.region }
|
2020-02-16 19:30:00 +01:00
|
|
|
}
|
|
|
|
|
2021-08-21 23:08:38 +02:00
|
|
|
if (this.currentTab !== 'default') {
|
|
|
|
trendingPayload.params.type = this.currentTab.charAt(0).toUpperCase() + this.currentTab.slice(1)
|
|
|
|
}
|
|
|
|
|
2021-05-22 01:56:32 +02:00
|
|
|
this.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'
|
|
|
|
})
|
|
|
|
|
2020-08-24 23:52:39 +02:00
|
|
|
this.shownResults = returnData
|
2020-02-16 19:30:00 +01:00
|
|
|
this.isLoading = false
|
2022-04-09 21:34:55 +02:00
|
|
|
const currentTab = this.currentTab
|
|
|
|
this.$store.commit('setTrendingCache', { value: returnData, page: currentTab })
|
2021-08-21 23:08:38 +02:00
|
|
|
}).then(() => {
|
|
|
|
document.querySelector(`#${this.currentTab}Tab`).focus()
|
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({
|
2020-09-07 00:12:25 +02:00
|
|
|
message: `${errorMessage}: ${err.responseText}`,
|
2020-08-09 22:14:51 +02:00
|
|
|
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
|
|
|
})
|
2020-09-07 00:12:25 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
...mapActions([
|
2021-05-22 01:56:32 +02:00
|
|
|
'showToast',
|
|
|
|
'invidiousAPICall'
|
2020-09-07 00:12:25 +02:00
|
|
|
])
|
2020-02-16 19:30:00 +01:00
|
|
|
}
|
|
|
|
})
|