feat(client/infinite-scroll): SEO friendly

closes Chocobozzz#6332
kontrollanten · Sep 13, 2024 · 6cffd69 · 6cffd69
1 parent 77ea750
commit 6cffd69
Show file tree

Hide file tree

Showing 35 changed files with 253 additions and 123 deletions.
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -4,7 +4,12 @@ <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"
+    (nearOfBottom)="onNearOfBottom()"
+    [dataObservable]="onChannelDataSubject.asObservable()"
+    [hasMore]="hasMoreVideoChannels"
+  >
     <div class="channel" *ngFor="let videoChannel of videoChannels">
 
       <div class="channel-avatar-row">
@@ -52,5 +57,5 @@ <h2 class="fs-5 lh-1 fw-bold m-0">
         </div>
       </div>
     </div>
-  </div>
+  </my-infinite-scroller>
 </div>
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -8,7 +8,7 @@ import { MiniatureDisplayOptions, VideoMiniatureComponent } from '../../shared/s
 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,16 @@ 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 {
   account: Account
   videoChannels: VideoChannel[] = []
 
   videos: { [id: number]: { total: number, videos: Video[] } } = {}
 
+  hasMoreVideoChannels = true
+
   channelsDescriptionHTML: { [ id: number ]: string } = {}
 
   channelPagination: ComponentPagination = {
@@ -125,6 +127,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
         })
 
         this.videoChannels.push(videoChannel)
+        this.hasMoreVideoChannels = this.videoChannels.length < this.channelPagination.totalItems
 
         this.videos[videoChannel.id] = { videos, total }
 

diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -4,7 +4,12 @@
   {{ getNoResultMessage() }}
 </div>
 
-<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<my-infinite-scroller
+  class="plugins"
+  (nearOfBottom)="onNearOfBottom()"
+  [dataObservable]="onDataSubject.asObservable()"
+  [hasMore]="hasMoreResults"
+>
   <ng-container *ngFor="let plugin of plugins">
     <my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
       <div ngProjectAs="buttons">
@@ -27,4 +32,4 @@
       </div>
     </my-plugin-card>
   </ng-container>
-</div>
+</my-infinite-scroller>
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -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,6 +39,7 @@ export class PluginListInstalledComponent implements OnInit {
     totalItems: null
   }
   sort = 'name'
+  hasMoreResults = true
 
   plugins: PeerTubePlugin[] = []
   updating: { [name: string]: boolean } = {}
