Skip to content

Commit 48da635

Browse files
PikachuEXEPikachuEXE
committed
* Update most paginated places to auto load next page (except comments)
1 parent ab18c22 commit 48da635

File tree

16 files changed

+234
-31
lines changed

16 files changed

+234
-31
lines changed

‎src/renderer/components/general-settings/general-settings.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,9 @@ export default defineComponent({
132132
defaultInvidiousInstance: function () {
133133
return this.$store.getters.getDefaultInvidiousInstance
134134
},
135+
generalAutoLoadMorePaginatedItemsEnabled() {
136+
return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
137+
},
135138

136139
localeOptions: function () {
137140
return [
@@ -255,7 +258,8 @@ export default defineComponent({
255258
'updateThumbnailPreference',
256259
'updateForceLocalBackendForLegacy',
257260
'updateCurrentLocale',
258-
'updateExternalLinkHandling'
261+
'updateExternalLinkHandling',
262+
'updateGeneralAutoLoadMorePaginatedItemsEnabled',
259263
])
260264
}
261265
})

‎src/renderer/components/general-settings/general-settings.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@
1717
:tooltip="$t('Tooltips.General Settings.Fallback to Non-Preferred Backend on Failure')"
1818
@change="updateBackendFallback"
1919
/>
20+
<ft-toggle-switch
21+
:label="$t('Settings.General Settings.Auto Load Next Page.Label')"
22+
:default-value="generalAutoLoadMorePaginatedItemsEnabled"
23+
:compact="true"
24+
:tooltip="$t('Settings.General Settings.Auto Load Next Page.Tooltip')"
25+
@change="updateGeneralAutoLoadMorePaginatedItemsEnabled"
26+
/>
2027
</div>
2128
<div class="switchColumn">
2229
<ft-toggle-switch

‎src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,29 @@ export default defineComponent({
7070
fetchSubscriptionsAutomatically: function() {
7171
return this.$store.getters.getFetchSubscriptionsAutomatically
7272
},
73+
74+
generalAutoLoadMorePaginatedItemsEnabled() {
75+
return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
76+
},
77+
observeVisibilityOptions() {
78+
if (!this.generalAutoLoadMorePaginatedItemsEnabled) { return false }
79+
80+
return {
81+
callback: (isVisible, _entry) => {
82+
// This is also fired when **hidden**
83+
// No point doing anything if not visible
84+
if (!isVisible) { return }
85+
86+
this.increaseLimit()
87+
},
88+
intersection: {
89+
// Only when it intersects with N% above bottom
90+
rootMargin: '0% 0% 0% 0%',
91+
},
92+
// Callback responsible for loading multiple pages
93+
once: false,
94+
}
95+
},
7396
},
7497
created: function () {
7598
const dataLimit = sessionStorage.getItem('subscriptionLimit')

‎src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.vue‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,25 @@
4545
:use-channels-hidden-preference="false"
4646
:display="isCommunity ? 'list' : ''"
4747
/>
48-
<ft-flex-box
48+
<div
4949
v-if="!isLoading && videoList.length > dataLimit"
5050
>
51-
<ft-button
52-
:label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
53-
background-color="var(--primary-color)"
54-
text-color="var(--text-with-main-color)"
55-
@click="increaseLimit"
56-
/>
57-
</ft-flex-box>
51+
<div
52+
v-observe-visibility="observeVisibilityOptions"
53+
>
54+
<!--
55+
Dummy element to be observed by Intersection Observer
56+
-->
57+
</div>
58+
<ft-flex-box>
59+
<ft-button
60+
:label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
61+
background-color="var(--primary-color)"
62+
text-color="var(--text-with-main-color)"
63+
@click="increaseLimit"
64+
/>
65+
</ft-flex-box>
66+
</div>
5867
<ft-icon-button
5968
v-if="!isLoading"
6069
:icon="['fas', 'sync']"

‎src/renderer/store/modules/settings.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,8 @@ const state = {
301301
commentAutoLoadEnabled: false,
302302
useDeArrowTitles: false,
303303
useDeArrowThumbnails: false,
304-
deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app'
304+
deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app',
305+
generalAutoLoadMorePaginatedItemsEnabled: false,
305306
}
306307

307308
const stateWithSideEffects = {

‎src/renderer/views/Channel/Channel.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
99
import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
1010
import FtShareButton from '../../components/ft-share-button/ft-share-button.vue'
1111
import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
12+
import FtButton from '../../components/ft-button/ft-button.vue'
1213
import ChannelAbout from '../../components/channel-about/channel-about.vue'
1314

1415
import autolinker from 'autolinker'
@@ -45,7 +46,8 @@ export default defineComponent({
4546
'ft-age-restricted': FtAgeRestricted,
4647
'ft-share-button': FtShareButton,
4748
'ft-subscribe-button': FtSubscribeButton,
48-
'channel-about': ChannelAbout
49+
'ft-button': FtButton,
50+
'channel-about': ChannelAbout,
4951
},
5052
data: function () {
5153
return {
@@ -289,7 +291,30 @@ export default defineComponent({
289291
})
290292

291293
return values
292-
}
294+
},
295+
296+
generalAutoLoadMorePaginatedItemsEnabled() {
297+
return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
298+
},
299+
observeVisibilityOptions() {
300+
if (!this.generalAutoLoadMorePaginatedItemsEnabled) { return false }
301+
302+
return {
303+
callback: (isVisible, _entry) => {
304+
// This is also fired when **hidden**
305+
// No point doing anything if not visible
306+
if (!isVisible) { return }
307+
308+
this.handleFetchMore()
309+
},
310+
intersection: {
311+
// Only when it intersects with N% above bottom
312+
rootMargin: '0% 0% 0% 0%',
313+
},
314+
// Callback responsible for loading multiple pages
315+
once: false,
316+
}
317+
},
293318
},
294319
watch: {
295320
$route() {

‎src/renderer/views/Channel/Channel.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,13 @@
402402
@keydown.space.prevent="handleFetchMore"
403403
@keydown.enter.prevent="handleFetchMore"
404404
>
405+
<div
406+
v-observe-visibility="observeVisibilityOptions"
407+
>
408+
<!--
409+
Dummy element to be observed by Intersection Observer
410+
-->
411+
</div>
405412
<font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
406413
</div>
407414
</div>

‎src/renderer/views/Hashtag/Hashtag.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,30 @@ export default defineComponent({
3838

3939
showFetchMoreButton() {
4040
return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
41-
}
41+
},
42+
43+
generalAutoLoadMorePaginatedItemsEnabled() {
44+
return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
45+
},
46+
observeVisibilityOptions() {
47+
if (!this.generalAutoLoadMorePaginatedItemsEnabled) { return false }
48+
49+
return {
50+
callback: (isVisible, _entry) => {
51+
// This is also fired when **hidden**
52+
// No point doing anything if not visible
53+
if (!isVisible) { return }
54+
55+
this.handleFetchMore()
56+
},
57+
intersection: {
58+
// Only when it intersects with N% above bottom
59+
rootMargin: '0% 0% 0% 0%',
60+
},
61+
// Callback responsible for loading multiple pages
62+
once: false,
63+
}
64+
},
4265
},
4366
watch: {
4467
$route() {

‎src/renderer/views/Hashtag/Hashtag.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@
3131
@keydown.space.prevent="handleFetchMore"
3232
@keydown.enter.prevent="handleFetchMore"
3333
>
34+
<div
35+
v-observe-visibility="observeVisibilityOptions"
36+
>
37+
<!--
38+
Dummy element to be observed by Intersection Observer
39+
-->
40+
</div>
3441
<font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
3542
</div>
3643
</ft-card>

‎src/renderer/views/History/History.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,30 @@ export default defineComponent({
3838
} else {
3939
return this.historyCacheSorted.slice(0, this.dataLimit)
4040
}
41-
}
41+
},
42+
43+
generalAutoLoadMorePaginatedItemsEnabled() {
44+
return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
45+
},
46+
observeVisibilityOptions() {
47+
if (!this.generalAutoLoadMorePaginatedItemsEnabled) { return false }
48+
49+
return {
50+
callback: (isVisible, _entry) => {
51+
// This is also fired when **hidden**
52+
// No point doing anything if not visible
53+
if (!isVisible) { return }
54+
55+
this.increaseLimit()
56+
},
57+
intersection: {
58+
// Only when it intersects with N% above bottom
59+
rootMargin: '0% 0% 0% 0%',
60+
},
61+
// Callback responsible for loading multiple pages
62+
once: false,
63+
}
64+
},
4265
},
4366
watch: {
4467
query() {

0 commit comments

Comments
 (0)