Refactor: Separated "Other Videos" section into a dedicated component/service (#969)

* Separated "Other Videos" section into a dedicated component/service

I'm currently working on some proof-of-concepts for recommendation
providers that could work with PeerTube to provide useful video
suggestions to the user.

As a first step, I want to have great clarity about how PeerTube,
itself, will surface these videos to the user.

With this branch, I'm refactoring the "recommendations" to make it
easier to swap out different recommender implementations quickly.

Stop recommender from including the video that's being watched.

Ensure always 5 recommendations

* Treat recommendations as a stream of values, rather than a single async value.

* Prioritize readability over HTTP response size early-optimization.

* Simplify pipe

8 files changed, 234 insertions, 0 deletions

diff --git a/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts b/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts
new file mode 100644
index 000000000..f9055b82c
--- /dev/null
+++ b/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts
@@ -0,0 +1,66 @@
+import { RecentVideosRecommendationService } from '@app/videos/recommendations/recent-videos-recommendation.service'
+import { VideosProvider } from '@app/shared/video/video.service'
+import { EMPTY, of } from 'rxjs'
+import Mock = jest.Mock
+
+describe('"Recent Videos" Recommender', () => {
+  describe('getRecommendations', () => {
+    let videosService: VideosProvider
+    let service: RecentVideosRecommendationService
+    let getVideosMock: Mock<any>
+    beforeEach(() => {
+      getVideosMock = jest.fn(() => EMPTY)
+      videosService = {
+        getVideos: getVideosMock
+      }
+      service = new RecentVideosRecommendationService(videosService)
+    })
+    it('should filter out the given UUID from the results', async (done) => {
+      const vids = [
+        { uuid: 'uuid1' },
+        { uuid: 'uuid2' }
+      ]
+      getVideosMock.mockReturnValueOnce(of({ videos: vids }))
+      const result = await service.getRecommendations('uuid1').toPromise()
+      const uuids = result.map(v => v.uuid)
+      expect(uuids).toEqual(['uuid2'])
+      done()
+    })
+    it('should return 5 results when the given UUID is NOT in the first 5 results', async (done) => {
+      const vids = [
+        { uuid: 'uuid2' },
+        { uuid: 'uuid3' },
+        { uuid: 'uuid4' },
+        { uuid: 'uuid5' },
+        { uuid: 'uuid6' },
+        { uuid: 'uuid7' }
+      ]
+      getVideosMock.mockReturnValueOnce(of({ videos: vids }))
+      const result = await service.getRecommendations('uuid1').toPromise()
+      expect(result.length).toEqual(5)
+      done()
+    })
+    it('should return 5 results when the given UUID IS PRESENT in the first 5 results', async (done) => {
+      const vids = [
+        { uuid: 'uuid1' },
+        { uuid: 'uuid2' },
+        { uuid: 'uuid3' },
+        { uuid: 'uuid4' },
+        { uuid: 'uuid5' },
+        { uuid: 'uuid6' }
+      ]
+      getVideosMock
+        .mockReturnValueOnce(of({ videos: vids }))
+      const result = await service.getRecommendations('uuid1').toPromise()
+      expect(result.length).toEqual(5)
+      done()
+    })
+    it('should fetch an extra result in case the given UUID is in the list', async (done) => {
+      await service.getRecommendations('uuid1').toPromise()
+      let expectedSize = service.pageSize + 1
+      let params = { currentPage: jasmine.anything(), itemsPerPage: expectedSize }
+      expect(getVideosMock).toHaveBeenCalledWith(params, jasmine.anything())
+      done()
+    })
+  })
+})
diff --git a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
new file mode 100644
index 000000000..708d67699
--- /dev/null
+++ b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
@@ -0,0 +1,39 @@
+import { Inject, Injectable } from '@angular/core'
+import { RecommendationService } from '@app/videos/recommendations/recommendations.service'
+import { Video } from '@app/shared/video/video.model'
+import { VideoService, VideosProvider } from '@app/shared/video/video.service'
+import { map } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+
+/**
+ * Provides "recommendations" by providing the most recently uploaded videos.
+ */
+@Injectable()
+export class RecentVideosRecommendationService implements RecommendationService {
+
+  readonly pageSize = 5
+
+  constructor (
+    @Inject(VideoService) private videos: VideosProvider
+  ) {
+  }
+
+  getRecommendations (uuid: string): Observable<Video[]> {
+    return this.fetchPage(1)
+      .pipe(
+        map(vids => {
+          const otherVideos = vids.filter(v => v.uuid !== uuid)
+          return otherVideos.slice(0, this.pageSize)
+        })
+      )
+  }
+
+  private fetchPage (page: number): Observable<Video[]> {
+    let pagination = { currentPage: page, itemsPerPage: this.pageSize + 1 }
+    return this.videos.getVideos(pagination, '-createdAt')
+      .pipe(
+        map(v => v.videos)
+      )
+  }
+
+}
diff --git a/client/src/app/videos/recommendations/recommendations.module.ts b/client/src/app/videos/recommendations/recommendations.module.ts
new file mode 100644
index 000000000..5a46ea739
--- /dev/null
+++ b/client/src/app/videos/recommendations/recommendations.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core'
+import { RecommendedVideosComponent } from '@app/videos/recommendations/recommended-videos.component'
+import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
+import { CommonModule } from '@angular/common'
+import { SharedModule } from '@app/shared'
+import { RecentVideosRecommendationService } from '@app/videos/recommendations/recent-videos-recommendation.service'
+
+@NgModule({
+  imports: [
+    SharedModule,
+    CommonModule
+  ],
+  declarations: [
+    RecommendedVideosComponent
+  ],
+  exports: [
+    RecommendedVideosComponent
+  ],
+  providers: [
+    RecommendedVideosStore,
+    RecentVideosRecommendationService
+  ]
+})
+export class RecommendationsModule {
+}
diff --git a/client/src/app/videos/recommendations/recommendations.service.ts b/client/src/app/videos/recommendations/recommendations.service.ts
new file mode 100644
index 000000000..44cbda9b7
--- /dev/null
+++ b/client/src/app/videos/recommendations/recommendations.service.ts
@@ -0,0 +1,8 @@
+import { Video } from '@app/shared/video/video.model'
+import { Observable } from 'rxjs'
+
+export type UUID = string
+
+export interface RecommendationService {
+  getRecommendations (uuid: UUID): Observable<Video[]>
+}
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
new file mode 100644
index 000000000..7cfaffec2
--- /dev/null
+++ b/client/src/app/videos/recommendations/recommended-videos.component.html
@@ -0,0 +1,11 @@
+<div class="other-videos">
+    <div i18n class="title-page title-page-single">
+        Other videos
+    </div>
+
+    <ng-container *ngIf="hasVideos$ | async">
+        <div *ngFor="let video of (videos$ | async)">
+            <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
+        </div>
+    </ng-container>
+</div>
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts
new file mode 100644
index 000000000..aa4dd0ee2
--- /dev/null
+++ b/client/src/app/videos/recommendations/recommended-videos.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, OnChanges } from '@angular/core'
+import { Observable } from 'rxjs'
+import { Video } from '@app/shared/video/video.model'
+import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
+import { User } from '@app/shared'
+
+@Component({
+  selector: 'my-recommended-videos',
+  templateUrl: './recommended-videos.component.html'
+})
+export class RecommendedVideosComponent implements OnChanges {
+  @Input() inputVideo: Video
+  @Input() user: User
+
+  readonly hasVideos$: Observable<boolean>
+  readonly videos$: Observable<Video[]>
+
+  constructor (
+    private store: RecommendedVideosStore
+  ) {
+    this.videos$ = this.store.recommendations$
+    this.hasVideos$ = this.store.hasRecommendations$
+  }
+
+  public ngOnChanges (): void {
+    if (this.inputVideo) {
+      this.store.requestNewRecommendations(this.inputVideo.uuid)
+    }
+  }
+
+}
diff --git a/client/src/app/videos/recommendations/recommended-videos.store.spec.ts b/client/src/app/videos/recommendations/recommended-videos.store.spec.ts
new file mode 100644
index 000000000..e12a3f520
--- /dev/null
+++ b/client/src/app/videos/recommendations/recommended-videos.store.spec.ts
@@ -0,0 +1,22 @@
+import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
+import { RecommendationService } from '@app/videos/recommendations/recommendations.service'
+
+describe('RecommendedVideosStore', () => {
+  describe('requestNewRecommendations', () => {
+    let store: RecommendedVideosStore
+    let service: RecommendationService
+    beforeEach(() => {
+      service = {
+        getRecommendations: jest.fn(() => new Promise((r) => r()))
+      }
+      store = new RecommendedVideosStore(service)
+    })
+    it('should pull new videos from the service one time when given the same UUID twice', () => {
+      store.requestNewRecommendations('some-uuid')
+      store.requestNewRecommendations('some-uuid')
+      // Requests aren't fulfilled until someone asks for them (ie: subscribes)
+      store.recommendations$.subscribe()
+      expect(service.getRecommendations).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/client/src/app/videos/recommendations/recommended-videos.store.ts b/client/src/app/videos/recommendations/recommended-videos.store.ts
new file mode 100644
index 000000000..689adeb1f
--- /dev/null
+++ b/client/src/app/videos/recommendations/recommended-videos.store.ts
@@ -0,0 +1,32 @@
+import { Inject, Injectable } from '@angular/core'
+import { Observable, ReplaySubject } from 'rxjs'
+import { Video } from '@app/shared/video/video.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'
+
+/**
+ * This store is intended to provide data for the RecommendedVideosComponent.
+ */
+@Injectable()
+export class RecommendedVideosStore {
+  public readonly recommendations$: Observable<Video[]>
+  public readonly hasRecommendations$: Observable<boolean>
+  private readonly requestsForLoad$$ = new ReplaySubject<UUID>(1)
+
+  constructor (
+    @Inject(RecentVideosRecommendationService) private recommendations: RecommendationService
+  ) {
+    this.recommendations$ = this.requestsForLoad$$.pipe(
+      switchMap(requestedUUID => recommendations.getRecommendations(requestedUUID)
+        .pipe(take(1))
+      ))
+    this.hasRecommendations$ = this.recommendations$.pipe(
+      map(otherVideos => otherVideos.length > 0)
+    )
+  }
+
+  requestNewRecommendations (videoUUID: string) {
+    this.requestsForLoad$$.next(videoUUID)
+  }
+}