Add video recomandation by tags (#1001)

* Recommendation by tags (thx bradsk88)

Thx bradsk88 for the help.

* Prefer jest-preset-angular to skip need for babel config

* Fix jest

8 files changed, 51 insertions, 27 deletions

diff --git a/client/src/app/shared/video/recommendation-info.model.ts b/client/src/app/shared/video/recommendation-info.model.ts
new file mode 100644
index 000000000..0233563bb
--- /dev/null
+++ b/client/src/app/shared/video/recommendation-info.model.ts
@@ -0,0 +1,4 @@
+export interface RecommendationInfo {
+  uuid: string
+  tags?: string[]
+}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 26c9e977e..69f306519 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -14,7 +14,8 @@
             </div>
 
             <div class="form-group">
-              <label i18n class="label-tags">Tags</label> <span i18n>(press Enter to add)</span>
+              <label i18n class="label-tags">Tags</label>
+              <my-help i18n-preHtml preHtml="Tags could be used to suggest relevant recommendations.</br>Press Enter to add a new tag."></my-help>
               <tag-input
                 [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
                 formControlName="tags" maxItems="5" modelAsStrings="true"
@@ -223,4 +224,4 @@
 
 <my-video-caption-add-modal
   #videoCaptionAddModal [existingCaptions]="existingCaptions" (captionAdded)="onCaptionAdded($event)"
-></my-video-caption-add-modal>
\ No newline at end of file
+></my-video-caption-add-modal>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 937f25eb6..3b6b5d8ed 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -200,8 +200,7 @@
       <my-video-comments [video]="video" [user]="user"></my-video-comments>
     </div>
     <my-recommended-videos class="col-12 col-lg-3"
-                           [inputVideo]="video" [user]="user"></my-recommended-videos>
-    </div>
+      [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
   </div>
 
   <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
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
index f9055b82c..698b2e27b 100644
--- a/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts
+++ b/client/src/app/videos/recommendations/recent-videos-recommendation.service.spec.ts
@@ -21,7 +21,7 @@ describe('"Recent Videos" Recommender', () => {
         { uuid: 'uuid2' }
       ]
       getVideosMock.mockReturnValueOnce(of({ videos: vids }))
-      const result = await service.getRecommendations('uuid1').toPromise()
+      const result = await service.getRecommendations({ uuid: 'uuid1' }).toPromise()
       const uuids = result.map(v => v.uuid)
       expect(uuids).toEqual(['uuid2'])
       done()
@@ -36,7 +36,7 @@ describe('"Recent Videos" Recommender', () => {
         { uuid: 'uuid7' }
       ]
       getVideosMock.mockReturnValueOnce(of({ videos: vids }))
-      const result = await service.getRecommendations('uuid1').toPromise()
+      const result = await service.getRecommendations({ uuid: 'uuid1' }).toPromise()
       expect(result.length).toEqual(5)
       done()
     })
@@ -51,12 +51,12 @@ describe('"Recent Videos" Recommender', () => {
       ]
       getVideosMock
         .mockReturnValueOnce(of({ videos: vids }))
-      const result = await service.getRecommendations('uuid1').toPromise()
+      const result = await service.getRecommendations({ uuid: '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()
+      await service.getRecommendations({ uuid: 'uuid1' }).toPromise()
       let expectedSize = service.pageSize + 1
       let params = { currentPage: jasmine.anything(), itemsPerPage: expectedSize }
       expect(getVideosMock).toHaveBeenCalledWith(params, jasmine.anything())
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 708d67699..4723f7fd0 100644
--- a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
+++ b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
@@ -1,9 +1,12 @@
 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 { RecommendationInfo } from '@app/shared/video/recommendation-info.model'
+import { VideoService } from '@app/shared/video/video.service'
 import { map } from 'rxjs/operators'
 import { Observable } from 'rxjs'
+import { SearchService } from '@app/search/search.service'
+import { AdvancedSearch } from '@app/search/advanced-search.model'
 
 /**
  * Provides "recommendations" by providing the most recently uploaded videos.
@@ -14,26 +17,40 @@ export class RecentVideosRecommendationService implements RecommendationService
   readonly pageSize = 5
 
   constructor (
-    @Inject(VideoService) private videos: VideosProvider
+    private videos: VideoService,
+    private searchService: SearchService
   ) {
   }
 
-  getRecommendations (uuid: string): Observable<Video[]> {
-    return this.fetchPage(1)
+  getRecommendations (recommendation: RecommendationInfo): Observable<Video[]> {
+    return this.fetchPage(1, recommendation)
       .pipe(
         map(vids => {
-          const otherVideos = vids.filter(v => v.uuid !== uuid)
+          const otherVideos = vids.filter(v => v.uuid !== recommendation.uuid)
           return otherVideos.slice(0, this.pageSize)
         })
       )
   }
 
-  private fetchPage (page: number): Observable<Video[]> {
+  private fetchPage (page: number, recommendation: RecommendationInfo): Observable<Video[]> {
     let pagination = { currentPage: page, itemsPerPage: this.pageSize + 1 }
-    return this.videos.getVideos(pagination, '-createdAt')
-      .pipe(
-        map(v => v.videos)
-      )
+    if (!recommendation.tags) {
+      return this.videos.getVideos(pagination, '-createdAt')
+        .pipe(
+          map(v => v.videos)
+        )
+    }
+    if (recommendation.tags.length === 0) {
+      return this.videos.getVideos(pagination, '-createdAt')
+        .pipe(
+          map(v => v.videos)
+        )
+    }
+    return this.searchService.searchVideos('',
+      pagination,
+      new AdvancedSearch({ tagsOneOf: recommendation.tags.join(','), sort: '-createdAt' })
+    ).pipe(
+      map(v => v.videos)
+    )
   }
-
 }
diff --git a/client/src/app/videos/recommendations/recommendations.service.ts b/client/src/app/videos/recommendations/recommendations.service.ts
index 44cbda9b7..114a808b5 100644
--- a/client/src/app/videos/recommendations/recommendations.service.ts
+++ b/client/src/app/videos/recommendations/recommendations.service.ts
@@ -1,8 +1,9 @@
 import { Video } from '@app/shared/video/video.model'
+import { RecommendationInfo } from '@app/shared/video/recommendation-info.model'
 import { Observable } from 'rxjs'
 
 export type UUID = string
 
 export interface RecommendationService {
-  getRecommendations (uuid: UUID): Observable<Video[]>
+  getRecommendations (recommendation: RecommendationInfo): Observable<Video[]>
 }
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts
index aa4dd0ee2..c6c1d9e5d 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnChanges } from '@angular/core'
 import { Observable } from 'rxjs'
 import { Video } from '@app/shared/video/video.model'
+import { RecommendationInfo } from '@app/shared/video/recommendation-info.model'
 import { RecommendedVideosStore } from '@app/videos/recommendations/recommended-videos.store'
 import { User } from '@app/shared'
 
@@ -9,7 +10,7 @@ import { User } from '@app/shared'
   templateUrl: './recommended-videos.component.html'
 })
 export class RecommendedVideosComponent implements OnChanges {
-  @Input() inputVideo: Video
+  @Input() inputRecommendation: RecommendationInfo
   @Input() user: User
 
   readonly hasVideos$: Observable<boolean>
@@ -23,8 +24,8 @@ export class RecommendedVideosComponent implements OnChanges {
   }
 
   public ngOnChanges (): void {
-    if (this.inputVideo) {
-      this.store.requestNewRecommendations(this.inputVideo.uuid)
+    if (this.inputRecommendation) {
+      this.store.requestNewRecommendations(this.inputRecommendation)
     }
   }
 
diff --git a/client/src/app/videos/recommendations/recommended-videos.store.ts b/client/src/app/videos/recommendations/recommended-videos.store.ts
index 689adeb1f..eb5c9867f 100644
--- a/client/src/app/videos/recommendations/recommended-videos.store.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.store.ts
@@ -1,6 +1,7 @@
 import { Inject, Injectable } from '@angular/core'
 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'
@@ -12,13 +13,13 @@ import { map, switchMap, take } from 'rxjs/operators'
 export class RecommendedVideosStore {
   public readonly recommendations$: Observable<Video[]>
   public readonly hasRecommendations$: Observable<boolean>
-  private readonly requestsForLoad$$ = new ReplaySubject<UUID>(1)
+  private readonly requestsForLoad$$ = new ReplaySubject<RecommendationInfo>(1)
 
   constructor (
     @Inject(RecentVideosRecommendationService) private recommendations: RecommendationService
   ) {
     this.recommendations$ = this.requestsForLoad$$.pipe(
-      switchMap(requestedUUID => recommendations.getRecommendations(requestedUUID)
+      switchMap(requestedRecommendation => recommendations.getRecommendations(requestedRecommendation)
         .pipe(take(1))
       ))
     this.hasRecommendations$ = this.recommendations$.pipe(
@@ -26,7 +27,7 @@ export class RecommendedVideosStore {
     )
   }
 
-  requestNewRecommendations (videoUUID: string) {
-    this.requestsForLoad$$.next(videoUUID)
+  requestNewRecommendations (recommend: RecommendationInfo) {
+    this.requestsForLoad$$.next(recommend)
   }
 }