@@ -85,6 +86,7 @@ export class PluginListInstalledComponent implements OnInit {
           next: res => {
             this.plugins = this.plugins.concat(res.data)
             this.pagination.totalItems = res.total
+            this.hasMoreResults = this.plugins.length < this.pagination.totalItems
 
             this.onDataSubject.next(res.data)
           },

diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -28,7 +28,12 @@
   No results.
 </div>
 
-<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<my-infinite-scroller
+  class="plugins"
+  (nearOfBottom)="onNearOfBottom()"
+  [dataObservable]="onDataSubject.asObservable()"
+  [hasMore]="hasMoreResults"
+>
   <ng-container *ngFor="let plugin of plugins" >
     <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
       <div ngProjectAs="badges">
@@ -58,4 +63,4 @@
 
     </my-plugin-card>
   </ng-container>
-</div>
+</my-infinite-scroller>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -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,6 +41,7 @@ export class PluginSearchComponent implements OnInit {
     totalItems: null
   }
   sort = '-trending'
+  hasMoreResults = true
 
   search = ''
   isSearching = false
@@ -110,6 +111,7 @@ export class PluginSearchComponent implements OnInit {
 
             this.plugins = this.plugins.concat(res.data)
             this.pagination.totalItems = res.total
+            this.hasMoreResults = this.plugins.length < this.pagination.totalItems
 
             this.onDataSubject.next(res.data)
           },

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -26,7 +26,12 @@ <h1>
 
 <div class="no-results" i18n *ngIf="this.pagination.totalItems === 0">No channel found.</div>
 
-<div class="video-channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onChannelDataSubject.asObservable()">
+<my-infinite-scroller
+  class="video-channels"
+  (nearOfBottom)="onNearOfBottom()"
+  [dataObservable]="onChannelDataSubject.asObservable()"
+  [hasMore]="hasMoreResults"
+>
   <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
     <my-actor-avatar [actor]="videoChannel" actorType="channel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
 
@@ -67,4 +72,4 @@ <h1>
       </div>
     </div>
   </div>
-</div>
+</my-infinite-scroller>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -13,7 +13,7 @@ import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avat
 import { AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 import { DeferLoadingDirective } from '../../shared/shared-main/angular/defer-loading.directive'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
+import { InfiniteScrollerComponent } from '../../shared/shared-main/angular/infinite-scroller.component'
 import { NumberFormatterPipe } from '../../shared/shared-main/angular/number-formatter.pipe'
 import { DeleteButtonComponent } from '../../shared/shared-main/buttons/delete-button.component'
 import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
@@ -29,7 +29,7 @@ import { ChannelsSetupMessageComponent } from '../../shared/shared-main/misc/cha
     RouterLink,
     ChannelsSetupMessageComponent,
     AdvancedInputFilterComponent,
-    InfiniteScrollerDirective,
+    InfiniteScrollerComponent,
     NgFor,
     ActorAvatarComponent,
     EditButtonComponent,
@@ -41,6 +41,7 @@ import { ChannelsSetupMessageComponent } from '../../shared/shared-main/misc/cha
 })
 export class MyVideoChannelsComponent {
   videoChannels: VideoChannel[] = []
+  hasMoreResults = true
 
   videoChannelsChartData: ChartData[]
 
@@ -109,7 +110,9 @@ export class MyVideoChannelsComponent {
   }
 
   onNearOfBottom () {
-    if (!hasMoreItems(this.pagination)) return
+    if (!hasMoreItems(this.pagination)) {
+      return
+    }
 
     this.pagination.currentPage += 1
 
@@ -133,6 +136,7 @@ export class MyVideoChannelsComponent {
         switchMap(options => this.videoChannelService.listAccountVideoChannels(options))
       )
       .subscribe(res => {
+        this.hasMoreResults = res.data.length === this.pagination.itemsPerPage
         this.videoChannels = this.videoChannels.concat(res.data)
         this.pagination.totalItems = res.total
 

diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -12,7 +12,12 @@ <h1>
 
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">No follower found.</div>
 
-<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<my-infinite-scroller
+  class="actors"
+  (nearOfBottom)="onNearOfBottom()"
+  [dataObservable]="onDataSubject.asObservable()"
+  [hasMore]="hasMoreResults"
+>
   <div *ngFor="let follow of follows" class="actor">
     <my-actor-avatar [actor]="follow.follower" actorType="account" [href]="follow.follower.url" size="40"></my-actor-avatar>
 
@@ -28,4 +33,4 @@ <h1>
       </div>
     </div>
   </div>
-</div>
+</my-infinite-scroller>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.ts b/client/src/app/+my-library/my-follows/my-followers.component.ts
@@ -8,16 +8,17 @@ import { Subject } from 'rxjs'
 import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
 import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
+import { InfiniteScrollerComponent } from '../../shared/shared-main/angular/infinite-scroller.component'
 
 @Component({
   templateUrl: './my-followers.component.html',
   styleUrls: [ './my-followers.component.scss' ],
   standalone: true,
-  imports: [ GlobalIconComponent, NgIf, AdvancedInputFilterComponent, InfiniteScrollerDirective, NgFor, ActorAvatarComponent ]
+  imports: [ GlobalIconComponent, NgIf, AdvancedInputFilterComponent, InfiniteScrollerComponent, NgFor, ActorAvatarComponent ]
 })
 export class MyFollowersComponent implements OnInit {
   follows: ActorFollow[] = []
+  hasMoreResults = true
 
   pagination: ComponentPagination = {
     currentPage: 1,
@@ -59,7 +60,9 @@ export class MyFollowersComponent implements OnInit {
 
   onNearOfBottom () {
     // Last page
-    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) {
+      return
+    }
 
     this.pagination.currentPage += 1
     this.loadFollowers()
@@ -81,6 +84,7 @@ export class MyFollowersComponent implements OnInit {
       search: this.search
     }).subscribe({
       next: res => {
+        this.hasMoreResults = res.data.length === this.pagination.itemsPerPage
         this.follows = more
           ? this.follows.concat(res.data)
           : res.data

diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -12,7 +12,12 @@ <h1>
 
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
 
-<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+<my-infinite-scroller
+  class="actors"
+  (nearOfBottom)="onNearOfBottom()"
+  [dataObservable]="onDataSubject.asObservable()"
+  [hasMore]="hasMoreResults"
+>
   <div *ngFor="let videoChannel of videoChannels" class="actor">
     <my-actor-avatar [actor]="videoChannel" actorType="channel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
 
@@ -33,4 +38,4 @@ <h1>
 
     <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
   </div>
-</div>
+</my-infinite-scroller>
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.ts b/client/src/app/+my-library/my-follows/my-subscriptions.component.ts
@@ -4,7 +4,7 @@ import { ComponentPagination, Notifier } from '@app/core'
 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 { AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
 import { NgIf, NgFor } from '@angular/common'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
@@ -19,7 +19,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription/us
     GlobalIconComponent,
     NgIf,
     AdvancedInputFilterComponent,
-    InfiniteScrollerDirective,
+    InfiniteScrollerComponent,
     NgFor,
     ActorAvatarComponent,
     RouterLink,
@@ -28,6 +28,7 @@ import { UserSubscriptionService } from '@app/shared/shared-user-subscription/us
 })
 export class MySubscriptionsComponent {
   videoChannels: VideoChannel[] = []
+  hasMoreResults = true
 
   pagination: ComponentPagination = {
     currentPage: 1,
@@ -46,7 +47,9 @@ export class MySubscriptionsComponent {
 
   onNearOfBottom () {
     // Last page
-    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) {
+      return
+    }
 
     this.pagination.currentPage += 1
     this.loadSubscriptions()
@@ -61,6 +64,7 @@ export class MySubscriptionsComponent {
     this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
         .subscribe({
           next: res => {
+            this.hasMoreResults = res.data.length === this.pagination.itemsPerPage
             this.videoChannels = more
               ? this.videoChannels.concat(res.data)
               : res.data

diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@@ -33,8 +33,8 @@
       </div>
     </div>
 
-    <div
-      class="videos" myInfiniteScroller (nearOfBottom)="onNearOfBottom()"
+    <my-infinite-scroller
+      class="videos" (nearOfBottom)="onNearOfBottom()"
       cdkDropList (cdkDropListDropped)="drop($event)" [dataObservable]="onDataSubject.asObservable()"
     >
       <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag [cdkDragStartDelay]="getDragStartDelay()">
@@ -44,7 +44,7 @@
         >
         </my-video-playlist-element-miniature>
       </div>
-    </div>
+    </my-infinite-scroller>
   </div>
 </div>
 

diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { ComponentPagination, ConfirmService, HooksService, Notifier, ScreenService } from '@app/core'
 import { VideoPlaylistType } from '@peertube/peertube-models'
 import { VideoPlaylistElementMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-element-miniature.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
+import { InfiniteScrollerComponent } from '../../shared/shared-main/angular/infinite-scroller.component'
 import { ActionDropdownComponent, DropdownAction } from '../../shared/shared-main/buttons/action-dropdown.component'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 import { VideoPlaylistMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-miniature.component'
@@ -24,7 +24,7 @@ import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-pl
     VideoPlaylistMiniatureComponent,
     GlobalIconComponent,
     ActionDropdownComponent,
-    InfiniteScrollerDirective,
+    InfiniteScrollerComponent,
     CdkDropList,
     NgFor,
     CdkDrag,