Fix changing video in watch page

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()
+    }
+  }
 }

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()

client/src/assets/player/peertube-videojs-plugin.ts

@@ -5,16 +5,18 @@ import * as WebTorrent from 'webtorrent'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
 
-interface VideoJSComponentInterface {
-  _player: VideoJSPlayer
-
-  new (player: VideoJSPlayer, options?: any)
-
-  registerComponent (name: string, obj: any)
+declare module 'video.js' {
+  interface Player {
+    peertube (): PeerTubePlugin
+  }
 }
 
-interface VideoJSPlayer extends videojs.Player {
-  peertube (): PeerTubePlugin
+interface VideoJSComponentInterface {
+  _player: videojs.Player
+
+  new (player: videojs.Player, options?: any)
+
+  registerComponent (name: string, obj: any)
 }
 
 type PeertubePluginOptions = {
@@ -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

support/doc/development/client/code.md

@@ -32,18 +32,21 @@ Here is the description of the useful `client` files directory:
     |__ index.html   -> root HTML file for our Angular application
     |__ main.ts      -> Main TypeScript file that boostraps our Angular application
     |__ polyfills.ts -> Polyfills imports (ES 2015...)
-    |__ vendor.ts    -> Vendor imports (Angular, Bootstrap...)
 
 Details of the Angular application file structure. It tries to follow [the official Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
 
     app
+    |__ +admin                       -> Admin components (followers, users...)
     |__ account                      -> Account components (password change...)
-    |__ admin                        -> Admin components (friends, users...)
     |__ core                         -> Core components/services
+    |__ header                       -> Header components (logo, search...)
     |__ login                        -> Login component
+    |__ menu                         -> Menu component (on the left)
     |__ shared                       -> Shared components/services (search component, REST services...)
+    |__ signup                       -> Signup form
     |__ videos                       -> Video components (list, watch, upload...)
     |__ app.component.{html,scss,ts} -> Main application component
+    |__ app-routing.module.ts        -> Main Angular routes
     |__ app.module.ts                -> Angular root module that imports all submodules we need
 
 ## Conventions
@@ -53,11 +56,11 @@ Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [An
 ## Developing
 
   * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
-  * Run `yarn install` at the root directory to install all the dependencies
+  * Run `yarn install --pure-lockfile` at the root directory to install all the dependencies
   * Run PostgreSQL and create the database `peertube_dev`.
   * Run `npm run dev:client` to compile the client, run the server, watch client files modifications and reload modules on the fly (you don't need to refresh manually the web browser). The API listen on `localhost:9000` and the client on `localhost:3000`.
 
-In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionnaly a SASS file.
+In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionally a SASS file.
 If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html).
 
 ## Components tree

support/doc/development/server/code.md

@@ -26,7 +26,7 @@ All other server files are in the [server](https://github.com/Chocobozzz/PeerTub
     |__ controllers  -> API routes/controllers files
     |__ helpers      -> functions used by different part of the project (logger, utils...)
     |__ initializers -> functions used at the server startup (installer, database, constants...)
-    |__ lib          -> library function (WebTorrent, OAuth2, friends logic...)
+    |__ lib          -> library function (WebTorrent, OAuth2, ActivityPub...)
     |__ middlewares  -> middlewares for controllers (requests validators, requests pagination...)
     |__ models       -> Sequelize models for each SQL tables (videos, users, accounts...)
     |__ tests        -> API tests and real world simulations (to test the decentralized feature...)