Don't get recommended videos twice

3 files changed, 12 insertions, 8 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 834428fa4..7a61e355a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -1,4 +1,4 @@
-import { catchError, subscribeOn } from 'rxjs/operators'
+import { catchError } from 'rxjs/operators'
 import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RedirectService } from '@app/core/routing/redirect.service'
diff --git a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
index 4723f7fd0..0ee34b9cb 100644
--- a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
+++ b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
@@ -25,8 +25,8 @@ export class RecentVideosRecommendationService implements RecommendationService
   getRecommendations (recommendation: RecommendationInfo): Observable<Video[]> {
     return this.fetchPage(1, recommendation)
       .pipe(
-        map(vids => {
-          const otherVideos = vids.filter(v => v.uuid !== recommendation.uuid)
+        map(videos => {
+          const otherVideos = videos.filter(v => v.uuid !== recommendation.uuid)
           return otherVideos.slice(0, this.pageSize)
         })
       )
diff --git a/client/src/app/videos/recommendations/recommended-videos.store.ts b/client/src/app/videos/recommendations/recommended-videos.store.ts
index eb5c9867f..858ec3a27 100644
--- a/client/src/app/videos/recommendations/recommended-videos.store.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.store.ts
@@ -3,8 +3,8 @@ import { Observable, ReplaySubject } from 'rxjs'
 import { Video } from '@app/shared/video/video.model'
 import { RecommendationInfo } from '@app/shared/video/recommendation-info.model'
 import { RecentVideosRecommendationService } from '@app/videos/recommendations/recent-videos-recommendation.service'
-import { RecommendationService, UUID } from '@app/videos/recommendations/recommendations.service'
-import { map, switchMap, take } from 'rxjs/operators'
+import { RecommendationService } from '@app/videos/recommendations/recommendations.service'
+import { map, shareReplay, switchMap, take } from 'rxjs/operators'
 
 /**
  * This store is intended to provide data for the RecommendedVideosComponent.
@@ -19,9 +19,13 @@ export class RecommendedVideosStore {
     @Inject(RecentVideosRecommendationService) private recommendations: RecommendationService
   ) {
     this.recommendations$ = this.requestsForLoad$$.pipe(
-      switchMap(requestedRecommendation => recommendations.getRecommendations(requestedRecommendation)
-        .pipe(take(1))
-      ))
+      switchMap(requestedRecommendation => {
+        return recommendations.getRecommendations(requestedRecommendation)
+                              .pipe(take(1))
+      }),
+      shareReplay()
+    )
+
     this.hasRecommendations$ = this.recommendations$.pipe(
       map(otherVideos => otherVideos.length > 0)
     )