lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Replace jquery on the trending page (#2663)

This commit is contained in:
absidue 2022-10-04 19:56:10 +02:00 committed by GitHub
parent 28e07ec0aa
commit 5cd2e5a7d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/App.vue
View File

@ -38,6 +38,7 @@
<RouterView
ref="router"
class="routerView"
@showOutlines="hideOutlines = false"
/>
<!-- </keep-alive> -->
</transition>

73
src/renderer/views/Trending/Trending.js
View File

@ -6,7 +6,6 @@ import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
import $ from 'jquery'
import { scrapeTrendingPage } from '@freetube/yt-trending-scraper'
export default Vue.extend({
@ -22,13 +21,7 @@ export default Vue.extend({
return {
isLoading: false,
shownResults: [],
currentTab: 'default',
tabInfoValues: [
'default',
'music',
'gaming',
'movies'
]
currentTab: 'default'
}
},
computed: {
@ -56,38 +49,7 @@ export default Vue.extend({
}
},
methods: {
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')
changeTab: function (tab) {
this.currentTab = tab
if (this.trendingCache[this.currentTab] && this.trendingCache[this.currentTab].length > 0) {
this.getTrendingInfoCache()
@ -96,7 +58,12 @@ export default Vue.extend({
}
},
getTrendingInfo () {
focusTab: function (tab) {
this.$refs[tab].focus()
this.$emit('showOutlines')
},
getTrendingInfo: function () {
if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
this.getTrendingInfoInvidious()
} else {
@ -120,10 +87,10 @@ export default Vue.extend({
this.shownResults = returnData
this.isLoading = false
const currentTab = this.currentTab
this.$store.commit('setTrendingCache', { value: returnData, page: currentTab })
}).then(() => {
document.querySelector(`#${this.currentTab}Tab`).focus()
this.$store.commit('setTrendingCache', { value: returnData, page: this.currentTab })
setTimeout(() => {
this.$refs[this.currentTab].focus()
})
}).catch((err) => {
console.error(err)
const errorMessage = this.$t('Local API Error (Click to copy)')
@ -145,11 +112,17 @@ export default Vue.extend({
})
},
getTrendingInfoCache: function() {
getTrendingInfoCache: function () {
// the ft-element-list component has a bug where it doesn't change despite the data changing
// so we need to use this hack to make vue completely get rid of it and rerender it
// we should find a better way to do it to avoid the trending page flashing
this.isLoading = true
setTimeout(() => {
this.shownResults = this.trendingCache[this.currentTab]
this.isLoading = false
setTimeout(() => {
this.$refs[this.currentTab].focus()
})
})
},
@ -177,10 +150,10 @@ export default Vue.extend({
this.shownResults = returnData
this.isLoading = false
const currentTab = this.currentTab
this.$store.commit('setTrendingCache', { value: returnData, page: currentTab })
}).then(() => {
document.querySelector(`#${this.currentTab}Tab`).focus()
this.$store.commit('setTrendingCache', { value: returnData, page: this.currentTab })
setTimeout(() => {
this.$refs[this.currentTab].focus()
})
}).catch((err) => {
console.error(err)
const errorMessage = this.$t('Invidious API Error (Click to copy)')

48
src/renderer/views/Trending/Trending.vue
View File

@ -15,54 +15,62 @@
:aria-label="$t('Trending.Trending Tabs')"
>
<div
id="defaultTab"
ref="default"
class="tab"
role="tab"
aria-selected="true"
:aria-selected="String(currentTab === 'default')"
aria-controls="trendingPanel"
tabindex="0"
:class="(currentTab=='default')?'selectedTab':''"
:tabindex="currentTab === 'default' ? 0 : -1"
:class="{ selectedTab: currentTab === 'default' }"
@click="changeTab('default')"
@keydown="changeTab('default', $event)"
@keydown.space.enter.prevent="changeTab('default')"
@keydown.left.prevent="focusTab('movies')"
@keydown.right.prevent="focusTab('music')"
>
{{ $t("Trending.Default").toUpperCase() }}
</div>
<div
id="musicTab"
ref="music"
class="tab"
role="tab"
aria-selected="false"
:aria-selected="String(currentTab === 'music')"
aria-controls="trendingPanel"
tabindex="-1"
:class="(currentTab=='music')?'selectedTab':''"
:tabindex="currentTab === 'music' ? 0 : -1"
:class="{ selectedTab: currentTab === 'music' }"
@click="changeTab('music')"
@keydown="changeTab('music', $event)"
@keydown.space.enter.prevent="changeTab('music')"
@keydown.left.prevent="focusTab('default')"
@keydown.right.prevent="focusTab('gaming')"
>
{{ $t("Trending.Music").toUpperCase() }}
</div>
<div
id="gamingTab"
ref="gaming"
class="tab"
role="tab"
aria-selected="false"
:aria-selected="String(currentTab === 'gaming')"
aria-controls="trendingPanel"
tabindex="-1"
:class="(currentTab=='gaming')?'selectedTab':''"
:tabindex="currentTab === 'gaming' ? 0 : -1"
:class="{ selectedTab: currentTab === 'gaming' }"
@click="changeTab('gaming')"
@keydown="changeTab('gaming', $event)"
@keydown.space.enter.prevent="changeTab('gaming')"
@keydown.left.prevent="focusTab('music')"
@keydown.right.prevent="focusTab('movies')"
>
{{ $t("Trending.Gaming").toUpperCase() }}
</div>
<div
id="moviesTab"
ref="movies"
class="tab"
role="tab"
aria-selected="false"
:aria-selected="String(currentTab === 'movies')"
aria-controls="trendingPanel"
tabindex="-1"
:class="(currentTab=='movies')?'selectedTab':''"
:tabindex="currentTab === 'movies' ? 0 : -1"
:class="{ selectedTab: currentTab === 'movies' }"
@click="changeTab('movies')"
@keydown="changeTab('movies', $event)"
@keydown.space.enter.prevent="changeTab('movies')"
@keydown.left.prevent="focusTab('gaming')"
@keydown.right.prevent="focusTab('default')"
>
{{ $t("Trending.Movies").toUpperCase() }}
</div>