feat(client/infinite-scroll): SEO friendly

closes Chocobozzz#6332

client/src/app/+accounts/account-video-channels/account-video-channels.component.html

@@ -4,7 +4,14 @@ <h1 class="visually-hidden" i18n>Video channels</h1>
 
   <div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
 
-  <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onChannelDataSubject.asObservable()">
+  <my-infinite-scroller
+    class="channels"
+    [(currentPage)]="channelPagination.currentPage"
+    [isLoading]="isLoading"
+    (nearOfBottom)="onNearOfBottom()"
+    (pageChange)="onPageChange()"
+    [hasMore]="hasMoreVideoChannels"
+  >
     <div class="channel" *ngFor="let videoChannel of videoChannels">
 
       <div class="channel-avatar-row">
@@ -52,5 +59,5 @@ <h2 class="fs-5 lh-1 fw-bold m-0">
         </div>
       </div>
     </div>
-  </div>
+  </my-infinite-scroller>
 </div>

client/src/app/+accounts/account-video-channels/account-video-channels.component.ts

@@ -1,14 +1,14 @@
-import { from, Subject, Subscription } from 'rxjs'
+import { from, Subject } from 'rxjs'
 import { concatMap, map, switchMap, tap } from 'rxjs/operators'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { ComponentPagination, hasMoreItems, MarkdownService, User, UserService } from '@app/core'
 import { SimpleMemoize } from '@app/helpers'
 import { NSFWPolicyType, VideoSortField } from '@peertube/peertube-models'
 import { MiniatureDisplayOptions, VideoMiniatureComponent } from '../../shared/shared-video-miniature/video-miniature.component'
 import { SubscribeButtonComponent } from '../../shared/shared-user-subscription/subscribe-button.component'
 import { RouterLink } from '@angular/router'
 import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
+import { InfiniteScrollerComponent } from '../../shared/shared-main/angular/infinite-scroller.component'
 import { NgIf, NgFor } from '@angular/common'
 import { AccountService } from '@app/shared/shared-main/account/account.service'
 import { VideoChannelService } from '@app/shared/shared-main/video-channel/video-channel.service'
@@ -22,14 +22,17 @@ import { Video } from '@app/shared/shared-main/video/video.model'
   templateUrl: './account-video-channels.component.html',
   styleUrls: [ './account-video-channels.component.scss' ],
   standalone: true,
-  imports: [ NgIf, InfiniteScrollerDirective, NgFor, ActorAvatarComponent, RouterLink, SubscribeButtonComponent, VideoMiniatureComponent ]
+  imports: [ NgIf, InfiniteScrollerComponent, NgFor, ActorAvatarComponent, RouterLink, SubscribeButtonComponent, VideoMiniatureComponent ]
 })
