From 7f5f4152a4cd4fc328d6ae177d281ebe7e792dd3 Mon Sep 17 00:00:00 2001
From: Brad Johnson <bradsk88@gmail.com>
Date: Fri, 31 Aug 2018 09:19:21 -0600
Subject: 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
---
 .../recent-videos-recommendation.service.spec.ts   | 66 ++++++++++++++++++++++
 .../recent-videos-recommendation.service.ts        | 39 +++++++++++++
 .../recommendations/recommendations.module.ts      | 25 ++++++++
 .../recommendations/recommendations.service.ts     |  8 +++
 .../recommended-videos.component.html              | 11 ++++
 .../recommended-videos.component.ts                | 31 ++++++++++
 .../recommended-videos.store.spec.ts               | 22 ++++++++
 .../recommendations/recommended-videos.store.ts    | 32 +++++++++++
 8 files changed, 234 insertions(+)
 create mode 100644 client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts
 create mode 100644 client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
 create mode 100644 client/src/app/videos/recommendations/recommendations.module.ts
 create mode 100644 client/src/app/videos/recommendations/recommendations.service.ts
 create mode 100644 client/src/app/videos/recommendations/recommended-videos.component.html
 create mode 100644 client/src/app/videos/recommendations/recommended-videos.component.ts
 create mode 100644 client/src/app/videos/recommendations/recommended-videos.store.spec.ts
 create mode 100644 client/src/app/videos/recommendations/recommended-videos.store.ts

(limited to 'client/src/app/videos/recommendations')

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)
+  }
+}
-- 
cgit v1.2.3