Add setting to auto load comment section (#3352)

* + Add setting to auto load comment section

* * Cleanup hooks when possible

* * Update new setting to be a toggle

Possible values reduced to disabled & 0%

* * Use vue-observe-visibility to implement comment autoload

* - Remove unused translation entries

* - Remove no longer valid code comment

* * Rename & retype new setting

* * Implement auto more comment loading

* - Remove outdated comment

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* * Disable new setting switch when hide comments enabled

* * Remove the unnecessary delay on video comment loading

* * Update according to review

* * Disable autoload when hide comment enabled

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

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

@@ -57,7 +57,7 @@ export default defineComponent({
       ],
       screenshotFolderPlaceholder: '',
       screenshotFilenameExample: '',
-      screenshotDefaultPattern: '%Y%M%D-%H%N%S'
+      screenshotDefaultPattern: '%Y%M%D-%H%N%S',
     }
   },
   computed: {
@@ -195,11 +195,24 @@ export default defineComponent({
 
     screenshotFilenamePattern: function() {
       return this.$store.getters.getScreenshotFilenamePattern
-    }
+    },
+
+    commentAutoLoadEnabled: function () {
+      return this.$store.getters.getCommentAutoLoadEnabled
+    },
+
+    hideComments: function () {
+      return this.$store.getters.getHideComments
+    },
   },
   watch: {
     screenshotFolder: function() {
       this.getScreenshotFolderPlaceholder()
+    },
+    hideComments: function(newValue) {
+      if (newValue) {
+        this.updateCommentAutoLoadEnabled(false)
+      }
     }
   },
   mounted: function() {
@@ -295,6 +308,7 @@ export default defineComponent({
       'updateScreenshotFolderPath',
       'updateScreenshotFilenamePattern',
       'parseScreenshotCustomFileName',
+      'updateCommentAutoLoadEnabled',
     ])
   }
 })

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

@@ -249,7 +249,16 @@
           :disabled="true"
         />
       </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/watch-video-comments/watch-video-comments.js

@@ -27,7 +27,11 @@ export default defineComponent({
     channelThumbnail: {
       type: String,
       required: true
-    }
+    },
+    videoPlayerReady: {
+      type: Boolean,
+      required: true
+    },
   },
   data: function () {
     return {
@@ -35,7 +39,7 @@ export default defineComponent({
       showComments: false,
       nextPageToken: null,
       commentData: [],
-      sortNewest: false
+      sortNewest: false,
     }
   },
   computed: {
@@ -51,6 +55,10 @@ export default defineComponent({
       return this.$store.getters.getHideCommentLikes
     },
 
+    commentAutoLoadEnabled: function () {
+      return this.$store.getters.getCommentAutoLoadEnabled
+    },
+
     sortNames: function () {
       return [
         this.$t('Comments.Top comments'),
@@ -67,7 +75,40 @@ export default defineComponent({
 
     currentSortValue: function () {
       return (this.sortNewest) ? 'newest' : 'top'
-    }
+    },
+
+    observeVisibilityOptions: function() {
+      if (!this.commentAutoLoadEnabled) { return false }
+      if (!this.videoPlayerReady) { return false }
+
+      return {
+        callback: (isVisible, _entry) => {
+          // This is also fired when **hidden**
+          // No point doing anything if not visible
+          if (!isVisible) { return }
+          // It's possible the comments are being loaded/already loaded
+          if (this.canPerformInitialCommentLoading) {
+            this.getCommentData()
+          } else if (this.canPerformMoreCommentLoading) {
+            this.getMoreComments()
+          }
+        },
+        intersection: {
+          // Only when it intersects with N% above bottom
+          rootMargin: '0% 0% 0% 0%',
+        },
+        // Callback responsible for loading multiple comment pages
+        once: false,
+      }
+    },
+
+    canPerformInitialCommentLoading: function() {
+      return this.commentData.length === 0 && !this.isLoading && !this.showComments
+    },
+
+    canPerformMoreCommentLoading: function() {
+      return this.commentData.length > 0 && !this.isLoading && this.showComments && this.nextPageToken
+    },
   },
 
   methods: {
@@ -239,6 +280,6 @@ export default defineComponent({
           })
           this.isLoading = false
         })
-    }
+    },
   }
 })

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

