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

FreeTubeApp · Jan 17, 2024 · 48da635 · 48da635
1 parent ab18c22
commit 48da635
Show file tree

Hide file tree

Showing 16 changed files with 234 additions and 31 deletions.
diff --git a/src/renderer/components/general-settings/general-settings.js b/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',
     ])
   }
 })
diff --git a/src/renderer/components/general-settings/general-settings.vue b/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

diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js
@@ -70,6 +70,29 @@ export default defineComponent({
     fetchSubscriptionsAutomatically: function() {
       return this.$store.getters.getFetchSubscriptionsAutomatically
     },
+
+    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.increaseLimit()
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
   },
   created: function () {
     const dataLimit = sessionStorage.getItem('subscriptionLimit')

diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.vue b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.vue
@@ -45,16 +45,25 @@
       :use-channels-hidden-preference="false"
       :display="isCommunity ? 'list' : ''"
     />
-    <ft-flex-box
+    <div
       v-if="!isLoading && videoList.length > dataLimit"
     >
-      <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>
+      <div
+        v-observe-visibility="observeVisibilityOptions"
+      >
+        <!--
+          Dummy element to be observed by Intersection Observer
+        -->
+      </div>
+      <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>
+    </div>
     <ft-icon-button
       v-if="!isLoading"
       :icon="['fas', 'sync']"

diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
@@ -301,7 +301,8 @@ const state = {
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
   useDeArrowThumbnails: false,
-  deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app'
+  deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app',
+  generalAutoLoadMorePaginatedItemsEnabled: false,
 }
 
 const stateWithSideEffects = {

diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
@@ -9,6 +9,7 @@ import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
 import FtShareButton from '../../components/ft-share-button/ft-share-button.vue'
 import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
+import FtButton from '../../components/ft-button/ft-button.vue'
 import ChannelAbout from '../../components/channel-about/channel-about.vue'
 
 import autolinker from 'autolinker'
@@ -45,7 +46,8 @@ export default defineComponent({
     'ft-age-restricted': FtAgeRestricted,
     'ft-share-button': FtShareButton,
     'ft-subscribe-button': FtSubscribeButton,
-    'channel-about': ChannelAbout
+    'ft-button': FtButton,
+    'channel-about': ChannelAbout,
   },
   data: function () {
     return {
@@ -289,7 +291,30 @@ export default defineComponent({
       })
 
       return values
-    }
+    },
+
+    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.handleFetchMore()
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
   },
   watch: {
     $route() {

diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
@@ -402,6 +402,13 @@
           @keydown.space.prevent="handleFetchMore"
           @keydown.enter.prevent="handleFetchMore"
         >
+          <div
+            v-observe-visibility="observeVisibilityOptions"
+          >
+            <!--
+              Dummy element to be observed by Intersection Observer
+            -->
+          </div>
           <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
         </div>
       </div>

diff --git a/src/renderer/views/Hashtag/Hashtag.js b/src/renderer/views/Hashtag/Hashtag.js
@@ -38,7 +38,30 @@ export default defineComponent({
 
     showFetchMoreButton() {
       return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
-    }
+    },
+
+    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.handleFetchMore()
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
   },
   watch: {
     $route() {

diff --git a/src/renderer/views/Hashtag/Hashtag.vue b/src/renderer/views/Hashtag/Hashtag.vue
@@ -31,6 +31,13 @@
         @keydown.space.prevent="handleFetchMore"
         @keydown.enter.prevent="handleFetchMore"
       >
+        <div
+          v-observe-visibility="observeVisibilityOptions"
+        >
+          <!--
+            Dummy element to be observed by Intersection Observer
+          -->
+        </div>
         <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
       </div>
     </ft-card>

diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
@@ -38,7 +38,30 @@ export default defineComponent({
       } else {
         return this.historyCacheSorted.slice(0, this.dataLimit)
       }
-    }
+    },
+
+    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.increaseLimit()
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
   },
   watch: {
     query() {

diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
@@ -38,16 +38,25 @@
         :show-video-with-last-viewed-playlist="true"
         :use-channels-hidden-preference="false"
       />
-      <ft-flex-box
+      <div
         v-if="showLoadMoreButton"
       >
-        <ft-button
-          label="Load More"
-          background-color="var(--primary-color)"
-          text-color="var(--text-with-main-color)"
-          @click="increaseLimit"
-        />
-      </ft-flex-box>
+        <div
+          v-observe-visibility="observeVisibilityOptions"
+        >
+          <!--
+            Dummy element to be observed by Intersection Observer
+          -->
+        </div>
+        <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>
+      </div>
     </ft-card>
   </div>
 </template>

diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
@@ -40,7 +40,30 @@ export default defineComponent({
 
     showFamilyFriendlyOnly: function() {
       return this.$store.getters.getShowFamilyFriendlyOnly
-    }
+    },
+
+    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.nextPage()
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
   },
   watch: {
     $route () {

diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
@@ -22,6 +22,13 @@
         @keydown.enter.prevent="nextPage"
         @keydown.space.prevent="nextPage"
       >
+        <div
+          v-observe-visibility="observeVisibilityOptions"
+        >
+          <!--
+            Dummy element to be observed by Intersection Observer
+          -->
+        </div>
         <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
       </div>
     </ft-card>

diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -159,6 +159,29 @@ export default defineComponent({
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)
     },
+
+    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.increaseLimit()
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple pages
+        once: false,
+      }
+    },
   },
   watch: {
     lowerCaseQuery() {

diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -58,16 +58,25 @@
         :data-type="'playlist'"
         :use-channels-hidden-preference="false"
       />
-      <ft-flex-box
+      <div
         v-if="showLoadMoreButton"
       >
-        <ft-button
-          label="Load More"
-          background-color="var(--primary-color)"
-          text-color="var(--text-with-main-color)"
-          @click="increaseLimit"
-        />
-      </ft-flex-box>
+        <div
+          v-observe-visibility="observeVisibilityOptions"
+        >
+          <!--
+            Dummy element to be observed by Intersection Observer
+          -->
+        </div>
+        <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>
+      </div>
     </ft-card>
   </div>
 </template>