Fix live update of autoplay next video

2 files changed, 21 insertions, 10 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
index 5ac801622..2bbe26c96 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
@@ -14,7 +14,7 @@
     <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
       <span i18n *ngIf="!playlist && i === 0 && length !== 0 && autoPlayNextVideo" class="title-page-next-video-label">Next video to be played</span>
       <my-video-miniature
-        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
+        [displayOptions]="displayOptions" [video]="video" [user]="user" [displayAsRow]="displayAsRow"
         (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"
         actorImageSize="32"
       >
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts
index 97f742499..426f5d622 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts
@@ -1,5 +1,5 @@
-import { Observable } from 'rxjs'
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
+import { Observable, startWith, Subscription, switchMap } from 'rxjs'
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core'
 import { AuthService, Notifier, User, UserService } from '@app/core'
 import { Video } from '@app/shared/shared-main'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
@@ -12,7 +12,7 @@ import { RecommendedVideosStore } from './recommended-videos.store'
   templateUrl: './recommended-videos.component.html',
   styleUrls: [ './recommended-videos.component.scss' ]
 })
-export class RecommendedVideosComponent implements OnInit, OnChanges {
+export class RecommendedVideosComponent implements OnInit, OnChanges, OnDestroy {
   @Input() inputRecommendation: RecommendationInfo
   @Input() playlist: VideoPlaylist
   @Input() displayAsRow: boolean
@@ -29,7 +29,9 @@ export class RecommendedVideosComponent implements OnInit, OnChanges {
     avatar: true
   }
 
-  userMiniature: User
+  user: User
+
+  private userSub: Subscription
 
   readonly hasVideos$: Observable<boolean>
   readonly videos$: Observable<Video[]>
@@ -44,15 +46,20 @@ export class RecommendedVideosComponent implements OnInit, OnChanges {
     this.hasVideos$ = this.store.hasRecommendations$
     this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
 
-    this.userService.getAnonymousOrLoggedUser()
-      .subscribe(user => this.autoPlayNextVideo = user.autoPlayNextVideo)
-
     this.autoPlayNextVideoTooltip = $localize`When active, the next video is automatically played after the current one.`
   }
 
   ngOnInit () {
-    this.userService.getAnonymousOrLoggedUser()
-      .subscribe(user => this.userMiniature = user)
+    this.userSub = this.userService.listenAnonymousUpdate()
+      .pipe(
+        startWith(true),
+        switchMap(() => this.userService.getAnonymousOrLoggedUser())
+      )
+      .subscribe(user => {
+        this.user = user
+        this.autoPlayNextVideo = user.autoPlayNextVideo
+        console.log(this.autoPlayNextVideo)
+      })
   }
 
   ngOnChanges () {
@@ -61,6 +68,10 @@ export class RecommendedVideosComponent implements OnInit, OnChanges {
     }
   }
 
+  ngOnDestroy(): void {
+    if (this.userSub) this.userSub.unsubscribe()
+  }
+
   onVideoRemoved () {
     this.store.requestNewRecommendations(this.inputRecommendation)
   }