-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'
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
private videoCommentService: VideoCommentService
) {}
- ngOnInit () {
- if (this.video.commentsEnabled === true) {
- this.loadMoreComments()
+ ngOnChanges (changes: SimpleChanges) {
+ if (changes['video']) {
+ this.loadVideoComments()
}
}
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()
+ }
+ }
}
})
})
} else {
- (this.player as any).setVideoFiles(this.video.files)
+ this.player.peertube().setVideoFiles(this.video.files)
}
this.setVideoDescriptionHTML()
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
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)
class ResolutionMenuButton extends MenuButton {
label: HTMLElement
- constructor (player: VideoJSPlayer, options) {
+ constructor (player: videojs.Player, options) {
options.label = 'Quality'
super(player, options)
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
+++ /dev/null
-# Client code documentation
-
-The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/).
-
-
-## Technologies
-
- * [TypeScript](https://www.typescriptlang.org/) -> Language
- * [Angular](https://angular.io) -> JavaScript framework
- * [SASS](http://sass-lang.com/) -> CSS framework
- * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...)
- * [Bootstrap](http://getbootstrap.com/) -> CSS framework
- * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser
- * [VideoJS](http://videojs.com/) -> JavaScript player framework
-
-
-## Files
-
-The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`.
-The client modules description are in the [client/package.json](https://github.com/Chocobozzz/PeerTube/blob/master/client/package.json). There are many modules that are used to compile the web application in development or production mode.
-Here is the description of the useful `client` files directory:
-
- tslint.json -> TypeScript linter rules
- tsconfig.json -> TypeScript configuration for the compilation
- .bootstraprc -> Bootstrap configuration file (which module we need)
- config -> Webpack configuration files
- src
- |__ app -> TypeScript files for Angular application
- |__ assets -> static files (images...)
- |__ sass -> SASS files that are global for the application
- |__ standalone -> files outside the Angular application (embed HTML page...)
- |__ 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
- |__ account -> Account components (password change...)
- |__ admin -> Admin components (friends, users...)
- |__ core -> Core components/services
- |__ login -> Login component
- |__ shared -> Shared components/services (search component, REST services...)
- |__ videos -> Video components (list, watch, upload...)
- |__ app.component.{html,scss,ts} -> Main application component
- |__ app.module.ts -> Angular root module that imports all submodules we need
-
-## Conventions
-
-Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
-
-## Developing
-
- * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
- * Run `yarn install` 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.
-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
-
-
-
-## Newcomers
-
-The main client component is `app.component.ts`. You can begin to look at this file. Then you could navigate in the different submodules to see how components are built.
--- /dev/null
+# Client code documentation
+
+The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/).
+
+
+## Technologies
+
+ * [TypeScript](https://www.typescriptlang.org/) -> Language
+ * [Angular](https://angular.io) -> JavaScript framework
+ * [SASS](http://sass-lang.com/) -> CSS framework
+ * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...)
+ * [Bootstrap](http://getbootstrap.com/) -> CSS framework
+ * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser
+ * [VideoJS](http://videojs.com/) -> JavaScript player framework
+
+
+## Files
+
+The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`.
+The client modules description are in the [client/package.json](https://github.com/Chocobozzz/PeerTube/blob/master/client/package.json). There are many modules that are used to compile the web application in development or production mode.
+Here is the description of the useful `client` files directory:
+
+ tslint.json -> TypeScript linter rules
+ tsconfig.json -> TypeScript configuration for the compilation
+ .bootstraprc -> Bootstrap configuration file (which module we need)
+ config -> Webpack configuration files
+ src
+ |__ app -> TypeScript files for Angular application
+ |__ assets -> static files (images...)
+ |__ sass -> SASS files that are global for the application
+ |__ standalone -> files outside the Angular application (embed HTML page...)
+ |__ 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...)
+
+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...)
+ |__ 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
+
+Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html).
+
+## Developing
+
+ * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#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 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
+
+
+
+## Newcomers
+
+The main client component is `app.component.ts`. You can begin to look at this file. Then you could navigate in the different submodules to see how components are built.
--- /dev/null
+# Server code documentation
+
+The server is a web server developed with [TypeScript](https://www.typescriptlang.org/)/[Express](http://expressjs.com).
+
+
+## Technologies
+
+ * [TypeScript](https://www.typescriptlang.org/) -> Language
+ * [PostgreSQL](https://www.postgresql.org/) -> Database
+ * [Express](http://expressjs.com) -> Web server framework
+ * [Sequelize](http://docs.sequelizejs.com/en/v3/) -> SQL ORM
+ * [WebTorrent](https://webtorrent.io/) -> BitTorrent tracker and torrent creation
+ * [Mocha](https://mochajs.org/) -> Test framework
+
+
+## Files
+
+The server main file is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts).
+The server modules description are in the [package.json](https://github.com/Chocobozzz/PeerTube/blob/master/package.json) at the project root.
+All other server files are in the [server](https://github.com/Chocobozzz/PeerTube/tree/master/server) directory:
+
+ server.ts -> app initilization, main routes configuration (static routes...)
+ config -> server YAML configurations (for tests, production...)
+ scripts -> Scripts files for npm run
+ server
+ |__ 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, 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...)
+
+
+## Conventions
+
+Uses [JavaScript Standard Style](http://standardjs.com/).
+
+
+## Developing
+
+ * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
+ * Run `yarn install` at the root directory to install all the dependencies
+ * Run PostgreSQL and create the database `peertube_dev`.
+ * Run `npm run dev:server` to run the server, watch server files modifications and restart it automatically. The server (API + client) listen on `localhost:9000`.
+
+The `NODE_ENV=test` is set to speed up communications between instances (see [constants.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server/initializers/constants.ts)).
+
+`npm run help` gives you all available commands.
+
+If you want to test the decentralization feature, you can easily run 3 instances by running `npm run play`. The instances password are `test1`, `test2` and `test3`.
+
+
+## Architecture
+
+The server is composed by:
+
+ * a REST API (Express framework)
+ * a WebTorrent Tracker
+
+A video is seeded by the server with the [WebSeed](http://www.bittorrent.org/beps/bep_0019.html) protocol (HTTP).
+
+
+
+When a user uploads a video, the rest API create the torrent file and then adds it to its database.
+
+If a user wants to watch the video, the tracker will indicate all other users that are watching the video + the HTTP url for the WebSeed.
+
+## Newcomers
+
+The server entrypoint is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts). You can begin to look at this file.
+Then you can try to understand the [controllers](https://github.com/Chocobozzz/PeerTube/tree/master/server/controllers): they are the entrypoint of each API request.
+++ /dev/null
-# Server code documentation
-
-The server is a web server developed with [TypeScript](https://www.typescriptlang.org/)/[Express](http://expressjs.com).
-
-
-## Technologies
-
- * [TypeScript](https://www.typescriptlang.org/) -> Language
- * [PostgreSQL](https://www.postgresql.org/) -> Database
- * [Express](http://expressjs.com) -> Web server framework
- * [Sequelize](http://docs.sequelizejs.com/en/v3/) -> SQL ORM
- * [WebTorrent](https://webtorrent.io/) -> BitTorrent tracker and torrent creation
- * [Mocha](https://mochajs.org/) -> Test framework
-
-
-## Files
-
-The server main file is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts).
-The server modules description are in the [package.json](https://github.com/Chocobozzz/PeerTube/blob/master/package.json) at the project root.
-All other server files are in the [server](https://github.com/Chocobozzz/PeerTube/tree/master/server) directory:
-
- server.ts -> app initilization, main routes configuration (static routes...)
- config -> server YAML configurations (for tests, production...)
- scripts -> Scripts files for npm run
- server
- |__ 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...)
- |__ 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...)
-
-
-## Conventions
-
-Uses [JavaScript Standard Style](http://standardjs.com/).
-
-
-## Developing
-
- * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
- * Run `yarn install` at the root directory to install all the dependencies
- * Run PostgreSQL and create the database `peertube_dev`.
- * Run `npm run dev:server` to run the server, watch server files modifications and restart it automatically. The server (API + client) listen on `localhost:9000`.
-
-The `NODE_ENV=test` is set to speed up communications between instances (see [constants.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server/initializers/constants.ts)).
-
-`npm run help` gives you all available commands.
-
-If you want to test the decentralization feature, you can easily run 3 instances by running `npm run play`. The instances password are `test1`, `test2` and `test3`.
-
-
-## Architecture
-
-The server is composed by:
-
- * a REST API (Express framework)
- * a WebTorrent Tracker
-
-A video is seeded by the server with the [WebSeed](http://www.bittorrent.org/beps/bep_0019.html) protocol (HTTP).
-
-
-
-When a user uploads a video, the rest API create the torrent file and then adds it to its database.
-
-If a user wants to watch the video, the tracker will indicate all other users that are watching the video + the HTTP url for the WebSeed.
-
-## Newcomers
-
-The server entrypoint is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts). You can begin to look at this file.
-Then you can try to understand the [controllers](https://github.com/Chocobozzz/PeerTube/tree/master/server/controllers): they are the entrypoint of each API request.
projects / oweals / peertube.git / commitdiff
