Fix changing video in watch page

3 files changed, 34 insertions, 15 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 030dee9af..6025256de 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'
 import { ConfirmService } from '@app/core'
 import { NotificationsService } from 'angular2-notifications'
 import { VideoComment as VideoCommentInterface, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
@@ -15,7 +15,7 @@ import { VideoCommentService } from './video-comment.service'
   templateUrl: './video-comments.component.html',
   styleUrls: ['./video-comments.component.scss']
 })
-export class VideoCommentsComponent implements OnInit {
+export class VideoCommentsComponent implements OnChanges {
   @Input() video: VideoDetails
   @Input() user: User
 
@@ -37,9 +37,9 @@ export class VideoCommentsComponent implements OnInit {
     private videoCommentService: VideoCommentService
   ) {}
 
-  ngOnInit () {
-    if (this.video.commentsEnabled === true) {
-      this.loadMoreComments()
+  ngOnChanges (changes: SimpleChanges) {
+    if (changes['video']) {
+      this.loadVideoComments()
     }
   }
 
@@ -152,4 +152,21 @@ export class VideoCommentsComponent implements OnInit {
       this.deleteLocalCommentThread(commentChild, commentToDelete)
     }
   }
+
+  private loadVideoComments () {
+    if (this.video.commentsEnabled === true) {
+      // Reset all our fields
+      this.comments = []
+      this.threadComments = {}
+      this.threadLoading = {}
+      this.inReplyToCommentId = undefined
+      this.componentPagination = {
+        currentPage: 1,
+        itemsPerPage: 10,
+        totalItems: null
+      }
+
+      this.loadMoreComments()
+    }
+  }
 }
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 1c2317c52..c9bdd4dfc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -347,7 +347,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
             })
           })
         } else {
-          (this.player as any).setVideoFiles(this.video.files)
+          this.player.peertube().setVideoFiles(this.video.files)
         }
 
         this.setVideoDescriptionHTML()
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 34c993f3c..0a7651a81 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -5,18 +5,20 @@ import * as WebTorrent from 'webtorrent'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
 
+declare module 'video.js' {
+  interface Player {
+    peertube (): PeerTubePlugin
+  }
+}
+
 interface VideoJSComponentInterface {
-  _player: VideoJSPlayer
+  _player: videojs.Player
 
-  new (player: VideoJSPlayer, options?: any)
+  new (player: videojs.Player, options?: any)
 
   registerComponent (name: string, obj: any)
 }
 
-interface VideoJSPlayer extends videojs.Player {
-  peertube (): PeerTubePlugin
-}
-
 type PeertubePluginOptions = {
   videoFiles: VideoFile[]
   playerElement: HTMLVideoElement
@@ -45,7 +47,7 @@ const webtorrent = new WebTorrent({ dht: false })
 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
 class ResolutionMenuItem extends MenuItem {
 
-  constructor (player: VideoJSPlayer, options) {
+  constructor (player: videojs.Player, options) {
     options.selectable = true
     super(player, options)
 
@@ -64,7 +66,7 @@ const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuB
 class ResolutionMenuButton extends MenuButton {
   label: HTMLElement
 
-  constructor (player: VideoJSPlayer, options) {
+  constructor (player: videojs.Player, options) {
     options.label = 'Quality'
     super(player, options)
 
@@ -215,7 +217,7 @@ class PeerTubePlugin extends Plugin {
   private videoFiles: VideoFile[]
   private torrent: WebTorrent.Torrent
 
-  constructor (player: VideoJSPlayer, options: PeertubePluginOptions) {
+  constructor (player: videojs.Player, options: PeertubePluginOptions) {
     super(player, options)
 
     this.videoFiles = options.videoFiles