Fix broken infinite scroll when deleting items

Signed-off-by: Chocobozzz <me@florianbigard.com>

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

@@ -2,7 +2,7 @@ import { NgFor, NgIf } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
-import { ComponentPagination, ConfirmService, hasMoreItems, Notifier } from '@app/core'
+import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, resetCurrentPage, updatePaginationOnDelete } from '@app/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { compareSemVer } from '@peertube/peertube-core-utils'
 import { PeerTubePlugin, PluginType, PluginType_Type } from '@peertube/peertube-models'
@@ -69,8 +69,8 @@ export class PluginListInstalledComponent implements OnInit {
   }
 
   reloadPlugins () {
-    this.pagination.currentPage = 1
     this.plugins = []
+    resetCurrentPage(this.pagination)
 
     this.loadMorePlugins()
   }
@@ -143,7 +143,7 @@ export class PluginListInstalledComponent implements OnInit {
           this.notifier.success($localize`${plugin.name} uninstalled.`)
 
           this.plugins = this.plugins.filter(p => p.name !== plugin.name)
-          this.pagination.totalItems--
+          updatePaginationOnDelete(this.pagination)
 
           this.uninstalling[pluginKey] = false
         },

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

@@ -2,7 +2,7 @@ import { NgFor, NgIf } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
-import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService } from '@app/core'
+import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService, resetCurrentPage } from '@app/core'
 import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
 import { PeerTubePluginIndex, PluginType, PluginType_Type } from '@peertube/peertube-models'
 import { logger } from '@root-helpers/logger'
@@ -94,7 +94,7 @@ export class PluginSearchComponent implements OnInit {
   }
 
   reloadPlugins () {
-    this.pagination.currentPage = 1
+    resetCurrentPage(this.pagination)
     this.plugins = []
 
     this.loadMorePlugins()

client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts

@@ -1,7 +1,16 @@
 import { NgFor, NgIf } from '@angular/common'
 import { Component } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, hasMoreItems } from '@app/core'
+import {
+  AuthService,
+  ComponentPagination,
+  ConfirmService,
+  Notifier,
+  ScreenService,
+  hasMoreItems,
+  resetCurrentPage,
+  updatePaginationOnDelete
+} from '@app/core'
 import { formatICU } from '@app/helpers'
 import { VideoChannel } from '@app/shared/shared-main/channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/shared-main/channel/video-channel.service'
@@ -12,12 +21,12 @@ import { Subject, first, map, switchMap } from 'rxjs'
 import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
 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/common/defer-loading.directive'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
-import { NumberFormatterPipe } from '../../shared/shared-main/common/number-formatter.pipe'
 import { DeleteButtonComponent } from '../../shared/shared-main/buttons/delete-button.component'
 import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
 import { ChannelsSetupMessageComponent } from '../../shared/shared-main/channel/channels-setup-message.component'
+import { DeferLoadingDirective } from '../../shared/shared-main/common/defer-loading.directive'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
+import { NumberFormatterPipe } from '../../shared/shared-main/common/number-formatter.pipe'
 
 type CustomChartData = (ChartData & { startDate: string, total: number })
 
