Correctly disable infinite scroll for reuse

client/src/app/core/routing/custom-reuse-strategy.ts

@@ -1,7 +1,7 @@
-import { Injectable } from '@angular/core'
+import { ComponentRef, Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'
-import { RouterSetting } from './'
-import { PeerTubeRouterService } from './peertube-router.service'
+import { DisableForReuseHook } from './disable-for-reuse-hook'
+import { PeerTubeRouterService, RouterSetting } from './peertube-router.service'
 
 @Injectable()
 export class CustomReuseStrategy implements RouteReuseStrategy {
@@ -22,9 +22,11 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     const key = this.generateKey(route)
     this.recentlyUsed = key
 
-    console.log('Storing component %s to reuse later.', key);
+    console.log('Storing component %s to reuse later.', key)
 
-    (handle as any).componentRef.instance.disableForReuse()
+    const componentRef = (handle as any).componentRef as ComponentRef<DisableForReuseHook>
+    componentRef.instance.disableForReuse()
+    componentRef.changeDetectorRef.detectChanges()
 
     this.storedRouteHandles.set(key, handle)
 

client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts

@@ -13,6 +13,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh
 
   // Add angular state in query params to reuse the routed component
   @Input() setAngularState: boolean
+  @Input() parentDisabled = false
 
   @Output() nearOfBottom = new EventEmitter<void>()
 
@@ -74,7 +75,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterViewCh
         filter(({ current, maximumScroll }) => (current / maximumScroll) > this.decimalLimit)
       )
       .subscribe(() => {
-        if (this.setAngularState) this.setScrollRouteParams()
+        if (this.setAngularState && !this.parentDisabled) this.setScrollRouteParams()
 
         this.nearOfBottom.emit()
       })

client/src/app/shared/shared-video-miniature/videos-list.component.html

@@ -40,7 +40,8 @@
 
   <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
   <div
-    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" [setAngularState]="true"
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"
+    [setAngularState]="true" [parentDisabled]="disabled"
     class="videos" [ngClass]="{ 'display-as-row': displayAsRow }"
   >
     <ng-container *ngFor="let video of videos; trackBy: videoById;">

client/src/app/shared/shared-video-miniature/videos-selection.component.html

@@ -2,7 +2,8 @@
 
 <div
   class="videos"
-  myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" [setAngularState]="true"
+  myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"
+  [parentDisabled]="disabled" [setAngularState]="true"
 >
   <div class="video" *ngFor="let video of videos; let i = index; trackBy: videoById">