-export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
+export class AccountVideoChannelsComponent implements OnInit {
   account: Account
   videoChannels: VideoChannel[] = []
 
   videos: { [id: number]: { total: number, videos: Video[] } } = {}
 
+  hasMoreVideoChannels = true
+  isLoading = true
+
   channelsDescriptionHTML: { [ id: number ]: string } = {}
 
   channelPagination: ComponentPagination = {
@@ -60,8 +63,6 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
     blacklistInfo: false
   }
 
-  private accountSub: Subscription
-
   constructor (
     private accountService: AccountService,
     private videoChannelService: VideoChannelService,
@@ -71,15 +72,6 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit () {
-    // Parent get the account for us
-    this.accountSub = this.accountService.accountLoaded
-        .subscribe(account => {
-          this.account = account
-          this.videoChannels = []
-
-          this.loadMoreChannels()
-        })
-
     this.userService.getAnonymousOrLoggedUser()
       .subscribe(user => {
         this.userMiniature = user
@@ -88,18 +80,22 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
       })
   }
 
-  ngOnDestroy () {
-    if (this.accountSub) this.accountSub.unsubscribe()
-  }
-
-  loadMoreChannels () {
-    const options = {
-      account: this.account,
-      componentPagination: this.channelPagination,
-      sort: '-updatedAt'
-    }
+  loadMoreChannels (reset = false) {
+    let hasDoneReset = false
+    this.isLoading = true
 
-    this.videoChannelService.listAccountVideoChannels(options)
+    // Parent get the account for us
+    this.accountService.accountLoaded
+      .pipe(
+        tap(account => {
+          this.account = account
+        }),
+        switchMap(() => this.videoChannelService.listAccountVideoChannels({
+          account: this.account,
+          componentPagination: this.channelPagination,
+          sort: '-updatedAt'
+        }))
+      )
       .pipe(
         tap(res => {
           this.channelPagination.totalItems = res.total
@@ -118,13 +114,21 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
         })
       )
       .subscribe(async ({ videoChannel, videos, total }) => {
+        this.isLoading = false
         this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML({
           markdown: videoChannel.description,
           withEmoji: true,
           withHtml: true
         })
 
+        if (reset && !hasDoneReset) {
+          hasDoneReset = true
+          this.videoChannels = []
+        }
+
         this.videoChannels.push(videoChannel)
+        this.hasMoreVideoChannels = (this.channelPagination.currentPage * this.channelPagination.itemsPerPage) <
+          this.channelPagination.totalItems
 
         this.videos[videoChannel.id] = { videos, total }
 
@@ -150,6 +154,10 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
     return this.channelsDescriptionHTML[videoChannel.id]
   }
 
+  onPageChange () {
+    this.loadMoreChannels(true)
+  }
+
   onNearOfBottom () {
     if (!hasMoreItems(this.channelPagination)) return
 

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html

@@ -4,7 +4,14 @@
   {{ getNoResultMessage() }}
 </div>
 
-<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<my-infinite-scroller
+  class="plugins"
+  [(currentPage)]="pagination.currentPage"
+  [isLoading]="isLoading"
+  (nearOfBottom)="onNearOfBottom()"
+  (pageChange)="onPageChange()"
+  [hasMore]="hasMoreResults"
+>
   <ng-container *ngFor="let plugin of plugins">
     <my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
       <div ngProjectAs="buttons">
@@ -27,4 +34,4 @@
       </div>
     </my-plugin-card>
   </ng-container>
-</div>
+</my-infinite-scroller>

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts

@@ -1,4 +1,4 @@
-import { Subject } from 'rxjs'
+import { distinct, filter, ReplaySubject } from 'rxjs'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
@@ -10,7 +10,7 @@ import { DeleteButtonComponent } from '../../../shared/shared-main/buttons/delet
 import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
 import { EditButtonComponent } from '../../../shared/shared-main/buttons/edit-button.component'
 import { PluginCardComponent } from '../shared/plugin-card.component'
-import { InfiniteScrollerDirective } from '../../../shared/shared-main/angular/infinite-scroller.directive'
+import { InfiniteScrollerComponent } from '../../../shared/shared-main/angular/infinite-scroller.component'
 import { NgIf, NgFor } from '@angular/common'
 import { PluginNavigationComponent } from '../shared/plugin-navigation.component'
 
@@ -22,7 +22,7 @@ import { PluginNavigationComponent } from '../shared/plugin-navigation.component
   imports: [
     PluginNavigationComponent,
     NgIf,
-    InfiniteScrollerDirective,
+    InfiniteScrollerComponent,
     NgFor,
     PluginCardComponent,
     EditButtonComponent,
@@ -39,12 +39,14 @@ export class PluginListInstalledComponent implements OnInit {
     totalItems: null
   }
   sort = 'name'
+  hasMoreResults = true
+  isLoading = true
 
   plugins: PeerTubePlugin[] = []
   updating: { [name: string]: boolean } = {}
   uninstalling: { [name: string]: boolean } = {}
 
-  onDataSubject = new Subject<any[]>()
+  private hasInitialized = new ReplaySubject<boolean>()
 
   constructor (
     private pluginService: PluginService,
@@ -68,31 +70,35 @@ export class PluginListInstalledComponent implements OnInit {
 
       this.pluginType = parseInt(query['pluginType'], 10) as PluginType_Type
 
-      this.reloadPlugins()
+      this.hasInitialized.next(true)
     })
   }
 
-  reloadPlugins () {
-    this.pagination.currentPage = 1
-    this.plugins = []
-
-    this.loadMorePlugins()
-  }
-
-  loadMorePlugins () {
+  loadMorePlugins (reset = false) {
+    this.isLoading = true
     this.pluginApiService.getPlugins(this.pluginType, this.pagination, this.sort)
         .subscribe({
           next: res => {
+            if (reset) this.plugins = []
             this.plugins = this.plugins.concat(res.data)
             this.pagination.totalItems = res.total
+            this.hasMoreResults = (this.pagination.itemsPerPage * this.pagination.currentPage) < this.pagination.totalItems
 
-            this.onDataSubject.next(res.data)
+            this.isLoading = false
           },
 
           error: err => this.notifier.error(err.message)
         })
   }
 
+  onPageChange () {
+    this.hasInitialized.pipe(
+      distinct(),
+      filter(val => val)
+    )
+    .subscribe(() => this.loadMorePlugins(true))
+  }
+
   onNearOfBottom () {
     if (!hasMoreItems(this.pagination)) return
 

client/src/app/+admin/plugins/plugin-search/plugin-search.component.html

@@ -28,7 +28,14 @@
   No results.
 </div>
 
-<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<my-infinite-scroller
+  class="plugins"
+  [(currentPage)]="pagination.currentPage"
+  [isLoading]="isSearching"
+  (nearOfBottom)="onNearOfBottom()"
+  (pageChange)="onPageChange()"
+  [hasMore]="hasMoreResults"
+>
   <ng-container *ngFor="let plugin of plugins" >
     <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
       <div ngProjectAs="badges">
@@ -58,4 +65,4 @@
 
     </my-plugin-card>
   </ng-container>
-</div>
+</my-infinite-scroller>

client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts

@@ -1,5 +1,5 @@
-import { Subject } from 'rxjs'
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { ReplaySubject, Subject } from 'rxjs'
+import { debounceTime, distinct, distinctUntilChanged, filter } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
@@ -9,7 +9,7 @@ import { logger } from '@root-helpers/logger'
 import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component'
 import { EditButtonComponent } from '../../../shared/shared-main/buttons/edit-button.component'
 import { PluginCardComponent } from '../shared/plugin-card.component'
-import { InfiniteScrollerDirective } from '../../../shared/shared-main/angular/infinite-scroller.directive'
+import { InfiniteScrollerComponent } from '../../../shared/shared-main/angular/infinite-scroller.component'
 import { AutofocusDirective } from '../../../shared/shared-main/angular/autofocus.directive'
 import { GlobalIconComponent } from '../../../shared/shared-icons/global-icon.component'
 import { NgIf, NgFor } from '@angular/common'
@@ -25,7 +25,7 @@ import { PluginNavigationComponent } from '../shared/plugin-navigation.component
     NgIf,
     GlobalIconComponent,
     AutofocusDirective,
-    InfiniteScrollerDirective,
+    InfiniteScrollerComponent,
     NgFor,
     PluginCardComponent,
     EditButtonComponent,
@@ -41,17 +41,17 @@ export class PluginSearchComponent implements OnInit {
     totalItems: null
   }
   sort = '-trending'
+  hasMoreResults = true
 
   search = ''
-  isSearching = false
+  isSearching = true
 
   plugins: PeerTubePluginIndex[] = []
   installing: { [name: string]: boolean } = {}
   pluginInstalled = false
 
-  onDataSubject = new Subject<any[]>()
-
   private searchSubject = new Subject<string>()
+  private hasInitialized = new ReplaySubject<boolean>()
 
   constructor (
     private pluginService: PluginService,
@@ -73,10 +73,15 @@ export class PluginSearchComponent implements OnInit {
     this.route.queryParams.subscribe(query => {
       if (!query['pluginType']) return
 
+      const oldSearch = this.search
       this.pluginType = parseInt(query['pluginType'], 10) as PluginType_Type
       this.search = query['search'] || ''
+      this.hasInitialized.next(true)
 
-      this.reloadPlugins()
+      if (oldSearch !== this.search) {
+        this.pagination.currentPage = 1
+        this.onPageChange()
+      }
     })
 
     this.searchSubject.asObservable()
@@ -93,25 +98,19 @@ export class PluginSearchComponent implements OnInit {
     this.searchSubject.next(target.value)
   }
 
-  reloadPlugins () {
-    this.pagination.currentPage = 1
-    this.plugins = []
-
-    this.loadMorePlugins()
-  }
-
-  loadMorePlugins () {
+  loadMorePlugins (reset = false) {
     this.isSearching = true
 
     this.pluginApiService.searchAvailablePlugins(this.pluginType, this.pagination, this.sort, this.search)
         .subscribe({
           next: res => {
             this.isSearching = false
 
+            if (reset) this.plugins = []
+
             this.plugins = this.plugins.concat(res.data)
             this.pagination.totalItems = res.total
-
-            this.onDataSubject.next(res.data)
+            this.hasMoreResults = (this.pagination.itemsPerPage * this.pagination.currentPage) < this.pagination.totalItems
           },
 
           error: err => {
@@ -123,6 +122,14 @@ export class PluginSearchComponent implements OnInit {
         })
   }
 
+  onPageChange () {
+    this.hasInitialized.pipe(
+      distinct(),
+      filter(val => val)
+    )
+    .subscribe(() => this.loadMorePlugins(true))
+  }
+
   onNearOfBottom () {
     if (!hasMoreItems(this.pagination)) return