@@ -75,7 +84,7 @@ export class MyVideoChannelsComponent {
   onSearch (search: string) {
     this.search = search
 
-    this.pagination.currentPage = 1
+    resetCurrentPage(this.pagination)
     this.videoChannels = []
     this.pagesDone.clear()
 
@@ -105,6 +114,8 @@ export class MyVideoChannelsComponent {
         next: () => {
           this.videoChannels = this.videoChannels.filter(c => c.id !== videoChannel.id)
           this.notifier.success($localize`Video channel ${videoChannel.displayName} deleted.`)
+
+          updatePaginationOnDelete(this.pagination)
         },
 
         error: err => this.notifier.error(err.message)

client/src/app/+my-library/my-follows/my-followers.component.ts

@@ -1,15 +1,15 @@
 import { NgFor, NgIf } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService, ComponentPagination, Notifier } from '@app/core'
+import { AuthService, ComponentPagination, Notifier, resetCurrentPage } from '@app/core'
+import { formatICU } from '@app/helpers'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription/user-subscription.service'
 import { ActorFollow } from '@peertube/peertube-models'
 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/common/infinite-scroller.directive'
-import { formatICU } from '@app/helpers'
 
 @Component({
   templateUrl: './my-followers.component.html',
@@ -68,7 +68,7 @@ export class MyFollowersComponent implements OnInit {
 
   onSearch (search: string) {
     this.search = search
-    this.pagination.currentPage = 1
+    resetCurrentPage(this.pagination)
 
     this.loadFollowers(false)
   }

client/src/app/+my-library/my-follows/my-subscriptions.component.ts

@@ -1,16 +1,16 @@
-import { Subject } from 'rxjs'
+import { NgFor, NgIf } from '@angular/common'
 import { Component } from '@angular/core'
-import { ComponentPagination, Notifier } from '@app/core'
-import { SubscribeButtonComponent } from '../../shared/shared-user-subscription/subscribe-button.component'
 import { RouterLink } from '@angular/router'
+import { ComponentPagination, Notifier, resetCurrentPage } from '@app/core'
+import { formatICU } from '@app/helpers'
+import { VideoChannel } from '@app/shared/shared-main/channel/video-channel.model'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription/user-subscription.service'
+import { Subject } from 'rxjs'
 import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
 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'
-import { VideoChannel } from '@app/shared/shared-main/channel/video-channel.model'
-import { UserSubscriptionService } from '@app/shared/shared-user-subscription/user-subscription.service'
-import { formatICU } from '@app/helpers'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
+import { SubscribeButtonComponent } from '../../shared/shared-user-subscription/subscribe-button.component'
 
 @Component({
   templateUrl: './my-subscriptions.component.html',
@@ -55,7 +55,7 @@ export class MySubscriptionsComponent {
 
   onSearch (search: string) {
     this.search = search
-    this.pagination.currentPage = 1
+    resetCurrentPage(this.pagination)
 
     this.loadSubscriptions(false)
   }

client/src/app/+my-library/my-history/my-history.component.ts

@@ -1,7 +1,15 @@
-import { NgIf } from '@angular/common'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { AuthService, ComponentPagination, ConfirmService, DisableForReuseHook, Notifier, User, UserService } from '@app/core'
+import {
+  AuthService,
+  ComponentPagination,
+  ConfirmService,
+  DisableForReuseHook,
+  Notifier,
+  updatePaginationOnDelete,
+  User,
+  UserService
+} from '@app/core'
 import { immutableAssign } from '@app/helpers'
 import { ButtonComponent } from '@app/shared/shared-main/buttons/button.component'
 import { UserHistoryService } from '@app/shared/shared-main/users/user-history.service'
@@ -11,7 +19,6 @@ import { VideosSelectionComponent } from '@app/shared/shared-video-miniature/vid
 import { tap } from 'rxjs/operators'
 import { AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
 import { InputSwitchComponent } from '../../shared/shared-forms/input-switch.component'
-import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 import { DeleteButtonComponent } from '../../shared/shared-main/buttons/delete-button.component'
 import { PeerTubeTemplateDirective } from '../../shared/shared-main/common/peertube-template.directive'
 
@@ -21,8 +28,6 @@ import { PeerTubeTemplateDirective } from '../../shared/shared-main/common/peert
   standalone: true,
   imports: [
     ButtonComponent,
-    GlobalIconComponent,
-    NgIf,
     AdvancedInputFilterComponent,
     InputSwitchComponent,
     FormsModule,
@@ -132,6 +137,7 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
       .subscribe({
         next: () => {
           this.videos = this.videos.filter(v => v.id !== video.id)
+          updatePaginationOnDelete(this.pagination)
         },
 
         error: err => this.notifier.error(err.message)

client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts

@@ -2,7 +2,7 @@ import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop'
 import { NgFor, NgIf } from '@angular/common'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { ComponentPagination, ConfirmService, HooksService, Notifier, ScreenService } from '@app/core'
+import { ComponentPagination, ConfirmService, HooksService, Notifier, ScreenService, updatePaginationOnDelete } from '@app/core'
 import { ButtonComponent } from '@app/shared/shared-main/buttons/button.component'
 import { VideoShareComponent } from '@app/shared/shared-share-modal/video-share.component'
 import { VideoPlaylistElement } from '@app/shared/shared-video-playlist/video-playlist-element.model'
@@ -121,6 +121,7 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
     const oldFirst = this.findFirst()
 
     this.playlistElements = this.playlistElements.filter(v => v.id !== element.id)
+    updatePaginationOnDelete(this.pagination)
     this.reorderClientPositions(oldFirst)
   }
 
@@ -184,13 +185,12 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
       'my-library',
       'filter:api.my-library.video-playlist-elements.list.params',
       'filter:api.my-library.video-playlist-elements.list.result'
-    )
-        .subscribe(({ total, data }) => {
-          this.playlistElements = this.playlistElements.concat(data)
-          this.pagination.totalItems = total
+    ).subscribe(({ total, data }) => {
+      this.playlistElements = this.playlistElements.concat(data)
+      this.pagination.totalItems = total
 
-          this.onDataSubject.next(data)
-        })
+      this.onDataSubject.next(data)
+    })
   }
 
   private loadPlaylistInfo () {

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts

@@ -1,7 +1,7 @@
 import { NgFor, NgIf } from '@angular/common'
 import { Component } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, Notifier } from '@app/core'
+import { AuthService, ComponentPagination, ConfirmService, Notifier, resetCurrentPage, updatePaginationOnDelete } from '@app/core'
 import { formatICU } from '@app/helpers'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-playlist.service'
@@ -61,8 +61,8 @@ export class MyVideoPlaylistsComponent {
     this.videoPlaylistService.removeVideoPlaylist(videoPlaylist)
       .subscribe({
         next: () => {
-          this.videoPlaylists = this.videoPlaylists
-                                    .filter(p => p.id !== videoPlaylist.id)
+          this.videoPlaylists = this.videoPlaylists.filter(p => p.id !== videoPlaylist.id)
+          updatePaginationOnDelete(this.pagination)
 
           this.notifier.success($localize`Playlist ${videoPlaylist.displayName} deleted.`)
         },
@@ -85,7 +85,7 @@ export class MyVideoPlaylistsComponent {
 
   onSearch (search: string) {
     this.search = search
-    this.pagination.currentPage = 1
+    resetCurrentPage(this.pagination)
 
     this.loadVideoPlaylists(true)
   }

client/src/app/+my-library/my-videos/my-videos.component.ts

@@ -2,7 +2,16 @@ import { NgIf } from '@angular/common'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { ActivatedRoute, Router, RouterLink } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
+import {
+  AuthService,
+  ComponentPagination,
+  ConfirmService,
+  Notifier,
+  ScreenService,
+  ServerService,
+  updatePaginationOnDelete,
+  User
+} from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { formatICU, immutableAssign } from '@app/helpers'
 import { DropdownAction } from '@app/shared/shared-main/buttons/action-dropdown.component'
@@ -256,6 +265,8 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
 
   private removeVideoFromArray (id: number) {
     this.videos = this.videos.filter(v => v.id !== id)
+
+    updatePaginationOnDelete(this.pagination)
   }
 
   private buildActions () {

client/src/app/+search/search.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router'
 import { AuthService, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core'
 import { immutableAssign, SimpleMemoize } from '@app/helpers'
 import { validateHost } from '@app/shared/form-validators/host-validators'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 import { VideoChannel } from '@app/shared/shared-main/channel/video-channel.model'
 import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
 import { Video } from '@app/shared/shared-main/video/video.model'
@@ -21,7 +22,6 @@ import { SubscribeButtonComponent } from '../shared/shared-user-subscription/sub
 import { MiniatureDisplayOptions, VideoMiniatureComponent } from '../shared/shared-video-miniature/video-miniature.component'
 import { VideoPlaylistMiniatureComponent } from '../shared/shared-video-playlist/video-playlist-miniature.component'
 import { SearchFiltersComponent } from './search-filters.component'
-import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 
 @Component({
   selector: 'my-search',
@@ -54,6 +54,8 @@ export class SearchComponent implements OnInit, OnDestroy {
     currentPage: 1,
     totalItems: null as number
   }
+  deletedVideos = 0
+
   advancedSearch: AdvancedSearch = new AdvancedSearch()
   isSearchFilterCollapsed = true
   currentSearch: string
@@ -222,7 +224,10 @@ export class SearchComponent implements OnInit, OnDestroy {
 
   // Add VideoChannel/VideoPlaylist for typings, but the template already checks "video" argument is a video
   removeVideoFromArray (video: Video | VideoChannel | VideoPlaylist) {
+    const previous = this.results
     this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
+
+    if (previous.length !== this.results.length) this.deletedVideos++
   }
 
   getLinkType (): LinkType {
@@ -281,6 +286,7 @@ export class SearchComponent implements OnInit, OnDestroy {
   private resetPagination () {
     this.pagination.currentPage = 1
     this.pagination.totalItems = null
+    this.deletedVideos = 0
 
     this.results = []
   }
@@ -305,7 +311,7 @@ export class SearchComponent implements OnInit, OnDestroy {
   private getVideosObs () {
     const params = {
       search: this.currentSearch,
-      componentPagination: immutableAssign(this.pagination, { itemsPerPage: 10 }),
+      componentPagination: immutableAssign(this.pagination, { itemsPerPage: 10, itemsRemoved: this.deletedVideos }),
       advancedSearch: this.advancedSearch
     }
 

client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts

@@ -1,13 +1,13 @@
-import { Subject, Subscription } from 'rxjs'
+import { NgFor, NgIf } from '@angular/common'
 import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems, HooksService, ScreenService } from '@app/core'
-import { VideoPlaylistMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-miniature.component'
-import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
-import { NgIf, NgFor } from '@angular/common'
+import { ComponentPagination, hasMoreItems, HooksService, resetCurrentPage, ScreenService } from '@app/core'
 import { VideoChannel } from '@app/shared/shared-main/channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/shared-main/channel/video-channel.service'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-playlist.service'
+import { Subject, Subscription } from 'rxjs'
+import { InfiniteScrollerDirective } from '../../shared/shared-main/common/infinite-scroller.directive'
+import { VideoPlaylistMiniatureComponent } from '../../shared/shared-video-playlist/video-playlist-miniature.component'
 
 @Component({
   selector: 'my-video-channel-playlists',
@@ -46,7 +46,7 @@ export class VideoChannelPlaylistsComponent implements OnInit, AfterViewInit, On
         this.hooks.runAction('action:video-channel-playlists.video-channel.loaded', 'video-channel', { videoChannel })
 
         this.videoPlaylists = []
-        this.pagination.currentPage = 1
+        resetCurrentPage(this.pagination)
         this.loadVideoPlaylists()
       })
   }