Update most paginated places to auto load next page (except comments)

src/renderer/components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.js

@@ -0,0 +1,30 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'FtAutoLoadNextPageWrapper',
+  computed: {
+    generalAutoLoadMorePaginatedItemsEnabled() {
+      return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
+    },
+    observeVisibilityOptions() {
+      if (!this.generalAutoLoadMorePaginatedItemsEnabled) { return false }
+
+      return {
+        callback: (isVisible, _entry) => {
+          // This is also fired when **hidden**
+          // No point doing anything if not visible
+          if (!isVisible) { return }
+
+          this.$emit('load-next-page')
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
+
+  },
+})

src/renderer/components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="ft-auto-load-next-page-wrapper"
+  >
+    <div
+      v-observe-visibility="observeVisibilityOptions"
+    >
+      <!--
+        Dummy element to be observed by Intersection Observer
+      -->
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script src="./ft-auto-load-next-page-wrapper.js" />

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

@@ -132,6 +132,9 @@ export default defineComponent({
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
     },
+    generalAutoLoadMorePaginatedItemsEnabled() {
+      return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
+    },
 
     localeOptions: function () {
       return [
@@ -255,7 +258,8 @@ export default defineComponent({
       'updateThumbnailPreference',
       'updateForceLocalBackendForLegacy',
       'updateCurrentLocale',
-      'updateExternalLinkHandling'
+      'updateExternalLinkHandling',
+      'updateGeneralAutoLoadMorePaginatedItemsEnabled',
     ])
   }
 })

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

@@ -17,6 +17,13 @@
           :tooltip="$t('Tooltips.General Settings.Fallback to Non-Preferred Backend on Failure')"
           @change="updateBackendFallback"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.General Settings.Auto Load Next Page.Label')"
+          :default-value="generalAutoLoadMorePaginatedItemsEnabled"
+          :compact="true"
+          :tooltip="$t('Settings.General Settings.Auto Load Next Page.Tooltip')"
+          @change="updateGeneralAutoLoadMorePaginatedItemsEnabled"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

src/renderer/components/player-settings/player-settings.js

@@ -197,10 +197,6 @@ export default defineComponent({
       return this.$store.getters.getScreenshotFilenamePattern
     },
 
-    commentAutoLoadEnabled: function () {
-      return this.$store.getters.getCommentAutoLoadEnabled
-    },
-
     hideComments: function () {
       return this.$store.getters.getHideComments
     },
@@ -209,11 +205,6 @@ export default defineComponent({
     screenshotFolder: function() {
       this.getScreenshotFolderPlaceholder()
     },
-    hideComments: function(newValue) {
-      if (newValue) {
-        this.updateCommentAutoLoadEnabled(false)
-      }
-    }
   },
   mounted: function() {
     this.getScreenshotFolderPlaceholder()
@@ -317,7 +308,6 @@ export default defineComponent({
       'updateScreenshotFolderPath',
       'updateScreenshotFilenamePattern',
       'parseScreenshotCustomFileName',
-      'updateCommentAutoLoadEnabled',
     ])
   }
 })

src/renderer/components/player-settings/player-settings.vue

@@ -255,14 +255,6 @@
       </ft-flex-box>
       <br>
     </div>
-    <ft-flex-box>
-      <ft-toggle-switch
-        :label="$t('Settings.Player Settings.Comment Auto Load.Comment Auto Load')"
-        :default-value="commentAutoLoadEnabled"
-        :disabled="hideComments"
-        @change="updateCommentAutoLoadEnabled"
-      />
-    </ft-flex-box>
   </ft-settings-section>
 </template>
 

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

@@ -7,6 +7,7 @@ import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtElementList from '../ft-element-list/ft-element-list.vue'
 import FtChannelBubble from '../ft-channel-bubble/ft-channel-bubble.vue'
+import FtAutoLoadNextPageWrapper from '../ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 
 export default defineComponent({
   name: 'SubscriptionsTabUI',
@@ -17,7 +18,8 @@ export default defineComponent({
     'ft-icon-button': FtIconButton,
     'ft-flex-box': FtFlexBox,
     'ft-element-list': FtElementList,
-    'ft-channel-bubble': FtChannelBubble
+    'ft-channel-bubble': FtChannelBubble,
+    'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
   },
   props: {
     isLoading: {

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

@@ -45,16 +45,19 @@
       :use-channels-hidden-preference="false"
       :display="isCommunity ? 'list' : ''"
     />
-    <ft-flex-box
+    <ft-auto-load-next-page-wrapper
       v-if="!isLoading && videoList.length > dataLimit"
+      @load-next-page="increaseLimit"
     >
-      <ft-button
-        :label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
-        background-color="var(--primary-color)"
-        text-color="var(--text-with-main-color)"
-        @click="increaseLimit"
-      />
-    </ft-flex-box>
+      <ft-flex-box>
+        <ft-button
+          :label="isCommunity ? $t('Subscriptions.Load More Posts') : $t('Subscriptions.Load More Videos')"
+          background-color="var(--primary-color)"
+          text-color="var(--text-with-main-color)"
+          @click="increaseLimit"
+        />
+      </ft-flex-box>
+    </ft-auto-load-next-page-wrapper>
     <ft-icon-button
       v-if="!isLoading && activeSubscriptionList.length > 0"
       :icon="['fas', 'sync']"

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -63,10 +63,6 @@ export default defineComponent({
       return this.$store.getters.getHideCommentPhotos
     },
 
-    commentAutoLoadEnabled: function () {
-      return this.$store.getters.getCommentAutoLoadEnabled
-    },
-
     sortNames: function () {
       return [
         this.$t('Comments.Top comments'),
@@ -85,8 +81,13 @@ export default defineComponent({
       return (this.sortNewest) ? 'newest' : 'top'
     },
 
+    generalAutoLoadMorePaginatedItemsEnabled() {
+      return this.$store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
+    },
     observeVisibilityOptions: function () {
-      if (!this.commentAutoLoadEnabled) { return false }
+      if (!this.generalAutoLoadMorePaginatedItemsEnabled) {
+        return false
+      }
       if (!this.videoPlayerReady) { return false }
 
       return {

src/renderer/store/modules/settings.js

@@ -299,13 +299,13 @@ const state = {
   fetchSubscriptionsAutomatically: true,
   settingsPassword: '',
   allowDashAv1Formats: false,
-  commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
   useDeArrowThumbnails: false,
   deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app',
   // This makes the `favorites` playlist uses as quick bookmark target
   // If the playlist is removed quick bookmark is disabled
   quickBookmarkTargetPlaylistId: 'favorites',
+  generalAutoLoadMorePaginatedItemsEnabled: false,
 }
 
 const stateWithSideEffects = {

src/renderer/views/Channel/Channel.js

@@ -10,6 +10,7 @@ import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricte
 import FtShareButton from '../../components/ft-share-button/ft-share-button.vue'
 import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
 import ChannelAbout from '../../components/channel-about/channel-about.vue'
+import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 
 import autolinker from 'autolinker'
 import {
@@ -52,7 +53,8 @@ export default defineComponent({
     'ft-age-restricted': FtAgeRestricted,
     'ft-share-button': FtShareButton,
     'ft-subscribe-button': FtSubscribeButton,
-    'channel-about': ChannelAbout
+    'channel-about': ChannelAbout,
+    'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
   },
   data: function () {
     return {
@@ -303,7 +305,7 @@ export default defineComponent({
       })
 
       return values
-    }
+    },
   },
   watch: {
     $route() {

src/renderer/views/Channel/Channel.vue

@@ -393,17 +393,21 @@
             {{ $t("Channel.Your search results have returned 0 results") }}
           </p>
         </ft-flex-box>
-        <div
+        <ft-auto-load-next-page-wrapper
           v-if="showFetchMoreButton"
-          class="getNextPage"
-          role="button"
-          tabindex="0"
-          @click="handleFetchMore"
-          @keydown.space.prevent="handleFetchMore"
-          @keydown.enter.prevent="handleFetchMore"
+          @load-next-page="handleFetchMore"
         >
-          <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
-        </div>
+          <div
+            class="getNextPage"
+            role="button"
+            tabindex="0"
+            @click="handleFetchMore"
+            @keydown.space.prevent="handleFetchMore"
+            @keydown.enter.prevent="handleFetchMore"
+          >
+            <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
+          </div>
+        </ft-auto-load-next-page-wrapper>
       </div>
     </ft-card>
     <ft-card

src/renderer/views/Hashtag/Hashtag.js

@@ -3,6 +3,7 @@ import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
+import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 import packageDetails from '../../../../package.json'
 import { getHashtagLocal, parseLocalListVideo } from '../../helpers/api/local'
 import { copyToClipboard, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
@@ -15,7 +16,8 @@ export default defineComponent({
     'ft-card': FtCard,
     'ft-element-list': FtElementList,
     'ft-flex-box': FtFlexBox,
-    'ft-loader': FtLoader
+    'ft-loader': FtLoader,
+    'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
   },
   data: function() {
     return {
@@ -38,7 +40,7 @@ export default defineComponent({
 
     showFetchMoreButton() {
       return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
-    }
+    },
   },
   watch: {
     $route() {

src/renderer/views/Hashtag/Hashtag.vue

@@ -22,17 +22,22 @@
           {{ $t("Hashtag.This hashtag does not currently have any videos") }}
         </p>
       </ft-flex-box>
-      <div
+
+      <ft-auto-load-next-page-wrapper
         v-if="showFetchMoreButton"
-        class="getNextPage"
-        role="button"
-        tabindex="0"
-        @click="handleFetchMore"
-        @keydown.space.prevent="handleFetchMore"
-        @keydown.enter.prevent="handleFetchMore"
+        @load-next-page="handleFetchMore"
       >
-        <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
-      </div>
+        <div
+          class="getNextPage"
+          role="button"
+          tabindex="0"
+          @click="handleFetchMore"
+          @keydown.space.prevent="handleFetchMore"
+          @keydown.enter.prevent="handleFetchMore"
+        >
+          <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
+        </div>
+      </ft-auto-load-next-page-wrapper>
     </ft-card>
   </div>
 </template>

src/renderer/views/History/History.js

@@ -6,6 +6,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
+import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 
 export default defineComponent({
   name: 'History',
@@ -15,7 +16,8 @@ export default defineComponent({
     'ft-flex-box': FtFlexBox,
     'ft-element-list': FtElementList,
     'ft-button': FtButton,
-    'ft-input': FtInput
+    'ft-input': FtInput,
+    'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
   },
   data: function () {
     return {
@@ -38,7 +40,7 @@ export default defineComponent({
       } else {
         return this.historyCacheSorted.slice(0, this.dataLimit)
       }
-    }
+    },
   },
   watch: {
     query() {

src/renderer/views/History/History.vue

@@ -39,16 +39,19 @@
         :use-channels-hidden-preference="false"
         :hide-forbidden-titles="false"
       />
-      <ft-flex-box
+      <ft-auto-load-next-page-wrapper
         v-if="showLoadMoreButton"
+        @load-next-page="increaseLimit"
       >
-        <ft-button
-          label="Load More"
-          background-color="var(--primary-color)"
-          text-color="var(--text-with-main-color)"
-          @click="increaseLimit"
-        />
-      </ft-flex-box>
+        <ft-flex-box>
+          <ft-button
+            label="Load More"
+            background-color="var(--primary-color)"
+            text-color="var(--text-with-main-color)"
+            @click="increaseLimit"
+          />
+        </ft-flex-box>
+      </ft-auto-load-next-page-wrapper>
     </ft-card>
   </div>
 </template>