@@ -3,7 +3,7 @@
     class="card"
   >
     <h4
-      v-if="commentData.length === 0 && !isLoading"
+      v-if="canPerformInitialCommentLoading"
       class="getCommentsTitle"
       role="button"
       tabindex="0"
@@ -238,7 +238,7 @@
       </h3>
     </div>
     <h4
-      v-if="commentData.length > 0 && !isLoading && showComments && nextPageToken"
+      v-if="canPerformMoreCommentLoading"
       class="getMoreComments"
       role="button"
       tabindex="0"
@@ -251,6 +251,13 @@
     <ft-loader
       v-if="isLoading"
     />
+    <div
+      v-observe-visibility="observeVisibilityOptions"
+    >
+      <!--
+        Dummy element to be observed by Intersection Observer
+      -->
+    </div>
   </ft-card>
 </template>
 

src/renderer/store/modules/settings.js

@@ -281,6 +281,7 @@ const state = {
   fetchSubscriptionsAutomatically: true,
   settingsPassword: '',
   allowDashAv1Formats: false,
+  commentAutoLoadEnabled: false,
 }
 
 const stateWithSideEffects = {

src/renderer/views/Watch/Watch.js

@@ -55,6 +55,7 @@ export default defineComponent({
       isLoading: true,
       firstLoad: true,
       useTheatreMode: false,
+      videoPlayerReady: false,
       showDashPlayer: true,
       showLegacyPlayer: false,
       hidePlayer: false,
@@ -96,7 +97,7 @@ export default defineComponent({
       timestamp: null,
       playNextTimeout: null,
       playNextCountDownIntervalId: null,
-      infoAreaSticky: true
+      infoAreaSticky: true,
     }
   },
   computed: {
@@ -180,7 +181,7 @@ export default defineComponent({
     },
     allowDashAv1Formats: function () {
       return this.$store.getters.getAllowDashAv1Formats
-    }
+    },
   },
   watch: {
     $route() {
@@ -189,6 +190,7 @@ export default defineComponent({
       this.videoId = this.$route.params.id
 
       this.firstLoad = true
+      this.videoPlayerReady = false
       this.activeFormat = this.defaultVideoFormat
       this.videoStoryboardSrc = ''
       this.captionHybridList = []
@@ -928,6 +930,11 @@ export default defineComponent({
       this.updateLastViewedPlaylist(payload)
     },
 
+    handleVideoReady: function () {
+      this.videoPlayerReady = true
+      this.checkIfWatched()
+    },
+
     checkIfWatched: function () {
       const historyIndex = this.historyCache.findIndex((video) => {
         return video.videoId === this.videoId

src/renderer/views/Watch/Watch.vue

@@ -31,7 +31,7 @@
           :chapters="videoChapters"
           class="videoPlayer"
           :class="{ theatrePlayer: useTheatreMode }"
-          @ready="checkIfWatched"
+          @ready="handleVideoReady"
           @ended="handleVideoEnded"
           @error="handleVideoError"
           @store-caption-list="captionHybridList = $event"
@@ -142,6 +142,7 @@
         :class="{ theatreWatchVideo: useTheatreMode }"
         :channel-thumbnail="channelThumbnail"
         :channel-name="channelName"
+        :video-player-ready="videoPlayerReady"
         @timestamp-event="changeTimestamp"
       />
     </div>

static/locales/en-US.yaml

@@ -280,6 +280,8 @@ Settings:
       Error:
         Forbidden Characters: Forbidden Characters
         Empty File Name: Empty File Name
+    Comment Auto Load:
+      Comment Auto Load: Comment Auto Load
   External Player Settings:
     External Player Settings: External Player Settings
     External Player: External Player