Correctly disable infinite scroll for reuse

diff --git a/client/src/app/core/routing/custom-reuse-strategy.ts b/client/src/app/core/routing/custom-reuse-strategy.ts
index 3000093a8df8f737d57342a7517b440cd02d922e..1498e221fbf387533c4c9864b5be704045dca14e 100644 (file)
--- a/client/src/app/core/routing/custom-reuse-strategy.ts
+++ b/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)
 

diff --git a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
index bebc6efa7d06f4fc8809c9de81a4f7d6454eebea..c247cfde2d92f39d0a1a7dced6728a188960d5cf 100644 (file)
--- a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
+++ b/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()
       })

diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 67933f177743c1aeffc60155be24664bd98dd73b..2b554517f7b1202a8db2782d0aeba7790b7cd039 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/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;">

diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index f2af874ddec2715bb6b45daab06f641cd1a4c205..6ea2661e4d783565105c3a7d4a52c6b4b7a3b802 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/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">