3 files changed, 6 insertions, 35 deletions

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 2c8305777..16d657a65 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -197,19 +197,10 @@
           </div>
         </div>
 
-        <my-video-comments [video]="video" [user]="user"></my-video-comments>
-      </div>
-
-      <div class="ml-3 ml-sm-0 col-12 col-md-3 other-videos">
-        <div i18n class="title-page title-page-single">
-          Other videos
-        </div>
-
-        <div *ngFor="let video of otherVideosDisplayed">
-          <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
-        </div>
-      </div>
+      <my-video-comments [video]="video" [user]="user"></my-video-comments>
     </div>
+    <my-recommended-videos class="ml-3 ml-sm-0 col-12 col-md-3"
+                           [inputVideo]="video" [user]="user"></my-recommended-videos>
   </div>
 
 
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 d838ebe79..25643cfde 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -15,7 +15,6 @@ import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { RestExtractor, VideoBlacklistService } from '../../shared'
 import { VideoDetails } from '../../shared/video/video-details.model'
-import { Video } from '../../shared/video/video.model'
 import { VideoService } from '../../shared/video/video.service'
 import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './modal/video-download.component'
@@ -43,8 +42,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
   @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
 
-  otherVideosDisplayed: Video[] = []
-
   player: videojs.Player
   playerElement: HTMLVideoElement
   userRating: UserVideoRateType = null
@@ -60,7 +57,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   remoteServerDown = false
 
   private videojsLocaleLoaded = false
-  private otherVideos: Video[] = []
   private paramsSub: Subscription
 
   constructor (
@@ -96,16 +92,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.hasAlreadyAcceptedPrivacyConcern = true
     }
 
-    this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
-        .subscribe(
-          data => {
-            this.otherVideos = data.videos
-            this.updateOtherVideosDisplayed()
-          },
-
-          err => console.error(err)
-        )
-
     this.paramsSub = this.route.params.subscribe(routeParams => {
       const uuid = routeParams[ 'uuid' ]
 
@@ -365,8 +351,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.completeDescriptionShown = false
     this.remoteServerDown = false
 
-    this.updateOtherVideosDisplayed()
-
     if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) {
       const res = await this.confirmService.confirm(
         this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
@@ -474,12 +458,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setVideoLikesBarTooltipText()
   }
 
-  private updateOtherVideosDisplayed () {
-    if (this.video && this.otherVideos && this.otherVideos.length > 0) {
-      this.otherVideosDisplayed = this.otherVideos.filter(v => v.uuid !== this.video.uuid)
-    }
-  }
-
   private setOpenGraphTags () {
     this.metaService.setTitle(this.video.name)
 
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 7920147b2..5582ab40f 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -16,6 +16,7 @@ import { VideoWatchComponent } from './video-watch.component'
 import { NgxQRCodeModule } from 'ngx-qrcode2'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-blacklist.component'
+import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
 import { TextareaAutosizeModule } from 'ngx-textarea-autosize'
 
 @NgModule({
@@ -25,7 +26,8 @@ import { TextareaAutosizeModule } from 'ngx-textarea-autosize'
     ClipboardModule,
     NgbTooltipModule,
     NgxQRCodeModule,
-    TextareaAutosizeModule
+    TextareaAutosizeModule,
+    RecommendationsModule
   ],
 
   declarations: [